.nutrition-page { background: linear-gradient(180deg, #101012 0%, #0b0b0c 100%); }
.nutrition-skip-link { position: fixed; left: 16px; top: -80px; z-index: 10000; padding: 12px 16px; border-radius: 999px; background: #111; color: #fff; border: 1px solid var(--color-gold); }
.nutrition-skip-link:focus { top: 16px; }
.nutrition-shell { width: min(var(--page-max-width-wide), calc(100% - (var(--page-gutter) * 2))); margin-inline: auto; }
.nutrition-hero { padding: clamp(42px, 6vw, 84px) 0 clamp(54px, 7vw, 92px); }
.nutrition-hero-grid { display: block; }
.nutrition-eyebrow,.nutrition-kicker { margin: 0 0 12px; color: var(--color-gold-light); font-size: .75rem; font-weight: 850; letter-spacing: .15em; text-transform: uppercase; }
.nutrition-hero h1 { max-width: 850px; margin: 0; color: #fff8ed; font-size: clamp(2.5rem, 5.2vw, 5.6rem); line-height: .98; letter-spacing: -.055em; text-wrap: balance; }
.nutrition-hero-copy > p:not(.nutrition-eyebrow):not(.nutrition-review-date) { max-width: 760px; font-size: clamp(1rem, 1.25vw, 1.14rem); line-height: 1.75; }
.nutrition-hero-answer { margin-top: 28px; color: rgba(246,241,232,.84); }
.nutrition-hero-answer strong { color: #fff; }
.nutrition-hero-actions,.nutrition-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.nutrition-review-date { margin-top: 20px; font-size: .78rem; color: var(--color-text-soft); }
.nutrition-hero-guide-link { margin-top: 20px; font-size: .9rem !important; }
.nutrition-hero-guide-link a { color: var(--color-gold-light); font-weight: 700; text-underline-offset: 4px; }

.nutrition-section-nav { position: sticky; top: 65px; z-index: 80; border-block: 1px solid rgba(212,175,55,.14); background: rgba(11,11,12,.9); backdrop-filter: blur(16px); }
.nutrition-section-nav-inner { display: flex; gap: 4px; width: min(var(--page-max-width), calc(100% - (var(--page-gutter) * 2))); margin-inline: auto; overflow-x: auto; scrollbar-width: none; }
.nutrition-section-nav-inner::-webkit-scrollbar { display: none; }
.nutrition-section-nav a { flex: 0 0 auto; padding: 14px 13px; color: var(--color-text-soft); font-size: .76rem; font-weight: 750; text-decoration: none; border-bottom: 2px solid transparent; }
.nutrition-section-nav a:hover,.nutrition-section-nav a:focus-visible,.nutrition-section-nav a.is-active { color: #fff; border-bottom-color: var(--color-gold); outline: none; }
.nutrition-section { padding: clamp(58px, 7vw, 92px) 0; scroll-margin-top: 122px; }
.nutrition-section-alt { background: rgba(255,255,255,.018); border-block: 1px solid rgba(255,255,255,.045); }
.nutrition-section-heading { max-width: 830px; margin-bottom: clamp(26px, 4vw, 44px); }
.nutrition-section-heading h2,.nutrition-method-layout h2,.nutrition-sources h2,.nutrition-cta h2 { margin: 0 0 16px; color: #fff8ed; font-size: clamp(2rem, 4vw, 3.7rem); line-height: 1.04; letter-spacing: -.045em; text-wrap: balance; }
.nutrition-section-heading > p:last-child,.nutrition-method-layout p,.nutrition-cta p { font-size: 1rem; line-height: 1.75; }

.nutrition-filter-row,.nutrition-metric-controls,.nutrition-serving-toggle,.nutrition-preset-links { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.nutrition-filter-row button,.nutrition-metric-controls button,.nutrition-serving-toggle button,.nutrition-preset-links button,.nutrition-text-button { min-height: 42px; padding: 9px 13px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; color: var(--color-text-muted); background: rgba(255,255,255,.025); font: inherit; font-size: .78rem; font-weight: 700; cursor: pointer; }
.nutrition-filter-row button:hover,.nutrition-metric-controls button:hover,.nutrition-serving-toggle button:hover,.nutrition-preset-links button:hover,.nutrition-text-button:hover { color: #fff; border-color: rgba(212,175,55,.45); }
.nutrition-filter-row button[aria-pressed="true"],.nutrition-metric-controls button[aria-pressed="true"],.nutrition-serving-toggle button[aria-pressed="true"] { color: #0d0d0e; border-color: var(--color-gold-light); background: var(--color-gold-light); }
button:focus-visible,select:focus-visible,.nutrition-section-nav a:focus-visible { outline: 2px solid var(--color-gold-light); outline-offset: 3px; }

.nutrition-explorer-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: stretch; }
.nutrition-chart-panel,.nutrition-food-detail,.nutrition-compare-summary,.nutrition-compare-table-wrap,.nutrition-method-card { border: 1px solid rgba(212,175,55,.16); border-radius: 20px; background: linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.014)); box-shadow: var(--shadow-soft); }
.nutrition-chart-panel { min-width: 0; padding: clamp(16px, 2.5vw, 26px); }
.nutrition-chart-key { display: flex; flex-wrap: wrap; gap: 16px; color: var(--color-text-soft); font-size: .72rem; }
.nutrition-chart-key span { display: inline-flex; align-items: center; gap: 7px; }
.nutrition-chart-key i { width: 10px; height: 10px; border-radius: 50%; }
.key-gold { background: var(--color-gold); }.key-blue { background: #69a9ea; }
.nutrition-scatter { display: block; width: 100%; min-height: 420px; overflow: visible; }
.scatter-grid { stroke: rgba(255,255,255,.075); stroke-width: 1; vector-effect: non-scaling-stroke; }
.scatter-axis { stroke: rgba(255,255,255,.28); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.scatter-label,.scatter-tick,.scatter-quadrant { fill: rgba(246,241,232,.55); font-family: var(--font-primary); font-size: 11px; }
.scatter-axis-title { fill: rgba(246,241,232,.82); font-family: var(--font-primary); font-size: 12px; font-weight: 700; }
.scatter-quadrant { fill: rgba(242,214,117,.42); font-size: 13px; font-weight: 750; }
.scatter-point { stroke: rgba(255,255,255,.72); stroke-width: 1.5; cursor: pointer; transform-box: fill-box; transform-origin: center; transition: opacity .18s ease, transform .18s ease; }
.scatter-point:hover,.scatter-point:focus,.scatter-point.is-selected { transform: scale(1.5); opacity: 1; outline: none; }
.nutrition-scatter.has-selection .scatter-point:not(.is-selected) { opacity: .3; }
.scatter-label-leader { stroke: rgba(246,241,232,.38); stroke-width: 1; vector-effect: non-scaling-stroke; pointer-events: none; }
.scatter-label-leader.is-selected { stroke: rgba(242,214,117,.72); }
.scatter-label-callout { pointer-events: none; }
.scatter-label-callout rect { fill: rgba(15,15,17,.94); stroke: rgba(255,255,255,.18); stroke-width: 1; vector-effect: non-scaling-stroke; }
.scatter-label-callout.is-selected rect { fill: rgba(28,25,16,.97); stroke: rgba(242,214,117,.7); }
.scatter-food-label { fill: rgba(246,241,232,.9); font-family: var(--font-primary); font-size: 10px; font-weight: 700; pointer-events: none; }
.scatter-label-callout.is-selected .scatter-food-label { fill: #f2d675; }
.nutrition-chart-note { margin: 4px 0 0; font-size: .78rem; line-height: 1.55; }
.nutrition-food-detail { padding: 24px; }
.nutrition-food-detail .detail-category { margin: 0 0 8px; color: var(--color-gold-light); font-size: .7rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.nutrition-food-detail h3 { margin: 0; color: #fff; font-size: 1.65rem; }
.detail-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 22px 0; }
.detail-metrics div { padding: 12px; border-radius: 12px; background: rgba(255,255,255,.035); }
.detail-metrics span { display: block; color: var(--color-text-soft); font-size: .67rem; text-transform: uppercase; letter-spacing: .06em; }
.detail-metrics strong { display: block; margin-top: 4px; color: #fff; font-size: 1rem; }
.detail-source { font-size: .72rem; line-height: 1.5; overflow-wrap: anywhere; }
.nutrition-chart-explainer { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; margin-top: 18px; }
.nutrition-chart-explainer div { padding: 18px; border-top: 1px solid rgba(212,175,55,.25); }
.nutrition-chart-explainer h3 { margin: 0 0 8px; color: #fff; font-size: .95rem; }
.nutrition-chart-explainer p { margin: 0; font-size: .84rem; line-height: 1.6; }
.nutrition-data-table-disclosure { margin-top: 24px; }
.nutrition-data-table-disclosure summary { width: max-content; max-width: 100%; color: var(--color-gold-light); font-weight: 700; cursor: pointer; }
.nutrition-table-wrap,.nutrition-compare-table-wrap { overflow-x: auto; }
.nutrition-table-wrap table,.nutrition-compare-table { width: 100%; margin-top: 16px; border-collapse: collapse; font-size: .82rem; }
.nutrition-table-wrap th,.nutrition-table-wrap td,.nutrition-compare-table th,.nutrition-compare-table td { padding: 11px; border-bottom: 1px solid rgba(255,255,255,.08); text-align: left; white-space: nowrap; }
.nutrition-table-wrap th,.nutrition-compare-table th { color: #fff; }

.nutrition-ranking { display: grid; gap: 10px; }
.nutrition-ranking-row { display: grid; grid-template-columns: minmax(120px, 210px) minmax(0,1fr) 100px; align-items: center; gap: 14px; }
.nutrition-ranking-name { color: #fff; font-size: .84rem; font-weight: 700; }
.nutrition-ranking-track { height: 12px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.06); }
.nutrition-ranking-bar { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8a6f1f, var(--color-gold-light)); transform-origin: left; transition: width .38s ease; }
.nutrition-ranking-value { color: var(--color-gold-light); font-size: .78rem; font-weight: 750; text-align: right; }
.nutrition-text-button { margin-top: 22px; color: var(--color-gold-light); background: transparent; }

.nutrition-compare-controls { display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: end; max-width: 860px; }
.nutrition-compare-controls label { display: grid; gap: 8px; color: var(--color-text-muted); font-size: .78rem; font-weight: 700; }
.nutrition-compare-controls select { width: 100%; min-height: 52px; padding: 0 42px 0 14px; border: 1px solid rgba(212,175,55,.28); border-radius: 12px; background: #171719; color: #fff; font: inherit; }
.nutrition-compare-controls > span { padding-bottom: 16px; color: var(--color-gold-light); font-weight: 850; }
.nutrition-compare-summary { max-width: 900px; margin-top: 24px; padding: 20px; }
.nutrition-compare-summary p { margin: 0; line-height: 1.7; }
.nutrition-compare-table-wrap { margin-top: 18px; padding: 8px 18px 18px; }
.nutrition-compare-table th:not(:first-child),.nutrition-compare-table td:not(:first-child) { text-align: right; }
.nutrition-preset-links { margin-top: 16px; }

.nutrition-serving-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.nutrition-serving-card { min-width: 0; padding: 22px; border: 1px solid rgba(212,175,55,.15); border-radius: 16px; background: rgba(255,255,255,.025); }
.nutrition-serving-card h3 { margin: 0 0 16px; color: #fff; }
.serving-volume { display: flex; align-items: flex-end; height: 108px; margin-bottom: 16px; }
.serving-volume span { display: block; width: 100%; min-height: 8px; border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, rgba(242,214,117,.88), rgba(138,111,31,.65)); transition: height .3s ease; }
.nutrition-serving-card dl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; }
.nutrition-serving-card dt { color: var(--color-text-soft); font-size: .68rem; text-transform: uppercase; }
.nutrition-serving-card dd { margin: 3px 0 0; color: #fff; font-size: .85rem; font-weight: 700; }

.nutrition-principle-grid,.nutrition-goal-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.nutrition-principle-grid article,.nutrition-goal-grid article { padding: 24px; border-top: 1px solid rgba(212,175,55,.32); background: rgba(255,255,255,.018); }
.nutrition-principle-grid span { color: var(--color-gold-light); font-size: .72rem; font-weight: 800; }
.nutrition-principle-grid h3,.nutrition-goal-grid h3 { margin: 12px 0 10px; color: #fff; font-size: 1.1rem; }
.nutrition-principle-grid p,.nutrition-goal-grid p { margin: 0; font-size: .88rem; line-height: 1.65; }
.nutrition-goal-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.nutrition-goal-grid a { display: inline-block; margin-top: 18px; color: var(--color-gold-light); font-size: .82rem; font-weight: 700; }

.nutrition-method-layout { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(300px,.75fr); gap: clamp(28px,5vw,70px); align-items: start; }
.nutrition-method-steps { display: grid; gap: 12px; padding-left: 24px; color: var(--color-text-muted); line-height: 1.65; }
.nutrition-method-card { padding: 24px; }
.nutrition-method-card h3 { margin: 0 0 10px; color: #fff; }
.nutrition-method-card h3:not(:first-child) { margin-top: 24px; }
.nutrition-method-card p,.nutrition-method-card li { font-size: .84rem; line-height: 1.6; }
.nutrition-method-card ul { margin: 0; padding-left: 20px; color: var(--color-text-muted); }
.nutrition-sources { padding-top: 0; }
.nutrition-sources h2 { font-size: 1.8rem; }
.nutrition-sources ul { color: var(--color-text-muted); line-height: 1.8; }
.nutrition-sources a { color: var(--color-gold-light); }
.nutrition-faq-list { display: grid; gap: 10px; max-width: 960px; }
.nutrition-faq-list details { border: 1px solid rgba(212,175,55,.15); border-radius: 14px; background: rgba(255,255,255,.02); }
.nutrition-faq-list summary { padding: 18px; color: #fff; font-weight: 750; cursor: pointer; }
.nutrition-faq-list p { margin: 0; padding: 0 18px 20px; line-height: 1.7; }
.nutrition-cta { padding: clamp(58px,7vw,90px) 0; border-top: 1px solid rgba(212,175,55,.2); background: radial-gradient(circle at 80% 30%,rgba(212,175,55,.12),transparent 34%); }
.nutrition-cta-inner { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 30px; align-items: end; }
.nutrition-cta h2 { max-width: 760px; }


@media (max-width: 1024px) {
  .nutrition-explorer-layout { grid-template-columns: 1fr; }
  .nutrition-food-detail { display: grid; grid-template-columns: 1fr 1.4fr; gap: 18px; }
  .detail-metrics { margin: 0; }
  .nutrition-principle-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 768px) {
  .nutrition-method-layout,.nutrition-cta-inner { grid-template-columns: 1fr; }
  .nutrition-section-nav { top: 65px; }
  .nutrition-chart-explainer,.nutrition-goal-grid { grid-template-columns: 1fr; }
  .nutrition-serving-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .nutrition-compare-controls { grid-template-columns: 1fr; }
  .nutrition-compare-controls > span { padding: 0; text-align: center; }
  .nutrition-ranking-row { grid-template-columns: 120px minmax(0,1fr) 78px; gap: 8px; }
}
@media (max-width: 520px) {
  .nutrition-hero { padding-top: 32px; }
  .nutrition-hero h1 { font-size: clamp(2.25rem,12vw,3.25rem); }
  .nutrition-section { padding: 54px 0; }
  .nutrition-scatter { min-height: 330px; }
  .scatter-food-label { display: none; }
  .nutrition-food-detail { display: block; }
  .detail-metrics { margin: 18px 0; }
  .nutrition-serving-grid,.nutrition-principle-grid { grid-template-columns: 1fr; }
  .nutrition-ranking-row { grid-template-columns: 96px minmax(0,1fr) 72px; }
  .nutrition-ranking-name,.nutrition-ranking-value { font-size: .72rem; }
  .nutrition-section-nav a { padding-inline: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .scatter-point,.nutrition-ranking-bar,.serving-volume span { transition: none !important; }
  html { scroll-behavior: auto !important; }
}