/* Organic Botanical & Gut-Health Color Palette (WCAG AAA Compliant) */
        :root {
            --bg-oat: #f5f6f8;
            --bg-cream-card: #ffffff;
            --bg-sage-tint: #f0f2f5;
            --bg-sage-elevated: #e5e8ed;
            --forest-deep: #171c26;
            --forest-primary: #941c28;
            --emerald-botanical: #b21e30;
            --emerald-bright: #c62b3d;
            --amber-grain: #ac2130;
            --amber-soft: #fcebed;
            --text-primary: #171c26;
            --text-secondary: #414957;
            --text-muted: #596372;
            --border-organic: rgba(72, 80, 96, 0.14);
            --border-strong: rgba(72, 80, 96, 0.28);
            --shadow-soft: 0 12px 32px rgba(72, 80, 96, 0.07);
            --shadow-hover: 0 16px 40px rgba(72, 80, 96, 0.12);
            --botanical-gradient: linear-gradient(135deg, #941c28 0%, #b21e30 100%);
            --grain-gradient: linear-gradient(135deg, #be2537 0%, #ac2130 100%);
        }

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

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            background-color: var(--bg-oat);
            background-image: 
                radial-gradient(circle at 12% 10%, rgba(72, 80, 96, 0.08) 0%, transparent 40%),
                radial-gradient(circle at 88% 75%, rgba(72, 80, 96, 0.06) 0%, transparent 45%);
            color: var(--text-primary);
            line-height: 1.65;
            overflow-x: hidden;
        }

        /* Top Botanical Status Bar */
        .top-notice {
            background: var(--forest-deep);
            border-bottom: 1px solid var(--border-organic);
            padding: 0.55rem 1.25rem;
            text-align: center;
            font-size: 0.8125rem;
            color: #e8ebef;
            letter-spacing: 0.03em;
        }

        .top-notice strong {
            color: #ffffff;
            font-family: 'JetBrains Mono', monospace;
        }

        .navbar {
            position: sticky;
            top: 0;
            z-index: 50;
            background: rgba(250, 247, 240, 0.92);
            backdrop-filter: blur(14px);
            border-bottom: 1px solid var(--border-organic);
        }

        .nav-container {
            max-width: 1240px;
            margin: 0 auto;
            padding: 0.95rem 1.5rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .brand-logo {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            text-decoration: none;
        }

        .brand-emblem {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            background: var(--botanical-gradient);
            border: 1px solid #ccd1d9;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            font-size: 1.25rem;
            color: #ffffff;
            box-shadow: 0 4px 14px rgba(72, 80, 96, 0.25);
        }

        .brand-text {
            font-size: 1.35rem;
            font-weight: 800;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            color: var(--forest-primary);
        }

        .brand-badge {
            font-size: 0.68rem;
            font-family: 'JetBrains Mono', monospace;
            padding: 0.15rem 0.5rem;
            border-radius: 4px;
            background: var(--bg-sage-elevated);
            border: 1px solid var(--emerald-bright);
            color: var(--forest-primary);
            font-weight: 600;
        }

        .nav-links {
            display: flex;
            align-items: center;
            gap: 1.15rem;
            list-style: none;
        }

        .nav-links a {
            color: var(--text-secondary);
            text-decoration: none;
            font-size: 0.84rem;
            font-weight: 600;
            transition: color 0.2s ease;
        }

        .nav-links a:hover {
            color: var(--emerald-botanical);
        }

        .nav-actions {
            display: flex;
            align-items: center;
            gap: 0.65rem;
        }

        .btn-cta {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            padding: 0.65rem 1.3rem;
            border-radius: 8px;
            font-weight: 700;
            font-size: 0.875rem;
            text-decoration: none;
            transition: all 0.25s ease;
            cursor: pointer;
            font-family: inherit;
        }

        .btn-crimson {
            background: var(--botanical-gradient);
            color: #ffffff;
            border: 1px solid #941c28;
            box-shadow: 0 4px 16px rgba(72, 80, 96, 0.28);
        }

        .btn-crimson:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 22px rgba(72, 80, 96, 0.38);
            filter: brightness(1.06);
        }

        .btn-silver-outline {
            background: var(--bg-cream-card);
            color: var(--forest-primary);
            border: 1px solid var(--border-strong);
        }

        .btn-silver-outline:hover {
            background: var(--bg-sage-tint);
            transform: translateY(-2px);
        }

        /* Layout Container */
        .container {
            max-width: 1240px;
            margin: 0 auto;
            padding: 0 1.5rem;
        }

        /* Hero Split Architecture */
        .hero-section {
            padding: 4.25rem 0 3.5rem;
            border-bottom: 1px solid var(--border-organic);
        }

        .hero-grid {
            display: grid;
            grid-template-columns: 1.15fr 0.85fr;
            gap: 3rem;
            align-items: center;
        }

        .protocol-pill {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.35rem 0.9rem;
            background: var(--bg-sage-elevated);
            border: 1px solid rgba(72, 80, 96, 0.25);
            border-radius: 999px;
            font-size: 0.78rem;
            font-weight: 700;
            color: var(--forest-primary);
            margin-bottom: 1.25rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .protocol-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--emerald-botanical);
            box-shadow: 0 0 8px var(--emerald-bright);
        }

        .hero-title {
            font-size: clamp(2rem, 3.8vw, 3.05rem);
            font-weight: 800;
            line-height: 1.18;
            margin-bottom: 1.25rem;
            color: var(--forest-deep);
        }

        .hero-title span {
            background: linear-gradient(90deg, #941c28 0%, #b21e30 55%, #ac2130 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .hero-lead {
            font-size: 1.05rem;
            color: var(--text-secondary);
            margin-bottom: 2rem;
            max-width: 640px;
        }

        .hero-cta-group {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            margin-bottom: 2.25rem;
        }

        .hero-metrics {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1rem;
            padding-top: 1.5rem;
            border-top: 1px solid var(--border-organic);
        }

        .metric-card {
            background: var(--bg-cream-card);
            border: 1px solid var(--border-organic);
            border-radius: 10px;
            padding: 1rem;
            box-shadow: var(--shadow-soft);
        }

        .metric-val {
            font-family: 'JetBrains Mono', monospace;
            font-size: 1.45rem;
            font-weight: 700;
            color: var(--forest-primary);
        }

        .metric-label {
            font-size: 0.78rem;
            color: var(--text-muted);
            margin-top: 0.2rem;
            font-weight: 500;
        }

        /* Interactive Diagnostic Widget */
        .diagnostic-panel {
            background: var(--bg-cream-card);
            border: 2px solid var(--emerald-botanical);
            border-radius: 16px;
            padding: 1.75rem;
            box-shadow: var(--shadow-hover);
            position: relative;
        }

        .diagnostic-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.25rem;
            padding-bottom: 0.85rem;
            border-bottom: 1px solid var(--border-organic);
        }

        .diagnostic-title {
            font-size: 1.05rem;
            font-weight: 700;
            color: var(--forest-deep);
        }

        .diagnostic-tag {
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.72rem;
            font-weight: 700;
            color: var(--forest-primary);
            background: var(--bg-sage-elevated);
            padding: 0.2rem 0.6rem;
            border-radius: 4px;
            border: 1px solid rgba(72, 80, 96, 0.3);
        }

        .calc-group {
            margin-bottom: 1.15rem;
        }

        .calc-label {
            display: block;
            font-size: 0.82rem;
            font-weight: 600;
            color: var(--text-secondary);
            margin-bottom: 0.45rem;
        }

        .calc-select, .calc-input, .calc-textarea {
            width: 100%;
            padding: 0.7rem 0.9rem;
            border-radius: 8px;
            background: var(--bg-oat);
            border: 1px solid var(--border-strong);
            color: var(--text-primary);
            font-family: inherit;
            font-size: 0.9rem;
            transition: border-color 0.2s;
        }

        .calc-select:focus, .calc-input:focus, .calc-textarea:focus {
            outline: none;
            border-color: var(--emerald-botanical);
            background: #ffffff;
        }

        .calc-result-box {
            background: var(--bg-sage-tint);
            border-left: 4px solid var(--emerald-botanical);
            border-radius: 8px;
            padding: 1rem;
            margin-top: 1.25rem;
            margin-bottom: 1.25rem;
        }

        .calc-result-title {
            font-size: 0.78rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--emerald-botanical);
            font-weight: 700;
            margin-bottom: 0.35rem;
        }

        .calc-result-output {
            font-size: 0.92rem;
            color: var(--forest-deep);
            font-weight: 500;
        }

        /* Section Generic Styling */
        .section-block {
            padding: 4.5rem 0;
            border-bottom: 1px solid var(--border-organic);
        }

        .section-header {
            max-width: 780px;
            margin-bottom: 2.75rem;
        }

        .section-eyebrow {
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.8rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--amber-grain);
            margin-bottom: 0.5rem;
        }

        .section-heading {
            font-size: clamp(1.6rem, 2.8vw, 2.25rem);
            font-weight: 800;
            color: var(--forest-deep);
            margin-bottom: 0.85rem;
        }

        .section-desc {
            color: var(--text-secondary);
            font-size: 1rem;
        }

        /* 3-Column Bento Grid */
        .bento-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.5rem;
        }

        .bento-card {
            background: var(--bg-cream-card);
            border: 1px solid var(--border-organic);
            border-radius: 14px;
            padding: 1.75rem;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            box-shadow: var(--shadow-soft);
            transition: transform 0.25s ease, border-color 0.25s ease;
        }

        .bento-card:hover {
            transform: translateY(-4px);
            border-color: var(--emerald-bright);
        }

        .bento-num {
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.8rem;
            font-weight: 700;
            color: var(--forest-primary);
            background: var(--bg-sage-elevated);
            border: 1px solid rgba(72, 80, 96, 0.3);
            display: inline-block;
            padding: 0.25rem 0.65rem;
            border-radius: 6px;
            margin-bottom: 1rem;
            width: fit-content;
        }

        .bento-card h3 {
            font-size: 1.2rem;
            font-weight: 700;
            margin-bottom: 0.75rem;
            color: var(--forest-deep);
        }

        .bento-card p {
            font-size: 0.925rem;
            color: var(--text-secondary);
            margin-bottom: 1.25rem;
        }

        .bento-meta {
            font-size: 0.8rem;
            font-family: 'JetBrains Mono', monospace;
            color: var(--text-muted);
            padding-top: 0.85rem;
            border-top: 1px dashed var(--border-strong);
        }

        /* Filterable Data Table */
        .table-controls {
            display: flex;
            flex-wrap: wrap;
            gap: 0.75rem;
            margin-bottom: 1.5rem;
        }

        .filter-btn {
            background: var(--bg-cream-card);
            color: var(--text-secondary);
            border: 1px solid var(--border-strong);
            padding: 0.5rem 1rem;
            border-radius: 8px;
            font-size: 0.85rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .filter-btn.active, .filter-btn:hover {
            background: var(--forest-primary);
            color: #ffffff;
            border-color: var(--forest-primary);
        }

        .table-wrapper {
            overflow-x: auto;
            border-radius: 12px;
            border: 1px solid var(--border-strong);
            background: var(--bg-cream-card);
            box-shadow: var(--shadow-soft);
        }

        table.nutrition-table {
            width: 100%;
            border-collapse: collapse;
            text-align: left;
            font-size: 0.9rem;
        }

        table.nutrition-table th {
            background: var(--bg-sage-elevated);
            color: var(--forest-deep);
            font-weight: 700;
            padding: 1rem 1.15rem;
            border-bottom: 2px solid var(--border-strong);
            white-space: nowrap;
        }

        table.nutrition-table td {
            padding: 0.95rem 1.15rem;
            border-bottom: 1px solid var(--border-organic);
            color: var(--text-secondary);
        }

        table.nutrition-table tr:hover td {
            background: var(--bg-sage-tint);
            color: var(--forest-deep);
        }

        .gi-badge {
            display: inline-block;
            padding: 0.2rem 0.55rem;
            border-radius: 4px;
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.78rem;
            font-weight: 700;
        }

        .gi-low {
            background: #e8ebef;
            color: #941c28;
            border: 1px solid #ccd1d9;
        }

        .gi-med {
            background: #fcebed;
            color: #92400e;
            border: 1px solid #fcd34d;
        }

        .gi-high {
            background: #fee2e2;
            color: #991b1b;
            border: 1px solid #fca5a5;
        }

        /* NEW UPGRADE IDEA 1: Interactive 7-Day Meal & Prebiotic Planner */
        .meal-planner-box {
            background: var(--bg-cream-card);
            border: 1px solid var(--border-strong);
            border-radius: 16px;
            padding: 2rem;
            box-shadow: var(--shadow-soft);
        }

        .day-tabs {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-bottom: 1.75rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid var(--border-organic);
        }

        .day-tab-btn {
            flex: 1;
            min-width: 110px;
            padding: 0.65rem 0.85rem;
            border-radius: 8px;
            border: 1px solid var(--border-strong);
            background: var(--bg-oat);
            color: var(--text-secondary);
            font-weight: 700;
            font-size: 0.84rem;
            cursor: pointer;
            transition: all 0.2s;
            text-align: center;
        }

        .day-tab-btn.active, .day-tab-btn:hover {
            background: var(--emerald-botanical);
            color: #ffffff;
            border-color: var(--forest-primary);
        }

        .meal-cards-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.25rem;
            margin-bottom: 1.25rem;
        }

        .meal-slot-card {
            background: var(--bg-sage-tint);
            border: 1px solid rgba(72, 80, 96, 0.22);
            border-radius: 12px;
            padding: 1.35rem;
        }

        .meal-slot-time {
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.75rem;
            font-weight: 700;
            color: var(--amber-grain);
            text-transform: uppercase;
            margin-bottom: 0.4rem;
            display: block;
        }

        .meal-slot-card h4 {
            font-size: 1.05rem;
            color: var(--forest-deep);
            margin-bottom: 0.5rem;
        }

        .meal-slot-card p {
            font-size: 0.88rem;
            color: var(--text-secondary);
        }

        .meal-summary-bar {
            background: var(--amber-soft);
            border: 1px solid #f59e0b;
            border-radius: 10px;
            padding: 0.9rem 1.25rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 1rem;
            font-size: 0.88rem;
            color: #78350f;
            font-weight: 600;
        }

        /* NEW UPGRADE IDEA 2: Hidden Gluten Label Scanner & E-Number Decoder */
        .scanner-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 2rem;
            align-items: start;
        }

        .scanner-card {
            background: var(--bg-cream-card);
            border: 1px solid var(--border-strong);
            border-radius: 16px;
            padding: 1.75rem;
            box-shadow: var(--shadow-soft);
        }

        .scanner-status-badge {
            display: inline-block;
            padding: 0.3rem 0.75rem;
            border-radius: 99px;
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.78rem;
            font-weight: 700;
            margin-bottom: 0.75rem;
        }

        .status-danger {
            background: #fee2e2;
            color: #991b1b;
            border: 1px solid #f87171;
        }

        .status-caution {
            background: #fcebed;
            color: #92400e;
            border: 1px solid #fbbf24;
        }

        .status-safe {
            background: #e8ebef;
            color: #941c28;
            border: 1px solid #52b788;
        }

        .quick-chips {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-top: 0.75rem;
        }

        .chip-btn {
            background: var(--bg-sage-tint);
            border: 1px solid var(--border-strong);
            color: var(--forest-primary);
            padding: 0.35rem 0.7rem;
            border-radius: 6px;
            font-size: 0.78rem;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.2s;
        }

        .chip-btn:hover {
            background: var(--bg-sage-elevated);
        }

        /* Arahan & Panduan Praktis (4-Phase Roadmap Grid) */
        .directive-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1.25rem;
        }

        .directive-card {
            background: var(--bg-cream-card);
            border: 1px solid var(--border-organic);
            border-top: 4px solid var(--emerald-botanical);
            border-radius: 12px;
            padding: 1.5rem;
            box-shadow: var(--shadow-soft);
        }

        .directive-step {
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.75rem;
            font-weight: 700;
            color: var(--amber-grain);
            text-transform: uppercase;
            letter-spacing: 0.06em;
            margin-bottom: 0.5rem;
            display: block;
        }

        .directive-card h3 {
            font-size: 1.08rem;
            color: var(--forest-deep);
            margin-bottom: 0.65rem;
        }

        .directive-card p {
            font-size: 0.88rem;
            color: var(--text-secondary);
            margin-bottom: 1rem;
        }

        .directive-metric {
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.76rem;
            font-weight: 600;
            color: var(--forest-primary);
            background: var(--bg-sage-tint);
            padding: 0.45rem 0.65rem;
            border-radius: 6px;
            border: 1px solid var(--border-organic);
        }

        /* Editorial Deep-Dive Two Column */
        .editorial-grid {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 2.5rem;
            align-items: start;
        }

        .article-prose h3 {
            font-size: 1.35rem;
            color: var(--forest-deep);
            margin: 1.75rem 0 0.75rem;
        }

        .article-prose h3:first-child {
            margin-top: 0;
        }

        .article-prose p {
            color: var(--text-secondary);
            margin-bottom: 1.15rem;
        }

        .article-prose ul {
            margin: 1rem 0 1.5rem 1.25rem;
            color: var(--text-secondary);
        }

        .article-prose li {
            margin-bottom: 0.6rem;
        }

        .article-prose strong {
            color: var(--forest-deep);
        }

        .sidebar-card {
            background: var(--bg-cream-card);
            border: 2px solid var(--emerald-botanical);
            border-radius: 14px;
            padding: 1.75rem;
            position: sticky;
            top: 90px;
            box-shadow: var(--shadow-soft);
        }

        .sidebar-card h4 {
            font-size: 1.15rem;
            color: var(--forest-deep);
            margin-bottom: 0.75rem;
        }

        .checklist-items {
            list-style: none;
            margin: 1rem 0 1.5rem;
        }

        .checklist-items li {
            font-size: 0.88rem;
            color: var(--text-secondary);
            padding: 0.55rem 0;
            border-bottom: 1px solid var(--border-organic);
            display: flex;
            align-items: center;
            gap: 0.6rem;
        }

        /* Berbagi Ide & Inovasi Resep + Masukan / Komentar */
        .community-layout {
            display: grid;
            grid-template-columns: 1.25fr 0.75fr;
            gap: 2.25rem;
            align-items: start;
        }

        .idea-cards-list {
            display: flex;
            flex-direction: column;
            gap: 1.25rem;
        }

        .idea-card {
            background: var(--bg-cream-card);
            border: 1px solid var(--border-organic);
            border-radius: 14px;
            padding: 1.5rem;
            box-shadow: var(--shadow-soft);
            transition: border-color 0.2s ease;
        }

        .idea-card:hover {
            border-color: var(--emerald-botanical);
        }

        .idea-card-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 1rem;
            margin-bottom: 0.75rem;
            flex-wrap: wrap;
        }

        .idea-author {
            display: flex;
            align-items: center;
            gap: 0.65rem;
        }

        .author-avatar {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            background: var(--botanical-gradient);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 0.85rem;
            color: #ffffff;
        }

        .author-info strong {
            display: block;
            font-size: 0.92rem;
            color: var(--forest-deep);
        }

        .author-info span {
            font-size: 0.76rem;
            color: var(--text-muted);
        }

        .idea-category-badge {
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.72rem;
            font-weight: 700;
            padding: 0.2rem 0.6rem;
            border-radius: 99px;
            background: var(--bg-sage-elevated);
            border: 1px solid rgba(72, 80, 96, 0.35);
            color: var(--forest-primary);
        }

        .idea-card h4 {
            font-size: 1.05rem;
            color: var(--forest-deep);
            margin-bottom: 0.5rem;
        }

        .idea-card p {
            font-size: 0.9rem;
            color: var(--text-secondary);
            margin-bottom: 1rem;
        }

        .idea-card-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-top: 0.85rem;
            border-top: 1px solid var(--border-organic);
            font-size: 0.8rem;
            color: var(--text-muted);
        }

        .upvote-btn {
            background: var(--bg-sage-tint);
            border: 1px solid var(--border-strong);
            color: var(--forest-primary);
            padding: 0.35rem 0.75rem;
            border-radius: 6px;
            font-size: 0.8rem;
            font-weight: 700;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            transition: all 0.2s;
        }

        .upvote-btn:hover, .upvote-btn.voted {
            background: var(--forest-primary);
            border-color: var(--forest-primary);
            color: #ffffff;
        }

        .feedback-form-panel {
            background: var(--bg-cream-card);
            border: 2px solid var(--emerald-botanical);
            border-radius: 16px;
            padding: 1.75rem;
            position: sticky;
            top: 90px;
            box-shadow: var(--shadow-hover);
        }

        .feedback-form-panel h3 {
            font-size: 1.2rem;
            color: var(--forest-deep);
            margin-bottom: 0.4rem;
        }

        .feedback-form-panel p {
            font-size: 0.85rem;
            color: var(--text-secondary);
            margin-bottom: 1.25rem;
        }

        .toast-feedback {
            display: none;
            background: #e8ebef;
            border: 1px solid #c62b3d;
            color: #941c28;
            padding: 0.75rem 1rem;
            border-radius: 8px;
            font-size: 0.85rem;
            font-weight: 600;
            margin-bottom: 1rem;
        }

        /* Interactive Glossary Search */
        .glossary-bar {
            display: flex;
            gap: 1rem;
            margin-bottom: 1.5rem;
            flex-wrap: wrap;
        }

        .glossary-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.25rem;
        }

        .glossary-card {
            background: var(--bg-cream-card);
            border: 1px solid var(--border-organic);
            border-radius: 10px;
            padding: 1.25rem;
            box-shadow: var(--shadow-soft);
        }

        .glossary-card dt {
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.95rem;
            font-weight: 700;
            color: var(--emerald-botanical);
            margin-bottom: 0.4rem;
        }

        .glossary-card dd {
            font-size: 0.86rem;
            color: var(--text-secondary);
        }

        /* FAQ Grid */
        .faq-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1.5rem;
        }

        .faq-item {
            background: var(--bg-cream-card);
            border: 1px solid var(--border-organic);
            border-radius: 12px;
            padding: 1.5rem;
            box-shadow: var(--shadow-soft);
        }

        .faq-item h3 {
            font-size: 1.05rem;
            color: var(--forest-deep);
            margin-bottom: 0.65rem;
            line-height: 1.4;
        }

        .faq-item p {
            font-size: 0.9rem;
            color: var(--text-secondary);
        }

        /* CTA Banner */
        .cta-banner {
            background: var(--botanical-gradient);
            border: 1px solid var(--forest-deep);
            border-radius: 18px;
            padding: 3rem 2.5rem;
            margin: 4rem 0 1rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 2rem;
            flex-wrap: wrap;
            box-shadow: var(--shadow-hover);
        }

        .cta-banner-content {
            max-width: 680px;
        }

        .cta-banner h2 {
            font-size: 1.85rem;
            color: #ffffff;
            margin-bottom: 0.65rem;
        }

        .cta-banner p {
            color: #e8ebef;
        }

        .btn-amber {
            background: var(--grain-gradient);
            color: #ffffff;
            border: 1px solid #ffffff;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
        }

        .btn-amber:hover {
            transform: translateY(-2px);
            filter: brightness(1.08);
        }

        /* Footer */
        footer {
            background: var(--forest-deep);
            border-top: 1px solid var(--border-organic);
            padding: 3.5rem 0 2rem;
            font-size: 0.875rem;
            color: #e2e6ee;
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 1.5fr 1fr 1fr 1fr;
            gap: 2rem;
            margin-bottom: 2.5rem;
        }

        .footer-col h4 {
            color: #ffffff;
            font-size: 0.95rem;
            margin-bottom: 1rem;
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }

        .footer-col ul {
            list-style: none;
        }

        .footer-col li {
            margin-bottom: 0.55rem;
        }

        .footer-col a {
            color: #e2e6ee;
            text-decoration: none;
            transition: color 0.2s;
        }

        .footer-col a:hover {
            color: #ffffff;
        }

        .footer-bottom {
            padding-top: 1.75rem;
            border-top: 1px solid rgba(216, 243, 220, 0.15);
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 1rem;
        }

        @media (max-width: 960px) {
            .hero-grid, .bento-grid, .meal-cards-grid, .scanner-grid, .editorial-grid, .directive-grid, .community-layout, .glossary-grid, .faq-grid, .footer-grid {
                grid-template-columns: 1fr;
            }
            .nav-links {
                display: none;
            }
        }
    
