/* Layout: review-site listicle. One centered 64rem column; editor's-pick card first, then comparison, packages, guide. Navy ink, green for trust, amber only on buy buttons. */
:root{
  --bg:#F6F7F9;
  --card:#FFFFFF;
  --ink:#16213A;
  --muted:#5B6578;
  --line:#E2E6EE;
  --navy:#16213A;
  --green:#1E7A55;
  --green-soft:#E6F3EC;
  --amber:#FFB020;
  --amber-ink:#2A1C00;
  --star:#F5A623;
  --f-display:"Bricolage Grotesque","Avenir Next","Segoe UI",system-ui,sans-serif;
  --f-body:"Source Sans 3","Segoe UI",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0F1420; --card:#171E2C; --ink:#E6EAF2; --muted:#A3ADBF; --line:#273044; --navy:#0B1020;
    --green:#5CC79A; --green-soft:#16271F; --amber:#FFB020; --amber-ink:#2A1C00; --star:#F5A623; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0F1420; --card:#171E2C; --ink:#E6EAF2; --muted:#A3ADBF; --line:#273044; --navy:#0B1020;
  --green:#5CC79A; --green-soft:#16271F; --amber:#FFB020; --amber-ink:#2A1C00; --star:#F5A623; color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--f-body); font-size:1.08rem; line-height:1.65; padding-bottom:88px}
img{max-width:100%; display:block; height:auto}
a{color:var(--green); text-underline-offset:3px}
a:focus-visible,.cta:focus-visible,summary:focus-visible{outline:3px solid var(--green); outline-offset:3px}
h1,h2,h3{font-family:var(--f-display); line-height:1.15; margin:0; text-wrap:balance}
p{margin:0}
.gutter{padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px))}
.wrap{max-width:64rem; margin:0 auto}
.read{max-width:44rem; margin:0 auto}
.stack{display:flex; flex-direction:column; gap:1rem}
.muted{color:var(--muted)}
.small{font-size:.88rem; color:var(--muted); line-height:1.5}

