/* === GLOBAL BASE STYLES (FORCED) === */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
}

main {
  max-width: 1600px;
  margin-inline: auto;
  width: 100%;
}

.container {
  margin-inline: auto;
}

body {
  overflow-x: hidden;
}

section {
  width: 100%;
}

.utility-shell {
  width: min(980px, calc(100% - 24px));
  margin: 0 auto;
  padding: 28px 0 56px;
}

.utility-page--with-header .utility-shell {
  padding-top: calc(
    28px +
    var(
      --utility-chrome-offset,
      calc(var(--spacing-6, 48px) + var(--spacing-4, 32px))
    )
  );
}

@media (max-width: 720px) {
  .utility-shell {
    width: min(100% - 16px, 980px);
    padding-top: 16px;
    padding-bottom: 36px;
  }

  .utility-page--with-header .utility-shell {
    padding-top: calc(
      16px +
      var(
        --utility-chrome-offset-mobile,
        calc(var(--spacing-4, 32px) + var(--spacing-3, 24px))
      )
    );
  }
}

/* --- SVG icons (local sprite) --- */
.icon {
  width: 1.25rem;
  height: 1.25rem;
  display: inline-block;
  vertical-align: middle;
  flex: 0 0 auto;
}

/* --- index.html --- */
:root {
            --c-bg: #FCFBF9;
            --c-surface: #FFFFFF;
            --c-surface-alt: #F0FDF4;
            --c-text: #1F2937;
            --c-text-muted: #4B5563;
            --c-accent: #059669;
            --c-accent-hover: #047857;
            --c-border: #E5E7EB;

            --space-1: 8px;
            --space-2: 16px;
            --space-3: 24px;
            --space-4: 32px;
            --space-6: 48px;
            --space-8: 64px;
            --space-12: 96px;

            --radius-lg: 16px;
            --shadow-soft: 0 10px 25px -5px rgba(0,0,0,0.05), 0 8px 10px -6px rgba(0,0,0,0.01);
            --shadow-hover: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
        }

        body {
            font-family: system-ui, -apple-system, sans-serif;
            background-color: var(--c-bg);
            color: var(--c-text);
            margin: 0;
            line-height: 1.6;
        }

        .bg-noise {
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E");
        }

        h1, h2, h3, h4 {
            font-weight: 700;
            letter-spacing: -0.02em;
            margin-top: 0;
            color: var(--c-text);
        }

        .eyebrow {
            text-transform: uppercase;
            font-size: 0.875rem;
            letter-spacing: 0.05em;
            color: var(--c-accent);
            font-weight: 600;
            margin-bottom: var(--space-2);
            display: block;
        }

        .container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 var(--space-3);
            box-sizing: border-box;
        }

        .section-pad {
            padding: var(--space-12) 0;
        }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background-color: var(--c-accent);
            color: #FFFFFF;
            text-decoration: none;
            padding: var(--space-2) var(--space-4);
            border-radius: var(--radius-lg);
            font-weight: 600;
            transition: background-color 0.2s ease, transform 0.2s ease;
        }
        .btn:hover {
            background-color: var(--c-accent-hover);
            transform: translateY(-2px);
        }
        .btn-outline {
            background-color: transparent;
            color: var(--c-text);
            border: 2px solid var(--c-border);
        }
        .btn-outline:hover {
            background-color: var(--c-surface);
            border-color: var(--c-text);
        }

        .hero-section {
            text-align: center;
            padding: calc(var(--space-12) * 1.5) 0 var(--space-12);
            max-width: 800px;
            margin: 0 auto;
        }
        .hero-title {
            font-size: clamp(2.5rem, 5vw, 4rem);
            line-height: 1.1;
            margin-bottom: var(--space-3);
        }
        .hero-lead {
            font-size: 1.25rem;
            color: var(--c-text-muted);
            max-width: 600px;
            margin: 0 auto var(--space-4);
        }
        .hero-img-container {
            border-radius: var(--radius-lg);
            overflow: hidden;
            box-shadow: var(--shadow-soft);
            margin-top: var(--space-6);
            position: relative;
            background-color: var(--c-border);
        }
        .hero-img-container img {
            width: 100%;
            height: auto;
            display: block;
            aspect-ratio: 16/9;
            object-fit: cover;
        }

        .section-header {
            display: flex;
            flex-direction: column;
            margin-bottom: var(--space-6);
        }
        .heading-with-rule {
            border-left: 4px solid var(--c-accent);
            padding-left: var(--space-2);
            font-size: 2rem;
            line-height: 1.2;
        }

        .proof-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: var(--space-4);
        }
        .proof-card {
            background: var(--c-surface);
            padding: var(--space-4);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-soft);
            border: 1px solid var(--c-border);
        }
        .proof-card h3 {
            font-size: 1.25rem;
            margin-bottom: var(--space-2);
        }
        .proof-card p {
            color: var(--c-text-muted);
            margin: 0;
        }

        .narrative-section {
            background-color: var(--c-surface-alt);
            border-radius: var(--radius-lg);
            overflow: hidden;
        }
        .narrative-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            align-items: center;
        }
        .narrative-content {
            padding: var(--space-8);
        }
        .narrative-img {
            height: 100%;
            min-height: 400px;
            background-color: var(--c-border);
        }
        .narrative-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .article-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: var(--space-4);
        }
        .article-card {
            background: var(--c-surface);
            border-radius: var(--radius-lg);
            overflow: hidden;
            box-shadow: var(--shadow-soft);
            transition: box-shadow 0.2s ease;
            display: flex;
            flex-direction: column;
        }
        .article-card:hover {
            box-shadow: var(--shadow-hover);
        }
        .article-card img {
            width: 100%;
            aspect-ratio: 4/3;
            object-fit: cover;
            background-color: var(--c-border);
        }
        .article-card-content {
            padding: var(--space-4);
            display: flex;
            flex-direction: column;
            flex-grow: 1;
        }
        .article-meta {
            font-size: 0.875rem;
            color: var(--c-accent);
            font-weight: 600;
            margin-bottom: var(--space-1);
        }
        .article-card-content h3 {
            font-size: 1.25rem;
            margin-bottom: var(--space-2);
        }
        .article-card-content p {
            color: var(--c-text-muted);
            font-size: 0.9375rem;
            margin-bottom: var(--space-3);
            flex-grow: 1;
        }
        .article-link {
            font-weight: 600;
            color: var(--c-text);
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }
        .article-link:hover {
            color: var(--c-accent);
        }

        .cta-zone {
            background-color: var(--c-text);
            color: var(--c-surface);
            text-align: center;
            padding: var(--space-8) var(--space-3);
            border-radius: var(--radius-lg);
            margin: var(--space-12) auto;
            max-width: 800px;
        }
        .cta-zone h2 {
            color: var(--c-surface);
            font-size: 2rem;
            margin-bottom: var(--space-2);
        }
        .cta-zone p {
            color: #D1D5DB;
            margin-bottom: var(--space-4);
        }

        @media (max-width: 768px) {
            .narrative-grid {
                grid-template-columns: 1fr;
            }
            .narrative-content {
                padding: var(--space-4);
            }
            .hero-section {
                padding: var(--space-8) 0;
            }
            .section-pad {
                padding: var(--space-8) 0;
            }
        }

