/* ╔══════════════════════════════════════════════════════════════════════════════╗
   ║   PHI-SYSTEM.CSS — Golden Ratio Design System                                ║
   ║   φ (phi) = 1.618033988749895                                                ║
   ║                                                                              ║
   ║   Every measurement relates to adjacent measurements by φ                    ║
   ║   This creates mathematically harmonious visual proportions                  ║
   ║                                                                              ║
   ║   Base unit: 1rem (16px)                                                     ║
   ║   Scale: base × φⁿ where n = ...−3, −2, −1, 0, 1, 2, 3...                   ║
   ╚══════════════════════════════════════════════════════════════════════════════╝ */

:root {
    /* ═══════════════════════════════════════════════════════════════════════════
       THE GOLDEN RATIO
       ═══════════════════════════════════════════════════════════════════════════ */
    --phi: 1.618033988749895;
    --phi-inverse: 0.618033988749895; /* 1/φ = φ−1 */

    /* ═══════════════════════════════════════════════════════════════════════════
       PHI SCALE — Spacing & Sizing
       Base: 1rem (16px)
       Each step multiplied or divided by φ
       ═══════════════════════════════════════════════════════════════════════════ */

    /* Descending scale (smaller than base) */
    --phi-6: 0.146rem;    /* 2.336px  — base ÷ φ⁶ */
    --phi-5: 0.236rem;    /* 3.776px  — base ÷ φ⁵ */
    --phi-4: 0.382rem;    /* 6.112px  — base ÷ φ⁴ */
    --phi-3: 0.618rem;    /* 9.888px  — base ÷ φ³ */
    --phi-2: 1rem;        /* 16px     — base ÷ φ² (also = base × φ⁻²) */
    --phi-1: 1.618rem;    /* 25.888px — base ÷ φ¹ */

    /* Base */
    --phi-0: 1rem;        /* 16px — THE ANCHOR */

    /* Ascending scale (larger than base) */
    --phi-1: 1.618rem;    /* 25.888px — base × φ¹ */
    --phi-2: 2.618rem;    /* 41.888px — base × φ² */
    --phi-3: 4.236rem;    /* 67.776px — base × φ³ */
    --phi-4: 6.854rem;    /* 109.664px — base × φ⁴ */
    --phi-5: 11.089rem;   /* 177.424px — base × φ⁵ */
    --phi-6: 17.942rem;   /* 287.072px — base × φ⁶ */
    --phi-7: 29.03rem;    /* 464.48px — base × φ⁷ */
    --phi-8: 46.971rem;   /* 751.536px — base × φ⁸ */
    --phi-9: 75.999rem;   /* 1215.984px — base × φ⁹ */

    /* ═══════════════════════════════════════════════════════════════════════════
       PHI SPACING — Named aliases for semantic use
       ═══════════════════════════════════════════════════════════════════════════ */
    --space-3xs: 0.146rem;   /* φ⁻⁶ — Hairline */
    --space-2xs: 0.236rem;   /* φ⁻⁵ — Micro */
    --space-xs: 0.382rem;    /* φ⁻⁴ — Tiny */
    --space-sm: 0.618rem;    /* φ⁻³ — Small */
    --space-md: 1rem;        /* φ⁰  — Base/Medium */
    --space-lg: 1.618rem;    /* φ¹  — Large */
    --space-xl: 2.618rem;    /* φ²  — Extra Large */
    --space-2xl: 4.236rem;   /* φ³  — 2X Large */
    --space-3xl: 6.854rem;   /* φ⁴  — 3X Large */
    --space-4xl: 11.089rem;  /* φ⁵  — 4X Large */
    --space-5xl: 17.942rem;  /* φ⁶  — 5X Large */

    /* ═══════════════════════════════════════════════════════════════════════════
       PHI TYPOGRAPHY — Font sizes following golden ratio
       ═══════════════════════════════════════════════════════════════════════════ */
    --text-3xs: 0.382rem;    /* 6.1px — Micro text */
    --text-2xs: 0.618rem;    /* 9.9px — Fine print */
    --text-xs: 0.764rem;     /* 12.2px — Small labels */
    --text-sm: 0.875rem;     /* 14px — Small body (slight adjustment for readability) */
    --text-base: 1rem;       /* 16px — Body text */
    --text-lg: 1.236rem;     /* 19.8px — Large body */
    --text-xl: 1.618rem;     /* 25.9px — H4 / Lead */
    --text-2xl: 2.058rem;    /* 32.9px — H3 */
    --text-3xl: 2.618rem;    /* 41.9px — H2 */
    --text-4xl: 3.33rem;     /* 53.3px — H1 small */
    --text-5xl: 4.236rem;    /* 67.8px — H1 large */
    --text-6xl: 6.854rem;    /* 109.7px — Display */

    /* ═══════════════════════════════════════════════════════════════════════════
       PHI LINE HEIGHTS — Vertical rhythm based on φ
       ═══════════════════════════════════════════════════════════════════════════ */
    --leading-none: 1;
    --leading-tight: 1.236;      /* φ ÷ 1.309 — Tight headlines */
    --leading-snug: 1.382;       /* (1 + φ) ÷ 1.894 — Snug */
    --leading-normal: 1.618;     /* φ — THE GOLDEN LINE HEIGHT */
    --leading-relaxed: 1.854;    /* φ + 0.236 — Relaxed body */
    --leading-loose: 2.0;        /* Round for readability */

    /* ═══════════════════════════════════════════════════════════════════════════
       PHI CONTAINERS — Max widths following golden proportions
       ═══════════════════════════════════════════════════════════════════════════ */
    --container-xs: 23.6rem;     /* 377.6px — φ⁷ × 0.813 */
    --container-sm: 38.2rem;     /* 611.2px — φ⁸ × 0.813 */
    --container-md: 61.8rem;     /* 988.8px — ~1000px content width */
    --container-lg: 75.999rem;   /* 1216px — φ⁹ */
    --container-xl: 87.5rem;     /* 1400px — adjusted for screens */

    /* Content width: golden ratio of container */
    --content-width: 61.8%;      /* φ⁻¹ as percentage */
    --sidebar-width: 38.2%;      /* 1 - φ⁻¹ */

    /* ═══════════════════════════════════════════════════════════════════════════
       PHI BORDER RADIUS — Rounded corners following φ
       ═══════════════════════════════════════════════════════════════════════════ */
    --radius-sm: 0.236rem;       /* φ⁻⁵ — Subtle */
    --radius-md: 0.382rem;       /* φ⁻⁴ — Default */
    --radius-lg: 0.618rem;       /* φ⁻³ — Large */
    --radius-xl: 1rem;           /* φ⁰  — Extra large */
    --radius-2xl: 1.618rem;      /* φ¹  — 2X large */
    --radius-full: 9999px;       /* Pill */

    /* ═══════════════════════════════════════════════════════════════════════════
       PHI SHADOWS — Blur & spread following φ
       ═══════════════════════════════════════════════════════════════════════════ */
    --shadow-sm: 0 0.146rem 0.382rem rgba(0, 0, 0, 0.05);
    --shadow-md: 0 0.236rem 0.618rem rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 0.382rem 1rem rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 0.618rem 1.618rem rgba(0, 0, 0, 0.12);
    --shadow-2xl: 0 1rem 2.618rem rgba(0, 0, 0, 0.15);

    /* ═══════════════════════════════════════════════════════════════════════════
       PHI TRANSITIONS — Timing based on φ
       ═══════════════════════════════════════════════════════════════════════════ */
    --duration-instant: 0.1s;
    --duration-fast: 0.1618s;    /* φ ÷ 10 */
    --duration-normal: 0.2618s;  /* φ² ÷ 10 */
    --duration-slow: 0.4236s;    /* φ³ ÷ 10 */
    --duration-slower: 0.6854s;  /* φ⁴ ÷ 10 */
}

