/* Food Marshal home page, WEB-1 "The label, read" (awe pass).
   One luminous object (the particle field, field.js) becomes each scene as you scroll; the text is sparse, large and sure.
   The static markup is the complete, final state of every section. Motion only ever animates TOWARDS that state, and
   only when the visitor allows motion (prefers-reduced-motion: no-preference and the pause button not pressed). */

/* ---------- atmosphere: soft aurora light under the field ---------- */
.aurora { position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; background: var(--ground); }
.aurora-css { position: absolute; inset: 0; }
.aurora-css i { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; will-change: transform; }
.aurora-css i:nth-child(1) { left: -24vmax; top: -30vmax; background: radial-gradient(closest-side, var(--aurora-2), transparent); opacity: .42; }
.aurora-css i:nth-child(2) { right: -30vmax; top: 20vh; background: radial-gradient(closest-side, var(--aurora-1), transparent); opacity: .85; }
.aurora-css i:nth-child(3) { left: 18vw; bottom: -46vmax; background: radial-gradient(closest-side, var(--aurora-3), transparent); opacity: .4; }
@media (prefers-reduced-motion: no-preference) {
  html.js:not([data-motion-paused]) .aurora-css i:nth-child(1) { animation: drift-a 46s var(--ease-in-out) infinite alternate; }
  html.js:not([data-motion-paused]) .aurora-css i:nth-child(2) { animation: drift-b 58s var(--ease-in-out) infinite alternate; }
  html.js:not([data-motion-paused]) .aurora-css i:nth-child(3) { animation: drift-a 64s var(--ease-in-out) infinite alternate-reverse; }
}
@keyframes drift-a { to { transform: translate3d(9vw, 7vh, 0) scale(1.08); } }
@keyframes drift-b { to { transform: translate3d(-8vw, -6vh, 0) scale(.94); } }

/* ---------- posters: each scene, still (no WebGL, reduced or paused motion, no JavaScript) ---------- */
.scene-fig { position: relative; }
/* light pooling behind each object (cheap bloom) */
html.gl-on .scene-fig::before, html.field-off .scene-fig::before { content: ""; position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--violet) 26%, transparent), transparent 72%); filter: blur(10px); pointer-events: none; z-index: -1; }
html.is-light.gl-on .scene-fig::before { background: radial-gradient(closest-side, color-mix(in srgb, var(--violet) 12%, transparent), transparent 72%); }
.poster { display: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
/* posters show only when the field will not run (field.js marks it), or with no JavaScript at all */
html.field-off .poster-dark, html:not(.js) .poster-dark { display: block; }
html.field-off.is-light .poster-dark { display: none; }
html.field-off.is-light .poster-light { display: block; }
@media (prefers-color-scheme: light) { html:not(.js) .poster-dark { display: none; } html:not(.js) .poster-light { display: block; } }
.scene-layer { position: absolute; inset: 0; pointer-events: none; }

/* ---------- shared section type ---------- */
.home { position: relative; }
.sec { position: relative; padding: clamp(88px, 13vw, 200px) var(--gutter); }
.sec > * { max-width: var(--max); margin-inline: auto; }
.sec-head { display: grid; gap: clamp(14px, 2vw, 26px); margin-bottom: clamp(40px, 6vw, 88px); }
.sec-label { font-family: var(--mono); font-size: .84rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink2); display: inline-flex; align-items: center; gap: .7em; }
.sec-label::before { content: ""; width: 26px; height: 2px; background: currentColor; }
.sec-head h2 { font-size: clamp(2.5rem, 1rem + 6.2vw, 7.4rem); letter-spacing: -.045em; line-height: .9; max-width: 15ch; }
.sec-lead { font-size: clamp(1.15rem, .98rem + .62vw, 1.55rem); line-height: 1.45; color: var(--ink2); max-width: 44ch; }
.eyebrow { font-family: var(--mono); font-size: .84rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink2); }

/* the label typography: the printed label text, set large */
.label-text { font-weight: 500; text-transform: uppercase; letter-spacing: .015em; line-height: 1.3; color: var(--ink); overflow-wrap: anywhere; }
.label-text:lang(hi), [lang="hi"] .label-text { text-transform: none; letter-spacing: 0; line-height: 1.55; }
.label-line { display: block; }
.ing { border-radius: .2em; box-decoration-break: clone; -webkit-box-decoration-break: clone; transition: background-color .35s, color .35s, box-shadow .35s; }
.ing-green { box-shadow: inset 0 -.16em 0 var(--green-tone); }
.ing-yellow { box-shadow: inset 0 -.16em 0 var(--yellow-tone); }
.ing-red { box-shadow: inset 0 -.16em 0 var(--red-tone); }

/* chips: colour + sign + words, never colour alone */
.chip { display: inline-flex; align-items: center; gap: .4em; padding: .32em .75em .32em .45em; border-radius: 999px; font-weight: 600; line-height: 1.2; font-size: .98rem; max-width: 100%; }
.chip .sign { width: 1.15em; height: 1.15em; flex: none; }
.chip-text { min-width: 0; overflow-wrap: anywhere; }
.chip-green { background: var(--green); color: var(--green-ink); box-shadow: 0 0 0 1.5px var(--green-tone); }
.chip-yellow { background: var(--yellow); color: var(--yellow-ink); box-shadow: 0 0 0 1.5px var(--yellow-tone); }
.chip-red { background: var(--red); color: var(--red-ink); box-shadow: 0 0 0 1.5px var(--red-tone); }
:root[data-theme="dark"] .chip-yellow, :root[data-theme="dark"] .chip-red { box-shadow: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .chip-yellow, :root:not([data-theme="light"]) .chip-red { box-shadow: none; } }

/* point shapes: a whole disc (1 point), half a disc (½), an empty ring (0) */
.pt { width: 30px; height: 30px; flex: none; overflow: visible; }
.pt-ring { fill: none; stroke-width: 2.5; }
.pt-green .pt-ring { stroke: var(--green-tone); } .pt-green .pt-fill { fill: var(--green-tone); }
.pt-yellow .pt-ring { stroke: var(--yellow-tone); } .pt-yellow .pt-fill { fill: var(--yellow-tone); }
.pt-red .pt-ring { stroke: var(--red-tone); stroke-dasharray: 4 3.2; }

