:root{
  --ink:#10324F;
  --ink-2:#3C5A74;
  --water:#2E9BD6;
  --water-deep:#1C7DB4;
  --water-soft:#DCEFFA;
  --mist:#F2F8FC;
  --lime:#D2D755;
  --sugar:#C92A63;
  --sugar-soft:#FBE4EC;
  --line:#CFE0EC;
  --paper:#FFFFFF;
  --radius-s:6px;
  --radius-l:18px;
  --measure:68ch;
  --display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --body:"Figtree",ui-sans-serif,system-ui,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:1.0625rem;line-height:1.6}
img,svg{max-width:100%;display:block}
a{color:var(--water-deep);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--water);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-999px}
.skip:focus{left:16px;top:12px;background:var(--paper);padding:8px 12px;z-index:10}

/* header */
.site-head{border-bottom:1px solid var(--line);background:var(--paper)}
.head-in{max-width:1120px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-family:var(--display);font-weight:700;font-size:1.15rem;letter-spacing:-.01em}
.brand svg{width:28px;height:28px}
.nav{display:flex;gap:4px 18px;flex-wrap:wrap;margin-left:auto}
.nav a{color:var(--ink-2);text-decoration:none;font-size:.95rem;padding:4px 0;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current=page]{color:var(--ink);border-bottom-color:var(--water)}
@media (max-width:760px){
  .nav{margin-left:0;width:100%;flex-wrap:nowrap;overflow-x:auto;gap:18px;padding-bottom:2px;scrollbar-width:none}
  .nav a{white-space:nowrap}
}

/* layout */
main{display:block}
.wrap{max-width:1120px;margin-left:auto;margin-right:auto;padding-left:20px;padding-right:20px}
.read{max-width:var(--measure)}
section{padding-top:56px;padding-bottom:56px}
.band{background:var(--mist)}
h1,h2,h3{font-family:var(--display);line-height:1.12;letter-spacing:-.02em;margin:0 0 .5em;font-weight:700}
h1{font-size:clamp(2.1rem,5.2vw,3.6rem);font-variation-settings:"opsz" 96}
h2{font-size:clamp(1.55rem,3.2vw,2.15rem);margin-top:1.6em}
h3{font-size:1.25rem;margin-top:1.4em}
.read h2:first-child,.read h3:first-child{margin-top:0}
p,ul,ol,table{margin:0 0 1.1em}
li{margin-bottom:.4em}
.lede{font-size:1.2rem;color:var(--ink-2);max-width:60ch}
.small{font-size:.9rem;color:var(--ink-2)}
strong{font-weight:700}

/* article chrome */
.page-head{padding-top:44px;padding-bottom:8px}
.crumbs{font-size:.9rem;color:var(--ink-2);margin-bottom:14px}
.crumbs a{color:var(--ink-2)}
.review{display:flex;gap:12px;align-items:flex-start;border-left:4px solid var(--lime);background:#FAFBEA;padding:12px 16px;margin:18px 0 8px;max-width:var(--measure);font-size:.95rem;border-radius:0 var(--radius-s) var(--radius-s) 0}
.answer{border:2px solid var(--water);border-radius:var(--radius-l);padding:20px 22px;margin:8px 0 28px;max-width:var(--measure)}
.answer p:last-child{margin-bottom:0}
.answer h2{margin:0 0 .35em;font-size:1.25rem}
.note{background:var(--mist);border-radius:var(--radius-s);padding:14px 18px;max-width:var(--measure)}
.note p:last-child{margin-bottom:0}
.warn{background:var(--sugar-soft);border-radius:var(--radius-s);padding:14px 18px;max-width:var(--measure)}
.warn p:last-child{margin-bottom:0}
.cite{font-size:.82rem;vertical-align:super;line-height:0;text-decoration:none;margin-left:1px}

/* tables */
.tbl{overflow-x:auto;max-width:100%;margin:0 0 1.4em}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:.98rem}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
thead th{font-family:var(--display);font-weight:700;border-bottom:2px solid var(--ink)}
tbody th{font-weight:700;white-space:nowrap}
td.no{color:var(--sugar);font-weight:700}