/* --- wellness.html --- */
:root {
      --color-bg: #FFF7F3;
      --color-surface: #FFFFFF;
      --color-text: #111827;
      --color-text-muted: #4B5563;
      --color-mint-light: #D1FAE5;
      --color-mint: #10B981;
      --color-mint-dark: #059669;
      --color-btn-bg: #065F46;
      --color-border: rgba(17, 24, 39, 0.1);
      --radius-lg: 16px;
      --space-section: 5rem;
    }

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

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
      background-color: var(--color-bg);
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.02'/%3E%3C/svg%3E");
      color: var(--color-text);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
    }

    h1, h2, h3, h4 {
      font-weight: 700;
      letter-spacing: -0.03em;
      line-height: 1.1;
      color: var(--color-text);
    }

    p {
      color: var(--color-text-muted);
      max-width: 65ch;
      margin-bottom: 1rem;
    }

    a {
      color: var(--color-mint-dark);
      text-decoration: none;
      font-weight: 500;
      transition: opacity 0.2s ease;
    }

    a:hover {
      opacity: 0.8;
    }

    .btn-primary {
      display: inline-block;
      background-color: var(--color-btn-bg);
      color: #FFFFFF;
      padding: 0.75rem 1.5rem;
      border-radius: var(--radius-lg);
      font-weight: 600;
      text-align: center;
      margin-top: 1rem;
    }

    .btn-primary:hover {
      opacity: 0.9;
      color: #FFFFFF;
    }

    .container {
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 1.5rem;
    }

    /* Section Headings with Side Rules */
    .ruled-heading {
      border-left: 4px solid var(--color-mint);
      padding-left: 1rem;
      margin-bottom: 2rem;
    }

    .ruled-heading .eyebrow {
      display: block;
      font-size: 0.875rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--color-mint-dark);
      margin-bottom: 0.5rem;
      font-weight: 600;
    }

    .ruled-heading h2 {
      font-size: 2.25rem;
    }

    /* Hero Billboard */
    .hero-billboard {
      text-align: center;
      padding: 6rem 1.5rem 4rem;
      max-width: 56rem;
      margin: 0 auto;
    }

    .hero-billboard .eyebrow {
      display: inline-block;
      font-size: 0.875rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--color-mint-dark);
      font-weight: 700;
      margin-bottom: 1rem;
      background: var(--color-mint-light);
      padding: 0.25rem 0.75rem;
      border-radius: 9999px;
    }

    .hero-billboard h1 {
      font-size: 3.5rem;
      margin-bottom: 1.5rem;
    }

    .hero-billboard p.lead {
      font-size: 1.25rem;
      color: var(--color-text-muted);
      margin: 0 auto 3rem;
    }

    .hero-media-frame {
      border-radius: var(--radius-lg);
      padding: 0.5rem;
      background: var(--color-surface);
      box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.01);
    }

    .hero-media-frame img {
      display: block;
      width: 100%;
      height: auto;
      border-radius: calc(var(--radius-lg) - 0.25rem);
      object-fit: cover;
      aspect-ratio: 16 / 7;
    }

    /* Zigzag Section */
    .zigzag-area {
      padding: var(--space-section) 0;
    }

    .zigzag-row {
      display: flex;
      align-items: center;
      gap: 4rem;
      margin-bottom: 6rem;
    }

    .zigzag-row:last-child {
      margin-bottom: 0;
    }

    .zigzag-row:nth-child(even) {
      flex-direction: row-reverse;
    }

    .zigzag-text, .zigzag-media {
      flex: 1;
    }

    .zigzag-media img {
      width: 100%;
      height: auto;
      border-radius: var(--radius-lg);
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
      object-fit: cover;
      aspect-ratio: 4 / 3;
    }

    /* List Rhythm / Table Area */
    .list-rhythm-area {
      padding: var(--space-section) 0;
      background: var(--color-surface);
    }

    .table-list {
      list-style: none;
      border-top: 2px solid var(--color-text);
      margin-top: 2rem;
    }

    .table-list li {
      display: flex;
      gap: 2rem;
      padding: 2rem 0;
      border-bottom: 1px solid var(--color-border);
      align-items: baseline;
    }

    .table-list .step-num {
      font-weight: 700;
      color: var(--color-mint-dark);
      min-width: 2.5rem;
      font-size: 1.125rem;
    }

    .table-list .step-title {
      min-width: 14rem;
      font-size: 1.25rem;
      margin-bottom: 0;
    }

    .table-list .step-desc {
      margin-bottom: 0;
      flex: 1;
    }

    /* Purposeful Contact Block */
    .contact-utility {
      padding: var(--space-section) 0;
    }

    .contact-frame {
      display: flex;
      flex-wrap: wrap;
      gap: 3rem;
      background: var(--color-surface);
      padding: 3rem;
      border-radius: var(--radius-lg);
      box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
    }

    .contact-info {
      flex: 1;
      min-width: 280px;
    }

    .contact-info h2 {
      font-size: 2rem;
      margin-bottom: 1rem;
    }

    .contact-links {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      margin-top: 2rem;
    }

    .contact-links a {
      display: inline-flex;
      align-items: center;
      gap: 0.75rem;
      font-size: 1.125rem;
      color: var(--color-text);
    }

    .contact-links a:hover {
      color: var(--color-mint-dark);
    }

    .contact-links svg {
      width: 24px;
      height: 24px;
      color: var(--color-mint-dark);
    }

    /* Compact CTA */
    .compact-cta {
      padding: var(--space-section) 0;
    }

    .cta-box {
      background: var(--color-mint-light);
      border-radius: var(--radius-lg);
      padding: 4rem 2rem;
      text-align: center;
      max-width: 48rem;
      margin: 0 auto;
    }

    .cta-box h2 {
      font-size: 2.5rem;
      margin-bottom: 1rem;
      color: var(--color-btn-bg);
    }

    .cta-box p {
      margin: 0 auto 2rem;
      color: var(--color-btn-bg);
      opacity: 0.9;
    }

    /* Responsive */
    @media (max-width: 768px) {
      .hero-billboard {
        padding: 4rem 1rem 2rem;
      }
      .hero-billboard h1 {
        font-size: 2.5rem;
      }
      .hero-media-frame img {
        aspect-ratio: 3 / 2;
      }
      .zigzag-row, .zigzag-row:nth-child(even) {
        flex-direction: column;
        gap: 2rem;
      }
      .table-list li {
        flex-direction: column;
        gap: 0.5rem;
        padding: 1.5rem 0;
      }
      .table-list .step-title {
        min-width: auto;
      }
      .contact-frame {
        padding: 2rem 1.5rem;
      }
      .cta-box {
        padding: 3rem 1.5rem;
      }
    }