.big-points { display: inline-flex; align-items: baseline; gap: .12em; font-weight: 600; line-height: .82; letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
.bp-num { display: inline-block; min-width: 2.6ch; text-align: right; font-size: min(clamp(4.6rem, 2rem + 11vw, 11rem), 30vw); }
.bp-of { white-space: nowrap; font-size: clamp(1.6rem, 1rem + 2.4vw, 3.2rem); color: var(--ink2); letter-spacing: -.03em; }
.tally-line { font-weight: 600; font-size: clamp(1.15rem, .95rem + .8vw, 1.6rem); letter-spacing: -.01em; }
.bar { width: 100%; height: 14px; border-radius: 99px; overflow: hidden; }
.bar rect { shape-rendering: crispEdges; }
.bar-green { fill: var(--green-tone); } .bar-yellow { fill: var(--yellow-tone); } .bar-red { fill: var(--red-tone); }

/* reveal on scroll (only when home.js is running and motion is allowed) */
@media (prefers-reduced-motion: no-preference) {
  html.reveal-ready:not([data-motion-paused]) [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(36px); }
  html.reveal-ready [data-reveal] { transition: opacity .8s var(--ease-out), transform .9s var(--ease-out); transition-delay: var(--d, 0s); }
}

/* ========== HERO ========== */
.hero { position: relative; min-height: 100svh; display: grid; align-content: center; padding: calc(var(--header-h) + 24px) var(--gutter) clamp(36px, 6vw, 80px); isolation: isolate; }
.hero-grid { max-width: var(--max); width: 100%; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(16px, 4vw, 64px); align-items: center; }
.hero-fig { aspect-ratio: 1; width: 100%; max-height: 74svh; justify-self: center; }
.hero-copy { position: relative; display: grid; gap: clamp(16px, 2.4vw, 28px); }
.hero-eyebrow { color: var(--ink2); }
.hero-title { font-size: clamp(3rem, .6rem + 6.6vw, 8.6rem); line-height: .9; letter-spacing: -.05em; font-weight: 600; text-wrap: balance; }
.hero-lead { font-size: clamp(1.12rem, .98rem + .55vw, 1.45rem); line-height: 1.45; max-width: 40ch; color: var(--ink2); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.hero-actions .button .icon { width: 20px; height: 20px; }
@media (max-width: 899px) {
  .hero { align-content: start; padding-top: calc(var(--header-h) + 8px); }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-fig { order: -1; width: min(100%, 58svh); margin-bottom: -4svh; }
}

/* ========== STRIP ========== */
.strip { position: relative; overflow: hidden; padding: clamp(18px, 3vw, 34px) 0; border-block: 1px solid var(--divider); background: color-mix(in srgb, var(--ground) 70%, transparent); }
.strip-track { display: flex; width: max-content; }
.strip-run { display: flex; align-items: center; gap: clamp(18px, 3vw, 44px); padding-right: clamp(18px, 3vw, 44px); font-size: clamp(2rem, 1rem + 4.6vw, 5.6rem); font-weight: 600; letter-spacing: -.04em; line-height: 1; white-space: nowrap; text-transform: uppercase; }
.strip-mark { width: .8em; height: .8em; color: var(--violet); }
@media (prefers-reduced-motion: no-preference) { html.js:not([data-motion-paused]) .strip-track { animation: strip 38s linear infinite; } }
html:not(.js) .strip-track { width: auto; flex-wrap: wrap; justify-content: center; } html:not(.js) .strip-run + .strip-run { display: none; }
@keyframes strip { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .strip-track { width: auto; flex-wrap: wrap; justify-content: center; } .strip-run + .strip-run { display: none; } }

/* ========== 01 READING ========== */
.facts { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: clamp(14px, 2vw, 24px); margin-bottom: clamp(40px, 6vw, 80px); }
.fact { position: relative; padding: clamp(24px, 3vw, 36px); border-radius: var(--radius-l); background: color-mix(in srgb, var(--raised) 86%, transparent); box-shadow: 0 0 0 1px var(--divider) inset; display: grid; gap: 10px; align-content: start; min-height: 230px; overflow: hidden; }
.fact:nth-child(2) { --d: .08s; } .fact:nth-child(3) { --d: .16s; }
.fact-icon { width: 44px; height: 44px; color: var(--accent); margin-bottom: 14px; }
.fact-n { position: absolute; right: 18px; top: -8px; font-size: 7rem; font-weight: 600; line-height: 1; letter-spacing: -.06em; color: color-mix(in srgb, var(--ink) 7%, transparent); }
.fact h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); letter-spacing: -.03em; }
.fact p { color: var(--ink2); }
.pair { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 2vw, 24px); }
.pair figcaption { grid-column: 1 / -1; color: var(--ink2); font-size: .95rem; }
.pair-card { padding: clamp(22px, 3vw, 40px); border-radius: var(--radius-l); background: var(--raised); box-shadow: 0 0 0 1px var(--divider) inset; }
.pair-card .label-text { font-size: clamp(1.1rem, .9rem + .9vw, 1.7rem); }
.pair-name { font-weight: 600; margin-bottom: 14px; font-size: 1.05rem; }
.pair-name span { display: block; font-family: var(--mono); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink2); font-weight: 600; margin-top: 4px; }
@media (max-width: 760px) { .pair { grid-template-columns: 1fr; } }

/* ========== 02 THE SCORE ========== */
.legend { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 1.6vw, 20px); margin-bottom: clamp(40px, 6vw, 70px); }
.legend-card { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center; padding: clamp(18px, 2.4vw, 30px); border-radius: var(--radius-l); background: color-mix(in srgb, var(--raised) 86%, transparent); box-shadow: 0 0 0 1px var(--divider) inset; }
.legend-card .pt { grid-row: 1 / span 2; width: clamp(42px, 5vw, 64px); height: clamp(42px, 5vw, 64px); }
.legend-sign { position: absolute; right: 16px; top: 16px; width: 26px; height: 26px; }
.legend-green .legend-sign { color: var(--green-tone); } .legend-yellow .legend-sign { color: var(--yellow-tone); } .legend-red .legend-sign { color: var(--red-tone); }
.legend-name { font-weight: 600; font-size: clamp(1.25rem, 1rem + .9vw, 1.9rem); letter-spacing: -.02em; }
.legend-pts { color: var(--ink2); font-weight: 500; font-size: clamp(1rem, .9rem + .4vw, 1.25rem); }
.legend-card:nth-child(2) { --d: .08s; } .legend-card:nth-child(3) { --d: .16s; }
@media (max-width: 640px) { .legend { grid-template-columns: 1fr; } }

.tally { position: relative; }
.tally-pin { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); grid-template-rows: auto auto; gap: clamp(18px, 3vw, 44px); align-items: start; }
.tally-label { position: relative; padding: clamp(22px, 3vw, 40px); border-radius: var(--radius-l); background: var(--raised); box-shadow: 0 0 0 1px var(--divider) inset, var(--shadow); overflow: hidden; }
.tally-name, .lab-kind { font-weight: 600; margin-bottom: 14px; }
.tally-name span { display: block; font-family: var(--mono); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink2); margin-top: 4px; }
.tally-text { font-size: clamp(1.2rem, .85rem + 1.25vw, 2.05rem); line-height: 1.32; }
.scanline { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--accent); box-shadow: 0 0 18px 2px color-mix(in srgb, var(--accent) 55%, transparent); opacity: 0; pointer-events: none; transform: translateY(var(--scan-y, 0px)); transition: transform .45s var(--ease-out), opacity .3s; }
.tally-board { display: grid; gap: clamp(18px, 2.4vw, 30px); }
.lanes { display: grid; gap: 12px; }
.lane { padding: 14px 16px 16px; border-radius: 22px; background: color-mix(in srgb, var(--raised) 80%, transparent); box-shadow: 0 0 0 1px var(--divider) inset; }
.lane-head { display: flex; align-items: center; gap: 10px; font-weight: 600; margin-bottom: 10px; }
.lane-head .pt { width: 26px; height: 26px; }
.lane-pts { margin-left: auto; color: var(--ink2); font-weight: 500; font-size: .95rem; }
.lane-items { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; min-height: 2.4em; }
.tally-score { display: grid; gap: 10px; justify-items: start; }
.tally-running { font-family: var(--mono); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink2); }
.tally-score .bar { max-width: 520px; }
.tally-note { grid-column: 1 / -1; display: none; font-family: var(--mono); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink2); }