/* hero cups */
.hero{padding-top:48px;padding-bottom:40px}
.hero h1{max-width:15ch}
.ages{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 26px;padding:0;list-style:none}
.ages button{font:inherit;font-size:.98rem;border:2px solid var(--ink);background:var(--paper);color:var(--ink);border-radius:999px;padding:7px 14px;cursor:pointer}
.ages button[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.ages button:hover{border-color:var(--water-deep)}
.sex{display:none;gap:8px;margin:-12px 0 22px}
.sex.on{display:flex}
.sex button{font:inherit;font-size:.9rem;border:1px solid var(--ink-2);background:var(--paper);border-radius:999px;padding:4px 12px;cursor:pointer;color:var(--ink)}
.sex button[aria-pressed=true]{background:var(--water-soft);border-color:var(--water-deep)}
.cups-out{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:36px;align-items:start}
@media (max-width:820px){.cups-out{grid-template-columns:1fr}}
.cuprow{display:flex;flex-wrap:wrap;gap:10px 8px;margin:0 0 10px;min-height:76px}
.cup{width:46px;height:62px}
.cup .body{fill:var(--paper);stroke:var(--ink);stroke-width:2.2}
.cup .fill{fill:var(--water)}
.cup.maybe .fill{fill:var(--water-soft)}
.cup.milk .fill{fill:#FFFFFF;stroke:none}
.cup.milk .body{fill:#FFFFFF;stroke-dasharray:4 3}
.cup.juice .fill{fill:#F5B83D}
.legend{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.9rem;color:var(--ink-2);margin-bottom:6px;padding:0;list-style:none}
.legend span{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-1px;border:1.5px solid var(--ink)}
.big{font-family:var(--display);font-size:clamp(2.2rem,6vw,3.4rem);font-weight:700;line-height:1;letter-spacing:-.03em;margin:0 0 6px}
.big small{font-size:.4em;font-weight:600;letter-spacing:0;color:var(--ink-2);margin-left:6px}
.say{font-size:1.05rem;margin:0 0 10px}
.limits{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.limits li{padding:10px 0;border-bottom:1px solid var(--line);margin:0;display:flex;gap:12px;justify-content:space-between}
.limits b{font-weight:700;white-space:nowrap}
@media (prefers-reduced-motion:no-preference){
  .cup .fill{transition:transform .45s cubic-bezier(.2,.7,.2,1);transform-origin:50% 100%}
  .cup.empty .fill{transform:scaleY(0)}
}
.cup.empty .fill{visibility:hidden}
@media (prefers-reduced-motion:no-preference){.cup.empty .fill{visibility:visible}}

/* question index */
.qs{list-style:none;padding:0;margin:0;border-top:2px solid var(--ink)}
.qs li{margin:0;border-bottom:1px solid var(--line)}
.qs a{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:baseline;padding:18px 0;text-decoration:none;color:var(--ink)}
.qs a:hover .q{color:var(--water-deep)}
.q{font-family:var(--display);font-size:clamp(1.15rem,2.4vw,1.45rem);font-weight:600;letter-spacing:-.01em}
.qs .who{font-size:.9rem;color:var(--ink-2);white-space:nowrap}
@media (max-width:560px){.qs a{grid-template-columns:1fr}.qs .who{white-space:normal}}

/* ladder */
.ladder{list-style:none;padding:0;margin:0 0 1.4em;max-width:var(--measure)}
.ladder li{display:grid;grid-template-columns:44px 1fr;gap:14px;padding:12px 0;border-bottom:1px solid var(--line);margin:0}
.ladder .rung{font-family:var(--display);font-weight:700;font-size:1.3rem;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--water-soft)}
.ladder li:first-child .rung{background:var(--water);color:#fff}
.ladder li:last-child .rung{background:var(--sugar-soft);color:var(--sugar)}
.ladder p{margin:0}

/* sugar bars */
.bars{list-style:none;padding:0;margin:0 0 1.2em;max-width:760px}
.bars li{display:grid;grid-template-columns:minmax(150px,230px) 1fr;gap:12px;align-items:center;margin:0 0 10px}
.bars .track{height:26px;position:relative}
.bars .bar{height:100%;background:var(--sugar);border-radius:0 var(--radius-s) var(--radius-s) 0;min-width:2px}
.bars .bar.nat{background:#E79AB6}
.bars .val{position:absolute;left:8px;top:2px;font-size:.88rem;color:#fff;font-weight:700;white-space:nowrap}
.bars .val.out{color:var(--ink);background:#fff;padding:0 4px;z-index:1}
.bars .limit{z-index:0}
.bars .limit{position:absolute;top:-6px;bottom:-6px;width:0;border-left:2px dashed var(--ink)}
@media (max-width:560px){.bars li{grid-template-columns:1fr;gap:4px}}

/* school band */
.school{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:40px;align-items:center}
@media (max-width:820px){.school{grid-template-columns:1fr}}
.kit{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.kit li{padding:10px 0;border-bottom:1px solid var(--line);margin:0}
.btn{display:inline-block;background:var(--ink);color:#fff;text-decoration:none;font-family:var(--display);font-weight:600;padding:12px 20px;border-radius:999px;border:0;font-size:1rem;cursor:pointer}
.btn:hover{background:var(--water-deep)}
.btn.ghost{background:transparent;color:var(--ink);border:2px solid var(--ink)}

/* forms */
form.f{display:grid;gap:14px;max-width:560px}
form.f label{display:grid;gap:4px;font-weight:700;font-size:.95rem}
form.f input,form.f select,form.f textarea{font:inherit;font-weight:400;padding:10px 12px;border:1.5px solid var(--ink-2);border-radius:var(--radius-s);background:#fff;color:var(--ink)}
form.f .hp{display:none}

/* sources */
.srcs{font-size:.92rem;padding-left:1.2em;max-width:var(--measure)}
.srcs li{margin-bottom:.6em}

/* footer */
.site-foot{border-top:1px solid var(--line);margin-top:40px;padding:36px 0 48px;font-size:.92rem;color:var(--ink-2)}
.foot-in{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:32px}
@media (max-width:760px){.foot-in{grid-template-columns:1fr}}
.site-foot a{color:var(--ink-2)}
.foot-links{list-style:none;padding:0;margin:0;columns:2;gap:24px}
.foot-links li{margin:0 0 6px}
.sponsor{border-top:1px solid var(--line);padding-top:16px;margin-top:20px}

/* print */
@media print{
  .site-head,.site-foot,.noprint,.review{display:none !important}
  body{font-size:12pt}
  section{padding:12pt 0}
  a{color:var(--ink);text-decoration:none}
}

/* faq */
details.faq{border-bottom:1px solid var(--line);padding:2px 0;max-width:var(--measure)}
details.faq summary{cursor:pointer;font-family:var(--display);font-weight:600;font-size:1.1rem;padding:12px 28px 12px 0;list-style:none;position:relative}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";position:absolute;right:4px;top:8px;font-size:1.4rem;color:var(--water-deep)}
details.faq[open] summary::after{content:"\2212"}
details.faq p{margin:0 0 14px}

/* tracker printable */
.tracker{min-width:560px}
.tracker td.dropcell{padding:6px 4px}
.tracker td.dropcell svg{width:34px;height:34px;margin:auto}
.tracker tbody th{padding-top:14px}

/* label checker */
.toolgrid{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:8px}
@media (max-width:820px){.toolgrid{grid-template-columns:1fr;gap:24px}}
.tool select{font:inherit}
.big2{font-family:"Bricolage Grotesque",Figtree,sans-serif;font-weight:700;font-size:1.5rem;line-height:1.2;margin:16px 0 8px;color:var(--ink)}
.big2 small{font-family:Figtree,sans-serif;font-weight:400;font-size:.9rem;color:#4a6378}
.verdict{margin:8px 0;padding:12px 14px;border-radius:10px;border-left:5px solid var(--water);background:var(--water-soft)}
.verdict.bad{background:var(--sugar-soft);border-left-color:var(--sugar)}
.verdict.warn2{background:#FFF6D6;border-left-color:#C99A00}
.verdict.ok{background:#E6F4E1;border-left-color:#4C9A3A}
.found{list-style:none;padding:0;margin:8px 0}
.found li{padding:6px 0;border-bottom:1px solid #E1ECF3}
.chip{display:inline-block;font-size:.75rem;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--water-soft);color:var(--ink);margin-right:6px}
.found .sugar .chip{background:var(--sugar-soft);color:#8E1744}
.found .low .chip{background:#FFF0B8}
.found .caf .chip{background:#EADFF7}
.found .acid .chip{background:#E3E8EC}

/* drink guide */
.verd{width:100%}
.verd td.v{font-weight:700;white-space:nowrap}
.v.ask{color:#9A6B00}.v.best{color:#2E7D32}.v.ok{color:#1C7DB4}.v.some{color:#9A6B00}.v.no{color:#C92A63}
.drinkgrid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.drinkgrid a{display:block;padding:12px 14px;border:1px solid #D6E6F0;border-radius:12px;text-decoration:none;color:var(--ink);background:#fff}
.drinkgrid a:hover{border-color:var(--water);background:var(--mist)}
.drinkgrid .q{display:block;font-weight:700}
.drinkgrid .who{display:block;font-size:.88rem;color:#4a6378;margin-top:2px}
.tag{display:inline-block;font-size:.72rem;font-weight:700;padding:1px 8px;border-radius:999px;margin-top:6px}
.tag.best{background:#E1F2DE;color:#256629}.tag.ok{background:var(--water-soft);color:#14598A}.tag.some{background:#FFF0B8;color:#7A5600}.tag.no{background:var(--sugar-soft);color:#8E1744}

/* certificate and poster */
.cert{border:10px double var(--water);border-radius:18px;padding:48px 32px;text-align:center;margin:12px 0}
.cert h2{font-size:2.4rem;margin:0 0 12px}
.cert .line{display:inline-block;min-width:60%;border-bottom:2px solid var(--ink);height:2rem}
.poster h1{font-size:3rem}
.poster .big-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.chal{counter-reset:day;list-style:none;padding:0}
.chal li{counter-increment:day;display:grid;grid-template-columns:72px 1fr 40px;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid #D6E6F0}
.chal li::before{content:"Day " counter(day);font-weight:800;color:var(--water-deep)}
.chal .box{width:32px;height:32px;border:2px solid var(--ink);border-radius:8px}

/* ===== v2: color and usability ===== */
:root{--sky:#6FC7EA;--sky-soft:#E7F5FC;--lime-soft:#F4F6CF;--navy:#003865;--green:#4C9A3A;--green-soft:#E3F3DE;--amber:#C99A00;--amber-soft:#FFF3CC;--purple-soft:#EEE6FA}
body{font-size:1.1rem}
h2{color:var(--ink)}
.read h2:not(:first-child)::before,.wrap>h2::before{content:"";display:block;width:38px;height:5px;border-radius:3px;background:var(--lime);margin-bottom:10px}

/* header + nav */
.site-head{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.96);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.nav a.cta{background:var(--lime);color:var(--ink);font-weight:700;padding:7px 14px;border-radius:999px;border-bottom:0}
.nav a.cta:hover{background:#c8cd45;border-bottom:0}
@media (max-width:760px){.nav a.cta{order:-1}}

/* page head band */
.headband{position:relative;overflow:hidden;background:linear-gradient(180deg,#DFF2FC 0%,#F4FAFE 70%,#fff 100%)}
.headband::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:
  radial-gradient(circle at 93% 28%,rgba(111,199,234,.38) 0 46px,transparent 47px),
  radial-gradient(circle at 85% 72%,rgba(210,215,85,.55) 0 24px,transparent 25px),
  radial-gradient(circle at 97% 88%,rgba(111,199,234,.26) 0 62px,transparent 63px),
  radial-gradient(circle at 78% 22%,rgba(255,255,255,.7) 0 14px,transparent 15px)}
.headband .page-head{position:relative;padding-bottom:26px}
@media (max-width:700px){.headband::before{opacity:.5}}

/* answer boxes and notes */
.answer{background:#EAF6FD;border:2px solid #BFE3F5;border-radius:var(--radius-l);box-shadow:0 6px 18px rgba(46,155,214,.10)}
.answer h2{color:var(--water-deep)}
.note{background:var(--lime-soft)}
.review{background:#F4F6CF;border-left-color:var(--lime)}

/* buttons */
.btn{background:var(--water-deep);color:#fff;padding:13px 22px;font-size:1.02rem;box-shadow:0 3px 0 rgba(16,50,79,.18);transition:transform .12s,box-shadow .12s,background .12s}
.btn:hover{background:var(--ink);transform:translateY(-1px)}
.btn.lime{background:var(--lime);color:var(--ink)}
.btn.lime:hover{background:#c8cd45;color:var(--ink)}
.btn.ghost{background:#fff;color:var(--ink);box-shadow:none}
.btn.ghost:hover{background:var(--sky-soft);color:var(--ink)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin:18px 0 0}

/* tables */
thead th{background:var(--sky-soft);border-bottom:2px solid var(--water)}
tbody tr:nth-child(even){background:#F7FBFE}

/* FAQ cards */
details.faq{background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:2px 16px;margin-bottom:10px}
details.faq[open]{border-color:var(--sky);background:#FAFDFF}

/* icons */
.ico{display:inline-grid;place-items:center;width:58px;height:58px;border-radius:18px;flex:none}
.ico svg{width:36px;height:36px;fill:none;stroke:#10324F;stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
.c-sky{background:var(--sky-soft);color:var(--sky)}
.c-green{background:var(--green-soft);color:#7CC36B}
.c-amber{background:var(--amber-soft);color:#F5B83D}
.c-pink{background:var(--sugar-soft);color:#E8789E}
.c-lime{background:var(--lime-soft);color:var(--lime)}
.c-purple{background:var(--purple-soft);color:#B79BEA}

/* tiles */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px;list-style:none;padding:0;margin:0}
.tiles li{margin:0}
.tiles a{display:flex;gap:14px;align-items:center;height:100%;padding:16px;border-radius:20px;background:#fff;border:1.5px solid var(--line);text-decoration:none;color:var(--ink);transition:transform .15s,box-shadow .15s,border-color .15s}
.tiles a:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(46,155,214,.18);border-color:var(--water)}
.tiles .q{display:block;font-family:var(--display);font-weight:700;font-size:1.08rem;line-height:1.2;letter-spacing:-.01em}
.tiles .who{display:block;font-size:.9rem;color:var(--ink-2);margin-top:3px}
.tiles .tag{margin-top:6px}

/* home hero */
.herobg{position:relative;overflow:hidden;background:linear-gradient(180deg,#D9F0FB 0%,#EEF8FD 60%,#fff 100%)}
.herobg::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:
  radial-gradient(circle at 94% 18%,rgba(111,199,234,.4) 0 70px,transparent 71px),
  radial-gradient(circle at 88% 58%,rgba(210,215,85,.6) 0 34px,transparent 35px),
  radial-gradient(circle at 98% 80%,rgba(111,199,234,.28) 0 90px,transparent 91px),
  radial-gradient(circle at 80% 12%,rgba(255,255,255,.8) 0 18px,transparent 19px),
  radial-gradient(circle at 70% 90%,rgba(255,255,255,.6) 0 26px,transparent 27px)}
.herobg .hero{position:relative}
.eyebrow{display:inline-block;background:var(--lime);color:var(--ink);font-weight:700;font-size:.85rem;padding:4px 12px;border-radius:999px;margin:0 0 14px}
.hero h1{max-width:16ch}
.ages button{border-color:var(--water-deep);padding:10px 16px;font-weight:600}
.ages button[aria-pressed=true]{background:var(--water-deep);border-color:var(--water-deep)}
.cups-out{background:#fff;border:2px solid #BFE3F5;border-radius:24px;padding:22px;box-shadow:0 10px 28px rgba(46,155,214,.14)}

/* scan feature band */
.featband{background:linear-gradient(135deg,#F4F6CF 0%,#E7F5FC 100%)}
.steps3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;list-style:none;padding:0;margin:20px 0 0}
@media (max-width:760px){.steps3{grid-template-columns:1fr}}
.steps3 li{background:#fff;border-radius:18px;padding:16px;display:flex;gap:12px;align-items:center;margin:0;border:1.5px solid #fff}
.steps3 b{display:block;font-family:var(--display)}
.steps3 span.s{font-size:.9rem;color:var(--ink-2)}

/* school band colors */
.band.sky{background:var(--sky-soft)}
.band.lime{background:var(--lime-soft)}
.band.mist{background:var(--mist)}

/* verdict pills + age picker */
.vbadge{display:inline-block;font-weight:800;font-size:.85rem;padding:3px 12px;border-radius:999px;white-space:nowrap}
.vbadge.best{background:#DFF2DA;color:#1F6B2A}.vbadge.ok{background:var(--sky-soft);color:#14598A}
.vbadge.some,.vbadge.ask{background:var(--amber-soft);color:#7A5600}.vbadge.no{background:var(--sugar-soft);color:#8E1744}
.verd tr.me{background:#FFFBDF !important;outline:2px solid var(--lime);outline-offset:-2px}
.agepick{background:#fff;border:2px solid #BFE3F5;border-radius:20px;padding:18px;margin:0 0 26px;max-width:var(--measure)}
.agepick .label{font-family:var(--display);font-weight:700;margin:0 0 10px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.chips button{font:inherit;font-weight:600;font-size:.98rem;border:2px solid var(--water-deep);background:#fff;color:var(--ink);border-radius:999px;padding:9px 16px;cursor:pointer;min-height:44px}
.chips button[aria-pressed=true]{background:var(--water-deep);color:#fff}
.myverdict{display:flex;gap:14px;align-items:flex-start;border-radius:16px;padding:14px 16px;border-left:8px solid var(--sky);background:var(--sky-soft)}
.myverdict.best{border-left-color:#4C9A3A;background:var(--green-soft)}
.myverdict.some,.myverdict.ask{border-left-color:#E5A800;background:var(--amber-soft)}
.myverdict.no{border-left-color:var(--sugar);background:var(--sugar-soft)}
.myverdict p{margin:4px 0 0}
.drinkhead{display:flex;gap:14px;align-items:center;margin:0 0 18px}

/* drink guide cards */
.drinkgrid a{border-radius:18px;border:1.5px solid var(--line);padding:14px;display:flex;gap:12px;align-items:center;transition:transform .15s,box-shadow .15s}
.drinkgrid a:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(46,155,214,.16)}
.drinkgrid .ico{width:52px;height:52px}
.drinkgrid .ico svg{width:32px;height:32px}
.groupband{margin:30px 0 8px;display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:1.4rem}
.groupband i{display:inline-block;width:14px;height:14px;border-radius:50%}

/* related */
.qs{border-top:0}
.qs a{background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:8px}
.qs a:hover{border-color:var(--water);background:var(--sky-soft)}

/* label checker action cards */
.actions3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0 0 8px}
@media (max-width:760px){.actions3{grid-template-columns:1fr}}
.act{display:flex;gap:14px;align-items:center;text-align:left;font:inherit;color:var(--ink);text-decoration:none;cursor:pointer;border-radius:20px;padding:16px;border:2px solid transparent;transition:transform .15s,box-shadow .15s}
.act:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(46,155,214,.2)}
.act b{display:block;font-family:var(--display);font-size:1.15rem}
.act span.s{display:block;font-size:.9rem;color:var(--ink-2)}
.act.lime{background:var(--lime-soft);border-color:var(--lime)}
.act.sky{background:var(--sky-soft);border-color:var(--sky)}
.act.white{background:#fff;border-color:var(--line)}
.sc-status{min-height:1.4em;margin:8px 0}
.sc-card{background:#fff;border:2px solid #BFE3F5;border-radius:18px;padding:16px;margin:12px 0}
.sc-card h3{margin:0 0 4px;font-size:1.2rem}
.sc-card .src{font-size:.88rem;color:var(--ink-2);margin:0 0 8px}
.sc-card .flag{background:var(--amber-soft);border-left:5px solid #E5A800;padding:10px 12px;border-radius:10px;margin:10px 0}
dialog#sc-dialog{border:0;border-radius:22px;padding:0;max-width:min(520px,94vw);width:100%;box-shadow:0 20px 60px rgba(16,50,79,.35)}
dialog#sc-dialog::backdrop{background:rgba(16,50,79,.55)}
.sc-inner{padding:16px}
.sc-video{position:relative;border-radius:16px;overflow:hidden;background:#EAF3F9;aspect-ratio:4/3}
.sc-video video{width:100%;height:100%;object-fit:cover}
.sc-aim{position:absolute;left:12%;right:12%;top:36%;bottom:36%;border:3px solid var(--lime);border-radius:12px;box-shadow:0 0 0 999px rgba(16,50,79,.18)}
.sc-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}

/* sticky mobile CTA */
.stickycta{display:none}
@media (max-width:760px){
  .stickycta{display:block;position:fixed;left:14px;right:14px;bottom:14px;z-index:40;text-align:center;background:var(--lime);color:var(--ink);font-family:var(--display);font-weight:800;text-decoration:none;padding:15px;border-radius:999px;box-shadow:0 8px 24px rgba(16,50,79,.3)}
  body{padding-bottom:84px}
}
@media print{.stickycta{display:none !important}}

/* footer */
.site-foot{background:var(--navy);color:#CFE3F2;border-top:0;margin-top:56px}
.site-foot a{color:#fff}
.sponsor{border-top-color:rgba(255,255,255,.2)}
.site-foot .small{color:#9FC3DD}

/* quiz */
.quiz{max-width:720px;margin:0 auto}
.qcard{background:#fff;border:2px solid #BFE3F5;border-radius:24px;padding:22px;box-shadow:0 10px 28px rgba(46,155,214,.14)}
.qprog{height:12px;border-radius:999px;background:var(--sky-soft);overflow:hidden;margin-bottom:16px}
.qprog i{display:block;height:100%;width:0;background:var(--lime);transition:width .3s}
.qtext{font-family:var(--display);font-weight:700;font-size:clamp(1.3rem,3.4vw,1.8rem);line-height:1.2;margin:0 0 16px}
.qopts{display:grid;gap:10px;list-style:none;padding:0;margin:0}
.qopts button{width:100%;text-align:left;font:inherit;font-weight:600;font-size:1.08rem;padding:14px 16px;border-radius:16px;border:2px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;min-height:56px}
.qopts button:hover:not([disabled]){border-color:var(--water);background:var(--sky-soft)}
.qopts button.right{background:var(--green-soft);border-color:#4C9A3A}
.qopts button.wrong{background:var(--sugar-soft);border-color:var(--sugar)}
.qwhy{margin:14px 0 0;padding:12px 14px;border-radius:14px;background:var(--lime-soft)}
.qdone{text-align:center}
.qdone .score{font-family:var(--display);font-weight:800;font-size:3rem;margin:6px 0}
.badge{display:inline-grid;place-items:center;width:110px;height:110px;border-radius:50%;background:var(--lime);margin:8px auto}
.badge svg{width:64px;height:64px;fill:#fff;stroke:var(--ink);stroke-width:2.4;stroke-linejoin:round}

/* sample materials */
.sample{border:2px dashed var(--sky);border-radius:20px;padding:18px 20px;background:#fff;margin:0 0 20px}
.sample .stamp{display:inline-block;background:var(--amber-soft);color:#7A5600;font-weight:800;font-size:.8rem;padding:3px 10px;border-radius:999px;margin-bottom:8px}
.timeline{list-style:none;padding:0;margin:0 0 1.4em;border-left:4px solid var(--sky)}
.timeline li{padding:6px 0 10px 18px;position:relative;margin:0}
.timeline li::before{content:"";position:absolute;left:-10px;top:12px;width:16px;height:16px;border-radius:50%;background:var(--lime);border:3px solid #fff;box-shadow:0 0 0 2px var(--sky)}
.timeline b.t{display:block;font-family:var(--display);color:var(--water-deep)}
.script{background:#F7FBFE;border-left:5px solid var(--sky);border-radius:0 12px 12px 0;padding:10px 14px;margin:8px 0;font-style:normal}
.script .who{font-weight:800;color:var(--water-deep)}
@media print{.site-foot{display:none}.headband{background:none}.headband::before{display:none}}

/* printable quiz */
.printq>li{margin-bottom:14px}
.optlist{list-style:none;padding:0;margin:4px 0 0 4px}
.optlist li{margin:2px 0}
.pagebreak{break-before:page;page-break-before:always}
@media screen{.pagebreak{border-top:2px dashed var(--line);margin:28px 0}}

/* verdict table stacks on phones so nothing scrolls sideways */
@media (max-width:640px){
  .verd.stack thead,.verd thead{position:absolute;left:-9999px}
  .verd,.verd tbody,.verd tr,.verd th,.verd td{display:block;width:100%}
  .verd tr{border:1.5px solid var(--line);border-radius:14px;padding:10px 12px;margin-bottom:10px;background:#fff}
  .verd th[scope=row]{padding:0 0 4px;border:0;font-family:var(--display)}
  .verd td{padding:2px 0;border:0}
  .verd td.v{padding-bottom:4px}
  .verd tr.me{outline-offset:0}
}