/* ═══════════════════════════════════════════════════════════════════════════════
   GLOBAL RESETS WITH PHI
   ═══════════════════════════════════════════════════════════════════════════════ */

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

html {
    font-size: 16px; /* Base for rem calculations */
    line-height: var(--leading-normal); /* φ = 1.618 */
}

body {
    font-size: var(--text-base);
    line-height: var(--leading-normal);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   TYPOGRAPHY WITH PHI
   ═══════════════════════════════════════════════════════════════════════════════ */

h1, .h1 {
    font-size: var(--text-5xl);      /* 4.236rem — φ³ */
    line-height: var(--leading-tight);
    margin-bottom: var(--space-lg);   /* 1.618rem — φ¹ */
    letter-spacing: -0.02em;
}

h2, .h2 {
    font-size: var(--text-3xl);      /* 2.618rem — φ² */
    line-height: var(--leading-tight);
    margin-top: var(--space-2xl);    /* 4.236rem — φ³ */
    margin-bottom: var(--space-lg);  /* 1.618rem — φ¹ */
}

h3, .h3 {
    font-size: var(--text-2xl);      /* 2.058rem */
    line-height: var(--leading-snug);
    margin-top: var(--space-xl);     /* 2.618rem — φ² */
    margin-bottom: var(--space-md);  /* 1rem — φ⁰ */
}

h4, .h4 {
    font-size: var(--text-xl);       /* 1.618rem — φ¹ */
    line-height: var(--leading-snug);
    margin-top: var(--space-lg);     /* 1.618rem — φ¹ */
    margin-bottom: var(--space-sm);  /* 0.618rem — φ⁻³ */
}

h5, .h5 {
    font-size: var(--text-lg);       /* 1.236rem */
    line-height: var(--leading-normal);
    margin-top: var(--space-lg);
    margin-bottom: var(--space-sm);
}

h6, .h6 {
    font-size: var(--text-base);     /* 1rem — φ⁰ */
    line-height: var(--leading-normal);
    margin-top: var(--space-md);
    margin-bottom: var(--space-xs);
}

p {
    margin-bottom: var(--space-lg);  /* 1.618rem — φ¹ */
    max-width: 65ch;                 /* Optimal reading width */
}

/* Paragraph spacing relative to font size: gap = fontSize × φ */
p + p {
    margin-top: var(--space-md);
}

/* Lead paragraph */
.lead, .hero-lead, .section-intro {
    font-size: var(--text-xl);       /* 1.618rem — φ¹ */
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-xl);  /* 2.618rem — φ² */
}