/* the live (pinned, scroll-driven) version: home.js adds .is-live only when motion is allowed and it fits */
.tally.is-live { height: 460svh; }
.tally.is-live .tally-pin { position: sticky; top: 0; height: 100svh; align-content: center; padding-top: calc(var(--header-h) + 8px); padding-bottom: 16px; }
.tally.is-live .tally-note { display: block; }
.tally.is-live .scanline { opacity: 1; }
.tally.is-live .ing { box-shadow: none; }
.tally.is-live .ing.is-scan { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.tally.is-live .ing.is-landed.ing-green { box-shadow: inset 0 -.16em 0 var(--green-tone); }
.tally.is-live .ing.is-landed.ing-yellow { box-shadow: inset 0 -.16em 0 var(--yellow-tone); }
.tally.is-live .ing.is-landed.ing-red { box-shadow: inset 0 -.16em 0 var(--red-tone); }
.tally.is-live .bar, .tally.is-live .tally-line { transition: opacity .4s; }
.tally.is-live[data-phase="run"] .bar { opacity: 0; }
.tally.is-live .lane-cite { transition: opacity .4s; }
.tally.is-live .chip { will-change: transform, opacity; }
.bp-num.is-bump { animation: bump .45s var(--spring); }
@keyframes bump { 40% { transform: scale(1.08); } }
@media (max-width: 860px) {
  .tally-pin { grid-template-columns: 1fr; }
  .tally.is-live .tally-pin { gap: 12px; align-content: start; }
  .tally.is-live .tally-text { font-size: clamp(.95rem, .6rem + 1.6vw, 1.3rem); }
  .tally.is-live .tally-label { padding: 16px 18px; }
  .tally.is-live .lane { padding: 10px 12px 12px; }
  .tally.is-live .lane-head { margin-bottom: 6px; }
  .tally.is-live .chip { font-size: .86rem; }
  .tally.is-live .bp-num { font-size: clamp(3.4rem, 1.5rem + 9vw, 6rem); }
}

.working { margin-top: clamp(40px, 6vw, 80px); padding: clamp(24px, 4vw, 56px); border-radius: var(--radius-l); background: color-mix(in srgb, var(--raised) 88%, transparent); box-shadow: 0 0 0 1px var(--divider) inset; display: grid; gap: 18px; }
.working-title { font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); letter-spacing: -.02em; }
.eq { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; font-size: clamp(1.15rem, .95rem + .9vw, 1.8rem); font-weight: 600; letter-spacing: -.01em; }
.eq-term { display: inline-flex; align-items: center; gap: .4em; }
.eq-term .sign { width: 1.05em; height: 1.05em; }
.eq-green .sign { color: var(--green-tone); } .eq-yellow .sign { color: var(--yellow-tone); } .eq-red .sign { color: var(--red-tone); }
.eq-op { color: var(--ink2); font-weight: 400; }
.eq-total { padding: .2em .65em; border-radius: 999px; background: var(--ink); color: var(--ground); }
.working-note { color: var(--ink2); max-width: 60ch; }

/* ========== 03 REASONS ========== */
.cites { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(14px, 2vw, 24px); }
.cite { position: relative; padding: clamp(26px, 3.4vw, 48px); padding-top: clamp(60px, 7vw, 92px); border-radius: var(--radius-l); background: var(--raised); box-shadow: 0 0 0 1px var(--divider) inset; display: grid; gap: 16px; overflow: hidden; }
.cite + .cite { --d: .1s; }
.cite-n { position: absolute; top: 14px; left: clamp(26px, 3.4vw, 48px); font-family: var(--mono); font-size: .9rem; font-weight: 600; color: var(--ink2); }
.cite-n::before { content: "["; } .cite-n::after { content: "]"; }
.cite-name .chip { font-size: clamp(1.05rem, .9rem + .7vw, 1.5rem); }
.cite-reason { font-size: clamp(1.3rem, 1rem + 1.3vw, 2.2rem); font-weight: 500; line-height: 1.22; letter-spacing: -.02em; }
.cite-source { font-family: var(--mono); font-size: .9rem; line-height: 1.5; color: var(--ink2); padding-top: 14px; border-top: 1px dashed var(--line); }
.cite-key, .item-key { font-family: var(--mono); font-size: .76rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink2); margin-right: .5em; }

/* ========== 04 TABLE ONLY ========== */
.nutri { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 60px); align-items: center; }
.nutri-cap { color: var(--ink2); margin-bottom: 14px; }
.nutri-head { padding: 18px 20px 14px; border-radius: var(--radius-l) var(--radius-l) 0 0; background: var(--raised); box-shadow: 0 0 0 2px var(--ink) inset; font-weight: 600; font-size: clamp(1.3rem, 1rem + 1vw, 1.9rem); letter-spacing: -.01em; text-transform: uppercase; }
.nutri-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--raised); border-radius: 0 0 var(--radius-l) var(--radius-l); box-shadow: 0 0 0 2px var(--ink) inset; overflow: hidden; }
.nutri-table thead th { white-space: nowrap; }
.nutri-table th, .nutri-table td { padding: 16px 20px; text-align: left; vertical-align: top; border-top: 1.5px solid color-mix(in srgb, var(--ink) 70%, transparent); }
.nutri-table thead th { border-top: 0; font-family: var(--mono); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink2); }
.nutri-table tbody th { font-weight: 600; text-transform: uppercase; letter-spacing: .01em; white-space: nowrap; }
.tval { font-weight: 600; font-variant-numeric: tabular-nums; font-size: 1.2rem; }
.tres .chip { margin-bottom: 8px; }
.tres-reason { color: var(--ink); font-size: .98rem; }
.tres-source { font-family: var(--mono); font-size: .8rem; color: var(--ink2); margin-top: 4px; }
.trow:nth-child(2) { --d: .08s; } .trow:nth-child(3) { --d: .16s; } .trow:nth-child(4) { --d: .24s; }
.nutri-score { display: grid; gap: 12px; justify-items: start; }
@media (max-width: 900px) {
  .nutri { grid-template-columns: 1fr; }
  .nutri-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .nutri-table tr { display: grid; grid-template-columns: 1fr auto; }
  .nutri-table tbody th { border-top: 1.5px solid color-mix(in srgb, var(--ink) 70%, transparent); white-space: normal; }
  .nutri-table td.tval { border-top: 1.5px solid color-mix(in srgb, var(--ink) 70%, transparent); text-align: right; }
  .nutri-table td.tres { grid-column: 1 / -1; border-top: 0; padding-top: 0; }
}

