:root {
  /* basics - from Figma tw/colors */
  --hl-white: #FFFFFF;
  --hl-white-5: rgba(255, 255, 255, 0.05);
  --hl-black: #000000;

  /* homelight-blue (primary) - complete scale from Figma tw/colors */
  --hl-blue-50: #F4FBFF;
  --hl-blue-100: #E8F5FF;
  --hl-blue-200: #DBF0FF;
  --hl-blue-300: #D0ECFF;
  --hl-blue-400: #8BD1FF;
  --hl-blue-500: #46B6FF;
  --hl-blue-600: #1192E5;
  --hl-blue-700: #0C6EBA;
  --hl-blue-800: #273653;
  --hl-blue-900: #0E2433;
  --hl-blue-950: #071219;

  /* slate (neutral) - complete scale from Figma tw/colors */
  --hl-slate-50: #F8FAFC;
  --hl-slate-100: #F1F5F9;
  --hl-slate-200: #E2E8F0;
  --hl-slate-300: #CBD5E1;
  --hl-slate-400: #94A3B8;
  --hl-slate-500: #64748B;
  --hl-slate-600: #475569;
  --hl-slate-700: #334155;
  --hl-slate-800: #1E293B;
  --hl-slate-900: #0F172A;
  --hl-slate-950: #020617;

  /* Legacy gray mappings (for backward compatibility) */
  --hl-gray-50: var(--hl-slate-50);
  --hl-gray-100: var(--hl-slate-100);
  --hl-gray-200: var(--hl-slate-200);
  --hl-gray-300: var(--hl-slate-300);
  --hl-gray-400: var(--hl-slate-400);
  --hl-gray-500: var(--hl-slate-500);
  --hl-gray-600: var(--hl-slate-600);
  --hl-gray-700: var(--hl-slate-700);
  --hl-gray-900: var(--hl-slate-900);
  
  /* Figma design system colors */
  --figma-blue-80: #273653;
  --figma-gray-300: #DBDFE6;
  --figma-gray-500: #8E929C;

  /* red (error) */
  --hl-red-50:  #FDF6F6;
  --hl-red-100: #FDEBEB;
  --hl-red-200: #FDDDDD;
  --hl-red-300: #F9C5C5;
  --hl-red-5: #F7382D;
  --hl-red-500: #F37C7C;
  --hl-red-600: #F22D2D;
  --hl-red-700: #DA0C0C;
  --hl-red-900: #800C0C;

  /* orange (accent) - complete scale from Figma tw/colors */
  --hl-orange-50: #FFF7ED;
  --hl-orange-100: #FFEDD5;
  --hl-orange-200: #FED7AA;
  --hl-orange-300: #FDBA74;
  --hl-orange-400: #FB923C;
  --hl-orange-500: #F97316;
  --hl-orange-600: #EA580C;
  --hl-orange-700: #C2410C;
  --hl-orange-800: #9A3412;
  --hl-orange-900: #7C2D12;
  --hl-orange-950: #431407;

  /* yellow (warning) */
  --hl-yellow-50:  #FFFAEB;
  --hl-yellow-100: #FFF3C5;
  --hl-yellow-200: #FFE896;
  --hl-yellow-300: #FFDD59;
  --hl-yellow-500: #FDBB07;
  --hl-yellow-600: #E7A500;
  --hl-yellow-700: #BB8000;
  --hl-yellow-900: #705200;

  /* green (success) */
  --hl-green-50:  #F0FAF8;
  --hl-green-100: #D2F2E8;
  --hl-green-200: #A8E7D5;
  --hl-green-300: #80D8BD;
  --hl-green-5: #38BF8F;
  --hl-green-500: #38BF8F;
  --hl-green-600: #109D80;
  --hl-green-700: #17785B;
  --hl-green-900: #025D43;

  /* illustration support (from kit) */
  --hl-snow-gray:   #F2F9FF;
  --hl-frost-gray:  #B3DFFF;
  --hl-slate-gray:  #7D96B2;
  --hl-glacier-blue:#48B6FF;
  --hl-medium-blue: #0C62BA;
  --hl-cobalt-blue: #273E63;

  /* Figma Variables - Colors */
  --figma-foreground: #273653;
  --figma-muted-foreground: #64748b;
  --figma-secondary: #f1f5f9;
  --figma-background: #ffffff;
  --figma-primary: #46b6ff;
  --figma-primary-foreground: #f8fafc;
  --figma-slate-500: #64748b;

  /* Figma Variables - Spacing */
  --figma-gap-1: 4px;
  --figma-gap-1-5: 6px;
  --figma-gap-2: 8px;
  --figma-gap-4: 16px;
  --figma-px-3: 12px;
  --figma-pt-0-5: 2px;

  /* Figma Variables - Border Radius */
  --figma-rounded-sm: 4px;
  --figma-rounded-md: 6px;

  /* Figma Variables - Border Width */
  --figma-border: 1px;
  --figma-stroke-1: 1px;
  --figma-stroke-2: 2px;

  /* Figma Variables - Opacity */
  --figma-opacity-50: 0.5;

  /* Figma Variables - Shadow */
  --figma-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.1);

  /* semantic aliases */
  --color-bg: var(--hl-white);
  --color-surface: var(--hl-white);
  --color-border: var(--hl-gray-200);
  --color-text: var(--hl-gray-900);
  --color-text-muted: var(--hl-gray-600);
  --color-brand: var(--hl-blue-600);
  --color-accent: var(--hl-orange-600);
  --color-success: var(--hl-green-600);
  --color-warning: var(--hl-yellow-600);
  --color-error: var(--hl-red-600);
  --color-link: var(--hl-blue-700);
  --color-link-hover: var(--hl-blue-800);
  --color-focus-ring: var(--hl-blue-500);

  /* Figma semantic aliases (mapped to existing) */
  --color-figma-foreground: var(--figma-foreground);
  --color-figma-muted-foreground: var(--figma-muted-foreground);
  --color-figma-secondary: var(--figma-secondary);
  --color-figma-background: var(--figma-background);
  --color-figma-primary: var(--figma-primary);
  --color-figma-primary-foreground: var(--figma-primary-foreground);

  /* typography - from Figma tw/font */
  /* Font families */
  --font-sans: "Open Sans", "Centra No2", sans-serif;
  --font-mono: "Geist Mono", "Open Sans", "Centra No2", monospace;

  /* Font sizes - from Figma tw/font size */
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 30px;
  --font-size-4xl: 36px;

  /* Legacy font size mappings (for backward compatibility) */
  --fs-3xl: 1.875rem;  /* 30px */
  --fs-2xl: 1.5rem;    /* 24px */
  --fs-xl:  1.25rem;   /* 20px */
  --fs-lg:  1.125rem;  /* 18px */
  --fs-md:  1rem;      /* 16px */
  --fs-sm:  0.875rem;  /* 14px */
  --fs-xs:  0.75rem;   /* 12px */
  --fs-2xs: 0.75rem;   /* 12px */

  --text-lg: 1.125rem; /* 18px */
  --text-md: 1rem;     /* 16px */
  --text-sm: 0.875rem; /* 14px */
  --overline: 0.75rem; /* 12px */

  /* Font styles - from Figma tw/font style */
  --font-style-italic: italic;
  --font-style-normal: normal;

  /* Font weights - from Figma tw/font weight */
  --fw-thin: 100;
  --fw-extralight: 200;
  --fw-light: 300;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fw-black: 900;

  /* Legacy font weight mappings (for backward compatibility) */
  --fw-regular: 400;

  --lh-tight: 1.15;
  --lh-normal: 1.4;
  --lh-relaxed: 1.6;

  --ls-overline: 0.08em;

  /* Figma Variables - Typography */
  /* Text-4xl/Semi Bold: size 36px, weight 600, lineHeight 40px */
  --figma-text-4xl-semibold-size: 36px;
  --figma-text-4xl-semibold-weight: 600;
  --figma-text-4xl-semibold-line-height: 40px;
  --figma-text-4xl-semibold-letter-spacing: 0;

  /* Text-base/Regular: size 16px, weight 400, lineHeight 24px */
  --figma-text-base-regular-size: 16px;
  --figma-text-base-regular-weight: 400;
  --figma-text-base-regular-line-height: 24px;
  --figma-text-base-regular-letter-spacing: 0;

  /* Text-sm/Medium: size 14px, weight 600, lineHeight 20px */
  --figma-text-sm-medium-size: 14px;
  --figma-text-sm-medium-weight: 600;
  --figma-text-sm-medium-line-height: 20px;
  --figma-text-sm-medium-letter-spacing: 0;

  /* Text-sm/Regular: size 14px, weight 400, lineHeight 20px */
  --figma-text-sm-regular-size: 14px;
  --figma-text-sm-regular-weight: 400;
  --figma-text-sm-regular-line-height: 20px;
  --figma-text-sm-regular-letter-spacing: 0;

  /* Text-xs/Medium: size 12px, weight 600, lineHeight 16px */
  --figma-text-xs-medium-size: 12px;
  --figma-text-xs-medium-weight: 600;
  --figma-text-xs-medium-line-height: 16px;
  --figma-text-xs-medium-letter-spacing: 0;

  /* Text-xs/Regular: size 12px, weight 400, lineHeight 16px */
  --figma-text-xs-regular-size: 12px;
  --figma-text-xs-regular-weight: 400;
  --figma-text-xs-regular-line-height: 16px;
  --figma-text-xs-regular-letter-spacing: 0;

  /* shadows (blue-tinted from "Shadows" screenshot) */
  --shadow-blue-48dp: 0 24px 48px rgba(17, 136, 227, 0.20);
  --shadow-blue-20dp: 0 10px 20px rgba(17, 136, 227, 0.20);
  --shadow-blue-16dp: 0 8px 16px rgba(17, 136, 227, 0.20);
  --shadow-blue-4dp:  0 2px 4px rgba(17, 136, 227, 0.30);

  /* Figma Variables - Additional mappings */
  /* Map Figma primary to existing brand color */
  --figma-primary-mapped: var(--hl-blue-500); /* #46b6ff matches Figma primary */
  --figma-foreground-mapped: var(--hl-blue-800); /* #273653 matches Figma foreground */
}

