/* ==========================================================================
   WIDGETIZER THEME - DESIGN SYSTEM
   ==========================================================================

   TABLE OF CONTENTS
   =================

    1. RESET
    2. DESIGN TOKENS
       2.1 Typography Scale
       2.2 Typography Weights & Line Heights
       2.3 Spacing Scale
       2.4 Border Tokens
       2.5 Container & Content Widths
       2.6 Transitions
    3. COLOR SYSTEM
    4. BASE ELEMENTS
    5. LAYOUT
       5.1 Widget Container
       5.2 Grid System
    6. SHARED: BUTTONS
    7. SHARED: ICON STYLES
    8. GLOBAL: SITE HEADER
    9. GLOBAL: HERO
   10. WIDGET: ICON CARD GRID
   11. WIDGET: CARD GRID
   12. WIDGET: COMMUNITY
   13. GLOBAL: SITE FOOTER
   14. SCROLL REVEAL ANIMATIONS
   15. UTILITIES

   ========================================================================== */

/* ==========================================================================
   1. RESET
   ========================================================================== */

html {
  font-size: 62.5%; /* 1rem = 10px */
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

/* ==========================================================================
   2. DESIGN TOKENS
   ========================================================================== */

:root {
  /* --------------------------------------------------------------------------
     2.1 Typography Scale (0.1rem = 1px)
     -------------------------------------------------------------------------- */

  --font-size-xs: 1.2rem; /* 12px */
  --font-size-sm: 1.4rem; /* 14px */
  --font-size-base: 1.6rem; /* 16px */
  --font-size-lg: 1.8rem; /* 18px */
  --font-size-xl: 2rem; /* 20px */
  --font-size-2xl: 2.4rem; /* 24px */
  --font-size-3xl: 2.8rem; /* 28px */
  --font-size-4xl: 3.2rem; /* 32px */
  --font-size-5xl: 3.6rem; /* 36px */
  --font-size-6xl: 4.4rem; /* 44px */

  --font-body: "inter-variable", sans-serif;
  --font-heading: "new-astro-soft", sans-serif;

  /* --------------------------------------------------------------------------
     2.2 Typography Weights & Line Heights
     -------------------------------------------------------------------------- */

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-tight: 1.1;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.65;

  /* --------------------------------------------------------------------------
     2.3 Spacing Scale (0.1rem = 1px, 8px rhythm)
     -------------------------------------------------------------------------- */

  --space-xs: 0.8rem; /* 8px */
  --space-sm: 1.2rem; /* 12px */
  --space-md: 1.6rem; /* 16px */
  --space-lg: 2.4rem; /* 24px */
  --space-xl: 3.2rem; /* 32px */
  --space-2xl: 4rem; /* 40px */
  --space-3xl: 4.8rem; /* 48px */
  --space-4xl: 6.4rem; /* 64px */
  --space-5xl: 8rem; /* 80px */
  --space-6xl: 9.6rem; /* 96px */

  /* --------------------------------------------------------------------------
     2.4 Border Tokens
     -------------------------------------------------------------------------- */

  --border-width-thin: 0.1rem; /* 1px */
  --border-width-medium: 0.2rem; /* 2px */

  /* --------------------------------------------------------------------------
     2.5 Container & Content Widths
     -------------------------------------------------------------------------- */

  --container-max-width: 120rem; /* 1200px */
  --page-gutter: clamp(2rem, 5vw, 4rem);

  /* --------------------------------------------------------------------------
     2.6 Transitions
     -------------------------------------------------------------------------- */

  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
}

/* ==========================================================================
   3. COLOR SYSTEM
   ========================================================================== */

:root {
  --site-canvas: var(--colors-standard_bg_primary, #ffffff);
  --site-surface: var(--colors-standard_bg_secondary, #f7f8fb);
  --site-panel: var(--colors-standard_bg_primary, #ffffff);
  --site-heading: var(--colors-standard_text_heading, #10172c);
  --site-body: var(--colors-standard_text_content, #4d5873);
  --site-muted: var(--colors-standard_text_muted, #7a859f);
  --site-border: var(--colors-standard_border, #d8ddea);
  --site-accent: var(--colors-standard_accent, #e60076);
  --site-accent-hover: var(--colors-standard_accent_hover, #c70066);
  --site-accent-soft: var(--colors-standard_accent_soft, #fde8f1);
}

.color-scheme-standard-accent {
  --site-canvas: var(--colors-standard_bg_secondary, #f7f8fb);
  --site-surface: var(--colors-standard_bg_primary, #ffffff);
}

.color-scheme-highlight {
  --site-canvas: var(--colors-highlight_bg_primary, #10172c);
  --site-surface: var(--colors-highlight_bg_secondary, #0a0f1c);
  --site-panel: var(--colors-highlight_bg_primary, #10172c);
  --site-heading: var(--colors-highlight_text_heading, #ffffff);
  --site-body: var(--colors-highlight_text_content, #e2e8f0);
  --site-muted: var(--colors-highlight_text_muted, #b0b8d0);
  --site-border: var(--colors-highlight_border, #1e293b);
  --site-accent: var(--colors-highlight_accent, #ff0083);
  --site-accent-hover: var(--colors-highlight_accent_hover, #e60076);
  --site-accent-soft: var(--colors-highlight_accent_soft, #33001a);
}

.color-scheme-highlight-accent {
  --site-canvas: var(--colors-highlight_bg_secondary, #0a0f1c);
  --site-surface: var(--colors-highlight_bg_primary, #10172c);
  --site-panel: var(--colors-highlight_bg_secondary, #0a0f1c);
  --site-heading: var(--colors-highlight_text_heading, #ffffff);
  --site-body: var(--colors-highlight_text_content, #e2e8f0);
  --site-muted: var(--colors-highlight_text_muted, #b0b8d0);
  --site-border: var(--colors-highlight_border, #1e293b);
  --site-accent: var(--colors-highlight_accent, #ff0083);
  --site-accent-hover: var(--colors-highlight_accent_hover, #e60076);
  --site-accent-soft: var(--colors-highlight_accent_soft, #33001a);
}

/* ==========================================================================
   4. BASE ELEMENTS
   ========================================================================== */

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--site-canvas);
  color: var(--site-body);
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  font-variation-settings:
    "slnt" 0,
    "wght" 400;
  line-height: var(--line-height-relaxed);
}

html {
  scroll-behavior: smooth;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-semibold);
  color: var(--site-heading);
  line-height: var(--line-height-tight);
  letter-spacing: 0;
}

h3,
h4,
h5,
h6 {
  font-family: var(--font-body);
  font-weight: var(--font-weight-semibold);
  font-variation-settings:
    "wght" 600,
    "slnt" 0;
}

strong,
b {
  font-weight: var(--font-weight-bold);
}

/* ==========================================================================
   5. LAYOUT
   ========================================================================== */

/* --------------------------------------------------------------------------
   5.1 Widget Container
   -------------------------------------------------------------------------- */

.main-content {
  flex: 1;
}

.container {
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

.widget {
  padding-inline: var(--page-gutter);
}

.widget-container {
  max-width: var(--container-max-width);
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   5.2 Grid System
   -------------------------------------------------------------------------- */

.widget-grid {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: 1fr;

  @media (min-width: 750px) {
    grid-template-columns: repeat(2, 1fr);
  }

  @media (min-width: 990px) {
    grid-template-columns: repeat(var(--grid-cols-desktop, 3), 1fr);
  }
}

/* ==========================================================================
   6. SHARED: BUTTONS
   ========================================================================== */

.widget-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3.6rem;
  padding: 0.6rem 1.6rem;
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  font-variation-settings:
    "slnt" 0,
    "wght" 600;
  border: var(--border-width-medium) solid transparent;
  border-radius: 5rem;
  corner-shape: squircle;
  cursor: pointer;
  text-decoration: none;
  letter-spacing: 0;
  transition:
    background-color var(--transition-normal),
    border-color var(--transition-normal),
    color var(--transition-normal);

  & > svg {
    flex-shrink: 0;
  }

  & > svg:last-child {
    transition: transform var(--transition-normal);
  }

  &:hover > svg:last-child:not(:first-child) {
    transform: translateX(3px);
  }
}

.widget-button-primary {
  background: var(--site-accent);
  color: #ffffff;
  border-color: var(--site-accent);

  &:hover {
    background: var(--site-accent-hover);
    border-color: var(--site-accent-hover);
    color: #ffffff;
  }
}

.widget-button-secondary {
  background: transparent;
  color: var(--site-heading);
  border-color: var(--site-border);

  &:hover {
    border-color: var(--site-heading);
    color: var(--site-heading);
  }
}

/* On highlight backgrounds */
.color-scheme-highlight .widget-button-secondary,
.color-scheme-highlight-accent .widget-button-secondary {
  color: var(--site-heading);
  border-color: color-mix(in srgb, var(--site-heading) 30%, transparent);

  &:hover {
    border-color: var(--site-heading);
    color: var(--site-heading);
  }
}

/* OS-detected platform match highlight */
.widget-button.widget-button--platform-match {
  border-color: var(--site-accent);
}

.widget-button-medium {
  min-height: 4.4rem;
  padding: 1rem 2.4rem;
  font-size: var(--font-size-base);
}

.widget-button-large {
  min-height: 5.2rem;
  padding: 1.4rem 3.2rem;
  font-size: var(--font-size-lg);
}

/* ==========================================================================
   7. SHARED: ICON STYLES
   ========================================================================== */

/* Plain — bare icon, no container */
.w-icon-plain {
  flex-shrink: 0;

  & > svg {
    color: var(--site-accent);
    width: var(--w-icon-size);
    height: var(--w-icon-size);
  }

  &.w-icon-sm {
    --w-icon-size: 1.8rem;
  }
  &.w-icon-md {
    --w-icon-size: 2.4rem;
  }
  &.w-icon-lg {
    --w-icon-size: 3.2rem;
  }
  &.w-icon-xl {
    --w-icon-size: 4.2rem;
  }
}

/* Outline & Filled — container with icon centered inside */
.w-icon-outline,
.w-icon-filled {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  & > svg {
    width: 50%;
    height: 50%;
  }

  /* Container sizes */
  &.w-icon-sm {
    width: 2.8rem;
    height: 2.8rem;
  }
  &.w-icon-md {
    width: 3.6rem;
    height: 3.6rem;
  }
  &.w-icon-lg {
    width: 4.8rem;
    height: 4.8rem;
  }
  &.w-icon-xl {
    width: 6rem;
    height: 6rem;
  }

  /* Shape */
  &.w-icon-sharp {
    border-radius: 0;
  }
  &.w-icon-rounded {
    border-radius: 0.6rem;
  }
  &.w-icon-circle {
    border-radius: 50%;
  }
}

.w-icon-outline {
  border: var(--border-width-medium) solid var(--site-border);

  & > svg {
    color: var(--site-accent);
  }
}

.w-icon-filled {
  background-color: var(--site-accent-soft);

  & > svg {
    color: var(--site-accent);
  }
}

/* ==========================================================================
   8. GLOBAL: SITE HEADER
   ========================================================================== */

.widget-site-header {
  background: var(--site-canvas);
  color: var(--site-body);
  padding-block: var(--space-md);
  padding-inline: var(--page-gutter);
  border-block-end: var(--border-width-thin) solid color-mix(in srgb, var(--site-heading) 8%, transparent);

  &.header-sticky {
    position: sticky;
    top: 0;
    z-index: 999;
    transition: box-shadow 0.2s ease-in-out;

    &.header-scrolled {
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
    }
  }

  & .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: var(--container-max-width);
    margin-inline: auto;
    min-height: 5rem;
  }

  & .header-branding {
    display: flex;
    align-items: center;
    z-index: 1001;
  }

  & .header-logo {
    display: block;
    text-decoration: none;
    color: var(--site-heading);
  }

  & .header-logo-text {
    font-family: var(--font-heading);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    line-height: 1;
  }

  & .header-logo-image {
    display: block;
    width: auto;
    object-fit: contain;
  }

  & .header-logo-placeholder {
    width: 12rem;
    aspect-ratio: 3 / 1;
    border: var(--border-width-thin) solid color-mix(in srgb, var(--site-heading) 18%, transparent);
    background: color-mix(in srgb, var(--site-heading) 4%, transparent);
  }

  & .header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    z-index: 1001;
  }

  & .menu-toggle {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 4.4rem;
    height: 4.4rem;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--site-heading);

    & .icon-menu,
    & .icon-close {
      width: 2.4rem;
      height: 2.4rem;
      display: block;
    }

    & .icon-close {
      display: none;
    }

    &[aria-expanded="true"] {
      & .icon-menu {
        display: none;
      }
      & .icon-close {
        display: block;
      }
    }
  }

  & .header-nav {
    position: fixed;
    inset-block-start: 0;
    inset-inline-end: -32rem;
    width: 32rem;
    max-width: 85vw;
    height: 100vh;
    background-color: var(--site-canvas);
    padding-block-start: var(--space-md);
    padding-inline: var(--space-lg);
    overflow-y: auto;
    transition:
      inset-inline-end var(--transition-normal),
      box-shadow var(--transition-normal);
    z-index: 1000;

    &.nav-open {
      inset-inline-end: 0;
      box-shadow: -8px 0 24px rgba(0, 0, 0, 0.15);
    }
  }

  & .nav-close {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-block-end: var(--space-xl);
    padding-block-end: var(--space-md);
    border-block-end: var(--border-width-thin) solid var(--site-border);

    & .nav-close-title {
      font-size: var(--font-size-lg);
      font-weight: var(--font-weight-semibold);
      color: var(--site-heading);
    }

    & .nav-close-btn {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 4rem;
      height: 4rem;
      padding: 0;
      background: transparent;
      border: none;
      cursor: pointer;
      color: var(--site-body);

      & svg {
        width: 2.4rem;
        height: 2.4rem;
      }
    }
  }

  & .nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  & .nav-item {
    & > a {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      padding-block: 1.4rem;
      text-decoration: none;
      color: var(--site-body);
      font-size: var(--font-size-lg);
      transition: color var(--transition-fast);

      &:hover {
        color: var(--site-accent);
      }
    }

    &.has-submenu {
      display: flex;
      flex-wrap: wrap;
      align-items: center;

      & > a {
        flex: 1;
        min-width: 0;
      }
    }

    & .submenu-toggle {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 4.4rem;
      height: 4.4rem;
      padding: 0;
      flex-shrink: 0;
      background: transparent;
      border: none;
      border-inline-start: var(--border-width-thin) solid var(--site-border);
      cursor: pointer;
      color: var(--site-body);
      transition: background-color var(--transition-fast);

      &:hover {
        background-color: var(--site-surface);
      }

      & svg {
        width: 2rem;
        height: 2rem;
        transition: transform var(--transition-normal);
      }
    }

    &.submenu-open > .submenu-toggle svg {
      transform: rotate(90deg);
    }
  }

  & .nav-submenu {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-normal);

    &.submenu-open {
      max-height: 1000px;
    }

    & .nav-item {
      padding-inline-start: var(--space-lg);

      & > a {
        font-size: var(--font-size-sm);
        padding-block: 1.2rem;
      }
    }

    & .nav-submenu .nav-item {
      padding-inline-start: var(--space-lg);

      & > a {
        font-size: var(--font-size-sm);
      }
    }
  }

  & .mobile-cta {
    margin-block-start: var(--space-xl);
    width: 100%;
    text-align: center;
  }

  & .desktop-cta {
    display: none;
  }

  & .header-end {
    display: none;
    align-items: center;
    gap: var(--space-md);
  }

  & .header-social {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
  }

  & .header-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 50%;
    color: var(--site-heading);
    border: 2px solid transparent;
    background: transparent;
    transition:
      background-color var(--transition-fast),
      border-color var(--transition-fast),
      color var(--transition-fast);

    & svg {
      width: 1.6rem;
      height: 1.6rem;
    }

    &:hover {
      border-color: var(--site-heading);
      background: color-mix(in srgb, var(--site-heading) 8%, transparent);
    }
  }

  & .header-github-badge {
    display: flex;
    align-items: center;
    opacity: 0.8;
    transition: opacity var(--transition-fast);

    &:hover {
      opacity: 1;
    }

    & img {
      display: block;
      border-radius: 0.4rem;
    }
  }

  /* ---- Desktop (990px+) ---- */

  @media (min-width: 990px) {
    & .header-actions {
      flex: 1;
      justify-content: flex-end;
    }

    & .menu-toggle {
      display: none;
    }
    & .nav-close {
      display: none;
    }

    & .header-nav {
      position: static;
      width: auto;
      height: auto;
      display: flex;
      align-items: center;
      background-color: transparent;
      padding: 0;
      overflow: visible;
      transform: none;
      box-shadow: none;
    }

    & .nav-list {
      display: flex;
      gap: var(--space-xs);
      align-items: center;
    }

    & .nav-item {
      position: relative;

      & > a {
        display: inline-flex;
        align-items: center;
        min-height: 3.6rem;
        padding: 0.6rem 1.6rem;
        font-size: var(--font-size-sm);
        color: color-mix(in srgb, var(--site-heading) 78%, transparent);
        border: var(--border-width-medium) solid transparent;
        border-radius: 5rem;
        corner-shape: squircle;
        transition:
          color var(--transition-normal),
          border-color var(--transition-normal);

        &:hover {
          color: var(--site-heading);
          border-color: color-mix(in srgb, var(--site-heading) 30%, transparent);
        }
      }

      & .submenu-toggle {
        display: none;
      }

      &.has-submenu > a::after {
        content: "";
        display: inline-block;
        width: 1.4rem;
        height: 1.4rem;
        margin-inline-start: var(--space-xs);
        flex-shrink: 0;
        background-color: currentColor;
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E");
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: contain;
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E");
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        -webkit-mask-size: contain;
      }

      &:hover > .nav-submenu,
      &:focus-within > .nav-submenu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
      }
    }

    & .nav-submenu {
      position: absolute;
      inset-block-start: calc(100% - 0.4rem);
      inset-inline-start: 0;
      min-width: 22rem;
      background-color: var(--site-canvas);
      border: var(--border-width-thin) solid var(--site-border);
      border-radius: 0.6rem;
      max-height: none;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-0.5rem);
      transition:
        opacity var(--transition-fast),
        visibility var(--transition-fast),
        transform var(--transition-fast);
      overflow: visible;
      padding-block: var(--space-xs);
      padding-inline: 0;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);

      & .nav-item {
        position: static;
        padding: 0;

        & > a {
          padding-block: 1.2rem;
          padding-inline: var(--space-md);
          font-size: var(--font-size-sm);
          color: var(--site-body);
          border-radius: 0;

          &:hover {
            background-color: var(--site-surface);
            color: var(--site-heading);
          }
        }

        &.has-submenu {
          position: relative;
        }

        &.has-submenu > a::after {
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6l-6 6'/%3E%3C/svg%3E");
          -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6l-6 6'/%3E%3C/svg%3E");
        }
      }

      & .nav-submenu {
        position: absolute;
        inset-block-start: -0.8rem;
        inset-inline-start: calc(100% - 0.4rem);
        min-width: 22rem;
        background-color: var(--site-canvas);
        border: var(--border-width-thin) solid var(--site-border);
        border-radius: 0.6rem;
        padding-block: var(--space-xs);
        padding-inline: 0;
        max-height: none;
        opacity: 0;
        visibility: hidden;
        transform: translateX(-0.5rem);
        transition:
          opacity var(--transition-fast),
          visibility var(--transition-fast),
          transform var(--transition-fast);

        & .nav-item {
          padding: 0;
        }

        &.submenu-flip {
          inset-inline-start: auto;
          inset-inline-end: calc(100% - 0.4rem);
          transform: translateX(0.5rem);
        }
      }

      &:hover > .nav-submenu,
      &:focus-within > .nav-submenu {
        opacity: 1;
        visibility: visible;
        transform: translateX(0);
      }

      &:has(> .nav-submenu.submenu-flip) > a::after {
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6l-6 6l6 6'/%3E%3C/svg%3E");
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6l-6 6l6 6'/%3E%3C/svg%3E");
      }
    }

    & .mobile-cta {
      display: none;
    }
    & .desktop-cta {
      display: inline-block;
    }
    & .header-end {
      display: flex;
    }
  }
}

/* ==========================================================================
   9. GLOBAL: HERO
   ========================================================================== */

/* Responsive heading scale */
.heading--lg {
  font-size: clamp(1.8rem, 2.2vw, 2rem);
}
.heading--xl {
  font-size: clamp(2rem, 2.5vw, 2.4rem);
}
.heading--2xl {
  font-size: clamp(2.2rem, 3vw, 2.8rem);
}
.heading--3xl {
  font-size: clamp(2.4rem, 3.5vw, 3.2rem);
}
.heading--4xl {
  font-size: clamp(2.6rem, 4.2vw, 3.6rem);
}
.heading--5xl {
  font-size: clamp(2.8rem, 5vw, 4.4rem);
}
.heading--6xl {
  font-size: clamp(3.2rem, 6vw, 5.4rem);
}
.heading--7xl {
  font-size: clamp(3.6rem, 6.5vw, 6.4rem);
}
.heading--8xl {
  font-size: clamp(4rem, 7vw, 7.6rem);
}
.heading--9xl {
  font-size: clamp(4.4rem, 8vw, 9rem);
}

@media (max-width: 749px) {
  .heading--6xl {
    font-size: clamp(2.8rem, 8vw, 3.6rem);
  }
  .heading--7xl {
    font-size: clamp(3rem, 9vw, 4rem);
  }
  .heading--8xl {
    font-size: clamp(3.2rem, 10vw, 4.4rem);
  }
  .heading--9xl {
    font-size: clamp(3.4rem, 11vw, 5rem);
  }
}

.widget-hero {
  position: relative;
  background: var(--site-canvas);
  color: var(--site-body);
  padding-inline: var(--page-gutter);
  overflow: hidden;
}

.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  --fill: var(--site-heading);
  --accent: var(--site-accent);
}

.hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-block: clamp(4rem, 8vw, 8rem) 0;
}

.hero__copy {
  text-align: center;
  max-width: 72rem;
  margin-inline: auto;
  padding-block-end: clamp(3rem, 6vw, 6rem);

  & > * + * {
    margin-block-start: var(--space-lg);
  }
  & > .hero__title {
    margin-block-start: var(--space-md);
  }
  & > .hero__text + .hero__title {
    margin-block-start: var(--space-md);
  }
  & > .hero__title + .hero__text {
    margin-block-start: var(--space-xl);
  }
  & > .hero__actions {
    margin-block-start: var(--space-3xl);
  }
}

.hero__title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--font-weight-semibold);
  font-style: normal;
  line-height: 1.05;
  letter-spacing: 0;
  color: var(--site-heading);
}

.hero__text {
  margin: 0;
  line-height: var(--line-height-relaxed);
}

.hero__text--sm {
  font-size: var(--font-size-sm);
}
.hero__text--base {
  font-size: var(--font-size-base);
}
.hero__text--lg {
  font-size: var(--font-size-lg);
}

.hero__text--uppercase {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: var(--font-weight-semibold);
}

.hero__text--muted {
  color: var(--site-muted);
}

.hero__text a {
  color: var(--site-accent);
  text-decoration: none;
  transition: text-decoration-color var(--transition-fast);

  &:hover {
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md);
  margin-block-end: var(--space-sm);
}

.hero__media {
  width: 100%;
}

.hero__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: var(--border-width-thin) solid color-mix(in srgb, var(--site-heading) 12%, transparent);
  border-block-end: none;
  border-radius: 0.8rem 0.8rem 0 0;
  background: color-mix(in srgb, var(--site-canvas) 80%, black);
}

.hero__video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: var(--border-width-thin) solid color-mix(in srgb, var(--site-heading) 12%, transparent);
  border-block-end: none;
  border-radius: 0.8rem 0.8rem 0 0;
  overflow: hidden;
  background: color-mix(in srgb, var(--site-canvas) 80%, black);
}

.hero__video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.hero__placeholder {
  background: color-mix(in srgb, var(--site-canvas) 80%, black);
}

/* ==========================================================================
   10. WIDGET: ICON CARD GRID
   ========================================================================== */

.widget-type-icon-card-grid {
  padding-block: var(--space-5xl);
  padding-inline: var(--page-gutter);
  background: var(--site-canvas);
  color: var(--site-body);

  &.spacing-top-none {
    padding-block-start: 0;
  }
  &.spacing-bottom-none {
    padding-block-end: 0;
  }
}

.icg-header {
  text-align: center;
  max-width: 64rem;
  margin-inline: auto;
  margin-block-end: var(--space-3xl);

  &.icg-header--start {
    text-align: start;
    margin-inline: 0;
  }
}

.icg-eyebrow {
  display: inline-block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  font-variation-settings:
    "slnt" 0,
    "wght" 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--site-accent);
  margin-block-end: var(--space-sm);
}

.icg-headline {
  font-size: clamp(2.4rem, 3.5vw, 3.2rem);
  line-height: var(--line-height-tight);
}

.icg-description {
  margin-block-start: var(--space-md);
  font-size: var(--font-size-lg);
  color: var(--site-muted);
  line-height: var(--line-height-relaxed);
}

.icg-grid {
  gap: var(--space-lg);
}

.icg-card {
  display: flex;
  background: var(--site-panel);
  border: var(--border-width-thin) solid var(--site-border);
  border-radius: 1.2rem;
  corner-shape: squircle;
  transition: all 0.2s ease-out;

  &:hover {
    border-color: color-mix(in srgb, var(--site-border) 40%, var(--site-heading));
    box-shadow: 0 8px 30px color-mix(in srgb, var(--site-heading) 10%, transparent);
    transform: translateY(-4px);
  }

  .card-layout-flat & {
    background: transparent;
    border-color: transparent;
    border-radius: 0;

    &:hover {
      border-color: transparent;
      box-shadow: none;
    }
  }
}

.icg-card-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-xl);
  width: 100%;

  &.icg-card-content--center {
    align-items: center;
    text-align: center;
  }

  .card-layout-flat & {
    padding: var(--space-md) 0;
  }
}

.icg-icon {
  flex-shrink: 0;
}

.icg-card-title {
  font-size: var(--font-size-xl);
  line-height: var(--line-height-tight);
}

.icg-card-body {
  font-size: var(--font-size-sm);
  color: var(--site-muted);
  line-height: var(--line-height-relaxed);

  & p {
    margin: 0;
  }
  & p + p {
    margin-block-start: var(--space-sm);
  }
}

.icg-card-footer {
  margin-block-start: auto;
  padding-block-start: var(--space-xs);
}

.icg-card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  font-variation-settings:
    "slnt" 0,
    "wght" 600;
  color: var(--site-accent);
  transition: gap var(--transition-normal);

  &:hover {
    gap: 0.8rem;
  }
}

.icg-card-link-arrow {
  flex-shrink: 0;
  transition: transform var(--transition-normal);
}

/* ==========================================================================
   11. WIDGET: CARD GRID
   ========================================================================== */

.widget-type-card-grid {
  padding-block: var(--space-5xl);
  padding-inline: var(--page-gutter);
  background: var(--site-canvas);
  color: var(--site-body);

  &.spacing-top-none {
    padding-block-start: 0;
  }
  &.spacing-bottom-none {
    padding-block-end: 0;
  }
}

.cg-header {
  text-align: center;
  max-width: 64rem;
  margin-inline: auto;
  margin-block-end: var(--space-3xl);

  &.cg-header--start {
    text-align: start;
    margin-inline: 0;
    max-width: none;
  }

  &.cg-header--split {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-xl);

    & .cg-header-text {
      flex: 1;
      min-width: 0;
    }

    & .cg-header-action {
      flex-shrink: 0;
    }
  }
}

.cg-header-action {
  margin-block-start: var(--space-lg);
}

.cg-eyebrow {
  display: inline-block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  font-variation-settings:
    "slnt" 0,
    "wght" 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--site-accent);
  margin-block-end: var(--space-sm);
}

.cg-headline {
  font-size: clamp(2.4rem, 3.5vw, 3.2rem);
  line-height: var(--line-height-tight);
}

.cg-description {
  margin-block-start: var(--space-md);
  font-size: var(--font-size-lg);
  color: var(--site-muted);
  line-height: var(--line-height-relaxed);
}

.cg-grid {
  gap: var(--space-lg);
}

.cg-card {
  display: flex;
  flex-direction: column;
  background: var(--site-panel);
  border: var(--border-width-thin) solid var(--site-border);
  border-radius: 1.2rem;
  corner-shape: squircle;
  overflow: hidden;
  transition: all 0.2s ease-out;

  &:hover {
    border-color: color-mix(in srgb, var(--site-border) 40%, var(--site-heading));
    box-shadow: 0 8px 30px color-mix(in srgb, var(--site-heading) 10%, transparent);
    transform: translateY(-4px);
  }

  .card-layout-flat & {
    background: transparent;
    border-color: transparent;
    border-radius: 0;
    overflow: visible;

    &:hover {
      border-color: transparent;
      box-shadow: none;
    }
  }

  .cg-image-bottom & {
    flex-direction: column-reverse;
  }
}

.cg-card-image {
  width: 100%;
  height: auto;
  aspect-ratio: var(--cg-image-ratio, 4 / 3);
  object-fit: cover;
  display: block;

  .card-layout-flat & {
    border-radius: 0.8rem;
  }
}

.cg-card-image-link {
  display: block;
  text-decoration: none;
  overflow: hidden;

  & .cg-card-image {
    transition: transform var(--transition-normal);
  }

  &:hover .cg-card-image {
    transform: scale(1.03);
  }

  .card-layout-flat & {
    border-radius: 0.8rem;
  }
}

.cg-card-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-xl);
  width: 100%;

  &.cg-card-content--center {
    align-items: center;
    text-align: center;
  }

  .card-layout-flat & {
    padding: var(--space-md) 0;
  }
}

.cg-card-title {
  font-size: var(--font-size-xl);
  line-height: var(--line-height-tight);
}

.cg-card-body {
  font-size: var(--font-size-sm);
  color: var(--site-muted);
  line-height: var(--line-height-relaxed);
  text-wrap: balance;

  & p {
    margin: 0;
  }
  & p + p {
    margin-block-start: var(--space-sm);
  }
}

.cg-card-footer {
  margin-block-start: auto;
  padding-block-start: var(--space-xs);
}

.cg-card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 3.6rem;
  padding: 0.6rem 1.6rem;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  font-variation-settings:
    "slnt" 0,
    "wght" 600;
  color: var(--site-heading);
  background: transparent;
  border: var(--border-width-medium) solid var(--site-border);
  border-radius: 5rem;
  corner-shape: squircle;
  text-decoration: none;
  transition:
    gap var(--transition-normal),
    border-color var(--transition-normal),
    color var(--transition-normal),
    background-color var(--transition-normal);

  &:hover {
    gap: 0.8rem;
    border-color: var(--site-heading);
    color: var(--site-heading);
  }
}

.color-scheme-highlight .cg-card-link,
.color-scheme-highlight-accent .cg-card-link {
  color: var(--site-heading);
  border-color: color-mix(in srgb, var(--site-heading) 30%, transparent);

  &:hover {
    border-color: var(--site-heading);
    color: var(--site-heading);
  }
}

.cg-card-link-arrow {
  flex-shrink: 0;
  transition: transform var(--transition-normal);
}

/* ==========================================================================
   12. WIDGET: COMMUNITY
   ========================================================================== */

.widget-type-community {
  padding-block: var(--space-5xl);
  padding-inline: var(--page-gutter);
  background: var(--site-canvas);
  color: var(--site-body);

  &.spacing-top-none {
    padding-block-start: 0;
  }
  &.spacing-bottom-none {
    padding-block-end: 0;
  }
}

.cm-grid {
  display: grid;
  gap: var(--space-3xl);
  grid-template-columns: 1fr;

  @media (min-width: 750px) {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5xl);
  }
}

.cm-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.cm-title {
  font-size: var(--font-size-2xl);
  line-height: var(--line-height-tight);
}

.cm-body {
  font-size: var(--font-size-base);
  color: var(--site-muted);
  line-height: var(--line-height-relaxed);

  & p {
    margin: 0;
  }
  & p + p {
    margin-block-start: var(--space-sm);
  }
}

.cm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-block-start: var(--space-sm);
}

/* ---- Newsletter airmail border ---- */

.cm-column--newsletter {
  position: relative;
  padding: var(--space-xl);
  border-radius: 1.2rem;
  corner-shape: squircle;
  overflow: hidden;
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.08),
    0 1px 4px rgba(0, 0, 0, 0.04);

  &::before {
    content: "";
    position: absolute;
    inset: -50%;
    width: 200%;
    height: 200%;
    background: repeating-linear-gradient(
      -45deg,
      var(--site-accent) 0 8px,
      transparent 8px 14px,
      var(--site-canvas) 14px 19px,
      transparent 19px 24px
    );
    animation: cm-airmail 4s linear infinite;
    z-index: 0;
  }

  &::after {
    content: "";
    position: absolute;
    inset: 6px;
    background: var(--site-canvas);
    border-radius: calc(1.2rem - 6px);
    z-index: 0;
  }

  & > * {
    position: relative;
    z-index: 1;
  }
}

@keyframes cm-airmail {
  to {
    transform: translate(33.94px, 0);
  }
}

/* ---- Newsletter embed ---- */

.cm-embed {
  margin-block-start: var(--space-sm);

  /*
   * Brevo's main.js injects sib-styles.css which fights our styles.
   * Using !important on overrides that sib-styles.css targets.
   */

  /* Kill all Brevo container chrome */
  & .sib-form,
  & .sib-form-container,
  & #sib-container {
    all: unset !important;
    display: block !important;
    font-family: var(--font-body) !important;
    text-align: left !important;
    max-width: none !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
  }

  /* Hide Brevo's text blocks and spec labels */
  & .sib-text-form-block,
  & .entry__specification {
    display: none !important;
  }

  /* Hide honeypot */
  & .input--hidden {
    display: none !important;
  }

  /* ---- Label ---- */

  & .entry__label {
    display: block !important;
    font-family: var(--font-body) !important;
    font-size: var(--font-size-sm) !important;
    font-weight: var(--font-weight-medium) !important;
    color: var(--site-muted) !important;
    margin-block-end: var(--space-sm) !important;
    text-align: left !important;
  }

  /* ---- Input + button row ---- */

  & .cm-form-row {
    display: flex !important;
    flex-direction: column;
    gap: var(--space-sm);

    @media (min-width: 480px) {
      flex-direction: row;
      align-items: flex-start;
    }

    /* Input wrapper fills available space */
    & > .sib-input,
    & > .entry__field {
      flex: 1 !important;
      min-width: 0 !important;
    }

    /* Button wrapper */
    & > .sib-form-block:not(.sib-input) {
      display: flex !important;
    }

    /* Flatten all Brevo nesting */
    & .form__entry,
    & .form__label-row,
    & .entry__field {
      display: flex !important;
      flex: 1 !important;
    }

    /* ---- Email input ---- */

    & .entry__field input {
      width: 100% !important;
      height: 4.4rem !important;
      font-family: var(--font-body) !important;
      font-size: var(--font-size-base) !important;
      color: var(--site-heading) !important;
      background: var(--site-canvas) !important;
      border: var(--border-width-thin) solid var(--site-border) !important;
      border-radius: 5rem !important;
      corner-shape: squircle;
      padding: 0 1.4rem !important;
      transition:
        border-color var(--transition-normal),
        box-shadow var(--transition-normal);

      &::placeholder {
        color: color-mix(in srgb, var(--site-muted) 60%, transparent) !important;
        font-family: var(--font-body) !important;
      }

      &:focus {
        outline: none !important;
        border-color: var(--site-accent) !important;
        box-shadow: 0 0 0 3px var(--site-accent-soft) !important;
      }
    }

    /* Validation error under input */
    & .entry__error {
      display: none !important;

      &:not(:empty) {
        display: block !important;
        font-family: var(--font-body) !important;
        font-size: var(--font-size-xs) !important;
        color: #991b1b !important;
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        margin-block-start: var(--space-xs) !important;
      }
    }

    /* ---- Submit button ---- */

    & .sib-form-block__button {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 0.5rem !important;
      height: 4.4rem !important;
      padding: 0 2.4rem !important;
      font-family: var(--font-body) !important;
      font-size: var(--font-size-sm) !important;
      font-weight: var(--font-weight-semibold) !important;
      color: var(--site-canvas) !important;
      background: var(--site-accent) !important;
      border: var(--border-width-medium) solid var(--site-accent) !important;
      border-radius: 5rem !important;
      corner-shape: squircle;
      cursor: pointer !important;
      white-space: nowrap !important;
      letter-spacing: 0 !important;
      text-align: center !important;
      transition:
        background-color var(--transition-normal),
        border-color var(--transition-normal);

      &:hover {
        background: var(--site-accent-hover) !important;
        border-color: var(--site-accent-hover) !important;
      }

      /* Hide loader SVG */
      & .sib-hide-loader-icon {
        display: none !important;
      }
    }
  }

  /* ---- Success / Error messages ---- */

  & .sib-form-message-panel {
    display: none !important;
    font-family: var(--font-body) !important;
    font-size: var(--font-size-sm) !important;
    padding: var(--space-sm) var(--space-md) !important;
    border-radius: 0.6rem !important;
    margin-block-end: var(--space-md) !important;
    max-width: none !important;
    align-items: center;
    gap: var(--space-xs);

    /* Brevo JS adds this class to show messages */
    &.sib-form-message-panel--active {
      display: flex !important;
    }

    & .sib-notification__icon {
      width: 1.4rem !important;
      height: 1.4rem !important;
      flex-shrink: 0;
    }

    & .sib-form-message-panel__text {
      display: flex !important;
      align-items: center;
      gap: var(--space-xs);
    }
  }

  & #error-message {
    color: #991b1b !important;
    background: #fef2f2 !important;
    border: var(--border-width-thin) solid #fecaca !important;

    & .sib-notification__icon {
      fill: #991b1b;
    }
  }

  & #success-message {
    color: #065f46 !important;
    background: #ecfdf5 !important;
    border: var(--border-width-thin) solid #a7f3d0 !important;

    & .sib-notification__icon {
      fill: #065f46;
    }
  }
}

/* ==========================================================================
   13. GLOBAL: SITE FOOTER
   ========================================================================== */

.site-footer {
  position: relative;
  background: var(--site-canvas);
  color: var(--site-body);
  padding-inline: var(--page-gutter);
  overflow: hidden;
}

.site-footer__inner {
  position: relative;
  z-index: 1;
  max-width: var(--container-max-width);
  margin-inline: auto;
}

/* ---- CTA section ---- */

.site-footer__cta {
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: 1fr;
  padding-block: var(--space-3xl);

  @media (min-width: 750px) {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--space-3xl);
  }
}

.site-footer__cta-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  text-align: center;

  @media (min-width: 750px) {
    text-align: left;
  }
}