/* ========== 05 LAB ========== */
.lab-shell { display: grid; gap: clamp(16px, 2.4vw, 28px); }
.lab-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.lab-picker[hidden] { display: none; }
.pick { display: grid; gap: 4px; text-align: left; min-height: 64px; padding: 14px 18px; border-radius: 20px; border: 0; background: var(--raised); box-shadow: 0 0 0 1.5px var(--line) inset; cursor: pointer; transition: box-shadow .2s, background-color .2s, transform .2s var(--ease-out); }
.pick:hover { transform: translateY(-2px); box-shadow: 0 0 0 2px var(--ink) inset; }
.pick[aria-pressed="true"] { background: var(--ink); color: var(--ground); box-shadow: none; }
.pick-kind { font-family: var(--mono); font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; opacity: .8; }
.pick-name { font-weight: 600; font-size: 1.15rem; }
@media (max-width: 700px) { .lab-picker { grid-template-columns: 1fr; } }
.lab-panels { display: grid; gap: clamp(16px, 2.4vw, 28px); }
.lab-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(16px, 2.6vw, 36px); align-items: start; }
.lab-panel[hidden] { display: none; }
.lab-label { position: relative; padding: clamp(22px, 3vw, 40px); border-radius: var(--radius-l); background: var(--raised); box-shadow: 0 0 0 1px var(--divider) inset, var(--shadow); overflow: hidden; display: grid; gap: 12px; }
.lab-kind { font-family: var(--mono); font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink2); margin: 0; }
.lab-name { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.6rem); letter-spacing: -.03em; }
.lab-text { font-size: clamp(1.05rem, .85rem + .7vw, 1.5rem); }
.lab-controls { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin-top: 8px; }
.lab-controls .icon { width: 20px; height: 20px; }
.text-button { border: 0; background: none; padding: 0 4px; min-height: 44px; color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: .22em; cursor: pointer; }
.lab-result { display: grid; gap: 14px; }
.lab-score { display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 6px 22px; padding: clamp(18px, 2.4vw, 28px); border-radius: var(--radius-l); background: color-mix(in srgb, var(--raised) 88%, transparent); box-shadow: 0 0 0 1px var(--divider) inset; }
.lab-score .bp-num { font-size: clamp(3.6rem, 1.6rem + 6vw, 7rem); }
.lab-score .bar { grid-column: 1 / -1; }
.tally-line-hi { color: var(--ink2); margin-top: 4px; }
.lab-hint { color: var(--ink2); font-size: .95rem; }
.lab-row { border-radius: 22px; background: color-mix(in srgb, var(--raised) 80%, transparent); box-shadow: 0 0 0 1px var(--divider) inset; padding: 8px; }
.lab-row-head { display: flex; align-items: center; gap: 10px; padding: 8px 10px; font-size: 1.05rem; letter-spacing: -.01em; }
.lab-row-head .sign { width: 22px; height: 22px; }
.lab-row-red .lab-row-head .sign { color: var(--red-tone); } .lab-row-yellow .lab-row-head .sign { color: var(--yellow-tone); } .lab-row-green .lab-row-head .sign { color: var(--green-tone); }
.lab-count { margin-left: auto; min-width: 2em; text-align: center; padding: 2px 10px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 9%, transparent); font-variant-numeric: tabular-nums; }
.lab-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.item { border-radius: 14px; }
.item summary { list-style: none; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 12px; border-radius: 14px; cursor: pointer; font-weight: 600; }
.item summary::-webkit-details-marker { display: none; }
.item summary:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.item summary .sign { width: 20px; height: 20px; flex: none; }
.item-red summary .sign { color: var(--red-tone); } .item-yellow summary .sign { color: var(--yellow-tone); } .item-green summary .sign { color: var(--green-tone); }
.item-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.item-plus { width: 18px; height: 18px; color: var(--ink2); transition: transform .3s var(--ease-out); }
.item[open] .item-plus { transform: rotate(45deg); }
.item-body { padding: 4px 12px 14px 42px; display: grid; gap: 8px; }
.item-reason { font-size: 1.02rem; }
.item-source { font-family: var(--mono); font-size: .84rem; color: var(--ink2); }
.lab-illustration { font-size: .92rem; color: var(--ink2); }
/* reading states (JS, motion allowed) */
.lab-panel.is-reading .scanline, .lab-panel.is-reading .scanline { opacity: 1; }
.lab-panel.is-reading .lab-text .ing { box-shadow: none; }
.lab-panel .lab-text .ing.is-scan { background: color-mix(in srgb, var(--accent) 24%, transparent); }
.lab-panel.is-reading .lab-items li:not(.is-in) { opacity: 0; }
.lab-panel.is-reading .rail li:not(.is-in) { visibility: hidden; }
.lab-panel.is-reading .bar { opacity: .2; }
.lab-items li.is-in { animation: pop .5s var(--spring); }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.96); } }
@media (max-width: 900px) { .lab-panel { grid-template-columns: 1fr; } }

/* ========== 06 SOURCES ========== */
.bodies { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: clamp(10px, 1.6vw, 18px); margin-bottom: clamp(28px, 4vw, 48px); }
.body-item { position: relative; display: inline-flex; align-items: center; padding: clamp(14px, 2vw, 24px) clamp(22px, 3vw, 40px); font-size: clamp(1.15rem, .9rem + 1vw, 1.75rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.1; border-radius: 999px; background: color-mix(in srgb, var(--raised) 84%, transparent); box-shadow: 0 0 0 1px var(--divider) inset; transition: transform .35s var(--ease-out), box-shadow .3s; }
.body-item:nth-child(2) { --d: .04s; } .body-item:nth-child(3) { --d: .08s; } .body-item:nth-child(4) { --d: .12s; } .body-item:nth-child(5) { --d: .16s; } .body-item:nth-child(6) { --d: .2s; } .body-item:nth-child(7) { --d: .24s; } .body-item:nth-child(8) { --d: .28s; }
.sources-note { font-weight: 600; color: var(--ink2); }

/* ========== 07 RULES ========== */
.runs { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 2vw, 22px); }
.run { padding: clamp(20px, 2.6vw, 32px); border-radius: var(--radius-l); background: color-mix(in srgb, var(--raised) 86%, transparent); box-shadow: 0 0 0 1px var(--divider) inset; display: grid; gap: 8px; justify-items: start; }
.run:nth-child(2) { --d: .12s; } .run:nth-child(3) { --d: .24s; }
.run-n { font-family: var(--mono); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink2); font-weight: 600; }
.run-name { font-weight: 600; }
.run .bp-num { font-size: clamp(3.2rem, 1.6rem + 4vw, 5.6rem); }
.run .tally-line { font-size: 1.05rem; }
@media (max-width: 820px) { .runs { grid-template-columns: 1fr; } }