/* Figma Typography Utility Classes */
.text-figma-base-regular {
  font-family: var(--font-sans);
  font-size: var(--figma-text-base-regular-size);
  font-weight: var(--figma-text-base-regular-weight);
  line-height: var(--figma-text-base-regular-line-height);
  letter-spacing: var(--figma-text-base-regular-letter-spacing);
}

/* Color utility classes for CDN Tailwind compatibility */
/* These classes allow using brand colors with CDN Tailwind */

/* Text colors */
.text-hl-blue-50 { color: var(--hl-blue-50); }
.text-hl-blue-100 { color: var(--hl-blue-100); }
.text-hl-blue-200 { color: var(--hl-blue-200); }
.text-hl-blue-300 { color: var(--hl-blue-300); }
.text-hl-blue-400 { color: var(--hl-blue-400); }
.text-hl-blue-500 { color: var(--hl-blue-500); }
.text-hl-blue-600 { color: var(--hl-blue-600); }
.text-hl-blue-700 { color: var(--hl-blue-700); }
.text-hl-blue-800 { color: var(--hl-blue-800); }
.text-hl-blue-900 { color: var(--hl-blue-900); }
.text-hl-blue-950 { color: var(--hl-blue-950); }

.text-hl-slate-50 { color: var(--hl-slate-50); }
.text-hl-slate-100 { color: var(--hl-slate-100); }
.text-hl-slate-200 { color: var(--hl-slate-200); }
.text-hl-slate-300 { color: var(--hl-slate-300); }
.text-hl-slate-400 { color: var(--hl-slate-400); }
.text-hl-slate-500 { color: var(--hl-slate-500); }
.text-hl-slate-600 { color: var(--hl-slate-600); }
.text-hl-slate-700 { color: var(--hl-slate-700); }
.text-hl-slate-800 { color: var(--hl-slate-800); }
.text-hl-slate-900 { color: var(--hl-slate-900); }
.text-hl-slate-950 { color: var(--hl-slate-950); }