/* --- nutrition.html --- */
:root {
            --bg-warm: #FDFDF9;
            --surface: #FFFFFF;
            --text-main: #111827;
            --text-muted: #4B5563;
            --accent-mint: #A5D6B7;
            --accent-mint-light: #E8F4EC;
            --border-color: #E5E7EB;
            --radius-lg: 24px;
            --shadow-soft: 0 16px 32px rgba(17, 24, 39, 0.04);
            --space-8: 8px;
            --space-16: 16px;
            --space-24: 24px;
            --space-32: 32px;
            --space-64: 64px;
            --space-96: 96px;
        }

        body {
            margin: 0;
            font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background-color: var(--bg-warm);
            color: var(--text-main);
            line-height: 1.6;
            -webkit-font-smoothing: antialiased;
        }

        main {
            display: flex;
            flex-direction: column;
            gap: var(--space-96);
            padding-bottom: var(--space-96);
        }

        .container {
            width: 100%;
            max-width: 1120px;
            margin: 0 auto;
            padding: 0 var(--space-24);
            box-sizing: border-box;
        }

        /* Typography */
        h1, h2, h3 {
            font-stretch: condensed;
            letter-spacing: -0.02em;
            margin: 0;
            color: var(--text-main);
        }

        h1 {
            font-size: clamp(2.5rem, 5vw, 4rem);
            line-height: 1.1;
            font-weight: 700;
            margin-bottom: var(--space-16);
        }

        h2 {
            font-size: clamp(1.75rem, 3vw, 2.5rem);
            line-height: 1.2;
            font-weight: 600;
            margin-bottom: var(--space-24);
        }

        p {
            margin: 0 0 var(--space-16) 0;
            color: var(--text-muted);
            font-size: 1.125rem;
            max-width: 60ch;
        }

        /* Hero Billboard */
        .hero-billboard {
            padding: 120px 24px 64px;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .hero-billboard .eyebrow {
            display: inline-block;
            text-transform: uppercase;
            font-size: 0.875rem;
            letter-spacing: 0.1em;
            font-weight: 600;
            color: var(--text-main);
            background-color: var(--accent-mint-light);
            padding: 6px 16px;
            border-radius: 100px;
            margin-bottom: var(--space-24);
        }

        .hero-billboard p {
            margin: 0 auto;
            font-size: clamp(1.125rem, 2vw, 1.375rem);
            color: var(--text-muted);
        }

        .hero-media {
            margin-top: var(--space-64);
            width: 100%;
            max-width: 960px;
            border-radius: var(--radius-lg);
            overflow: hidden;
            box-shadow: var(--shadow-soft);
        }

        .hero-media img {
            width: 100%;
            height: auto;
            display: block;
            aspect-ratio: 16/9;
            object-fit: cover;
        }

        /* Headings Logic */
        .side-rule-heading {
            display: flex;
            align-items: center;
            gap: var(--space-24);
        }

        .side-rule-heading::before {
            content: "";
            width: 64px;
            height: 4px;
            background-color: var(--accent-mint);
            border-radius: 2px;
        }

        .kicker-heading {
            text-transform: uppercase;
            font-size: 0.875rem;
            letter-spacing: 0.05em;
            color: var(--text-muted);
            margin-bottom: var(--space-8);
            display: block;
            font-weight: 600;
        }

        /* Broad Proof Area (Table/List Rhythm) */
        .nutrient-list-section .container {
            max-width: 800px;
        }

        .list-rhythm {
            margin-top: var(--space-64);
            display: flex;
            flex-direction: column;
            gap: 0;
        }

        .list-row {
            display: flex;
            flex-direction: column;
            padding: var(--space-32) 0;
            border-bottom: 1px solid var(--border-color);
            gap: var(--space-16);
        }

        .list-row:first-child {
            border-top: 1px solid var(--border-color);
        }

        .list-row h3 {
            font-size: 1.5rem;
            margin: 0;
        }

        .list-row p {
            margin: 0;
            font-size: 1rem;
            max-width: 100%;
        }

        @media (min-width: 640px) {
            .list-row {
                flex-direction: row;
                align-items: baseline;
                justify-content: space-between;
            }
            .list-row h3 {
                flex: 0 0 35%;
            }
            .list-row p {
                flex: 1;
            }
        }

        /* Narrative Zigzag Area */
        .zigzag-section .container {
            display: flex;
            flex-direction: column;
            gap: var(--space-96);
        }

        .zz-row {
            display: grid;
            grid-template-columns: 1fr;
            gap: var(--space-32);
            align-items: center;
        }

        .zz-text {
            max-width: 500px;
        }

        .zz-media {
            border-radius: var(--radius-lg);
            overflow: hidden;
            box-shadow: var(--shadow-soft);
            position: relative;
        }

        .zz-media::after {
            content: "";
            position: absolute;
            inset: 0;
            border: 1px solid rgba(0,0,0,0.05);
            border-radius: inherit;
            pointer-events: none;
        }

        .zz-media img {
            width: 100%;
            height: auto;
            display: block;
            aspect-ratio: 4/3;
            object-fit: cover;
        }

        @media (min-width: 768px) {
            .zz-row {
                grid-template-columns: 1fr 1fr;
                gap: var(--space-64);
            }
            .zz-row.flipped {
                direction: rtl;
            }
            .zz-row.flipped > * {
                direction: ltr;
            }
        }

        /* Framed CTA Zone */
        .cta-cluster {
            padding: 0 var(--space-24);
        }

        .framed-box {
            max-width: 800px;
            margin: 0 auto;
            background-color: var(--surface);
            border: 2px solid var(--accent-mint-light);
            border-radius: var(--radius-lg);
            padding: var(--space-64) var(--space-32);
            text-align: center;
            box-shadow: var(--shadow-soft);
        }

        .framed-box h2 {
            margin-bottom: var(--space-16);
        }

        .framed-box p {
            margin: 0 auto var(--space-32) auto;
        }

        .btn-primary {
            display: inline-block;
            background-color: var(--accent-mint);
            color: var(--text-main);
            padding: 14px 32px;
            border-radius: 12px;
            text-decoration: none;
            font-weight: 600;
            font-size: 1rem;
            transition: transform 0.2s ease, opacity 0.2s ease;
        }

        .btn-primary:hover {
            opacity: 0.9;
            transform: translateY(-1px);
        }

        .btn-primary:active {
            transform: translateY(1px);
        }

/* --- guides.html --- */
:root {
      --bg: #FFF7F3;
      --surface: #FFFFFF;
      --text: #111827;
      --text-light: #4B5563;
      --muted: #FDF2ED;
      --accent: #FFB89E;
      --accent-dark: #E0947A;
      --border: #F3E4DC;
      
      --font-headings: 'Arial Narrow', 'Franklin Gothic Medium', 'Roboto Condensed', system-ui, sans-serif;
      --font-body: system-ui, -apple-system, sans-serif;
      
      --sp-1: 8px;
      --sp-2: 16px;
      --sp-3: 24px;
      --sp-4: 32px;
      --sp-6: 48px;
      --sp-8: 64px;
      --sp-12: 96px;
      
      --radius-lg: 16px;
      --radius-btn: 12px;
    }

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

    body {
      font-family: var(--font-body);
      color: var(--text);
      background-color: var(--bg);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
    }

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

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

    h1, h2, h3, h4 {
      font-family: var(--font-headings);
      line-height: 1.1;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.02em;
    }

    /* Typographic Elements */
    .kicker {
      display: inline-block;
      padding-left: var(--sp-2);
      border-left: 4px solid var(--accent);
      font-size: 0.875rem;
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      margin-bottom: var(--sp-2);
      color: var(--text-light);
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background-color: var(--accent);
      color: var(--text);
      padding: 14px 28px;
      border-radius: var(--radius-btn);
      font-weight: 600;
      transition: background-color 0.2s ease, transform 0.2s ease;
      font-family: var(--font-headings);
      font-size: 1.1rem;
    }
    .btn:hover {
      background-color: var(--accent-dark);
      transform: translateY(-2px);
    }

    /* Billboard Hero */
    .hero-billboard {
      padding: var(--sp-12) var(--sp-3);
      text-align: center;
      max-width: 800px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 50vh;
    }
    .hero-eyebrow {
      font-size: 0.9rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      margin-bottom: var(--sp-3);
      color: var(--text-light);
      position: relative;
    }
    .hero-eyebrow::after {
      content: '';
      display: block;
      width: 40px;
      height: 2px;
      background: var(--accent);
      margin: var(--sp-1) auto 0;
    }
    .hero-title {
      font-size: clamp(2.5rem, 6vw, 4.5rem);
      margin-bottom: var(--sp-3);
      color: var(--text);
    }
    .hero-subline {
      font-size: 1.25rem;
      color: var(--text-light);
      max-width: 600px;
    }

    /* List Rhythm Section */
    .guide-table-section {
      background-color: var(--surface);
      padding: var(--sp-8) var(--sp-3);
    }
    .guide-table-container {
      max-width: 1000px;
      margin: 0 auto;
    }
    .guide-table {
      margin-top: var(--sp-6);
      border-top: 2px solid var(--border);
    }
    .guide-row {
      display: flex;
      flex-direction: column;
      padding: var(--sp-4) 0;
      border-bottom: 1px solid var(--border);
    }
    .guide-row-header {
      font-size: 1.5rem;
      margin-bottom: var(--sp-1);
    }
    .guide-row-meta {
      font-size: 0.9rem;
      color: var(--text-light);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-bottom: var(--sp-2);
    }
    .guide-row-desc {
      color: var(--text-light);
      margin-bottom: var(--sp-3);
    }
    .guide-row-action {
      font-weight: 600;
      color: var(--accent-dark);
      text-decoration: underline;
      text-underline-offset: 4px;
    }
    @media (min-width: 768px) {
      .guide-row {
        flex-direction: row;
        align-items: baseline;
        justify-content: space-between;
      }
      .guide-row-content {
        flex: 1;
        padding-right: var(--sp-4);
      }
      .guide-row-desc {
        margin-bottom: 0;
        max-width: 500px;
      }
      .guide-row-action-wrap {
        flex-shrink: 0;
      }
    }

    /* Zigzag Narrative Section */
    .zigzag-section {
      padding: var(--sp-12) var(--sp-3);
      background-color: var(--muted);
    }
    .zigzag-container {
      max-width: 1100px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: var(--sp-12);
    }
    .zigzag-row {
      display: flex;
      flex-direction: column;
      gap: var(--sp-6);
      align-items: center;
    }
    .zigzag-media {
      width: 100%;
    }
    .framed-image {
      border: 8px solid var(--surface);
      border-radius: var(--radius-lg);
      box-shadow: 0 10px 30px rgba(0,0,0,0.05);
      width: 100%;
      aspect-ratio: 4/3;
      object-fit: cover;
    }
    .zigzag-text {
      width: 100%;
    }
    .zigzag-title {
      font-size: 2.5rem;
      margin-bottom: var(--sp-3);
    }
    .zigzag-body {
      color: var(--text-light);
      margin-bottom: var(--sp-4);
      max-width: 450px;
    }
    @media (min-width: 768px) {
      .zigzag-row {
        flex-direction: row;
        gap: var(--sp-8);
      }
      .zigzag-row:nth-child(even) {
        flex-direction: row-reverse;
      }
      .zigzag-media, .zigzag-text {
        flex: 1;
      }
    }

    /* Compact CTA Zone */
    .cta-zone {
      padding: var(--sp-12) var(--sp-3);
      background-color: var(--surface);
      text-align: center;
    }
    .cta-frame {
      max-width: 700px;
      margin: 0 auto;
      padding: var(--sp-8) var(--sp-4);
      border: 2px dashed var(--border);
      border-radius: var(--radius-lg);
      background-color: var(--bg);
    }
    .cta-title {
      font-size: 2.5rem;
      margin-bottom: var(--sp-2);
    }
    .cta-desc {
      color: var(--text-light);
      margin-bottom: var(--sp-4);
      font-size: 1.1rem;
    }

/* --- terms-conditions.html --- */
:root {
            --bg: #FFF7F3;
            --surface: #FFFFFF;
            --text: #111827;
            --text-muted: #4B5563;
            --accent: #047857;
            --border: #E5E7EB;
            --radius: 16px;
        }
        
        body {
            background-color: var(--bg);
            color: var(--text);
            font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            margin: 0;
            -webkit-font-smoothing: antialiased;
        }

        .legal-main {
            padding-bottom: 5rem;
        }

        .hero-billboard {
            padding: 5rem 1.5rem 6rem;
            text-align: center;
            position: relative;
        }

        .hero-billboard::before {
            content: "";
            position: absolute;
            inset: 0;
            opacity: 0.3;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
            pointer-events: none;
        }

        .eyebrow {
            display: block;
            font-size: 0.875rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--accent);
            margin-bottom: 1rem;
        }

        .hero-title {
            font-family: "Arial Narrow", "Helvetica Condensed", system-ui, sans-serif;
            font-size: clamp(2rem, 5vw, 3rem);
            margin: 0 0 1rem;
            line-height: 1.1;
            letter-spacing: -0.02em;
        }

        .hero-lead {
            max-width: 50ch;
            margin: 0 auto;
            color: var(--text-muted);
            font-size: 1.125rem;
            line-height: 1.6;
        }

        .legal-wrapper {
            max-width: 800px;
            margin: -3rem auto 0;
            padding: 0 1.5rem;
            position: relative;
            z-index: 10;
        }

        .legal-card {
            background-color: var(--surface);
            border-radius: var(--radius);
            padding: 3rem clamp(1.5rem, 5vw, 4rem);
            box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
        }

        .legal-section {
            margin-bottom: 3rem;
        }

        .legal-section:last-child {
            margin-bottom: 0;
        }

        .side-rule {
            border-left: 4px solid var(--accent);
            padding-left: 1rem;
            font-family: "Arial Narrow", "Helvetica Condensed", system-ui, sans-serif;
            font-size: 1.5rem;
            margin-top: 0;
            margin-bottom: 1.25rem;
            letter-spacing: -0.01em;
        }

        .prose p, .prose li {
            max-width: 65ch;
            line-height: 1.7;
            color: var(--text-muted);
            margin-top: 0;
            margin-bottom: 1.25rem;
        }

        .prose ul {
            padding-left: 1.5rem;
            margin-bottom: 1.25rem;
        }

        .prose li::marker {
            color: var(--accent);
        }

        a.content-link {
            color: var(--accent);
            text-decoration: underline;
            text-underline-offset: 3px;
            font-weight: 500;
        }

        a.content-link:hover {
            color: var(--text);
        }

        .contact-action-zone {
            background-color: var(--bg);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 2rem;
            margin-top: 3rem;
        }

        .contact-action-zone h2 {
            font-family: "Arial Narrow", "Helvetica Condensed", system-ui, sans-serif;
            font-size: 1.25rem;
            margin: 0 0 1.5rem;
        }

        .contact-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1.5rem;
        }

        .contact-item {
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
        }

        .contact-label {
            font-size: 0.875rem;
            font-weight: 600;
            color: var(--text);
            text-transform: uppercase;
            letter-spacing: 0.02em;
        }

        @media (max-width: 768px) {
            .hero-billboard {
                padding: 4rem 1.5rem;
            }
            .legal-wrapper {
                margin-top: 0;
                padding: 0;
            }
            .legal-card {
                border-radius: 0;
                box-shadow: none;
                border-top: 1px solid var(--border);
                border-bottom: 1px solid var(--border);
            }
        }