/* ========== 08 PRIVACY ========== */
.priv-copy { display: grid; gap: clamp(16px, 2vw, 26px); justify-items: start; }
.priv-title { font-size: clamp(2.3rem, 1rem + 5vw, 6.2rem); letter-spacing: -.045em; line-height: .92; }
.priv-t2 { display: block; color: var(--ink2); margin-top: .18em; font-size: .62em; letter-spacing: -.03em; line-height: 1.02; }

/* ========== 09 THE APP ========== */
.screen-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.screen-copy .sec-head { margin-bottom: 0; }
.device { margin: 0; display: grid; gap: 14px; justify-items: center; width: 100%; } /* a definite width: the frame no longer waits for its image */
.device figcaption { color: var(--ink2); font-size: .92rem; text-align: center; }
.device-frame { position: relative; width: min(340px, 78vw, 100%); aspect-ratio: 720 / 1600; padding: 12px; border-radius: 48px; background: #0B0D12; box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--ink) 22%, transparent), var(--shadow); }
.device-frame img { width: 100%; height: 100%; border-radius: 37px; object-fit: cover; background: var(--ground); }
.shot-light { display: none; }
.is-light .shot-light { display: block; } .is-light .shot-dark { display: none; }
html:not(.js) .shot-dark { display: block; }
@media (prefers-color-scheme: light) { html:not(.js) .shot-light { display: block; } html:not(.js) .shot-dark { display: none; } }
@media (max-width: 760px) { .screen-grid { grid-template-columns: 1fr; } }

/* ========== CHECK ========== */
.check-card { position: relative; display: grid; gap: 18px; padding: clamp(30px, 6vw, 90px); border-radius: clamp(28px, 4vw, 48px); background: var(--ink); color: var(--ground); overflow: hidden; }
.check-card h2 { font-size: clamp(2.2rem, 1rem + 4.8vw, 6rem); letter-spacing: -.045em; line-height: .92; max-width: 14ch; }
.check-card p { font-size: clamp(1.1rem, .95rem + .6vw, 1.45rem); max-width: 46ch; }
.check-note { font-weight: 600; }
.check-mark { position: absolute; right: clamp(-40px, -2vw, -10px); bottom: clamp(-60px, -4vw, -20px); width: clamp(180px, 30vw, 420px); height: clamp(180px, 30vw, 420px); opacity: .12; }

/* ========== FAQ ========== */
.faq-list { display: grid; border-top: 1.5px solid var(--ink); }
.faq-item { border-bottom: 1.5px solid color-mix(in srgb, var(--ink) 30%, transparent); }
.faq-item summary { list-style: none; display: flex; align-items: center; gap: 18px; min-height: 64px; padding: 18px 4px; cursor: pointer; font-size: clamp(1.2rem, 1rem + .9vw, 1.9rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.15; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary > span { flex: 1; }
.faq-plus { width: 28px; height: 28px; transition: transform .35s var(--ease-out); }
.faq-item[open] .faq-plus { transform: rotate(45deg); }
.faq-a { padding: 0 4px 26px; max-width: 62ch; color: var(--ink2); font-size: clamp(1.05rem, .98rem + .3vw, 1.25rem); }

/* ========== FINAL ========== */
.final { padding: clamp(100px, 16vw, 240px) var(--gutter); text-align: center; }
.final-inner { max-width: 60rem; margin: 0 auto; display: grid; justify-items: center; gap: clamp(18px, 2.4vw, 28px); }
.final h2 { font-size: clamp(2.8rem, 1rem + 7.4vw, 9rem); letter-spacing: -.055em; line-height: .88; max-width: 12ch; }
.final-body { color: var(--ink2); font-size: clamp(1.1rem, 1rem + .4vw, 1.35rem); }
.final-hi { font-size: 1.3rem; font-weight: 600; color: var(--ink2); }

/* ---------- small screens & zoom ---------- */
@media (max-width: 520px) {
  .hero { align-content: end; }
  .wall { font-size: clamp(1.3rem, .8rem + 3.4vw, 1.9rem); }
  .chip { font-size: .92rem; }
}
@media (max-height: 520px) and (orientation: landscape) { .hero { min-height: auto; padding-top: calc(var(--header-h) + 16px); } .hero-fig { order: 1; width: min(100%, 40svh); margin: 0 auto; } }

/* ---------- motion off: everything at rest, nothing hidden ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
html[data-motion-paused] *, html[data-motion-paused] *::before, html[data-motion-paused] *::after { animation-play-state: paused !important; }
html[data-motion-paused] .intro { display: none !important; }

/* ---------- forced colours ---------- */
@media (forced-colors: active) {
  .chip, .lane, .legend-card, .pick, .fact, .cite, .run, .lab-row, .working, .check-card { border: 1px solid CanvasText; }
  .wall-read, .lens, .aurora, .intro { display: none; }
}

/* ========== WEB-1 additions: point rail, red citations, tags, the barcode that relaxes into words ========== */
/* the rail: one slot per item, filled with that item's point shape (a whole disc, half a disc, an empty ring) */
.rail { list-style: none; margin: 4px 0 2px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.rail li { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; }
.rail .pt { width: 26px; height: 26px; }
.tally.is-live .rail li:not(.is-in) .pt { visibility: hidden; }
.tally.is-live .rail li:not(.is-in) { box-shadow: 0 0 0 1.5px var(--divider) inset; }
.tally.is-live .rail li.is-in .pt { animation: pop .45s var(--spring); }
/* a red never lands without its reason and source in the same view */
.lane-red .lane-items { display: grid; gap: 10px; }
.lane-cite { margin: 6px 2px 0; font-size: .86rem; line-height: 1.4; color: var(--ink); }
.lane-source { display: block; font-family: var(--mono); font-size: .76rem; color: var(--ink2); margin-top: 2px; }
.tag { font-family: var(--mono); font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink2); }
.rules-caption { margin-top: 18px; color: var(--ink2); font-size: .95rem; }
.skip-link-2 { left: 12px; top: 12px; }
/* NO BARCODE: squashed tall until it reads as bars, relaxing into words as it scrolls in (decorative; the words are in the strip above) */
.barcode { margin: 0 auto clamp(40px, 6vw, 80px); max-width: var(--max); overflow: hidden; }
.barcode { height: .8em; font-size: clamp(3.2rem, 1rem + 12vw, 15rem); }
.barcode span { display: block; will-change: transform; font-size: clamp(3.2rem, 1rem + 12vw, 15rem); font-weight: 600; line-height: .8; letter-spacing: -.02em; text-transform: uppercase; white-space: nowrap; color: var(--ink); transform-origin: 50% 100%; transform: scaleY(var(--bars, 1)); }

/* ---------- the live tally layout: label + score on the left, the lanes on the right; one column on phones ---------- */
.tally.is-live .tally-pin { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); grid-template-rows: auto auto auto; grid-template-areas: "label lanes" "score lanes" "note note"; align-content: center; column-gap: clamp(20px, 3vw, 48px); row-gap: 18px; }
.tally.is-live .tally-board { display: contents; }
.tally.is-live .tally-label { grid-area: label; }
.tally.is-live .lanes { grid-area: lanes; align-self: center; }
.tally.is-live .tally-score { grid-area: score; }
.tally.is-live .tally-note { grid-area: note; }
.tally.is-live .tally-text { font-size: clamp(1.05rem, .7rem + 1.05vw, 1.75rem); }
.tally.is-live .bp-num { font-size: min(clamp(3.6rem, 1.4rem + 6vw, 8rem), 30vw); }
@media (max-width: 860px) {
  .tally.is-live .tally-pin { grid-template-columns: minmax(0, 1fr); grid-template-areas: "label" "lanes" "score"; align-content: start; row-gap: 10px; padding-top: calc(var(--header-h) + 4px); }
  .tally.is-live .tally-name, .tally.is-live .tally-note, .tally.is-live .tally-running, .tally.is-live .tally-score .tag { display: none; }
  .tally.is-live .tally-label { padding: 12px 14px; border-radius: 18px; }
  .tally.is-live .tally-text { font-size: clamp(.8rem, .55rem + 1.3vw, 1rem); line-height: 1.28; }
  .tally.is-live .lanes { gap: 8px; }
  .tally.is-live .lane { padding: 8px 10px 10px; border-radius: 16px; }
  .tally.is-live .lane-head { margin-bottom: 4px; font-size: .9rem; }
  .tally.is-live .lane-head .pt { width: 20px; height: 20px; }
  .tally.is-live .lane-items { gap: 5px; min-height: 0; }
  .tally.is-live .chip { font-size: .8rem; padding: .25em .6em .25em .38em; }
  .tally.is-live .lane-cite { font-size: .74rem; margin-top: 3px; }
  .tally.is-live .lane-source { font-size: .66rem; }
  .tally.is-live .tally-score { grid-template-columns: auto 1fr; align-items: center; column-gap: 14px; row-gap: 6px; }
  .tally.is-live .big-points { grid-row: span 2; }
  .tally.is-live .bp-num { font-size: clamp(2.6rem, 1.4rem + 6vw, 3.6rem); }
  .tally.is-live .bp-of { font-size: 1.2rem; }
  .tally.is-live .rail { margin: 0; gap: 3px; }
  .tally.is-live .rail li { width: 22px; height: 22px; }
  .tally.is-live .rail .pt { width: 19px; height: 19px; }
  .tally.is-live .tally-line { font-size: .95rem; grid-column: 2; }
  .tally.is-live .tally-score .bar { grid-column: 1 / -1; height: 10px; }
}
/* lab score block: numeral beside the line, rail and bar full width; stacked on narrow screens */
.lab-score { grid-template-columns: auto minmax(0, 1fr); }
.lab-score .rail { grid-column: 1 / -1; }
@media (max-width: 520px) {
  .lab-score { grid-template-columns: minmax(0, 1fr); }
  .lab-score .bp-num { font-size: clamp(3rem, 2rem + 6vw, 4rem); min-width: 0; text-align: left; }
}

/* lab: without colour (the signs and words still say it all) */
.lab-tools { display: flex; justify-content: flex-end; margin-top: -8px; }
.lab-mono[aria-pressed="true"] { text-decoration-thickness: 3px; }
.lab-shell.is-mono .lab-panels { filter: grayscale(1); }
/* the closing mark: its brackets close in on the dash as it arrives */
@media (prefers-reduced-motion: no-preference) {
  html.reveal-ready:not([data-motion-paused]) .final-mark:not(.is-in) .mark-l { transform: translateX(-5px); }
  html.reveal-ready:not([data-motion-paused]) .final-mark:not(.is-in) .mark-r { transform: translateX(5px); }
  html.reveal-ready .final-mark[data-reveal]:not(.is-in) { opacity: 1; transform: none; }
}

/* the live tally never lets a box shrink below its content (a collapsed row is how the label could overlap the lanes) */
.tally.is-live .tally-label, .tally.is-live .lanes, .tally.is-live .tally-score { min-height: min-content; }
/* paused: the strip stops and shows one complete run */
html[data-motion-paused] .strip-track { width: auto; flex-wrap: wrap; justify-content: center; }
html[data-motion-paused] .strip-run + .strip-run { display: none; }
section[tabindex="-1"]:focus { outline: none; }

/* ======================================================================================================================
   AWE LAYER (WEB-1 follow-up): headings, scenes, the panel, the stack, the details
   ====================================================================================================================== */

/* ---------- headings: big, few words; the second line dimmer; accents in Instrument Serif Italic (a matched device serif until it arrives) ---------- */
:root { --serif-sys: "Accent Fallback P", "Accent Fallback G", "Accent Fallback N", "Accent Fallback T", "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Noto Serif", "Times New Roman", serif; --serif: "Instrument Serif", var(--serif-sys); }
/* until the first paint is out, the accents use the device’s serif (so the serif file never competes with the first view) */
html.serif-pending { --serif: var(--serif-sys); }
.hd { font-weight: 500; letter-spacing: -.045em; line-height: .95; }
.hd .ln { display: block; }
.hd .ln-2 { color: var(--ink2); }
.hd .ac { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.02em; padding-right: .04em; }
.hero-title.hd .ln-2 { color: var(--violet); }
.sec-head .hd { font-size: clamp(2.5rem, 1rem + 5.6vw, 6.8rem); max-width: 16ch; }
.check-card .hd .ln-2 { color: inherit; opacity: .78; }
/* the reveal: each word arrives out of a soft blur, with an echo that settles into it */
.hd .wd { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  html.reveal-ready:not([data-motion-paused]) .hd[data-reveal] { opacity: 1; transform: none; }
  html.reveal-ready:not([data-motion-paused]) .hd[data-reveal]:not(.is-in) .wd { opacity: 0; filter: blur(14px); transform: translateY(.32em); text-shadow: 0 .45em 18px currentColor; }
  html.reveal-ready .hd[data-reveal] .wd { transition: opacity .55s var(--ease-out), filter .65s var(--ease-out), transform .65s var(--ease-out), text-shadow .8s var(--ease-out); }
  .hd .wd[data-k="1"] { transition-delay: .035s; } .hd .wd[data-k="2"] { transition-delay: .07s; } .hd .wd[data-k="3"] { transition-delay: .105s; }
  .hd .wd[data-k="4"] { transition-delay: .14s; } .hd .wd[data-k="5"] { transition-delay: .175s; } .hd .wd[data-k="6"] { transition-delay: .21s; }
  .hd .wd[data-k="7"] { transition-delay: .245s; } .hd .wd[data-k="8"] { transition-delay: .28s; } .hd .wd[data-k="9"] { transition-delay: .315s; }
  .hd .wd[data-k="10"] { transition-delay: .35s; } .hd .wd[data-k="11"] { transition-delay: .385s; } .hd .wd[data-k="12"] { transition-delay: .42s; }
  .hd .wd[data-k="13"] { transition-delay: .455s; } .hd .wd[data-k="14"] { transition-delay: .49s; }
  /* the hero headline waits for the iris on arrival */
  html.arriving .hero-title .wd, html.iris-in .hero-title .wd { opacity: 0; filter: blur(14px); transform: translateY(.32em); }
}
@media (prefers-reduced-motion: reduce) { .hd .wd { filter: none !important; text-shadow: none !important; } }

/* ---------- scenes: words on one side, the object on the other (sticky); on phones, the object above the words ---------- */
.scene { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 96px); align-items: start; max-width: var(--max); margin-inline: auto; }
.scene + .scene { margin-top: clamp(80px, 12vw, 180px); }
.scene-text { min-width: 0; }
.scene > .scene-fig, .scene > .fig-col, .table-side { position: sticky; top: calc(var(--header-h) + 6svh); }
.scene > .scene-fig, .fig-col > .scene-fig { height: min(76svh, 640px); width: 100%; }
.fig-tag { margin-top: 8px; text-align: center; }
.sec.scene { max-width: none; }
.sec.scene > * { max-width: none; }
.band-fig { height: clamp(220px, 34svh, 380px); width: 100%; margin: clamp(10px, 2vw, 24px) 0 clamp(20px, 3vw, 40px); }
@media (max-width: 899px) {
  .scene { grid-template-columns: 1fr; gap: 8px; }
  .scene > .scene-fig, .scene > .fig-col, .table-side { position: relative; top: auto; order: -1; }
  .scene > .scene-fig, .fig-col > .scene-fig { height: min(62svh, 96vw); }
  .table-side { order: 0; }
}

/* ---------- 01 the pack ---------- */
#pack { padding-top: clamp(60px, 10vw, 160px); }
#pack .scene-fig { height: min(84svh, 720px); }

/* ---------- 03 two scripts ---------- */
.scripts-fig { position: relative; }
.he-list { list-style: none; margin: 0 0 clamp(28px, 4vw, 48px); padding: 0; display: grid; gap: 6px; }
.he-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5em; font-size: clamp(1.6rem, 1rem + 2.2vw, 3rem); font-weight: 500; letter-spacing: -.03em; line-height: 1.15; }
.he-list [lang="hi"] { letter-spacing: 0; }
.he-dot { color: var(--ink2); }
@media (min-width: 900px) { .scripts .scripts-scene { min-height: 230svh; } }