.text-hl-orange-50 { color: var(--hl-orange-50); }
.text-hl-orange-100 { color: var(--hl-orange-100); }
.text-hl-orange-200 { color: var(--hl-orange-200); }
.text-hl-orange-300 { color: var(--hl-orange-300); }
.text-hl-orange-400 { color: var(--hl-orange-400); }
.text-hl-orange-500 { color: var(--hl-orange-500); }
.text-hl-orange-600 { color: var(--hl-orange-600); }
.text-hl-orange-700 { color: var(--hl-orange-700); }
.text-hl-orange-800 { color: var(--hl-orange-800); }
.text-hl-orange-900 { color: var(--hl-orange-900); }
.text-hl-orange-950 { color: var(--hl-orange-950); }

.text-hl-red-50 { color: var(--hl-red-50); }
.text-hl-red-100 { color: var(--hl-red-100); }
.text-hl-red-200 { color: var(--hl-red-200); }
.text-hl-red-300 { color: var(--hl-red-300); }
.text-hl-red-500 { color: var(--hl-red-500); }
.text-hl-red-600 { color: var(--hl-red-600); }
.text-hl-red-700 { color: var(--hl-red-700); }
.text-hl-red-900 { color: var(--hl-red-900); }

/* Ensure hidden form controls are never visually rendered */
input[type="hidden"] {
  display: none !important;
}

