/* ============================================================
   VOGELWIJZER — design system (boswachter-baseline)
   Deep forest green + warm sand + heron/olive/driftwood, terracotta accent
   Big Shoulders Display (display) + Hanken Grotesk (body)
   ============================================================ */

:root{
  --white:#fdfdfb; --paper:#f5f3ed; --mist:#eae6da; --mist-2:#ded8c7; --mistcard:#f6f3ea;
  --ink:#1b2a22; --ink-soft:#54655a; --line:rgba(27,42,34,.13);
  --forest:#1d4632; --forest-deep:#0f2c20; --olive:#4a5d3f; --olive-deep:#2f3e27;
  --sage:#7f9885; --heron:#54707a; --heron-deep:#34505a; --reed:#d9caa4; --reed-deep:#b29a6c;
  --driftwood:#8a6f54; --driftwood-deep:#574536; --clay:#bb6a4a; --clay-deep:#934f37;
  --maxw:1200px;
  /* 3-tier radius system */
  --r-container:24px; --r-card:16px; --r-inline:8px; --r-pill:999px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Hanken Grotesk',system-ui,sans-serif;color:var(--ink);background:var(--paper);
  line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
.bs{font-family:'Big Shoulders Display',sans-serif;line-height:.94}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:10px;z-index:99;background:#fff;padding:8px 14px;border-radius:8px}

/* ---------- utility bar ---------- */
.util{background:var(--forest-deep);color:#d2e0d4;font-size:.82rem;font-weight:600}
.util .wrap{display:flex;justify-content:space-between;align-items:center;padding:8px 32px}
.util .l{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.util .pill{display:inline-flex;align-items:center;gap:7px}
.util a{color:#a6c1aa}.util a:hover{color:#fff}

/* ---------- header / nav ---------- */
header.site{position:sticky;top:0;z-index:40;background:rgba(253,253,251,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
header.site nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.logo{display:flex;align-items:center;gap:12px}
.logo .m{width:44px;height:44px;flex:none;border-radius:11px;background:var(--forest);display:grid;place-content:center}
.logo .t{display:flex;flex-direction:column;line-height:1}
.logo .t b{font-family:'Big Shoulders Display';font-weight:800;font-size:1.72rem;text-transform:uppercase;color:var(--forest-deep);letter-spacing:.01em}
.logo .t span{font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-soft);font-weight:700;margin-top:2px}
.navlinks{display:flex;gap:24px;font-weight:700;font-size:.95rem;list-style:none}
.navlinks a{color:var(--ink);padding:6px 0;position:relative}
.navlinks a:hover,.navlinks a[aria-current]{color:var(--forest)}
.navlinks a::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--clay);transition:width .22s;border-radius:3px}
.navlinks a:hover::after,.navlinks a[aria-current]::after{width:100%}
.nav-r{display:flex;align-items:center;gap:16px}
.search{display:flex;align-items:center;gap:8px;border:1.5px solid var(--line);border-radius:var(--r-pill);padding:8px 15px;color:var(--ink-soft);font-size:.86rem;background:var(--mist)}
.start{background:var(--clay);color:#fff;font-weight:800;font-size:.86rem;padding:11px 20px;border-radius:var(--r-pill);transition:transform .15s,background .2s}
.start:hover{transform:translateY(-2px);background:var(--clay-deep)}

/* ---------- buttons ---------- */
.btn{display:inline-block;font-weight:800;border-radius:var(--r-pill);font-size:.95rem;cursor:pointer;transition:transform .15s,background .2s;border:none}
.btn-forest{background:var(--forest-deep);color:#fff;padding:13px 24px}.btn-forest:hover{transform:translateY(-2px)}
.btn-clay{background:var(--clay);color:#fff;padding:13px 24px}.btn-clay:hover{background:var(--clay-deep)}
.btn-line{background:transparent;color:var(--ink);border:1.5px solid var(--ink);padding:12px 23px}.btn-line:hover{background:var(--ink);color:#fff}
.btn-line.on-dark{color:#fff;border-color:rgba(255,255,255,.55)}.btn-line.on-dark:hover{background:#fff;color:var(--forest-deep)}
.btn-soft{background:var(--reed);color:var(--forest-deep);padding:13px 24px}.btn-soft:hover{background:var(--reed-deep)}
.btn-sm{padding:9px 17px;font-size:.84rem}

/* ---------- hero (full-bleed) ---------- */
.hero{padding:0}
.hero-stage{position:relative;min-height:580px;overflow:hidden;background:var(--forest-deep)}
.hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:72% 42%;filter:saturate(.92) brightness(.96)}
.hero-overlay{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(8,24,16,.78) 0%,rgba(8,24,16,.30) 42%,transparent 64%),
  linear-gradient(180deg,transparent 50%,rgba(8,24,16,.45) 100%)}
.hero-inner{position:relative;min-height:580px;display:flex;flex-direction:column;justify-content:flex-end;padding:40px 0}
.hero-card{max-width:560px;color:#f3efe4}
.hero-card .kick{font-weight:800;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--reed);margin-bottom:14px}
.hero-card h1{font-family:'Big Shoulders Display';font-weight:800;text-transform:uppercase;font-size:clamp(2.6rem,5vw,4rem);line-height:.93;letter-spacing:-.015em;color:#fff}
.hero-card h1 em{font-style:normal;color:var(--reed)}
.hero-card p{font-weight:500;margin:18px 0 24px;font-size:1.12rem;color:rgba(243,239,228,.92);max-width:32em}
.hero-card .btns{display:flex;gap:12px;flex-wrap:wrap}
.hero-tag{position:absolute;top:26px;right:0;background:rgba(253,253,251,.93);border-radius:var(--r-card);padding:11px 16px;font-size:.82rem;color:var(--forest-deep);font-weight:700;box-shadow:0 10px 24px -12px rgba(0,0,0,.4);max-width:230px}
.hero-tag span{display:block;font-weight:500;color:var(--ink-soft);font-size:.74rem;margin-top:2px}
.hero-credit{position:absolute;bottom:10px;right:14px;font-size:.66rem;color:rgba(255,255,255,.5)}

/* ---------- trust strip ---------- */
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.trust .it{display:flex;gap:13px;align-items:center;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--mist)}
.trust .ic{width:40px;height:40px;border-radius:var(--r-inline);flex:none;display:grid;place-content:center;background:var(--white)}
.trust b{font-family:'Big Shoulders Display';font-weight:800;font-size:1.5rem;display:block;line-height:1;text-transform:uppercase;color:var(--ink);font-variant-numeric:tabular-nums}
.trust span{font-size:.82rem;color:var(--ink-soft);font-weight:600}

/* ---------- sections & rhythm ---------- */
.sec{padding:70px 0}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:34px;gap:20px}
.sec-head .k{font-weight:800;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--forest)}
.sec-head h2{font-family:'Big Shoulders Display';font-weight:800;text-transform:uppercase;font-size:clamp(2rem,3.8vw,2.9rem);margin-top:8px;color:var(--ink);line-height:.96}
.sec-head.sm h2{font-size:clamp(1.5rem,2.6vw,2rem)}
.sec-head a{color:var(--forest-deep);font-weight:800;font-size:.92rem;white-space:nowrap}
.sec-head a:hover{color:var(--clay)}

/* ---------- category tiles (photo) ---------- */
.tiles{display:grid;grid-template-columns:1.25fr 1fr 1fr 1fr;gap:20px}
.tile{border-radius:var(--r-container);overflow:hidden;position:relative;min-height:300px;display:flex;flex-direction:column;justify-content:flex-end;padding:24px;color:#fff;transition:transform .25s,box-shadow .25s;background:var(--forest)}
.tile:first-child{min-height:360px}
.tile:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(10,24,16,.3)}
.tile .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile .ov{position:absolute;inset:0;background:linear-gradient(175deg,rgba(10,24,16,.05) 30%,rgba(10,22,14,.78) 100%)}
.tile .ct{position:relative;z-index:2}
.tile .kk{font-weight:800;font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;opacity:.92}
.tile h3{font-family:'Big Shoulders Display';font-weight:700;text-transform:uppercase;font-size:1.65rem;margin:6px 0 6px;line-height:.98}
.tile p{font-size:.9rem;opacity:.92;font-weight:500;max-width:22em}
.tile .go{margin-top:14px;font-weight:800;font-size:.86rem;display:inline-flex;gap:7px;align-items:center;opacity:0;transform:translateX(-5px);transition:opacity .22s,transform .22s}
.tile:hover .go,.tile:focus-within .go{opacity:1;transform:none}

/* ---------- product / pick cards ---------- */
.picks-bg{background:var(--mist)}
.picks{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pcard{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;transition:transform .2s,box-shadow .2s;display:flex;flex-direction:column}
.pcard:hover{transform:translateY(-3px);box-shadow:0 4px 12px rgba(10,24,16,.08),0 16px 32px rgba(10,24,16,.1)}
.pcard .ph{aspect-ratio:16/11;position:relative;overflow:hidden;background:var(--mist)}
.pcard .ph svg{position:absolute;inset:0;width:100%;height:100%}
.pcard .rib{position:absolute;top:12px;left:12px;background:var(--clay);color:#fff;font-weight:800;font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;padding:5px 11px;border-radius:var(--r-pill);display:inline-flex;align-items:center;gap:5px}
.pcard .rib.calm{background:var(--forest)}
.pcard .bd{padding:20px;flex:1;display:flex;flex-direction:column}
.pcard h4{font-family:'Big Shoulders Display';font-weight:700;font-size:1.34rem;letter-spacing:0;color:var(--ink)}
.pcard .ds{color:var(--ink-soft);font-size:.9rem;margin:6px 0 0;flex:1}
.pcard .ft{display:flex;justify-content:space-between;align-items:center;margin-top:18px}
.pcard .pr{font-family:'Big Shoulders Display';font-weight:800;font-size:1.65rem;color:var(--ink);font-variant-numeric:tabular-nums}
.pcard .pr small{font-size:.66rem;color:var(--ink-soft);font-family:'Hanken Grotesk';font-weight:600}
.pcard .cta{background:var(--forest-deep);color:#fff;font-weight:800;font-size:.8rem;padding:9px 16px;border-radius:var(--r-pill)}

/* binocular illustration (shared, detailed) */
.binoc{width:100%;height:100%}

/* ---------- give band (full-bleed) ---------- */
.give{background:linear-gradient(120deg,var(--forest),var(--forest-deep));color:#fff;padding:72px 0;position:relative;overflow:hidden}
.give::before{content:"";position:absolute;width:360px;height:360px;border-radius:50%;background:var(--sage);filter:blur(90px);opacity:.5;top:-150px;right:6%}
.give .inner{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:34px;align-items:center}
.give .ring{width:112px;height:112px;border-radius:50%;background:conic-gradient(from -90deg,var(--reed) 0 18deg,rgba(255,255,255,.28) 18deg 360deg);display:grid;place-content:center;position:relative;flex:none}
.give .ring::after{content:"";position:absolute;inset:15px;border-radius:50%;background:var(--forest-deep)}
.give .ring b{position:relative;z-index:2;font-family:'Big Shoulders Display';font-weight:800;font-size:1.9rem}
.give h3{font-family:'Big Shoulders Display';font-weight:800;text-transform:uppercase;font-size:1.8rem;margin-bottom:8px}
.give p{color:rgba(255,255,255,.92);max-width:42em}
.give .disc{font-size:.74rem;color:rgba(255,255,255,.62);margin-top:8px}

/* ---------- puzzles teaser ---------- */
.puz .wrap{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.puz-art{aspect-ratio:5/4;border-radius:var(--r-container);position:relative;overflow:hidden;box-shadow:0 24px 50px -32px rgba(20,46,34,.5)}
.puz-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.puz-art .seam{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.35) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.35) 1px,transparent 1px);background-size:25% 25%;mix-blend-mode:overlay}
.puz h2{font-family:'Big Shoulders Display';font-weight:800;text-transform:uppercase;font-size:clamp(2rem,3.6vw,2.7rem);margin:10px 0 0;line-height:.96;color:var(--ink)}
.puz .k{color:var(--forest);font-weight:800;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase}
.puz p{color:var(--ink-soft);font-size:1.06rem;margin:18px 0 26px}

/* ---------- article cards ---------- */
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.acard{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}
.acard:hover{transform:translateY(-3px);box-shadow:0 4px 12px rgba(10,24,16,.08),0 16px 32px rgba(10,24,16,.1)}
.acard .ph{aspect-ratio:16/10;position:relative;overflow:hidden;background:var(--forest)}
.acard .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.acard .ph .shade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(10,24,16,.35) 100%)}
.acard .tagk{position:absolute;top:12px;left:12px;z-index:2;background:rgba(253,253,251,.94);color:var(--forest-deep);font-size:.7rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;padding:5px 11px;border-radius:var(--r-pill)}
.acard .bd{padding:20px 22px 22px;flex:1;display:flex;flex-direction:column}
.acard h3{font-family:'Big Shoulders Display';font-weight:700;font-size:1.3rem;line-height:1.06;color:var(--ink)}
.acard p{color:var(--ink-soft);font-size:.93rem;margin-top:8px;flex:1}
.acard .more{margin-top:14px;color:var(--forest-deep);font-weight:800;font-size:.88rem}
.acard:hover .more{color:var(--clay)}

/* ---------- newsletter (dark full-bleed) ---------- */
.news{background:var(--forest-deep);padding:72px 0}
.news .inner{max-width:580px;margin:0 auto;text-align:center}
.news h3{font-family:'Big Shoulders Display';font-weight:800;text-transform:uppercase;font-size:2rem;color:#fff}
.news p{color:rgba(255,255,255,.78);margin:10px 0 22px}
.news form{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.news input{flex:1;min-width:220px;border:1.5px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);border-radius:var(--r-pill);padding:13px 20px;font-size:.95rem;font-family:inherit;color:#fff}
.news input::placeholder{color:rgba(255,255,255,.55)}
.news small{display:block;color:rgba(255,255,255,.55);font-size:.76rem;margin-top:12px}

/* ============================================================
   ARTICLE / GUIDE PAGES
   ============================================================ */
.breadcrumbs{font-size:.82rem;color:var(--ink-soft);padding:22px 0 0}
.breadcrumbs a{color:var(--forest);font-weight:600}
.breadcrumbs span{opacity:.5;margin:0 8px}

.art-head{padding:22px 0 10px;max-width:720px}
.art-head .ey{font-weight:800;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--clay)}
.art-head h1{font-family:'Big Shoulders Display';font-weight:800;text-transform:uppercase;font-size:clamp(2.3rem,4.6vw,3.6rem);line-height:.95;letter-spacing:-.01em;margin:12px 0;color:var(--ink)}
.art-head .lede{font-size:1.18rem;color:var(--ink-soft)}
.art-meta{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:18px;font-size:.86rem;color:var(--ink-soft)}
.art-meta .by{display:flex;align-items:center;gap:9px;font-weight:600;color:var(--ink)}
.art-meta .av{width:34px;height:34px;border-radius:50%;background:var(--forest);display:grid;place-content:center;flex:none}
.share{display:inline-flex;align-items:center;gap:7px;color:var(--forest);font-weight:700}

.disclosure{background:var(--white);border:1px solid var(--line);border-left:4px solid var(--heron);border-radius:var(--r-card);padding:14px 18px;font-size:.84rem;color:var(--ink-soft);margin:22px 0;display:flex;gap:11px;align-items:flex-start}
.disclosure svg{flex:none;margin-top:2px}

.art-layout{display:grid;grid-template-columns:1fr 280px;gap:48px;align-items:start;padding:30px 0 20px}
.toc{position:sticky;top:90px;background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:22px 24px}
.toc h4{font-family:'Big Shoulders Display';text-transform:uppercase;font-size:1rem;letter-spacing:.04em;margin-bottom:12px;color:var(--forest-deep);font-weight:800}
.toc ol{list-style:none;counter-reset:t}
.toc li{counter-increment:t;margin-bottom:9px}
.toc a{font-size:.9rem;color:var(--ink-soft);display:flex;gap:9px}
.toc a::before{content:counter(t,decimal-leading-zero);color:var(--forest-deep);font-weight:800;font-family:'Big Shoulders Display';font-variant-numeric:tabular-nums}
.toc a:hover{color:var(--forest)}
.toc a.active{color:var(--forest-deep);font-weight:700}
.toc a.active::before{color:var(--clay)}

/* prose */
.prose{max-width:660px}
.prose h2{font-family:'Big Shoulders Display';font-weight:800;font-size:1.7rem;letter-spacing:-.01em;line-height:1.05;margin:48px 0 16px;color:var(--ink);scroll-margin-top:90px}
.prose h2:first-child{margin-top:0}
.prose h3{font-weight:800;font-size:1.18rem;margin:30px 0 10px;color:var(--forest-deep)}
.prose p{margin:0 0 16px;font-size:1.04rem}
.prose ul,.prose ol{margin:0 0 18px 22px}
.prose li{margin-bottom:8px}
.prose a:not(.btn){color:var(--forest);font-weight:600;text-decoration:underline;text-decoration-color:var(--reed-deep);text-underline-offset:3px}
.prose a:not(.btn):hover{text-decoration-color:var(--forest)}
.prose strong{color:var(--ink)}
.prose blockquote{border-left:4px solid var(--clay);background:var(--mistcard);padding:16px 22px;border-radius:0 var(--r-card) var(--r-card) 0;margin:24px 0;font-size:1.08rem;color:var(--forest-deep)}
.prose blockquote cite{display:block;font-size:.84rem;color:var(--ink-soft);font-style:normal;margin-top:8px}

/* callouts */
.callout{border-radius:var(--r-card);padding:18px 22px;margin:24px 0;display:flex;gap:14px;align-items:flex-start;font-size:.98rem}
.callout .ic{flex:none;width:30px;height:30px;border-radius:var(--r-inline);display:grid;place-content:center;color:#fff}
.callout.tip{background:#eef3ec;border:1px solid #cfe0cd}.callout.tip .ic{background:var(--forest)}
.callout.info{background:#eaf1f3;border:1px solid #cfe0e4}.callout.info .ic{background:var(--heron)}
.callout.warn{background:#f6ecdf;border:1px solid #e7d3b4}.callout.warn .ic{background:var(--clay)}
.callout h4{font-size:1rem;margin-bottom:3px;color:var(--ink)}
.callout p{margin:0;color:var(--ink-soft);font-size:.93rem}

/* product review block */
.review{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;margin:24px 0}
.review.pick{border-color:var(--reed-deep);box-shadow:0 0 0 1px var(--reed-deep)}
.review .top{display:grid;grid-template-columns:210px 1fr;gap:0}
.review .vis{position:relative;display:grid;place-content:center;border-right:1px solid var(--line)}
.review .vis.t1{background:radial-gradient(120% 100% at 50% 30%,#e8ede0,#c8d0bc)}
.review .vis.t2{background:radial-gradient(120% 100% at 50% 30%,#eef0e8,#d3d8c4)}
.review .vis.t3{background:radial-gradient(120% 100% at 50% 30%,#e4eaed,#c2cdd3)}
.review .vis.t4{background:radial-gradient(120% 100% at 50% 30%,#efe7d4,#d9c79f)}
.review .vis .binoc{width:150px;height:150px}
.review .vis .rk{position:absolute;top:10px;left:10px;background:var(--clay);color:#fff;font-weight:800;font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;padding:5px 10px;border-radius:var(--r-pill);display:inline-flex;align-items:center;gap:4px}
.review .vis .rk.calm{background:var(--forest)}
.review .meta{padding:22px 24px}
.review .meta .badge{font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--clay)}
.review .meta .badge.calm{color:var(--forest)}
.review .meta h3{font-family:'Big Shoulders Display';font-weight:800;font-size:1.5rem;margin:5px 0 4px;color:var(--ink)}
.review .meta .price{font-family:'Big Shoulders Display';font-weight:800;font-size:1.65rem;color:var(--forest-deep);font-variant-numeric:tabular-nums}
.review .meta .price small{font-size:.7rem;font-family:'Hanken Grotesk';color:var(--ink-soft);font-weight:600}
.review .meta p{font-size:.96rem;color:var(--ink-soft);margin:10px 0 0}
.review .specs{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.review .specs span{font-size:.74rem;font-weight:700;color:var(--ink-soft);border:1px solid var(--line);border-radius:var(--r-inline);padding:5px 10px}
.review .pc{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--line)}
.review .pc>div{padding:18px 24px}
.review .pc .pros{border-right:1px solid var(--line)}
.review .pc h5{font-size:.76rem;letter-spacing:.07em;text-transform:uppercase;font-weight:800;margin-bottom:9px}
.review .pc .pros h5{color:var(--forest)}.review .pc .cons h5{color:var(--clay-deep)}
.review .pc ul{list-style:none;font-size:.92rem;color:var(--ink-soft)}
.review .pc li{display:flex;gap:9px;margin-bottom:7px}
.review .pc li::before{font-weight:800;flex:none}
.review .pc .pros li::before{content:"+";color:var(--forest)}
.review .pc .cons li::before{content:"–";color:var(--clay-deep)}
.review .act{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:18px 24px;border-top:1px solid var(--line);background:var(--mist);flex-wrap:wrap}
.review .act.pick{background:var(--forest-deep);color:#fff}
.review .act .note{font-size:.82rem;color:var(--ink-soft)}
.review .act.pick .note{color:rgba(255,255,255,.72)}

/* comparison table */
.tbl-wrap{overflow-x:auto;margin:24px 0;border:1px solid var(--line);border-radius:var(--r-card)}
table.cmp{width:100%;border-collapse:collapse;font-size:.92rem;min-width:560px}
table.cmp th,table.cmp td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line)}
table.cmp thead th{background:var(--forest-deep);color:#fff;font-family:'Big Shoulders Display';text-transform:uppercase;letter-spacing:.03em;font-weight:700;font-size:.95rem}
table.cmp tbody tr:nth-child(even){background:var(--mist)}
table.cmp tbody tr:hover{background:rgba(29,70,50,.07)}
table.cmp .name{font-weight:700;color:var(--ink)}
table.cmp .best{color:var(--clay-deep);font-weight:800}

/* FAQ */
.faq{margin:22px 0}
.faq details{border:1px solid var(--line);border-radius:var(--r-card);margin-bottom:12px;background:var(--white);overflow:hidden}
.faq summary{padding:16px 20px;font-weight:700;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:18px;height:18px;flex:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2354655a' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(180deg)}
.faq .ans{padding:0 20px 18px;color:var(--ink-soft);font-size:.98rem}

/* author / methodology box */
.method{background:var(--mist);border:1px solid var(--line);border-radius:var(--r-card);padding:24px 26px;margin:34px 0}
.method h4{font-family:'Big Shoulders Display';text-transform:uppercase;font-size:1.1rem;margin-bottom:8px;color:var(--forest-deep);font-weight:800}
.method p{font-size:.92rem;color:var(--ink-soft);margin:0}

.related{border-top:1px solid var(--line);margin-top:40px;padding-top:30px}

/* ---------- footer ---------- */
footer.site{background:var(--forest-deep);color:#bfd0c2;padding:56px 0 26px}
footer.site .foot-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:32px}
footer.site .logo .m{background:rgba(255,255,255,.1)}
footer.site .logo .t b{color:#fff}footer.site .logo .t span{color:#97b29a}
footer.site .about{margin-top:14px;font-size:.92rem;max-width:25em;color:#a3bda6}
footer.site h5{font-family:'Big Shoulders Display';font-weight:700;text-transform:uppercase;font-size:1rem;color:#fff;margin-bottom:14px;letter-spacing:.04em}
footer.site ul{list-style:none}footer.site li{margin-bottom:9px}
footer.site a{color:#aec8b1;font-size:.92rem}footer.site a:hover{color:#fff}
.foot-bottom{border-top:1px solid rgba(255,255,255,.16);margin-top:40px;padding-top:20px;display:flex;justify-content:space-between;font-size:.82rem;flex-wrap:wrap;gap:8px;color:#8aab8e}
.foot-bottom a{color:#8aab8e}.foot-bottom a:hover{color:#fff}

/* ---------- animations ---------- */
.fade{opacity:0;transform:translateY(16px);animation:rise .8s forwards}
@keyframes rise{to{opacity:1;transform:none}}
.d1{animation-delay:.05s}.d2{animation-delay:.16s}.d3{animation-delay:.28s}
@media (prefers-reduced-motion:reduce){.fade{animation:none;opacity:1;transform:none}*{scroll-behavior:auto}}

/* ---------- responsive ---------- */
@media(max-width:980px){
  .trust,.tiles,.cards3{grid-template-columns:1fr 1fr}
  .tiles{grid-template-columns:1fr 1fr}.tile:first-child{min-height:300px}
  .picks{grid-template-columns:1fr}
  .puz .wrap{grid-template-columns:1fr;gap:30px}
  .navlinks,.search{display:none}
  .give .inner{grid-template-columns:1fr;text-align:center;justify-items:center}
  .hero-card h1{font-size:clamp(2.4rem,8vw,3rem)}
  footer.site .foot-grid{grid-template-columns:1fr 1fr}
  .art-layout{grid-template-columns:1fr}.toc{position:static;order:-1}
  .review .top{grid-template-columns:1fr}.review .vis{min-height:160px;border-right:none;border-bottom:1px solid var(--line)}
}
@media(max-width:560px){
  .wrap{padding:0 20px}.util .wrap{padding:8px 20px}
  .trust,.tiles,.cards3,.review .pc{grid-template-columns:1fr}
  .review .pc .pros{border-right:none;border-bottom:1px solid var(--line)}
  .sec{padding:48px 0}.hero-tag{display:none}
}