/* ---------- 05 reasons: a panel that opens to the whole screen for one statement ---------- */
.reasons { padding-top: 0; }
.panel-wrap { position: relative; max-width: none !important; margin: 0 calc(-1 * var(--gutter)); }
.panel { position: relative; min-height: 100svh; display: grid; place-items: center; padding: clamp(80px, 12vw, 160px) var(--gutter); background: var(--red); color: var(--red-ink); clip-path: inset(var(--pi, 0px) var(--px, 0px) var(--pi, 0px) var(--px, 0px) round var(--pr, 0px)); }
.panel-inner { max-width: var(--max); width: 100%; display: grid; gap: clamp(16px, 2.4vw, 28px); }
.panel .sec-label { color: var(--red-ink); }
.panel .hd { font-size: clamp(2.8rem, 1rem + 7vw, 8.6rem); color: var(--red-ink); max-width: 14ch; }
.panel .hd .ln-2 { color: var(--red-ink); opacity: .82; }
.panel-lead { font-size: clamp(1.15rem, .98rem + .62vw, 1.55rem); line-height: 1.45; max-width: 44ch; }
/* the citations stack: each slides over the one before */
.reasons .cites { display: block; margin-top: clamp(40px, 8vw, 120px); }
.reasons .cite { position: sticky; top: calc(var(--header-h) + 4svh); margin-bottom: clamp(18px, 4vw, 40px); box-shadow: 0 0 0 1px var(--divider) inset, 0 -24px 60px -30px rgba(0, 0, 0, .55); }
.reasons .cite + .cite { top: calc(var(--header-h) + 4svh + 28px); }

