/* Self-hosted Google Fonts (latin subset) */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/playfair-display-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lexend';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/lexend-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lexend';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/lexend-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lexend';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/lexend-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/jost-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/jost-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/jost-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

      /* ═══════════════════════════════════════════════════════════════════════════
   SHEFFY — SYSTEM.CSS
   Design token declarations + utility classes.
   Source of truth: DESIGN-TOKEN-SPEC.md v1.0

   This file is DECLARATIONS ONLY.
   Page CSS files reference these tokens via var(--token-name).
   No hardcoded hex, pixel, or font values in page CSS. Ever.
   ═══════════════════════════════════════════════════════════════════════════ */

      /* ───────────────────────────────────────────────────────────────────────────
   LAYER 0: TOKEN DECLARATIONS
   ─────────────────────────────────────────────────────────────────────────── */

      :root {
        /* ── Primitives: Forest (primary brand) ── */
        --forest-950: #1e2b1e;
        --forest-900: #24332a;
        --forest-800: #2b3a2b;
        --forest-700: #3a4f3a;
        --forest-600: #4a664a;
        --forest-500: #5c7d5c;
        --forest-400: #7a9a7a;
        --forest-300: #9bb89b;
        --forest-200: #bdd4bd;
        --forest-100: #dee9de;
        --forest-50: #eff4ef;

        /* ── Primitives: Lime (accent — scarcest color) ── */
        --lime-950: #2d4016;
        --lime-900: #3d5520;
        --lime-800: #4e6b2a;
        --lime-700: #638535;
        --lime-600: #7aad40;
        --lime-500: #8bc34a;
        --lime-400: #9ccc65;
        --lime-300: #aed581;
        --lime-200: #c5e1a5;
        --lime-100: #dce7c8;
        --lime-50: #f1f8e9;

        /* ── Primitives: Stone (neutral) ── */
        --stone-950: #1a1a1a;
        --stone-900: #2a2a28;
        --stone-800: #444444;
        --stone-700: #666662;
        --stone-600: #888888;
        --stone-500: #aaaaaa;
        --stone-400: #bbbbbb;
        --stone-300: #c8d0c4;
        --stone-200: #e8ece4;
        --stone-100: #f6f3ec;
        --stone-50: #eee9df;
        --stone-0: #f5f4f0;

        /* ── Semantic: Feedback ── */
        --color-error: #c62828;
        --color-warning: #e68a00;
        --color-success: #2e7d32;

        /* ── Semantic: Surfaces ── */
        --color-surface-canvas: var(--stone-0);
        --color-surface-warm: var(--stone-50);
        --color-surface-raised: #ffffff;
        --color-surface-forest: var(--forest-950);
        --color-surface-forest-elevated: #2b3826;
        --color-surface-floating: rgba(255, 255, 255, 0.7);

        /* ── Semantic: Text on light surfaces ── */
        --color-text-display: var(--forest-800);
        --color-text-primary: var(--stone-950);
        --color-text-secondary: var(--stone-700);
        --color-text-tertiary: var(--stone-700);
        --color-text-overline: var(--lime-800);

        /* ── Semantic: Text on dark (forest) surfaces ── */
        --color-text-dark-primary: #ede9e0;
        --color-text-dark-secondary: #a8b0a0;
        --color-text-dark-overline: var(--lime-500);

        /* ── Semantic: Accents ── */
        --color-accent-primary: var(--forest-700);
        --color-accent-cta-start: var(--forest-800);
        --color-accent-cta-end: var(--lime-600);
        --color-accent-active: var(--lime-600);
        --color-accent-emphasis: var(--forest-700);

        /* ── Semantic: Borders ── */
        --color-border-subtle: var(--stone-200);
        --color-border-warm: var(--stone-300);
        --color-border-dark: var(--forest-800);

        /* ── Semantic: Dietary indicators ── */
        --color-diet-veg: #2e7d32;
        --color-diet-nonveg: #c62828;
        --color-diet-jain: #f57c00;
        --color-diet-vegan: #558b2f;

        /* ── Layout: Header height for sticky positioning ── */
        --header-height: 64px;

        /* ── Typography: Families ── */
        --font-display: 'Playfair Display', Georgia, serif;
        --font-heading: 'Lexend', ui-sans-serif, system-ui, sans-serif;
        --font-body: 'Jost', ui-sans-serif, system-ui, sans-serif;
        --font-mono: 'JetBrains Mono', 'Courier New', monospace;

        /* ── Typography: Scale ── */
        --text-display-hero: 72px;
        --text-display-lg: 48px;
        --text-display-md: 36px;
        --text-heading-lg: 28px;
        --text-heading-md: 22px;
        --text-body-lg: 18px;
        --text-body-md: 16px;
        --text-label: 14px;
        --text-overline: 12px;

        /* ── Typography: Weights (3 only) ── */
        --weight-regular: 400;
        --weight-medium: 500;
        --weight-semibold: 600;

        /* ── Reading Rhythm: Measure ── */
        --measure-body: 65ch;
        --measure-heading: 45ch;
        --measure-caption: 35ch;
        --measure-display: 25ch;

        /* ── Reading Rhythm: Paragraph spacing ── */
        --paragraph-spacing: 1.5em;

        /* ── Spacing: Fibonacci (fluid) ── */
        --space-4xs: 4px;
        --space-3xs: 8px;
        --space-2xs: 12px;
        --space-xs: clamp(16px, 2vw, 20px);
        --space-sm: clamp(24px, 3vw, 32px);
        --space-md: clamp(32px, 5vw, 52px);
        --space-lg: clamp(52px, 8vw, 84px);
        --space-xl: clamp(84px, 12vw, 136px);

        /* ── Spacing: Side padding ── */
        --side-padding: 40px;

        /* ── Border Radius ── */
        --radius-sm: 6px;
        --radius-md: 8px;
        --radius-lg: 12px;
        --radius-xl: 14px;
        --radius-2xl: 20px;
        --radius-full: 9999px;

        /* ── Opacity Scale ── */
        --opacity-ghost: 0.03;
        --opacity-whisper: 0.06;
        --opacity-hint: 0.1;
        --opacity-subtle: 0.2;
        --opacity-medium: 0.4;
        --opacity-strong: 0.6;
        --opacity-heavy: 0.8;
        --opacity-solid: 0.95;

        /* ── Backdrop Blur ── */
        --blur-subtle: 4px;
        --blur-medium: 16px;
        --blur-immersive: 40px;

        /* ── Elevation (forest-tinted — never gray) ── */
        --elevation-0: none;

        --elevation-1:
          0 1px 3px rgba(43, 58, 43, 0.15), 0 3px 8px rgba(43, 58, 43, 0.10),
          0 6px 16px rgba(43, 58, 43, 0.08);

        --elevation-2:
          0 2px 4px rgba(43, 58, 43, 0.18), 0 6px 16px rgba(43, 58, 43, 0.12),
          0 12px 32px rgba(43, 58, 43, 0.08), 0 16px 48px rgba(43, 58, 43, 0.05);

        --elevation-3:
          0 4px 8px rgba(43, 58, 43, 0.20), 0 10px 28px rgba(43, 58, 43, 0.14),
          0 20px 56px rgba(43, 58, 43, 0.10),
          0 28px 72px rgba(43, 58, 43, 0.06), 0 36px 92px rgba(43, 58, 43, 0.04);

        --elevation-recessed: inset 0 2px 4px rgba(43, 58, 43, 0.06);

        /* ── Motion: Easing ── */
        --ease-arrive: cubic-bezier(0.16, 1, 0.3, 1);
        --ease-settle: cubic-bezier(0.34, 1.56, 0.64, 1);
        --ease-hover: cubic-bezier(0.25, 0.1, 0.25, 1);
        --ease-press: cubic-bezier(0.4, 0, 0.2, 1);
        --ease-exit: cubic-bezier(0.4, 0, 1, 1);

        /* ── Motion: Duration ── */
        --duration-instant: 80ms;
        --duration-micro: 150ms;
        --duration-fast: 250ms;
        --duration-normal: 400ms;
        --duration-slow: 600ms;
        --duration-dramatic: 900ms;
        --duration-cinematic: 1400ms;

        /* ── Motion: Reveal pattern ── */
        --reveal-lift: 40px;
        --reveal-duration: var(--duration-dramatic);
        --reveal-stagger-step: 120ms;

        /* ── Material: Food photography ── */
        --food-filter: sepia(8%) saturate(110%) brightness(102%) contrast(95%);
        --food-vignette: radial-gradient(
          ellipse at 40% 35%,
          transparent 50%,
          rgba(30, 43, 30, 0.15) 100%
        );
      }

      /* ── Responsive: Side padding ── */
      @media (max-width: 768px) {
        :root {
          --side-padding: 20px;
        }
      }

      /* ───────────────────────────────────────────────────────────────────────────
   LAYER 1: RESET & BASE
   ─────────────────────────────────────────────────────────────────────────── */

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

      html {
        scroll-behavior: smooth;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        overflow-x: hidden;
      }

      body {
        font-family: var(--font-body);
        font-weight: var(--weight-regular);
        font-size: var(--text-body-lg);
        line-height: 1.6;
        background: var(--color-surface-canvas);
        color: var(--color-text-primary);
        overflow-x: hidden;
        text-rendering: optimizeLegibility;
      }

      /* ───────────────────────────────────────────────────────────────────────────
   LAYER 2: GRAIN OVERLAY
   ─────────────────────────────────────────────────────────────────────────── */

      body::after {
        content: '';
        position: fixed;
        inset: 0;
        filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E#g");
        opacity: var(--opacity-ghost);
        pointer-events: none;
        z-index: 9998;
        mix-blend-mode: overlay;
      }

      /* ───────────────────────────────────────────────────────────────────────────
   LAYER 3: SURFACES
   ─────────────────────────────────────────────────────────────────────────── */

      .surface-canvas {
        background: var(--color-surface-canvas);
        color: var(--color-text-primary);
      }

      .surface-warm {
        background: var(--color-surface-warm);
        color: var(--color-text-primary);
        position: relative;
      }
      .surface-warm::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        opacity: var(--opacity-ghost);
        mix-blend-mode: multiply;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
      }

      .surface-raised {
        background: var(--color-surface-raised);
        border: 1px solid var(--color-border-subtle);
        box-shadow: var(--elevation-1);
        border-radius: var(--radius-xl);
        color: var(--color-text-primary);
      }

      .surface-forest {
        background: var(--color-surface-forest);
        color: var(--color-text-dark-primary);
        position: relative;
      }
      .surface-forest::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        opacity: var(--opacity-whisper);
        mix-blend-mode: multiply;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
      }
      .surface-forest .overline {
        color: var(--color-text-dark-overline);
      }
      .surface-forest .body-lg,
      .surface-forest .body-md {
        color: var(--color-text-dark-secondary);
      }

      .surface-floating {
        background: var(--color-surface-floating);
        border-bottom: 1px solid var(--color-border-subtle);
        box-shadow: var(--elevation-3);
        color: var(--color-text-primary);
      }
      @media (min-width: 769px) {
        .surface-floating {
          backdrop-filter: blur(var(--blur-medium));
          -webkit-backdrop-filter: blur(var(--blur-medium));
        }
      }

      /* ───────────────────────────────────────────────────────────────────────────
   LAYER 4: INTENTS
   ─────────────────────────────────────────────────────────────────────────── */

      .intent-interactive {
        cursor: pointer;
        transition:
          transform var(--duration-normal) var(--ease-hover),
          box-shadow var(--duration-normal) var(--ease-hover),
          border-color var(--duration-fast) var(--ease-hover);
      }
      .intent-interactive:hover {
        transform: translateY(-2px);
        box-shadow: var(--elevation-2);
        border-color: var(--color-border-warm);
      }
      .intent-interactive:active {
        transform: translateY(0) scale(0.97);
        transition-duration: var(--duration-instant);
      }

      .intent-static {
        cursor: default;
      }

      /* ───────────────────────────────────────────────────────────────────────────
   LAYER 5: CONTAINERS
   ─────────────────────────────────────────────────────────────────────────── */

      .container-narrow {
        max-width: 720px;
        margin-left: auto;
        margin-right: auto;
        padding-left: var(--side-padding);
        padding-right: var(--side-padding);
      }

      .container-default {
        max-width: 1120px;
        margin-left: auto;
        margin-right: auto;
        padding-left: var(--side-padding);
        padding-right: var(--side-padding);
      }

      .container-wide {
        max-width: 1440px;
        margin-left: auto;
        margin-right: auto;
        padding-left: var(--side-padding);
        padding-right: var(--side-padding);
      }

      .container-full {
        width: 100%;
      }

      /* ───────────────────────────────────────────────────────────────────────────
   LAYER 6: CTA HIERARCHY
   ─────────────────────────────────────────────────────────────────────────── */

      .cta-primary,
      .cta-secondary,
      .cta-outline {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-3xs);
        font-family: var(--font-heading);
        font-weight: var(--weight-semibold);
        text-decoration: none;
        border: none;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        white-space: nowrap;
      }

      .cta-primary,
      .cta-secondary,
      .cta-outline {
        height: 44px;
        padding: 0 28px;
        font-size: var(--text-label);
        border-radius: var(--radius-sm);
      }
      .cta-primary.cta-lg,
      .cta-secondary.cta-lg,
      .cta-outline.cta-lg {
        height: 52px;
        padding: 0 36px;
        font-size: var(--text-body-md);
        border-radius: var(--radius-md);
      }

      .cta-primary {
        background: var(--lime-500);
        color: var(--forest-800);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.25),
          0 1px 3px rgba(139, 195, 74, 0.2);
        transition:
          background var(--duration-fast) var(--ease-hover),
          box-shadow var(--duration-fast) var(--ease-hover),
          transform var(--duration-instant) var(--ease-press);
      }
      .cta-primary:hover {
        background: var(--lime-400);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.3),
          0 2px 8px rgba(139, 195, 74, 0.3);
      }
      .cta-primary:active {
        transform: scale(0.97);
        transition-duration: var(--duration-instant);
      }

      .cta-primary::after {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(
          90deg,
          transparent,
          rgba(255, 255, 255, 0.2),
          transparent
        );
        transition: left 0.5s var(--ease-hover);
        pointer-events: none;
      }
      .cta-primary:hover::after {
        left: 100%;
      }

      .cta-secondary {
        background: var(--forest-800);
        color: #ffffff;
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.12),
          0 1px 3px rgba(43, 58, 43, 0.2);
        transition:
          background var(--duration-fast) var(--ease-hover),
          box-shadow var(--duration-fast) var(--ease-hover),
          transform var(--duration-instant) var(--ease-press);
      }
      .cta-secondary:hover {
        background: var(--forest-700);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.15),
          0 2px 8px rgba(43, 58, 43, 0.25);
      }
      .cta-secondary:active {
        transform: scale(0.97);
        transition-duration: var(--duration-instant);
      }

      .cta-outline {
        background: transparent;
        color: var(--forest-800);
        border: 1px solid var(--color-border-subtle);
        box-shadow: var(--elevation-1);
        transition:
          border-color var(--duration-fast) var(--ease-hover),
          background var(--duration-fast) var(--ease-hover),
          transform var(--duration-instant) var(--ease-press);
      }
      .cta-outline:hover {
        border-color: var(--color-border-warm);
        background: var(--stone-50);
      }
      .cta-outline:active {
        transform: scale(0.97);
        transition-duration: var(--duration-instant);
      }

      .cta-text {
        display: inline-flex;
        align-items: center;
        gap: var(--space-3xs);
        font-family: var(--font-heading);
        font-size: var(--text-label);
        font-weight: var(--weight-medium);
        color: var(--forest-800);
        text-decoration: none;
        cursor: pointer;
        background: none;
        border: none;
        padding: 0;
        transition: color var(--duration-fast) var(--ease-hover);
      }
      .cta-text::after {
        content: '\2192';
        transition: transform var(--duration-fast) var(--ease-hover);
      }
      .cta-text:hover {
        color: var(--forest-700);
      }
      .cta-text:hover::after {
        transform: translateX(4px);
      }

      .surface-forest .cta-outline {
        color: var(--color-text-dark-primary);
        border-color: rgba(255, 255, 255, 0.3);
        box-shadow: none;
      }
      .surface-forest .cta-outline:hover {
        border-color: rgba(255, 255, 255, 0.6);
        background: rgba(255, 255, 255, 0.05);
      }
      .surface-forest .cta-text {
        color: var(--color-text-dark-primary);
      }
      .surface-forest .cta-text:hover {
        color: #ffffff;
      }

      /* ───────────────────────────────────────────────────────────────────────────
   LAYER 7: TYPOGRAPHY
   ─────────────────────────────────────────────────────────────────────────── */

      .display {
        font-family: var(--font-display);
        font-size: clamp(42px, 5.5vw, 64px);
        font-weight: 700;
        line-height: 1.04;
        letter-spacing: -0.04em;
        max-width: var(--measure-display);
      }

      .h2 {
        font-family: var(--font-display);
        font-size: clamp(28px, 4vw, 40px);
        font-weight: 700;
        line-height: 1.1;
        letter-spacing: -0.04em;
        color: var(--color-text-primary);
        max-width: var(--measure-heading);
      }

      .h3 {
        font-family: var(--font-heading);
        font-size: var(--text-heading-md);
        font-weight: var(--weight-semibold);
        line-height: 1.25;
        letter-spacing: -0.015em;
        color: var(--color-text-primary);
        max-width: var(--measure-heading);
      }

      .body-lg {
        font-size: var(--text-body-lg);
        line-height: 1.65;
        letter-spacing: -0.005em;
        color: var(--color-text-secondary);
        max-width: var(--measure-body);
      }

      .body-md {
        font-size: var(--text-body-md);
        line-height: 1.6;
        color: var(--color-text-secondary);
        max-width: var(--measure-body);
      }

      .body-sm {
        font-size: 13px;
        line-height: 1.5;
        letter-spacing: 0.01em;
        color: var(--color-text-secondary);
        max-width: var(--measure-body);
      }

      .caption {
        font-family: var(--font-heading);
        font-size: 11px;
        font-weight: var(--weight-medium);
        line-height: 1.4;
        letter-spacing: 0.02em;
        text-transform: uppercase;
        color: var(--color-text-tertiary);
        max-width: var(--measure-caption);
      }

      .overline {
        font-family: var(--font-heading);
        font-size: var(--text-overline);
        font-weight: var(--weight-semibold);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--color-text-overline);
        display: flex;
        align-items: center;
        gap: 10px;
      }
      .overline::before {
        content: '';
        width: 28px;
        height: 2px;
        background: linear-gradient(
          90deg,
          var(--lime-500),
          rgba(139, 195, 74, 0.3)
        );
        border-radius: 1px;
        flex-shrink: 0;
      }

      .label {
        font-family: var(--font-heading);
        font-size: var(--text-label);
        font-weight: var(--weight-medium);
        line-height: 1.4;
      }

      .mono {
        font-family: var(--font-mono);
        font-size: var(--text-label);
        font-weight: var(--weight-regular);
        letter-spacing: -0.02em;
      }

      .body-lg + .body-lg,
      .body-md + .body-md,
      .body-sm + .body-sm {
        margin-top: var(--paragraph-spacing);
      }

      /* ───────────────────────────────────────────────────────────────────────────
   LAYER 8: SECTIONS & LAYOUT
   ─────────────────────────────────────────────────────────────────────────── */

      .section {
        padding-top: var(--space-xl);
        padding-bottom: var(--space-xl);
        position: relative;
      }

      .section-hero {
        min-height: 60vh;
        display: flex;
        align-items: flex-start;
        padding-top: 38vh;
        padding-bottom: var(--space-xl);
      }

      /* ───────────────────────────────────────────────────────────────────────────
   LAYER 9: SCROLL REVEAL
   ─────────────────────────────────────────────────────────────────────────── */

      .reveal {
        opacity: 0;
        transform: translateY(var(--reveal-lift));
        transition:
          opacity var(--reveal-duration) var(--ease-arrive),
          transform var(--reveal-duration) var(--ease-arrive);
      }

      .reveal.visible {
        opacity: 1;
        transform: none;
      }
      .reveal.visible.intent-interactive:hover {
        transform: translateY(-2px);
      }
      .reveal.visible.intent-interactive:active {
        transform: translateY(0) scale(0.97);
      }

      .reveal-stagger:nth-child(1) {
        transition-delay: 0ms;
      }
      .reveal-stagger:nth-child(2) {
        transition-delay: calc(var(--reveal-stagger-step) * 1);
      }
      .reveal-stagger:nth-child(3) {
        transition-delay: calc(var(--reveal-stagger-step) * 2);
      }
      .reveal-stagger:nth-child(4) {
        transition-delay: calc(var(--reveal-stagger-step) * 3);
      }
      .reveal-stagger:nth-child(5) {
        transition-delay: calc(var(--reveal-stagger-step) * 4);
      }
      .reveal-stagger:nth-child(6) {
        transition-delay: calc(var(--reveal-stagger-step) * 5);
      }

      .progress-bar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, var(--lime-500), #c6ff00);
        transform-origin: left center;
        transform: scaleX(0);
        z-index: 200;
        pointer-events: none;
      }
      @media (min-width: 769px) {
        @supports (animation-timeline: scroll()) {
          .progress-bar {
            animation: progress-grow linear;
            animation-timeline: scroll(root block);
          }
          @keyframes progress-grow {
            from {
              transform: scaleX(0);
            }
            to {
              transform: scaleX(1);
            }
          }
        }
      }
      @media (max-width: 768px) {
        .progress-bar {
          display: none;
        }
      }

      /* ───────────────────────────────────────────────────────────────────────────
   LAYER 11: UTILITY CLASSES
   ─────────────────────────────────────────────────────────────────────────── */

      .pill {
        display: inline-flex;
        align-items: center;
        gap: 0.25ch;
        padding: var(--space-4xs) var(--space-2xs);
        background: rgba(139, 195, 74, var(--opacity-hint));
        border: 1px solid rgba(139, 195, 74, 0.25);
        border-radius: var(--radius-full);
        font-family: var(--font-heading);
        font-size: 11px;
        font-weight: var(--weight-medium);
        color: var(--forest-800);
        white-space: nowrap;
        flex-shrink: 0;
      }

      .surface-forest .pill {
        background: rgba(139, 195, 74, 0.15);
        border-color: rgba(139, 195, 74, 0.35);
        color: var(--lime-300);
      }

      .text-center {
        text-align: center;
      }
      .text-left {
        text-align: left;
      }

      .measure-center {
        max-width: var(--measure-body);
        margin-left: auto;
        margin-right: auto;
      }

      /* ───────────────────────────────────────────────────────────────────────────
   LAYER 12: ACCESSIBILITY
   ─────────────────────────────────────────────────────────────────────────── */

      :focus-visible {
        outline: 2px solid var(--lime-500);
        outline-offset: 2px;
      }
      .surface-forest :focus-visible {
        outline-color: var(--lime-400);
      }

      @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
          animation-duration: 0.01ms !important;
          animation-iteration-count: 1 !important;
          transition-duration: 0.01ms !important;
        }

        .reveal {
          opacity: 1;
          transform: none;
          transition: opacity var(--duration-fast) ease;
        }

        body::after {
          display: none;
        }

        html {
          scroll-snap-type: none !important;
        }
      }

      /* ═══════════════════════════════════════════════════════════════════════════
   SHEFFY — HUB PAGE STYLES
   Shared layout + component styles for hub index pages.
   All values reference system.css tokens. No hardcoded values.
   ═══════════════════════════════════════════════════════════════════════════ */

      /* ── HERO ── */

      .hero {
        position: relative;
        z-index: 1;
      }

      .hero__content {
        position: relative;
        z-index: 2;
      }

      .hero__title {
        color: var(--color-text-dark-primary);
        margin-top: var(--space-xs);
        margin-bottom: var(--space-sm);
      }

      .hero__subtitle {
        max-width: 540px;
        margin-bottom: var(--space-sm);
      }

      .hero__stats {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-3xs);
        margin-bottom: var(--space-md);
      }

      .hero__actions {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2xs);
      }

      /* ── SECTION HEADER ── */

      .section-header {
        margin-bottom: var(--space-md);
      }

      .section-header .h2 {
        margin-top: var(--space-2xs);
      }

      .section-header .body-lg {
        margin-top: var(--space-xs);
      }

      /* ── CARD GRID ── */

      .card-grid {
        display: grid;
        gap: var(--space-sm);
      }

      .card-grid--2 {
        grid-template-columns: repeat(2, 1fr);
      }

      .card-grid--3 {
        grid-template-columns: repeat(3, 1fr);
      }

      .card-grid--4 {
        grid-template-columns: repeat(2, 1fr);
      }

      .card-grid--5 {
        grid-template-columns: repeat(3, 1fr);
      }

      @media (max-width: 768px) {
        .card-grid--2,
        .card-grid--3,
        .card-grid--4,
        .card-grid--5 {
          grid-template-columns: 1fr;
        }
      }

      @media (min-width: 769px) {
        .card-grid--4 {
          grid-template-columns: repeat(4, 1fr);
        }

        .card-grid--5 {
          grid-template-columns: repeat(3, 1fr);
        }
      }

      /* ── SERVICE CARD ── */

      .service-card {
        display: flex;
        flex-direction: column;
        padding: var(--space-sm);
        text-decoration: none;
      }

      .service-card__icon {
        font-size: 28px;
        margin-bottom: var(--space-2xs);
      }

      .service-card__title {
        margin-bottom: var(--space-3xs);
      }

      .service-card__desc {
        flex: 1;
        margin-bottom: var(--space-xs);
      }

      .service-card__meta {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-3xs);
        margin-bottom: var(--space-xs);
      }

      .service-card__stat {
        display: flex;
        align-items: baseline;
        gap: var(--space-4xs);
      }

      .service-card__stat-value {
        color: var(--color-text-primary);
      }

      .service-card__stat-label {
        color: var(--color-text-tertiary);
      }

      .service-card__footer {
        margin-top: auto;
        padding-top: var(--space-2xs);
        border-top: 1px solid var(--color-border-subtle);
      }

      /* ── CUISINE CARD ── */

      .cuisine-card {
        display: flex;
        flex-direction: column;
        padding: var(--space-sm);
        text-decoration: none;
      }

      .cuisine-card__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: var(--space-3xs);
      }

      .cuisine-card__dishes {
        margin-bottom: var(--space-2xs);
      }

      .cuisine-card__sample {
        flex: 1;
        margin-bottom: var(--space-xs);
      }

      .cuisine-card__best-for {
        color: var(--color-text-tertiary);
        margin-bottom: var(--space-2xs);
      }

      .cuisine-card__footer {
        margin-top: auto;
        padding-top: var(--space-2xs);
        border-top: 1px solid var(--color-border-subtle);
      }

      /* ── TRUST GRID ── */

      .trust-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-sm);
      }

      @media (max-width: 768px) {
        .trust-grid {
          grid-template-columns: repeat(2, 1fr);
        }
      }

      .trust-item {
        display: flex;
        align-items: flex-start;
        gap: var(--space-2xs);
      }

      .trust-item__icon {
        flex-shrink: 0;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--forest-50);
        border-radius: var(--radius-lg);
        color: var(--forest-700);
        font-size: 18px;
      }

      .trust-item__text {
        display: flex;
        flex-direction: column;
        gap: var(--space-4xs);
      }

      .trust-item__value {
        color: var(--color-text-primary);
      }

      .trust-item__label {
        color: var(--color-text-secondary);
      }

      /* ── PROCESS STEPS ── */

      .process-steps {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: var(--space-sm);
        counter-reset: step;
      }

      @media (max-width: 1024px) {
        .process-steps {
          grid-template-columns: repeat(3, 1fr);
        }
      }

      @media (max-width: 768px) {
        .process-steps {
          grid-template-columns: 1fr;
        }
      }

      .process-step {
        position: relative;
        counter-increment: step;
      }

      .process-step__number {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        background: var(--forest-50);
        border: 1px solid var(--color-border-subtle);
        border-radius: var(--radius-lg);
        margin-bottom: var(--space-2xs);
        color: var(--forest-700);
      }

      .process-step__title {
        margin-bottom: var(--space-3xs);
      }

      @media (min-width: 769px) {
        .process-step:not(:last-child)::after {
          content: '';
          position: absolute;
          top: 22px;
          left: calc(44px + var(--space-2xs));
          right: calc(-1 * var(--space-sm));
          height: 1px;
          background: var(--color-border-subtle);
        }
      }

      /* ── CROSS-LINK GRID ── */

      .crosslink-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-sm);
      }

      @media (max-width: 768px) {
        .crosslink-grid {
          grid-template-columns: 1fr;
        }
      }

      .crosslink-card {
        display: flex;
        align-items: center;
        gap: var(--space-xs);
        padding: var(--space-sm);
        text-decoration: none;
      }

      .crosslink-card__icon {
        flex-shrink: 0;
        width: 52px;
        height: 52px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--forest-50);
        border-radius: var(--radius-lg);
        font-size: 24px;
      }

      .crosslink-card__text {
        flex: 1;
      }

      /* ── FAQ ACCORDION ── */

      .faq-list {
        list-style: none;
      }

      .faq-item {
        border-bottom: 1px solid var(--color-border-subtle);
      }

      .faq-item:first-child {
        border-top: 1px solid var(--color-border-subtle);
      }

      .faq-question {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: var(--space-xs) 0;
        background: none;
        border: none;
        cursor: pointer;
        text-align: left;
        font-family: var(--font-heading);
        font-size: var(--text-body-md);
        font-weight: var(--weight-semibold);
        color: var(--color-text-primary);
        line-height: 1.4;
      }

      .faq-question::after {
        content: '+';
        flex-shrink: 0;
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        font-weight: var(--weight-regular);
        color: var(--color-text-tertiary);
        transition: transform var(--duration-fast) var(--ease-hover);
      }

      .faq-item.open .faq-question::after {
        content: '\2212';
      }

      .faq-answer {
        max-height: 0;
        overflow: hidden;
        transition: max-height var(--duration-normal) var(--ease-arrive);
      }

      .faq-answer__inner {
        padding-bottom: var(--space-xs);
      }

      /* ── CTA BAND ── */

      .cta-band__content {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        z-index: 2;
      }

      .cta-band__title {
        color: var(--color-text-dark-primary);
        max-width: var(--measure-heading);
      }

      .cta-band__subtitle {
        margin-top: var(--space-2xs);
        margin-bottom: var(--space-sm);
      }

      .cta-band__actions {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2xs);
        justify-content: center;
      }

      /* ── DIETARY BREAKDOWN ── */

      .dietary-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-sm);
      }

      @media (max-width: 768px) {
        .dietary-grid {
          grid-template-columns: repeat(2, 1fr);
        }
      }

      .dietary-item {
        padding: var(--space-sm);
        text-align: center;
      }

      .dietary-item__icon {
        font-size: 28px;
        margin-bottom: var(--space-3xs);
      }

      .dietary-item__count {
        color: var(--color-text-primary);
        margin-bottom: var(--space-4xs);
      }

      .dietary-item__label {
        color: var(--color-text-secondary);
      }

      /* ── UTILITIES ── */

      .section-divider {
        border: none;
        border-top: 1px solid var(--color-border-subtle);
        margin: 0;
      }

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

      /* ═══════════════════════════════════════════════════════════════════════════
   SHEFFY — MENU PAGE STYLES
   Menu-specific components for cuisine menu pages.
   All values reference system.css tokens. No hardcoded values.
   ═══════════════════════════════════════════════════════════════════════════ */

      /* ── STICKY CATEGORY NAVIGATION ── */

      .category-nav {
        position: sticky;
        top: var(--header-height);
        z-index: 100;
        background: var(--color-surface-warm);
        border-bottom: 1px solid var(--color-border-subtle);
        padding: 0;
      }

      .category-nav__bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-sm);
        max-width: 1200px;
        margin: 0 auto;
        padding: var(--space-xs) var(--space-sm);
      }

      .category-nav__inner {
        display: flex;
        gap: var(--space-xs);
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
        flex: 1;
        min-width: 0;
      }

      .category-nav__inner::-webkit-scrollbar {
        display: none;
      }

      .category-nav__filters {
        display: flex;
        gap: var(--space-3xs);
        flex-shrink: 0;
      }

      .category-nav__link {
        font-family: var(--font-heading);
        font-size: var(--text-label);
        font-weight: var(--weight-medium);
        color: var(--color-text-secondary);
        text-decoration: none;
        white-space: nowrap;
        padding: var(--space-xs) var(--space-sm);
        border-radius: var(--radius-sm);
        transition: background var(--duration-fast) var(--ease-hover);
      }

      .category-nav__link:hover {
        background: rgba(58, 79, 58, 0.1);
      }

      .category-nav__link.active {
        background: var(--forest-700);
        color: #ffffff;
      }

      /* ── DIETARY FILTER CHIPS ── */

      .filter-bar {
        display: flex;
        gap: var(--space-3xs);
      }

      .filter-chip {
        display: inline-flex;
        align-items: center;
        gap: var(--space-4xs);
        min-height: 44px; padding: 0 16px;
        background: var(--color-surface-raised);
        border: 1px solid var(--color-border-subtle);
        border-radius: var(--radius-sm);
        font-family: var(--font-heading);
        font-size: var(--text-label);
        font-weight: var(--weight-medium);
        color: var(--color-text-secondary);
        cursor: pointer;
        white-space: nowrap;
        transition:
          border-color var(--duration-fast) var(--ease-hover),
          background var(--duration-fast) var(--ease-hover);
      }

      .filter-chip:hover {
        border-color: var(--color-border-warm);
      }

      .filter-chip--active {
        background: var(--forest-700);
        color: #ffffff;
        border-color: var(--forest-700);
      }

      /* ── DIETARY INDICATOR DOTS ── */

      .diet-tag {
        display: inline-flex;
        align-items: center;
        gap: var(--space-4xs);
        font-family: var(--font-heading);
        font-size: 10px;
        font-weight: var(--weight-medium);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--color-text-tertiary);
      }

      .diet-tag::before {
        content: '';
        width: 8px;
        height: 8px;
        border-radius: 50%;
        flex-shrink: 0;
      }

      .diet-tag--veg::before {
        background: var(--color-diet-veg);
      }

      .diet-tag--non-veg::before {
        background: var(--color-diet-nonveg);
      }

      .diet-tag--jain::before {
        background: var(--color-diet-jain);
      }

      .diet-tag--vegan::before {
        background: var(--color-diet-vegan);
      }

      /* ── DISH LIST BROWSE VIEW ── */

      .dish-list {
        display: flex;
        flex-direction: column;
        gap: var(--space-sm);
      }

      .dish-item {
        padding: var(--space-sm);
        background: var(--color-surface-raised);
        border: 1px solid var(--color-border-subtle);
        border-radius: var(--radius-lg);
        transition: box-shadow var(--duration-fast) var(--ease-hover);
      }

      .dish-item:hover {
        box-shadow: var(--elevation-1);
      }

      .dish-item--hidden {
        display: none;
      }

      .dish-item__header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: var(--space-sm);
        margin-bottom: var(--space-xs);
      }

      .dish-item__name {
        flex: 1;
      }

      .dish-item__name .h4 {
        margin: 0;
      }

      .dish-item__price {
        font-family: var(--font-mono);
        font-size: var(--text-body-md);
        color: var(--forest-700);
        font-weight: var(--weight-semibold);
        white-space: nowrap;
      }

      .dish-item__desc {
        font-size: var(--text-body-md);
        line-height: 1.65;
        color: var(--color-text-secondary);
        margin-bottom: var(--space-xs);
      }

      .dish-item__meta {
        display: flex;
        gap: var(--space-sm);
        align-items: center;
      }

      /* ── POPULAR DISHES CARDS ── */

      .popular-dish-card {
        display: flex;
        flex-direction: column;
        padding: var(--space-sm);
        background: var(--color-surface-raised);
        border: 1px solid var(--color-border-subtle);
        border-radius: var(--radius-xl);
        box-shadow: var(--elevation-1);
        text-decoration: none;
        transition: box-shadow var(--duration-fast) var(--ease-hover);
      }

      .popular-dish-card:hover {
        box-shadow: var(--elevation-2);
      }

      .popular-dish-card__header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: var(--space-3xs);
      }

      .popular-dish-card__name {
        flex: 1;
        margin-bottom: var(--space-3xs);
      }

      .popular-dish-card__desc {
        font-size: var(--text-body-md);
        line-height: 1.65;
        color: var(--color-text-secondary);
        flex: 1;
        margin-bottom: var(--space-xs);
      }

      .popular-dish-card__footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: var(--space-xs);
        border-top: 1px solid var(--color-border-subtle);
      }

      .popular-dish-card__price {
        font-family: var(--font-mono);
        font-size: var(--text-body-md);
        color: var(--forest-700);
        font-weight: var(--weight-semibold);
      }

      /* ── MENU CATEGORY SECTION ── */

      .menu-category {
        margin-bottom: var(--space-lg);
        scroll-margin-top: calc(var(--header-height) + 80px);
      }

      .menu-category:last-child {
        margin-bottom: 0;
      }

      .menu-category .h3 {
        margin-bottom: var(--space-sm);
        color: var(--forest-700);
      }

      /* ── RESPONSIVE (menu-specific) ── */

      @media (max-width: 768px) {
        .category-nav__bar {
          flex-direction: column;
          gap: var(--space-3xs);
          padding: var(--space-3xs) var(--side-padding);
        }

        .category-nav__filters {
          align-self: flex-start;
        }

        .dish-item__header {
          flex-direction: column;
          gap: var(--space-xs);
        }

        .dish-item__price {
          align-self: flex-start;
        }
      }

      /* ── Quote Modal ── */
      .quote-modal {
        border: none;
        background: transparent;
        padding: 0;
        max-width: 440px;
        width: calc(100% - 32px);
        overflow: visible;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        margin: 0;
      }
      .quote-modal::backdrop {
        background: rgba(30, 43, 30, 0.72);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
      }
      .quote-modal[open] {
        animation: quote-modal-in 0.22s ease-out;
      }
      @keyframes quote-modal-in {
        from { opacity: 0; transform: translate(-50%, -50%) scale(0.96); }
        to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
      }

      .quote-modal__card {
        background: var(--color-surface-forest);
        border-radius: var(--radius-xl);
        padding: var(--space-md) var(--space-md) var(--space-sm);
        position: relative;
        box-shadow:
          0 24px 80px rgba(0, 0, 0, 0.35),
          0 8px 24px rgba(0, 0, 0, 0.2);
        border: 1px solid rgba(255, 255, 255, 0.06);
      }
      .quote-modal__close {
        position: absolute;
        top: var(--space-xs);
        right: var(--space-xs);
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: var(--radius-full);
        color: var(--color-text-dark-secondary);
        cursor: pointer;
        transition: background var(--duration-fast) var(--ease-hover);
      }
      .quote-modal__close:hover {
        background: rgba(255, 255, 255, 0.14);
        color: var(--color-text-dark-primary);
      }
      .quote-modal__close svg {
        width: 18px;
        height: 18px;
      }
      .quote-modal__title {
        font-family: var(--font-heading);
        font-size: var(--text-h3);
        font-weight: var(--weight-semibold);
        color: var(--color-text-dark-primary);
        margin: 0 0 var(--space-4xs);
        padding-right: var(--space-md);
      }
      .quote-modal__subtitle {
        font-family: var(--font-body);
        font-size: var(--text-body-sm);
        color: var(--color-text-dark-secondary);
        margin: 0 0 var(--space-sm);
      }

      .quote-form {
        display: flex;
        flex-direction: column;
        gap: var(--space-xs);
      }
      .quote-form__field {
        display: flex;
        flex-direction: column;
        gap: var(--space-4xs);
      }
      .quote-form__label {
        font-family: var(--font-heading);
        font-size: var(--text-caption);
        font-weight: var(--weight-semibold);
        color: var(--color-text-dark-secondary);
        text-transform: uppercase;
        letter-spacing: 0.04em;
      }
      .quote-form__input {
        height: 52px;
        padding: 0 var(--space-xs);
        font-family: var(--font-body);
        font-size: var(--text-body-md);
        color: var(--color-text-primary);
        background: var(--color-surface-raised);
        border: 1.5px solid transparent;
        border-radius: var(--radius-md);
        outline: none;
        transition: border-color var(--duration-fast) var(--ease-hover),
                    box-shadow var(--duration-fast) var(--ease-hover);
      }
      .quote-form__input::placeholder {
        color: var(--stone-500);
      }
      .quote-form__input:focus {
        border-color: var(--lime-500);
        box-shadow: 0 0 0 3px rgba(139, 195, 74, 0.18);
      }
      .quote-form__input--error {
        border-color: var(--color-error);
      }
      .quote-form__input--error:focus {
        border-color: var(--color-error);
        box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.12);
      }
      .quote-form__error {
        font-size: var(--text-caption);
        color: #ef9a9a;
        margin-top: 2px;
      }
      .quote-form__submit {
        width: 100%;
        margin-top: var(--space-3xs);
      }
      .quote-form__fine {
        font-size: var(--text-caption);
        color: var(--color-text-dark-secondary);
        text-align: center;
        margin: var(--space-3xs) 0 0;
        opacity: 0.7;
      }

      .quote-form__success {
        text-align: center;
        padding: var(--space-sm) 0 var(--space-xs);
      }
      .quote-form__success svg {
        width: 56px;
        height: 56px;
        color: var(--lime-500);
        margin-bottom: var(--space-xs);
      }
      .quote-form__success-title {
        font-family: var(--font-heading);
        font-size: var(--text-h3);
        font-weight: var(--weight-semibold);
        color: var(--color-text-dark-primary);
        margin: 0 0 var(--space-4xs);
      }
      .quote-form__success-body {
        font-family: var(--font-body);
        font-size: var(--text-body-md);
        color: var(--color-text-dark-secondary);
        margin: 0;
      }