/* --- privacy-policy.html --- */
:root {
      --bg-color: #FFF7F3;
      --surface-color: #FFFFFF;
      --text-main: #111827;
      --text-muted: #4B5563;
      --accent-mint: #98C9A3;
      --accent-mint-dark: #7DBA8A;
      --radius-lg: 16px;
      --space-1: 0.5rem;
      --space-2: 1rem;
      --space-3: 1.5rem;
      --space-4: 2rem;
      --space-6: 3rem;
      --space-8: 4rem;
    }
    body {
      font-family: system-ui, -apple-system, sans-serif;
      background-color: var(--bg-color);
      background-image: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)" opacity="0.03"/%3E%3C/svg%3E');
      color: var(--text-main);
      margin: 0;
      padding: 0;
      line-height: 1.6;
    }
    .site-main {
      padding: var(--space-8) var(--space-2);
    }
    .legal-wrapper {
      max-width: 800px;
      margin: 0 auto;
      background: var(--surface-color);
      border-radius: var(--radius-lg);
      padding: var(--space-8);
      box-shadow: 0 10px 25px -5px rgba(0,0,0,0.05);
    }
    .kicker {
      display: inline-block;
      font-size: 0.875rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--text-muted);
      border-bottom: 2px solid var(--accent-mint);
      margin-bottom: var(--space-2);
      padding-bottom: var(--space-1);
      font-weight: 600;
    }
    .legal-wrapper h1 {
      font-family: 'Arial Narrow', system-ui, sans-serif;
      font-stretch: condensed;
      font-size: 2.5rem;
      margin-top: 0;
      margin-bottom: var(--space-6);
      letter-spacing: -0.02em;
      color: var(--text-main);
    }
    .legal-content h2 {
      font-family: 'Arial Narrow', system-ui, sans-serif;
      font-stretch: condensed;
      font-size: 1.5rem;
      margin-top: var(--space-6);
      margin-bottom: var(--space-3);
      border-left: 4px solid var(--accent-mint);
      padding-left: var(--space-2);
      color: var(--text-main);
      line-height: 1.2;
    }
    .legal-content p, 
    .legal-content ul {
      max-width: 65ch;
      color: var(--text-muted);
      margin-bottom: var(--space-3);
    }
    .legal-content li {
      margin-bottom: var(--space-1);
    }
    .legal-content a {
      color: var(--text-main);
      text-decoration-color: var(--accent-mint);
      text-decoration-thickness: 2px;
      text-underline-offset: 4px;
      transition: all 0.2s ease;
    }
    .legal-content a:hover {
      background-color: var(--accent-mint);
      color: var(--text-main);
      text-decoration-color: transparent;
    }
    .contact-block {
      background-color: var(--bg-color);
      padding: var(--space-4);
      border-radius: var(--radius-lg);
      margin-top: var(--space-4);
    }
    .contact-block p {
      margin-bottom: var(--space-1);
    }
    .contact-block p:last-child {
      margin-bottom: 0;
    }
    @media (max-width: 768px) {
      .site-main {
        padding: var(--space-4) var(--space-2);
      }
      .legal-wrapper {
        padding: var(--space-4) var(--space-3);
      }
      .legal-wrapper h1 {
        font-size: 2rem;
      }
    }