/* ---------- 06 table ---------- */
.table-side { display: grid; gap: 18px; justify-items: center; }
.table-side .scene-fig { height: min(46svh, 420px); width: 100%; }
.nutri-score { justify-items: start; width: 100%; max-width: 480px; }
.nutri-score .bp-num, .run .bp-num, .lab-score .bp-num { min-width: 0; text-align: left; }
.tally .bp-num { text-align: left; }

/* ---------- 08 sources: names in type, linked by light ---------- */
.bodies-wrap { position: relative; }
.bodies { position: relative; z-index: 1; justify-content: center; gap: clamp(14px, 3vw, 40px) clamp(14px, 3vw, 36px); padding: clamp(20px, 6vw, 80px) 0; }
.bodies .body-item { background: color-mix(in srgb, var(--ground) 72%, transparent); }

/* ---------- 10 privacy ---------- */
.privacy.scene { align-items: center; }
.privacy .scene-fig { height: min(80svh, 680px); }

/* ---------- 11 the app: the frame keeps the screenshot's own proportions (nothing cropped) ---------- */
.device-wrap { position: relative; display: grid; place-items: center; }
.device-wrap .scene-layer { inset: -12%; }
@media (max-width: 760px) { .device-wrap .scene-layer { inset: -12% 0; } }
.device-frame { aspect-ratio: auto; width: min(340px, 78vw, 100%); padding: 10px; }
.device-frame img { width: 100%; height: auto; aspect-ratio: 720 / 1600; object-fit: contain; border-radius: 34px; }
.device-frame img.shot-dark { display: block; } .device-frame img.shot-light { display: none; }
.is-light .device-frame img.shot-light { display: block; } .is-light .device-frame img.shot-dark { display: none; }
@media (prefers-color-scheme: light) { html:not(.js) .device-frame img.shot-light { display: block; } html:not(.js) .device-frame img.shot-dark { display: none; } }

/* ---------- final ---------- */
.final-fig { width: min(50vw, 300px); aspect-ratio: 1; margin-top: clamp(4px, 1vw, 16px); }
.final { padding-bottom: clamp(12px, 2.5vw, 32px); }
.final h2.hd { font-size: clamp(2.8rem, 1rem + 6.4vw, 8rem); }

/* ---------- the live tally's label lets the points behind its words glow through ---------- */
html.gl-on .tally.is-live .tally-label { background: color-mix(in srgb, var(--raised) 62%, transparent); }

/* ---------- the scan line cursor over the printed label text (fine pointers; the pointer itself stays) ---------- */
.scan-cursor { position: fixed; left: 0; top: 0; width: 0; height: 2px; pointer-events: none; z-index: 40; opacity: 0; background: linear-gradient(90deg, transparent, var(--accent), transparent); box-shadow: 0 0 14px 2px color-mix(in srgb, var(--accent) 45%, transparent); transition: opacity .25s; will-change: transform, width; }
.scan-cursor.is-on { opacity: .9; }

/* ---------- lab playback polish ---------- */
.lab-panel.is-reading .bar { opacity: 0 !important; }
.button[aria-disabled="true"] { opacity: .55; cursor: progress; }