/* Small text */
small, .small, .text-sm {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SECTIONS WITH PHI SPACING
   ═══════════════════════════════════════════════════════════════════════════════ */

.section {
    padding-top: var(--space-3xl);      /* 6.854rem — φ⁴ */
    padding-bottom: var(--space-3xl);   /* 6.854rem — φ⁴ */
}

/* Section gap = φ × section padding */
.section + .section {
    /* Natural flow from padding */
}

/* Tighter sections */
.section-compact {
    padding-top: var(--space-2xl);      /* 4.236rem — φ³ */
    padding-bottom: var(--space-2xl);
}

/* Spacious sections */
.section-spacious {
    padding-top: var(--space-4xl);      /* 11.089rem — φ⁵ */
    padding-bottom: var(--space-4xl);
}

/* Section heading to content gap */
.section h2 {
    margin-bottom: var(--space-xl);     /* 2.618rem — φ² */
}

.section h2 + p,
.section h2 + .section-intro {
    margin-top: calc(var(--space-lg) * -0.382); /* Pull up slightly */
}

/* ═══════════════════════════════════════════════════════════════════════════════
   CONTAINERS WITH PHI
   ═══════════════════════════════════════════════════════════════════════════════ */

.container {
    width: 100%;
    max-width: var(--container-lg);     /* 75.999rem — φ⁹ */
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-lg);      /* 1.618rem — φ¹ */
    padding-right: var(--space-lg);
}

.container-sm {
    max-width: var(--container-sm);     /* 38.2rem */
}

.container-md {
    max-width: var(--container-md);     /* 61.8rem */
}

.container-xl {
    max-width: var(--container-xl);
}

/* Content + Sidebar layout using golden ratio */
.layout-golden {
    display: grid;
    grid-template-columns: var(--content-width) var(--sidebar-width);
    gap: var(--space-xl);               /* 2.618rem — φ² */
}

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

/* ═══════════════════════════════════════════════════════════════════════════════
   CARDS WITH PHI PROPORTIONS
   ═══════════════════════════════════════════════════════════════════════════════ */

.card {
    background: white;
    border-radius: var(--radius-lg);    /* 0.618rem — φ⁻³ */
    padding: var(--space-xl);           /* 2.618rem — φ² */
    box-shadow: var(--shadow-md);
    transition: all var(--duration-normal);
}

/* Card internal spacing follows φ */
.card-header {
    margin-bottom: var(--space-lg);     /* 1.618rem — φ¹ */
}

.card-title {
    font-size: var(--text-xl);          /* 1.618rem — φ¹ */
    margin-bottom: var(--space-sm);     /* 0.618rem — φ⁻³ */
}

.card-body {
    margin-bottom: var(--space-lg);
}

.card-footer {
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 1px solid var(--border);
}

/* Card grid with φ gaps */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: var(--space-xl);               /* 2.618rem — φ² */
}

/* Golden rectangle cards (width:height = φ:1) */
.card-golden {
    aspect-ratio: 1.618 / 1;
}