/* Generated typography guard: keeps long localized words inside responsive layouts. */
html { overflow-wrap: break-word; }
body { overflow-x: hidden; }
h1, h2, h3, h4, h5, h6, p, li, blockquote, figcaption, label, legend, summary, dd, dt, th, td { overflow-wrap: anywhere; word-break: normal; hyphens: auto; }
h1, h2, h3, h4, h5, h6 { text-wrap: balance; max-width: 100%; }
p, li, blockquote, figcaption { text-wrap: pretty; }
/* Keep narrow localized action labels readable; do not allow letter-by-letter CTA pills. */
a, button, [role="button"] { min-width: 0; max-width: 100%; overflow-wrap: normal; word-break: normal; hyphens: auto; }
main :is(p, li, blockquote, figcaption, dd, dt, small) a { overflow-wrap: anywhere; word-break: normal; }
main :is(a, button, [role="button"]):is([class*="px-"], [class*="rounded-"], [class*="border"]) { white-space: normal; line-height: 1.15; text-align: center; }
main :is(a, button, [role="button"]):not([aria-label]):is([class*="rounded-full"], [class*="aspect-square"], [class*="w-12"], [class*="w-14"], [class*="w-16"], [class*="w-20"]) { width: auto; height: auto; aspect-ratio: auto; min-width: min(10rem, 100%); min-height: 2.75rem; padding-left: max(1rem, 1em); padding-right: max(1rem, 1em); }
main :is(a, button, [role="button"]):is([style*="writing-mode"], [class*="vertical"]) { writing-mode: horizontal-tb !important; text-orientation: mixed !important; }
@media (max-width: 640px) { main :is(a, button, [role="button"]):not([aria-label]):is([class*="rounded-full"], [class*="aspect-square"], [class*="w-12"], [class*="w-14"], [class*="w-16"], [class*="w-20"]) { width: 100%; min-width: 0; } }
h1[class*="whitespace-nowrap"], h2[class*="whitespace-nowrap"], h3[class*="whitespace-nowrap"], p[class*="whitespace-nowrap"], a[class*="whitespace-nowrap"], button[class*="whitespace-nowrap"] { white-space: normal; }
.site-brand span, .site-nav__link, .site-mobileNav__link, .site-footer__link, .site-footer__contactLink { overflow-wrap: anywhere; word-break: normal; hyphens: auto; }

/* g2 palette ssot start */
:root {
  --g2-palette-dark: #059669;
  --g2-palette-light: #1f2937;
  --g2-palette-accent: #059669;
  --g2-palette-text: #1f2937;
  --g2-color-primary: var(--g2-palette-accent);
  --g2-color-accent: var(--g2-palette-accent);
  --g2-color-text: var(--g2-palette-text);
  --g2-palette-text-on-dark: #1f2937;
}
/* g2 palette ssot end */