/**
 * @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,
:host {
  /* ============================================
      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: var(--colors-gray-400);
  --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: #525252;
  --colors-gray-500: #737373;
  --colors-gray-400: #a3a3a3;
  --colors-gray-border: #94979c;
  --colors-gray-300: #d6d6d6;
  --colors-gray-200: #e5e5e5;
  --colors-gray-100: #f5f5f5;
  /* Segment control selected pill (Nova Web — Figma Gray dark mode 200) */
  --fragno-segment-pill-grey: #ececed;

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

  /* ============================================
      COLORS - Blue (Interactive / legacy blue) — Nova "Blue dark" scale
      ============================================ */
  --colors-blue-25: #f5f8ff;
  --colors-blue-50: #eff4ff;
  --colors-blue-100: #d1e0ff;
  --colors-blue-200: #b2ccff;
  --colors-blue-300: #84adff;
  --colors-blue-400: #528bff;
  --colors-blue-500: #2970ff;
  --colors-blue-600: #155eef;
  --colors-blue-700: #004eeb;
  --colors-blue-800: #0040c1;
  --colors-blue-900: #00359e;
  --colors-blue-950: #002266;

  /* ============================================
      COLORS - Red (Error/Danger / legacy red) — Nova "Error" scale
      ============================================ */
  --colors-red-25: #fffbfa;
  --colors-red-50: #fef3f2;
  --colors-red-100: #fee4e2;
  --colors-red-200: #fecdca;
  --colors-red-300: #fda29b;
  --colors-red-400: #f97066;
  --colors-red-500: #f04438;
  --colors-red-600: #d92d20;
  --colors-red-700: #b42318;
  --colors-red-800: #912018;
  --colors-red-900: #7a271a;
  --colors-red-950: #55160c;

  /* ============================================
      COLORS - Green (Success)
      ============================================ */
  --colors-green-50: #edfcf2;
  /* Nova | Web Green 100 — light tint behind green icons and status dots.
     Nova's 600/700 (#099250, #087443) differ from the legacy values below, so
     the components that need them name those separately. */
  --colors-green-100: #d3f8df;
  --colors-green-300: #73e2a3;
  --colors-green-600: #32a467;
  --colors-green-700: #2d8a5c;
  --colors-green-800: #095c37;
  /* Green FOREGROUND (alert text, community-card icon glyph): #095c37 here, same as green-800 so the
     light theme is byte-identical; inverts to a light green in tokens-dark while the green-800
     primitive stays dark for its background uses. */
  --colors-green-fg: #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;
  /* The gradient is a fixed-chroma brand surface — identical in light and dark (see tokens-dark.css)
     — so its label must be fixed too. It cannot use --colors-primary-text, which flips to #141414 in
     dark and rendered near-black on the dark green (~1.9:1, worse than the disabled state below). */
  --colors-green-gradient-text: var(--colors-alpha-white-100);
  --colors-green-gradient-text-disabled: var(--colors-alpha-white-70);
  --colors-green-gradient-border-disabled: var(--colors-alpha-white-25);

  /* ============================================
      COLORS - Yellow/Orange (Warning) — Nova "Warning" scale
      ============================================ */
  --colors-yellow-25: #fffcf5;
  --colors-yellow-50: #fffaeb;
  --colors-yellow-100: #fef0c7;
  --colors-yellow-200: #fedf89;
  --colors-yellow-300: #fec84b;
  --colors-yellow-400: #fdb022;
  --colors-yellow-500: #f79009;
  --colors-yellow-600: #dc6803;
  --colors-yellow-700: #b54708;
  --colors-yellow-800: #93370d;
  --colors-yellow-900: #7a2e0e;
  --colors-yellow-950: #4e1d09;

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

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

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

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

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

  /* ============================================
      TYPOGRAPHY - Font Families
      ============================================ */
  --font-family-body:
    "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-2xl: 4.5rem; /* 72px - Nova display 2xl */
  --font-size-hero: 7.5rem; /* 120px - Nova hero */
  --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-2xl: 5.625rem; /* 90px - Nova display 2xl */
  --line-height-display-3xl: 7rem; /* 112px - Nova hero line height */
  --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-2xl: -0.18rem; /* -2.88px = -4% of 72px - Nova display 2xl (tighter) */
  --letter-spacing-hero: -0.3rem; /* -4.8px = -4% of 120px - Nova hero (tighter) */
  --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;

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

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

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

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

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

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

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

  /* ============================================
      SIDEBAR (Nova | Web)
      ============================================ */
  /* Selected/active row fill. Nova specifies #ECECED here, which is NOT --colors-gray-200
     (#e5e5e5) — the spec's "Gray dark mode 200" and fragno's gray-200 disagree, so the literal is
     kept rather than silently re-pointed at the palette. Authored as a token (not inline in
     fragno-dev-portal.css) so tokens-dark.css can override it; the hover fill next to it already
     themed via --colors-gray-100, which left dark mode with a near-white selected row under white
     text. The ladder is bg → hover → selected in both themes:
       light  #ffffff → #f5f5f5 → #ececed  (descending)
       dark   #141414 → #2a2a2a → #424242  (ascending) */
  --sidebar-selected-surface: #ececed;

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

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

  --card-shadow-default: 0 1px 4px rgba(0, 0, 0, 0.02), 0 1px 2px -1px rgba(10, 13, 18, 0.06);
  --card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.06), 0 2px 4px -1px rgba(10, 13, 18, 0.08);

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

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

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

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

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

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

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

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

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

  /* ============================================
      RIBBON BANNER (Nova | Web – Figma 67321:8416)
      ============================================ */
  --ribbon-banner-content-max-width: 45rem; /* 720px */
  --ribbon-banner-text-column-max-width: 40.25rem; /* 644px */
  --ribbon-banner-padding-x: var(--spacing-2xl); /* 20px */
  --ribbon-banner-gap-section: var(--spacing-lg); /* 12px 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 SYSTEM BUILDING BLOCKS (Nova | Web – Figma 74383:66170,
      74113:67234, 74149:24194, 74296:80205, 74296:79897)
      Status badge, icon tile, item block (+ group), list item (+ block).
      ============================================ */
  /* Framed variants (outline / grey) shared by item block and list item block,
     so the two stay aligned when they sit side by side on one card. Nova draws
     the greys as #f7f7f7 and #f0f0f1; one grey until a designer says otherwise. */
  --card-block-radius: var(--radius-xl); /* 16px — Nova radius 2xl */
  --card-block-border-color: var(--colors-gray-300);
  --card-block-surface-grey: var(--colors-gray-50);

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

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

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

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



/* Card custom elements: block layout so they behave as grid/flex items */
fragno-card,
fragno-offer-card,
fragno-featured-card,
fragno-content-card,
fragno-community-card,
fragno-pagination,
fragno-pagination-dot-group,
fragno-pagination-pages,
fragno-tabs,
fragno-segment-control,
fragno-group-filters {
  display: flex;
}

fragno-tabs {
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  min-width: 0;
}

fragno-segment-control {
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  min-width: 0;
}

fragno-group-filters {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

fragno-group-filters-group {
  display: grid;
  grid-template-columns: minmax(0, auto) auto;
  grid-template-rows: auto auto;
  column-gap: var(--group-filters-row-gap, var(--spacing-lg, 0.75rem));
  row-gap: var(--group-filters-group-gap, var(--spacing-lg, 0.75rem));
  align-items: center;
  min-width: 0;
}

fragno-pagination,
fragno-pagination-dot-group {
  width: max-content;
  max-width: 100%;
}

fragno-pagination-pages {
  display: flex;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Single child (card shell or card-href link): stretch to grid/flex parent width */
fragno-offer-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: var(--colors-blue-600, #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 var(--colors-blue-600, #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;
}

/* ============================================
   SHARED POPOVER MOTION
   Entrance for popovers opened from an anchored
   trigger — the account menu, quick menu, and
   inline search all fade in while rising from
   below rather than revealing from the top, to
   match how the native app treats these.

   Reduced motion is honored two ways, because
   each covers the other's blind spot:

   1. The block below neutralizes the tokens the
      keyframe and the three rules read. It sits
      on `:root`, so it shares no selector with
      those rules and cannot lose a source-order
      tiebreak — it holds wherever they are moved
      to, and covers any popover added later that
      reuses these tokens.
   2. Each animation rule is still followed by its
      own `animation: none` opt-out. Those repeat
      the rule's own selector, so they win only on
      source order and must stay adjacent to it —
      but they also catch a rule that hardcodes a
      duration instead of reading the token, and
      hold even if something overrides the token
      at higher specificity.
   ============================================ */
@keyframes fragno-popover-rise {
  from {
    opacity: 0;
    transform: translateY(var(--popover-rise-distance, 10px));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --popover-rise-duration: 0s;
    --popover-rise-distance: 0px;
  }
}

/* ============================================
   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;
  /* Not --colors-primary-text: that token inverts to #141414 in dark (correct for the primary button,
     whose surface inverts too), but this gradient is identical in both themes, so the label has to be
     theme-independent white. See --colors-green-gradient-text in tokens-light.css / tokens-dark.css. */
  color: var(--colors-green-gradient-text, rgba(255, 255, 255, 1));
}

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

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

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

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

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

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

/* ============================================
   FILTERS (chip row — fragno-filters + fragno-button)
   ============================================ */

.fragno-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  align-items: center;
  box-sizing: border-box;
}

.fragno-filters__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}

.fragno-filters--background {
  background: var(--color-bg-secondary);
  padding: var(--spacing-lg);
  border-radius: var(--radius-md);
}

/* Filter chip labels (light DOM): fragno-button is shadow-off by default, so descendant
   selectors reach .fragno-button__text. Nova Life Figma 2px inner text padding on all chips.
   If fragno-button shadow is opted in, spacing comes from button CSS inside the shadow root. */
.fragno-filters > fragno-button:not([shadow]) .fragno-button__text {
  padding-inline: var(--spacing-xxs, 2px);
}

/* Trailing icon: flex gap only (reset margin from .fragno-button__icon--trailing) */
.fragno-filters > fragno-button:not([shadow]) .fragno-button__icon--trailing {
  margin-inline-start: 0;
}

/* ============================================
   FILTER OVERLAY (fragno-filter-overlay + fragno-filter-overlay-option)
   Nova / Figma: generous panel padding; 24–32px between header ↔ grid ↔ footer; 12–16px grid gutters.
   ============================================ */