/* top bar */
.disclosure{background:var(--card); border-bottom:1px solid var(--line); font-size:.8rem; color:var(--muted); padding-block:8px; text-align:center}
.topbar{background:var(--navy); color:#fff; padding-block:14px}
.topbar .wrap{display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap}
.brand{font-family:var(--f-display); font-weight:700; font-size:1.15rem; color:#fff; text-decoration:none; display:flex; align-items:center; gap:.5rem}
.brand .mark{width:1.4rem; height:1.4rem; border-radius:6px; background:var(--green); display:grid; place-items:center}
.topbar .meta{font-family:var(--f-mono); font-size:.75rem; color:#C9D2E3}

/* hero */
.hero{padding-block:2.5rem 1.5rem; text-align:center}
.hero .eyebrow{display:inline-block; font-family:var(--f-mono); font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:var(--green); background:var(--green-soft); padding:.3rem .7rem; border-radius:999px}
.hero h1{font-size:clamp(1.9rem, 4.8vw, 3rem); letter-spacing:-.015em; margin-top:.9rem}
.hero .lede{font-size:1.15rem; color:var(--muted); max-width:40rem; margin:1rem auto 0}
.criteria{display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem; margin-top:1.25rem; padding:0; list-style:none}
.criteria li{background:var(--card); border:1px solid var(--line); border-radius:999px; padding:.3rem .8rem; font-size:.88rem; font-family:var(--f-display)}

/* pick card */
.pick{background:var(--card); border:2px solid var(--green); border-radius:20px; overflow:hidden; box-shadow:0 10px 30px rgba(22,33,58,.08)}
.pick-head{background:var(--green); color:#fff; font-family:var(--f-display); font-weight:700; padding:.55rem 1.2rem; display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; font-size:.95rem}
.pick-body{display:grid; grid-template-columns:15rem 1fr 14rem; gap:1.75rem; padding:1.75rem; align-items:center}
.pick-body > *{min-width:0}
.bottle{background:var(--green-soft); border-radius:16px; padding:1rem; display:grid; place-items:center}
.bottle img{width:100%; max-width:13rem; aspect-ratio:560/545; object-fit:contain}
.pick h2{font-size:1.7rem}
.pick .tagline{color:var(--muted); margin-top:.2rem}
.pick ul.pros{margin:1rem 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:.45rem}
.pick ul.pros li{padding-left:1.7rem; position:relative}
.pick ul.pros li::before{content:""; position:absolute; left:0; top:.32rem; width:1.1rem; height:1.1rem; border-radius:50%; background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M5 10.5l3.2 3L15 6.5'/%3E%3C/svg%3E") center/70% no-repeat}
.scorebox{border-left:1px solid var(--line); padding-left:1.5rem; display:flex; flex-direction:column; gap:.8rem; align-items:stretch; text-align:center}
.score{font-family:var(--f-display); font-weight:700; font-size:3rem; line-height:1; color:var(--green); font-variant-numeric:tabular-nums}
.score small{font-size:1rem; color:var(--muted)}
.stars{color:var(--star); letter-spacing:.1em; font-size:1.1rem}
.from{font-family:var(--f-display)}
.from strong{font-size:1.4rem}
.cta{display:inline-flex; align-items:center; justify-content:center; gap:.4rem; background:var(--amber); color:var(--amber-ink); text-decoration:none; font-family:var(--f-display); font-weight:700; font-size:1.08rem; padding:.95rem 1.4rem; border-radius:12px; box-shadow:0 3px 0 #C98500; transition:transform .12s ease}
.cta:hover{transform:translateY(-1px)}
.cta.full{width:100%}
.pick-foot{border-top:1px solid var(--line); padding:1rem 1.75rem; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:1rem}
.bar{display:flex; flex-direction:column; gap:.3rem; font-size:.85rem}
.bar span{display:flex; justify-content:space-between; gap:.5rem}
.bar i{display:block; height:.45rem; border-radius:99px; background:var(--line); overflow:hidden}
.bar i b{display:block; height:100%; background:var(--green); border-radius:99px}

/* sections */
section.block{padding-block:2.75rem 0}
section.block > .wrap > h2, section.block .read > h2{font-size:clamp(1.45rem, 3.4vw, 2rem); margin-bottom:.9rem}
.table-wrap{overflow-x:auto; background:var(--card); border:1px solid var(--line); border-radius:16px}
table{border-collapse:collapse; width:100%; min-width:40rem; font-size:.95rem}
th,td{text-align:left; padding:.85rem 1rem; border-bottom:1px solid var(--line); vertical-align:top}
thead th{font-family:var(--f-display); background:var(--bg)}
th.win, td.win{background:var(--green-soft)}
tbody tr:last-child td{border-bottom:0}
.yes{color:var(--green); font-weight:700}

/* packages */
.packs{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1.25rem; align-items:end}
.pack{background:var(--card); border:1px solid var(--line); border-radius:18px; overflow:hidden; display:flex; flex-direction:column; text-align:center; box-shadow:0 4px 14px rgba(22,33,58,.06)}
.pack.best{border:2px solid var(--green); box-shadow:0 14px 34px rgba(22,33,58,.14); transform:translateY(-8px)}
.pack-top{background:var(--green); color:#fff; padding:.8rem 1rem; display:flex; flex-direction:column; gap:.1rem}
.pack.best .pack-top{background:var(--navy); padding-block:1rem}
.pack-top h3{font-size:1.35rem; letter-spacing:.02em; text-transform:uppercase}
.pack-top span{font-size:.85rem; opacity:.9}
.ribbon{background:#C62828; color:#fff; font-family:var(--f-display); font-weight:700; font-size:.9rem; padding:.3rem}
.ribbon.soft{background:#E05A47}
.pack-in{padding:1.2rem 1.3rem 1.3rem; display:flex; flex-direction:column; gap:.6rem}
.pack img{width:100%; max-width:12.5rem; margin:0 auto; aspect-ratio:560/545; object-fit:contain}
.pack .per{font-family:var(--f-display); font-weight:700; font-size:2.4rem; line-height:1; font-variant-numeric:tabular-nums}
.pack.best .per{color:#C62828; font-size:2.8rem}
.pack .per s{font-size:1.1rem; color:var(--muted); font-weight:500; margin-right:.15rem}
.pack .per small{font-size:.85rem; color:var(--muted); font-weight:500}
.tot{font-size:.95rem; color:var(--muted)}
.tot strong{color:var(--green)}
.gtee{font-family:var(--f-display); font-size:.9rem; color:var(--green); font-weight:600}
.pack .cta{background:linear-gradient(#FFD15C,#FFB020); box-shadow:0 3px 0 #C98500, inset 0 1px 0 rgba(255,255,255,.6); border:1px solid #E09A00}
.secure{margin-top:1rem; text-align:center; font-size:.88rem; color:var(--muted)}
.bonus{margin-top:1rem; background:var(--green-soft); border-radius:12px; padding:.8rem 1rem; text-align:center; font-size:.95rem}
.chips{list-style:none; margin:1rem 0 0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:.45rem}
.chips li{border:1px solid var(--line); background:var(--card); border-radius:999px; padding:.25rem .7rem; font-size:.82rem; font-family:var(--f-display)}
.guarantee{margin-top:1.25rem; background:var(--card); border:1px dashed var(--green); border-radius:16px; padding:1.2rem 1.4rem; display:grid; grid-template-columns:auto 1fr; gap:1.2rem; align-items:center}
.seal{width:5rem; height:5rem; color:var(--green)}

/* content */
.cards3{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1rem}
.mini{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:1.1rem; display:flex; flex-direction:column; gap:.35rem}
.mini h3{font-size:1.05rem}
.checklist{margin:0; padding:0; list-style:none; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:.75rem 1.5rem}
.checklist li{padding-left:1.8rem; position:relative}
.checklist li::before{content:""; position:absolute; left:0; top:.3rem; width:1.15rem; height:1.15rem; border-radius:50%; background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M5 10.5l3.2 3L15 6.5'/%3E%3C/svg%3E") center/70% no-repeat}
.photo-band{display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:center; background:var(--card); border:1px solid var(--line); border-radius:20px; overflow:hidden}
.photo-band img{width:100%; height:100%; aspect-ratio:3/2; object-fit:cover}
.photo-band .stack{padding:1.75rem 1.75rem 1.75rem 0}
details{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:.9rem 1.1rem}
details + details{margin-top:.6rem}
summary{font-family:var(--f-display); font-weight:700; cursor:pointer}
details p{margin-top:.5rem}
.final{margin-top:2.75rem; background:var(--navy); color:#fff; border-radius:20px; padding:1.75rem; display:grid; grid-template-columns:10rem 1fr auto; gap:1.5rem; align-items:center}
.final img{width:100%; aspect-ratio:560/545; object-fit:contain}
.final p{color:#C9D2E3}

footer{margin-top:3rem; border-top:1px solid var(--line); padding-block:1.5rem; font-size:.85rem; color:var(--muted); line-height:1.55}
footer .wrap{display:flex; flex-direction:column; gap:.75rem}
footer nav{display:flex; flex-wrap:wrap; gap:1rem; font-family:var(--f-mono); font-size:.8rem}

/* mobile buy bar */
.buybar{position:fixed; left:0; right:0; bottom:0; z-index:20; background:var(--card); border-top:1px solid var(--line); box-shadow:0 -6px 20px rgba(22,33,58,.08); display:none; align-items:center; justify-content:space-between; gap:.75rem;
  padding:.65rem max(16px, env(safe-area-inset-right, 0px)) calc(.65rem + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px))}
.buybar img{width:2.6rem; height:2.6rem; object-fit:contain; flex:none}
.buybar p{font-family:var(--f-display); font-size:.9rem; line-height:1.2; flex:1; min-width:0}
.buybar .cta{padding:.65rem 1rem; font-size:.95rem; flex:none}

/* simple pages */
.page{padding-block:2.5rem}
.prose{display:flex; flex-direction:column; gap:1rem; max-width:44rem; margin:0 auto}
.prose h1{font-size:clamp(1.8rem,4.5vw,2.5rem)}
.prose h2{color:var(--green); font-size:1.3rem}
.prose ul{margin:0; padding-left:1.2rem; display:flex; flex-direction:column; gap:.4rem}
.email{font-family:var(--f-mono); font-size:1rem; background:var(--card); border:1px solid var(--line); padding:.6rem .8rem; border-radius:8px; user-select:all; align-self:flex-start; overflow-wrap:anywhere}

@media (max-width: 900px){
  .pick-body{grid-template-columns:1fr; text-align:center}
  .pick ul.pros{text-align:left; max-width:26rem; margin-left:auto; margin-right:auto}
  .bottle{max-width:16rem; margin:0 auto; width:100%}
  .scorebox{border-left:0; border-top:1px solid var(--line); padding-left:0; padding-top:1rem}
  .pick-foot{grid-template-columns:repeat(2, minmax(0,1fr))}
  .packs,.cards3{grid-template-columns:1fr}
  .packs{gap:1.6rem}
  .pack.best{transform:none; order:-1}
  .checklist{grid-template-columns:1fr}
  .photo-band{grid-template-columns:1fr}
  .photo-band .stack{padding:0 1.25rem 1.5rem}
  .final{grid-template-columns:1fr; text-align:center}
  .final img{max-width:9rem; margin:0 auto}
  .buybar{display:flex}
}

/* enriched sections */
.strip{margin-top:1.5rem; background:var(--green-soft); border-radius:16px; padding:1rem 1.25rem; display:flex; align-items:center; gap:1rem}
.strip img{width:4rem; aspect-ratio:560/545; object-fit:contain; flex:none}
.strip p{flex:1; min-width:0}
@media (max-width:640px){.strip{flex-direction:column; text-align:center}.strip .cta{width:100%}}
.hero{text-align:left}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:2.5rem; align-items:center}
.hero-grid > *{min-width:0}
.hero .lede{margin-left:0}
.hero .criteria{justify-content:flex-start}
.hero-img{margin:0}
.hero-img img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:20px}
.toc{position:sticky; top:0; z-index:15; background:var(--card); border-block:1px solid var(--line); padding-block:.6rem; margin-bottom:1.5rem}
.toc .wrap{display:flex; gap:.4rem 1.1rem; flex-wrap:nowrap; overflow-x:auto; white-space:nowrap; font-family:var(--f-display); font-size:.9rem; scrollbar-width:none}
.toc a{color:var(--ink); text-decoration:none}
.toc a:hover{color:var(--green)}
.tiles{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:.75rem; margin-top:1rem}
.tile{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:.9rem; text-align:center; display:flex; flex-direction:column}
.tile b{font-family:var(--f-display); font-size:1.8rem; color:var(--green); line-height:1.1; font-variant-numeric:tabular-nums}
.tile span{font-size:.88rem; color:var(--muted)}
.two{display:grid; grid-template-columns:1fr 1fr; gap:1.25rem}
.fit{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:1.3rem 1.4rem; border-top:5px solid var(--green)}
.fit.skip{border-top-color:#C0392B}
.fit ul{margin:.6rem 0 0; padding-left:1.1rem; display:flex; flex-direction:column; gap:.4rem}
.intro{color:var(--muted); max-width:46rem; margin-bottom:1.2rem}
.ings{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:1.25rem}
.ing-card{background:var(--card); border:1px solid var(--line); border-radius:16px; overflow:hidden; display:flex; flex-direction:column}
.ing-card img{width:100%; aspect-ratio:3/2; object-fit:cover}
.ing-card.lead{grid-column:1 / -1; flex-direction:row; align-items:stretch; border:2px solid var(--green)}
.ing-art{background:var(--green-soft); display:grid; place-items:center; flex:0 0 38%; padding:1.5rem}
.ing-art svg{width:100%; max-width:12rem}
.ing-art .c1{fill:none; stroke:var(--green); stroke-width:3; stroke-dasharray:6 6}
.ing-art .c2{fill:var(--green); opacity:.75}
.ing-txt{padding:1.1rem 1.3rem 1.3rem; display:flex; flex-direction:column; gap:.4rem}
.ing-txt h3{font-size:1.2rem}
.ing-txt p{font-size:.98rem}
.ing-txt .tag{align-self:flex-start; font-family:var(--f-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--green); background:var(--green-soft); padding:.2rem .55rem; border-radius:999px}
sup a{text-decoration:none; font-size:.75rem}
.diagram-row{display:grid; grid-template-columns:.9fr 1.1fr; gap:1.5rem; align-items:center}
.diagram{margin:0; background:var(--card); border:1px solid var(--line); border-radius:18px; padding:1rem}
.diagram svg{width:100%; height:auto}
.diagram .bone{fill:#E9E2D3; stroke:#B9AE96; stroke-width:2}
.diagram .cart{fill:#BFE3EE; stroke:#7FB7C9; stroke-width:1.5}
.diagram .fluid{fill:var(--green); opacity:.35}
.diagram .capsule{fill:none; stroke:var(--muted); stroke-width:2; stroke-dasharray:5 5}
.diagram .lbl line{stroke:var(--muted); stroke-width:1}
.diagram .lbl text{fill:var(--ink); font-family:var(--f-display); font-size:12px; text-anchor:start}
.steps3{display:flex; flex-direction:column; gap:.8rem}
.steps3 .mini{position:relative; padding-left:3.4rem}
.num{position:absolute; left:1rem; top:1rem; width:1.8rem; height:1.8rem; border-radius:50%; background:var(--green); color:#fff; display:grid; place-items:center; font-family:var(--f-display); font-weight:700}
.method{background:var(--card); border:1px solid var(--line); border-radius:18px; padding:1.6rem; display:grid; grid-template-columns:1fr 1.2fr; gap:1.5rem}
.method > *{min-width:0}
.method h2{margin-bottom:.6rem}
.crit{margin:0; padding:0; list-style:none; counter-reset:c; display:flex; flex-direction:column; gap:.7rem}
.crit li{counter-increment:c; padding-left:2.4rem; position:relative; font-size:.96rem}
.crit li::before{content:counter(c); position:absolute; left:0; top:0; width:1.7rem; height:1.7rem; border-radius:8px; background:var(--green-soft); color:var(--green); font-family:var(--f-display); font-weight:700; display:grid; place-items:center}
.crit b{display:block; font-family:var(--f-display)}
.fair{display:grid; grid-template-columns:1fr 1fr; gap:0; background:var(--card); border:1px solid var(--line); border-radius:20px; overflow:hidden; align-items:stretch}
.fair img{width:100%; height:100%; min-height:18rem; object-fit:cover}
.fair .stack{padding:1.6rem}
.timeline{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:.8rem; border-left:3px solid var(--green-soft); padding-left:1rem}
.timeline b{display:block; font-family:var(--f-display); color:var(--green)}
.mini.warn{border-top:4px solid var(--star)}
.quote-band{margin:0; position:relative; border-radius:20px; overflow:hidden}
.quote-band img{width:100%; aspect-ratio:2/1; object-fit:cover}
.quote-band figcaption{position:absolute; left:0; right:0; bottom:0; padding:2.5rem 1.6rem 1.4rem; background:linear-gradient(transparent, rgba(10,14,24,.85)); color:#fff; font-family:var(--f-display); font-size:clamp(1.1rem,2.6vw,1.6rem); font-weight:700; line-height:1.25}
.refs{margin:0; padding-left:1.3rem; display:flex; flex-direction:column; gap:.55rem; font-size:.88rem; color:var(--muted); line-height:1.5}
.refs a{overflow-wrap:anywhere}
@media (max-width: 900px){
  .hero-grid,.two,.ings,.diagram-row,.method,.fair{grid-template-columns:1fr}
  .hero-img{order:-1}
  .hero-img img{aspect-ratio:16/10}
  .ing-card.lead{flex-direction:column}
  .tiles{grid-template-columns:repeat(2, minmax(0,1fr))}
  .fair img{min-height:0; aspect-ratio:16/10}
  .quote-band img{aspect-ratio:4/3}
}

@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} .cta{transition:none} }

.prose{display:flex; flex-direction:column; gap:1rem}
.prose ul{margin:0; padding-left:1.2rem; display:flex; flex-direction:column; gap:.4rem}
.email{font-family:var(--f-mono); font-size:1rem; background:var(--panel); padding:.6rem .8rem; border-radius:4px; user-select:all; align-self:flex-start; overflow-wrap:anywhere}
.site a{color:var(--ink); text-decoration:none}