/* Background colors */
.bg-hl-blue-50 { background-color: var(--hl-blue-50); }
.bg-hl-blue-100 { background-color: var(--hl-blue-100); }
.bg-hl-blue-200 { background-color: var(--hl-blue-200); }
.bg-hl-blue-300 { background-color: var(--hl-blue-300); }
.bg-hl-blue-400 { background-color: var(--hl-blue-400); }
.bg-hl-blue-500 { background-color: var(--hl-blue-500); }
.bg-hl-blue-600 { background-color: var(--hl-blue-600); }
.bg-hl-blue-700 { background-color: var(--hl-blue-700); }
.bg-hl-blue-800 { background-color: var(--hl-blue-800); }
.bg-hl-blue-900 { background-color: var(--hl-blue-900); }
.bg-hl-blue-950 { background-color: var(--hl-blue-950); }

.bg-hl-slate-50 { background-color: var(--hl-slate-50); }
.bg-hl-slate-100 { background-color: var(--hl-slate-100); }
.bg-hl-slate-200 { background-color: var(--hl-slate-200); }
.bg-hl-slate-300 { background-color: var(--hl-slate-300); }
.bg-hl-slate-400 { background-color: var(--hl-slate-400); }
.bg-hl-slate-500 { background-color: var(--hl-slate-500); }
.bg-hl-slate-600 { background-color: var(--hl-slate-600); }
.bg-hl-slate-700 { background-color: var(--hl-slate-700); }
.bg-hl-slate-800 { background-color: var(--hl-slate-800); }
.bg-hl-slate-900 { background-color: var(--hl-slate-900); }
.bg-hl-slate-950 { background-color: var(--hl-slate-950); }

.bg-hl-orange-50 { background-color: var(--hl-orange-50); }
.bg-hl-orange-100 { background-color: var(--hl-orange-100); }
.bg-hl-orange-200 { background-color: var(--hl-orange-200); }
.bg-hl-orange-300 { background-color: var(--hl-orange-300); }
.bg-hl-orange-400 { background-color: var(--hl-orange-400); }
.bg-hl-orange-500 { background-color: var(--hl-orange-500); }
.bg-hl-orange-600 { background-color: var(--hl-orange-600); }
.bg-hl-orange-700 { background-color: var(--hl-orange-700); }
.bg-hl-orange-800 { background-color: var(--hl-orange-800); }
.bg-hl-orange-900 { background-color: var(--hl-orange-900); }
.bg-hl-orange-950 { background-color: var(--hl-orange-950); }

.bg-hl-red-50 { background-color: var(--hl-red-50); }
.bg-hl-red-100 { background-color: var(--hl-red-100); }
.bg-hl-red-200 { background-color: var(--hl-red-200); }
.bg-hl-red-300 { background-color: var(--hl-red-300); }
.bg-hl-red-500 { background-color: var(--hl-red-500); }
.bg-hl-red-600 { background-color: var(--hl-red-600); }
.bg-hl-red-700 { background-color: var(--hl-red-700); }
.bg-hl-red-900 { background-color: var(--hl-red-900); }

/* Border colors */
.border-hl-blue-50 { border-color: var(--hl-blue-50); }
.border-hl-blue-100 { border-color: var(--hl-blue-100); }
.border-hl-blue-200 { border-color: var(--hl-blue-200); }
.border-hl-blue-300 { border-color: var(--hl-blue-300); }
.border-hl-blue-400 { border-color: var(--hl-blue-400); }
.border-hl-blue-500 { border-color: var(--hl-blue-500); }
.border-hl-blue-600 { border-color: var(--hl-blue-600); }
.border-hl-blue-700 { border-color: var(--hl-blue-700); }
.border-hl-blue-800 { border-color: var(--hl-blue-800); }
.border-hl-blue-900 { border-color: var(--hl-blue-900); }
.border-hl-blue-950 { border-color: var(--hl-blue-950); }