.site-footer__title {
  font-size: var(--font-size-xl);
  line-height: var(--line-height-tight);
  color: var(--site-heading);
}

.site-footer__desc {
  color: var(--site-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);

  @media (min-width: 750px) {
    max-width: 70%;
  }

  & p {
    margin: 0;
  }
  & p + p {
    margin-block-start: var(--space-sm);
  }
}

.site-footer__cta-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}

.site-footer__buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
}

.site-footer__helper {
  font-size: var(--font-size-xs);
  color: var(--site-muted);
  text-align: center;

  & p {
    margin: 0;
  }

  & a {
    color: var(--site-accent);
    text-decoration: none;

    &:hover {
      text-decoration: underline;
      text-underline-offset: 0.2em;
    }
  }
}

/* ---- Bottom bar ---- */

.site-footer__bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-md) var(--space-2xl);
  padding-block: var(--space-lg);
  border-block-start: var(--border-width-thin) solid color-mix(in srgb, var(--site-heading) 12%, transparent);
  font-size: var(--font-size-xs);
  color: var(--site-muted);

  & p {
    margin: 0;
  }

  & a {
    color: var(--site-accent);
    text-decoration: none;

    &:hover {
      text-decoration: underline;
      text-underline-offset: 0.2em;
    }
  }
}