fragno-filter-overlay {
  display: block;
  /* Panel width (Nova layout width-md 560px) — room for label + thumb + trailing control in one row */
  --filter-overlay-max-width: 560px;
  /* Nova Web Filter panel surfaces (override for white-only themes) */
  --filter-overlay-surface-bg: var(--colors-gray-50, #f7f7f7);
  --filter-overlay-option-bg: var(--colors-gray-100, #f5f5f5);
  /* Tunable via tokens — defaults match Community filter panel spacing */
  --filter-overlay-padding: var(--spacing-4xl);
  --filter-overlay-header-padding-x: var(--spacing-5xl);
  --filter-overlay-section-gap: var(--spacing-3xl);
  --filter-overlay-footer-gap: var(--spacing-4xl);
  /* Tighter space between description and the scrolling option list */
  --filter-overlay-header-scroll-gap: var(--spacing-md);
  /* Space between option list and footer actions */
  --filter-overlay-scroll-footer-gap: var(--filter-overlay-footer-gap, var(--spacing-3xl));
  /* Taller panel so ~8 list rows (2×4) fit without scrolling on common viewports */
  --filter-overlay-max-height: min(92vh, 48rem);
  /* Figma gutters ~12–16px; default to xl (16px) for breathing room */
  --filter-overlay-grid-gap: var(--spacing-xl);
}

.fragno-filter-overlay__dialog {
  width: min(100vw - var(--spacing-4xl), var(--filter-overlay-max-width, 560px));
  max-height: var(--filter-overlay-max-height, min(92vh, 48rem));
  padding: 0;
  border: none;
  border-radius: var(--filter-overlay-radius, var(--modal-border-radius, var(--radius-5xl)));
  background: transparent;
  box-sizing: border-box;
  color: var(--colors-gray-900, #141414);
  overflow: hidden;
}

.fragno-filter-overlay__dialog[open] {
  display: flex;
  flex-direction: column;
}

.fragno-filter-overlay__dialog::backdrop {
  background: var(--modal-backdrop-color, rgba(0, 0, 0, 0.4));
  /* Nova Web: backdrop-blur-lg (24px) on filter panel */
  backdrop-filter: blur(1.5rem);
  -webkit-backdrop-filter: blur(1.5rem);
}

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

.fragno-filter-overlay__surface {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  max-height: var(--filter-overlay-max-height, min(92vh, 48rem));
  padding: var(--filter-overlay-padding, var(--spacing-4xl));
  /* Nova Web Filter panel: off-white surface (not pure white) */
  background: var(--filter-overlay-surface-bg, var(--colors-gray-50, #f7f7f7));
  border-radius: var(--filter-overlay-radius, var(--modal-border-radius, var(--radius-5xl)));
  box-sizing: border-box;
  box-shadow: var(--modal-shadow, 0 var(--spacing-xl) var(--spacing-4xl) rgba(10, 13, 18, 0.12));
  position: relative;
  overflow: hidden;
}

.fragno-filter-overlay__close {
  position: absolute;
  top: var(--spacing-lg, 0.75rem);
  right: var(--spacing-lg, 0.75rem);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: var(--radius-md, 0.5rem);
  background: transparent;
  color: var(--colors-gray-700, #424242);
  cursor: pointer;
}

.fragno-filter-overlay__close:hover {
  background: var(--colors-gray-100, #f5f5f5);
  color: var(--colors-gray-900, #141414);
}

.fragno-filter-overlay__close:focus-visible {
  outline: 2px solid var(--colors-focus-ring, #155eef);
  outline-offset: 2px;
}

.fragno-filter-overlay__header {
  flex-shrink: 0;
  text-align: center;
  padding: var(--spacing-2xl) var(--filter-overlay-header-padding-x) 0;
  margin-bottom: var(--filter-overlay-header-scroll-gap, var(--spacing-lg));
}

.fragno-filter-overlay--has-header .fragno-filter-overlay__header {
  padding-top: var(--spacing-md);
}

.fragno-filter-overlay__header-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--spacing-xl);
  /* Figma: stroke-only ring — no filled chip behind the icon */
  color: var(--colors-gray-400, #a3a3a3);
  background: transparent;
  border: none;
  padding: 0;
  box-sizing: border-box;
}

.fragno-filter-overlay__header-icon svg,
.fragno-filter-overlay__header-icon img {
  display: block;
  width: 2rem;
  height: 2rem;
  max-width: 2rem;
  max-height: 2rem;
}

/* Left-aligned header (align="start"): header, icon chip, heading, and
   description hug the leading edge, matching the grouped Figma variant. The
   header's extra horizontal padding is removed so it lines up with the options. */
.fragno-filter-overlay--align-start {
  --filter-overlay-header-padding-x: 0px;
  /* More breathing room between the header and the first group */
  --filter-overlay-header-scroll-gap: var(--spacing-3xl);
}

.fragno-filter-overlay--align-start .fragno-filter-overlay__header {
  text-align: left;
}

.fragno-filter-overlay--align-start .fragno-filter-overlay__header-icon {
  width: fit-content;
  margin-left: 0;
  margin-right: auto;
  /* Nova grouped variant: icon sits in a white rounded chip */
  background: var(--color-bg-primary, #ffffff);
  padding: var(--spacing-lg, 0.75rem);
  border-radius: var(--radius-2xl, 1rem);
  color: var(--colors-gray-700, #424242);
}

.fragno-filter-overlay--align-start .fragno-filter-overlay__description {
  margin-left: 0;
  margin-right: 0;
}

.fragno-filter-overlay__heading {
  margin: 0 0 var(--spacing-lg);
  font-family: var(--font-family-display, "Inter", sans-serif);
  font-size: var(--font-size-display-2xs);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-display-2xs);
  letter-spacing: var(--letter-spacing-display-2xs);
  color: var(--colors-gray-900, #141414);
}

.fragno-filter-overlay__description {
  margin: 0;
  font-family: var(--font-family-body, "Inter", sans-serif);
  font-size: var(--font-size-text-md);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-text-md);
  letter-spacing: var(--letter-spacing-text-md);
  color: var(--colors-gray-600, #525252);
  max-width: min(var(--ribbon-banner-content-max-width, 45rem), 100%);
  margin-left: auto;
  margin-right: auto;
}

.fragno-filter-overlay__form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  gap: 0;
}

.fragno-filter-overlay__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}

.fragno-filter-overlay__fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

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

.fragno-filter-overlay__options {
  display: flex;
  flex-direction: column;
  gap: var(--filter-overlay-group-gap, var(--spacing-3xl));
}

.fragno-filter-overlay__group {
  display: flex;
  flex-direction: column;
  gap: var(--filter-overlay-group-label-gap, var(--spacing-lg));
}

.fragno-filter-overlay__group-label {
  margin: 0;
  font-family: var(--font-family-body, "Inter", sans-serif);
  font-size: var(--font-size-text-lg, 1.125rem);
  font-weight: var(--font-weight-medium, 500);
  line-height: var(--line-height-text-lg, 1.75rem);
  letter-spacing: var(--letter-spacing-text-lg, -0.005625rem);
  color: var(--colors-gray-800, #292929);
  text-align: left;
}

.fragno-filter-overlay__grid {
  display: grid;
  grid-template-columns: repeat(var(--filter-overlay-columns, 2), minmax(0, 1fr));
  gap: var(--filter-overlay-grid-gap, var(--spacing-lg));
  padding: 0;
}

@media (max-width: 40rem) {
  .fragno-filter-overlay__grid {
    grid-template-columns: repeat(var(--filter-overlay-columns-mobile, 1), minmax(0, 1fr));
  }
}

.fragno-filter-overlay__footer {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: flex-start;
  gap: var(--spacing-xl);
  margin-top: var(--filter-overlay-scroll-footer-gap, var(--spacing-3xl));
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--colors-gray-200, #e5e5e5);
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
}

.fragno-filter-overlay__footer fragno-button {
  flex: 1 1 0;
  min-width: 0;
  display: block;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

.fragno-filter-overlay__footer fragno-button .fragno-button {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

fragno-filter-overlay-option {
  display: block;
}

.fragno-filter-overlay-option {
  display: block;
  margin: 0;
  position: relative;
}

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

.fragno-filter-overlay-option {
  cursor: pointer;
}

.fragno-filter-overlay-option__surface {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-lg);
  min-height: 3.25rem;
  padding: var(--spacing-md) var(--spacing-lg) var(--spacing-md) var(--spacing-md);
  border: 1px solid var(--colors-gray-200, #e5e5e5);
  border-radius: var(--filter-overlay-option-radius, var(--radius-xl));
  /* Figma: chip on very light gray (slightly above panel gray-50) */
  background: var(--filter-overlay-option-bg, var(--colors-gray-100, #f5f5f5));
  box-sizing: border-box;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.fragno-filter-overlay-option:has(.fragno-filter-overlay-option__input:focus-visible)
  .fragno-filter-overlay-option__surface {
  outline: 2px solid var(--colors-focus-ring, #155eef);
  outline-offset: 2px;
}

.fragno-filter-overlay-option:has(.fragno-filter-overlay-option__input:checked) .fragno-filter-overlay-option__surface {
  border-width: 2px;
  border-color: var(--colors-gray-900, #141414);
  padding: calc(var(--spacing-md) - 1px) calc(var(--spacing-lg) - 1px) calc(var(--spacing-md) - 1px)
    calc(var(--spacing-md) - 1px);
}

/* Compact pill options (Nova grouped / multi-column): centered chip with a
   small leading placeholder, single-line label, and no trailing +/check. */
.fragno-filter-overlay--compact .fragno-filter-overlay-option__surface {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm, 0.375rem);
  min-height: 0;
  padding: 0.625rem var(--spacing-xl, 1rem);
  border-radius: var(--radius-full, 9999px);
  border-color: var(--colors-gray-400, #a3a3a3);
  background: transparent;
}

.fragno-filter-overlay--compact
  .fragno-filter-overlay-option:has(.fragno-filter-overlay-option__input:checked)
  .fragno-filter-overlay-option__surface {
  padding: calc(0.625rem - 1px) calc(var(--spacing-xl, 1rem) - 1px);
}

.fragno-filter-overlay--compact .fragno-filter-overlay-option__thumb {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: var(--radius-full, 9999px);
  background: transparent;
}

.fragno-filter-overlay--compact .fragno-filter-overlay-option__label {
  flex: 0 1 auto;
  display: block;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: var(--font-weight-medium, 500);
  text-align: center;
}

.fragno-filter-overlay--compact .fragno-filter-overlay-option__trailing {
  display: none;
}

.fragno-filter-overlay--compact .fragno-filter-overlay-option__placeholder {
  background: transparent;
  border: 1.5px solid var(--colors-gray-400, #a3a3a3);
  border-radius: var(--radius-full, 9999px);
  box-sizing: border-box;
}

.fragno-filter-overlay-option__thumb {
  flex-shrink: 0;
  width: var(--spacing-4xl, 2rem);
  height: var(--spacing-4xl, 2rem);
  border-radius: var(--filter-overlay-thumb-radius, var(--radius-lg));
  overflow: hidden;
  background: var(--filter-overlay-option-bg, var(--colors-gray-100, #f5f5f5));
  box-sizing: border-box;
}

.fragno-filter-overlay-option__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fragno-filter-overlay-option__img[hidden] {
  display: none;
}

.fragno-filter-overlay-option__placeholder {
  display: block;
  width: 100%;
  height: 100%;
  /* Figma: faint diagonal hatch in the thumb when no image */
  background: repeating-linear-gradient(
    -45deg,
    var(--colors-gray-200, #e5e5e5),
    var(--colors-gray-200, #e5e5e5) 2px,
    var(--colors-gray-100, #f5f5f5) 2px,
    var(--colors-gray-100, #f5f5f5) 5px
  );
}

.fragno-filter-overlay-option__img:not([hidden]) ~ .fragno-filter-overlay-option__placeholder {
  display: none;
}

.fragno-filter-overlay-option__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-family: var(--font-family-body, "Inter", sans-serif);
  font-size: var(--font-size-text-md);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-text-md);
  letter-spacing: var(--letter-spacing-text-md);
  color: var(--colors-gray-900, #141414);
}

.fragno-filter-overlay-option__trailing {
  flex-shrink: 0;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
}

.fragno-filter-overlay-option__trailing svg {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
}

/* ============================================
   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.005rem;
  /* Token, not the #292929 literal this replaced: the literal is the light theme's gray-800, so on
     a dark page the label rendered near-black on a dark surface (1.24:1 against the #1a1a1a
     canvas — effectively invisible). --colors-gray-800 is the same #292929 in light and #d4d4d4 in
     dark, so light is unchanged and dark becomes readable. */
  color: var(--colors-gray-800, #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: var(--colors-secondary-default, #ffffff);
  /* gray-500 is #737373 in BOTH sheets, so this is a pure tokenisation — but it documents that the
     field border is deliberately theme-independent, unlike the text inside it. */
  border: 1px solid var(--colors-gray-500, #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: var(--colors-gray-500, #737373);
}

.fragno-input__container--filled {
  border-color: var(--colors-gray-500, #737373);
}

.fragno-input__container--focused {
  border: 2px solid var(--colors-blue-500, #2970ff);
  box-shadow:
    0 1px 2px 0 rgba(23, 44, 67, 0.15),
    /* The ring's inner gap must be the surface, not a fixed white, or focusing a field on a dark page
       draws a white band around it. Same fix as fragno-dropdown and the green-gradient button. */
    0 0 0 2px var(--colors-secondary-default, #ffffff),
    0 0 0 0.25rem var(--colors-blue-600, #155eef);
}

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

.fragno-input__container--error {
  border: 1.4px solid var(--colors-red-600, #d92d20);
}

.fragno-input__container--disabled {
  /* gray-200: #e5e5e5 in light (unchanged), #424242 in dark — a disabled field was a light-grey slab
     on a dark page. The #94979c border is off-scale but mid-grey, so it reads in either theme. */
  background-color: var(--colors-gray-200, #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);
  /* Knob stays white in both themes — it reads against the coloured/grey track. */
  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;
  /* The value the user types. #141414 is the light theme's gray-900, and the container behind it is
     --colors-secondary-default (#1a1a1a in dark) — so on a dark page typed text was black on black
     (1.1:1) and effectively invisible. The token is that same #141414 in light and #ffffff in dark.
     Same class of fix as --size-sm's label below and the base label above. */
  color: var(--colors-gray-900, #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 {
  /* #424242 is light's gray-700 (dark: #e5e5e5); as a literal it was near-invisible on dark too. */
  color: var(--colors-gray-700, #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.004375rem;
  /* The "Show"/"Hide" affordance sits inside the field, so it disappeared on dark exactly as the
     typed value did. Same token, same #141414 in light. */
  color: var(--colors-gray-900, #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);
  /* #d92d20 IS light's red-600; the token lifts it to #FF6B6B in dark, where the literal sat at
     ~3.6:1 on the #1a1a1a surface — under AA for this 14px error text. */
  color: var(--colors-red-600, #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.004375rem;
  white-space: pre-wrap;
}

/* Input size: small (sm) — Nova Input | Static */
.fragno-input--size-sm .fragno-input__label {
  font-size: var(--font-size-text-sm, 0.875rem);
  line-height: var(--line-height-text-sm, 1.25rem);
  letter-spacing: -0.004375rem;
  /* Same fix as the base label above, but a DIFFERENT token on purpose: this size's label was
     already #141414 (gray-900) pre-dark-theme — one shade darker than the base label's #292929
     (gray-800) — per the "Nova Input | Static" spec this sm variant was built against (see
     a5edd2e), not a copy-paste of the base rule. --color-text-primary (= --colors-gray-900)
     preserves that #141414 exactly and resolves to #ffffff in dark; using --colors-gray-800 here
     instead would change this variant's LIGHT-mode color to #292929, a regression. */
  color: var(--color-text-primary, #141414);
}

.fragno-input--size-sm .fragno-input__required {
  font-size: var(--font-size-text-sm, 0.875rem);
  line-height: var(--line-height-text-sm, 1.25rem);
}

.fragno-input--size-sm .fragno-input__container {
  min-height: 44px;
  max-height: 44px;
  padding: var(--spacing-lg, 0.75rem);
  border-radius: var(--radius-2xl, 1rem);
}

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

.fragno-input--size-sm .fragno-input__icon-leading {
  width: 1.5rem;
  height: 1.5rem;
}

.fragno-input--size-sm .fragno-input__error {
  padding: 0 var(--spacing-lg, 0.75rem);
}

/* Non-editable (Input | Static) */
.fragno-input--static .fragno-input__container--disabled {
  border-color: #a3a3a3;
}

.fragno-input--static .fragno-input:read-only {
  cursor: text;
}

.fragno-input--static .fragno-input__container:not(.fragno-input__container--disabled) {
  cursor: text;
}

/* ============================================
   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-xs {
  padding: var(--spacing-xxs, 2px) var(--spacing-sm, 0.375rem);
  font-size: 0.625rem; /* 10px */
  line-height: 0.875rem; /* 14px */
  letter-spacing: -0.03125rem; /* -0.5px */
  gap: var(--spacing-xxs, 2px);
  border-radius: var(--radius-sm, 6px);
}

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

.fragno-badge--size-xs.fragno-badge--icon-x-close {
  padding-right: 2px;
}

.fragno-badge--size-xs.fragno-badge--icon-avatar {
  padding-left: 2px;
}

.fragno-badge--size-xs.fragno-badge--icon-only {
  padding: var(--spacing-xxs, 2px);
  gap: 0;
}

.fragno-badge--size-xs.fragno-badge--icon-image {
  padding-left: var(--spacing-xxs, 2px);
}

.fragno-badge--size-xs .fragno-badge__icon-img {
  width: 0.75rem;
  height: 0.75rem;
}

.fragno-badge--size-xs .fragno-badge__icon-leading--dot {
  width: 0.375rem;
  height: 0.375rem;
}

.fragno-badge--size-xs .fragno-badge__icon-leading--avatar {
  width: 0.75rem;
  height: 0.75rem;
}

.fragno-badge--size-xs .fragno-badge__close {
  width: 0.625rem;
  height: 0.625rem;
  padding: 1px;
}

.fragno-badge--size-xs .fragno-badge__close-icon {
  font-size: 0.625rem;
}

.fragno-badge--size-xs .fragno-badge__icon-only {
  width: 0.625rem;
  height: 0.625rem;
}

.fragno-badge--size-xs .fragno-badge__icon-only-symbol {
  font-size: 0.625rem;
}

.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.00375rem;
  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.004375rem;
  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.004375rem;
  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;
}

.fragno-badge--size-sm.fragno-badge--icon-image {
  padding-left: var(--spacing-xxs, 0.125rem);
}

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

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

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

/* Colors - Yellow (Warning) */
.fragno-badge--color-yellow {
  background-color: var(--colors-yellow-100, #fef0c7);
  color: var(--colors-yellow-800, #93370d);
}

.fragno-badge--color-yellow.fragno-badge--border {
  border: 1px solid var(--colors-yellow-300, #fec84b);
}

/* Colors - Dark Blur (translucent black with backdrop-blur; for label chips over imagery) */
.fragno-badge--color-dark-blur {
  background-color: var(--colors-alpha-black-40);
  color: var(--colors-base-white, #ffffff);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.fragno-badge--color-dark-blur.fragno-badge--border {
  border: 1px solid var(--colors-alpha-white-12);
}

@media (prefers-reduced-motion: reduce) {
  .fragno-badge--color-dark-blur {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* 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-img {
  width: 1rem;
  height: 1rem;
  object-fit: contain;
  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--color-yellow .fragno-badge__icon-leading--dot {
  background-color: var(--colors-yellow-800, #93370d);
}

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

.fragno-badge--color-yellow .fragno-badge__icon-leading--avatar {
  background-color: var(--colors-yellow-800, #93370d);
}

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

.fragno-badge--color-yellow .fragno-badge__close-icon {
  color: var(--colors-yellow-800, #93370d);
}

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

.fragno-badge--color-yellow .fragno-badge__icon-only-symbol {
  color: var(--colors-yellow-800, #93370d);
}

/* Anchors: outward convex flares at the top corners.
   The badge's top edge sits flush with a containing card's top border;
   each flare bulges outward from the badge's vertical side edge and
   merges tangent into the card border line, so the badge looks fused
   to the card rather than pasted on top.

   Color rules:
   - non-bordered: flare = badge background color (inherit).
   - bordered:     flare = badge border color (per-variant variable).

   --fragno-badge-anchors-radius (default 4px): flare radius.
   Top corners are squared so the flares can attach; bottom corners
   are left to the badge's own styles. */
.fragno-badge--anchors {
  position: relative;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  --fragno-badge-anchors-radius: var(--radius-sm);
  --fragno-badge-anchors-border-width: 1px;
}

.fragno-badge--anchors::before,
.fragno-badge--anchors::after {
  content: "";
  position: absolute;
  top: 0;
  width: var(--fragno-badge-anchors-radius, 4px);
  height: var(--fragno-badge-anchors-radius, 4px);
  background-color: inherit;
  pointer-events: none;
}

.fragno-badge--anchors::before {
  left: calc(-1 * var(--fragno-badge-anchors-radius, 4px));
  -webkit-mask-image: radial-gradient(
    circle var(--fragno-badge-anchors-radius, 4px) at 0% 100%,
    transparent calc(var(--fragno-badge-anchors-radius, 4px) - 0.5px),
    #000 var(--fragno-badge-anchors-radius, 4px)
  );
  mask-image: radial-gradient(
    circle var(--fragno-badge-anchors-radius, 4px) at 0% 100%,
    transparent calc(var(--fragno-badge-anchors-radius, 4px) - 0.5px),
    #000 var(--fragno-badge-anchors-radius, 4px)
  );
}

.fragno-badge--anchors::after {
  right: calc(-1 * var(--fragno-badge-anchors-radius, 4px));
  -webkit-mask-image: radial-gradient(
    circle var(--fragno-badge-anchors-radius, 4px) at 100% 100%,
    transparent calc(var(--fragno-badge-anchors-radius, 4px) - 0.5px),
    #000 var(--fragno-badge-anchors-radius, 4px)
  );
  mask-image: radial-gradient(
    circle var(--fragno-badge-anchors-radius, 4px) at 100% 100%,
    transparent calc(var(--fragno-badge-anchors-radius, 4px) - 0.5px),
    #000 var(--fragno-badge-anchors-radius, 4px)
  );
}

/* Bordered anchors: shift wings up by --border-width so their top edge
   aligns with the body's border-box top (the body's top border line)
   instead of the padding-box top, and shift each wing outward by
   --border-width so the left wing moves 1px left and the right wing
   moves 1px right (each wing's inside edge sits 1px outside the body's
   border-box, not flush against it). Absolute pseudos position relative
   to the padding box regardless of box-sizing, so these explicit
   offsets are the only fix. */
.fragno-badge--anchors.fragno-badge--border::before,
.fragno-badge--anchors.fragno-badge--border::after {
  top: calc(-1 * var(--fragno-badge-anchors-border-width, 1px));
  background-color: var(--fragno-badge-anchors-border-color);
}

.fragno-badge--anchors.fragno-badge--border::before {
  left: calc(-1 * (
    var(--fragno-badge-anchors-radius, 4px)
    + var(--fragno-badge-anchors-border-width, 1px)
  ));
}

.fragno-badge--anchors.fragno-badge--border::after {
  right: calc(-1 * (
    var(--fragno-badge-anchors-radius, 4px)
    + var(--fragno-badge-anchors-border-width, 1px)
  ));
}

/* Border-color per color variant — drives the wing background-color for
   bordered anchors via var(--fragno-badge-anchors-border-color). */
.fragno-badge--anchors.fragno-badge--color-white.fragno-badge--border {
  --fragno-badge-anchors-border-color: #737373;
}
.fragno-badge--anchors.fragno-badge--color-gray.fragno-badge--border {
  --fragno-badge-anchors-border-color: #a3a3a3;
}
.fragno-badge--anchors.fragno-badge--color-blue.fragno-badge--border {
  --fragno-badge-anchors-border-color: #84adff;
}
.fragno-badge--anchors.fragno-badge--color-success.fragno-badge--border {
  --fragno-badge-anchors-border-color: #73e2a3;
}
.fragno-badge--anchors.fragno-badge--color-error.fragno-badge--border {
  --fragno-badge-anchors-border-color: #fda29b;
}
.fragno-badge--anchors.fragno-badge--color-yellow.fragno-badge--border {
  --fragno-badge-anchors-border-color: var(--colors-yellow-300, #fec84b);
}

/* ============================================
   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%;
  box-sizing: border-box;
}

.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: 1.75rem;
  height: 1.75rem;
}

.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-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-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__title:empty,
.fragno-alerts__desc:empty {
  display: none;
}

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

/* ============================================
   FORM OVERLAY COMPONENT
   Composes fragno-modal + alerts + section-header + button.
   ============================================ */

fragno-form-overlay:not(:defined) {
  display: none;
}

/* Size drives the underlying dialog width via --modal-max-width. Widths match the
   Figma desktop card widths (Nova | Web — Form Overlay): xl 912, lg 712, md 560,
   sm 416. Height is content-driven; when content overflows the modal body scrolls,
   and on mobile the overlay takes over the full screen (see the mobile media query
   below). Default is xl. */
fragno-form-overlay[data-size="xl"] .fragno-form-overlay__modal {
  --modal-max-width: 912px;
}
fragno-form-overlay[data-size="lg"] .fragno-form-overlay__modal {
  --modal-max-width: 712px;
}
fragno-form-overlay[data-size="md"] .fragno-form-overlay__modal {
  --modal-max-width: 560px;
}
fragno-form-overlay[data-size="sm"] .fragno-form-overlay__modal {
  --modal-max-width: 416px;
}

/* Card horizontal padding: 24px (spacing-3xl) per the Figma spec (modal defaults to 16px). */
fragno-form-overlay .fragno-form-overlay__modal::part(header),
fragno-form-overlay .fragno-form-overlay__modal::part(body),
fragno-form-overlay .fragno-form-overlay__modal::part(footer) {
  padding-left: var(--spacing-3xl);
  padding-right: var(--spacing-3xl);
}

/* Title: Display 2xs/Medium — 24px/32px, letter-spacing -2% (per spec). */
fragno-form-overlay .fragno-form-overlay__modal::part(title) {
  letter-spacing: -0.02em;
}

/* Section header title: Text xl/Medium — 20px/30px (fragno-section-header's own
   sizes are 36px/48px, too large for this overlay). Description stays text-md. */
fragno-form-overlay .fragno-form-overlay__section-header .fragno-section-header__title {
  font-family: var(--font-family-body);
  font-size: var(--font-size-text-xl);
  line-height: var(--line-height-text-xl);
  letter-spacing: 0;
}

/* Body: vertical stack of optional alert, image, section header, and content. */
.fragno-form-overlay__body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
  width: 100%;
  box-sizing: border-box;
}

/* Elements toggled off via the `hidden` attribute must collapse even though the
   underlying custom elements set their own display. */
.fragno-form-overlay__body > [hidden] {
  display: none !important;
}

.fragno-form-overlay__alert {
  display: block;
  width: 100%;
}

.fragno-form-overlay__image-wrap {
  width: 100%;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  background: var(--colors-gray-200);
}

.fragno-form-overlay__image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Content region holds the consumer's form fields or informational content. */
.fragno-form-overlay__content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
  width: 100%;
}

.fragno-form-overlay__content:empty {
  display: none;
}

.fragno-form-overlay__content > * {
  width: 100%;
}

/* Footer layout is size-dependent per Figma. Base: Secondary + Primary in a row
   (class specificity overrides fragno-modal's element-level footer rules). */
fragno-form-overlay .fragno-form-overlay__modal::part(footer) {
  flex-direction: row;
}

/* xl / lg: buttons fill the width, each taking half. */
fragno-form-overlay[data-size="xl"] fragno-button[slot="primary-action"],
fragno-form-overlay[data-size="xl"] fragno-button[slot="secondary-action"],
fragno-form-overlay[data-size="lg"] fragno-button[slot="primary-action"],
fragno-form-overlay[data-size="lg"] fragno-button[slot="secondary-action"] {
  flex: 1 1 0;
  min-width: 0;
  display: block;
}

fragno-form-overlay[data-size="xl"] fragno-button[slot="primary-action"] .fragno-button,
fragno-form-overlay[data-size="xl"] fragno-button[slot="secondary-action"] .fragno-button,
fragno-form-overlay[data-size="lg"] fragno-button[slot="primary-action"] .fragno-button,
fragno-form-overlay[data-size="lg"] fragno-button[slot="secondary-action"] .fragno-button {
  width: 100%;
}

/* md / sm: buttons keep their intrinsic width, left-aligned. */
fragno-form-overlay[data-size="md"] .fragno-form-overlay__modal::part(footer),
fragno-form-overlay[data-size="sm"] .fragno-form-overlay__modal::part(footer) {
  justify-content: flex-start;
}

fragno-form-overlay[data-size="md"] fragno-button[slot="primary-action"],
fragno-form-overlay[data-size="md"] fragno-button[slot="secondary-action"],
fragno-form-overlay[data-size="sm"] fragno-button[slot="primary-action"],
fragno-form-overlay[data-size="sm"] fragno-button[slot="secondary-action"] {
  flex: 0 0 auto;
}

/* Mobile: the overlay takes over the full screen (edge-to-edge, full height),
   per the Figma mobile variants; the body scrolls when content overflows. This
   overrides both the size width and the modal's default centered card, and the
   actions span the full width side by side regardless of size. */
@media (max-width: 640px) {
  fragno-form-overlay .fragno-form-overlay__modal::part(container) {
    max-width: 100vw;
    width: 100vw;
    max-height: 100vh;
    max-height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    border-radius: 0;
  }

  fragno-form-overlay .fragno-form-overlay__modal::part(footer) {
    flex-direction: row;
    justify-content: flex-start;
  }

  fragno-form-overlay fragno-button[slot="primary-action"],
  fragno-form-overlay fragno-button[slot="secondary-action"] {
    flex: 1 1 0;
    min-width: 0;
    display: block;
  }

  fragno-form-overlay fragno-button[slot="primary-action"] .fragno-button,
  fragno-form-overlay fragno-button[slot="secondary-action"] .fragno-button {
    width: 100%;
  }
}

/* Fields inside the overlay content: fill the card width and match the Figma
   dropdown spec — 60px min-height, 16px padding, 20px radius, 18px (text-lg) value,
   gray-700 placeholder. Scoped to the overlay so other fragno-dropdowns are unaffected.
   (The dropdown label already matches spec: text-md / medium / gray-900.) */
fragno-form-overlay .fragno-form-overlay__content .fragno-dropdown-wrapper {
  max-width: none;
}

fragno-form-overlay .fragno-form-overlay__content .fragno-dropdown__trigger {
  min-height: 60px;
  padding: var(--spacing-xl);
  border-radius: var(--radius-3xl);
  font-size: var(--font-size-text-lg);
  line-height: var(--line-height-text-lg);
}

fragno-form-overlay .fragno-form-overlay__content .fragno-dropdown__value--placeholder {
  color: var(--colors-gray-700);
}

/* ============================================
   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);
  /* Glass pill sits over carousel imagery, not over the page surface — stays white. */
    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;
  }

  /* Declare the carousel host as a CSS container so slotted slides can size
     against the carousel's inline width using the cqi unit. This breaks the
     circular sizing between the shadow-DOM wrapper and the slotted cards
     (wrapper width depended on card width which depended on wrapper width).
     `display: block` is required — `container-type` is inert on inline
     elements, and custom elements default to inline. */
  fragno-carousel {
    display: block;
    container-type: inline-size;
  }

  /* Carousel slides keep their natural width — the carousel scrolls
     horizontally, so the flex algorithm should never compress slides to make
     them all share the container width. Slides that explicitly opt into a
     calculated width (slide-by-slide, peek) override this `width` below. */
  fragno-carousel > * {
    flex-shrink: 0;
  }

  /* Slide-by-slide carousels: each slotted child is one slide, sized to 100%
     of the carousel's inline width regardless of the child's own width rules. */
  fragno-carousel[slide-by-slide] > * {
    width: 100cqi;
    max-width: 100cqi;
  }

  /* Peek mode: the active slide is centered with adjacent slides visible on
     both sides. Slides shrink by `--carousel-peek` (default 64px) on each
     side; the track gets matching inline padding so slide 0 sits at the
     centered x-position at scrollLeft:0. gap:0 is required — the peek itself
     is the visual separation, and any flex gap would push the neighbor out
     of the peek area. Pairs with slide-by-slide; scroll math stays correct
     because each step advances by exactly slideWidth + gap (gap = 0). */
  fragno-carousel[peek] {
    --carousel-peek: 4rem; /* 64px default — override per-instance via inline style */
  }
  /* Mobile: shrink peek so the card uses more of the viewport, matching Figma. */
  @media (max-width: 720px) {
    fragno-carousel[peek] {
      --carousel-peek: 0.5rem; /* 8px on mobile — card width = 100% - 16px */
    }
  }
  fragno-carousel[peek][slide-by-slide] > *,
  fragno-carousel[peek] > * {
    width: calc(100cqi - 2 * var(--carousel-peek));
    max-width: calc(100cqi - 2 * var(--carousel-peek));
    flex-shrink: 0;
  }
  fragno-carousel[peek]::part(container) {
    padding-left: var(--carousel-peek);
    padding-right: var(--carousel-peek);
    gap: 0;
    scroll-padding-left: var(--carousel-peek);
  }
  fragno-carousel[peek]::part(wrapper) {
    gap: 0;
  }

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

/* NOTE: removed invalid `fragno-logo-lockup::part(idme) svg { … }` and
   `::part(idme) svg path { … }` rules. Per the CSS Shadow Parts spec a `::part()`
   pseudo-element cannot be followed by a descendant type selector (`svg`), so these
   never applied in any browser. They were also a hard parse error under Turbopack's
   Lightning CSS (breaking `npm run dev` for consumers that import fragno.css). */

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__content {
  display: flex;
  flex-direction: column;
  gap: var(--page-header-content-gap);
  width: 100%;
}

/* Back to page (tertiary button). Rendered only when back-label is set. */
.fragno-page-header__back {
  display: flex;
  align-items: center;
}

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

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

/* Optional logo — white circle with a subtle border, matches Nova store-logo. */
.fragno-page-header__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--page-header-logo-size);
  height: var(--page-header-logo-size);
  background-color: var(--colors-base-white, #fff);
  border: 1px solid var(--page-header-logo-border-color);
  border-radius: var(--radius-full);
  overflow: hidden;
}

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

.fragno-page-header__logo-img {
  width: 66%;
  height: 66%;
  object-fit: contain;
}

/* Heading holds the title; flex:1 + min-width:0 lets neighbours truncate. */
.fragno-page-header__heading {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-width: 0;
}

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

/* Optional sub header — single line with an ellipsis by DEFAULT.
   A consumer whose copy is a sentence rather than a label can opt into wrapping by setting
   --page-header-text-white-space: normal on the fragno-page-header element (see the matching note on
   __secondary-info below). Same opt-in property drives both lines, so a header's two text rows can
   never disagree about wrapping. */
.fragno-page-header__subheader {
  margin: 0;
  font-family: var(--font-family-body, Inter), sans-serif;
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-text-xl);
  line-height: var(--line-height-text-xl);
  color: var(--page-header-title-color);
  max-width: 100%;
  white-space: var(--page-header-text-white-space, nowrap);
  overflow: var(--page-header-text-overflow, hidden);
  text-overflow: ellipsis;
}

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

/* Optional secondary info — single line with an ellipsis by DEFAULT.
   `nowrap` suits a short label, but a page DESCRIPTION is a sentence: measured at a 390px viewport,
   copy of ~50 characters or more ellipsized where the consumer's own markup used to wrap. Rather
   than change the default (every existing consumer relies on the single-line look), the two
   declarations are opt-in properties:

     fragno-page-header { --page-header-text-white-space: normal; --page-header-text-overflow: visible; }

   text-overflow stays `ellipsis` unconditionally — it is inert once overflow is visible. */
.fragno-page-header__secondary-info {
  margin: 0;
  font-family: var(--font-family-body, Inter), 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.005em);
  color: var(--page-header-secondary-info-color);
  max-width: 100%;
  white-space: var(--page-header-text-white-space, nowrap);
  overflow: var(--page-header-text-overflow, hidden);
  text-overflow: ellipsis;
}

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

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

/* Logo scales with the header size (Nova: 72 / 72 / 64 / 42). */
.fragno-page-header--size-l .fragno-page-header__logo {
  --page-header-logo-size: 4.5rem;
}

.fragno-page-header--size-m .fragno-page-header__logo {
  --page-header-logo-size: 4.5rem;
}

.fragno-page-header--size-s .fragno-page-header__logo {
  --page-header-logo-size: 4rem;
}

.fragno-page-header--size-xs .fragno-page-header__logo {
  --page-header-logo-size: 2.625rem;
}

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

.fragno-progress-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  box-sizing: border-box;
  width: var(--progress-card-width);
  max-width: var(--progress-card-max-width);
  min-width: var(--progress-card-min-width);
  border: var(--progress-card-border-width) solid transparent;
  border-radius: var(--progress-card-radius);
  overflow: hidden;
  font-family: var(--font-family-body, Inter), sans-serif;
  color: var(--progress-card-text-color);
}

/* Style: transparent (default translucent) */
.fragno-progress-card--transparent {
  background-color: var(--progress-card-bg-transparent);
  border-color: var(--progress-card-border-transparent);
  box-shadow: var(--progress-card-shadow);
}

/* Style: outline (solid white) */
.fragno-progress-card--outline {
  background-color: var(--progress-card-bg-outline);
  border-color: var(--progress-card-border-outline);
  box-shadow: none;
}

/* Desktop: fully rounded with default padding */
.fragno-progress-card--desktop {
  padding: var(--progress-card-padding-y) var(--progress-card-padding-x);
}

/* Mobile: flat bottom border, translucent blur, equal padding */
.fragno-progress-card--mobile {
  width: var(--progress-card-width-mobile);
  padding: var(--progress-card-padding-mobile);
  border-radius: var(--progress-card-radius) var(--progress-card-radius) 0 0;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.fragno-progress-card--mobile.fragno-progress-card--transparent {
  box-shadow: var(--progress-card-shadow-mobile);
}

.fragno-progress-card__content {
  display: flex;
  flex-direction: column;
  gap: var(--progress-card-content-gap);
  width: 100%;
}

.fragno-progress-card--mobile .fragno-progress-card__content {
  gap: var(--progress-card-content-gap-mobile);
}

/* Top row: logo/icon + headline */
.fragno-progress-card__top {
  display: flex;
  align-items: flex-start;
  gap: var(--progress-card-top-gap);
  width: 100%;
}

.fragno-progress-card__lead {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  gap: var(--progress-card-top-gap);
  min-width: 0;
}

/* Logo circle */
.fragno-progress-card__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--progress-card-logo-size);
  height: var(--progress-card-logo-size);
  background-color: var(--colors-base-white, #fff);
  border: 1px solid var(--colors-alpha-black-10);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.fragno-progress-card--mobile .fragno-progress-card__logo {
  width: var(--progress-card-logo-size-mobile);
  height: var(--progress-card-logo-size-mobile);
}

.fragno-progress-card__logo[hidden] {
  display: none;
}

.fragno-progress-card__logo-img {
  width: 74%;
  height: 62%;
  object-fit: contain;
}

/* Icon tile */
.fragno-progress-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--progress-card-icon-size);
  height: var(--progress-card-icon-size);
  background-color: var(--progress-card-icon-bg);
  border-radius: var(--progress-card-icon-radius);
}

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

.fragno-progress-card__icon-svg {
  display: inline-flex;
  width: var(--progress-card-icon-glyph-size);
  height: var(--progress-card-icon-glyph-size);
  color: var(--colors-gray-900);
}

.fragno-progress-card__icon-svg svg {
  width: 100%;
  height: 100%;
}

.fragno-progress-card__icon-img {
  width: var(--progress-card-icon-glyph-size);
  height: var(--progress-card-icon-glyph-size);
  object-fit: contain;
}

/* Headline — text-md, weight 550, truncates after two lines */
.fragno-progress-card__headline {
  margin: 0;
  flex: 1 1 0;
  min-width: 0;
  font-size: var(--font-size-text-md);
  line-height: var(--line-height-text-md);
  letter-spacing: var(--letter-spacing-text-md, -0.005rem);
  font-weight: var(--progress-card-headline-font-weight);
  color: var(--progress-card-headline-color);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Bottom: state + divider + description + actions */
.fragno-progress-card__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--progress-card-bottom-gap);
  width: 100%;
}

/* State line: "Heading: [Value]" */
.fragno-progress-card__state {
  margin: 0;
  width: 100%;
  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(--progress-card-text-color);
}

.fragno-progress-card__state[hidden] {
  display: none;
}

.fragno-progress-card__state-label {
  font-weight: var(--font-weight-medium);
}

.fragno-progress-card__state-value {
  font-weight: var(--font-weight-regular);
}

/* Divider */
.fragno-progress-card__divider {
  width: 100%;
  height: 1px;
  background-color: var(--progress-card-divider-color);
}

.fragno-progress-card__divider[hidden] {
  display: none;
}

/* Description block */
.fragno-progress-card__description {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xxs);
  width: 100%;
}

.fragno-progress-card__description[hidden] {
  display: none;
}

.fragno-progress-card__subheading {
  margin: 0;
  font-size: var(--font-size-text-md);
  line-height: var(--line-height-text-md);
  letter-spacing: var(--letter-spacing-text-md, -0.005rem);
  font-weight: var(--font-weight-medium);
  color: var(--progress-card-text-color);
}

.fragno-progress-card__subheading[hidden] {
  display: none;
}

.fragno-progress-card__desc-text {
  margin: 0;
  font-size: var(--font-size-text-md);
  line-height: var(--line-height-text-md);
  letter-spacing: var(--letter-spacing-text-md, -0.005rem);
  font-weight: var(--font-weight-regular);
  color: var(--progress-card-text-color);
}

.fragno-progress-card__desc-text[hidden] {
  display: none;
}

/* Actions */
.fragno-progress-card__actions {
  display: flex;
  width: 100%;
}

.fragno-progress-card__actions[hidden] {
  display: none;
}

/* Desktop: stacked, full-width buttons */
.fragno-progress-card--desktop .fragno-progress-card__actions {
  flex-direction: column;
  align-items: stretch;
  gap: var(--spacing-lg);
}

.fragno-progress-card--desktop .fragno-progress-card__actions fragno-button {
  display: block;
  width: 100%;
}

/* Mobile: side-by-side buttons */
.fragno-progress-card--mobile .fragno-progress-card__actions {
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-md);
}

.fragno-progress-card--mobile .fragno-progress-card__actions fragno-button {
  display: block;
  flex: 1 1 0;
}

.fragno-progress-card__actions fragno-button .fragno-button {
  width: 100%;
}

.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-button {
  flex-shrink: 0;
}

/* ============================================
   EMPTY STATE (Nova | Web — Figma 68283:32533)
   ============================================
   Communicates the absence of content/data/results. Centered placeholder icon in
   a white rounded shell, heading, supporting body copy, and an optional CTA.
   Sizes sm | md. `--background` variant adds a gray-100 surface + gray-400 border.
   ============================================ */

.fragno-empty-state {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  box-sizing: border-box;
}

.fragno-empty-state__content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3xl); /* 24px */
  width: 100%;
  padding: var(--spacing-4xl) 0; /* 32px vertical */
  border-radius: var(--radius-4xl); /* 24px */
  border: 1.33px solid transparent;
  box-sizing: border-box;
}

.fragno-empty-state--background .fragno-empty-state__content {
  background: var(--colors-gray-100);
  border-color: var(--colors-gray-400);
}

.fragno-empty-state__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xl); /* 16px */
  padding: 0 var(--spacing-4xl); /* 32px horizontal */
  width: 100%;
  box-sizing: border-box;
}

.fragno-empty-state__icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--colors-secondary-default, #ffffff);
  box-shadow: 0 1px 2px rgba(10, 13, 18, 0.05);
}

.fragno-empty-state--size-md .fragno-empty-state__icon-wrap {
  padding: var(--spacing-lg); /* 12px */
  border-radius: var(--radius-xl); /* 16px */
}

.fragno-empty-state--size-sm .fragno-empty-state__icon-wrap {
  padding: 0.625rem; /* 10px */
  border-radius: var(--radius-lg); /* 12px */
}

.fragno-empty-state__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--colors-gray-700);
}

.fragno-empty-state--size-md .fragno-empty-state__icon {
  width: 1.5rem; /* 24px */
  height: 1.5rem;
}

.fragno-empty-state--size-sm .fragno-empty-state__icon {
  width: 1.25rem; /* 20px */
  height: 1.25rem;
}

.fragno-empty-state__icon svg,
.fragno-empty-state__icon-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.fragno-empty-state__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xs); /* 4px */
  width: 100%;
  text-align: center;
}

.fragno-empty-state__text[hidden],
.fragno-empty-state__heading[hidden],
.fragno-empty-state__description[hidden],
.fragno-empty-state__action[hidden] {
  display: none;
}

.fragno-empty-state__heading {
  margin: 0;
  font-family: var(--font-family-body), sans-serif;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.fragno-empty-state--size-md .fragno-empty-state__heading {
  font-size: var(--font-size-text-lg); /* 18px */
  line-height: var(--line-height-text-lg);
  letter-spacing: var(--letter-spacing-text-lg, -0.005rem);
}

.fragno-empty-state--size-sm .fragno-empty-state__heading {
  font-size: var(--font-size-text-md); /* 16px */
  line-height: var(--line-height-text-md);
  letter-spacing: var(--letter-spacing-text-md, -0.005rem);
}

.fragno-empty-state__description {
  margin: 0;
  font-family: var(--font-family-body), sans-serif;
  font-weight: var(--font-weight-regular);
  color: var(--colors-gray-700);
}

.fragno-empty-state--size-md .fragno-empty-state__description {
  font-size: var(--font-size-text-md); /* 16px */
  line-height: var(--line-height-text-md);
  letter-spacing: var(--letter-spacing-text-md, -0.005rem);
}

.fragno-empty-state--size-sm .fragno-empty-state__description {
  font-size: var(--font-size-text-sm); /* 14px */
  line-height: var(--line-height-text-sm);
  letter-spacing: var(--letter-spacing-text-sm, -0.005rem);
}

.fragno-empty-state__action {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.fragno-empty-state__action-button {
  flex-shrink: 0;
}

/* ============================================
   INLINE SEARCH (Nova | Web — Figma 72620:6250)
   ============================================
   Search input + optional results panel (quick actions). Sizes sm | md.
   Focused/open: blue-500 1.4px border + soft blue shadow (matches input --active).
   ============================================ */

.fragno-inline-search {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--spacing-lg); /* 12px — Default state gap in Figma */
  width: 100%;
  box-sizing: border-box;
}

.fragno-inline-search--open {
  gap: var(--spacing-md); /* 8px when panel is shown */
}

.fragno-inline-search__field {
  display: flex;
  align-items: center;
  gap: var(--spacing-md); /* 8px */
  width: 100%;
  box-sizing: border-box;
  background: var(--colors-secondary-default, #ffffff);
  border: 1px solid var(--colors-gray-500);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.fragno-inline-search--size-sm .fragno-inline-search__field {
  min-height: 2.75rem; /* 44px */
  padding: var(--spacing-lg); /* 12px */
  border-radius: var(--radius-xl); /* 16px — Figma sm */
}

.fragno-inline-search--size-md .fragno-inline-search__field {
  min-height: 3.75rem; /* 60px */
  padding: var(--spacing-xl); /* 16px */
  border-radius: var(--radius-3xl); /* 20px */
}

.fragno-inline-search--focused .fragno-inline-search__field,
.fragno-inline-search--open .fragno-inline-search__field {
  border: 1.4px solid var(--colors-blue-500);
  box-shadow: 0 0.25rem 0.75rem 0.375rem rgba(41, 112, 255, 0.05);
  /* Keep visible so clear's expanded 44×44 hit/focus ring is not clipped */
  overflow: visible;
}

.fragno-inline-search--disabled .fragno-inline-search__field {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}

.fragno-inline-search__icon-search {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--colors-gray-700);
}

.fragno-inline-search--size-sm .fragno-inline-search__icon-search {
  width: 1.125rem; /* 18px */
  height: 1.125rem;
}

.fragno-inline-search--size-md .fragno-inline-search__icon-search {
  width: 1.375rem; /* 22px */
  height: 1.375rem;
}

.fragno-inline-search__icon-search svg {
  display: block;
  width: 100%;
  height: 100%;
}

.fragno-inline-search__input {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--font-family-body), sans-serif;
  font-weight: var(--font-weight-regular);
  color: var(--colors-gray-700);
  outline: none;
  box-sizing: border-box;
}

.fragno-inline-search--size-sm .fragno-inline-search__input {
  font-size: var(--font-size-text-sm);
  line-height: var(--line-height-text-sm);
  letter-spacing: var(--letter-spacing-text-sm, -0.005rem);
}

.fragno-inline-search--size-md .fragno-inline-search__input {
  font-size: var(--font-size-text-lg);
  line-height: var(--line-height-text-lg);
  letter-spacing: var(--letter-spacing-text-lg, -0.005rem);
}

.fragno-inline-search__input::placeholder {
  color: var(--colors-gray-700);
  opacity: 1;
}

/* Hide native search clear (we provide our own) */
.fragno-inline-search__input::-webkit-search-decoration,
.fragno-inline-search__input::-webkit-search-cancel-button,
.fragno-inline-search__input::-webkit-search-results-button,
.fragno-inline-search__input::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
}

.fragno-inline-search__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin: 0;
  border: 0;
  background: transparent;
  color: var(--colors-gray-700);
  cursor: pointer;
  border-radius: var(--radius-sm);
  /* content-box + padding grows hit target to 44×44 without enlarging the icon */
  box-sizing: content-box;
}

.fragno-inline-search__clear[hidden] {
  display: none;
}

.fragno-inline-search--size-sm .fragno-inline-search__clear {
  width: 1.125rem; /* 18px icon */
  height: 1.125rem;
  padding: 0.8125rem; /* (44 - 18) / 2 */
  margin: -0.8125rem; /* keep layout footprint at icon size */
}

.fragno-inline-search--size-md .fragno-inline-search__clear {
  width: 1.375rem; /* 22px icon */
  height: 1.375rem;
  padding: 0.6875rem; /* (44 - 22) / 2 */
  margin: -0.6875rem;
}

.fragno-inline-search__clear svg {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

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

.fragno-inline-search__panel {
  position: absolute;
  left: 0;
  top: calc(100% + var(--spacing-md));
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  min-width: 12.5rem; /* 200px */
  max-width: 21.25rem; /* 340px */
  padding: var(--spacing-md); /* 8px */
  box-sizing: border-box;
  background: rgb(var(--surface-base-rgb, 255 255 255) / 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--colors-gray-300);
  border-radius: var(--radius-4xl); /* 24px */
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
}

.fragno-inline-search__panel[hidden] {
  display: none;
}

/* ---- Anchored (child-trigger) mode ----
   When a consumer nests an element as the trigger, the search attaches to that
   element and opens as a floating popover (field + results) below it, on click
   or hover, instead of being an always-visible inline field. */
.fragno-inline-search__anchor {
  position: relative;
  display: inline-flex;
}

.fragno-inline-search__trigger-wrap {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.fragno-inline-search__trigger-wrap:focus-visible {
  outline: 2px solid var(--colors-gray-700, #424242);
  outline-offset: 2px;
  border-radius: var(--radius-md, 0.5rem);
}

/* The search host becomes a floating popover below the trigger. */
.fragno-inline-search__anchor .fragno-inline-search--anchored-popover {
  position: absolute;
  top: calc(100% + var(--spacing-xs, 0.25rem));
  left: 0;
  z-index: 50;
  width: 22.5rem; /* 360px */
  max-width: calc(100vw - 2rem);
  display: none;
}

.fragno-inline-search__anchor.fragno-inline-search--anchor-open
  .fragno-inline-search--anchored-popover {
  display: flex;
  animation: fragno-popover-rise var(--popover-rise-duration, 0.2s)
    var(--popover-rise-easing, cubic-bezier(0.32, 0.72, 0, 1));
}

/* Must follow the rule above: the opt-out selector is identical, so it only wins
   on source order. */
@media (prefers-reduced-motion: reduce) {
  .fragno-inline-search__anchor.fragno-inline-search--anchor-open
    .fragno-inline-search--anchored-popover {
    animation: none;
  }
}

/* The results panel keeps a 340px cap in the inline layout; in the anchored
   popover the width is fixed by the host, so let the panel fill it and match
   the field length exactly. */
.fragno-inline-search--anchored-popover .fragno-inline-search__panel {
  max-width: none;
}

.fragno-inline-search__section {
  display: flex;
  align-items: center;
  height: 2rem; /* 32px */
  padding: var(--spacing-xs) var(--spacing-xl) var(--spacing-xs) var(--spacing-md);
  box-sizing: border-box;
  font-family: var(--font-family-body), sans-serif;
  font-weight: var(--font-weight-medium-plus);
  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-600);
}

.fragno-inline-search__section[hidden] {
  display: none;
}

.fragno-inline-search__results {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  max-height: 14rem;
  overflow-y: auto;
}

.fragno-inline-search__option {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm); /* 6px */
  min-height: 2.5rem; /* 40px */
  padding: var(--spacing-md); /* 8px */
  box-sizing: border-box;
  border-radius: var(--radius-xl); /* 12px */
  cursor: pointer;
  color: var(--colors-gray-900);
}

.fragno-inline-search__option:hover,
.fragno-inline-search__option--active {
  background: var(--colors-gray-100);
}

.fragno-inline-search__option-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.25rem; /* 20px */
  height: 1.25rem;
  color: var(--colors-gray-700);
}

.fragno-inline-search__option-icon svg,
.fragno-inline-search__option-icon-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.fragno-inline-search__option-label {
  flex: 1 1 0;
  min-width: 0;
  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);
  letter-spacing: var(--letter-spacing-text-sm, -0.005rem);
}

.fragno-inline-search__divider {
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  box-sizing: border-box;
}

.fragno-inline-search__divider[hidden] {
  display: none;
}

.fragno-inline-search__divider::before {
  content: "";
  display: block;
  flex: 1 1 0;
  height: 1px;
  background: rgba(0, 0, 0, 0.2);
}

.fragno-inline-search__action {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  padding-top: var(--spacing-md);
  box-sizing: border-box;
}

.fragno-inline-search__action[hidden] {
  display: none;
}

.fragno-inline-search__action-button {
  width: 100%;
}

.fragno-inline-search__action-button .fragno-button {
  width: 100%;
  justify-content: center;
}

/* ============================================
   HERO CARD (Nova | Web)
   ============================================
   Architecture
   ────────────
   The hero card has two layouts: SPLIT (image + content side-by-side) and
   STACKED (image + content one on top of the other). Selection is driven by:
     · `image-position` attribute (left|right|top|bottom) — the static layout
     · `mobile-image-position` attribute (top|bottom)    — the narrow override
   Layout properties live in CSS custom properties so a single set of base rules
   reads the same vars regardless of which preset set them. The HOST element is
   a CSS container (`container-type: inline-size`); when the host is narrower
   than 720px AND a mobile position is set, a `@container` block rewrites the
   vars to the stacked preset. No JS sizing logic — pure CSS responsive.
   ============================================ */

/* Host: CSS container so the card adapts to its own slot width. `display: block`
   keeps the host as a normal block element — it fills its parent in any
   layout context (page column, flex carousel slide, grid cell). The host's
   height stays `auto` so flex parents can stretch it via `align-items: stretch`
   (the default). Explicit `height: 100%` on the host would disable flex
   stretching and break equal-height carousels. */
fragno-hero-card {
  display: block;
  container-type: inline-size;
  box-sizing: border-box;
  width: 100%;
  max-width: 76rem; /* 1216px — design max */
}

fragno-hero-card[image-position="top"]:not([mobile-image-position]),
fragno-hero-card[image-position="bottom"]:not([mobile-image-position]) {
  width: 22.5rem; /* 360px */
  max-width: 100%;
}

/* ─── Inner card ─────────────────────────────────────────────────────────── */

.fragno-hero-card {
  box-sizing: border-box;
  display: flex;
  flex-direction: var(--hc-flex-direction, row-reverse);
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
  /* Themed translucent surface: --colors-alpha-white-80 stayed light in dark while the text inverts
     to white (1.54:1). rgb(var(--surface-base-rgb) / 0.8) is white 80% in light and #1a1a1a 80% in
     dark; the 255-triple fallback keeps it white for apps without the token. */
  background: rgb(var(--surface-base-rgb, 255 255 255) / 0.8);
  border: 1.6px solid var(--colors-base-white, #ffffff);
  border-radius: var(--radius-5xl);
  overflow: hidden;
  width: 100%;
  height: 100%;
  min-height: var(--hc-min-height, 480px);
  max-height: var(--hc-max-height, none);
}

.fragno-hero-card[data-style="outline"] {
  border-color: var(--colors-alpha-black-20);
}

.fragno-hero-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  margin: 0;
}

/* ─── Layout presets via CSS variables ───────────────────────────────────── */

/* Split preset (default). data-image-position=left|right sets only the
   direction; the rest of the vars use the defaults declared on .fragno-hero-card */
.fragno-hero-card[data-image-position="left"]  { --hc-flex-direction: row; }
.fragno-hero-card[data-image-position="right"] { --hc-flex-direction: row-reverse; }

/* Stacked preset. Applies for static top/bottom AND (via the @container block
   below) for responsive cards when the container is narrow. */
.fragno-hero-card[data-image-position="top"],
.fragno-hero-card[data-image-position="bottom"] {
  --hc-flex-direction: column;
  --hc-min-height: 0;

  /* `1 1 auto` lets the content panel grow when the card's host is stretched
     taller than the natural content (e.g. equal-height row in a carousel). The
     content already uses justify-content:space-between, so the extra room
     distributes between top/center/bottom regions and the CTA sits at the
     bottom edge instead of leaving a whitespace gap. */
  --hc-content-flex: 1 1 auto;
  --hc-content-max-width: 100%;
  --hc-content-padding: var(--spacing-2xl) var(--spacing-md) var(--spacing-md);
  --hc-content-gap: var(--spacing-2xl);

  --hc-image-flex: 0 0 auto;
  --hc-image-aspect: 16 / 10;

  --hc-logo-size: 4rem; /* 64 */
  --hc-logo-padding: var(--spacing-lg); /* 12px all sides — mobile */

  --hc-title-font-size: 1.75rem;        /* 28 */
  --hc-title-line-height: 2rem;          /* 32 */
  --hc-title-letter-spacing: -0.125rem;  /* -2 */

  --hc-subtitle-font-size: var(--font-size-text-md);
  --hc-subtitle-line-height: var(--line-height-text-md);
  --hc-subtitle-letter-spacing: -0.005rem;

  --hc-description-font-size: var(--font-size-text-sm);
  --hc-description-line-height: var(--line-height-text-sm);
  --hc-description-letter-spacing: -0.005rem;
}

.fragno-hero-card[data-image-position="bottom"] {
  --hc-flex-direction: column-reverse;
}

/* ─── Image panel ────────────────────────────────────────────────────────── */

.fragno-hero-card__image-panel {
  position: relative;
  flex: var(--hc-image-flex, 1 0 0);
  min-width: 0;
  min-height: 0;
  width: 100%;
  aspect-ratio: var(--hc-image-aspect, auto);
  border-radius: calc(var(--radius-5xl) - var(--spacing-sm));
  overflow: hidden;
  background: var(--colors-gray-100);
}

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

.fragno-hero-card__image-actions {
  position: absolute;
  inset: 0 0 auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-lg) var(--spacing-xl);
  gap: var(--spacing-md);
  pointer-events: none;
}

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

.fragno-hero-card__label-wrap,
.fragno-hero-card__favorite-wrap {
  pointer-events: auto;
}

.fragno-hero-card__label-wrap[hidden],
.fragno-hero-card__favorite-wrap[hidden] {
  display: none;
}

.fragno-hero-card__favorite-wrap {
  margin-left: auto;
}

/* ─── Content panel ──────────────────────────────────────────────────────── */

.fragno-hero-card__content {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  flex: var(--hc-content-flex, 0 0 420px);
  max-width: var(--hc-content-max-width, 420px);
  gap: var(--hc-content-gap, var(--spacing-lg));
  padding: var(--hc-content-padding, var(--spacing-lg));
  min-width: 0;
}

/* Top: brand logo chip + store name */
.fragno-hero-card__top {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  min-width: 0;
}

.fragno-hero-card__icon-wrap {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--hc-logo-size, 5.75rem); /* default 92 */
  height: var(--hc-logo-size, 5.75rem);
  padding: var(--hc-logo-padding, var(--spacing-xl));
  background: var(--colors-base-white, #ffffff);
  border: 1px solid var(--colors-alpha-black-10);
  border-radius: var(--radius-full);
  overflow: hidden;
  box-sizing: border-box;
}

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

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

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

.fragno-hero-card__store-name {
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-medium-plus, 550);
  font-size: var(--font-size-text-md);
  line-height: var(--line-height-text-md);
  letter-spacing: -0.005rem;
  color: var(--colors-gray-900);
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-clamp: 2;
  max-height: calc(var(--line-height-text-md) * 2);
  box-sizing: border-box;
}

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

/* Center: title + subtitle + description. Grows to fill the space between
   the top brand row and the bottom CTA, with its content vertically
   centered (per design — no reserved space on the inner text blocks). */
.fragno-hero-card__center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1 1 auto;
  gap: var(--spacing-md);
  min-width: 0;
}

.fragno-hero-card__title {
  margin: 0;
  font-family: var(--font-family-display, var(--font-family-body));
  font-weight: var(--font-weight-medium);
  font-size: var(--hc-title-font-size, 2.25rem);          /* default 36 */
  line-height: var(--hc-title-line-height, 2.5rem);        /* default 40 */
  letter-spacing: var(--hc-title-letter-spacing, -0.045rem);
  color: var(--colors-gray-900);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-clamp: 2;
  max-height: calc(var(--hc-title-line-height, 2.5rem) * 2);
  box-sizing: border-box;
}

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

.fragno-hero-card__subtitle {
  margin: 0;
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-medium);
  font-size: var(--hc-subtitle-font-size, var(--font-size-text-xl));
  line-height: var(--hc-subtitle-line-height, var(--line-height-text-xl));
  letter-spacing: var(--hc-subtitle-letter-spacing, 0);
  color: var(--colors-gray-700);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-height: var(--hc-subtitle-line-height, var(--line-height-text-xl));
  box-sizing: border-box;
}

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

.fragno-hero-card__description {
  margin: 0;
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-regular);
  font-size: var(--hc-description-font-size, var(--font-size-text-xl));
  line-height: var(--hc-description-line-height, var(--line-height-text-xl));
  letter-spacing: var(--hc-description-letter-spacing, 0);
  color: var(--colors-gray-700);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-clamp: 2;
  max-height: calc(var(--hc-description-line-height, var(--line-height-text-xl)) * 2);
  box-sizing: border-box;
}

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

/* Bottom: CTA */
.fragno-hero-card__bottom {
  display: flex;
  align-items: flex-start;
}

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

/* CTA span fallback (rendered when card-href wraps the card to avoid nested <a>).
   When the CTA is a fragno-button, fragno-button styles take over; the span variant
   below is only used when card-href is set. */
span.fragno-hero-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  height: 3.25rem; /* 52 */
  min-height: 3.25rem;
  padding: var(--spacing-lg) 1.125rem;
  background: var(--colors-gray-900);
  color: var(--colors-gray-50);
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-text-md);
  line-height: var(--line-height-text-md);
  letter-spacing: -0.005rem;
  border-radius: var(--radius-full);
  text-decoration: none;
  white-space: nowrap;
}

span.fragno-hero-card__cta .fragno-hero-card__cta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

.fragno-hero-card__link:hover span.fragno-hero-card__cta {
  background: var(--colors-gray-800, #292929);
}

.fragno-hero-card__link:focus-visible {
  outline: 2px solid var(--colors-focus-ring, var(--colors-blue-500, #2970ff));
  outline-offset: 2px;
  border-radius: var(--radius-5xl);
}

/* ─── Responsive: container-query layout switch ──────────────────────────── */

@container (600px <= width < 960px) {
  .fragno-hero-card[data-mobile-image-position="top"],
  .fragno-hero-card[data-mobile-image-position="bottom"] {
    --hc-content-flex: 0 0 14rem; /* 224px — matches Figma tablet card body */
    --hc-content-max-width: 14rem;
    --hc-content-padding: var(--spacing-md) var(--spacing-lg);
    --hc-content-gap: var(--spacing-2xl);
    --hc-min-height: 0;

    --hc-image-aspect: 16 / 10;

    --hc-logo-size: 3rem; /* 48px — matches Figma tablet (49px) */
    --hc-logo-padding: var(--spacing-md);

    --hc-title-font-size: 1.25rem;        /* 20 */
    --hc-title-line-height: 1.5rem;       /* 24 */
    --hc-title-letter-spacing: -0.005rem;

    --hc-subtitle-font-size: var(--font-size-text-sm);
    --hc-subtitle-line-height: var(--line-height-text-sm);
    --hc-subtitle-letter-spacing: -0.005rem;

    --hc-description-font-size: var(--font-size-text-sm);
    --hc-description-line-height: var(--line-height-text-sm);
    --hc-description-letter-spacing: -0.005rem;
  }
}

/* Mobile (card width < 600px): stacked layout (image on top/bottom).
   Previously fired at 720px which captured tablet widths too; the threshold
   is now 600px so that tablet portrait sizes keep the side-by-side layout
   (above) and only true mobile widths stack. This block intentionally
   mirrors the static [data-image-position="top|bottom"] preset — a single
   source of truth would require nesting tricks; this keeps the selector
   chain shallow and the cascade obvious. */
@container (width < 600px) {
  .fragno-hero-card[data-mobile-image-position="top"],
  .fragno-hero-card[data-mobile-image-position="bottom"] {
    --hc-flex-direction: column;
    --hc-min-height: 0;

    --hc-content-flex: 1 1 auto;
    --hc-content-max-width: 100%;
    --hc-content-padding: var(--spacing-2xl) var(--spacing-md) var(--spacing-md);
    --hc-content-gap: var(--spacing-2xl);

    --hc-image-flex: 0 0 auto;
    --hc-image-aspect: 16 / 10;

    --hc-logo-size: 4rem;
    --hc-logo-padding: var(--spacing-lg);

    --hc-title-font-size: 1.75rem;
    --hc-title-line-height: 2rem;
    --hc-title-letter-spacing: -0.125rem;

    --hc-subtitle-font-size: var(--font-size-text-md);
    --hc-subtitle-line-height: var(--line-height-text-md);
    --hc-subtitle-letter-spacing: -0.005rem;

    --hc-description-font-size: var(--font-size-text-sm);
    --hc-description-line-height: var(--line-height-text-sm);
    --hc-description-letter-spacing: -0.005rem;
  }

  /* Bottom-align all text content in the stacked (mobile) layout —
     matches the offer-card / featured-card pattern where everything sits
     on the bottom edge of the card body. */
  .fragno-hero-card[data-mobile-image-position="top"] .fragno-hero-card__content,
  .fragno-hero-card[data-mobile-image-position="bottom"] .fragno-hero-card__content {
    justify-content: flex-end;
  }
  .fragno-hero-card[data-mobile-image-position="top"] .fragno-hero-card__center,
  .fragno-hero-card[data-mobile-image-position="bottom"] .fragno-hero-card__center {
    flex: 0 0 auto;
  }

  .fragno-hero-card[data-mobile-image-position="bottom"] {
    --hc-flex-direction: column-reverse;
  }
}

/* Save / favorite button (shared component) */
fragno-save-button {
  display: inline-flex;
  flex-shrink: 0;
}

.fragno-save-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  min-width: 2.5rem;
  border: 1px solid var(--colors-alpha-white-12);
  border-radius: var(--radius-full);
  color: var(--colors-gray-50);
  background: var(--colors-alpha-black-30);
  cursor: pointer;
  padding: 0;
}

.fragno-save-button:hover {
  background: var(--colors-alpha-black-50);
}

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

.fragno-save-button[aria-pressed="true"] {
  background: var(--colors-alpha-black-50);
}

/* Dark-blur variant: translucent black with backdrop-blur, white heart icon.
   Used on top of imagery (e.g. hero-card favorite chip). */
.fragno-save-button[data-variant="dark-blur"] {
  background: var(--colors-alpha-black-40);
  color: var(--colors-base-white, #ffffff);
  border: none;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.fragno-save-button[data-variant="dark-blur"]:hover {
  background: var(--colors-alpha-black-50);
}

.fragno-save-button[data-variant="dark-blur"][aria-pressed="true"] {
  background: var(--colors-alpha-black-50);
}

@media (prefers-reduced-motion: reduce) {
  .fragno-save-button[data-variant="dark-blur"] {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* Featured card: position over image */
.fragno-featured-card fragno-save-button {
  position: absolute;
  top: var(--spacing-lg);
  right: var(--spacing-lg);
  z-index: 1;
}

/* Offer card: top-right corner (no image; positioned over the brand logo row) */
.fragno-offer-card fragno-save-button {
  position: absolute;
  top: var(--spacing-lg);
  right: var(--spacing-lg);
  z-index: 1;
}

/* ============================================
   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: var(--card-surface-translucent, 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: var(--card-surface-border-white, #fff);
}

.fragno-featured-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-featured-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

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

.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: 0 0 auto;
  flex-direction: column;
  min-height: 0;
}

.fragno-featured-card__media {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  height: var(--featured-card-media-height);
  min-height: var(--featured-card-media-height);
  border-radius: var(--radius-4xl);
  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(--radius-4xl);
}

.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: rgb(var(--surface-base-rgb, 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: rgb(var(--surface-base-rgb, 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: 1 1 auto;
  flex-direction: column;
  gap: var(--spacing-lg);
  min-height: 0;
  padding: 0 var(--spacing-md);
}

.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;
  box-sizing: border-box;
  width: var(--featured-card-store-logo-size, var(--featured-card-store-logo-width));
  height: var(--featured-card-store-logo-size, var(--featured-card-store-logo-width));
  padding: var(--featured-card-store-logo-padding, var(--spacing-lg));
  background: var(--colors-base-white, #fff);
  border: 1px solid var(--colors-alpha-black-10);
  border-radius: var(--radius-full);
  overflow: hidden;
  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;
  max-height: calc(var(--featured-card-text-eyebrow-line-height) * 2);
  box-sizing: border-box;
}

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

/* Fills space below the image so all text content (title + subtitle + CTA)
   sits at the card bottom. `align-items: flex-end` bottom-aligns the title
   block with the CTA on the same baseline. */
.fragno-featured-card__text-row {
  display: flex;
  flex: 1 1 auto;
  flex-direction: row;
  align-items: flex-end;
  gap: var(--spacing-lg);
  min-width: 0;
  min-height: 0;
}

.fragno-featured-card__text {
  display: flex;
  flex: 1 1 0%;
  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;
  max-height: calc(var(--featured-card-text-title-line-height) * 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;
  box-sizing: border-box;
}

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

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

.fragno-featured-card__action-link,
.fragno-featured-card__action-icon {
  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: none;
  border-radius: var(--radius-full);
  /* Primary button styling per Nova spec (Figma 65655:30778) — black filled
     circle with a white icon. SVG strokes use currentColor so setting `color`
     paints the icon. */
  background: var(--colors-primary-default);
  color: var(--colors-primary-text);
  text-decoration: none;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.fragno-featured-card__action-link:hover,
.fragno-featured-card__link:hover .fragno-featured-card__action-icon {
  background: var(--colors-primary-hover);
  color: var(--colors-primary-text);
}

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

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

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

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

.fragno-content-card[data-card-style="white"] {
  border-color: var(--card-surface-border-white, #fff);
}

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

.fragno-content-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.fragno-content-card__link:focus-visible .fragno-content-card {
  outline: 2px solid var(--colors-focus-ring);
  outline-offset: 2px;
}

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

.fragno-content-card__top {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  min-height: 0;
}

.fragno-content-card__media {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  height: var(--content-card-media-height);
  min-height: var(--content-card-media-height);
  max-height: var(--content-card-media-height);
  border-radius: var(--content-card-radius);
  overflow: hidden;
  background: var(--colors-gray-200);
}

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

.fragno-content-card__media--placeholder {
  height: var(--content-card-media-height);
  min-height: var(--content-card-media-height);
  background: var(--colors-gray-200);
}

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

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

.fragno-content-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: rgb(var(--surface-base-rgb, 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);
}

a.fragno-content-card__tertiary-cta:hover {
  background: rgb(var(--surface-base-rgb, 255 255 255) / 0.6);
  color: var(--colors-gray-900);
}

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

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

.fragno-content-card__bottom {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: var(--spacing-lg);
  min-height: 0;
  padding: 0 var(--spacing-md);
}

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

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

.fragno-content-card__eyebrow {
  margin: 0;
  min-width: 0;
  max-width: 100%;
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-medium-plus, 550);
  font-size: var(--content-card-text-eyebrow-font-size);
  line-height: var(--content-card-text-eyebrow-line-height);
  letter-spacing: var(--content-card-text-eyebrow-letter-spacing);
  color: var(--colors-gray-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

.fragno-content-card__title {
  margin: 0;
  min-width: 0;
  max-width: 100%;
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-medium);
  font-size: var(--content-card-text-title-font-size);
  line-height: var(--content-card-text-title-line-height);
  letter-spacing: var(--content-card-text-title-letter-spacing);
  color: var(--colors-gray-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

.fragno-content-card__description {
  margin: 0;
  min-width: 0;
  overflow-wrap: break-word;
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-regular);
  font-size: var(--content-card-text-description-font-size);
  line-height: var(--content-card-text-description-line-height);
  letter-spacing: var(--content-card-text-description-letter-spacing);
  color: var(--colors-gray-700);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--content-card-description-line-clamp, 4);
  line-clamp: var(--content-card-description-line-clamp, 4);
  overflow: hidden;
}

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

.fragno-content-card__action-wrap {
  flex-shrink: 0;
  align-self: flex-end;
}

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

.fragno-content-card__action-link,
.fragno-content-card__action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--content-card-action-size);
  height: var(--content-card-action-size);
  min-width: var(--content-card-action-size);
  padding: 10px;
  box-sizing: border-box;
  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-content-card__action-link:hover,
.fragno-content-card__link:hover .fragno-content-card__action-icon {
  background: var(--colors-gray-100);
  border-color: var(--colors-gray-800);
  color: var(--colors-gray-900);
}

.fragno-content-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;
  position: relative;
  /* `overflow: visible` is intentional: the badge wrap is centered on the card's
     top edge and projects upward; clipping (e.g. `overflow: hidden`) would hide
     that half. The host has padding and `.fragno-offer-card__content` carries
     its own border-radius, so corners stay rounded without a host clip. */
  overflow: visible;
  padding: var(--spacing-3xl);
  border-width: var(--offer-card-border-width);
  border-style: solid;
  border-radius: var(--offer-card-radius);
  background: var(--card-surface-translucent, 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: var(--card-surface-border-white, #fff);
}

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

/* Badge overlay — badge is horizontally centered and top-attached to the card.
   The badge sits fully inside the card from the top edge downward. */
.fragno-offer-card__badge-wrap {
  position: absolute;
  top: calc(-1 * var(--offer-card-border-width, 1.6px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.fragno-offer-card__badge-wrap .fragno-badge {
  background-color: var(--color-bg-primary);
}

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

/* ─────────────────────────────────────────────────────────────
   Content + Top
   ───────────────────────────────────────────────────────────── */

.fragno-offer-card__content {
  display: flex;
  flex-direction: column;
  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;
  }
}

/* ─────────────────────────────────────────────────────────────
   Brand-logo wrap
   ───────────────────────────────────────────────────────────── */

.fragno-offer-card__icon-wrap {
  flex-shrink: 0;
  box-sizing: border-box;
  width: var(--offer-card-store-logo-size, 5rem); /* 80 */
  height: var(--offer-card-store-logo-size, 5rem);
  padding: var(--offer-card-store-logo-padding, var(--spacing-xl));
  background: var(--colors-base-white, #fff);
  border: 1px solid var(--colors-alpha-black-10);
  border-radius: var(--radius-full);
  overflow: hidden;
  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);
}

/* ─────────────────────────────────────────────────────────────
   Text, title, subtitle, store-text
   ───────────────────────────────────────────────────────────── */

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

.fragno-offer-card__store-text {
  margin: 0;
  min-width: 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);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  max-height: calc(var(--offer-card-text-eyebrow-line-height) * 2);
  box-sizing: border-box;
}

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

.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: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-clamp: 2;
  max-height: calc(var(--offer-card-text-title-line-height) * 2);
  box-sizing: border-box;
}

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

.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);
  box-sizing: border-box;
}

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

/* ─────────────────────────────────────────────────────────────
   Action arrow circle
   ───────────────────────────────────────────────────────────── */

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

/* ─────────────────────────────────────────────────────────────
   Per-size layouts (xs / sm: single row; md / lg: two rows)
   `__bottom` is a CSS grid with explicit grid-template-areas per
   size. Children get a grid-area each. `__text` is `display: contents`
   in xs/sm so its title+subtitle become direct grid items.
   ───────────────────────────────────────────────────────────── */

/* ── Size: XS ────────────────────────────────────────────────── */
.fragno-offer-card[data-size="xs"] {
  padding: var(--spacing-2xl); /* 20 all sides */
  min-height: var(--offer-card-xs-min-height);
  max-height: var(--offer-card-xs-max-height);
}

.fragno-offer-card[data-size="xs"] .fragno-offer-card__icon-wrap {
  width: var(--offer-card-xs-store-logo-size, 3.875rem); /* 62 */
  height: var(--offer-card-xs-store-logo-size, 3.875rem);
  padding: var(--offer-card-xs-store-logo-padding, var(--spacing-lg)); /* 12 */
}

.fragno-offer-card[data-size="xs"] .fragno-offer-card__icon-wrap img {
  height: 100%;
}

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

/* ── Size: SM ────────────────────────────────────────────────── */
.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);
}

.fragno-offer-card[data-size="sm"] .fragno-offer-card__icon-wrap {
  width: var(--offer-card-sm-store-logo-size, 4.125rem); /* 66 */
  height: var(--offer-card-sm-store-logo-size, 4.125rem);
  padding: var(--offer-card-sm-store-logo-padding, var(--spacing-lg)); /* 12 */
}

/* ── XS / SM shared: text-column grid + logo absolutely positioned.
       The logo is taken out of grid flow so its 62/66px height does
       NOT force the "store" row track to allocate space when store-text
       is hidden. `align-content: center` then vertically centers the
       title + subtitle (and store, when present) as a single block
       relative to the card. Column 1 reserves space for the logo so
       the text and action columns sit to its right.
       ───────────────────────────────────────────────────────── */
.fragno-offer-card[data-size="xs"] .fragno-offer-card__bottom,
.fragno-offer-card[data-size="sm"] .fragno-offer-card__bottom {
  display: grid;
  position: relative;
  flex: 1 0 0;
  min-height: 0;
  grid-template-rows: auto auto auto;
  grid-template-areas:
    ".  store    action"
    ".  title    action"
    ".  subtitle action";
  align-items: center;
  align-content: center;
  column-gap: var(--spacing-xl);   /* 16 */
  row-gap: 0;
}

.fragno-offer-card[data-size="xs"] .fragno-offer-card__bottom {
  grid-template-columns: var(--offer-card-xs-store-logo-size, 3.875rem) minmax(0, 1fr) auto;
}
.fragno-offer-card[data-size="sm"] .fragno-offer-card__bottom {
  grid-template-columns: var(--offer-card-sm-store-logo-size, 4.125rem) minmax(0, 1fr) auto;
}

/* Logo: absolutely positioned, vertically centered on the card content area.
   Grid reserves the column width above so text and action sit clear of it. */
.fragno-offer-card[data-size="xs"] .fragno-offer-card__icon-wrap,
.fragno-offer-card[data-size="sm"] .fragno-offer-card__icon-wrap {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.fragno-offer-card[data-size="xs"] .fragno-offer-card__store-text,
.fragno-offer-card[data-size="sm"] .fragno-offer-card__store-text  { grid-area: store; }
.fragno-offer-card[data-size="xs"] .fragno-offer-card__action-wrap,
.fragno-offer-card[data-size="sm"] .fragno-offer-card__action-wrap { grid-area: action; align-self: center; }

/* Flatten the __text wrapper so __title and __subtitle become direct
   grid children. */
.fragno-offer-card[data-size="xs"] .fragno-offer-card__text,
.fragno-offer-card[data-size="sm"] .fragno-offer-card__text { display: contents; }

.fragno-offer-card[data-size="xs"] .fragno-offer-card__title,
.fragno-offer-card[data-size="sm"] .fragno-offer-card__title { grid-area: title; }
.fragno-offer-card[data-size="xs"] .fragno-offer-card__subtitle,
.fragno-offer-card[data-size="sm"] .fragno-offer-card__subtitle { grid-area: subtitle; }

/* XS title clamp matches the "max 2 lines" annotation in the Figma mock */
.fragno-offer-card[data-size="xs"] .fragno-offer-card__title {
  font-size: var(--font-size-text-sm);
  line-height: var(--line-height-text-sm);
  letter-spacing: var(--letter-spacing-text-sm);
  max-height: calc(var(--line-height-text-sm) * 2);
}

/* In xs/sm the store-text is a single-line eyebrow (1 line, not 2). */
.fragno-offer-card[data-size="xs"] .fragno-offer-card__store-text,
.fragno-offer-card[data-size="sm"] .fragno-offer-card__store-text {
  -webkit-line-clamp: 1;
  line-clamp: 1;
  max-height: calc(var(--offer-card-text-eyebrow-line-height) * 1);
  margin-bottom: var(--spacing-xs);
}

/* ── Size: MD / LG ───────────────────────────────────────────── */
.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);
}

.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__top,
.fragno-offer-card[data-size="lg"] .fragno-offer-card__top {
  align-items: flex-start;
  padding-bottom: var(--spacing-xl); /* 16 between label and the row below */
}

.fragno-offer-card[data-size="md"] .fragno-offer-card__top[hidden],
.fragno-offer-card[data-size="lg"] .fragno-offer-card__top[hidden] {
  display: none;
}

/* MD / LG two-row grid: [logo + store on top row, text + action on bottom row].
   `1fr` on the second row lets the bottom (title/subtitle/action) absorb the
   leftover vertical space — title/subtitle sit at the bottom of the card. */
.fragno-offer-card[data-size="md"] .fragno-offer-card__bottom,
.fragno-offer-card[data-size="lg"] .fragno-offer-card__bottom {
  display: grid;
  flex: 1 0 0;
  min-height: 0;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "logo store store"
    "text text   action";
  column-gap: var(--spacing-lg);   /* 12 */
  row-gap: var(--spacing-3xl);     /* 24 */
}

.fragno-offer-card[data-size="md"] .fragno-offer-card__icon-wrap,
.fragno-offer-card[data-size="lg"] .fragno-offer-card__icon-wrap   { grid-area: logo; align-self: center; }
.fragno-offer-card[data-size="md"] .fragno-offer-card__store-text,
.fragno-offer-card[data-size="lg"] .fragno-offer-card__store-text  { grid-area: store; align-self: center; }
.fragno-offer-card[data-size="md"] .fragno-offer-card__text,
.fragno-offer-card[data-size="lg"] .fragno-offer-card__text        { grid-area: text;  align-self: end; }
.fragno-offer-card[data-size="md"] .fragno-offer-card__action-wrap,
.fragno-offer-card[data-size="lg"] .fragno-offer-card__action-wrap { grid-area: action; align-self: end; justify-self: end; }

/* MD/LG store-text — text-md medium per Figma */
.fragno-offer-card[data-size="md"] .fragno-offer-card__store-text,
.fragno-offer-card[data-size="lg"] .fragno-offer-card__store-text {
  font-size: var(--font-size-text-md);
  line-height: var(--line-height-text-md);
  font-weight: var(--font-weight-medium, 500);
  -webkit-line-clamp: 2;
  line-clamp: 2;
  max-height: calc(var(--line-height-text-md) * 2);
}

/* LG title uses display-2xs scale */
.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);
  max-height: calc(var(--offer-card-text-title-lg-line-height) * 2);
}

/* LG subtitle bumps to text-md */
.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);
}

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

.fragno-community-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  box-sizing: border-box;
  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: var(--card-surface-translucent, 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[data-stack="horizontal"] {
  min-height: var(--community-card-min-height-horizontal);
}

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

.fragno-community-card[data-style="white"] {
  border-color: var(--card-surface-border-white, #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 1 auto;
  flex-direction: column;
  gap: var(--spacing-lg);
  justify-content: flex-start;
  min-height: 0;
  min-width: 0;
  border-radius: var(--community-card-radius);
}

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

.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;
  /* Same scoped foreground token as the green alert text: the icon glyph is a green FOREGROUND that
     must invert for dark (#8EEEB4 → 7.20:1 on the dark wrap), while the shared --colors-green-800
     primitive stays dark for its background uses (toast lead). */
  color: var(--colors-green-fg, #095c37);
}

.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: 0 0 auto;
  min-height: 0;
  min-width: 0;
}

.fragno-community-card[data-stack="horizontal"] .fragno-community-card__bottom {
  align-items: center;
  flex: 1 1 auto;
  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: rgb(var(--surface-base-rgb, 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,
:host {
  --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;
}

.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--closable .fragno-ribbon-banner__inner {
  max-width: none;
}

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

.fragno-ribbon-banner--closable .fragno-ribbon-banner__row {
  position: relative;
  justify-content: flex-end;
  gap: var(--spacing-lg);
}

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

/* Desktop closable: keep message centered; dismiss stays trailing (Figma 67321:8416) */
.fragno-ribbon-banner--closable .fragno-ribbon-banner__body {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  max-width: min(var(--ribbon-banner-content-max-width), calc(100% - 3.5rem));
}

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

.fragno-ribbon-banner__close {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: inherit;
  cursor: pointer;
  box-sizing: border-box;
  /* Icon-only control: ≥24×24 hit target (WCAG 2.5.8); prefer ~40 like tertiary sm */
  min-width: 2.5rem;
  min-height: 2.5rem;
}

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

.fragno-ribbon-banner__close-icon {
  display: block;
  width: var(--ribbon-banner-icon-size-lg-md);
  height: var(--ribbon-banner-icon-size-lg-md);
  pointer-events: none;
}

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

.fragno-ribbon-banner__close:hover {
  opacity: 0.85;
}

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

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

@media (max-width: 47.9375rem) {
  /* Mobile closable: message + dismiss share a row; no absolute centering */
  .fragno-ribbon-banner--closable .fragno-ribbon-banner__body {
    position: static;
    transform: none;
    flex: 1 1 auto;
    max-width: none;
    justify-content: flex-start;
    width: auto;
  }

  .fragno-ribbon-banner--closable .fragno-ribbon-banner__row {
    justify-content: flex-start;
  }

  .fragno-ribbon-banner--closable .fragno-ribbon-banner__icon-text {
    justify-content: flex-start;
  }
}

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

  .fragno-ribbon-banner__close:hover {
    opacity: 1;
  }
}

/* ================================================================
   fragno-action-menu
   ================================================================ */

fragno-action-menu {
  --fragno-action-menu-trigger-size: 2rem;
  --fragno-action-menu-icon-color: var(--colors-gray-600);
  --fragno-action-menu-icon-hover: var(--colors-gray-900);
  --fragno-action-menu-dropdown-bg: var(--color-bg-primary, #ffffff);
  --fragno-action-menu-dropdown-border: var(--colors-gray-200, #e5e5e5);
  --fragno-action-menu-dropdown-shadow: 0 4px 12px var(--colors-effects-shadow-xs, rgba(10, 13, 18, 0.05));
  --fragno-action-menu-dropdown-radius: var(--radius-md);
  --fragno-action-menu-dropdown-min-width: 10rem;
  --fragno-action-menu-item-padding: var(--spacing-xs) var(--spacing-xl);
  --fragno-action-menu-item-color: var(--colors-gray-900);
  --fragno-action-menu-item-hover-bg: var(--colors-gray-50);
  --fragno-action-menu-item-disabled-color: var(--colors-gray-400);
  --fragno-action-menu-z-index: 1080;

  position: relative;
  display: inline-block;
}

.fragno-action-menu {
  position: relative;
  display: inline-flex;
}

/* Trigger button */
.fragno-action-menu__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--fragno-action-menu-trigger-size);
  height: var(--fragno-action-menu-trigger-size);
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--fragno-action-menu-icon-color);
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.fragno-action-menu__trigger:hover {
  color: var(--fragno-action-menu-icon-hover);
  background-color: var(--fragno-action-menu-item-hover-bg);
}

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

.fragno-action-menu__trigger:disabled,
.fragno-action-menu__trigger--disabled {
  color: var(--fragno-action-menu-item-disabled-color);
  cursor: not-allowed;
  background: transparent;
}

.fragno-action-menu__icon {
  width: 1.25rem;
  height: 1.25rem;
  pointer-events: none;
}

/* Dropdown panel */
.fragno-action-menu__dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: var(--fragno-action-menu-z-index);
  min-width: var(--fragno-action-menu-dropdown-min-width);
  margin-top: var(--spacing-xxs);
  padding: var(--spacing-xxs) 0;
  background-color: var(--fragno-action-menu-dropdown-bg, #ffffff);
  border: 1px solid var(--fragno-action-menu-dropdown-border, #e5e5e5);
  border-radius: var(--fragno-action-menu-dropdown-radius);
  box-shadow: var(--fragno-action-menu-dropdown-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
}

.fragno-action-menu__dropdown--open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Menu items */
.fragno-action-menu__item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--fragno-action-menu-item-padding);
  border: none;
  background: transparent;
  color: var(--fragno-action-menu-item-color);
  font-family: var(--font-family-body, "Inter", sans-serif);
  font-size: var(--text-sm-font-size, 0.875rem);
  line-height: var(--text-sm-line-height, 1.25rem);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.1s ease;
}

.fragno-action-menu__item:hover {
  background-color: var(--fragno-action-menu-item-hover-bg);
}

.fragno-action-menu__item:focus-visible {
  outline: 2px solid var(--colors-blue-500);
  outline-offset: -2px;
  background-color: var(--fragno-action-menu-item-hover-bg);
}

.fragno-action-menu__item--disabled {
  color: var(--fragno-action-menu-item-disabled-color);
  cursor: not-allowed;
}

.fragno-action-menu__item--disabled:hover {
  background-color: transparent;
}

/* Item icon */
.fragno-action-menu__item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-right: var(--spacing-md, 0.5rem);
}

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

/* Item label */
.fragno-action-menu__item-label {
  flex: 1;
}

/* Destructive variant */
.fragno-action-menu__item--destructive {
  color: var(--colors-error-600, #d92d20);
}

.fragno-action-menu__item--destructive:hover {
  background-color: var(--colors-error-50, #fef3f2);
}

.fragno-action-menu__item--destructive:focus-visible {
  background-color: var(--colors-error-50, #fef3f2);
}

.fragno-action-menu__item--destructive .fragno-action-menu__item-icon {
  color: var(--colors-error-600, #d92d20);
}

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

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

.fragno-dropdown-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md, 0.5rem);
  width: 100%;
  max-width: 320px;
  position: relative;
}

.fragno-dropdown__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);
  color: var(--colors-gray-900, #292929);
}

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

.fragno-dropdown__required {
  /* --colors-error-500 does not exist in either token sheet; the family is --colors-red-*, whose 500
     rung IS the #f04438 kept here as the fallback. Unlike --colors-red-600 (which gets a dark
     override), red-500 has no entry in tokens-dark.css, so this stays #f04438 in both themes —
     intentionally the same as master, not a token that happens to resolve identically. */
  color: var(--colors-red-500, #f04438);
  margin-left: 2px;
}

.fragno-dropdown__container {
  position: relative;
}

.fragno-dropdown__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 44px;
  padding: var(--spacing-lg, 0.75rem) var(--spacing-xl, 1rem);
  /* --colors-white is defined in NEITHER token sheet, so this resolved to the literal #ffffff in both
     themes — the reason the whole control stayed white on a dark page. --colors-secondary-default is
     fragno's theme-aware base surface (#ffffff / #1a1a1a) and is what .fragno-input__container already
     uses, so a dropdown and a text field sitting side by side now match in either theme. */
  background-color: var(--colors-secondary-default, #ffffff);
  border: 1px solid var(--colors-gray-400, #737373);
  border-radius: var(--radius-lg, 10px);
  /* Was the literal rgba(10, 13, 18, 0.05) — byte-identical to this token's light value, but the token
     inverts to rgba(255, 255, 255, 0.05) in dark, where a black inner shadow is simply invisible. */
  box-shadow: 0 1px 2px 0 var(--colors-shadow-skeumorphic-inner, rgba(10, 13, 18, 0.05));
  cursor: pointer;
  font-family: var(--font-family-body, "Inter", sans-serif);
  font-size: var(--font-size-text-md, 1rem);
  line-height: var(--line-height-text-md, 1.5rem);
  color: var(--colors-gray-900, #141414);
  transition: all 0.2s ease;
  box-sizing: border-box;
  text-align: left;
  outline: none;
}

.fragno-dropdown__trigger--small {
  min-height: 36px;
  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);
  border-radius: var(--radius-md, 8px);
}

.fragno-dropdown__trigger:hover:not(:disabled) {
  border-color: var(--colors-gray-600, #525252);
}

.fragno-dropdown__trigger:focus-visible {
  border: 2px solid var(--colors-blue-600, #2970ff);
  box-shadow:
    0 1px 2px 0 rgba(23, 44, 67, 0.15),
    /* The ring's inner gap must be the page surface, not a fixed white, or the halo reads as a white
       band on a dark page. Same token .fragno-button--green-gradient:focus-visible uses. */
    0 0 0 2px var(--colors-secondary-default, #ffffff),
    0 0 0 0.25rem var(--colors-blue-500, #155eef);
}

/* Open via mouse (no keyboard focus): neutral border only — the blue focus ring is
   reserved for keyboard focus (:focus-visible). When opened via keyboard the trigger
   is focus-visible and keeps the blue ring below. */
.fragno-dropdown__container--open .fragno-dropdown__trigger:not(:focus-visible) {
  border-color: var(--colors-gray-600, #525252);
  box-shadow: 0 1px 2px 0 var(--colors-shadow-skeumorphic-inner, rgba(10, 13, 18, 0.05));
}

.fragno-dropdown__trigger:disabled {
  background-color: var(--colors-gray-200, #e5e5e5);
  border-color: var(--colors-gray-500, #94979c);
  color: var(--colors-gray-400, #737373);
  cursor: not-allowed;
}

.fragno-dropdown__container--disabled .fragno-dropdown__trigger {
  background-color: var(--colors-gray-200, #e5e5e5);
  border-color: var(--colors-gray-500, #94979c);
  color: var(--colors-gray-400, #737373);
  cursor: not-allowed;
}

.fragno-dropdown__value {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fragno-dropdown__value--placeholder {
  color: var(--colors-gray-400, #737373);
}

.fragno-dropdown__chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--colors-gray-600, #525252);
  transition: transform 0.2s ease;
}

.fragno-dropdown__container--open .fragno-dropdown__chevron {
  transform: rotate(180deg);
}

.fragno-dropdown__trigger:disabled .fragno-dropdown__chevron {
  color: var(--colors-gray-500, #a3a3a3);
}

/* Listbox */
.fragno-dropdown__listbox {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 100;
  margin: 0;
  padding: var(--spacing-xs, 0.25rem) 0;
  list-style: none;
  /* Same phantom --colors-white as the trigger: the open menu was a white sheet over a dark page. */
  background-color: var(--colors-secondary-default, #ffffff);
  border: 1px solid var(--colors-gray-200, #e5e5e5);
  border-radius: var(--radius-lg, 10px);
  box-shadow:
    0 4px 6px -2px rgba(10, 13, 18, 0.03),
    0 12px 16px -4px rgba(10, 13, 18, 0.08);
  max-height: 240px;
  overflow-y: auto;
  box-sizing: border-box;
}

.fragno-dropdown__listbox--open {
  display: block;
}

/* Options */
.fragno-dropdown__option {
  display: flex;
  align-items: center;
  padding: var(--spacing-lg, 0.75rem) var(--spacing-xl, 1rem);
  font-family: var(--font-family-body, "Inter", sans-serif);
  font-size: var(--font-size-text-md, 1rem);
  line-height: var(--line-height-text-md, 1.5rem);
  color: var(--colors-gray-900, #141414);
  cursor: pointer;
  transition: background-color 0.1s ease;
  user-select: none;
}

.fragno-dropdown__option--active {
  background-color: var(--colors-gray-100, #f7f7f7);
}

.fragno-dropdown__option--selected {
  font-weight: 500;
  color: var(--colors-blue-500, #155eef);
}

.fragno-dropdown__option:hover {
  background-color: var(--colors-gray-100, #f7f7f7);
}

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

/* ============================================
   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-4xl);
  --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);
  --global-nav-left-gap: var(--spacing-3xl);
  --global-nav-search-width-idle: 15rem;
  --global-nav-search-width-active: 37rem;
  --global-nav-search-height: 2.5rem;
  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 {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}

/* Elevate when search panel is open so the overlay stacks above page content (same idea as local nav).
   Must be above fragno-local-nav (z-index 200) when both sit in the layout — equal z-index would let DOM order win. */
.fragno-global-nav.fragno-global-nav--search-open {
  position: relative;
  z-index: 300;
}

.fragno-global-nav--search-open .fragno-global-nav__shell {
  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__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: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  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%;
}
/* NOTE: backdrop-filter is intentionally NOT applied to the default bar. The
   shell background is opaque, so the blur is a visual no-op — but when the nav
   overlays page content it produces a gradient/halo where the backdrop region
   is clipped (page horizontal-overflow, scrollbar gutter, clipping ancestor).
   The glass blur is applied only to the translucent Developer pill below. */

.fragno-global-nav__left-group {
  display: flex;
  align-items: center;
  gap: var(--global-nav-left-gap);
  min-width: 0;
  flex: 1 1 auto;
}

.fragno-global-nav__left {
  display: flex;
  align-items: center;
  min-width: 0;
  flex-shrink: 0;
}

/* Home / brand link wrapping fragno-logo-lockup (href from logo-href, sanitized in JS). */
.fragno-global-nav__logo-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  border-radius: var(--radius-md);
  line-height: 0;
  flex-shrink: 0;
}

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

.fragno-global-nav__logo-link:focus:not(:focus-visible) {
  outline: none;
}

.fragno-global-nav__nav {
  min-width: 0;
  flex-shrink: 1;
}

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

.fragno-global-nav--search-field-open .fragno-global-nav__nav {
  display: none;
}

.fragno-global-nav__center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 1;
}

.fragno-global-nav__center-slot,
.fragno-global-nav__search-bar {
  pointer-events: auto;
}

.fragno-global-nav__center-slot[hidden],
.fragno-global-nav__search-bar[hidden] {
  display: none;
}

.fragno-global-nav__search-bar {
  width: var(--global-nav-search-width-idle);
  max-width: var(--global-nav-search-width-idle);
  transition: width 0.2s ease, max-width 0.2s ease;
}

.fragno-global-nav__search-bar--open {
  width: var(--global-nav-search-width-active);
  max-width: var(--global-nav-search-width-active);
}

.fragno-global-nav__search-trigger,
.fragno-global-nav__search-field {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  width: 100%;
  height: var(--global-nav-search-height);
  margin: 0;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--colors-gray-400);
  border-radius: var(--radius-full);
  background-color: var(--colors-secondary-default);
  box-sizing: border-box;
}

.fragno-global-nav__search-trigger {
  cursor: pointer;
  font: inherit;
  color: var(--colors-gray-900);
  text-align: left;
}

.fragno-global-nav__search-trigger:hover {
  border-color: var(--colors-gray-500);
}

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

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

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

.fragno-global-nav__search-trigger-icon svg,
.fragno-global-nav__search-field-icon svg {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
}

.fragno-global-nav__search-trigger-label {
  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);
  white-space: nowrap;
}

.fragno-global-nav__search-field {
  padding: 0.625rem 0.875rem;
}

.fragno-global-nav__search-field[hidden],
.fragno-global-nav__search-trigger[hidden] {
  display: none;
}

.fragno-global-nav__actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--global-nav-actions-gap);
  min-width: 0;
  flex: 0 0 auto;
  margin-left: auto;
}

/* ------------------------------------------------------------------
   Filters CTA — multi-icon avatar stack (filters-cta-icons)
   Overlapping circular image avatars (max 2) + "+N" count, rendered
   as an icon-only fragno-button. Override the fixed icon-only square
   so the pill hugs the stack, and reset the leading-icon margin/gap.
   ------------------------------------------------------------------ */
fragno-button.fragno-global-nav__filters-cta .fragno-button--icon-only {
  width: auto;
  padding-inline: var(--spacing-lg);
  gap: 0;
}

fragno-button.fragno-global-nav__filters-cta .fragno-button__icon--leading {
  margin: 0;
}

.fragno-global-nav__filters-stack {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-md);
}

.fragno-global-nav__filters-stack-icons {
  display: inline-flex;
  align-items: center;
}

.fragno-global-nav__filters-stack-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-full);
  overflow: hidden;
  background: var(--color-bg-secondary, #f5f5f5);
  border: 2px solid var(--color-bg-primary, #ffffff);
  box-sizing: border-box;
  flex: 0 0 auto;
}

.fragno-global-nav__filters-stack-icon + .fragno-global-nav__filters-stack-icon {
  margin-left: -0.625rem;
}

.fragno-global-nav__filters-stack-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fragno-global-nav__filters-stack-count {
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-semibold, 600);
  font-size: var(--font-size-text-sm, 0.875rem);
  line-height: 1;
  color: var(--color-text-primary, #141414);
}

/* 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: var(--global-nav-search-height);
  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).
   Keep font-weight at medium — medium-plus widens glyphs and causes ~1px layout shift. */
.fragno-global-nav__link:hover {
  color: var(--colors-green-900);
  background-color: var(--colors-green-900-alpha-10);
}

.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 {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  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);
}

.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);
  width: var(--global-nav-search-width-active);
  max-width: 100%;
  margin: 0 auto;
}

.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%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  font-family: var(--font-family-body);
  font-size: var(--font-size-text-md);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-text-md);
  letter-spacing: var(--letter-spacing-text-md);
  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%;
}

/* ============================================
   GLOBAL NAV — Sticky mode + Developer Portal variant
   Sticky mode (generic; `sticky` attribute, any variant): the bar pins to the
   top and morphs into a translucent floating pill on scroll. Search stays white
   at the top and turns translucent when scrolled. Timing/easing are shared so
   every part of the morph stays in sync and fluid.
   Developer Portal variant (variant="developer", Nova | Web — Figma 73417:81753)
   layers on brand text beside the logo and nav links on the right; combine it
   with `sticky` for the Figma sticky-pill behavior.
   ============================================ */

:where(fragno-global-nav.fragno-global-nav-sticky-host) {
  display: block;
  position: sticky;
  top: 0;
  z-index: 300;
}

.fragno-global-nav--sticky {
  --global-nav-sticky-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --global-nav-sticky-duration: 0.4s;
  --global-nav-sticky-pill-max: 67rem; /* 1072px — scrolled pill width (Figma) */
  --global-nav-sticky-top-max: 100%; /* full-bleed bar at the top (no width cap) */
}

/* Zero-impact scroll sentinel: sits 1px above the nav so the observer can tell
   when the bar has become stuck without shifting layout. */
.fragno-global-nav__sticky-sentinel {
  height: 1px;
  margin-bottom: -1px;
  pointer-events: none;
}

.fragno-global-nav--sticky .fragno-global-nav__shell {
  max-width: var(--global-nav-sticky-top-max);
  margin: 0 auto;
  border-radius: 0;
  /* Never transition backdrop-filter: animating the blur radius re-rasterizes
     the blur on every frame of the morph and is the main cause of scroll jank.
     The blur simply snaps on/off; the width/margin/tint still animate smoothly. */
  transition: max-width var(--global-nav-sticky-duration) var(--global-nav-sticky-ease),
    margin var(--global-nav-sticky-duration) var(--global-nav-sticky-ease),
    background-color var(--global-nav-sticky-duration) var(--global-nav-sticky-ease);
}

.fragno-global-nav--sticky .fragno-global-nav__bar {
  transition: padding var(--global-nav-sticky-duration) var(--global-nav-sticky-ease),
    border-radius var(--global-nav-sticky-duration) var(--global-nav-sticky-ease),
    background-color var(--global-nav-sticky-duration) var(--global-nav-sticky-ease),
    box-shadow var(--global-nav-sticky-duration) var(--global-nav-sticky-ease);
}

/* Brand text beside the logo (e.g. "Developer") — 22px medium, tracking -0.88px. */
.fragno-global-nav--developer .fragno-global-nav__left {
  gap: var(--spacing-md);
}

/* The logo lockup keeps its (empty) partner slot laid out and reserves a 24px
   flex gap after the ID.me wordmark. That pushed the brand text ~32px from the
   mark; collapse the gap so the __left gap alone spaces "Developer" at
   --spacing-md (8px) from the wordmark, matching Figma. */
.fragno-global-nav--developer fragno-logo-lockup::part(lockup) {
  gap: 0;
}

.fragno-global-nav__brand-text {
  font-family: var(--font-family-display);
  font-size: 1.375rem;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-display-2xs);
  letter-spacing: -0.055rem;
  color: var(--colors-gray-900);
  white-space: nowrap;
  /* The row is centered, but the text's line box carries descender space that
     leaves its baseline above the wordmark's. Nudge it down (no layout shift)
     so "Developer" sits on the same baseline as the ID.me mark. */
  transform: translateY(0.1875rem);
}

/* Developer links sit on the right (in the actions row); align them to the end. */
.fragno-global-nav--developer .fragno-global-nav__nav .fragno-global-nav__link-list {
  justify-content: flex-end;
  flex-wrap: nowrap;
}

/* ---- Scrolled: morph into the floating translucent pill ----
   The shell is a layout-only wrapper around both the bar and the (detached)
   search panel. Keep the glass (tint + blur + shadow) OFF the shell: a
   backdrop-filter on the shell would become a backdrop root and flatten the
   panel's own blur. Instead the bar and panel are siblings that each blur the
   page content directly, so both read identically. */
.fragno-global-nav--sticky.fragno-global-nav--scrolled .fragno-global-nav__shell {
  max-width: var(--global-nav-sticky-pill-max);
  margin: var(--spacing-lg) auto 0;
  /* Shell is a transparent layout wrapper; the pill surface lives on the bar. */
  background-color: transparent;
}

/* When search is open the base rule adds a square-cornered shadow + radius to
   the shell; the pill's surface (and shadow) is on the bar, so keep the shell
   itself invisible. */
.fragno-global-nav--sticky.fragno-global-nav--scrolled.fragno-global-nav--search-open
  .fragno-global-nav__shell {
  border-radius: 0;
  box-shadow: none;
}

.fragno-global-nav--sticky.fragno-global-nav--scrolled .fragno-global-nav__bar {
  padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-lg) var(--spacing-4xl);
  /* The pill surface itself: rounded, translucent, blurred, lifted.
     Blur intensity matches Figma's scrolled pill (background blur 12px). */
  border-radius: var(--radius-full);
  background-color: var(--global-nav-glass-bg);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px 0 var(--global-nav-glass-shadow-color);
  /* Pin the blurred pill to its own compositor layer so the content seen
     through it stays put (no sub-pixel "swim") while the page scrolls behind. */
  transform: translateZ(0);
}

/* Scrolled pill: the collapsed search trigger has no fill in Figma — only a
   gray border — so it reads through the translucent glass instead of showing a
   solid white pill. (The expanded field's transparency is handled below.) */
.fragno-global-nav--sticky.fragno-global-nav--scrolled .fragno-global-nav__search-trigger {
  background-color: transparent;
}

/* ---- Scrolled search: full-width translucent field + detached panel ---- */
.fragno-global-nav--sticky.fragno-global-nav--scrolled.fragno-global-nav--search-field-open
  .fragno-global-nav__left-group {
  display: none;
}

.fragno-global-nav--sticky.fragno-global-nav--scrolled.fragno-global-nav--search-field-open
  .fragno-global-nav__center {
  position: static;
  transform: none;
  flex: 1 1 auto;
  width: 100%;
  z-index: auto;
}

.fragno-global-nav--sticky.fragno-global-nav--scrolled.fragno-global-nav--search-field-open
  .fragno-global-nav__search-bar,
.fragno-global-nav--sticky.fragno-global-nav--scrolled.fragno-global-nav--search-field-open
  .fragno-global-nav__search-bar--open {
  width: 100%;
  max-width: none;
}

.fragno-global-nav--sticky.fragno-global-nav--scrolled.fragno-global-nav--search-field-open
  .fragno-global-nav__search-field {
  background-color: transparent;
  border-color: transparent;
  padding-left: var(--spacing-xxs);
}

/* Detached, translucent suggestions panel below the pill (Figma subnav).
   Match the pill bar's glass blur (12px, per Figma) so both layers read the same. */
.fragno-global-nav--sticky.fragno-global-nav--scrolled .fragno-global-nav__panel {
  top: calc(100% + var(--spacing-md));
  padding: var(--spacing-3xl) var(--spacing-2xl);
  border-radius: var(--radius-5xl);
  background-color: var(--global-nav-glass-bg);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px 0 var(--global-nav-glass-shadow-color);
  /* Own compositor layer — keeps the blur stable if the page scrolls behind it. */
  transform: translateZ(0);
}

.fragno-global-nav--sticky.fragno-global-nav--scrolled .fragno-global-nav__panel-inner {
  width: 100%;
}

/* Keep the pill fully rounded even while the search panel is open (panel is detached). */
.fragno-global-nav--sticky.fragno-global-nav--scrolled.fragno-global-nav--search-open
  .fragno-global-nav__shell {
  border-radius: var(--radius-full);
}

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

  .fragno-global-nav__search-bar {
    transition: none;
  }

  .fragno-global-nav--sticky .fragno-global-nav__shell,
  .fragno-global-nav--sticky .fragno-global-nav__bar {
    transition: none;
  }
}

/* Tablet / lg and down: match global-nav.js matchMedia (63.99rem) so center links move to the drawer
   before the action buttons wrap (filters + search + menu + account). */
@media (max-width: 63.99rem) {
  .fragno-global-nav {
    --global-nav-padding-x: var(--spacing-2xl);
    --global-nav-actions-gap: var(--spacing-md);
  }

  /* Single row: logo | centered filters | actions (Nova | Web mobile — Figma 66694:48153) */
  .fragno-global-nav--mobile .fragno-global-nav__bar {
    gap: var(--spacing-lg);
  }

  .fragno-global-nav--mobile .fragno-global-nav__left-group {
    flex: 1 1 auto;
    gap: 0;
  }

  .fragno-global-nav--mobile .fragno-global-nav__left {
    flex: 0 0 auto;
  }

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

  .fragno-global-nav--mobile .fragno-global-nav__center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .fragno-global-nav--mobile .fragno-global-nav__actions {
    flex: 0 0 auto;
    margin-left: auto;
    flex-wrap: nowrap;
  }

  .fragno-global-nav--mobile.fragno-global-nav--search-open .fragno-global-nav__center {
    position: static;
    transform: none;
    flex: 1 1 auto;
    order: 2;
    pointer-events: auto;
  }

  .fragno-global-nav--mobile.fragno-global-nav--search-open .fragno-global-nav__search-bar {
    width: 100%;
    max-width: none;
  }

  .fragno-global-nav--mobile.fragno-global-nav--search-open .fragno-global-nav__left-group {
    flex: 0 0 auto;
    order: 1;
  }

  .fragno-global-nav--mobile.fragno-global-nav--search-open .fragno-global-nav__actions {
    order: 3;
  }

  .fragno-global-nav--mobile.fragno-global-nav--search-open .fragno-global-nav__center-slot {
    display: none;
  }

  .fragno-global-nav--mobile .fragno-global-nav__panel-inner {
    width: 100%;
  }

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

/* --------------------------------------------------------------------------
   Pagination (compact)
   -------------------------------------------------------------------------- */

.fragno-pagination {
  display: flex;
  box-sizing: border-box;
  align-items: center;
  font-family: var(--font-family-body, "Inter", sans-serif);
  color: var(--colors-gray-700, #424242);
}

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

.fragno-pagination--split {
  flex-direction: row;
  gap: var(--spacing-sm, 0.375rem);
  background: transparent;
}

.fragno-pagination--combined {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-lg, 0.75rem);
  border-radius: var(--radius-full, 9999px);
  background-color: var(--colors-secondary-default, #ffffff);
  border: none;
}

.fragno-pagination--combined.fragno-pagination--transparent {
  background-color: transparent;
}

.fragno-pagination--combined.fragno-pagination--md {
  padding: var(--spacing-md, 0.5rem) var(--spacing-xl, 1rem);
}

.fragno-pagination--combined.fragno-pagination--sm {
  padding: var(--spacing-sm, 0.375rem) var(--spacing-lg, 0.75rem);
}

.fragno-pagination__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: none;
  cursor: pointer;
  color: var(--colors-gray-700, #424242);
  background: transparent;
  -webkit-tap-highlight-color: transparent;
}

.fragno-pagination__btn:focus-visible {
  outline: 2px solid var(--colors-focus-ring, #155eef);
  outline-offset: 2px;
}

.fragno-pagination__btn:disabled {
  cursor: not-allowed;
  color: var(--colors-gray-400, #a3a3a3);
  opacity: 0.85;
}

.fragno-pagination--split .fragno-pagination__btn {
  flex-shrink: 0;
  background-color: var(--colors-secondary-default, #ffffff);
  border-radius: var(--radius-full, 9999px);
  overflow: hidden;
}

.fragno-pagination--split.fragno-pagination--md .fragno-pagination__btn {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0.625rem;
}

.fragno-pagination--split.fragno-pagination--sm .fragno-pagination__btn {
  width: 2.25rem;
  height: 2.25rem;
  padding: var(--spacing-md, 0.5rem);
}

.fragno-pagination--combined .fragno-pagination__btn {
  min-width: 2.5rem;
  min-height: 2.5rem;
  border-radius: var(--radius-full, 9999px);
}

.fragno-pagination--combined.fragno-pagination--sm .fragno-pagination__btn {
  min-width: 2.25rem;
  min-height: 2.25rem;
}

.fragno-pagination__icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

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

.fragno-pagination__icon-wrap--prev {
  transform: rotate(180deg);
}

.fragno-pagination__status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-weight: var(--font-weight-semibold, 600);
  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);
  color: var(--colors-gray-700, #424242);
  white-space: nowrap;
}

.fragno-pagination--split .fragno-pagination__status {
  background-color: var(--colors-secondary-default, #ffffff);
  border-radius: var(--radius-full, 9999px);
  min-height: 2.5rem;
  padding: 0 var(--spacing-xl, 1rem);
}

.fragno-pagination--split.fragno-pagination--sm .fragno-pagination__status {
  min-height: 2.25rem;
  padding: 0 var(--spacing-lg, 0.75rem);
}

.fragno-pagination--combined .fragno-pagination__status {
  background: transparent;
  min-height: unset;
  padding: 0;
}

/* --------------------------------------------------------------------------
   Pagination dot group (carousel indicators)
   -------------------------------------------------------------------------- */

.fragno-pagination-dot-group {
  display: flex;
  box-sizing: border-box;
  align-items: center;
  font-family: var(--font-family-body, "Inter", sans-serif);
  color: var(--colors-gray-800, #292929);
}

.fragno-pagination-dot-group *,
.fragno-pagination-dot-group *::before,
.fragno-pagination-dot-group *::after {
  box-sizing: border-box;
}

.fragno-pagination-dot-group--split {
  flex-direction: row;
  gap: var(--spacing-lg, 0.75rem);
  background: transparent;
}

.fragno-pagination-dot-group--split.fragno-pagination-dot-group--line {
  gap: var(--spacing-md, 0.5rem);
}

.fragno-pagination-dot-group--combined {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full, 9999px);
  border: none;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  background-color: var(--colors-alpha-white-90, rgba(255, 255, 255, 0.9));
}

.fragno-pagination-dot-group--combined.fragno-pagination-dot-group--transparent {
  background-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Padding + gap: Nova Pagination dot group — md */
.fragno-pagination-dot-group--combined.fragno-pagination-dot-group--md.fragno-pagination-dot-group--dot {
  gap: var(--spacing-lg, 0.75rem);
  padding: var(--spacing-md, 0.5rem);
}

.fragno-pagination-dot-group--combined.fragno-pagination-dot-group--md.fragno-pagination-dot-group--line {
  gap: var(--spacing-md, 0.5rem);
  padding: var(--spacing-md, 0.5rem);
}

/* lg */
.fragno-pagination-dot-group--combined.fragno-pagination-dot-group--lg.fragno-pagination-dot-group--dot {
  gap: var(--spacing-xl, 1rem);
  padding: var(--spacing-lg, 0.75rem);
}

.fragno-pagination-dot-group--combined.fragno-pagination-dot-group--lg.fragno-pagination-dot-group--line {
  gap: var(--spacing-lg, 0.75rem);
  padding: var(--spacing-lg, 0.75rem);
}

.fragno-pagination-dot-group__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0.125rem;
  min-width: 1.5rem;
  min-height: 1.5rem;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  color: var(--colors-gray-800, #292929);
  background: transparent;
  -webkit-tap-highlight-color: transparent;
}

.fragno-pagination-dot-group__btn:focus-visible {
  outline: 2px solid var(--colors-focus-ring, #155eef);
  outline-offset: 2px;
}

.fragno-pagination-dot-group__btn:disabled {
  cursor: not-allowed;
  color: var(--colors-gray-400, #a3a3a3);
  opacity: 0.85;
}

.fragno-pagination-dot-group__icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

.fragno-pagination-dot-group__icon-wrap svg {
  display: block;
  width: 100%;
  height: 100%;
}

.fragno-pagination-dot-group__icon-wrap--prev {
  transform: rotate(180deg);
}

.fragno-pagination-dot-group__track {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

/* Dot indicators — md */
.fragno-pagination-dot-group--md.fragno-pagination-dot-group--dot .fragno-pagination-dot-group__indicator {
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
  border: none;
  border-radius: var(--radius-full, 9999px);
  flex-shrink: 0;
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.4);
  -webkit-tap-highlight-color: transparent;
}

.fragno-pagination-dot-group--md.fragno-pagination-dot-group--dot .fragno-pagination-dot-group__track {
  gap: var(--spacing-lg, 0.75rem);
}

/* Dot — lg */
.fragno-pagination-dot-group--lg.fragno-pagination-dot-group--dot .fragno-pagination-dot-group__indicator {
  width: 0.625rem;
  height: 0.625rem;
  padding: 0;
  border: none;
  border-radius: var(--radius-full, 9999px);
  flex-shrink: 0;
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.4);
  -webkit-tap-highlight-color: transparent;
}

.fragno-pagination-dot-group--lg.fragno-pagination-dot-group--dot .fragno-pagination-dot-group__track {
  gap: var(--spacing-xl, 1rem);
}

.fragno-pagination-dot-group--split.fragno-pagination-dot-group--lg.fragno-pagination-dot-group--dot .fragno-pagination-dot-group__track {
  gap: var(--spacing-xl, 1rem);
}

/* Line — equal flex segments */
.fragno-pagination-dot-group--line .fragno-pagination-dot-group__track {
  gap: var(--spacing-md, 0.5rem);
}

.fragno-pagination-dot-group--split.fragno-pagination-dot-group--line .fragno-pagination-dot-group__track {
  min-width: 9rem;
}

.fragno-pagination-dot-group--combined.fragno-pagination-dot-group--line.fragno-pagination-dot-group--md
  .fragno-pagination-dot-group__track {
  min-width: 10rem;
}

.fragno-pagination-dot-group--combined.fragno-pagination-dot-group--line.fragno-pagination-dot-group--lg
  .fragno-pagination-dot-group__track {
  min-width: 11rem;
}

.fragno-pagination-dot-group--split.fragno-pagination-dot-group--line.fragno-pagination-dot-group--lg
  .fragno-pagination-dot-group__track {
  gap: var(--spacing-lg, 0.75rem);
}

.fragno-pagination-dot-group--md.fragno-pagination-dot-group--line .fragno-pagination-dot-group__indicator {
  flex: 1 1 0;
  min-width: 0;
  height: 0.375rem;
  padding: 0;
  border: none;
  border-radius: var(--radius-full, 9999px);
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.4);
  -webkit-tap-highlight-color: transparent;
}

.fragno-pagination-dot-group--lg.fragno-pagination-dot-group--line .fragno-pagination-dot-group__indicator {
  flex: 1 1 0;
  min-width: 0;
  height: 0.5rem;
  padding: 0;
  border: none;
  border-radius: var(--radius-full, 9999px);
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.4);
  -webkit-tap-highlight-color: transparent;
}

.fragno-pagination-dot-group__indicator--active {
  background-color: var(--colors-gray-800, #292929) !important;
}

.fragno-pagination-dot-group__indicator:focus-visible {
  outline: 2px solid var(--colors-focus-ring, #155eef);
  outline-offset: 2px;
}

.fragno-pagination-dot-group__indicator:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.fragno-pagination-dot-group--no-arrows .fragno-pagination-dot-group__btn {
  display: none;
}

.fragno-pagination-dot-group--no-arrows {
  gap: 0;
}

/* --------------------------------------------------------------------------
   Pagination (pages) — summary + numbered pages + prev/next
   -------------------------------------------------------------------------- */

.fragno-pagination-pages {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-xl, 1rem);
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-family-body, "Inter", sans-serif);
  color: var(--colors-gray-700, #424242);
}

.fragno-pagination-pages *,
.fragno-pagination-pages *::before,
.fragno-pagination-pages *::after {
  box-sizing: border-box;
}

.fragno-pagination-pages__summary {
  flex: 1 1 auto;
  min-width: 0;
}

.fragno-pagination-pages__summary-inner {
  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);
  font-weight: var(--font-weight-regular, 400);
  color: var(--colors-gray-600, #525252);
}

.fragno-pagination-pages__nav {
  flex: 0 0 auto;
}

.fragno-pagination-pages__controls {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-md, 0.5rem);
}

.fragno-pagination-pages__page-list {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-xxs, 0.125rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.fragno-pagination-pages__page-item--ellipsis {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  padding: 0 var(--spacing-xxs, 0.125rem);
  font-size: var(--font-size-text-sm, 0.875rem);
  font-weight: var(--font-weight-medium, 500);
  color: var(--colors-gray-500, #737373);
  user-select: none;
}

.fragno-pagination-pages--md .fragno-pagination-pages__page-item--ellipsis {
  min-width: 2.5rem;
  font-size: var(--font-size-text-md, 1rem);
}

.fragno-pagination-pages__page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  min-width: 2.25rem;
  min-height: 2.25rem;
  border: none;
  border-radius: var(--radius-full, 9999px);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--font-size-text-sm, 0.875rem);
  font-weight: var(--font-weight-medium, 500);
  line-height: var(--line-height-text-sm, 1.25rem);
  letter-spacing: var(--letter-spacing-text-sm, -0.004375rem);
  color: var(--colors-gray-700, #424242);
  background-color: transparent;
  -webkit-tap-highlight-color: transparent;
}

.fragno-pagination-pages__page-btn:hover:not(:disabled) {
  background-color: var(--colors-gray-100, #f5f5f5);
}

.fragno-pagination-pages__page-btn:focus-visible {
  outline: 2px solid var(--colors-focus-ring, #155eef);
  outline-offset: 2px;
}

.fragno-pagination-pages__page-btn:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.fragno-pagination-pages__page-current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  min-height: 2.25rem;
  border-radius: var(--radius-full, 9999px);
  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-900, #141414);
  background-color: var(--colors-gray-100, #f5f5f5);
}

.fragno-pagination-pages--md .fragno-pagination-pages__page-btn,
.fragno-pagination-pages--md .fragno-pagination-pages__page-current {
  min-width: 2.5rem;
  min-height: 2.5rem;
  font-size: var(--font-size-text-md, 1rem);
  line-height: var(--line-height-text-md, 1.5rem);
}

.fragno-pagination-pages__nav-btn {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs, 0.25rem);
  margin: 0;
  padding: var(--spacing-sm, 0.375rem) var(--spacing-lg, 0.75rem);
  border: 1px solid var(--colors-border-primary, #d6d6d6);
  border-radius: var(--radius-full, 9999px);
  cursor: pointer;
  font-family: inherit;
  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);
  letter-spacing: var(--letter-spacing-text-sm, -0.004375rem);
  color: var(--colors-gray-700, #424242);
  background-color: var(--colors-secondary-default, #ffffff);
  -webkit-tap-highlight-color: transparent;
}

.fragno-pagination-pages__nav-btn:hover:not(:disabled) {
  background-color: var(--colors-gray-50, #f7f7f7);
}

.fragno-pagination-pages__nav-btn:focus-visible {
  outline: 2px solid var(--colors-focus-ring, #155eef);
  outline-offset: 2px;
}

.fragno-pagination-pages__nav-btn:disabled {
  cursor: not-allowed;
  color: var(--colors-gray-400, #a3a3a3);
  border-color: var(--colors-gray-200, #e5e5e5);
  opacity: 0.85;
}

.fragno-pagination-pages__nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

.fragno-pagination-pages__nav-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.fragno-pagination-pages__nav-icon--flip {
  transform: rotate(180deg);
}

.fragno-pagination-pages--arrows-only .fragno-pagination-pages__nav-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.fragno-pagination-pages--arrows-only .fragno-pagination-pages__nav-btn {
  width: 2.25rem;
  height: 2.25rem;
  min-width: 2.25rem;
  min-height: 2.25rem;
  padding: 0;
  border-radius: var(--radius-full, 9999px);
}

.fragno-pagination-pages--md.fragno-pagination-pages--arrows-only .fragno-pagination-pages__nav-btn {
  width: 2.5rem;
  height: 2.5rem;
  min-width: 2.5rem;
  min-height: 2.5rem;
}

.fragno-pagination-pages--md:not(.fragno-pagination-pages--arrows-only) .fragno-pagination-pages__nav-btn {
  padding: var(--spacing-md, 0.5rem) var(--spacing-xl, 1rem);
  font-size: var(--font-size-text-md, 1rem);
  line-height: var(--line-height-text-md, 1.5rem);
}

@media (prefers-reduced-motion: reduce) {
  .fragno-pagination-pages__nav-btn,
  .fragno-pagination-pages__page-btn {
    transition: none;
  }
}

/* —— Featured text (Nova Web — heading + body in rounded card) —— */
.fragno-featured-text {
  display: block;
  width: 100%;
  max-width: 45rem; /* 720px — use full-width on host to span container */
  box-sizing: border-box;
}

.fragno-featured-text--full-width {
  max-width: none;
}

.fragno-featured-text__inner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--spacing-xl, 1rem);
  width: 100%;
  box-sizing: border-box;
  background-color: transparent;
  border-radius: var(--radius-5xl, 2rem);
  /* Mobile padding (Nova Web featured-text) */
  padding: var(--spacing-4xl, 2rem) var(--spacing-2xl, 1.25rem);
}

@media (min-width: 48rem) {
  .fragno-featured-text__inner--size-sm {
    padding: var(--spacing-4xl, 2rem) var(--spacing-3xl, 1.5rem);
  }

  .fragno-featured-text__inner--size-md {
    padding: var(--spacing-4xl, 2rem);
  }
}

.fragno-featured-text__heading {
  margin: 0;
  padding: 0;
  font-family: var(--font-family-display, "Inter", system-ui, sans-serif);
  font-weight: var(--font-weight-medium-plus, 550);
  color: var(--colors-gray-900, #141414);
}

.fragno-featured-text__inner--size-sm .fragno-featured-text__heading {
  font-size: 1.5rem; /* 24px — Figma display-xs (featured sm) */
  line-height: 2rem; /* 32px */
  letter-spacing: -0.03em;
}

.fragno-featured-text__inner--size-md .fragno-featured-text__heading {
  font-size: var(--font-size-display-2xs, 1.75rem);
  line-height: var(--line-height-display-2xs, 2.125rem);
  letter-spacing: -0.035em;
}

.fragno-featured-text__content {
  margin: 0;
  padding: 0;
  font-family: var(--font-family-body, "Inter", system-ui, sans-serif);
  font-weight: var(--font-weight-regular, 400);
  color: var(--colors-gray-700, #424242);
  font-size: var(--font-size-text-md, 1rem);
  line-height: var(--line-height-text-md, 1.5rem);
  letter-spacing: -0.005rem;
}

@media (min-width: 48rem) {
  .fragno-featured-text__content {
    font-size: var(--font-size-text-lg, 1.125rem);
    line-height: var(--line-height-text-lg, 1.75rem);
    letter-spacing: -0.005625rem;
  }
}

.fragno-featured-text__content > p {
  margin: 0 0 var(--font-size-text-md, 1rem) 0;
}

.fragno-featured-text__content > p:last-child {
  margin-bottom: 0;
}

@media (min-width: 48rem) {
  .fragno-featured-text__content > p {
    margin-bottom: var(--font-size-text-lg, 1.125rem);
  }

  .fragno-featured-text__content > p:last-child {
    margin-bottom: 0;
  }
}

/* —— FAQ block (Nova Web — title + optional image + accordion; tokens: FAQ Block Variants + content-block frame) —— */
fragno-faq {
  display: block;
  width: 100%;
  box-sizing: border-box;
}

.fragno-faq.fragno-faq__surface {
  width: 100%;
  box-sizing: border-box;
  padding: var(--faq-padding-mobile);
  background-color: var(--faq-surface-background);
}

@media (min-width: 48rem) {
  .fragno-faq.fragno-faq__surface {
    padding: var(--faq-padding-desktop-y) var(--faq-padding-desktop-x);
  }
}

.fragno-faq__layout {
  display: flex;
  flex-direction: column;
  gap: var(--faq-gap-stacked);
  width: 100%;
  align-items: stretch;
  box-sizing: border-box;
}

.fragno-faq--image-end .fragno-faq__media {
  order: 2;
}

.fragno-faq--image-end .fragno-faq__main {
  order: 1;
}

.fragno-faq--image-start .fragno-faq__media {
  order: 1;
}

.fragno-faq--image-start .fragno-faq__main {
  order: 2;
}

@media (min-width: 48rem) {
  .fragno-faq__layout {
    flex-direction: row;
    gap: var(--faq-gap-columns-desktop);
    align-items: flex-start;
  }

  .fragno-faq--no-image .fragno-faq__main {
    flex: 1 1 100%;
    max-width: 100%;
  }

  .fragno-faq:not(.fragno-faq--no-image) .fragno-faq__main {
    flex: 1 1 0;
    min-width: 0;
  }

  .fragno-faq:not(.fragno-faq--no-image) .fragno-faq__media {
    flex: 1 1 0;
    min-width: 0;
  }
}

.fragno-faq__main {
  width: 100%;
  min-width: 0;
}

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

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

.fragno-faq__media-inner {
  border-radius: var(--radius-5xl);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background-color: var(--colors-gray-100);
}

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

/* Display lg / Medium — Figma */
.fragno-faq__title {
  margin: 0 0 var(--faq-gap-title-accordion);
  padding: 0;
  font-family: var(--font-family-display);
  font-size: var(--font-size-display-md);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-display-md);
  letter-spacing: var(--letter-spacing-display-md);
  color: var(--colors-gray-900);
}

@media (min-width: 48rem) {
  .fragno-faq__title {
    font-size: var(--font-size-display-lg);
    line-height: var(--line-height-display-lg);
    letter-spacing: var(--letter-spacing-display-lg);
  }
}

.fragno-faq__region {
  width: 100%;
  min-width: 0;
}

/* Accordion — Text md/550 (header), Text md/Regular (body); pairs with faq.js */
.fragno-faq .accordion {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.fragno-faq .accordion .accordion-title {
  cursor: pointer;
  padding: var(--faq-accordion-title-padding-y-mobile) 0;
  margin: 0;
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-medium-plus);
  border-top: 1px solid var(--colors-gray-200);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--font-size-text-md);
  line-height: var(--line-height-text-md);
  letter-spacing: var(--letter-spacing-text-md);
  background-color: transparent;
  text-align: left;
  color: var(--colors-gray-900);
  box-sizing: border-box;
  width: 100%;
}

@media (min-width: 48rem) {
  .fragno-faq .accordion .accordion-title {
    padding: var(--faq-accordion-title-padding-y-desktop) 0;
  }
}

.fragno-faq .accordion .accordion-title:first-child {
  border-top: none;
}

.fragno-faq .accordion .accordion-title-inner {
  flex-grow: 1;
  padding-right: var(--spacing-md);
}

.fragno-faq .accordion .accordion-title:focus-visible .accordion-title-inner {
  outline: 2px solid var(--colors-blue-600);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

.fragno-faq .accordion .icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--faq-accordion-icon-slot-width);
  color: var(--colors-gray-700);
}

.fragno-faq .accordion .icon svg {
  display: block;
  width: var(--spacing-3xl);
  height: var(--spacing-3xl);
}

.fragno-faq .accordion .accordion-content {
  overflow: hidden;
  height: 0;
  margin: 0;
  padding: 0;
  transition: height 0.25s ease;
  position: relative;
  top: calc(-1 * var(--faq-accordion-content-offset-y-mobile));
  box-sizing: border-box;
}

@media (min-width: 48rem) {
  .fragno-faq .accordion .accordion-content {
    top: calc(-1 * var(--faq-accordion-content-offset-y-desktop));
  }
}

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

.fragno-faq .accordion .accordion-content-inner {
  padding-top: var(--faq-accordion-content-padding-top);
  padding-bottom: var(--faq-accordion-content-padding-bottom);
  margin-right: var(--faq-accordion-icon-slot-width);
  font-family: var(--font-family-body);
  font-size: var(--font-size-text-md);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-text-md);
  letter-spacing: var(--letter-spacing-text-md);
  color: var(--colors-gray-700);
}

.fragno-faq .accordion .accordion-content-inner p {
  margin: 0 0 var(--spacing-md);
}

.fragno-faq .accordion .accordion-content-inner p:last-child {
  margin-bottom: 0;
}

/* —— Article header (Nova Web article text block) —— */
.fragno-article-header {
  width: 100%;
  box-sizing: border-box;
}

.fragno-article-header__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: var(--container-max-width-desktop, 80rem);
  margin: 0 auto;
  padding-left: var(--container-padding-mobile, 1rem);
  padding-right: var(--container-padding-mobile, 1rem);
  box-sizing: border-box;
}

@media (min-width: 48rem) {
  .fragno-article-header__inner {
    padding-left: var(--container-padding-desktop, 2rem);
    padding-right: var(--container-padding-desktop, 2rem);
  }
}

.fragno-article-header__stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-3xl, 1.5rem);
  width: 100%;
  max-width: 48rem; /* 768px — Nova Web article heading max width */
  text-align: center;
}

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

.fragno-article-header__badges[hidden] {
  display: none;
}

.fragno-article-header__title {
  margin: 0;
  width: 100%;
  font-family: var(--font-family-display), sans-serif;
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-text-primary, var(--colors-gray-900, #141414));
  font-size: var(--font-size-display-md, 2.5rem);
  line-height: var(--line-height-display-md, 3rem);
  letter-spacing: var(--letter-spacing-display-md, -0.03125rem);
}

@media (min-width: 48rem) {
  .fragno-article-header__title {
    font-size: var(--font-size-display-xl, 3.75rem);
    line-height: var(--line-height-display-xl, 4.5rem);
    letter-spacing: var(--letter-spacing-display-xl, -0.075rem);
  }
}

.fragno-article-header__title[hidden] {
  display: none;
}

.fragno-article-header__desc {
  margin: 0;
  width: 100%;
  font-family: var(--font-family-body), sans-serif;
  font-weight: var(--font-weight-regular, 400);
  font-size: var(--font-size-text-lg, 1.125rem);
  line-height: var(--line-height-text-lg, 1.75rem);
  letter-spacing: var(--letter-spacing-text-lg, -0.005625rem);
  color: var(--colors-gray-700, #424242);
}

@media (min-width: 48rem) {
  .fragno-article-header__desc {
    font-size: var(--font-size-text-xl, 1.25rem);
    line-height: var(--line-height-text-xl, 1.875rem);
    letter-spacing: var(--letter-spacing-text-xl, 0);
  }
}

.fragno-article-header__desc[hidden] {
  display: none;
}

.fragno-article-header__footer {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  max-width: 48rem;
  margin-top: var(--spacing-3xl, 1.5rem);
  gap: var(--spacing-3xl, 1.5rem);
}

.fragno-article-header__footer[hidden] {
  display: none;
}

.fragno-article-header__divider {
  width: 100%;
  height: 1px;
  background-color: var(--color-border-secondary, var(--colors-gray-200, #e5e5e5));
  border: none;
  margin: 0;
}

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

.fragno-article-header__meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-lg, 0.75rem);
  width: 100%;
}

@media (min-width: 48rem) {
  .fragno-article-header__meta {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md, 0.5rem);
  }

  .fragno-article-header__meta--author-only {
    justify-content: flex-end;
  }

  .fragno-article-header__meta--listen-only {
    justify-content: flex-start;
  }
}

.fragno-article-header__listen-wrap {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm, 0.375rem);
}

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

.fragno-article-header__listen-row {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm, 0.375rem);
}

.fragno-article-header__listen-btn-host {
  display: inline-flex;
  flex-shrink: 0;
}

.fragno-article-header__listen-duration {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-md, 0.5rem);
  font-family: var(--font-family-body), sans-serif;
  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-article-header__listen-duration[hidden] {
  display: none;
}

.fragno-article-header__listen-sep {
  color: var(--colors-gray-400, #a3a3a3);
}

.fragno-article-header__listen-time {
  color: var(--colors-gray-700, #424242);
}

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

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

.fragno-article-header__author-link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-md, 0.5rem);
  max-width: 100%;
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius-md, 0.5rem);
  -webkit-tap-highlight-color: transparent;
}

.fragno-article-header__author-link:hover .fragno-article-header__author-name {
  text-decoration: underline;
  text-underline-offset: 2px;
}

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

.fragno-article-header__author-name {
  font-family: var(--font-family-body), sans-serif;
  font-weight: var(--font-weight-regular, 400);
  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);
  color: var(--colors-gray-900, #141414);
  white-space: nowrap;
}

/* -------------------------------------------------------------------------- */
/* Image block (app prototype) — fragno-image-block */
/* Nova Web: landscape 3:2 | square 1:1 | portrait 3:4; optional rights link */
/* -------------------------------------------------------------------------- */

fragno-image-block {
  display: block;
  width: 100%;
  min-width: 0;
}

.fragno-image-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  min-width: 0;
  gap: clamp(var(--spacing-lg, 0.75rem), 0.5rem + 1.5vw, var(--spacing-xl, 1rem));
  padding: 0;
  box-sizing: border-box;
}

.fragno-image-block__frame {
  position: relative;
  width: 100%;
  border-radius: var(--radius-5xl, 2rem);
  overflow: hidden;
  flex-shrink: 0;
}

.fragno-image-block__frame--landscape {
  aspect-ratio: 3 / 2;
}

.fragno-image-block__frame--square {
  aspect-ratio: 1 / 1;
}

.fragno-image-block__frame--portrait {
  aspect-ratio: 3 / 4;
}

.fragno-image-block__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
  pointer-events: none;
}

.fragno-image-block__img[hidden] {
  display: none !important;
}

.fragno-image-block__rights {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-sm, 0.375rem);
  width: 100%;
  min-width: 0;
}

.fragno-image-block__rights[hidden] {
  display: none !important;
}

.fragno-image-block__rights-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0.333rem;
  border: 1px solid var(--colors-gray-400, #a3a3a3);
  border-radius: var(--radius-full, 9999px);
  color: var(--colors-gray-600, #525252);
  box-sizing: border-box;
}

.fragno-image-block__rights-icon-wrap[hidden] {
  display: none !important;
}

.fragno-image-block__rights-svg {
  display: block;
  flex-shrink: 0;
}

.fragno-image-block__rights-link {
  display: inline-flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 24px;
  font-family: var(--font-family-body), 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);
  letter-spacing: var(--letter-spacing-text-sm, -0.004375rem);
  color: var(--colors-gray-700, #424242);
  text-decoration: none;
  border-radius: var(--radius-sm, 0.25rem);
  padding: 0.125rem 0;
  -webkit-tap-highlight-color: transparent;
}

.fragno-image-block__rights-link:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

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

.fragno-image-block__rights-text {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 24px;
  font-family: var(--font-family-body), 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);
  letter-spacing: var(--letter-spacing-text-sm, -0.004375rem);
  color: var(--colors-gray-700, #424242);
  margin: 0;
  padding: 0.125rem 0;
}

.fragno-image-block__rights-text[hidden],
.fragno-image-block__rights-link[hidden] {
  display: none !important;
}

/* —— Tabs (Nova Web) —— */
.fragno-tabs {
  box-sizing: border-box;
}

.fragno-tabs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--spacing-xl, 1rem);
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--color-border-subtle, #e5e5e5);
}

.fragno-tabs--md .fragno-tabs__list {
  gap: var(--spacing-2xl, 1.25rem);
}

.fragno-tabs__tab {
  position: relative;
  box-sizing: border-box;
  margin: 0;
  padding: var(--spacing-md, 0.5rem) 0 0;
  min-height: 1.5rem;
  border: none;
  background: transparent;
  font-family: var(--font-family-body), sans-serif;
  color: var(--color-text-tertiary, #525252);
  font-weight: var(--font-weight-regular, 400);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.fragno-tabs--sm .fragno-tabs__tab {
  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-tabs--md .fragno-tabs__tab {
  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-tabs__tab-label {
  display: inline-block;
  padding-bottom: var(--spacing-md, 0.5rem);
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
}

.fragno-tabs__tab:hover:not(.fragno-tabs__tab--selected) {
  color: var(--color-text-secondary, #292929);
}

.fragno-tabs__tab--selected {
  color: var(--color-text-primary, #141414);
  font-weight: var(--font-weight-medium-plus, 550);
}

.fragno-tabs__tab--selected .fragno-tabs__tab-label {
  border-bottom-color: var(--color-text-primary, #141414);
}

.fragno-tabs__tab:focus {
  outline: none;
}

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

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

/* —— Segment control (Nova Web — Figma QQ7oqsQdNUUsW88EqJHWAB node 65725:8178) —— */
.fragno-segment-control {
  box-sizing: border-box;
}

.fragno-segment-control__track {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-md, 0.5rem);
  margin: 0;
  padding: var(--spacing-md, 0.5rem);
  border-radius: var(--radius-full, 9999px);
  box-sizing: border-box;
  max-width: 100%;
}

.fragno-segment-control--bg-transparent .fragno-segment-control__track {
  background: transparent;
}

.fragno-segment-control--bg-white .fragno-segment-control__track {
  background: var(--colors-base-white, #ffffff);
}

.fragno-segment-control--bg-grey .fragno-segment-control__track {
  background: var(--colors-gray-200, #e5e5e5);
}

/* White selected pill on white outer: Nova uses grey track so the pill reads */
.fragno-segment-control--bg-white.fragno-segment-control--selection-white .fragno-segment-control__track {
  background: var(--colors-gray-200, #e5e5e5);
}

.fragno-segment-control__segment {
  position: relative;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  border-radius: var(--radius-full, 9999px);
  background: transparent;
  font-family: var(--font-family-body), sans-serif;
  font-weight: var(--font-weight-medium, 500);
  color: var(--colors-gray-700, #424242);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.fragno-segment-control--sm .fragno-segment-control__segment {
  gap: var(--spacing-xs, 0.25rem);
  min-height: 2.25rem;
  padding: var(--spacing-md, 0.5rem) 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: var(--letter-spacing-text-sm, -0.004375rem);
}

.fragno-segment-control--md .fragno-segment-control__segment {
  gap: var(--spacing-sm, 0.375rem);
  padding: 0.625rem var(--spacing-xl, 1rem);
  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-segment-control__label {
  display: inline-block;
  padding: 0 var(--spacing-xxs, 0.125rem);
  white-space: nowrap;
}

.fragno-segment-control__segment:hover:not(.fragno-segment-control__segment--selected) {
  color: var(--colors-gray-800, #292929);
}

/* Selected pill: black (default) */
.fragno-segment-control--selection-black .fragno-segment-control__segment--selected {
  background: var(--colors-gray-900, #141414);
  color: var(--colors-base-white, #ffffff);
  font-weight: var(--font-weight-medium-plus, 550);
}

/* Selected pill: grey — Nova Web gray (dark mode) 200 */
.fragno-segment-control--selection-grey .fragno-segment-control__segment--selected {
  background: var(--fragno-segment-pill-grey);
  color: var(--colors-gray-900, #141414);
  font-weight: var(--font-weight-medium-plus, 550);
}

/* Selected pill: white */
.fragno-segment-control--selection-white .fragno-segment-control__segment--selected {
  background: var(--colors-base-white, #ffffff);
  color: var(--colors-gray-900, #141414);
  font-weight: var(--font-weight-medium-plus, 550);
}

.fragno-segment-control__segment:focus {
  outline: none;
}

.fragno-segment-control__segment:focus-visible {
  outline: 2px solid var(--colors-gray-900, #141414);
  outline-offset: 2px;
}

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

/* —— Local Nav (Nova Web — Local Nav-v1, Figma QQ7oqsQdNUUsW88EqJHWAB; Content 64180:7280) ——
   Bar: 60px height, 80px horizontal inset, space-between categories, shadow-md-style strip. */
fragno-local-nav {
  --local-nav-padding-x: 5rem; /* 80px — Figma spacing-8xl; matches Global Nav desktop inset */
  --local-nav-bar-shadow: 0 4px 18px 0 var(--colors-alpha-black-06, rgba(0, 0, 0, 0.06));
  display: block;
  position: relative;
  z-index: 200;
  box-sizing: border-box;
  font-family: var(--font-family-body), sans-serif;
}

.fragno-local-nav__layout {
  position: relative;
  box-sizing: border-box;
  background: var(--color-bg-primary, #fff);
  box-shadow: var(--local-nav-bar-shadow);
}

.fragno-local-nav__bar {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: space-between;
  gap: 0;
  padding: 0 var(--local-nav-padding-x);
  min-height: 3.75rem; /* 60px — Figma Content / center frame height */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.fragno-local-nav__trigger-wrap {
  display: flex;
  align-items: stretch;
  flex: 0 0 auto;
}

.fragno-local-nav__trigger-link {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-lg, 0.75rem) var(--spacing-xxs, 0.125rem);
  margin: 0;
  min-height: 2.75rem;
  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);
  font-weight: var(--font-weight-medium-plus, 550);
  color: var(--color-text-tertiary, #525252);
  text-decoration: none;
  border: none;
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  transition:
    color 0.15s ease,
    border-color 0.15s ease;
}

.fragno-local-nav__trigger-link:hover {
  color: var(--color-text-secondary, #292929);
}

.fragno-local-nav__trigger-wrap--open .fragno-local-nav__trigger-link,
.fragno-local-nav__trigger-link--current {
  color: var(--color-text-primary, #141414);
  border-bottom-color: var(--color-text-primary, #141414);
}

.fragno-local-nav__trigger-link:focus {
  outline: none;
}

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

.fragno-local-nav__panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  box-sizing: border-box;
  background: var(--color-bg-primary, #fff);
  padding: var(--spacing-4xl, 2rem) var(--local-nav-padding-x) var(--spacing-5xl, 2.5rem);
  box-shadow: 0 var(--spacing-lg, 0.75rem) var(--spacing-3xl, 1.5rem) rgba(10, 13, 18, 0.12);
}

.fragno-local-nav__panel[hidden] {
  display: none !important;
}

.fragno-local-nav__panel-inner {
  display: block;
}

.fragno-local-nav__panel-section[hidden] {
  display: none !important;
}

/* Mega-panel: grid of subcategory columns (Figma Bottom — 66215:52035) */
.fragno-local-nav__subcategory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  column-gap: var(--spacing-5xl, 2.5rem); /* Figma Bottom: space-between columns ~40px token */
  row-gap: var(--spacing-4xl, 2rem); /* Figma Bottom 66215:52035: gap between mega rows = spacing-4xl (32px) */
  width: 100%;
}

.fragno-local-nav__subcategory {
  box-sizing: border-box;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.fragno-local-nav__subcategory-heading {
  margin: 0;
  padding: 0 var(--spacing-xxs, 0.125rem);
  width: 100%;
  max-width: 13rem;
  font-size: var(--font-size-text-lg, 1.125rem);
  line-height: var(--line-height-text-lg, 1.75rem);
  font-weight: var(--font-weight-medium, 500);
  color: var(--colors-gray-800, #292929);
}

.fragno-local-nav__subcategory-divider {
  margin-top: var(--spacing-sm, 0.375rem);
  margin-bottom: var(--spacing-lg, 0.75rem);
  height: 1px;
  width: 100%;
  max-width: 13rem;
  background: rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
}

.fragno-local-nav__subcategory ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-xl, 1rem);
  width: 100%;
  max-width: 13rem;
}

.fragno-local-nav__subcategory li {
  margin: 0;
}

.fragno-local-nav__subcategory li a {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
  padding: var(--spacing-xs, 0.25rem) var(--spacing-xxs, 0.125rem);
  border-radius: var(--radius-md, 0.5rem);
  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-700, #424242);
  text-decoration: none;
}

.fragno-local-nav__subcategory li a:hover {
  color: var(--color-text-primary, #141414);
}

.fragno-local-nav__subcategory li a:focus-visible {
  outline: 2px solid var(--colors-gray-900, #141414);
  outline-offset: 2px;
}

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

/* Narrow viewports: inset + gap match scrollable bar (Figma desktop uses full-width space-between). */
@media (max-width: 63.99rem) {
  fragno-local-nav {
    --local-nav-padding-x: var(--spacing-3xl, 1.5rem);
  }

  .fragno-local-nav__bar {
    justify-content: flex-start;
    gap: var(--spacing-2xl, 1.25rem);
  }
}

/* =============================================================================
   Footer (Nova Web — Figma 64180:8583, QQ7oqsQdNUUsW88EqJHWAB)
   Dark contentinfo: horizontal padding matches local nav (80px desktop).
   ============================================================================= */

fragno-footer {
  /* Nova Web footer / Figma QQ7oqsQdNUUsW88EqJHWAB — exact fills */
  --footer-bg: #0f0f0f; /* Gray/950 */
  --footer-text-primary: #ffffff;
  --footer-text-secondary: #e5e5e5; /* Gray/200 — links, icon SVGs, 1px control outlines */
  --footer-text-tertiary: #a3a3a3; /* Gray/400 — stat labels, copyright */
  --footer-outline-ui: #e5e5e5; /* Figma: help CTA + link focus */
  --footer-social-border: #525252; /* Gray/600 — round social icon buttons */
  --footer-muted: var(--footer-text-tertiary);
  --footer-border-subtle: rgba(255, 255, 255, 0.12);
  --footer-padding-x: 5rem; /* 80px — Nova spacing-8xl; matches local nav desktop inset */
  --footer-padding-y-top: var(--spacing-7xl, 4rem);
  --footer-padding-y-bottom: var(--spacing-6xl, 3rem);
  --footer-max-width: var(--width-3xl, 80rem); /* 1280px container */

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

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

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

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

/* Hide the brand / ID.me logo when the host sets `hide-logo`. Needs the class+attribute
   specificity here because a bare `.fragno-footer__brand { display: flex }` rule would
   otherwise beat the UA `[hidden] { display: none }`. */
.fragno-footer__brand[hidden] {
  display: none;
}

.fragno-footer__brand fragno-logo-lockup {
  display: block;
  width: 4.25rem; /* 68px — matches ID.me mark intrinsic width in logo-lockup */
  max-width: 100%;
}

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

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

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

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

.fragno-footer__copyright {
  margin: 0;
  /* Text sm/Regular — Figma footer */
  font-family: var(--font-family-body, 'Inter', sans-serif);
  font-size: var(--font-size-text-sm, 0.875rem);
  font-weight: var(--font-weight-regular, 400);
  line-height: var(--line-height-text-sm, 1.25rem);
  letter-spacing: var(--letter-spacing-text-sm, -0.004375rem);
  color: var(--footer-text-tertiary);
}

/* Stats row — three cards; Figma rounded cards with subtle border */
.fragno-footer__stats-wrap {
  width: 100%;
}

.fragno-footer__stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-3xl, 1.5rem);
  width: 100%;
}

/* Figma (Contextual desktop): icon top-left; metric + label stacked below; all left-aligned */
.fragno-footer__stat {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-xl, 1rem);
  padding: var(--spacing-3xl, 1.5rem);
  border: 1px solid var(--footer-border-subtle);
  border-radius: var(--radius-xl, 0.75rem);
  background: transparent;
}

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

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

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

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

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

.fragno-footer__stat-interactive {
  text-decoration: none;
  color: inherit;
}

/* Link columns — Figma: Text sm/Medium headings, Text md/Regular links */
.fragno-footer__columns {
  width: 100%;
}

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

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

.fragno-footer__column-heading {
  margin: 0 0 var(--spacing-xl, 1rem);
  /* Text sm/Medium — Figma column titles (Learn, Connect, Legal) */
  font-family: var(--font-family-body, 'Inter', sans-serif);
  font-size: var(--font-size-text-sm, 0.875rem);
  font-weight: var(--font-weight-medium, 500);
  line-height: var(--line-height-text-sm, 1.25rem);
  letter-spacing: var(--letter-spacing-text-sm, -0.004375rem);
  color: var(--footer-text-primary);
}

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

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

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

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

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

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

/* Meta: Follow us | Get help | badge — desktop row */
.fragno-footer__meta {
  width: 100%;
}

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

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

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

.fragno-footer__meta-help fragno-button {
  display: inline-block;
}

/* Secondary CTA — Figma 1px outline #E5E5E5 */
.fragno-footer__meta-help fragno-button .fragno-button.fragno-button--secondary {
  background-color: transparent;
  color: var(--footer-text-primary);
  border-color: var(--footer-outline-ui);
}

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

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

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

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

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

.fragno-footer__social-link svg {
  width: 1.5rem;
  height: 1.5rem;
  display: block;
}

/* Social: icon-only fragno-button (Nova Web — 20×20 glyphs on dark) */
.fragno-footer__social-list fragno-button {
  display: inline-block;
  vertical-align: middle;
}

/* Round icon-only socials — dark grey stroke (Nova Gray/600), circular */
.fragno-footer__social-list fragno-button.fragno-footer__social-button .fragno-button.fragno-button--secondary.fragno-button--icon-only {
  background-color: transparent;
  color: var(--footer-text-secondary);
  border: 1px solid var(--footer-social-border);
  border-radius: 50%;
  aspect-ratio: 1;
  box-sizing: border-box;
}

.fragno-footer__social-list
  fragno-button.fragno-footer__social-button
  .fragno-button.fragno-button--secondary.fragno-button--icon-only:hover:not(:disabled) {
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--footer-text-primary);
  border-color: #737373; /* Gray/500 — slightly lighter on hover */
}

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

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

/* Offset so the seal lines up with the help CTA (same top as “Visit Help Center”), not the column heading */
.fragno-footer__meta-badge {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1 1 auto;
  padding-top: calc(var(--line-height-text-sm, 1.25rem) + var(--spacing-lg, 0.75rem));
  box-sizing: border-box;
}

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

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

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

  .fragno-footer__stats {
    grid-template-columns: 1fr;
  }

  /* Figma mobile: Learn | Connect side-by-side; Legal full width with 2 link columns */
  .fragno-footer__columns-inner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-4xl, 2rem) var(--spacing-3xl, 1.5rem);
    align-items: start;
  }

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

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

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

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

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

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

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

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

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

  .fragno-footer__meta-badge {
    justify-content: flex-start;
    padding-top: 0;
  }

  /* Contextual + stats: logo → copyright → stats → columns → meta */
  .fragno-footer--variant-contextual.fragno-footer--has-stats .fragno-footer__top {
    order: 1;
  }

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

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

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

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

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

/* =============================================================================
   Footer — minimal variant (Nova Web — Figma 72633:26278)
   Light, condensed footer: logo · inline links · social icons.
   Desktop = single row; mobile = logo → 2-column links → social.
   ============================================================================= */

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

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

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

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

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

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

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

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

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

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

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

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

/* Minimal socials: plain icon buttons (rounded, no border), dark glyphs */
.fragno-footer__minimal-social
  .fragno-footer__social-list
  fragno-button.fragno-footer__social-button
  .fragno-button.fragno-button--secondary.fragno-button--icon-only {
  background-color: transparent;
  color: var(--colors-gray-700, #424242);
  border: none;
  border-radius: var(--radius-md, 0.5rem);
  aspect-ratio: 1;
}

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

.fragno-footer__minimal-social
  .fragno-footer__social-list
  fragno-button.fragno-footer__social-button
  .fragno-button.fragno-button--secondary.fragno-button--icon-only:focus-visible {
  outline: 2px solid var(--colors-gray-900, #141414);
  outline-offset: 2px;
  box-shadow: none;
}

/* Visually-hidden social heading (kept for screen readers) */
.fragno-footer__sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

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

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

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

  /* Mobile: two columns, column-major order (About/Accessibility | Terms/Privacy) */
  .fragno-footer__minimal-link-list {
    display: block;
    column-count: 2;
    column-gap: var(--spacing-md, 0.5rem);
  }

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

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

  .fragno-footer__minimal-link {
    /* Text md/Regular — Figma minimal footer links (mobile) */
    font-size: var(--font-size-text-md, 1rem);
    font-weight: var(--font-weight-regular, 400);
    line-height: var(--line-height-text-md, 1.5rem);
    letter-spacing: var(--letter-spacing-text-md, -0.005rem);
  }

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

/* =============================================================================
   Toast (Nova — Figma 57475:1617, app prototype)
   ============================================================================= */

.fragno-toast-host {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-end;
  gap: var(--spacing-md, 0.5rem);
  padding: var(--spacing-3xl, 1.5rem);
  pointer-events: none;
  box-sizing: border-box;
}

.fragno-toast-host[data-position='top'] {
  justify-content: flex-start;
}

.fragno-toast-host > fragno-toast {
  pointer-events: auto;
  align-self: center;
  width: 100%;
  max-width: min(25rem, 100vw - 2rem);
}

fragno-toast {
  display: block;
  box-sizing: border-box;
}

fragno-toast:not([open]) {
  display: none !important;
}

.fragno-toast {
  width: 100%;
}

.fragno-toast__shell {
  --fragno-toast-surface: rgba(255, 255, 255, 0.6);
  --fragno-toast-text: var(--colors-gray-900, #141414);
  --fragno-toast-muted: var(--colors-gray-700, #424242);
  --fragno-toast-close: var(--colors-gray-900, #141414);

  width: 100%;
  padding: var(--spacing-lg, 0.75rem) var(--spacing-none, 0);
  border-radius: var(--radius-5xl, 2rem);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: var(--fragno-toast-surface);
  border: 1px solid transparent;
  box-shadow: 0 var(--spacing-xs, 0.25rem) var(--spacing-xl, 1rem) var(--colors-alpha-black-06, rgba(0, 0, 0, 0.06));
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.fragno-toast__shell[data-variant='dark'] {
  --fragno-toast-surface: rgba(0, 0, 0, 0.6);
  --fragno-toast-text: #ffffff;
  --fragno-toast-muted: rgba(255, 255, 255, 0.85);
  --fragno-toast-close: #ffffff;
}

.fragno-toast__content {
  display: flex;
  align-items: center;
  gap: var(--spacing-md, 0.5rem);
  padding: 0 var(--spacing-lg, 0.75rem);
  min-height: 2.5rem;
}

.fragno-toast__lead {
  flex-shrink: 0;
  position: relative;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-xl, 1rem);
  border: 1.4px solid var(--colors-alpha-white-40, rgba(255, 255, 255, 0.4));
  background-color: var(--colors-gray-800, #292929);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--colors-alpha-white-90, rgba(255, 255, 255, 0.9));
}

.fragno-toast__shell[data-tone='success'] .fragno-toast__lead {
  background-color: var(--colors-green-800, #095c37);
  border-color: var(--colors-alpha-white-30, rgba(255, 255, 255, 0.3));
}

.fragno-toast__shell[data-tone='informational'] .fragno-toast__lead {
  background-color: var(--colors-blue-800, #0040c1);
  border-color: var(--colors-alpha-white-30, rgba(255, 255, 255, 0.3));
}

.fragno-toast__shell[data-tone='alert'] .fragno-toast__lead {
  background-color: var(--colors-gray-800, #292929);
  border-color: var(--colors-alpha-white-40, rgba(255, 255, 255, 0.4));
}

.fragno-toast__shell[data-tone='error'] .fragno-toast__lead {
  background-color: var(--colors-red-700, #b42318);
  border-color: var(--colors-alpha-white-30, rgba(255, 255, 255, 0.3));
}

.fragno-toast__shell[data-tone='neutral'] .fragno-toast__lead {
  background-color: var(--colors-gray-800, #292929);
  border-color: var(--colors-alpha-white-40, rgba(255, 255, 255, 0.4));
}

.fragno-toast__icon-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.fragno-toast__icon-slot svg {
  display: block;
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
}

.fragno-toast__copy {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.fragno-toast__message {
  margin: 0;
  font-family: var(--font-family-body, 'Inter', sans-serif);
  font-size: var(--font-size-text-sm, 0.875rem);
  font-weight: var(--font-weight-medium, 500);
  line-height: var(--line-height-text-sm, 1.25rem);
  letter-spacing: var(--letter-spacing-text-sm, -0.03125em);
  color: var(--fragno-toast-text);
}

.fragno-toast__description {
  margin: 0;
  font-family: var(--font-family-body, 'Inter', sans-serif);
  font-size: var(--font-size-text-xs, 0.75rem);
  font-weight: var(--font-weight-regular, 400);
  line-height: var(--line-height-text-xs, 1.125rem);
  color: var(--fragno-toast-muted);
}

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

.fragno-toast__close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: var(--radius-md, 0.5rem);
  background: transparent;
  color: var(--fragno-toast-close);
  cursor: pointer;
}

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

.fragno-toast__close:hover {
  background-color: var(--colors-alpha-black-06, rgba(0, 0, 0, 0.06));
}

.fragno-toast__shell[data-variant='dark'] .fragno-toast__close:hover {
  /* The DARK toast variant: a white wash IS the correct hover on it (the light variant
     above uses --colors-alpha-black-06). */
  background-color: rgba(255, 255, 255, 0.12);
}

.fragno-toast__close:focus-visible {
  outline: 2px solid var(--colors-focus-ring, #155eef);
  outline-offset: 2px;
}

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

/* --- Store card (Nova | Web) --- */
fragno-store-card {
  display: inline-block;
  vertical-align: bottom;
}

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

.fragno-store-card__inner {
  position: relative;
  overflow: hidden;
  border-radius: var(--hero-card-radius, var(--radius-5xl));
  width: 24rem;
  height: 13.5rem;
  box-shadow:
    0 0.125rem 0.25rem -0.125rem rgba(10, 13, 18, 0.05),
    0 0.25rem 1.125rem 0.5rem rgba(0, 0, 0, 0.06);
  transition:
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.fragno-store-card:hover .fragno-store-card__inner {
  box-shadow:
    0 0.125rem 0.25rem -0.125rem rgba(10, 13, 18, 0.08),
    0 0.25rem 1.125rem 0.5rem rgba(0, 0, 0, 0.09);
}

.fragno-store-card[data-size='xs'] .fragno-store-card__inner {
  height: 6.5rem;
}

.fragno-store-card[data-size='md'] .fragno-store-card__inner {
  height: 16.5rem;
}

.fragno-store-card[data-size='lg'] .fragno-store-card__inner {
  height: 20rem;
}

.fragno-store-card[data-size='xl'] .fragno-store-card__inner {
  width: 63rem;
  height: 31.5rem;
}

/* Same frosted stack as hero card when a background image is present (border + blur + gradient). */
.fragno-store-card[data-has-background='true'] .fragno-store-card__inner {
  border-width: var(--hero-card-border-width, 1px);
  border-style: solid;
  border-color: var(--hero-card-border-dark);
}

.fragno-store-card__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
}

.fragno-store-card__bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* No background-src: media layer transparent. */
.fragno-store-card__media.fragno-store-card__media--placeholder {
  background: transparent;
}

/* Blur + gradient layers — match .fragno-hero-card__blur-overlay / __gradient */
.fragno-store-card__blur-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  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;
  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;
}

.fragno-store-card__blur-overlay[hidden] {
  display: none !important;
}

.fragno-store-card__gradient {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--hero-card-gradient-overlay);
  pointer-events: none;
  border-radius: var(--hero-card-radius, var(--radius-5xl));
}

.fragno-store-card__gradient[hidden] {
  display: none !important;
}

.fragno-store-card__logo-slot {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 50%;
  padding: 0;
  pointer-events: none;
}

.fragno-store-card__logo-slot .fragno-store-card__logo-img {
  pointer-events: auto;
  display: block;
  width: 8.25rem;
  height: 6.875rem;
  object-fit: contain;
  object-position: center;
  border-radius: var(--radius-3xl, 1.25rem);
  background: transparent;
}

.fragno-store-card__logo-alt-text {
  margin: 0;
  pointer-events: auto;
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-medium);
  font-size: 1.875rem; /* 30px — Life Figma Display sm/Medium */
  line-height: 2.375rem; /* 38px */
  letter-spacing: -0.0375rem; /* -0.6px */
  text-align: center;
  color: #ffffff;
  word-break: break-word;
  max-width: 9.25rem; /* 148px */
  width: 100%;
  padding: var(--spacing-md) 0;
  box-sizing: border-box;
}

.fragno-store-card[data-has-background='false'] .fragno-store-card__logo-alt-text {
  color: var(--colors-gray-900);
}

/* SVG logo tinting (same rules as hero card icon); raster formats unchanged */
.fragno-store-card[data-dark-logo] .fragno-store-card__logo-slot {
  color: var(--colors-gray-900);
}

.fragno-store-card[data-dark-logo] .fragno-store-card__logo-slot .fragno-store-card__logo-img[src$='.svg'],
.fragno-store-card[data-dark-logo] .fragno-store-card__logo-slot .fragno-store-card__logo-img[src*='.svg?'],
.fragno-store-card[data-dark-logo] .fragno-store-card__logo-slot .fragno-store-card__logo-img[src^='data:image/svg+xml'] {
  filter: brightness(0);
}

.fragno-store-card[data-dark-logo] .fragno-store-card__logo-alt-text {
  color: var(--colors-gray-900);
}

.fragno-store-card[data-light-logo] .fragno-store-card__logo-slot {
  color: var(--colors-gray-50);
}

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

.fragno-store-card[data-light-logo] .fragno-store-card__logo-alt-text {
  color: #ffffff;
}

.fragno-store-card[data-size='xs'] .fragno-store-card__logo-slot .fragno-store-card__logo-img {
  width: 5rem;
  height: 4rem;
  border-radius: var(--radius-2xl, 1rem);
}

.fragno-store-card[data-size='xs'] .fragno-store-card__logo-alt-text {
  font-size: var(--font-size-text-lg);
  line-height: var(--line-height-text-lg);
  letter-spacing: var(--letter-spacing-text-lg);
  max-width: 6.5rem;
}

.fragno-store-card[data-size='xl'] .fragno-store-card__logo-slot .fragno-store-card__logo-img {
  width: 24.75rem;
  height: 20.625rem;
  border-radius: 3.75rem;
}

.fragno-store-card[data-size='xl'] .fragno-store-card__logo-alt-text {
  font-size: var(--font-size-display-sm);
  line-height: var(--line-height-display-sm);
  letter-spacing: var(--letter-spacing-display-sm);
  max-width: 18.5rem;
}

.fragno-store-card[data-logo-position='bottom'] .fragno-store-card__logo-slot {
  top: auto;
  bottom: -0.1rem;
  transform: translateX(-50%);
  padding-bottom: var(--spacing-3xl, 1.5rem);
}

.fragno-store-card[data-logo-position='bottom'][data-size='xl'] .fragno-store-card__logo-slot {
  padding-bottom: var(--spacing-4xl, 2rem);
}

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

  .fragno-store-card__blur-overlay {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* --- Category card (Nova | Web — Figma 65655:32227) --- */
fragno-category-card {
  display: inline-block;
  vertical-align: bottom;
  max-width: 100%;
}

.fragno-category-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.fragno-category-card__inner {
  position: relative;
  box-sizing: border-box;
  width: var(--category-card-width, 24rem);
  max-width: 100%;
  min-width: var(--category-card-min-width, 17.5rem);
  height: var(--category-card-height-sm, 13.5rem);
  overflow: hidden;
  border-radius: var(--category-card-radius, var(--radius-5xl, 2rem));
  border: var(--category-card-border-width, 1.6px) solid var(--category-card-border-color, #ffffff);
  background: var(--category-card-fallback-bg, rgba(255, 255, 255, 0.8));
  transform-origin: center center;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-width 0.2s ease,
    border-radius 0.2s ease;
}

.fragno-category-card[data-size='md'] .fragno-category-card__inner {
  height: var(--category-card-height-md, 16.5rem);
}

.fragno-category-card[data-size='lg'] .fragno-category-card__inner {
  height: var(--category-card-height-lg, 20rem);
}

.fragno-category-card[data-size='xl'] .fragno-category-card__inner {
  height: var(--category-card-height-xl, 24.375rem);
}

.fragno-category-card__link:hover .fragno-category-card__inner,
.fragno-category-card__link:focus-visible .fragno-category-card__inner,
.fragno-category-card:not(:has(.fragno-category-card__link)):hover .fragno-category-card__inner {
  transform: scale(1.05);
  border-width: var(--category-card-border-width-hover, 1.68px);
  border-radius: var(--category-card-radius-hover, 2.1rem);
  box-shadow:
    0 0.13125rem 0.590625rem 0.2625rem rgba(0, 0, 0, 0.02),
    0 0.065625rem 0.13125rem -0.065625rem rgba(10, 13, 18, 0.06);
}

.fragno-category-card__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
}

.fragno-category-card__media.fragno-category-card__media--placeholder {
  background-color: var(--colors-gray-100, #f5f5f5);
  background-image:
    linear-gradient(45deg, var(--colors-gray-200, #e5e5e5) 25%, transparent 25%),
    linear-gradient(-45deg, var(--colors-gray-200, #e5e5e5) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--colors-gray-200, #e5e5e5) 75%),
    linear-gradient(-45deg, transparent 75%, var(--colors-gray-200, #e5e5e5) 75%);
  background-size: 1rem 1rem;
  background-position:
    0 0,
    0 0.5rem,
    0.5rem -0.5rem,
    -0.5rem 0;
}

.fragno-category-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.fragno-category-card__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background: rgba(0, 0, 0, 0.1);
  pointer-events: none;
}

.fragno-category-card__scrim[hidden] {
  display: none !important;
}

.fragno-category-card__gradient {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
  /* Figma bottom overlay — vertical fade to fully transparent + uniform 10% scrim (65655:32378) */
  background-image:
    linear-gradient(
      to top,
      rgba(0, 0, 0, 0.9) 11.562%,
      rgba(55, 55, 55, 0.61) 37.624%,
      rgba(0, 0, 0, 0) 59.491%,
      rgba(0, 0, 0, 0) 100%
    ),
    linear-gradient(90deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%);
}

.fragno-category-card__gradient[hidden] {
  display: none !important;
}

.fragno-category-card__label {
  position: absolute;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  pointer-events: none;
}

.fragno-category-card__title {
  margin: 0;
  padding: var(--spacing-md, 0.5rem) 0;
  box-sizing: border-box;
  font-family: var(--font-family-display, 'Inter', sans-serif);
  font-weight: var(--font-weight-medium, 500);
  font-size: var(--category-card-title-font-size, 1.5rem);
  line-height: var(--category-card-title-line-height, 2rem);
  letter-spacing: var(--category-card-title-letter-spacing, -0.03rem);
  color: var(--colors-base-white, #ffffff);
  word-break: break-word;
}

/* Center — sm uses fixed top offset (Figma 56.9px) */
.fragno-category-card[data-alignment='center'][data-size='sm'] .fragno-category-card__label {
  left: 50%;
  top: 3.55625rem;
  transform: translateX(-50%);
  width: 8.25rem;
  align-items: center;
}

.fragno-category-card[data-alignment='center'][data-size='sm'] .fragno-category-card__title {
  width: 9.25rem;
  max-width: 9.25rem;
  text-align: center;
}

/* Center — md/lg */
.fragno-category-card[data-alignment='center'][data-size='md'] .fragno-category-card__label,
.fragno-category-card[data-alignment='center'][data-size='lg'] .fragno-category-card__label {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 8.25rem;
  min-height: 6.1875rem;
  align-items: center;
}

.fragno-category-card[data-alignment='center'][data-size='md'] .fragno-category-card__title,
.fragno-category-card[data-alignment='center'][data-size='lg'] .fragno-category-card__title {
  width: 9.25rem;
  max-width: 9.25rem;
  text-align: center;
}

/* Center — xl */
.fragno-category-card[data-alignment='center'][data-size='xl'] .fragno-category-card__label {
  left: 50%;
  top: calc(50% + 0.03125rem);
  transform: translate(-50%, -50%);
  align-items: center;
}

.fragno-category-card[data-alignment='center'][data-size='xl'] .fragno-category-card__title {
  width: 100%;
  text-align: center;
}

/* Bottom — sm/md/lg centered */
.fragno-category-card[data-alignment='bottom']:not([data-size='xl']) .fragno-category-card__label {
  left: 50%;
  bottom: -0.1rem;
  transform: translateX(-50%);
  padding-bottom: var(--spacing-md, 0.5rem);
  width: 8.25rem;
  min-height: 6.1875rem;
  align-items: center;
}

.fragno-category-card[data-alignment='bottom']:not([data-size='xl']) .fragno-category-card__title {
  width: 9.25rem;
  max-width: 9.25rem;
  text-align: center;
}

/* Bottom — xl left-aligned (Figma left 18.4px, width 344px, pb 24px) */
.fragno-category-card[data-alignment='bottom'][data-size='xl'] .fragno-category-card__label {
  left: 1.15rem;
  bottom: -0.1rem;
  width: 21.5rem;
  max-width: calc(100% - 1.15rem - 1.35rem);
  padding-bottom: var(--spacing-3xl, 1.5rem);
  align-items: flex-start;
}

.fragno-category-card[data-alignment='bottom'][data-size='xl'] .fragno-category-card__title {
  width: 100%;
  text-align: left;
}

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

  .fragno-category-card__link:hover .fragno-category-card__inner,
  .fragno-category-card__link:focus-visible .fragno-category-card__inner,
  .fragno-category-card:not(:has(.fragno-category-card__link)):hover .fragno-category-card__inner {
    transform: none;
  }
}

/* ==========================================================================
   fragno-offer-panel
   ========================================================================== */

fragno-offer-panel {
  display: block;
  width: 100%;
  box-sizing: border-box;
}

.fragno-offer-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}

/* --- Card body (primary-offer + coupon) --- */

.fragno-offer-panel__card-body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 1.6px var(--spacing-3xl, 1.5rem) var(--spacing-3xl, 1.5rem);
  box-sizing: border-box;
  border-radius: var(--radius-5xl, 2rem);
  background: rgb(var(--surface-base-rgb, 255 255 255) / 0.4);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: var(--offer-panel-border-width, 1.6px) solid white;
  box-shadow: 0 4px 24px 0 rgba(10, 13, 18, 0.10);
}

/* When a badge is showing, push the panels content below it */
.fragno-offer-panel__card-body--has-badge {
  padding-top: var(--spacing-4xl, 2rem);
}

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

/* --- Badge wrap --- */

/* Badge is always absolutely positioned at the card-body's top border edge so
   the convex wings merge tangent into the panel's top border line. */
.fragno-offer-panel__badge-wrap {
  position: absolute;
  top: calc(-1 * var(--offer-panel-border-width, 1.6px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}

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

/* --- Panels (inner column) --- */

.fragno-offer-panel__panels {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--spacing-4xl, 2rem);
  width: 100%;
}

.fragno-offer-panel[data-type="primary-offer"] .fragno-offer-panel__panels {
  padding: var(--spacing-3xl, 1.5rem) 0;
}

.fragno-offer-panel[data-type="coupon"] .fragno-offer-panel__panels {
  padding-top: var(--spacing-3xl, 1.5rem);
  gap: var(--spacing-xl, 1rem);
}

/* --- Alerts slot --- */

.fragno-offer-panel__alerts-slot {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl, 1rem);
  width: 100%;
}

/* --- Text group --- */

.fragno-offer-panel__text-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs, 0.25rem);
  width: 100%;
  text-align: center;
}

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

.fragno-offer-panel__headline {
  margin: 0;
  font-family: var(--font-family-body, 'Inter', sans-serif);
  font-size: var(--font-size-display-30, 1.875rem);
  font-weight: var(--font-weight-medium-plus, 550);
  line-height: var(--line-height-display-30, 2.375rem);
  letter-spacing: -0.6px;
  color: var(--colors-gray-900, #141414);
}

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

.fragno-offer-panel[data-type="coupon"] .fragno-offer-panel__headline {
  font-size: 1.5rem;
  line-height: 2rem;
  letter-spacing: -0.48px;
}

.fragno-offer-panel__subheadline {
  margin: 0;
  font-family: var(--font-family-body, 'Inter', sans-serif);
  font-size: var(--font-size-text-xl, 1.25rem);
  font-weight: var(--font-weight-medium, 500);
  line-height: var(--line-height-text-xl, 1.875rem);
  color: var(--colors-gray-700, #424242);
}

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

.fragno-offer-panel[data-type="coupon"] .fragno-offer-panel__subheadline {
  font-size: var(--font-size-text-md, 1rem);
  line-height: var(--line-height-text-md, 1.5rem);
  letter-spacing: -0.08px;
}

/* --- Extra slot --- */

.fragno-offer-panel__extra-slot {
  display: flex;
  flex-direction: column;
  width: 100%;
}

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

/* --- Coupon section --- */

.fragno-offer-panel__coupon-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md, 0.5rem);
  width: 100%;
}

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

.fragno-offer-panel__coupon-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md, 0.5rem);
  width: 100%;
  padding: var(--spacing-lg, 0.75rem) var(--spacing-xl, 1rem);
  /* 60px = Figma coupon-field height; not on the spacing scale so it stays a literal. */
  min-height: 60px;
  border: 1.6px dashed var(--colors-gray-400, #a3a3a3);
  border-radius: var(--radius-3xl, 1.25rem);
  background: white;
  box-sizing: border-box;
  transition: border-color 0.2s ease, color 0.2s ease;
  color: var(--colors-gray-900, #141414);
}

.fragno-offer-panel__coupon-field:has(.fragno-offer-panel__coupon-btn:not([hidden])):hover {
  border-color: var(--colors-gray-700, #424242);
}

.fragno-offer-panel__coupon-field--copied {
  border-color: var(--color-status-success-border);
  color: var(--color-status-success-text);
}

.fragno-offer-panel__coupon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: var(--spacing-md, 0.5rem);
  border: none;
  border-radius: var(--radius-full, 9999px);
  background: transparent;
  cursor: pointer;
  color: inherit;
  transition: background-color 0.15s ease;
}

.fragno-offer-panel__coupon-btn:hover,
.fragno-offer-panel__coupon-btn:focus-visible {
  background-color: var(--colors-gray-200, #e5e5e5);
}

.fragno-offer-panel__coupon-btn:focus-visible {
  outline: var(--spacing-xxs, 0.125rem) solid var(--colors-focus-ring, #155eef);
  outline-offset: var(--spacing-xxs, 0.125rem);
}

/* "Copy" hover tooltip on the coupon copy button. Reuses fragno-tooltip's
   visual classes (host, popover, surface, arrow, body, label) for design
   consistency without coupling to the tooltip component's JS — visibility
   is driven by :hover on the wrapper and :focus-visible on the button. */
.fragno-offer-panel__coupon-btn-wrap {
  /* The wrapper becomes the flex item inside __coupon-field; preserve the
     non-shrinking behavior the button had before being wrapped. */
  flex-shrink: 0;
}

.fragno-offer-panel__coupon-btn-wrap:hover .fragno-tooltip__popover,
.fragno-offer-panel__coupon-btn:focus-visible ~ .fragno-tooltip__popover {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

/* While the field is in the "copied" state, suppress the copy button's hover
   affordances so the green check + green border read cleanly: no gray hover
   background under the icon, and no "Copy" tooltip (the action just
   completed). The state self-clears via the JS timer in _showCopiedState. */
.fragno-offer-panel__coupon-field--copied .fragno-offer-panel__coupon-btn:hover,
.fragno-offer-panel__coupon-field--copied .fragno-offer-panel__coupon-btn:focus-visible {
  background-color: transparent;
}

.fragno-offer-panel__coupon-field--copied .fragno-offer-panel__coupon-btn-wrap:hover .fragno-tooltip__popover,
.fragno-offer-panel__coupon-field--copied .fragno-offer-panel__coupon-btn:focus-visible ~ .fragno-tooltip__popover {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.fragno-offer-panel__coupon-code-text {
  font-family: var(--font-family-body, 'Inter', sans-serif);
  font-size: var(--font-size-text-lg, 1.125rem);
  font-weight: var(--font-weight-regular, 400);
  line-height: var(--line-height-text-lg, 1.75rem);
  letter-spacing: -0.09px;
}

.fragno-offer-panel__coupon-copy-icon {
  display: inline-flex;
  flex-shrink: 0;
}

.fragno-offer-panel__coupon-rule {
  margin: 0;
  font-family: var(--font-family-body, 'Inter', sans-serif);
  font-size: var(--font-size-text-md, 1rem);
  font-weight: var(--font-weight-regular, 400);
  line-height: var(--line-height-text-md, 1.5rem);
  letter-spacing: -0.08px;
  color: var(--colors-gray-900, #141414);
  text-align: center;
}

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

/* --- Actions slot --- */

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

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

/* --- Cashback row --- */

.fragno-offer-panel__cashback-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs, 0.25rem);
  /* 30px pill height + 14px horizontal padding match the Figma cashback chip;
     neither value is on the spacing scale, kept as literals. */
  height: 30px;
  padding: 0 14px;
  border-radius: var(--radius-full, 9999px);
  overflow: hidden;
  color: var(--color-status-success-text);
}

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

.fragno-offer-panel__cashback-icon {
  display: inline-flex;
  flex-shrink: 0;
}

.fragno-offer-panel__cashback-text {
  font-family: var(--font-family-body, 'Inter', sans-serif);
  font-size: var(--font-size-text-md, 1rem);
  font-weight: var(--font-weight-medium-plus, 550);
  line-height: var(--line-height-text-md, 1.5rem);
  letter-spacing: -0.08px;
  white-space: nowrap;
}

/* --- Sign-in slot --- */

.fragno-offer-panel__signin-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

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

/* --- List wrap (offers-list) ---
   The card list scrolls only when the consumer constrains the panel height
   (e.g. `fragno-offer-panel { height: 20rem }`). The flex chain below — host
   height → `.fragno-offer-panel` height: 100% → `__list-wrap` flex: 1 →
   `__card-list` flex: 1 + overflow-y: auto — lets that consumer-set bound
   propagate to the scroll container. `min-height: 0` at each level is what
   permits flex children to shrink below their intrinsic content height; without
   it, `overflow: auto` never triggers because the parent grows to fit. */

.fragno-offer-panel[data-type="offers-list"] {
  height: 100%;
}

.fragno-offer-panel__list-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-4xl, 2rem);
  width: 100%;
  flex: 1;
  min-height: 0;
  padding-top: var(--spacing-xl, 1rem);
}

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

.fragno-offer-panel__list-headline {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs, 0.25rem);
  width: 100%;
  text-align: center;
}

.fragno-offer-panel__list-title {
  font-family: var(--font-family-body, 'Inter', sans-serif);
  font-size: var(--font-size-text-xl, 1.25rem);
  font-weight: var(--font-weight-medium-plus, 550);
  line-height: var(--line-height-text-xl, 1.875rem);
  color: var(--colors-gray-900, #141414);
  margin: 0;
}

.fragno-offer-panel__list-subtitle {
  font-family: var(--font-family-body, 'Inter', sans-serif);
  font-size: var(--font-size-text-md, 1rem);
  font-weight: var(--font-weight-medium, 500);
  line-height: var(--line-height-text-md, 1.5rem);
  letter-spacing: -0.08px;
  color: var(--colors-gray-700, #424242);
  margin: 0;
}

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

.fragno-offer-panel__card-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg, 0.75rem);
  width: 100%;
  /* 2px horizontal pad prevents focus rings on offer-cards from being clipped
     by the scroll container; sized to fit the ring without visible inset. */
  padding: 0 var(--spacing-xxs, 0.125rem);
  box-sizing: border-box;
  /* Scroll only when consumer-set height (see comment on `__list-wrap`) bounds
     the panel and the card content exceeds the remaining space. With no bound,
     `flex: 1` and the auto height collapse to content size and no scrollbar
     renders. */
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.fragno-offer-panel__card-list:empty {
  display: none;
}

/* --- Screen-reader live region --- */

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

/* Reduced-motion path disables backdrop-filter (not strictly "motion," but it is
   a per-frame composite that can stutter on low-power devices and produce a
   parallax-like effect when scrolled past). Background opacity lifts from 0.4
   to 0.85 to keep the panel readable once the blur is gone. Switch to
   `prefers-reduced-transparency: reduce` once browser coverage allows. */
@media (prefers-reduced-motion: reduce) {
  .fragno-offer-panel__card-body {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgb(var(--surface-base-rgb, 255 255 255) / 0.85);
  }

  .fragno-offer-panel__coupon-field,
  .fragno-offer-panel__coupon-btn {
    transition: none;
  }
}

/* ==========================================================================
   fragno-interstitial-lockup (Nova Web — Figma 64445:26467)
   No dark-mode overrides: the component is always rendered over a full-bleed
   image or branded gradient backdrop, so the frosted-glass light values
   (rgba(255,255,255,0.4) card, white border, white badge) are intentional and
   correct in both light and dark host pages. tokens-dark.css intentionally
   leaves these tokens unset.
   ========================================================================== */

fragno-interstitial-lockup {
  display: block;
  width: 100%;
  max-width: var(--interstitial-lockup-max-width-desktop);
  box-sizing: border-box;
  container-type: inline-size;
  container-name: interstitial-lockup;
}

.fragno-interstitial-lockup {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--interstitial-lockup-stack-gap);
  width: 100%;
  box-sizing: border-box;
}

.fragno-interstitial-lockup__top-text {
  margin: 0;
  width: 100%;
  font-family: var(--font-family-body, 'Inter', sans-serif);
  font-size: var(--font-size-text-xl, 1.25rem);
  font-weight: var(--font-weight-medium, 500);
  line-height: var(--line-height-text-xl, 1.875rem);
  letter-spacing: var(--letter-spacing-text-xl, 0);
  color: var(--colors-gray-800, #292929);
  text-align: center;
}

.fragno-interstitial-lockup__top-text[hidden] {
  display: none;
}

.fragno-interstitial-lockup__brand-shell {
  display: block;
  width: var(--interstitial-lockup-brand-width);
  height: var(--interstitial-lockup-brand-height);
  box-sizing: border-box;
  border-radius: var(--interstitial-lockup-brand-radius);
  background: transparent;
  flex-shrink: 0;
  overflow: hidden;
}

.fragno-interstitial-lockup__brand-shell[hidden] {
  display: none;
}

.fragno-interstitial-lockup__brand-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

.fragno-interstitial-lockup__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: var(--interstitial-lockup-card-border-width)
    var(--interstitial-lockup-card-padding-x)
    var(--interstitial-lockup-card-padding-bottom);
  box-sizing: border-box;
  border-radius: var(--interstitial-lockup-card-radius);
  background: var(--interstitial-lockup-card-bg);
  border: var(--interstitial-lockup-card-border-width) solid var(--colors-base-white, #ffffff);
  box-shadow: var(--interstitial-lockup-card-shadow);
  backdrop-filter: blur(var(--interstitial-lockup-card-blur));
  -webkit-backdrop-filter: blur(var(--interstitial-lockup-card-blur));
}

.fragno-interstitial-lockup__badge-wrap {
  position: absolute;
  top: calc(-1 * var(--interstitial-lockup-card-border-width));
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.fragno-interstitial-lockup__badge-wrap .fragno-badge {
  background-color: var(--colors-base-white, #ffffff);
}

.fragno-interstitial-lockup__badge-wrap .fragno-badge--size-md {
  min-width: 5.1875rem;
  padding: 0.25rem 0.75rem 0.25rem 0.375rem;
  gap: 0.375rem;
}

.fragno-interstitial-lockup__content {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--interstitial-lockup-content-gap);
  width: 100%;
  padding-top: var(--interstitial-lockup-content-padding-top);
  box-sizing: border-box;
}

.fragno-interstitial-lockup__card--has-badge .fragno-interstitial-lockup__content {
  padding-top: var(--interstitial-lockup-content-padding-top-badge);
}

.fragno-interstitial-lockup__text-group {
  display: flex;
  flex-direction: column;
  gap: var(--interstitial-lockup-headline-subheadline-gap);
  text-align: center;
  width: 100%;
}

.fragno-interstitial-lockup__text-group[hidden] {
  display: none;
}

.fragno-interstitial-lockup__headline {
  margin: 0;
  font-family: var(--font-family-display, 'Inter', sans-serif);
  font-size: var(--font-size-display-30, 1.875rem);
  font-weight: var(--font-weight-medium, 500);
  line-height: var(--line-height-display-30, 2.375rem);
  letter-spacing: var(--letter-spacing-display-30, -0.0375rem);
  color: var(--colors-gray-900, #141414);
}

.fragno-interstitial-lockup__headline[hidden] {
  display: none;
}

.fragno-interstitial-lockup__subheadline {
  margin: 0;
  font-family: var(--font-family-body, 'Inter', sans-serif);
  font-size: var(--font-size-text-xl, 1.25rem);
  font-weight: var(--font-weight-medium, 500);
  line-height: var(--line-height-text-xl, 1.875rem);
  letter-spacing: var(--letter-spacing-text-xl, 0);
  color: var(--colors-gray-700, #424242);
}

.fragno-interstitial-lockup__subheadline[hidden] {
  display: none;
}

.fragno-interstitial-lockup__sign-in-prompt {
  margin: 0;
  font-family: var(--font-family-body, 'Inter', sans-serif);
  font-size: var(--font-size-text-md, 1rem);
  font-weight: var(--font-weight-regular, 400);
  line-height: var(--line-height-text-md, 1.5rem);
  letter-spacing: var(--letter-spacing-text-md, -0.005rem);
  color: var(--interstitial-lockup-slate-text, #272727);
  text-align: center;
}

.fragno-interstitial-lockup__sign-in-prompt[hidden] {
  display: none;
}

.fragno-interstitial-lockup__sign-in-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--spacing-xl, 1rem);
  width: 100%;
}

.fragno-interstitial-lockup__sign-in-actions[hidden] {
  display: none;
}

.fragno-interstitial-lockup__sign-in-group {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--spacing-md, 0.5rem);
  width: 100%;
}

.fragno-interstitial-lockup__signin-slot,
.fragno-interstitial-lockup__secondary-slot,
.fragno-interstitial-lockup__wallet-slot,
.fragno-interstitial-lockup__actions-slot,
.fragno-interstitial-lockup__tertiary-slot {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--spacing-md, 0.5rem);
  width: 100%;
}

.fragno-interstitial-lockup__signin-slot:empty,
.fragno-interstitial-lockup__secondary-slot:empty,
.fragno-interstitial-lockup__wallet-slot:empty,
.fragno-interstitial-lockup__actions-slot:empty,
.fragno-interstitial-lockup__tertiary-slot:empty {
  display: none;
}

.fragno-interstitial-lockup__actions-slot[hidden],
.fragno-interstitial-lockup__tertiary-slot[hidden] {
  display: none;
}

.fragno-interstitial-lockup__signin-slot fragno-button,
.fragno-interstitial-lockup__secondary-slot fragno-button,
.fragno-interstitial-lockup__wallet-slot fragno-button,
.fragno-interstitial-lockup__actions-slot fragno-button {
  display: block;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

.fragno-interstitial-lockup__signin-slot .fragno-button,
.fragno-interstitial-lockup__secondary-slot .fragno-button,
.fragno-interstitial-lockup__wallet-slot .fragno-button,
.fragno-interstitial-lockup__actions-slot .fragno-button {
  width: 100%;
  max-width: none;
  height: var(--interstitial-lockup-button-height);
  min-height: var(--interstitial-lockup-button-height);
  box-sizing: border-box;
  justify-content: center;
}

.fragno-interstitial-lockup__signin-slot .fragno-button--green-gradient {
  background: var(--interstitial-lockup-legacy-brand-green);
  background-image: none;
  border: none;
  color: var(--interstitial-lockup-signin-text, #f7f7f7);
}

.fragno-interstitial-lockup__signin-slot .fragno-button--green-gradient:hover:not(:disabled) {
  background: var(--interstitial-lockup-legacy-brand-green);
  background-image: none;
  filter: brightness(0.95);
}

.fragno-interstitial-lockup__wallet-slot .fragno-button--tertiary {
  text-decoration: none;
}

.fragno-interstitial-lockup__tertiary-slot {
  align-items: center;
}

.fragno-interstitial-lockup__divider {
  display: flex;
  align-items: center;
  gap: var(--interstitial-lockup-divider-gap);
  width: 100%;
}

.fragno-interstitial-lockup__divider[hidden] {
  display: none;
}

.fragno-interstitial-lockup__divider-line {
  flex: 1 1 0;
  height: 1px;
  background: var(--interstitial-lockup-divider-color, #d6d6d6);
  min-width: 0;
}

.fragno-interstitial-lockup__divider-label {
  flex-shrink: 0;
  font-family: var(--font-family-body, 'Inter', sans-serif);
  font-size: var(--font-size-text-md, 1rem);
  font-weight: var(--font-weight-regular, 400);
  line-height: var(--line-height-text-md, 1.5rem);
  letter-spacing: var(--letter-spacing-text-md, -0.005rem);
  color: var(--colors-gray-800, #292929);
  text-align: center;
  white-space: nowrap;
}

.fragno-interstitial-lockup__coupon-section {
  display: flex;
  flex-direction: column;
  gap: var(--interstitial-lockup-coupon-label-gap);
  width: 100%;
}

.fragno-interstitial-lockup__coupon-section[hidden] {
  display: none;
}

.fragno-interstitial-lockup__coupon-label {
  margin: 0;
  font-family: var(--font-family-body, 'Inter', sans-serif);
  font-size: var(--font-size-text-md, 1rem);
  font-weight: var(--font-weight-medium, 500);
  line-height: var(--line-height-text-md, 1.5rem);
  letter-spacing: var(--letter-spacing-text-md, -0.005rem);
  color: var(--colors-gray-900, #141414);
}

.fragno-interstitial-lockup__coupon-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md, 0.5rem);
  width: 100%;
  min-height: var(--interstitial-lockup-coupon-field-height);
  padding: var(--interstitial-lockup-coupon-field-padding-y)
    var(--interstitial-lockup-coupon-field-padding-x);
  box-sizing: border-box;
  border: 1px solid var(--colors-gray-500, #737373);
  border-radius: var(--interstitial-lockup-coupon-field-radius);
  background: var(--colors-base-white, #ffffff);
}

.fragno-interstitial-lockup__coupon-field--copied {
  border-color: var(--color-status-success-text, #067647);
}

.fragno-interstitial-lockup__coupon-code-text {
  font-family: var(--font-family-body, 'Inter', sans-serif);
  font-size: var(--font-size-text-lg, 1.125rem);
  font-weight: var(--font-weight-regular, 400);
  line-height: var(--line-height-text-lg, 1.75rem);
  letter-spacing: var(--letter-spacing-text-lg, -0.005rem);
  color: #181d27;
}

.fragno-interstitial-lockup__coupon-btn {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  font-family: var(--font-family-body, 'Inter', sans-serif);
  font-size: var(--font-size-text-sm, 0.875rem);
  font-weight: var(--font-weight-medium, 500);
  line-height: var(--line-height-text-sm, 1.25rem);
  letter-spacing: var(--letter-spacing-text-sm, -0.004375rem);
  color: var(--colors-gray-900, #141414);
  text-decoration: none;
  cursor: pointer;
  flex-shrink: 0;
}

.fragno-interstitial-lockup__coupon-btn:focus-visible {
  outline: 2px solid var(--colors-blue-500, #2970ff);
  outline-offset: 2px;
}

.fragno-interstitial-lockup__coupon-btn[hidden] {
  display: none;
}

.fragno-interstitial-lockup__message-box {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--interstitial-lockup-message-outer-gap);
  width: 100%;
  padding: var(--interstitial-lockup-message-outer-padding);
  box-sizing: border-box;
  border-radius: var(--interstitial-lockup-message-outer-radius);
  background: var(--interstitial-lockup-message-outer-bg);
}

.fragno-interstitial-lockup__message-box[hidden] {
  display: none;
}

.fragno-interstitial-lockup__message-inner {
  display: flex;
  flex-direction: column;
  gap: var(--interstitial-lockup-message-inner-gap);
  width: 100%;
  text-align: center;
}

.fragno-interstitial-lockup__message-title {
  margin: 0;
  font-family: var(--font-family-body, 'Inter', sans-serif);
  font-size: var(--font-size-text-md, 1rem);
  font-weight: var(--font-weight-medium, 500);
  line-height: var(--line-height-text-md, 1.5rem);
  letter-spacing: var(--letter-spacing-text-md, -0.005rem);
  color: var(--colors-gray-900, #141414);
}

.fragno-interstitial-lockup__message-title[hidden] {
  display: none;
}

.fragno-interstitial-lockup__message-body {
  margin: 0;
  font-family: var(--font-family-body, 'Inter', sans-serif);
  font-size: var(--font-size-text-md, 1rem);
  font-weight: var(--font-weight-regular, 400);
  line-height: var(--line-height-text-md, 1.5rem);
  letter-spacing: var(--letter-spacing-text-md, -0.005rem);
  color: var(--interstitial-lockup-slate-text, #272727);
}

.fragno-interstitial-lockup__message-body[hidden] {
  display: none;
}

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

@container interstitial-lockup (max-width: 23.4375rem) {
  .fragno-interstitial-lockup__card {
    padding-left: var(--interstitial-lockup-card-padding-x-mobile);
    padding-right: var(--interstitial-lockup-card-padding-x-mobile);
  }

  .fragno-interstitial-lockup__headline {
    font-size: 1.5rem;
    line-height: 2rem;
    letter-spacing: -0.03125rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fragno-interstitial-lockup__card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgb(var(--surface-base-rgb, 255 255 255) / 0.92);
  }

  .fragno-interstitial-lockup__coupon-btn {
    transition: none;
  }
}

/* =============================================================================
   Chat bubble (Nova — Figma 71849:30393, app prototype)
   ============================================================================= */

fragno-chat-bubble {
  display: inline-flex;
  max-width: var(--chat-bubble-max-width, 33.75rem);
  box-sizing: border-box;
  overflow: visible;
}

.fragno-chat-bubble {
  position: relative;
  display: inline-block;
  max-width: 100%;
  outline: none;
}

.fragno-chat-bubble[data-type='agent'] {
  display: inline-block;
}

.fragno-chat-bubble:focus-visible {
  outline: 2px solid var(--colors-blue-500, #2970ff);
  outline-offset: 2px;
  border-radius: var(--radius-md, 0.5rem);
}

.fragno-chat-bubble__tooltip {
  position: absolute;
  bottom: calc(100% + var(--spacing-xs, 0.25rem));
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: max-content;
  max-width: min(16rem, 100vw);
  pointer-events: none;
  filter:
    drop-shadow(0 2px 1px rgba(10, 13, 18, 0.04))
    drop-shadow(0 4px 3px rgba(10, 13, 18, 0.03))
    drop-shadow(0 12px 8px rgba(10, 13, 18, 0.08));
}

.fragno-chat-bubble__tooltip[hidden] {
  display: none;
}

.fragno-chat-bubble__tooltip-surface {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--spacing-md, 0.5rem) var(--spacing-lg, 0.75rem);
  border-radius: var(--radius-xl, 1rem);
  background: var(--colors-gray-900, #141414);
  box-sizing: border-box;
}

.fragno-chat-bubble__tooltip-label {
  margin: 0;
  font-family: var(--font-family-body, 'Inter', sans-serif);
  font-size: var(--font-size-text-xs, 0.75rem);
  font-weight: var(--font-weight-semibold, 600);
  line-height: var(--line-height-text-xs, 1.125rem);
  letter-spacing: var(--letter-spacing-text-xs, 0);
  color: var(--colors-base-white, #ffffff);
  text-align: center;
  white-space: nowrap;
}

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

.fragno-chat-bubble__message {
  margin: 0;
  font-family: var(--font-family-body, 'Inter', sans-serif);
  font-size: var(--font-size-text-md, 1rem);
  font-weight: var(--font-weight-regular, 400);
  line-height: var(--line-height-text-md, 1.5rem);
  letter-spacing: var(--letter-spacing-text-md, -0.005rem);
  color: var(--chat-bubble-text, #0f0f0f);
  word-break: break-word;
}

.fragno-chat-bubble[data-type='user'] .fragno-chat-bubble__body {
  padding: var(--spacing-xl, 1rem) var(--spacing-3xl, 1.5rem);
  border-radius:
    var(--radius-5xl, 2rem)
    var(--radius-5xl, 2rem)
    var(--radius-xs, 0.25rem)
    var(--radius-5xl, 2rem);
  background: var(--colors-gray-200, #e5e5e5);
}

.fragno-chat-bubble[data-type='agent'] .fragno-chat-bubble__body {
  padding: var(--spacing-xl, 1rem) var(--spacing-3xl, 1.5rem) var(--spacing-xl, 1rem) 0;
}

/* Status variant: inline agent status (loading, thinking, checked, error) */
.fragno-chat-bubble[data-type='status'] {
  display: block;
}

.fragno-chat-bubble__status {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md, 0.5rem);
}

.fragno-chat-bubble__status[hidden] {
  display: none;
}

.fragno-chat-bubble__status--error {
  gap: var(--spacing-xl, 1rem);
}

.fragno-chat-bubble__status-line {
  display: flex;
  align-items: center;
  gap: var(--spacing-md, 0.5rem);
  padding-block: var(--spacing-xs, 0.25rem);
}

.fragno-chat-bubble__status-spinner {
  display: inline-flex;
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  animation: fragno-chat-bubble-spin 0.8s linear infinite;
}

.fragno-chat-bubble__status-spinner[hidden] {
  display: none;
}

.fragno-chat-bubble__status-spinner svg {
  width: 100%;
  height: 100%;
}

.fragno-chat-bubble__status-icon {
  display: inline-flex;
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--colors-gray-600, #525252);
}

.fragno-chat-bubble__status-icon[hidden] {
  display: none;
}

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

.fragno-chat-bubble__status-text {
  margin: 0;
  font-family: var(--font-family-body, 'Inter', sans-serif);
  font-size: var(--font-size-text-md, 1rem);
  font-weight: var(--font-weight-regular, 400);
  line-height: var(--line-height-text-md, 1.5rem);
  letter-spacing: var(--letter-spacing-text-md, -0.005rem);
  color: var(--colors-gray-600, #525252);
  word-break: break-word;
}

.fragno-chat-bubble__status-text[hidden] {
  display: none;
}

.fragno-chat-bubble__status--error .fragno-chat-bubble__status-text {
  color: var(--colors-error-600, #d92d20);
}

.fragno-chat-bubble__status--error .fragno-chat-bubble__status-icon {
  color: var(--colors-error-600, #d92d20);
}

.fragno-chat-bubble__status-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs, 0.25rem);
}

.fragno-chat-bubble__status-actions[hidden] {
  display: none;
}

/* Retry action (Nova secondary button, small) */
.fragno-chat-bubble__retry {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs, 0.25rem);
  padding: var(--spacing-md, 0.5rem) var(--spacing-lg, 0.75rem);
  border: 1px solid var(--colors-gray-300, #d6d6d6);
  border-radius: var(--radius-full, 9999px);
  background: var(--colors-base-white, #ffffff);
  color: var(--colors-gray-700, #424242);
  font-family: var(--font-family-body, 'Inter', sans-serif);
  font-size: var(--font-size-text-sm, 0.875rem);
  font-weight: var(--font-weight-medium, 500);
  line-height: var(--line-height-text-sm, 1.25rem);
  letter-spacing: var(--letter-spacing-text-sm, -0.005rem);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.fragno-chat-bubble__retry:hover {
  background: var(--colors-gray-50, #f7f7f7);
}

.fragno-chat-bubble__retry:focus-visible {
  outline: 2px solid var(--colors-blue-500, #2970ff);
  outline-offset: 2px;
}

.fragno-chat-bubble__retry-icon {
  display: inline-flex;
  width: 1rem;
  height: 1rem;
}

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

@media (prefers-reduced-motion: reduce) {
  .fragno-chat-bubble__tooltip {
    filter: none;
  }

  .fragno-chat-bubble__status-spinner {
    animation: none;
  }
}

/* =============================================================================
   Chat input bar (Nova — Figma 71849:30311, app prototype)
   ============================================================================= */

fragno-chat-input-bar {
  display: block;
  width: 100%;
  max-width: var(--chat-input-bar-max-width, 51.25rem);
  box-sizing: border-box;
}

.fragno-chat-input-bar {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgb(var(--surface-base-rgb, 255 255 255) / 0.92);
  border: 1px solid var(--colors-alpha-black-10, rgba(0, 0, 0, 0.1));
  box-shadow: 0 0.25rem 0.5625rem rgba(0, 0, 0, 0.06);
  padding: var(--spacing-lg, 0.75rem);
  box-sizing: border-box;
  transition: border-radius 0.15s ease;
}

.fragno-chat-input-bar[data-line='single'] {
  border-radius: var(--radius-full, 9999px);
}

.fragno-chat-input-bar[data-line='multi'] {
  border-radius: var(--radius-5xl, 2rem);
}

.fragno-chat-input-bar[data-platform='mobile'] {
  max-width: 24.375rem;
}

.fragno-chat-input-bar[data-platform='desktop'] {
  max-width: 45rem;
}

.fragno-chat-input-bar__layout {
  display: grid;
  gap: var(--spacing-lg, 0.75rem);
  align-items: center;
}

.fragno-chat-input-bar[data-line='single'] .fragno-chat-input-bar__layout {
  grid-template-columns: auto 1fr auto;
  grid-template-areas: 'attach field sendgroup';
  align-items: flex-end;
}

.fragno-chat-input-bar[data-line='multi'] .fragno-chat-input-bar__layout {
  grid-template-columns: 1fr auto;
  grid-template-areas:
    'field field'
    'attach sendgroup';
  align-items: end;
}

.fragno-chat-input-bar__attach {
  grid-area: attach;
}

.fragno-chat-input-bar__field-wrap {
  grid-area: field;
  min-width: 0;
  display: flex;
  align-items: center;
  min-height: 2.5rem;
  padding: var(--spacing-md, 0.5rem) var(--spacing-sm, 0.375rem);
  border-radius: 1.25rem;
  box-sizing: border-box;
}

.fragno-chat-input-bar__send-group {
  grid-area: sendgroup;
  display: flex;
  align-items: center;
  gap: var(--spacing-xs, 0.25rem);
  min-height: 2.5rem;
}

.fragno-chat-input-bar fragno-button {
  flex-shrink: 0;
}

.fragno-chat-input-bar fragno-button.fragno-chat-input-bar__attach .fragno-button,
.fragno-chat-input-bar fragno-button.fragno-chat-input-bar__voice .fragno-button {
  background: transparent;
  border: none;
  box-shadow: none;
}

.fragno-chat-input-bar fragno-button.fragno-chat-input-bar__attach .fragno-button:hover:not(:disabled),
.fragno-chat-input-bar fragno-button.fragno-chat-input-bar__voice .fragno-button:hover:not(:disabled) {
  background: var(--colors-gray-100, #f5f5f5);
}

.fragno-chat-input-bar fragno-button.fragno-chat-input-bar__attach .fragno-button:focus-visible,
.fragno-chat-input-bar fragno-button.fragno-chat-input-bar__voice .fragno-button:focus-visible {
  box-shadow: 0 0 0 2px var(--colors-blue-500, #2970ff);
}

.fragno-chat-input-bar fragno-button.fragno-chat-input-bar__send .fragno-button {
  color: var(--colors-gray-50, #f7f7f7);
}

.fragno-chat-input-bar__field {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  resize: none;
  overflow-x: hidden;
  overflow-y: hidden;
  outline: none;
  font-family: var(--font-family-body, 'Inter', sans-serif);
  font-size: var(--font-size-text-md, 1rem);
  font-weight: var(--font-weight-regular, 400);
  line-height: var(--line-height-text-md, 1.5rem);
  letter-spacing: var(--letter-spacing-text-md, -0.005rem);
  color: var(--colors-gray-900, #141414);
  box-sizing: border-box;
  field-sizing: content;
}

.fragno-chat-input-bar__field::placeholder {
  color: var(--colors-gray-700, #424242);
}

.fragno-chat-input-bar[data-line='single'] .fragno-chat-input-bar__field {
  white-space: nowrap;
  text-overflow: ellipsis;
}

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

/* Chat Action Card */
fragno-chat-action-card {
  display: block;
  width: 100%;
  max-width: 23.4375rem;
}

.fragno-chat-action-card {
  box-sizing: border-box;
}

.fragno-chat-action-card[data-disabled='true'] {
  opacity: 0.6;
  pointer-events: none;
}

.fragno-chat-action-card__card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl, 1rem);
  padding: var(--spacing-2xl, 1.25rem) 0;
  background: var(--color-bg-primary, #ffffff);
  border: 0.083125rem solid var(--colors-alpha-black-20, rgba(0, 0, 0, 0.2));
  border-radius: var(--radius-4xl, 1.5rem);
  overflow: visible;
}

.fragno-chat-action-card__top[hidden],
.fragno-chat-action-card__bottom[hidden],
.fragno-chat-action-card__logo[hidden],
.fragno-chat-action-card__heading[hidden],
.fragno-chat-action-card__eyebrow[hidden],
.fragno-chat-action-card__header[hidden],
.fragno-chat-action-card__menu-wrap[hidden],
.fragno-chat-action-card__text[hidden],
.fragno-chat-action-card__slot[hidden],
.fragno-chat-action-card__chips[hidden],
.fragno-chat-action-card__actions[hidden],
.fragno-chat-action-card__eyebrow--link[hidden],
.fragno-chat-action-card__header--link[hidden] {
  display: none !important;
}

.fragno-chat-action-card__actions fragno-button[hidden] {
  display: none !important;
}

.fragno-chat-action-card[data-density='actions-only'] .fragno-chat-action-card__card {
  gap: 0;
}

.fragno-chat-action-card[data-density='actions-only'] .fragno-chat-action-card__bottom {
  gap: 0;
}

.fragno-chat-action-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-md, 0.5rem);
  padding: 0 var(--spacing-xl, 1rem);
}

.fragno-chat-action-card__identity {
  display: flex;
  align-items: center;
  gap: var(--spacing-xl, 1rem);
  min-width: 0;
  flex: 1 1 auto;
}

.fragno-chat-action-card__logo {
  flex-shrink: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 3.75rem;
  height: 3.75rem;
  padding: var(--spacing-lg, 0.75rem);
  border-radius: var(--radius-full, 9999px);
  border: 0.058625rem solid var(--colors-alpha-black-10, rgba(0, 0, 0, 0.1));
  overflow: hidden;
  background: var(--color-bg-primary, #ffffff);
}

.fragno-chat-action-card__logo-img {
  display: block;
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.fragno-chat-action-card__heading {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xxs, 0.125rem);
  min-width: 0;
  flex: 1 1 auto;
}

.fragno-chat-action-card__eyebrow {
  margin: 0;
  font-family: var(--font-family-body, 'Inter', sans-serif);
  font-size: var(--font-size-text-sm, 0.875rem);
  font-weight: var(--font-weight-regular, 400);
  line-height: var(--line-height-text-sm, 1.25rem);
  letter-spacing: var(--letter-spacing-text-sm, -0.03125rem);
  color: var(--colors-gray-700, #424242);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fragno-chat-action-card__header {
  margin: 0;
  font-family: var(--font-family-body, 'Inter', sans-serif);
  font-size: var(--font-size-text-md, 1rem);
  font-weight: var(--font-weight-medium, 500);
  line-height: var(--line-height-text-md, 1.5rem);
  letter-spacing: var(--letter-spacing-text-md, -0.03125rem);
  color: var(--colors-gray-900, #141414);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fragno-chat-action-card__menu-wrap {
  flex-shrink: 0;
}

.fragno-chat-action-card__menu {
  flex-shrink: 0;
}

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

.fragno-chat-action-card__text {
  margin: 0;
  padding: 0 var(--spacing-xl, 1rem);
  font-family: var(--font-family-body, 'Inter', sans-serif);
  font-size: var(--font-size-text-md, 1rem);
  font-weight: var(--font-weight-regular, 400);
  line-height: var(--line-height-text-md, 1.5rem);
  letter-spacing: var(--letter-spacing-text-md, -0.03125rem);
  color: var(--colors-gray-700, #424242);
}

.fragno-chat-action-card__slot {
  padding: 0 var(--spacing-xl, 1rem);
}

.fragno-chat-action-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md, 0.5rem);
  padding: 0 var(--spacing-xl, 1rem);
}

.fragno-chat-action-card__chips fragno-button {
  display: inline-block;
  flex: 0 1 auto;
  max-width: 100%;
}

.fragno-chat-action-card__chips fragno-button .fragno-button {
  width: auto;
  max-width: 100%;
}

.fragno-chat-action-card__actions {
  display: flex;
  gap: var(--spacing-md, 0.5rem);
  padding: 0 var(--spacing-xl, 1rem);
}

.fragno-chat-action-card__actions fragno-button {
  flex: 1 1 0;
  min-width: 0;
  display: block;
  box-sizing: border-box;
}

.fragno-chat-action-card__actions fragno-button .fragno-button {
  width: 100%;
  justify-content: center;
}

/* Deeper link variant */
.fragno-chat-action-card__deeper-link {
  display: flex;
  align-items: center;
  gap: var(--spacing-xl, 1rem);
  padding: var(--spacing-2xl, 1.25rem) var(--spacing-xl, 1rem);
  background: var(--color-bg-primary, #ffffff);
  border: 0.083125rem solid var(--colors-alpha-black-20, rgba(0, 0, 0, 0.2));
  border-radius: var(--radius-4xl, 1.5rem);
  text-decoration: none;
  color: inherit;
  box-sizing: border-box;
}

.fragno-chat-action-card__deeper-link:focus-visible {
  outline: 2px solid var(--colors-blue-500, #2970ff);
  outline-offset: 2px;
}

.fragno-chat-action-card__deeper-link[aria-disabled='true'] {
  cursor: not-allowed;
  pointer-events: none;
}

.fragno-chat-action-card__link-icon-wrap {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-lg, 0.75rem);
  background: var(--colors-gray-100, #f5f5f5);
  border-radius: var(--radius-2xl, 1rem);
  color: var(--colors-gray-700, #424242);
}

.fragno-chat-action-card__link-icon {
  display: flex;
  width: 1.5rem;
  height: 1.5rem;
}

.fragno-chat-action-card__link-icon svg {
  width: 100%;
  height: 100%;
}

.fragno-chat-action-card__link-text {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xxs, 0.125rem);
  min-width: 0;
  flex: 1 1 auto;
}

.fragno-chat-action-card__eyebrow--link,
.fragno-chat-action-card__header--link {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fragno-chat-action-card__eyebrow--link {
  font-family: var(--font-family-body, 'Inter', sans-serif);
  font-size: var(--font-size-text-sm, 0.875rem);
  font-weight: var(--font-weight-regular, 400);
  line-height: var(--line-height-text-sm, 1.25rem);
  letter-spacing: var(--letter-spacing-text-sm, -0.03125rem);
  color: var(--colors-gray-700, #424242);
}

.fragno-chat-action-card__header--link {
  font-family: var(--font-family-body, 'Inter', sans-serif);
  font-size: var(--font-size-text-md, 1rem);
  font-weight: var(--font-weight-medium, 500);
  line-height: var(--line-height-text-md, 1.5rem);
  letter-spacing: var(--letter-spacing-text-md, -0.03125rem);
  color: var(--colors-gray-900, #141414);
}

.fragno-chat-action-card__link-chevron {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  color: var(--colors-gray-700, #424242);
}

/* =============================================================================
   Chat action group (Nova — Figma 71849:30406, app prototype)
   ============================================================================= */

fragno-chat-action-group {
  display: inline-block;
  max-width: 100%;
  box-sizing: border-box;
}

.fragno-chat-action-group {
  position: relative;
  box-sizing: border-box;
}

.fragno-chat-action-group[data-disabled='true'] {
  opacity: 0.5;
  pointer-events: none;
}

.fragno-chat-action-group__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-xs, 0.25rem);
}

.fragno-chat-action-group__item {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}

.fragno-chat-action-group__item[hidden] {
  display: none;
}

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

.fragno-chat-action-group fragno-button {
  flex-shrink: 0;
}

.fragno-chat-action-group fragno-button .fragno-button {
  text-decoration: none;
  border: none;
  box-shadow: none;
  background: transparent;
  border-radius: var(--radius-full, 9999px);
  color: var(--colors-gray-700, #424242);
}

.fragno-chat-action-group fragno-button .fragno-button:hover:not(:disabled) {
  background: var(--colors-gray-100, #f5f5f5);
  color: var(--colors-gray-900, #141414);
}

.fragno-chat-action-group fragno-button .fragno-button:focus-visible {
  background: var(--colors-gray-100, #f5f5f5);
  box-shadow: 0 0 0 2px var(--colors-blue-500, #2970ff);
  text-decoration: none;
  border: none;
}

.fragno-chat-action-group__item[data-selected='true'] fragno-button .fragno-button {
  color: var(--colors-gray-900, #141414);
}

.fragno-chat-action-group__tooltip {
  position: absolute;
  left: 50%;
  top: calc(100% + var(--spacing-lg, 0.75rem));
  transform: translateX(-50%);
  z-index: var(--fragno-tooltip-z-index, 1070);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  padding: var(--spacing-md, 0.5rem) var(--spacing-lg, 0.75rem);
  border-radius: var(--radius-xl, 0.75rem);
  background: var(--colors-gray-900, #141414);
  color: var(--colors-base-white, #ffffff);
  font-family: var(--font-family-body, 'Inter', sans-serif);
  font-size: var(--font-size-text-xs, 0.75rem);
  font-weight: var(--font-weight-semibold, 600);
  line-height: var(--line-height-text-xs, 1.125rem);
  white-space: nowrap;
  box-shadow: var(
    --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)
  );
  transition:
    opacity 0.12s ease,
    visibility 0.12s ease;
}

.fragno-chat-action-group__tooltip[data-open='true'] {
  visibility: visible;
  opacity: 1;
}

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

/* ============================================
   GROUP FILTERS (fragno-group-filters + fragno-group-filters-group)
   Nova Web — Figma QQ7oqsQdNUUsW88EqJHWAB node 71924:80577
   ============================================ */

.fragno-group-filters {
  --group-filters-content-gap: 5rem;
  --group-filters-group-gap: var(--spacing-lg, 0.75rem);
  --group-filters-row-gap: var(--spacing-lg, 0.75rem);
  --group-filters-padding-y: var(--spacing-lg, 0.75rem);
  --group-filters-padding-x: 0;
  --group-filters-surface-bg: transparent;
  --group-filters-surface-border: transparent;
  --group-filters-surface-radius: 0;
  --group-filters-surface-shadow: none;
  --group-filters-surface-backdrop: none;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--group-filters-content-gap);
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding: var(--group-filters-padding-y) var(--group-filters-padding-x);
  background: var(--group-filters-surface-bg);
  border: 1px solid var(--group-filters-surface-border);
  border-radius: var(--group-filters-surface-radius);
  box-shadow: var(--group-filters-surface-shadow);
  backdrop-filter: var(--group-filters-surface-backdrop);
  -webkit-backdrop-filter: var(--group-filters-surface-backdrop);
}

.fragno-group-filters > fragno-group-filters-group {
  flex: 0 1 auto;
  min-width: 0;
}

.fragno-group-filters__sentinel {
  position: relative;
  width: 100%;
  height: 1px;
  margin: 0;
  padding: 0;
  pointer-events: none;
  visibility: hidden;
}

.fragno-group-filters__group {
  min-width: 0;
}

.fragno-group-filters__group-label {
  grid-column: 1 / -1;
  grid-row: 1;
  margin: 0;
  font-family: var(--font-family-body, Inter, sans-serif);
  font-size: var(--font-size-text-md, 1rem);
  font-weight: var(--font-weight-medium, 500);
  line-height: var(--line-height-text-md, 1.5rem);
  letter-spacing: var(--letter-spacing-text-md, -0.005rem);
  color: var(--colors-gray-800, #292929);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fragno-group-filters__group-label[hidden] {
  display: none;
}

.fragno-group-filters__group > fragno-filters,
.fragno-group-filters__group > fragno-segment-control {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.fragno-group-filters__group > fragno-filters::-webkit-scrollbar,
.fragno-group-filters__group > fragno-segment-control::-webkit-scrollbar {
  display: none;
}

.fragno-group-filters__group > fragno-segment-control {
  width: auto;
  align-self: center;
}

.fragno-group-filters__group > .fragno-group-filters__more-filters {
  grid-column: 2;
  grid-row: 2;
  align-self: center;
}

.fragno-group-filters__more-filters {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 1px solid var(--colors-gray-400, #a3a3a3);
  border-radius: var(--radius-full, 9999px);
  background: transparent;
  color: var(--colors-gray-900, #141414);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.fragno-group-filters__more-filters[hidden] {
  display: none;
}

.fragno-group-filters__more-filters:focus {
  outline: none;
}

.fragno-group-filters__more-filters:focus-visible {
  outline: 2px solid var(--colors-gray-900, #141414);
  outline-offset: 2px;
}

.fragno-group-filters__more-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
}

.fragno-group-filters__more-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Size sm — chips more-filters: icon-only pill */
.fragno-group-filters--sm.fragno-group-filters--chips .fragno-group-filters__more-filters {
  width: 2.25rem;
  height: 2.25rem;
}

/* Size md — chips more-filters: larger icon-only pill */
.fragno-group-filters--md.fragno-group-filters--chips .fragno-group-filters__more-filters {
  width: 2.75rem;
  height: 2.75rem;
  padding: var(--spacing-lg, 0.75rem);
}

/* Segment type — filled white circle (52px) */
.fragno-group-filters--segment .fragno-group-filters__more-filters {
  width: 3.25rem;
  height: 3.25rem;
  padding: 0.875rem;
  border: none;
  background: var(--color-bg-primary, #ffffff);
}

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

/* White background variant — frosted container */
.fragno-group-filters--white-bg {
  --group-filters-surface-bg: rgba(255, 255, 255, 0.6);
  --group-filters-surface-border: var(--color-bg-primary, #ffffff);
  --group-filters-surface-radius: var(--radius-4xl, 1.5rem);
  --group-filters-surface-shadow:
    0 4px 18px 0 rgba(0, 0, 0, 0.06),
    0 2px 4px 0 rgba(10, 13, 18, 0.06);
  --group-filters-surface-backdrop: blur(20px);
  --group-filters-padding-x: var(--spacing-lg, 0.75rem);
}

.fragno-group-filters--white-bg.fragno-group-filters--segment {
  --group-filters-surface-radius: var(--radius-5xl, 2rem);
}

/* Sticky + scrolled — labels hidden, sm chips, frosted bar */
.fragno-group-filters--sticky {
  position: sticky;
  top: 0;
  z-index: 20;
}

.fragno-group-filters--sticky.fragno-group-filters--scrolled {
  align-items: center;
  --group-filters-surface-bg: rgba(255, 255, 255, 0.6);
  --group-filters-surface-border: var(--color-bg-primary, #ffffff);
  --group-filters-surface-radius: var(--radius-4xl, 1.5rem);
  --group-filters-surface-shadow:
    0 4px 18px 0 rgba(0, 0, 0, 0.06),
    0 2px 4px 0 rgba(10, 13, 18, 0.06);
  --group-filters-surface-backdrop: blur(20px);
  --group-filters-padding-x: var(--spacing-lg, 0.75rem);
}

.fragno-group-filters--sticky.fragno-group-filters--scrolled.fragno-group-filters--segment {
  --group-filters-surface-radius: var(--radius-5xl, 2rem);
}

.fragno-group-filters--sticky.fragno-group-filters--scrolled .fragno-group-filters__group-label {
  display: none;
}

.fragno-group-filters--sticky.fragno-group-filters--scrolled.fragno-group-filters--chips {
  --group-filters-surface-bg: rgba(255, 255, 255, 0.8);
}

@media (max-width: 767px) {
  .fragno-group-filters {
    --group-filters-content-gap: var(--spacing-3xl, 1.5rem);
    --group-filters-padding-x: var(--spacing-2xl, 1.25rem);
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-xl, 1rem);
  }

  .fragno-group-filters > fragno-group-filters-group {
    flex: 1 1 auto;
    width: 100%;
  }
}

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

/* ============================================
   SIDE SHEET
   Right-anchored overlay dialog. Slides in from
   the right (desktop) / near full-width (mobile).
   Sizes: small (420px), medium (620px), large (720px).
   ============================================ */

fragno-side-sheet {
  position: fixed;
  inset: 0;
  z-index: 10060;
  pointer-events: none;
  visibility: hidden;
  /* Delay hiding until the close transition finishes. */
  transition: visibility 0s linear 0.3s;
}

fragno-side-sheet.fragno-side-sheet--open {
  pointer-events: auto;
  visibility: visible;
  transition: visibility 0s linear 0s;
}

.fragno-side-sheet__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.fragno-side-sheet--open .fragno-side-sheet__overlay {
  opacity: 1;
}

.fragno-side-sheet__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 620px;
  max-width: calc(100vw - var(--container-padding-desktop, 2rem));
  background-color: var(--colors-gray-100, #f5f5f5);
  color: var(--colors-gray-900, #141414);
  /* Figma: only the left edge is rounded; right edge is flush and square. */
  border-top-left-radius: var(--radius-5xl, 2rem);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: var(--radius-5xl, 2rem);
  /* Cast shadow leftward so the square bottom-right corner stays sharp. */
  box-shadow:
    -2px 0 2px -1px rgba(10, 13, 18, 0.04),
    -12px 0 16px -4px rgba(10, 13, 18, 0.08);
  overflow: hidden;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  outline: none;
}

.fragno-side-sheet--open .fragno-side-sheet__panel {
  transform: translateX(0);
}

/* Sizes (desktop) */
.fragno-side-sheet--small .fragno-side-sheet__panel {
  width: 420px;
}

.fragno-side-sheet--medium .fragno-side-sheet__panel {
  width: 620px;
}

.fragno-side-sheet--large .fragno-side-sheet__panel {
  width: 720px;
}

/* Top chrome — icon + close (fixed, does not scroll) */
.fragno-side-sheet__top {
  position: relative;
  flex: 0 0 auto;
  padding: var(--spacing-3xl, 1.5rem) var(--spacing-3xl, 1.5rem) 0;
  min-height: 2.75rem;
}

/* Scrollable region */
.fragno-side-sheet__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3xl, 1.5rem);
  padding: var(--spacing-xl, 1rem) var(--spacing-3xl, 1.5rem)
    var(--spacing-3xl, 1.5rem);
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.6) transparent;
}

.fragno-side-sheet__scroll::-webkit-scrollbar {
  width: 6px;
}

.fragno-side-sheet__scroll::-webkit-scrollbar-track {
  background: transparent;
}

.fragno-side-sheet__scroll::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: var(--radius-full, 9999px);
}

.fragno-side-sheet__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: var(--spacing-lg, 0.75rem);
  background-color: var(--colors-base-white, #ffffff);
  border-radius: var(--radius-2xl, 1rem);
  color: var(--colors-gray-900, #141414);
}

.fragno-side-sheet__icon svg,
.fragno-side-sheet__icon img {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
}

.fragno-side-sheet__close {
  position: absolute;
  top: var(--spacing-3xl, 1.5rem);
  right: var(--spacing-3xl, 1.5rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--colors-gray-500, #737373);
  border-radius: var(--radius-md, 0.5rem);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.fragno-side-sheet__close:hover {
  background-color: var(--colors-gray-200, #e5e5e5);
  color: var(--colors-gray-900, #141414);
}

.fragno-side-sheet__close:focus-visible {
  outline: 2px solid var(--colors-gray-900, #141414);
  outline-offset: 2px;
}

.fragno-side-sheet__close svg {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
}

.fragno-side-sheet__text {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm, 0.375rem);
  width: 100%;
}

.fragno-side-sheet__heading {
  margin: 0;
  font-family: var(--font-family-display, 'Inter', sans-serif);
  font-size: var(--font-size-display-xs, 1.5rem);
  font-weight: var(--font-weight-medium, 500);
  line-height: var(--line-height-display-2xs, 2rem);
  letter-spacing: -0.03rem;
  color: var(--colors-gray-900, #141414);
}

.fragno-side-sheet__description {
  margin: 0;
  font-family: var(--font-family-body, 'Inter', sans-serif);
  font-size: var(--font-size-text-md, 1rem);
  font-weight: var(--font-weight-regular, 400);
  line-height: var(--line-height-text-md, 1.5rem);
  letter-spacing: var(--letter-spacing-text-md, -0.005rem);
  color: var(--colors-gray-700, #424242);
  /* Clamp to three lines with an ellipsis. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fragno-side-sheet__heading[hidden],
.fragno-side-sheet__description[hidden] {
  display: none;
}

/* Alert */
.fragno-side-sheet__alert {
  display: block;
  width: 100%;
}

/* Content slot */
.fragno-side-sheet__content {
  width: 100%;
  color: var(--colors-gray-700, #424242);
  font-family: var(--font-family-body, 'Inter', sans-serif);
  font-size: var(--font-size-text-md, 1rem);
  line-height: var(--line-height-text-md, 1.5rem);
}

/* Actions footer (pinned to the bottom of the panel) */
.fragno-side-sheet__actions {
  position: relative;
  flex: 0 0 auto;
  padding: var(--spacing-xl, 1rem) var(--spacing-3xl, 1.5rem)
    var(--spacing-3xl, 1.5rem);
  background-color: var(--colors-gray-100, #f5f5f5);
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

/* Gradient fade so scrolling content dissolves above the actions. */
.fragno-side-sheet__actions::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: var(--spacing-6xl, 3rem);
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(245, 245, 245, 0) 0%,
    rgba(245, 245, 245, 0.85) 60%,
    var(--colors-gray-100, #f5f5f5) 100%
  );
}

.fragno-side-sheet__actions-inner {
  display: flex;
  gap: var(--spacing-lg, 0.75rem);
  width: 100%;
}

.fragno-side-sheet__action {
  flex: 1 1 0;
  min-width: 0;
}

.fragno-side-sheet__action .fragno-button {
  width: 100%;
}

/* Design-accurate action colors: primary = solid gray-900, secondary = outline gray-400. */
.fragno-side-sheet__actions .fragno-button.fragno-button--primary {
  background-color: var(--colors-gray-900, #141414);
  color: var(--colors-gray-50, #f7f7f7);
  border: none;
}

.fragno-side-sheet__actions .fragno-button.fragno-button--secondary {
  background-color: transparent;
  color: var(--colors-gray-900, #141414);
  border: 1px solid var(--colors-gray-400, #a3a3a3);
}

/* Mobile / narrow viewports: near full-width, anchored right with a small inset. */
@media (max-width: 63.99rem) {
  .fragno-side-sheet--small .fragno-side-sheet__panel,
  .fragno-side-sheet--medium .fragno-side-sheet__panel,
  .fragno-side-sheet--large .fragno-side-sheet__panel {
    width: calc(100vw - var(--spacing-xl, 1rem));
    max-width: 25rem;
  }

  .fragno-side-sheet__top {
    padding: var(--spacing-3xl, 1.5rem) var(--spacing-xl, 1rem) 0;
  }

  .fragno-side-sheet__close {
    top: var(--spacing-3xl, 1.5rem);
    right: var(--spacing-xl, 1rem);
  }

  .fragno-side-sheet__scroll {
    padding: var(--spacing-xl, 1rem) var(--spacing-xl, 1rem)
      var(--spacing-3xl, 1.5rem);
  }

  .fragno-side-sheet__actions {
    padding: var(--spacing-xl, 1rem);
  }

  .fragno-side-sheet__panel {
    box-shadow: -4px 0 18px 4px rgba(0, 0, 0, 0.06);
  }
}

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

  .fragno-side-sheet__overlay,
  .fragno-side-sheet__panel {
    transition: none;
  }
}

/* ============================================================
   ACCOUNT MENU
   Base account button (avatar + name + email + optional role
   badge) that opens a floating menu with sections, collapsible
   items, and a bottom CTA. (Nova Web — Account, Figma 72609:47861)
   ============================================================ */
fragno-account-menu {
  display: inline-flex;
  vertical-align: top;
}

.fragno-account-menu {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 20rem; /* 320px */
  max-width: 100%;
  min-height: 3.5rem; /* reserve the base button height so content below doesn't shift */
  text-align: left;
}

/* Self-contained box model: don't rely on a host page's global reset, so
   width:100% + padding rows (items, sub-options) never overflow the surface. */
.fragno-account-menu,
.fragno-account-menu * {
  box-sizing: border-box;
}

.fragno-account-menu--sm {
  width: 13.75rem; /* 220px */
}

/* The surface is the base button when closed and grows into the menu card
   when open — one continuous element rather than a detached panel. */
.fragno-account-menu__surface {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  border: 1px solid transparent;
  border-radius: var(--radius-lg, 0.75rem);
  transition: box-shadow 0.15s ease, background-color 0.15s ease,
    border-color 0.15s ease;
}

.fragno-account-menu--open .fragno-account-menu__surface {
  position: absolute;
  top: -8px; /* offset the card padding so the account header stays put */
  left: -8px;
  z-index: 50;
  width: calc(100% + 16px);
  max-width: calc(100vw - 2rem);
  padding: var(--spacing-md, 0.5rem);
  border-radius: var(--radius-4xl, 1.5rem);
  border-color: var(--colors-gray-300, #d6d6d6);
  /* Deliberately opaque, not the `alpha-white-80` + blur the Figma node also carries:
     DEVP-1682 (#130) made this surface solid, and DEVP-1690 (#131) did the same for the
     anchored flyout after Product/Design/QA review. Reopen that with Design before
     changing it back — the token is also light-mode only, so a translucent surface needs
     a dark counterpart first. */
  background: var(--color-bg-primary, #ffffff);
  box-shadow: 0 2px 4px -2px rgba(10, 13, 18, 0.06),
    0 4px 18px 8px rgba(0, 0, 0, 0.06);
}

.fragno-account-menu--open.fragno-account-menu--align-end
  .fragno-account-menu__surface {
  left: auto;
  right: -8px;
}

/* ---- Account row (shared by trigger + panel header) ---- */
.fragno-account-menu__account {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg, 0.75rem);
  width: 100%;
  min-height: 2.5rem; /* 40px */
}

/* Avatar is the fragno-avatar component; it owns its frame, sizing, initials,
   default icon, and corner (company-logo) slot. */
.fragno-account-menu__avatar {
  display: inline-flex;
  flex-shrink: 0;
}

.fragno-account-menu__identity {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  flex: 1 1 auto;
  text-align: left;
}

.fragno-account-menu__name {
  font-family: var(--font-family-body);
  font-weight: 500;
  font-size: var(--font-size-text-md, 1rem);
  line-height: var(--line-height-text-md, 1.5rem);
  letter-spacing: -0.5px;
  color: var(--colors-gray-900, #141414);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fragno-account-menu__email {
  font-family: var(--font-family-body);
  font-weight: 400;
  font-size: var(--font-size-text-sm, 0.875rem);
  line-height: var(--line-height-text-sm, 1.25rem);
  letter-spacing: -0.5px;
  color: var(--colors-gray-600, #525252);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Identity-truncation tooltip. Surfaces the full name/email when a line is ellipsized — the same
   black treatment as the sidebar rail tooltip (`--colors-gray-900` on white text). It is a sibling
   of the trigger button inside `.fragno-account-menu__surface` (position:relative), which is its
   positioning containing block; `top: 100%` places it just below the account block. Content +
   `data-show` are driven by the component (hover = the pointed-at line; keyboard focus = every
   truncated line, one per row via the preserved newline; shown only while the menu is closed).
   Visual aid only; the full identity is in the trigger's accessible name. */
.fragno-account-menu__identity-tooltip {
  position: absolute;
  top: calc(100% + var(--spacing-xs, 0.25rem));
  /* Logical start so it flips to the correct side under dir="rtl". */
  inset-inline-start: 0;
  z-index: 20;
  width: max-content;
  max-width: 100%;
  /* Honor the newline between name/email in the keyboard-focus case, and wrap long single lines. */
  white-space: pre-line;
  overflow-wrap: anywhere;
  padding: var(--spacing-xs, 0.25rem) var(--spacing-md, 0.5rem);
  border-radius: var(--radius-md, 0.5rem);
  background-color: var(--colors-gray-900, #141414);
  color: var(--colors-primary-text, #ffffff);
  font-family: var(--font-family-body);
  font-size: var(--font-size-text-xs, 0.75rem);
  line-height: var(--line-height-text-xs, 1rem);
  font-weight: var(--font-weight-medium, 500);
  letter-spacing: -0.005em; /* Figma -0.5% */
  text-align: left;
  opacity: 0;
  visibility: hidden;
  /* Inert unless shown. `pointer-events: auto` is applied only in the shown state (below) so the
     tooltip can't intercept clicks during the fade-out window before `visibility: hidden` settles. */
  pointer-events: none;
  transform: translateY(-2px);
  transition:
    opacity 0.12s ease,
    transform 0.12s ease,
    visibility 0.12s ease;
}

.fragno-account-menu__identity-tooltip[data-show="true"] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  /* WCAG 2.2 SC 1.4.13 (Hoverable): while shown, the pointer can move onto the tooltip without it
     vanishing, so it must accept pointer events. */
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .fragno-account-menu__identity-tooltip {
    transition: none;
    transform: none;
  }
}

/* Forced Colors (Windows High Contrast): the system overrides the gray-900 background / white text,
   which can leave the floating tooltip undelimited against the page. A system-color border keeps it
   a distinct box. */
@media (forced-colors: active) {
  .fragno-account-menu__identity-tooltip {
    border: 1px solid CanvasText;
  }
}

.fragno-account-menu__badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-xxs, 0.125rem) var(--spacing-md, 0.5rem);
  border-radius: var(--radius-md, 0.5rem);
  background: var(--colors-gray-100, #f5f5f5);
  border: 1px solid var(--colors-gray-400, #a3a3a3);
  font-family: var(--font-family-body);
  font-weight: 500;
  font-size: var(--font-size-text-xs, 0.75rem);
  line-height: var(--line-height-text-xs, 1.125rem);
  letter-spacing: -0.5px;
  color: var(--colors-gray-700, #424242);
  white-space: nowrap;
}

/* ---- Trigger ---- */
.fragno-account-menu__trigger {
  display: flex;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: var(--spacing-md, 0.5rem);
  border: 0;
  border-radius: var(--radius-lg, 0.75rem);
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: background-color 0.15s ease;
}

.fragno-account-menu__trigger:hover {
  background: var(--colors-gray-50, #f7f7f7);
}

.fragno-account-menu__trigger:focus-visible {
  outline: 2px solid var(--colors-gray-700, #424242);
  outline-offset: 2px;
}

.fragno-account-menu__trigger--disabled,
.fragno-account-menu__trigger:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.fragno-account-menu__trigger--disabled:hover,
.fragno-account-menu__trigger:disabled:hover {
  background: transparent;
}

/* When open, the trigger becomes the menu header — no hover fill. */
.fragno-account-menu--open .fragno-account-menu__trigger:hover {
  background: transparent;
}

/* ---- Collapsible menu region (grows out of the button) ---- */
/* The menu opens/closes with the same grid-row-track animation the sub-options use:
   the outer element is a grid whose single row track animates 0fr<->1fr (with a fade),
   so it grows out of the trigger and shrinks back with no fixed max-height cap. The
   inner content wrapper carries the column layout and is clipped only while animating. */
.fragno-account-menu__menu {
  display: none;
  grid-template-rows: 1fr; /* open steady state */
}

/* Visible while open, and kept visible during the close animation. */
.fragno-account-menu--open .fragno-account-menu__menu,
.fragno-account-menu__menu--closing {
  display: grid;
}

.fragno-account-menu__menu-content {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Clip only while animating so the row track can collapse the content smoothly. */
.fragno-account-menu__menu--opening .fragno-account-menu__menu-content,
.fragno-account-menu__menu--closing .fragno-account-menu__menu-content {
  overflow: hidden;
}

.fragno-account-menu__menu--opening {
  animation: fragno-account-menu-expand 0.3s ease-in-out;
}

.fragno-account-menu__menu--closing {
  animation: fragno-account-menu-collapse 0.3s ease-in-out;
}

/* ---- Sections ---- */
.fragno-account-menu__section {
  display: flex;
  flex-direction: column;
}

.fragno-account-menu__section-header {
  display: flex;
  align-items: center;
  height: 2rem;
  padding: var(--spacing-xs, 0.25rem) var(--spacing-xl, 1rem)
    var(--spacing-xs, 0.25rem) var(--spacing-md, 0.5rem);
  border-radius: var(--radius-md, 0.5rem);
  font-family: var(--font-family-body);
  font-weight: 550;
  font-size: var(--font-size-text-xs, 0.75rem);
  line-height: var(--line-height-text-xs, 1.125rem);
  letter-spacing: -0.5px;
  color: var(--colors-gray-600, #525252);
}

.fragno-account-menu__list {
  display: flex;
  flex-direction: column;
}

.fragno-account-menu__item-group {
  display: flex;
  flex-direction: column;
}

/* ---- Item (primary row) ---- */
.fragno-account-menu__item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm, 0.375rem);
  width: 100%;
  min-height: 2.5rem;
  margin: 0;
  padding: var(--spacing-md, 0.5rem);
  border: 0;
  border-radius: var(--radius-lg, 0.75rem);
  background: transparent;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  font-family: var(--font-family-body);
  font-weight: 500;
  font-size: var(--font-size-text-sm, 0.875rem);
  line-height: var(--line-height-text-sm, 1.25rem);
  letter-spacing: -0.5px;
  color: var(--colors-gray-900, #141414);
  transition: background-color 0.15s ease;
}

.fragno-account-menu__item:hover {
  background: var(--colors-gray-50, #f7f7f7);
}

.fragno-account-menu__item:focus-visible {
  outline: 2px solid var(--colors-gray-700, #424242);
  outline-offset: -2px;
}

.fragno-account-menu__item[aria-disabled='true'],
.fragno-account-menu__item:disabled {
  cursor: not-allowed;
  color: var(--colors-gray-400, #a3a3a3);
}

.fragno-account-menu__item[aria-disabled='true']:hover,
.fragno-account-menu__item:disabled:hover {
  background: transparent;
}

.fragno-account-menu__item-icon {
  display: flex;
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--colors-gray-700, #424242);
}

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

.fragno-account-menu__item-label {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fragno-account-menu__item-chevron {
  display: flex;
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--colors-gray-700, #424242);
  transition: transform 0.2s ease;
}

.fragno-account-menu__item--expanded .fragno-account-menu__item-chevron {
  transform: rotate(180deg);
}

/* When the expand animation is off on the host, the chevron snaps without transition
   (the expand/collapse keyframe is skipped in JS), matching the sidebar. */
fragno-account-menu[animate-expansion='false'] .fragno-account-menu__item-chevron {
  transition: none;
}

/* ---- Sub-options (2nd level) ----
   Collapsible group animated with the exact same grid-row-track expand/collapse the
   sidebar uses: the outer group is a grid whose single row track animates 0fr<->1fr
   (while fading), so any number of options grow/shrink in flow with no fixed max-height
   cap to clip long lists. The inner list is clipped (overflow:hidden) only while
   animating so the track can collapse it smoothly. */
.fragno-account-menu__subgroup {
  display: grid;
  grid-template-rows: 1fr; /* open steady state */
}

.fragno-account-menu__subgroup[hidden] {
  display: none;
}

.fragno-account-menu__subgroup-list {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}

.fragno-account-menu__subgroup--opening .fragno-account-menu__subgroup-list,
.fragno-account-menu__subgroup--closing .fragno-account-menu__subgroup-list {
  overflow: hidden;
}

.fragno-account-menu__subgroup--opening {
  animation: fragno-account-menu-expand 0.3s ease-in-out;
}

.fragno-account-menu__subgroup--closing {
  animation: fragno-account-menu-collapse 0.3s ease-in-out;
}

/* Expand: grow the grid row track from collapsed (0fr) to natural height (1fr) while
   fading in. Applied via .fragno-account-menu__subgroup--opening. */
@keyframes fragno-account-menu-expand {
  from {
    grid-template-rows: 0fr;
    opacity: 0;
  }
  to {
    grid-template-rows: 1fr;
    opacity: 1;
  }
}

/* Collapse: the reverse (1fr -> 0fr, fade out). The JS sets `hidden` only after this
   finishes. Applied via .fragno-account-menu__subgroup--closing. */
@keyframes fragno-account-menu-collapse {
  from {
    grid-template-rows: 1fr;
    opacity: 1;
  }
  to {
    grid-template-rows: 0fr;
    opacity: 0;
  }
}

.fragno-account-menu__suboption {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm, 0.375rem);
  width: 100%;
  min-height: 2.5rem;
  margin: 0;
  padding: var(--spacing-md, 0.5rem) var(--spacing-md, 0.5rem)
    var(--spacing-md, 0.5rem) var(--spacing-2xl, 1.25rem);
  border: 0;
  border-radius: var(--radius-lg, 0.75rem);
  background: transparent;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  font-family: var(--font-family-body);
  font-weight: 400;
  font-size: var(--font-size-text-sm, 0.875rem);
  line-height: var(--line-height-text-sm, 1.25rem);
  letter-spacing: -0.5px;
  color: var(--colors-gray-900, #141414);
  transition: background-color 0.15s ease;
}

.fragno-account-menu__suboption:hover {
  background: var(--colors-gray-50, #f7f7f7);
}

.fragno-account-menu__suboption:focus-visible {
  outline: 2px solid var(--colors-gray-700, #424242);
  outline-offset: -2px;
}

.fragno-account-menu__suboption--selected {
  font-weight: 500;
}

.fragno-account-menu__suboption[aria-disabled='true'],
.fragno-account-menu__suboption:disabled {
  cursor: not-allowed;
  color: var(--colors-gray-400, #a3a3a3);
}

.fragno-account-menu__suboption-label {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fragno-account-menu__suboption-check {
  display: none;
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--colors-gray-900, #141414);
}

.fragno-account-menu__suboption--selected .fragno-account-menu__suboption-check {
  display: flex;
}

/* ---- Divider ---- */
.fragno-account-menu__divider {
  height: 1px;
  margin: var(--spacing-sm, 0.375rem) var(--spacing-md, 0.5rem);
  background: var(--colors-alpha-black-20, rgba(0, 0, 0, 0.2));
}

/* ---- Bottom action ---- */
/* The separator above the action row. `__divider` is only emitted *between* sections,
   so this border is the only rule between the list and the action area — it stands in
   for the `_Divider` that precedes the Action frame in the design.
   Matching the section dividers at 20% is intended, not an oversight: in the design the
   line above Action is that same `_Divider` component, filled with `alpha-black-20`. The
   8% this replaced was an untokenized literal with no counterpart in the design. */
.fragno-account-menu__action {
  margin-top: var(--spacing-xs, 0.25rem);
  padding-top: var(--spacing-md, 0.5rem);
  border-top: 1px solid var(--colors-alpha-black-20, rgba(0, 0, 0, 0.2));
}

/* Prominent → real fragno-button, stretched full width */
.fragno-account-menu__cta-button {
  display: block;
  width: 100%;
}

.fragno-account-menu__cta-button .fragno-button {
  width: 100%;
}

/* Add / destructive → icon + text row like other items, styled differently */
.fragno-account-menu__action-item--add {
  color: var(--colors-gray-900, #141414);
}

.fragno-account-menu__action-item--add .fragno-account-menu__item-icon {
  color: var(--colors-gray-700, #424242);
}

.fragno-account-menu__action-item--destructive {
  color: var(--colors-red-600, #d92d20);
}

.fragno-account-menu__action-item--destructive .fragno-account-menu__item-icon {
  color: var(--colors-red-600, #d92d20);
}

.fragno-account-menu__action-item--destructive:hover {
  background: var(--colors-red-25, #fffbfa);
}

@media (prefers-reduced-motion: reduce) {
  .fragno-account-menu__trigger,
  .fragno-account-menu__item,
  .fragno-account-menu__suboption,
  .fragno-account-menu__item-chevron {
    transition: none;
  }

  /* Sub-option groups and the whole menu open/close instantly instead of animating. */
  .fragno-account-menu__subgroup--opening,
  .fragno-account-menu__subgroup--closing,
  .fragno-account-menu__menu--opening,
  .fragno-account-menu__menu--closing {
    animation: none;
  }
}

/* ---- Anchored (child-trigger) mode ----
   When a consumer nests an element as the trigger, the account menu attaches to
   that element and opens as a floating popover below it (click or hover) instead
   of expanding in place. The consumer's element sits in __trigger-wrap; the
   built-in account button becomes a static header inside the popover. */
.fragno-account-menu--anchored {
  display: inline-flex;
  width: auto;
  min-height: 0;
}

.fragno-account-menu__trigger-wrap {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.fragno-account-menu__trigger-wrap:focus-visible {
  outline: 2px solid var(--colors-gray-700, #424242);
  outline-offset: 2px;
  border-radius: var(--radius-md, 0.5rem);
}

.fragno-account-menu__trigger-wrap--disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* Closed: the surface (popover) is hidden entirely. */
.fragno-account-menu--anchored .fragno-account-menu__surface {
  display: none;
}

/* Open: float the surface below the trigger as a detached popover. Higher
   specificity (two host classes) so it beats the default in-place open styles. */
.fragno-account-menu--anchored.fragno-account-menu--open .fragno-account-menu__surface {
  display: flex;
  position: absolute;
  top: calc(100% + var(--spacing-xs, 0.25rem));
  left: 0;
  right: auto;
  z-index: 50;
  width: 20rem; /* 320px (md) */
  max-width: calc(100vw - 2rem);
  padding: var(--spacing-md, 0.5rem);
  border: 1px solid var(--colors-gray-300, #d6d6d6);
  border-radius: var(--radius-4xl, 1.5rem);
  /* Opaque for the same reason as the in-place surface above — DEVP-1690 (#131) made this
     specific flyout (the signed-in avatar menu) solid after review. */
  background: var(--color-bg-primary, #ffffff);
  box-shadow: 0 2px 4px -2px rgba(10, 13, 18, 0.06),
    0 4px 18px 8px rgba(0, 0, 0, 0.06);
  /* The whole popover fades in and rises; the in-place grid reveal is skipped in
     anchored mode (see `_animateMenu`). */
  animation: fragno-popover-rise var(--popover-rise-duration, 0.2s)
    var(--popover-rise-easing, cubic-bezier(0.32, 0.72, 0, 1));
}

/* Must follow the rule above: the opt-out selector is identical, so it only wins
   on source order. Covers every size and alignment variant, since none of them
   redeclare `animation`. */
@media (prefers-reduced-motion: reduce) {
  .fragno-account-menu--anchored.fragno-account-menu--open
    .fragno-account-menu__surface {
    animation: none;
  }
}

.fragno-account-menu--anchored.fragno-account-menu--sm.fragno-account-menu--open
  .fragno-account-menu__surface {
  width: 13.75rem; /* 220px (sm) */
}

.fragno-account-menu--anchored.fragno-account-menu--align-end.fragno-account-menu--open
  .fragno-account-menu__surface {
  left: auto;
  right: 0;
}

/* The account button is a static header in anchored mode — no toggle affordance. */
.fragno-account-menu--anchored .fragno-account-menu__trigger,
.fragno-account-menu--anchored .fragno-account-menu__trigger:hover {
  cursor: default;
  background: transparent;
}

/* ============================================================
   QUICK MENU
   A minimal quick-actions menu — a lightweight account menu.
   Attaches to any trigger element and opens a floating card
   right below it (click or hover). Sections of icon + text
   items that navigate via href, plus an optional destructive
   item. (Nova Web — Quick actions, Figma 72608:44928)
   ============================================================ */
fragno-quick-menu {
  display: inline-flex;
  vertical-align: top;
}

/* The positioning context lives on the internal wrapper (a class, not the tag)
   so `position: relative` and the box-model reset keep working inside a shadow
   root, where the `fragno-quick-menu` tag selector does not match the host. */
.fragno-quick-menu {
  position: relative;
  display: inline-flex;
}

/* Self-contained box model so full-width padded rows never overflow
   the surface, regardless of the host page's global reset. */
fragno-quick-menu,
.fragno-quick-menu,
.fragno-quick-menu * {
  box-sizing: border-box;
}

/* ---- Trigger (wraps the consumer's arbitrary element) ---- */
.fragno-quick-menu__trigger {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.fragno-quick-menu__trigger:focus-visible {
  outline: 2px solid var(--colors-gray-700, #424242);
  outline-offset: 2px;
  border-radius: var(--radius-md, 0.5rem);
}

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

/* ---- Floating popover card ---- */
.fragno-quick-menu__popover {
  position: absolute;
  top: calc(100% + var(--spacing-xs, 0.25rem));
  left: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  width: 20rem; /* 320px (md) */
  max-width: calc(100vw - 2rem);
  padding: var(--spacing-md, 0.5rem);
  border: 1px solid var(--colors-gray-300, #d6d6d6);
  border-radius: var(--radius-4xl, 1.5rem);
  background: rgb(var(--surface-base-rgb, 255 255 255) / 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 2px 4px -2px rgba(10, 13, 18, 0.06),
    0 4px 18px 8px rgba(0, 0, 0, 0.06);
}

/* Shown state (the component toggles `hidden`); `:not([hidden])` is used rather than
   the host's `--open` class so the entrance still runs under Shadow DOM, where a
   selector rooted at the host cannot reach into the shadow tree. */
.fragno-quick-menu__popover:not([hidden]) {
  animation: fragno-popover-rise var(--popover-rise-duration, 0.2s)
    var(--popover-rise-easing, cubic-bezier(0.32, 0.72, 0, 1));
}

/* Must follow the rule above: the opt-out selector is identical, so it only wins
   on source order. */
@media (prefers-reduced-motion: reduce) {
  .fragno-quick-menu__popover:not([hidden]) {
    animation: none;
  }
}

.fragno-quick-menu__popover[hidden] {
  display: none;
}

.fragno-quick-menu__popover--sm {
  width: 13.75rem; /* 220px */
}

.fragno-quick-menu__popover--align-end {
  left: auto;
  right: 0;
}

.fragno-quick-menu__body {
  display: flex;
  flex-direction: column;
}

/* ---- Sections ---- */
.fragno-quick-menu__section {
  display: flex;
  flex-direction: column;
}

.fragno-quick-menu__section-header {
  display: flex;
  align-items: center;
  height: 2rem;
  padding: var(--spacing-xs, 0.25rem) var(--spacing-xl, 1rem)
    var(--spacing-xs, 0.25rem) var(--spacing-md, 0.5rem);
  border-radius: var(--radius-md, 0.5rem);
  font-family: var(--font-family-body);
  font-weight: 550;
  font-size: var(--font-size-text-xs, 0.75rem);
  line-height: var(--line-height-text-xs, 1.125rem);
  letter-spacing: -0.5px;
  color: var(--colors-gray-600, #525252);
}

.fragno-quick-menu__list {
  display: flex;
  flex-direction: column;
}

/* ---- Item (icon + text row) ---- */
.fragno-quick-menu__item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm, 0.375rem);
  width: 100%;
  min-height: 2.5rem;
  margin: 0;
  padding: var(--spacing-md, 0.5rem);
  border: 0;
  border-radius: var(--radius-xl, 0.75rem);
  background: transparent;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  font-family: var(--font-family-body);
  font-weight: 500;
  font-size: var(--font-size-text-sm, 0.875rem);
  line-height: var(--line-height-text-sm, 1.25rem);
  letter-spacing: -0.5px;
  color: var(--colors-gray-900, #141414);
  transition: background-color 0.15s ease;
}

.fragno-quick-menu__item:hover {
  background: var(--colors-gray-100, #f5f5f5);
}

.fragno-quick-menu__item:focus-visible {
  outline: 2px solid var(--colors-gray-700, #424242);
  outline-offset: -2px;
}

.fragno-quick-menu__item[aria-disabled='true'],
.fragno-quick-menu__item:disabled {
  cursor: not-allowed;
  color: var(--colors-gray-400, #a3a3a3);
}

.fragno-quick-menu__item[aria-disabled='true']:hover,
.fragno-quick-menu__item:disabled:hover {
  background: transparent;
}

.fragno-quick-menu__item-icon {
  display: flex;
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--colors-gray-500, #737373);
}

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

.fragno-quick-menu__item-label {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- Destructive item (last, optional) ---- */
.fragno-quick-menu__item--destructive {
  color: var(--colors-red-700, #b42318);
}

.fragno-quick-menu__item--destructive .fragno-quick-menu__item-icon {
  color: var(--colors-red-700, #b42318);
}

.fragno-quick-menu__item--destructive:hover {
  background: var(--colors-red-25, #fffbfa);
}

/* ---- Divider ---- */
.fragno-quick-menu__divider {
  height: 1px;
  margin: var(--spacing-sm, 0.375rem) var(--spacing-md, 0.5rem);
  background: rgba(0, 0, 0, 0.2);
}

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

/* ============================================================
   CARD SYSTEM BUILDING BLOCKS
   Status badge, icon tile, item block (+ group) and list item
   (+ block) — the pieces dev portal cards are assembled from.
   Each component adds its class to the host in light DOM and to
   an inner wrapper in shadow DOM, so the class selectors below
   work in both modes. (Nova Web — Figma 74383:66170,
   74113:67234, 74149:24194, 74296:80205, 74296:79897)
   ============================================================ */

/* ---- Status badge ---- */
fragno-status-badge {
  display: inline-flex;
  vertical-align: top;
}

.fragno-status-badge {
  --fragno-status-badge-dot: var(--status-badge-dot-neutral, #737373);
  --fragno-status-badge-halo: var(--status-badge-halo-neutral, #e5e5e5);
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs, 0.25rem);
  padding: var(--spacing-xxs, 0.125rem) var(--spacing-md, 0.5rem)
    var(--spacing-xxs, 0.125rem) var(--spacing-sm, 0.375rem);
  border-radius: var(--status-badge-radius, 0.5rem);
  background: var(--status-badge-bg, #f5f5f5);
}

.fragno-status-badge,
.fragno-status-badge * {
  box-sizing: border-box;
}

.fragno-status-badge--success {
  --fragno-status-badge-dot: var(--status-badge-dot-success, #099250);
  --fragno-status-badge-halo: var(--status-badge-halo-success, #d3f8df);
}

.fragno-status-badge--warning {
  --fragno-status-badge-dot: var(--status-badge-dot-warning, #dc6803);
  --fragno-status-badge-halo: var(--status-badge-halo-warning, #fef0c7);
}

.fragno-status-badge--error {
  --fragno-status-badge-dot: var(--status-badge-dot-error, #d92d20);
  --fragno-status-badge-halo: var(--status-badge-halo-error, #fee4e2);
}

.fragno-status-badge--info {
  --fragno-status-badge-dot: var(--status-badge-dot-info, #155eef);
  --fragno-status-badge-halo: var(--status-badge-halo-info, #d1e0ff);
}

.fragno-status-badge__indicator {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--status-badge-indicator-size, 1rem);
  height: var(--status-badge-indicator-size, 1rem);
}

.fragno-status-badge__indicator[hidden] {
  display: none;
}

/* 8px dot inside a 3px halo ring — 14px total in a 16px box. */
.fragno-status-badge__dot {
  width: var(--status-badge-dot-size, 0.5rem);
  height: var(--status-badge-dot-size, 0.5rem);
  border-radius: var(--radius-full, 9999px);
  background: var(--fragno-status-badge-dot);
  box-shadow: 0 0 0 var(--status-badge-halo-width, 3px) var(--fragno-status-badge-halo);
}

.fragno-status-badge--icon .fragno-status-badge__indicator {
  color: var(--fragno-status-badge-dot);
}

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

.fragno-status-badge__label {
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-medium, 500);
  font-size: var(--font-size-text-xs, 0.75rem);
  line-height: var(--status-badge-label-line-height, 1.125rem);
  letter-spacing: var(--status-badge-label-letter-spacing, -0.00375rem);
  color: var(--status-badge-label-color, #424242);
  white-space: nowrap;
}

/* ---- Icon tile ---- */
fragno-icon-tile {
  display: inline-flex;
  vertical-align: top;
}

.fragno-icon-tile {
  --fragno-icon-tile-size: var(--icon-tile-size-md, 2.125rem);
  --fragno-icon-tile-icon-size: var(--icon-tile-glyph-size-md, 1.125rem);
  --fragno-icon-tile-radius: var(--icon-tile-radius-md, 0.625rem);
  --fragno-icon-tile-bg: var(--icon-tile-bg-grey, #f5f5f5);
  --fragno-icon-tile-fg: var(--icon-tile-fg-grey, #292929);
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--fragno-icon-tile-size);
  height: var(--fragno-icon-tile-size);
  border-radius: var(--fragno-icon-tile-radius);
  background: var(--fragno-icon-tile-bg);
  color: var(--fragno-icon-tile-fg);
}

.fragno-icon-tile,
.fragno-icon-tile * {
  box-sizing: border-box;
}

.fragno-icon-tile--sm {
  --fragno-icon-tile-size: var(--icon-tile-size-sm, 1.625rem);
  --fragno-icon-tile-icon-size: var(--icon-tile-glyph-size-sm, 0.875rem);
  --fragno-icon-tile-radius: var(--icon-tile-radius-sm, 0.625rem);
}

.fragno-icon-tile--lg {
  --fragno-icon-tile-size: var(--icon-tile-size-lg, 2.625rem);
  --fragno-icon-tile-icon-size: var(--icon-tile-glyph-size-lg, 1.5rem);
  --fragno-icon-tile-radius: var(--icon-tile-radius-lg, 0.75rem);
}

.fragno-icon-tile--xl {
  --fragno-icon-tile-size: var(--icon-tile-size-xl, 3rem);
  --fragno-icon-tile-icon-size: var(--icon-tile-glyph-size-xl, 2rem);
  --fragno-icon-tile-radius: var(--icon-tile-radius-xl, 1rem);
}

.fragno-icon-tile--blue {
  --fragno-icon-tile-bg: var(--icon-tile-bg-blue, #d1e0ff);
  --fragno-icon-tile-fg: var(--icon-tile-fg-blue, #004eeb);
}

.fragno-icon-tile--green {
  --fragno-icon-tile-bg: var(--icon-tile-bg-green, #d3f8df);
  --fragno-icon-tile-fg: var(--icon-tile-fg-green, #087443);
}

.fragno-icon-tile--red {
  --fragno-icon-tile-bg: var(--icon-tile-bg-red, #fee4e2);
  --fragno-icon-tile-fg: var(--icon-tile-fg-red, #b42318);
}

.fragno-icon-tile--white {
  --fragno-icon-tile-bg: var(--icon-tile-bg-white, #ffffff);
  --fragno-icon-tile-fg: var(--icon-tile-fg-white, #084c2e);
}

.fragno-icon-tile--transparent {
  --fragno-icon-tile-bg: transparent;
  --fragno-icon-tile-fg: var(--icon-tile-fg-transparent, #424242);
}

.fragno-icon-tile__icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--fragno-icon-tile-icon-size);
  height: var(--fragno-icon-tile-icon-size);
}

.fragno-icon-tile__icon[hidden] {
  display: none;
}

/* Sized explicitly so a consumer-provided glyph cannot fall back to its
   intrinsic size and blow the tile out. */
.fragno-icon-tile__icon svg,
.fragno-icon-tile__icon img,
.fragno-icon-tile > svg,
.fragno-icon-tile > img {
  display: block;
  width: var(--fragno-icon-tile-icon-size);
  height: var(--fragno-icon-tile-icon-size);
  object-fit: contain;
}

.fragno-icon-tile__icon svg,
.fragno-icon-tile > svg {
  width: 100%;
  height: 100%;
}

/* ---- Item block (label above value) ---- */
fragno-item-block {
  display: block;
}

.fragno-item-block {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xxs, 0.125rem);
  min-width: 0;
  padding: var(--spacing-sm, 0.375rem) 0;
  /* Set on the block so a value the consumer nested inherits the value's
     typography instead of the page default. */
  font-family: var(--font-family-body);
  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);
  color: var(--item-block-value-color, #141414);
}

.fragno-item-block,
.fragno-item-block * {
  box-sizing: border-box;
}

.fragno-item-block--outline,
.fragno-item-block--grey {
  padding: var(--spacing-md, 0.5rem) var(--spacing-lg, 0.75rem);
  border-radius: var(--card-block-radius, 1rem);
}

.fragno-item-block--outline {
  border: 1px solid var(--card-block-border-color, #d6d6d6);
}

.fragno-item-block--grey {
  background: var(--card-block-surface-grey, #f7f7f7);
}

.fragno-item-block--align-end {
  align-items: flex-end;
  text-align: right;
}

.fragno-item-block__label,
.fragno-item-block__value {
  font-family: var(--font-family-body);
  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);
  overflow-wrap: anywhere;
}

.fragno-item-block__label {
  font-weight: var(--font-weight-regular, 400);
  color: var(--item-block-label-color, #424242);
}

.fragno-item-block__value {
  font-weight: var(--font-weight-medium, 500);
  color: var(--item-block-value-color, #141414);
}

.fragno-item-block__label[hidden],
.fragno-item-block__value[hidden] {
  display: none;
}

/* ---- Item block group (row of item blocks) ---- */
fragno-item-block-group {
  display: block;
}

.fragno-item-block-group {
  --fragno-item-block-group-min-item-width: var(--item-block-group-min-item-width, 7.5rem);
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(var(--fragno-item-block-group-min-item-width), 1fr)
  );
  gap: var(--item-block-group-gap, 0.75rem);
  align-items: stretch;
}

.fragno-item-block-group,
.fragno-item-block-group * {
  box-sizing: border-box;
}

.fragno-item-block-group--fixed-columns {
  grid-template-columns: repeat(var(--fragno-item-block-group-columns, 3), minmax(0, 1fr));
}

/* A fixed column count would squeeze the values on a phone; fall back to the
   fitting behaviour once the columns can no longer hold their content. */
@media (max-width: 480px) {
  .fragno-item-block-group--fixed-columns {
    grid-template-columns: repeat(
      auto-fit,
      minmax(var(--fragno-item-block-group-min-item-width), 1fr)
    );
  }
}

/* ---- List item (icon + text row) ---- */
fragno-list-item {
  display: block;
}

.fragno-list-item {
  --fragno-list-item-icon-color: var(--list-item-icon-color, #424242);
  display: flex;
  align-items: center;
  gap: var(--list-item-gap, 0.375rem);
  min-width: 0;
  /* Set on the row so text the consumer nested inherits the row's typography
     instead of the page default. */
  font-family: var(--font-family-body);
  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);
  color: var(--list-item-text-color, #292929);
}

.fragno-list-item,
.fragno-list-item * {
  box-sizing: border-box;
}

.fragno-list-item__icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--list-item-icon-size, 1.125rem);
  height: var(--list-item-icon-size, 1.125rem);
  color: var(--fragno-list-item-icon-color);
}

.fragno-list-item__icon[hidden] {
  display: none;
}

.fragno-list-item__icon svg,
.fragno-list-item__icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Anything that is not the icon is the row's text — including content the
   consumer nested instead of using the `text` attribute. */
.fragno-list-item > *:not(.fragno-list-item__icon) {
  flex: 1 1 0;
  min-width: 0;
}

.fragno-list-item__content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs, 0.25rem);
}

.fragno-list-item__content[hidden],
.fragno-list-item__text[hidden],
.fragno-list-item__supporting-text[hidden] {
  display: none;
}

.fragno-list-item__text,
.fragno-list-item__supporting-text {
  font-family: var(--font-family-body);
  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);
  letter-spacing: var(--letter-spacing-text-sm, -0.004375rem);
  overflow-wrap: anywhere;
}

.fragno-list-item__text {
  color: var(--list-item-text-color, #292929);
}

.fragno-list-item__supporting-text {
  color: var(--list-item-supporting-text-color, #737373);
}

.fragno-list-item--icon-success {
  --fragno-list-item-icon-color: var(--list-item-icon-color-success, #087443);
}

.fragno-list-item--icon-warning {
  --fragno-list-item-icon-color: var(--list-item-icon-color-warning, #b54708);
}

.fragno-list-item--icon-error {
  --fragno-list-item-icon-color: var(--list-item-icon-color-error, #b42318);
}

.fragno-list-item--icon-info {
  --fragno-list-item-icon-color: var(--list-item-icon-color-info, #004eeb);
}

.fragno-list-item--icon-muted {
  --fragno-list-item-icon-color: var(--list-item-icon-color-muted, #a3a3a3);
}

/* ---- List item block (stack of list items) ---- */
fragno-list-item-block {
  display: block;
}

.fragno-list-item-block {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg, 0.75rem);
  padding: var(--spacing-sm, 0.375rem) 0;
}

.fragno-list-item-block,
.fragno-list-item-block * {
  box-sizing: border-box;
}

/* The framed variants inset the list itself by 6px on top of the block's 8px,
   which is why the vertical padding is the sum of the two spacing steps. */
.fragno-list-item-block--outline,
.fragno-list-item-block--grey {
  gap: var(--spacing-xl, 1rem);
  padding: calc(var(--spacing-md, 0.5rem) + var(--spacing-sm, 0.375rem))
    var(--spacing-lg, 0.75rem);
  border-radius: var(--card-block-radius, 1rem);
}

.fragno-list-item-block--outline {
  border: 1px solid var(--card-block-border-color, #d6d6d6);
}

.fragno-list-item-block--grey {
  background: var(--card-block-surface-grey, #f7f7f7);
}

/* =============================================================================
   Chat wrapper (Nova — Figma QQ7oqsQdNUUsW88EqJHWAB node 74822:26280)
   ============================================================================= */

fragno-chat-wrapper {
  display: block;
  position: relative;
  width: var(--chat-wrapper-width, 23.4375rem);
  max-width: 100%;
  box-sizing: border-box;
  /* Panel opens upward from the trigger — don't clip it. */
  overflow: visible;
}

.fragno-chat-wrapper,
.fragno-chat-wrapper * {
  box-sizing: border-box;
}

.fragno-chat-wrapper {
  /* Trigger anchors in-flow; panel is absolutely positioned above it so
     Ask us ↔ Close stays in the same spot when open toggles. */
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  filter: drop-shadow(0 0.3125rem 0.15625rem rgba(10, 13, 18, 0.04))
    drop-shadow(0 2rem 2rem rgba(10, 13, 18, 0.14));
}

.fragno-chat-wrapper[data-disabled='true'] {
  opacity: 0.6;
  pointer-events: none;
}

.fragno-chat-wrapper__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + var(--spacing-lg, 0.75rem));
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: var(--chat-wrapper-height, 47.3125rem);
  max-height: var(--chat-wrapper-max-height, min(47.3125rem, 85vh));
  overflow: hidden;
  border: 2px solid var(--colors-base-white, #ffffff);
  border-radius: var(--chat-wrapper-radius, 2.375rem);
  background: var(--colors-base-white, #ffffff);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.fragno-chat-wrapper__panel[hidden] {
  display: none;
}

.fragno-chat-wrapper__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  width: 100%;
  height: var(--chat-wrapper-header-height, 3.5rem);
  padding: 0 var(--spacing-2xl, 1.25rem) 0 var(--spacing-lg, 0.75rem);
  background: var(--colors-base-white, #ffffff);
  border-bottom: 1px solid var(--colors-alpha-black-10, rgba(0, 0, 0, 0.1));
}

.fragno-chat-wrapper__header-start,
.fragno-chat-wrapper__header-end {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg, 0.75rem);
  min-width: 0;
}

.fragno-chat-wrapper__header-end {
  gap: var(--spacing-md, 0.5rem);
  flex-shrink: 0;
}

.fragno-chat-wrapper__back-wrap,
.fragno-chat-wrapper__menu-wrap,
.fragno-chat-wrapper__close-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.fragno-chat-wrapper__back-wrap[hidden],
.fragno-chat-wrapper__menu-wrap[hidden],
.fragno-chat-wrapper__close-wrap[hidden],
.fragno-chat-wrapper__trigger-slot[hidden],
.fragno-chat-wrapper__bottom[hidden] {
  display: none;
}

.fragno-chat-wrapper fragno-button.fragno-chat-wrapper__back,
.fragno-chat-wrapper fragno-button.fragno-chat-wrapper__menu,
.fragno-chat-wrapper fragno-button.fragno-chat-wrapper__close {
  display: inline-flex;
}

.fragno-chat-wrapper fragno-button.fragno-chat-wrapper__back .fragno-button,
.fragno-chat-wrapper fragno-button.fragno-chat-wrapper__menu .fragno-button,
.fragno-chat-wrapper fragno-button.fragno-chat-wrapper__close .fragno-button {
  width: 2.5rem;
  height: 2.5rem;
  min-width: 2.5rem;
  min-height: 2.5rem;
  padding: 0;
  border-radius: var(--radius-full, 9999px);
  color: var(--colors-gray-700, #424242);
}

.fragno-chat-wrapper fragno-button.fragno-chat-wrapper__back .fragno-button:hover:not(:disabled),
.fragno-chat-wrapper fragno-button.fragno-chat-wrapper__menu .fragno-button:hover:not(:disabled),
.fragno-chat-wrapper fragno-button.fragno-chat-wrapper__close .fragno-button:hover:not(:disabled) {
  background: var(--colors-gray-100, #f5f5f5);
  color: var(--colors-gray-900, #141414);
}

.fragno-chat-wrapper fragno-button.fragno-chat-wrapper__back .fragno-button:focus-visible,
.fragno-chat-wrapper fragno-button.fragno-chat-wrapper__menu .fragno-button:focus-visible,
.fragno-chat-wrapper fragno-button.fragno-chat-wrapper__close .fragno-button:focus-visible {
  outline: 2px solid var(--colors-blue-500, #2970ff);
  outline-offset: 2px;
}

.fragno-chat-wrapper__titles {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.fragno-chat-wrapper__eyebrow,
.fragno-chat-wrapper__title {
  margin: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-family-body, 'Inter', sans-serif);
  letter-spacing: var(--letter-spacing-text-md, -0.005rem);
}

.fragno-chat-wrapper__eyebrow {
  font-size: var(--font-size-text-xs, 0.75rem);
  font-weight: var(--font-weight-medium, 500);
  line-height: var(--line-height-text-xs, 1.125rem);
  color: var(--colors-gray-600, #525252);
}

.fragno-chat-wrapper__eyebrow[hidden] {
  display: none;
}

.fragno-chat-wrapper__title {
  font-size: var(--font-size-text-md, 1rem);
  font-weight: var(--font-weight-medium, 500);
  line-height: var(--line-height-text-md, 1.5rem);
  color: var(--colors-gray-900, #141414);
}

.fragno-chat-wrapper__window {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  width: 100%;
  background: var(--colors-alpha-white-80, rgba(255, 255, 255, 0.8));
  overflow: hidden;
}

.fragno-chat-wrapper__thread {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: stretch;
  gap: var(--spacing-xl, 1rem);
  min-height: 0;
  width: 100%;
  padding: var(--spacing-3xl, 1.5rem) var(--spacing-2xl, 1.25rem) var(--spacing-md, 0.5rem);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.fragno-chat-wrapper__thread > fragno-chat-bubble[type='user'] {
  align-self: flex-end;
}

.fragno-chat-wrapper__thread > fragno-chat-bubble[type='agent'],
.fragno-chat-wrapper__thread > fragno-chat-bubble[type='status'] {
  align-self: flex-start;
}

.fragno-chat-wrapper__thread > fragno-chat-action-card,
.fragno-chat-wrapper__thread > fragno-carousel,
.fragno-chat-wrapper__thread > fragno-card,
.fragno-chat-wrapper__thread > fragno-featured-card,
.fragno-chat-wrapper__thread > fragno-offer-card,
.fragno-chat-wrapper__thread > fragno-content-card {
  align-self: stretch;
  width: 100%;
  max-width: 100%;
}

/* Optional turn wrappers for multi-bubble / action-group rows */
.fragno-chat-wrapper__turn {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs, 0.25rem);
  width: 100%;
}

.fragno-chat-wrapper__turn--user {
  align-items: flex-end;
}

.fragno-chat-wrapper__turn--agent {
  align-items: flex-start;
}

.fragno-chat-wrapper__turn--user .fragno-chat-wrapper__turn-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--spacing-md, 0.5rem);
  max-width: 100%;
}

.fragno-chat-wrapper__bottom {
  position: relative;
  flex-shrink: 0;
  width: 100%;
  padding: var(--spacing-xl, 1rem);
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0.96) 0%,
    rgba(255, 255, 255, 0.72) 45%,
    rgba(255, 255, 255, 0) 100%
  );
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.fragno-chat-wrapper__input-slot {
  display: block;
  width: 100%;
}

.fragno-chat-wrapper__input-slot fragno-chat-input-bar {
  width: 100%;
  max-width: none;
}

.fragno-chat-wrapper__trigger-slot {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
}

.fragno-chat-wrapper fragno-button.fragno-chat-wrapper__trigger .fragno-button {
  border-radius: var(--radius-full, 9999px);
  box-shadow: 0 0.25rem 0.75rem rgba(10, 13, 18, 0.12);
  /* Keep the left edge stable as the label swaps Ask us ↔ Close. */
  justify-content: flex-start;
}

.fragno-chat-wrapper fragno-button.fragno-chat-wrapper__trigger .fragno-button:focus-visible {
  outline: 2px solid var(--colors-blue-500, #2970ff);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .fragno-chat-wrapper__thread {
    scroll-behavior: auto;
  }
}

@media (max-width: 26.25rem) {
  fragno-chat-wrapper {
    width: 100%;
  }

  .fragno-chat-wrapper__panel {
    border-radius: var(--chat-wrapper-radius-mobile, 1.5rem);
    height: var(--chat-wrapper-height-mobile, min(47.3125rem, 80vh));
  }
}




/*# sourceMappingURL=683-b7bdc0d7.css.map*/