/* Vertical golden cards (height:width = φ:1) */
.card-golden-v {
    aspect-ratio: 1 / 1.618;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   BUTTONS WITH PHI
   ═══════════════════════════════════════════════════════════════════════════════ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);               /* 0.618rem — φ⁻³ */
    /* Padding: vertical = horizontal ÷ φ */
    padding: var(--space-sm) var(--space-lg); /* 0.618rem × 1.618rem */
    font-size: var(--text-base);
    font-weight: 600;
    line-height: var(--leading-none);
    border-radius: var(--radius-lg);
    transition: all var(--duration-fast);
    cursor: pointer;
    text-decoration: none;
}

.btn-sm {
    padding: var(--space-xs) var(--space-md); /* 0.382rem × 1rem */
    font-size: var(--text-sm);
}

.btn-lg {
    padding: var(--space-md) var(--space-xl); /* 1rem × 2.618rem */
    font-size: var(--text-lg);
}

/* Button groups */
.btn-group {
    display: flex;
    gap: var(--space-md);               /* 1rem — φ⁰ */
    flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   FORMS WITH PHI
   ═══════════════════════════════════════════════════════════════════════════════ */

.form-group {
    margin-bottom: var(--space-lg);     /* 1.618rem — φ¹ */
}

.form-label {
    display: block;
    font-size: var(--text-sm);
    font-weight: 600;
    margin-bottom: var(--space-xs);     /* 0.382rem — φ⁻⁴ */
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: var(--space-sm) var(--space-md); /* 0.618rem × 1rem */
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    transition: border-color var(--duration-fast);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--color-brand-blue);
    box-shadow: 0 0 0 var(--space-3xs) rgba(10, 58, 94, 0.1);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   LISTS WITH PHI SPACING
   ═══════════════════════════════════════════════════════════════════════════════ */

ul, ol {
    padding-left: var(--space-xl);      /* 2.618rem — φ² */
    margin-bottom: var(--space-lg);     /* 1.618rem — φ¹ */
}

li {
    margin-bottom: var(--space-sm);     /* 0.618rem — φ⁻³ */
}

li:last-child {
    margin-bottom: 0;
}

/* Nested list indent = parent indent × φ⁻¹ */
ul ul, ol ol, ul ol, ol ul {
    margin-top: var(--space-sm);
    margin-bottom: var(--space-sm);
    padding-left: var(--space-lg);      /* 1.618rem — parent × φ⁻¹ */
}

/* ═══════════════════════════════════════════════════════════════════════════════
   GRIDS WITH PHI
   ═══════════════════════════════════════════════════════════════════════════════ */

.grid {
    display: grid;
    gap: var(--space-xl);               /* 2.618rem — φ² */
}

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

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

/* Golden split grid */
.grid-golden {
    grid-template-columns: 61.8% 38.2%;
}

.grid-golden-reverse {
    grid-template-columns: 38.2% 61.8%;
}

/* Gap variations */
.gap-sm { gap: var(--space-md); }       /* 1rem — φ⁰ */
.gap-md { gap: var(--space-lg); }       /* 1.618rem — φ¹ */
.gap-lg { gap: var(--space-xl); }       /* 2.618rem — φ² */
.gap-xl { gap: var(--space-2xl); }      /* 4.236rem — φ³ */

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

/* ═══════════════════════════════════════════════════════════════════════════════
   SPACING UTILITIES (PHI-BASED)
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Margins */
.m-0 { margin: 0; }
.m-xs { margin: var(--space-xs); }
.m-sm { margin: var(--space-sm); }
.m-md { margin: var(--space-md); }
.m-lg { margin: var(--space-lg); }
.m-xl { margin: var(--space-xl); }
.m-2xl { margin: var(--space-2xl); }

.mt-0 { margin-top: 0; }
.mt-xs { margin-top: var(--space-xs); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mt-2xl { margin-top: var(--space-2xl); }
.mt-3xl { margin-top: var(--space-3xl); }

.mb-0 { margin-bottom: 0; }
.mb-xs { margin-bottom: var(--space-xs); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }
.mb-2xl { margin-bottom: var(--space-2xl); }
.mb-3xl { margin-bottom: var(--space-3xl); }

/* Padding */
.p-0 { padding: 0; }
.p-xs { padding: var(--space-xs); }
.p-sm { padding: var(--space-sm); }
.p-md { padding: var(--space-md); }
.p-lg { padding: var(--space-lg); }
.p-xl { padding: var(--space-xl); }
.p-2xl { padding: var(--space-2xl); }

.py-xs { padding-top: var(--space-xs); padding-bottom: var(--space-xs); }
.py-sm { padding-top: var(--space-sm); padding-bottom: var(--space-sm); }
.py-md { padding-top: var(--space-md); padding-bottom: var(--space-md); }
.py-lg { padding-top: var(--space-lg); padding-bottom: var(--space-lg); }
.py-xl { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }
.py-2xl { padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); }
.py-3xl { padding-top: var(--space-3xl); padding-bottom: var(--space-3xl); }

.px-xs { padding-left: var(--space-xs); padding-right: var(--space-xs); }
.px-sm { padding-left: var(--space-sm); padding-right: var(--space-sm); }
.px-md { padding-left: var(--space-md); padding-right: var(--space-md); }
.px-lg { padding-left: var(--space-lg); padding-right: var(--space-lg); }
.px-xl { padding-left: var(--space-xl); padding-right: var(--space-xl); }

/* ═══════════════════════════════════════════════════════════════════════════════
   SPECIFIC COMPONENT OVERRIDES FOR MISSION AUTO GLASS
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Hero section with φ proportions */
.section-hero {
    padding: var(--space-3xl) 0;        /* 6.854rem — φ⁴ */
}

.section-hero h1 {
    font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl));
    margin-bottom: var(--space-lg);
}