:root{--border-organic:#dce0e6;--border-strong:#b7bec9}html{scroll-padding-top:120px}body{background:#f5f6f8}a{color:#a51e30}button{font:inherit;cursor:pointer;background:#a91e30;color:white;padding:12px 20px;border:1px solid transparent;border-radius:8px;font-weight:700}button:hover{filter:brightness(.92)}:focus-visible{outline:3px solid #3467bd;outline-offset:4px}h1,h2,h3{line-height:1.25;letter-spacing:-.025em}h2{margin-bottom:18px}p{margin-bottom:16px}.navbar{background:rgba(255,255,255,.96)}.brand-emblem{background:#fff;padding:4px;border-color:#d6dbe3}.brand-emblem img{width:100%}.brand-long{max-width:190px;max-height:46px}.brand-badge{display:block;width:max-content;font-size:9px;letter-spacing:2px;border:0;background:none;padding:0;color:#606978}.nav-links{gap:24px}.hero-section{position:relative;background:linear-gradient(125deg,#fff 0%,#f6f7f9 60%,#dce0e7 100%);padding:65px 0}.hero-title{font-size:clamp(2.2rem,4.6vw,4rem);letter-spacing:-.055em}.hero-title span{background:none;-webkit-text-fill-color:#ac2130;color:#ac2130}.hero-grid{gap:48px;grid-template-columns:1.05fr 1fr}.hero-image{width:100%;height:auto;display:block;border-radius:20px;border:1px solid #c4cbd6;box-shadow:0 24px 60px #222b3c20}.hero-figure{position:relative}.hero-figure figcaption{font:11px monospace;letter-spacing:2px;margin:16px 0;color:#596372}.protocol-pill{background:#fff;border-color:#d3d8e0;font-size:10px;letter-spacing:1.7px}.hero-lead{font-size:1rem}.metric-val{font-size:1rem}.metric-label{font-size:12px}.section-block{padding:56px 0}.section-heading{font-size:clamp(1.65rem,3vw,2.5rem)}.section-eyebrow{color:#a91e30;letter-spacing:2px;font:11px monospace;margin-bottom:14px}.section-desc{max-width:760px}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.card{padding:26px;border:1px solid #dce0e6;background:#fff;border-radius:14px;margin:18px 0}.cards .card{margin:0}.card h3{margin:12px 0}.number{font:12px monospace;color:#a91e30;letter-spacing:2px}.callout{border-left:4px solid #ac2130;padding:20px 24px;background:#fff;max-width:900px}.callout p:last-child{margin:0}.muted{color:#626c7b;font-size:13px}.section-tint{background:#e9ecf1}.split{display:grid;grid-template-columns:1fr 1fr;gap:32px}.tag{font:11px monospace;color:#a51e30;display:inline-block;background:#fcebed;padding:6px 10px;border-radius:4px;margin-bottom:12px}input,textarea,select{display:block;width:100%;font:inherit;padding:12px;border:1px solid #b9c1ce;border-radius:7px;background:#fff;color:#222;margin:6px 0 18px}textarea{min-height:130px}label{display:block;font-size:14px;font-weight:600}label.check{display:flex;gap:10px;align-items:flex-start;font-weight:400;margin:16px 0}input[type=checkbox]{width:20px;margin:4px 0;flex-shrink:0}.hp{position:absolute;left:-9999px}.faq details{background:white;border:1px solid #dce0e6;border-radius:10px;padding:20px;margin:12px 0}.faq summary{cursor:pointer;font-weight:700}.faq details p{margin:16px 0 0}.toolbar{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0}.toolbar button{background:#fff;border:1px solid #bcc3ce;color:#252d3b}.community-item{border-top:1px solid #dce0e6;padding:20px 0}.community-item p{white-space:pre-wrap}.reply{background:#f1f3f7;padding:16px;border-left:3px solid #ac2130}.cookie-panel{border:1px solid #cad0da;border-radius:14px;padding:26px;width:min(560px,calc(100vw - 32px));max-height:85vh;overflow:auto;margin:auto;box-shadow:0 24px 90px #0003}.cookie-panel::backdrop{background:#17213170}.skip{position:absolute;left:10px;top:-100px}.skip:focus{top:10px;z-index:100;background:white;padding:12px}.legal{max-width:880px;margin:auto;min-height:55vh}.legal ul{padding-left:24px;margin-bottom:20px}footer{background:#1a202b;color:#dce1e8}footer a{color:#e2e6ee}footer .footer-grid{grid-template-columns:2fr 1fr 1fr}footer button{background:transparent;border:1px solid #7e899a;color:white;padding:8px 12px}.footer-bottom{font-size:12px}.search{max-width:440px}.logo-fallback{font-weight:800;letter-spacing:2px;font-size:22px;color:#202735}table{border-collapse:collapse;width:100%}th,td{padding:16px;text-align:left;border-bottom:1px solid #dce0e6;vertical-align:top}th{background:#e9ecf1}.table-wrapper{overflow:auto}form [role=status]{padding-top:12px}button:disabled{opacity:.6;cursor:wait}@media(max-width:960px){.hero-grid,.split{grid-template-columns:1fr}.cards{grid-template-columns:1fr}.hero-section{padding:36px 0}.hero-figure{max-width:650px}.nav-container{gap:12px}.nav-actions{margin-left:auto}.hero-title{font-size:2.65rem}footer .footer-grid{grid-template-columns:1fr}.section-block{padding:38px 0}}@media(max-width:520px){.container{padding:0 18px}.nav-container{padding:12px 18px}.nav-actions{width:100%}.nav-actions a{flex:1}.hero-title{font-size:2.3rem}.hero-metrics{gap:6px}.metric-card{padding:10px 6px}.brand-long{max-width:180px}.card{padding:20px}.hero-grid{gap:28px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
[hidden]{display:none!important}
/* Studio and catalog v2 */
.mobile-nav{display:none}.section-top{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}.catalog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:24px 0}.catalog-card{min-width:0;border:1px solid #d3d9e2;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 8px 25px #19263a06}.catalog-card .cover{display:block;aspect-ratio:4/3;background:#e3e7ed;overflow:hidden}.cover img{width:100%;height:100%;object-fit:cover;transition:transform .3s}.cover:hover img{transform:scale(1.025)}.cover-placeholder{min-height:220px;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(140deg,#e8ebef,#ccd3de);color:#3f4959;font-weight:800;font-size:24px;letter-spacing:3px}.cover-placeholder small{font:10px monospace;letter-spacing:3px;margin-top:10px}.catalog-info{padding:24px}.catalog-info h2{font-size:22px;overflow-wrap:anywhere}.catalog-info h2 a{text-decoration:none;color:#202634}.catalog-info p{overflow-wrap:anywhere}.card-actions{display:flex;gap:10px;justify-content:space-between;align-items:center}.bookmark{background:#f1f3f7;border:1px solid #d1d8e2;color:#8f1a2a;font-size:12px;padding:8px 10px;white-space:nowrap}.bookmark[aria-pressed=true]{background:#fae8ec}.catalog-controls{display:flex;gap:16px;align-items:end;flex-wrap:wrap;padding:22px;background:white;border:1px solid #d5dce6;border-radius:12px;margin:24px 0}.catalog-controls label{flex:1;min-width:130px}.catalog-controls input,.catalog-controls select{margin-bottom:0}.catalog-controls label.check{flex:0 0 auto;font-size:13px;min-width:0}.catalog-controls button{min-height:46px}.empty-state{padding:64px 24px;text-align:center;border:1px dashed #b7c0ce;border-radius:12px;background:#f0f3f7}.empty-state>span{font-size:38px;color:#a21c2f}.empty-state.compact{padding:30px 24px}.empty-state p{margin:12px 0}.pagination{display:flex;gap:20px;margin:30px 0}.pagination a{border:1px solid #bec7d4;background:white;padding:8px 18px;border-radius:6px}.share-box{margin:28px 0;padding:24px 0;border-top:1px solid #cbd3df}.share-links{display:flex;flex-wrap:wrap;gap:8px}.share-links a,.share-links button{font-size:12px;font-weight:600;padding:9px 14px;background:#fff;color:#8f1a2a;border:1px solid #c5cedc;border-radius:6px;text-decoration:none}.share-status{margin:12px 0 0}.detail-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;margin:24px 0}.detail-image{display:block;width:100%;max-height:720px;object-fit:contain;border-radius:12px;background:#e5e9ef}.specs{display:grid;grid-template-columns:120px 1fr;margin:20px 0}.specs dt,.specs dd{border-bottom:1px solid #d2d9e3;padding:12px 0;overflow-wrap:anywhere}.specs dt{color:#5c6777}.breadcrumbs{font-size:12px;margin:20px 0;color:#637084}.long-content{max-width:900px;font-size:17px;overflow-wrap:anywhere}.studio-body{background:#f0f3f7}.studio-header{background:#fff;border-bottom:1px solid #d7dee8;min-height:80px;padding:20px 32px;display:flex;align-items:center;gap:24px;flex-wrap:wrap}.studio-header form{margin-left:auto}.studio-header button{padding:8px 16px;background:#fff;color:#8f1a2a;border-color:#c8d0dc}.studio-brand{color:#202735;font-size:21px;font-weight:800;text-decoration:none;letter-spacing:1px}.studio-brand span{font-size:11px;color:#a91e30;letter-spacing:2px}.studio-layout{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:calc(100vh - 80px)}.studio-sidebar{padding:36px 20px;background:#fff;border-right:1px solid #d7dee8}.studio-sidebar nav{display:grid;gap:7px}.studio-sidebar nav a{display:block;padding:12px 16px;text-decoration:none;color:#465164;font-size:14px;border-radius:6px}.studio-sidebar nav a[aria-current=page]{background:#fae9ed;color:#9b1c2e;font-weight:700;border-left:3px solid #a51f32}.sidebar-note{border-top:1px solid #d9e0e9;margin:50px 14px 0;padding-top:20px;font:11px monospace;color:#8190a3}.sidebar-note span{font:12px/1.6 Arial;display:block;margin-top:12px}.studio-main{padding:38px;max-width:1600px;min-width:0}.studio-main h1{font-size:32px;margin-bottom:12px}.studio-main h2{font-size:20px}.studio-main .card{box-shadow:0 5px 20px #19263a04}.dashboard-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:30px 0}.stat-tile{padding:24px;background:#fff;border:1px solid #d5dce6;border-radius:12px}.stat-tile span{font-size:12px;color:#657185;display:block}.stat-tile strong{display:block;font-size:36px;line-height:1.5;color:#263247}.activity-row{display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid #e0e5ee;padding:12px 0;font-size:13px}.activity-row small{display:block;color:#7a8697}.activity-row time{font-size:11px;color:#7a8697;white-space:nowrap}.editor-columns{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px}.editor-columns aside .card{margin-bottom:24px}.body-editor{min-height:320px;line-height:1.7}.upload-preview{display:block;max-width:100%;max-height:240px;object-fit:contain;background:#edf1f6;border:1px solid #d3dbe6;border-radius:8px;margin:16px 0}.row-actions,.row-actions form{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.row-actions button{font-size:11px;padding:7px 10px;background:white;color:#9b2132;border-color:#d2d9e4}.row-actions a{font-size:12px}.error-box{background:#fce7eb;border:1px solid #e6b6c0;padding:18px;color:#8d1729;border-radius:8px}.success-box{background:#e8f1ed;border:1px solid #b8d4c9;color:#265241;padding:18px;border-radius:8px}.login-wrap{max-width:580px;margin:80px auto;padding:0 24px}.login-wrap h1{font-size:40px}.studio-nav{display:flex;flex-wrap:wrap;gap:20px;padding:20px 0}.studio-nav a{font-size:13px}.studio-main hr{border:0;border-top:1px solid #d9e0e9;margin:24px 0}.content-wide h1{overflow-wrap:anywhere}.content-wide{min-height:55vh;padding-top:12px}button,a,input,textarea,select{touch-action:manipulation}@media(max-width:1150px){.editor-columns{grid-template-columns:minmax(0,1fr) 280px}.studio-main{padding:28px}.studio-layout{grid-template-columns:200px minmax(0,1fr)}.nav-links{gap:12px}.nav-links a{font-size:12px}}@media(max-width:960px){.mobile-nav{display:flex;overflow:auto;gap:22px;padding:12px 18px;background:#fff;border-bottom:1px solid #d7dee8;font-size:13px}.mobile-nav a{white-space:nowrap;text-decoration:none;color:#4b5668}.catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.studio-layout{grid-template-columns:1fr}.studio-sidebar{padding:14px;border-right:0;border-bottom:1px solid #d7dee8}.studio-sidebar nav{display:flex;overflow:auto;gap:4px}.studio-sidebar nav a{white-space:nowrap;font-size:12px}.studio-sidebar .section-eyebrow,.sidebar-note{display:none}.studio-main{padding:24px}.editor-columns{grid-template-columns:minmax(0,1fr) 280px}.studio-header{padding:18px 24px}.detail-grid{gap:24px}.dashboard-stats{gap:10px}.stat-tile{padding:18px}.activity-row{flex-wrap:wrap}}@media(max-width:700px){.catalog-grid,.detail-grid,.editor-columns{grid-template-columns:1fr}.catalog-controls{padding:18px}.catalog-controls label{min-width:100%;}.catalog-controls button{width:100%}.dashboard-stats{grid-template-columns:repeat(2,1fr)}.studio-main{padding:20px 16px}.studio-main h1{font-size:28px}.studio-header{gap:14px;padding:16px}.studio-header>a:not(.studio-brand){font-size:12px}.studio-header form{margin-left:0}.section-top{gap:12px}.login-wrap{margin:45px auto}.studio-main .table-wrapper{padding:0}.studio-main td,.studio-main th{padding:12px;font-size:12px}.studio-main .table-wrapper table{min-width:500px}.specs{grid-template-columns:105px 1fr}.catalog-card .cover{aspect-ratio:4/3}.content-wide h1{font-size:30px}.share-links{gap:7px}}
.studio-sidebar{min-width:0}.studio-sidebar nav{max-width:100%}.studio-layout{width:100%}.studio-header>*{min-width:0}