/* ---------- tablet portrait: the two-column live tally from 700 px, centred ---------- */
@media (min-width: 700px) and (max-width: 860px) {
  .tally.is-live .tally-pin { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); grid-template-areas: "label lanes" "score lanes" "note note"; align-content: center; padding-top: calc(var(--header-h) + 8px); }
  .tally.is-live .tally-name, .tally.is-live .tally-running { display: block; }
  .tally.is-live .tally-text { font-size: clamp(1rem, .7rem + 1vw, 1.3rem); }
  .tally.is-live .chip { font-size: .9rem; }
  .tally.is-live .lane-cite { font-size: .84rem; } .tally.is-live .lane-source { font-size: .76rem; }
}

/* ---------- motion off / paused / forced colours ---------- */
html[data-motion-paused] .field, html[data-motion-paused] .iris { display: none !important; }
@media (prefers-reduced-motion: reduce) { .field, .iris { display: none !important; } }
@media (forced-colors: active) { .field, .iris, .poster, .aurora { display: none !important; } .panel { border: 2px solid CanvasText; } }

/* the two-scripts section only needs its extra scroll room while the field morphs the words */
html.field-off .scripts .scripts-scene, html:not(.js) .scripts .scripts-scene { min-height: 0; }

/* the skip button keeps its place while hidden (nothing shifts when it comes and goes) */
.lab-skip.is-off { visibility: hidden; }
.lab-score .bp-num { min-width: 2.5ch; }

/* the score's gauge slot (the field draws seven arcs in it): beside the numeral, never over words */
.tally-score { position: relative; }
.ring-slot { display: none; }
.tally.is-live .ring-slot { display: block; position: absolute; right: 0; top: 50%; width: clamp(120px, 14vw, 200px); aspect-ratio: 1; transform: translateY(-50%); pointer-events: none; }
.tally.is-live .tally-score { padding-right: clamp(130px, 15vw, 214px); }
@media (max-width: 699px) { .tally.is-live .ring-slot { width: 84px; top: 64%; } .tally.is-live .tally-score { padding-right: 96px; } }
.tally .bp-num { min-width: 2.3ch; }

/* honesty details (closing audit): the illustration tag stays on the live phone tally; "Running total" only while it runs;
   the Hindi final line waits for the playback to finish */
.tally .tally-running { display: none; }
.tally.is-live[data-phase="run"] .tally-running { display: block; }
.tally.is-live:not([data-phase="run"]) .tally-running { display: block; visibility: hidden; } /* its space stays: the score block (and the gauge drawn beside it) never moves */
@media (max-width: 860px) {
  .tally.is-live .tally-score .tag { display: block; grid-column: 1 / -1; font-size: .66rem; }
  .tally.is-live .tally-running { grid-column: 1 / -1; font-size: .68rem; }
  .tally.is-live .big-points { grid-row: auto; }
  .tally.is-live .tally-line { grid-column: 1 / -1; }
}
.lab-panel.is-reading .tally-line-hi { visibility: hidden; }

/* ---------- closing motion audit ---------- */
/* M9: the big "No barcode" word fits its column (container units) */
.read .scene-text { container-type: inline-size; }
.read .barcode, .read .barcode span { font-size: min(clamp(3.2rem, 1rem + 12vw, 15rem), 17.5cqi); }
/* M5: on the first arrival the headline comes first, then the line under it, then the buttons */
@media (prefers-reduced-motion: no-preference) {
  html.js .hero-eyebrow, html.js .hero-lead, html.js .hero-actions { transition: opacity .7s var(--ease-out), transform .9s var(--ease-out); }
  html.js .hero-lead { transition-delay: .3s; } html.js .hero-actions { transition-delay: .45s; }
  html.arriving .hero-eyebrow, html.arriving .hero-lead, html.arriving .hero-actions, html.iris-in .hero-eyebrow, html.iris-in .hero-lead, html.iris-in .hero-actions { opacity: 0; transform: translateY(14px); }
}
/* M10: counters grow leftwards, so "0 / 0" and "4.5 / 7" sit the same way */
.tally .bp-num, .lab-score .bp-num { text-align: right; }
/* M13: tablet portrait, the score block keeps one row of dots; the gauge takes its own row under it */
@media (min-width: 700px) and (max-width: 860px) {
  .tally.is-live .rail { flex-wrap: nowrap; gap: 4px; }
  .tally.is-live .rail li { width: 22px; height: 22px; }
  .tally.is-live .tally-score { padding-right: 0; }
  .tally.is-live .ring-slot { position: relative; right: auto; top: auto; transform: none; width: 112px; grid-column: 1 / -1; order: 9; margin: 6px 0 14px; }
  .tally.is-live .tally-score .tag { order: 10; }
  .tally.is-live .tally-running { white-space: nowrap; }
}

/* ---------- closing accessibility audit ---------- */
/* F5: a soft ground-coloured halo keeps body text clear of points passing behind it */
html.gl-on :is(.sec-label, .sec-lead, .hero-eyebrow, .hero-lead, .faq-a, .tag, .final-body, .final-hi, .store-state, .working-note, .tally-note, .lab-hint) { text-shadow: 0 0 3px var(--ground), 0 0 8px var(--ground), 0 0 14px var(--ground); }
/* F6: the scan line runs under the line being read, not through it, with a softer glow */
.scanline { height: 2px; box-shadow: 0 0 8px 1px color-mix(in srgb, var(--accent) 40%, transparent); }
/* F12: phones, the pinned tally keeps its reasons and sources readable, and its dots on one row */
@media (max-width: 860px) {
  .tally.is-live .lane-cite { font-size: .8rem; }
  .tally.is-live .lane-source { font-size: .75rem; }
}
@media (max-width: 699px) { .tally.is-live .rail { grid-column: 1 / -1; flex-wrap: nowrap; } }

/* ---------- closing budgets audit ---------- */
@media (max-width: 520px) { .lab-controls .lab-skip { flex-basis: 100%; justify-content: flex-start; text-align: left; } }

/* rendering: sections far below the first screen are laid out only when they come near (a much lighter first view) */
.home > :is(.read, .scripts, .table-sec, .lab, .sources, .rules, .privacy, .screen, .check, .faq) { content-visibility: auto; contain-intrinsic-size: auto 1400px; }
/* landing on a section (a #link, or Back / Forward): every section is laid out first, so nothing jumps after the landing */
html.cv-off .home > :is(.read, .scripts, .table-sec, .lab, .sources, .rules, .privacy, .screen, .check, .faq) { content-visibility: visible; }

/* phones under 700 px: the running line already says "so far", so the "Running total" label gives its row back, and the
   illustration tag keeps to one line; the pinned tally then still fits a 360 × 800 screen */
@media (max-width: 699px) {
  .tally.is-live .tally-running, .tally.is-live[data-phase="run"] .tally-running, .tally.is-live:not([data-phase="run"]) .tally-running { display: none; }
  .tally.is-live .tally-score .tag { font-size: .64rem; letter-spacing: .04em; white-space: nowrap; }
}