.section-hero .hero-lead {
    font-size: var(--text-xl);
    max-width: var(--container-md);
    margin: 0 auto var(--space-xl);
}

.section-hero .hero-cta {
    gap: var(--space-md);
}

/* Pricing table with φ spacing */
.pricing-table {
    border-radius: var(--radius-lg);
}

.pricing-row {
    padding: var(--space-md) var(--space-lg);
}

/* Process steps with φ rhythm */
.process-steps {
    max-width: var(--container-sm);
}

.process-step {
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
}

.step-number {
    width: var(--space-xl);             /* 2.618rem — φ² */
    height: var(--space-xl);
    font-size: var(--text-lg);
}

.step-content {
    padding-top: var(--space-xs);
}

.step-title {
    font-size: var(--text-lg);
    margin-bottom: var(--space-sm);
}

/* FAQ items with φ spacing */
.faq-item {
    padding: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.faq-item h3 {
    font-size: var(--text-lg);
    margin-bottom: var(--space-sm);
}

/* Criteria grid */
.criteria-grid {
    gap: var(--space-xl);
}

.criteria-col {
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
}

.criteria-heading {
    font-size: var(--text-xl);
    margin-bottom: var(--space-lg);
}

/* Details/Summary (objection intercept) */
.objection-intercept {
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-lg);
}

.objection-intercept summary {
    padding: var(--space-lg);
}

.intercept-content {
    padding: var(--space-lg);
}

/* CTA sections */
.section-cta {
    padding: var(--space-4xl) 0;
}

.cta-buttons {
    gap: var(--space-md);
    margin-top: var(--space-xl);
}

/* Areas grid */
.areas-grid {
    gap: var(--space-xl);
}

.area-col {
    padding-right: var(--space-lg);
}

.area-col strong {
    display: block;
    font-size: var(--text-lg);
    margin-bottom: var(--space-md);
}

/* Service cards */
.service-card {
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
}

.service-card h3 {
    font-size: var(--text-xl);
    margin-bottom: var(--space-sm);
}

/* Footer with φ spacing */
.site-footer {
    padding: var(--space-3xl) 0 var(--space-xl);
}

.footer-grid {
    gap: var(--space-2xl);
}

.footer-heading {
    font-size: var(--text-sm);
    margin-bottom: var(--space-md);
}

.footer-menu li {
    margin-bottom: var(--space-xs);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE PHI ADJUSTMENTS
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    :root {
        /* Scale down base proportionally on mobile */
        --space-3xl: 4.236rem;          /* Reduce from φ⁴ to φ³ */
        --space-4xl: 6.854rem;          /* Reduce from φ⁵ to φ⁴ */
    }

    h1, .h1 {
        font-size: var(--text-3xl);     /* 2.618rem on mobile */
    }

    h2, .h2 {
        font-size: var(--text-2xl);
    }

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

    .container {
        padding-left: var(--space-md);
        padding-right: var(--space-md);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   DEBUG MODE — Visualize the φ grid (uncomment to enable)
   ═══════════════════════════════════════════════════════════════════════════════ */
/*
body.debug-phi {
    background-image:
        repeating-linear-gradient(
            to bottom,
            transparent 0,
            transparent calc(var(--space-md) - 1px),
            rgba(255, 0, 0, 0.1) calc(var(--space-md) - 1px),
            rgba(255, 0, 0, 0.1) var(--space-md)
        );
}
*/