/* ==========================================================================
   14. SCROLL REVEAL ANIMATIONS
   ========================================================================== */

.reveal {
  opacity: 0;
  transition:
    opacity 0.6s ease-out,
    transform 0.6s ease-out;
  transition-delay: calc(var(--reveal-delay, 0) * 0.1s);
}

.reveal-up {
  transform: translateY(2rem);
}
.reveal-down {
  transform: translateY(-2rem);
}
.reveal-left {
  transform: translateX(2rem);
}
.reveal-right {
  transform: translateX(-2rem);
}
.reveal-scale {
  transform: scale(0.95);
}

.reveal.revealed {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   15. UTILITIES
   ========================================================================== */

.content-flow > * + * {
  margin-block-start: var(--space-md);
}

.visually-hidden {
  position: absolute;
  width: 0.1rem;
  height: 0.1rem;
  padding: 0;
  margin: -0.1rem;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  &:focus,
  &:focus-visible {
    position: absolute;
    inset-block-start: var(--space-sm);
    inset-inline-start: var(--space-sm);
    width: auto;
    height: auto;
    margin: 0;
    padding: var(--space-sm) var(--space-md);
    background: var(--site-canvas);
    color: var(--site-heading);
    clip: auto;
    white-space: normal;
    z-index: 9999;
    font-size: var(--font-size-sm);
  }
}