.border-hl-slate-50 { border-color: var(--hl-slate-50); }
.border-hl-slate-100 { border-color: var(--hl-slate-100); }
.border-hl-slate-200 { border-color: var(--hl-slate-200); }
.border-hl-slate-300 { border-color: var(--hl-slate-300); }
.border-hl-slate-400 { border-color: var(--hl-slate-400); }
.border-hl-slate-500 { border-color: var(--hl-slate-500); }
.border-hl-slate-600 { border-color: var(--hl-slate-600); }
.border-hl-slate-700 { border-color: var(--hl-slate-700); }
.border-hl-slate-800 { border-color: var(--hl-slate-800); }
.border-hl-slate-900 { border-color: var(--hl-slate-900); }
.border-hl-slate-950 { border-color: var(--hl-slate-950); }

.border-hl-orange-50 { border-color: var(--hl-orange-50); }
.border-hl-orange-100 { border-color: var(--hl-orange-100); }
.border-hl-orange-200 { border-color: var(--hl-orange-200); }
.border-hl-orange-300 { border-color: var(--hl-orange-300); }
.border-hl-orange-400 { border-color: var(--hl-orange-400); }
.border-hl-orange-500 { border-color: var(--hl-orange-500); }
.border-hl-orange-600 { border-color: var(--hl-orange-600); }
.border-hl-orange-700 { border-color: var(--hl-orange-700); }
.border-hl-orange-800 { border-color: var(--hl-orange-800); }
.border-hl-orange-900 { border-color: var(--hl-orange-900); }
.border-hl-orange-950 { border-color: var(--hl-orange-950); }

.border-hl-red-50 { border-color: var(--hl-red-50); }
.border-hl-red-100 { border-color: var(--hl-red-100); }
.border-hl-red-200 { border-color: var(--hl-red-200); }
.border-hl-red-300 { border-color: var(--hl-red-300); }
.border-hl-red-500 { border-color: var(--hl-red-500); }
.border-hl-red-600 { border-color: var(--hl-red-600); }
.border-hl-red-700 { border-color: var(--hl-red-700); }
.border-hl-red-900 { border-color: var(--hl-red-900); }

/* Subtle checkerboard for transparent image visibility */
.logo-checkerboard {
  background-color: #ffffff;
  background-image:
    linear-gradient(45deg, #e5e7eb 25%, transparent 25%),
    linear-gradient(-45deg, #e5e7eb 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e5e7eb 75%),
    linear-gradient(-45deg, transparent 75%, #e5e7eb 75%);
  background-size: 8px 8px;
  background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
}

/* optional dark theme hook for later */
.theme-dark {
  --color-bg: #0E1521;
  --color-surface: #121A27;
  --color-border: #223047;
  --color-text: #E6ECF5;
  --color-text-muted: #B5C0CC;
  --color-link: #7DBAFF;
  --color-link-hover: #A8D2FF;
}

/* ambient page backdrop */
.page-bg {
  background:
    radial-gradient(1200px 300px at 50% -100px, rgba(178, 219, 255, 0.45), transparent 60%),
    var(--hl-gray-50);
}

/* Checkbox styling to match Figma design */
.checkbox-styled {
  appearance: none;
  -webkit-appearance: none;
  border: 2px solid var(--hl-slate-300);
  border-radius: 4px;
  background-color: white;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  position: relative;
}

/* Default size (w-4 h-4 = 16px) */
.checkbox-styled.w-4,
.checkbox-styled.h-4 {
  width: 16px;
  height: 16px;
}

.checkbox-styled.w-4:checked,
.checkbox-styled.h-4:checked {
  background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14.3807 23.4129L24.7678 13.0258C25.1205 12.6731 25.1205 12.1012 24.7678 11.7484L23.4904 10.4711C23.1377 10.1184 22.5658 10.1184 22.213 10.4711L13.742 18.9421L9.78702 14.9872C9.43431 14.6345 8.8624 14.6345 8.50964 14.9872L7.23231 16.2645C6.8796 16.6172 6.8796 17.1891 7.23231 17.5419L13.1033 23.4128C13.456 23.7656 14.0279 23.7656 14.3807 23.4129Z' fill='white'/%3E%3C/svg%3E") !important;
  background-size: 12px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* Large size (w-5 h-5 = 20px) */
.checkbox-styled.w-5,
.checkbox-styled.h-5 {
  width: 20px;
  height: 20px;
}

.checkbox-styled.w-5:checked,
.checkbox-styled.h-5:checked {
  background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14.3807 23.4129L24.7678 13.0258C25.1205 12.6731 25.1205 12.1012 24.7678 11.7484L23.4904 10.4711C23.1377 10.1184 22.5658 10.1184 22.213 10.4711L13.742 18.9421L9.78702 14.9872C9.43431 14.6345 8.8624 14.6345 8.50964 14.9872L7.23231 16.2645C6.8796 16.6172 6.8796 17.1891 7.23231 17.5419L13.1033 23.4128C13.456 23.7656 14.0279 23.7656 14.3807 23.4129Z' fill='white'/%3E%3C/svg%3E") !important;
  background-size: 16px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

.checkbox-styled:hover:not(:disabled) {
  border-color: var(--hl-blue-500);
}

.checkbox-styled:checked {
  background-color: var(--hl-blue-500) !important;
  border-color: var(--hl-blue-500) !important;
}

.checkbox-styled:checked:hover:not(:disabled) {
  background-color: var(--hl-blue-600) !important;
  border-color: var(--hl-blue-600) !important;
}

.checkbox-styled:focus {
  outline: none;
}

.checkbox-styled:focus-visible {
  outline: 2px solid var(--hl-blue-500);
  outline-offset: 2px;
}

.checkbox-styled:disabled {
  background-color: white;
  border-color: var(--hl-slate-300);
  cursor: not-allowed;
  opacity: 0.6;
}

.checkbox-styled:disabled:checked {
  background-color: var(--hl-slate-300);
  border-color: var(--hl-slate-300);
}

/* Subtle shimmer for green gradient icon */
@keyframes green-icon-shimmer {
  0% { opacity: 0; transform: translateX(-100%); }
  50% { opacity: 1; }
  100% { opacity: 0; transform: translateX(100%); }
}

.green-icon-shimmer {
  position: relative;
  overflow: hidden;
}

.green-icon-shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 0%,
    transparent 40%,
    rgba(255, 255, 255, 0.12) 50%,
    transparent 60%,
    transparent 100%
  );
  animation: green-icon-shimmer 2s ease-in-out infinite;
  pointer-events: none;
}

/* Eye-catching shimmer for blue gradient icon containers (Investor Offer, List on the Market) */
@keyframes blue-icon-shimmer {
  0% { opacity: 0; transform: translateX(-100%) scale(1); }
  45% { opacity: 1; }
  55% { opacity: 1; }
  100% { opacity: 0; transform: translateX(100%) scale(1); }
}

.blue-icon-shimmer {
  position: relative;
  overflow: hidden;
}

.blue-icon-shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    110deg,
    transparent 0%,
    transparent 35%,
    rgba(255, 255, 255, 0.35) 50%,
    transparent 65%,
    transparent 100%
  );
  animation: blue-icon-shimmer 1.5s ease-in-out infinite;
  pointer-events: none;
}

/* How it works – scroll-triggered card animation (left to right, subtle) */
.how-it-works-card {
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity 0.65s ease-out, transform 0.65s ease-out;
}

#how-it-works-section.cards-in-view .how-it-works-card {
  opacity: 1;
  transform: translateX(0);
}

#how-it-works-section .how-it-works-card:nth-child(1) { transition-delay: 0ms; }
#how-it-works-section .how-it-works-card:nth-child(2) { transition-delay: 120ms; }
#how-it-works-section .how-it-works-card:nth-child(3) { transition-delay: 240ms; }

/* Hero background position: left on mobile (show more left), center on desktop */
.hero-bg {
  background-position: left center;
}
@media (min-width: 768px) {
  .hero-bg {
    background-position: center;
  }
}

/* Footer "Show more" / "Show less" toggle – text and chevron reflect open state */
.footer-show-more-details .footer-show-less-label {
  display: none;
}
.footer-show-more-details[open] .footer-show-more-label {
  display: none;
}
.footer-show-more-details[open] .footer-show-less-label {
  display: inline-flex;
}
.footer-show-more-details[open] .footer-details-chevron {
  transform: rotate(180deg);
}

/* ── County Card Hover ── */
.county-card-hover {
  transition: box-shadow 0.15s ease;
}
.county-card-hover:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}