@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
/* ==========================================================================
   PerchPrairie — "Field & Forest" design system
   pine / moss / brass / amber on warm paper
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  --ink:#12211C; --pine:#1F4436; --pine-deep:#16332A; --moss:#2E6B4F; --sage:#7C9C88;
  --brass:#C08A2E; --amber:#E0A93B; --rust:#A8542B;
  --paper:#FAF7F0; --sand:#EFE8DA; --sand-2:#E4DBC8; --card:#FFFDF8;
  --line:#DED5C2; --line-soft:#EBE3D4;
  --text:#22302A; --text-2:#5A6B62; --text-3:#8A968E;
  --on-dark:#EFE8DA; --on-dark-2:#A9BDB1;

  --font-display:"Fraunces",Georgia,"Times New Roman",serif;
  --font-sans:"Inter","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  --t-xs:clamp(.72rem,.70rem + .10vw,.78rem);
  --t-sm:clamp(.82rem,.80rem + .12vw,.90rem);
  --t-base:clamp(.98rem,.94rem + .18vw,1.06rem);
  --t-lg:clamp(1.10rem,1.04rem + .28vw,1.24rem);
  --t-xl:clamp(1.30rem,1.18rem + .55vw,1.60rem);
  --t-2xl:clamp(1.60rem,1.36rem + 1.05vw,2.30rem);
  --t-3xl:clamp(2.00rem,1.54rem + 2.00vw,3.30rem);
  --t-4xl:clamp(2.50rem,1.70rem + 3.60vw,4.75rem);

  --r-sm:6px; --r:10px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-full:999px;
  --sh-1:0 1px 2px rgba(18,33,28,.05), 0 2px 6px rgba(18,33,28,.04);
  --sh-2:0 2px 4px rgba(18,33,28,.05), 0 8px 20px rgba(18,33,28,.07);
  --sh-3:0 8px 18px rgba(18,33,28,.08), 0 24px 48px rgba(18,33,28,.10);
  --sh-brass:0 6px 22px rgba(192,138,46,.28);

  --wrap:1200px; --wrap-narrow:820px; --header-h:74px;
  --ease:cubic-bezier(.4,.14,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}
body{
  font-family:var(--font-sans);font-size:var(--t-base);line-height:1.65;
  color:var(--text);background:var(--paper);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;overflow-x:hidden;
}
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(circle at 1px 1px, rgba(31,68,54,.055) 1px, transparent 0);
  background-size:22px 22px;
}
body>*{position:relative;z-index:1}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:none}
ul,ol{list-style:none;padding:0}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:2.5px solid var(--brass);outline-offset:3px;border-radius:3px}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.1;letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
p{text-wrap:pretty}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(1rem,4vw,2rem)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- 3. Motion ---------- */
@keyframes pp-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes pp-fade{from{opacity:0}to{opacity:1}}
@keyframes pp-float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(-1deg)}}
@keyframes pp-drift{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes pp-ring{0%{transform:scale(.85);opacity:.55}70%{transform:scale(1.5);opacity:0}100%{opacity:0}}
@keyframes pp-draw{to{stroke-dashoffset:0}}
@keyframes pp-flap{0%,100%{transform:rotate(0) translateY(0)}25%{transform:rotate(-8deg) translateY(-3px)}75%{transform:rotate(6deg) translateY(2px)}}
@keyframes pp-scan{0%{transform:translateY(-100%)}100%{transform:translateY(400%)}}
@keyframes pp-blip{0%{box-shadow:0 0 0 0 rgba(224,169,59,.6)}70%{box-shadow:0 0 0 8px rgba(224,169,59,0)}100%{box-shadow:0 0 0 0 rgba(224,169,59,0)}}
@keyframes pp-kenburns{from{transform:scale(1.06) translate(0,0)}to{transform:scale(1.14) translate(-1.5%,-1%)}}
@keyframes pp-mist{0%,100%{transform:translateX(-6%)}50%{transform:translateX(6%)}}
@keyframes hcm-grow{to{transform:scaleX(1)}}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.reveal.is-in{opacity:1;transform:none}
.reveal-d1{transition-delay:.08s}.reveal-d2{transition-delay:.16s}.reveal-d3{transition-delay:.24s}
.reveal-d4{transition-delay:.32s}.reveal-d5{transition-delay:.40s}.reveal-d6{transition-delay:.48s}

/* ---------- 4. Sections ---------- */
.section{padding-block:clamp(3.5rem,7vw,6rem)}
.section--sand{background:var(--sand);border-block:1px solid var(--line-soft)}
.section--pine{background:var(--pine-deep);color:var(--on-dark)}
.section--pine h2,.section--pine h3{color:#fff}
.section-head{max-width:60ch;margin-bottom:clamp(1.75rem,3.5vw,2.75rem)}
.section-head--center{margin-inline:auto;text-align:center}
.kicker{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-mono);font-size:var(--t-xs);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--moss);margin-bottom:.85rem}
.kicker::before{content:"";width:26px;height:2px;background:var(--brass);border-radius:2px}
.section--pine .kicker{color:var(--amber)}
.section--pine .kicker::before{background:var(--amber)}
.section-head h2{font-size:var(--t-2xl);margin-bottom:.6rem}
.section-head p{color:var(--text-2);font-size:var(--t-lg)}
.section--pine .section-head p{color:var(--on-dark-2)}

/* ---------- 5. Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;padding:.8rem 1.5rem;border-radius:var(--r-full);font-weight:600;font-size:var(--t-sm);letter-spacing:.01em;border:1.5px solid transparent;transition:transform .25s var(--spring),box-shadow .25s var(--ease),background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);will-change:transform}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn svg{width:15px;height:15px}
.btn--primary{background:var(--brass);color:#1B1405;box-shadow:var(--sh-brass)}
.btn--primary:hover{background:var(--amber);box-shadow:0 10px 30px rgba(192,138,46,.4)}
.btn--pine{background:var(--pine);color:var(--on-dark)}
.btn--pine:hover{background:var(--moss)}
.btn--ghost{border-color:var(--line);color:var(--text);background:var(--card)}
.btn--ghost:hover{border-color:var(--pine);color:var(--pine);background:#fff}
.btn--onpine{border-color:rgba(239,232,218,.35);color:var(--on-dark)}
.btn--onpine:hover{background:rgba(239,232,218,.1);border-color:var(--amber);color:#fff}
.btn--sm{padding:.55rem 1.05rem;font-size:var(--t-xs)}

/* ==========================================================================
   HEADER
   ========================================================================== */
.hd{position:sticky;top:0;z-index:900;background:rgba(250,247,240,.82);backdrop-filter:saturate(1.7) blur(14px);-webkit-backdrop-filter:saturate(1.7) blur(14px);border-bottom:1px solid transparent;transition:border-color .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease)}
.hd.is-stuck{border-bottom-color:var(--line);box-shadow:0 4px 24px rgba(18,33,28,.07);background:rgba(250,247,240,.94)}
.hd-inner{max-width:var(--wrap);margin-inline:auto;padding:0 clamp(1rem,4vw,2rem);height:var(--header-h);display:flex;align-items:center;gap:clamp(1rem,3vw,2.25rem)}
.hd-brand{display:flex;align-items:center;gap:.65rem;flex-shrink:0;transition:transform .3s var(--spring)}
.hd-brand:hover{transform:scale(1.03)}
.hd-brand:hover .hd-logo{animation:pp-flap .6s var(--ease)}
.hd-logo{width:38px;height:38px;object-fit:contain}
.hd-brand-txt{display:flex;flex-direction:column;line-height:1}
.hd-name{font-family:var(--font-display);font-weight:700;font-size:1.13rem;letter-spacing:-.03em;color:var(--pine)}
.hd-tag{font-family:var(--font-mono);font-size:.56rem;letter-spacing:.19em;text-transform:uppercase;color:var(--text-3);margin-top:3px}
.hd-nav{margin-left:auto}
.hd-list{display:flex;align-items:center;gap:.25rem}
.hd-link{position:relative;display:block;padding:.55rem .9rem;border-radius:var(--r-sm);font-size:var(--t-sm);font-weight:500;color:var(--text-2);transition:color .22s var(--ease),background .22s var(--ease)}
.hd-link::after{content:"";position:absolute;left:.9rem;right:.9rem;bottom:.3rem;height:2px;background:var(--brass);border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform .32s var(--ease-out)}
.hd-link:hover{color:var(--pine)}
.hd-link:hover::after,.hd-link[aria-current="page"]::after{transform:scaleX(1)}
.hd-link[aria-current="page"]{color:var(--pine);font-weight:600}
.hd-drop{position:relative}
.hd-drop-btn{display:inline-flex;align-items:center;gap:.35rem}
.hd-caret{width:8px;height:8px;border-right:1.8px solid currentColor;border-bottom:1.8px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);transition:transform .3s var(--ease)}
.hd-drop:hover .hd-caret,.hd-drop:focus-within .hd-caret{transform:rotate(-135deg) translate(-3px,-3px)}
.hd-menu{position:absolute;top:calc(100% + 16px);right:0;min-width:490px;padding:1.15rem;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-3);display:grid;grid-template-columns:1fr 1fr;gap:.2rem;opacity:0;visibility:hidden;transform:translateY(-8px) scale(.98);transform-origin:top right;transition:opacity .26s var(--ease),transform .26s var(--ease-out),visibility .26s}
.hd-drop:hover .hd-menu,.hd-drop:focus-within .hd-menu{opacity:1;visibility:visible;transform:none}
.hd-menu::before{content:"";position:absolute;top:-10px;left:0;right:0;height:10px}
.hd-mi{display:flex;align-items:center;gap:.7rem;padding:.6rem .7rem;border-radius:var(--r-sm);transition:background .2s var(--ease),transform .2s var(--ease)}
.hd-mi:hover{background:var(--sand);transform:translateX(3px)}
.hd-mi-ic{width:32px;height:32px;flex-shrink:0;display:grid;place-items:center;background:var(--sand);border-radius:8px;color:var(--moss);transition:background .2s var(--ease),color .2s var(--ease)}
.hd-mi:hover .hd-mi-ic{background:var(--pine);color:var(--amber)}
.hd-mi-ic svg{width:17px;height:17px}
.hd-mi-t{font-size:var(--t-sm);font-weight:600;color:var(--text);line-height:1.25}
.hd-mi-n{font-family:var(--font-mono);font-size:.66rem;color:var(--text-3)}
.hd-menu-foot{grid-column:1/-1;margin-top:.55rem;padding-top:.75rem;border-top:1px solid var(--line-soft);display:flex;justify-content:space-between;align-items:center}
.hd-menu-foot span{font-size:var(--t-xs);color:var(--text-3)}
.hd-menu-foot a{font-size:var(--t-xs);font-weight:600;color:var(--moss)}
.hd-menu-foot a:hover{color:var(--brass)}
.hd-search{display:flex;align-items:center;gap:.5rem;padding:.45rem .85rem;border-radius:var(--r-full);border:1px solid var(--line);background:var(--card);font-size:var(--t-xs);color:var(--text-3);transition:border-color .22s var(--ease),color .22s var(--ease),box-shadow .22s var(--ease)}
.hd-search:hover{border-color:var(--brass);color:var(--pine);box-shadow:0 0 0 3px rgba(192,138,46,.1)}
.hd-search svg{width:14px;height:14px}
.hd-search kbd{font-family:var(--font-mono);font-size:.6rem;padding:.1rem .3rem;border:1px solid var(--line);border-radius:4px;background:var(--sand);color:var(--text-3)}
.hd-cta{flex-shrink:0}
.hd-burger{display:none;width:42px;height:42px;border-radius:var(--r-sm);flex-direction:column;justify-content:center;align-items:center;gap:5px;margin-left:auto}
.hd-burger span{display:block;width:20px;height:2px;background:var(--pine);border-radius:2px;transition:transform .32s var(--ease),opacity .2s var(--ease)}
.hd-toggle{position:absolute;opacity:0;pointer-events:none}
.hd-toggle:checked ~ .hd-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hd-toggle:checked ~ .hd-burger span:nth-child(2){opacity:0}
.hd-toggle:checked ~ .hd-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.hd-prog{position:absolute;left:0;bottom:-1px;height:2px;width:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,var(--moss),var(--brass),var(--amber))}
@media (max-width:960px){
  .hd-burger{display:flex}
  .hd-search,.hd-cta{display:none}
  .hd-nav{position:fixed;inset:var(--header-h) 0 auto 0;background:var(--card);border-bottom:1px solid var(--line);box-shadow:var(--sh-3);padding:1rem;margin-left:0;max-height:0;overflow:hidden;opacity:0;visibility:hidden;transition:max-height .4s var(--ease),opacity .3s var(--ease),visibility .3s}
  .hd-toggle:checked ~ .hd-nav{max-height:calc(100vh - var(--header-h));overflow-y:auto;opacity:1;visibility:visible}
  .hd-list{flex-direction:column;align-items:stretch;gap:.1rem}
  .hd-link{padding:.85rem .8rem;font-size:var(--t-base);border-radius:var(--r-sm)}
  .hd-link::after{display:none}
  .hd-link:hover{background:var(--sand)}
  .hd-menu{position:static;opacity:1;visibility:visible;transform:none;min-width:0;box-shadow:none;border:none;border-radius:0;padding:.3rem 0 .3rem .6rem;grid-template-columns:1fr;max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
  .hd-drop:focus-within .hd-menu,.hd-drop.is-open .hd-menu{max-height:700px}
  .hd-menu-foot{display:none}
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{position:relative;isolation:isolate;z-index:5;overflow:visible;background:var(--pine-deep);padding-block:clamp(3rem,7vw,5.5rem) clamp(3.5rem,7vw,5rem)}
.hero-bg{position:absolute;inset:0;z-index:-3;overflow:hidden}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 60%;transform:scale(1.06);animation:pp-kenburns 26s var(--ease) infinite alternate}
.hero-veil{position:absolute;inset:0;z-index:-2;background:linear-gradient(100deg,rgba(16,40,32,.94) 0%,rgba(16,40,32,.82) 34%,rgba(16,40,32,.5) 62%,rgba(16,40,32,.34) 100%),linear-gradient(to top,rgba(11,28,22,.85) 0%,transparent 45%)}
.hero-mist{position:absolute;inset:auto 0 0 0;height:55%;z-index:-1;pointer-events:none;opacity:.5;overflow:hidden}
.hero-mist span{position:absolute;left:-50%;width:200%;height:60px;border-radius:50%;background:radial-gradient(ellipse at center,rgba(224,169,59,.16),transparent 70%);filter:blur(18px)}
.hero-mist span:nth-child(1){bottom:14%;animation:pp-mist 22s ease-in-out infinite}
.hero-mist span:nth-child(2){bottom:32%;height:44px;opacity:.7;animation:pp-mist 30s ease-in-out infinite reverse}
.hero-mist span:nth-child(3){bottom:52%;height:34px;opacity:.45;animation:pp-mist 38s ease-in-out infinite}
.hero-inner{max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(1rem,4vw,2rem);display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:clamp(2rem,5vw,4rem);align-items:center}
.hero-copy{max-width:38rem}
.hero-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.35rem .8rem .35rem .4rem;border-radius:var(--r-full);background:rgba(239,232,218,.1);border:1px solid rgba(224,169,59,.32);backdrop-filter:blur(6px);font-size:var(--t-xs);color:var(--on-dark);margin-bottom:1.15rem;animation:pp-rise .7s var(--ease-out) both}
.hero-badge b{display:inline-grid;place-items:center;padding:.2rem .5rem;border-radius:var(--r-full);background:var(--amber);color:#1B1405;font-size:.66rem;font-weight:700;letter-spacing:.04em}
.hero-badge i{font-style:normal;color:var(--on-dark-2)}
.hero h1{font-size:var(--t-4xl);font-weight:600;line-height:1.02;letter-spacing:-.035em;color:#fff;margin-bottom:1.1rem;animation:pp-rise .7s .06s var(--ease-out) both}
.hero h1 .hl{position:relative;display:inline-block;color:var(--amber);font-style:italic;font-weight:500}
.hero h1 .hl svg{position:absolute;left:0;right:0;bottom:-.16em;width:100%;height:.3em;overflow:visible}
.hero h1 .hl path{fill:none;stroke:var(--brass);stroke-width:5;stroke-linecap:round;stroke-dasharray:420;stroke-dashoffset:420;animation:pp-draw 1.1s .75s var(--ease-out) forwards}
.hero-sub{font-size:var(--t-lg);color:var(--on-dark-2);max-width:34rem;margin-bottom:1.6rem;animation:pp-rise .7s .14s var(--ease-out) both}
.hero-search{position:relative;z-index:20;animation:pp-rise .7s .22s var(--ease-out) both;margin-bottom:1.5rem}
.hero-search-form{position:relative;display:flex;align-items:center;max-width:32rem}
.hero-search-ic{position:absolute;left:1.05rem;width:18px;height:18px;color:var(--text-3);pointer-events:none;z-index:2}
#site-search{width:100%;padding:.95rem 6.5rem .95rem 3rem;border-radius:var(--r-full);border:1.5px solid transparent;background:rgba(255,253,248,.96);color:var(--text);font-size:var(--t-sm);box-shadow:0 6px 26px rgba(11,28,22,.28);transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
#site-search::placeholder{color:var(--text-3)}
#site-search:focus{outline:none;border-color:var(--brass);box-shadow:0 0 0 4px rgba(192,138,46,.22),0 6px 26px rgba(11,28,22,.28)}
.hero-search-btn{position:absolute;right:.35rem;padding:.6rem 1.15rem;border-radius:var(--r-full);background:var(--pine);color:var(--on-dark);font-size:var(--t-xs);font-weight:600;transition:background .22s var(--ease),transform .22s var(--spring)}
.hero-search-btn:hover{background:var(--moss);transform:translateX(-1px) scale(1.03)}
.hero-search-hints{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin-top:.8rem}
.hero-search-hints > span{font-size:var(--t-xs);color:var(--on-dark-2);margin-right:.15rem}
.chip{padding:.28rem .7rem;border-radius:var(--r-full);border:1px solid rgba(239,232,218,.24);background:rgba(239,232,218,.07);font-size:var(--t-xs);color:var(--on-dark);transition:background .2s var(--ease),border-color .2s var(--ease),transform .2s var(--spring)}
.chip:hover{background:rgba(224,169,59,.2);border-color:var(--amber);transform:translateY(-1px)}
.search-panel{position:absolute;top:calc(100% + .55rem);left:0;right:0;z-index:60;max-height:22rem;overflow-y:auto;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-3);padding:.4rem;display:none}
.search-panel.is-open{display:block;animation:pp-rise .22s var(--ease-out) both}
.sr-item{display:flex;align-items:center;gap:.7rem;padding:.5rem .6rem;border-radius:var(--r-sm);transition:background .18s var(--ease)}
.sr-item:hover,.sr-item.is-active{background:var(--sand)}
.sr-item img{width:38px;height:38px;object-fit:contain;border-radius:6px;background:var(--sand);flex-shrink:0}
.sr-t{font-size:var(--t-sm);font-weight:600;color:var(--text);line-height:1.25}
.sr-c{font-family:var(--font-mono);font-size:.64rem;color:var(--text-3)}
.sr-r{margin-left:auto;font-family:var(--font-mono);font-size:var(--t-xs);font-weight:600;color:var(--brass);flex-shrink:0}
.sr-empty{padding:1.4rem;text-align:center;color:var(--text-3);font-size:var(--t-sm)}
.sr-more{display:block;padding:.6rem;text-align:center;font-size:var(--t-xs);font-weight:600;color:var(--moss);border-top:1px solid var(--line-soft);margin-top:.3rem}
.hero-stats{display:flex;flex-wrap:wrap;gap:clamp(1.2rem,3vw,2.4rem);animation:pp-rise .7s .3s var(--ease-out) both}
.hero-stat{position:relative;padding-left:.9rem}
.hero-stat::before{content:"";position:absolute;left:0;top:.28em;bottom:.28em;width:2px;background:linear-gradient(var(--amber),transparent);border-radius:2px}
.hero-stat b{display:block;font-family:var(--font-display);font-size:var(--t-xl);font-weight:600;color:#fff;line-height:1.1}
.hero-stat span{font-size:var(--t-xs);color:var(--on-dark-2);letter-spacing:.02em}
.hero-viz{position:relative;display:grid;place-items:center;min-height:24rem;animation:pp-fade .9s .2s var(--ease-out) both}
.hero-lens{position:relative;width:min(100%,31rem);aspect-ratio:1/.86;display:grid;place-items:center}
.hero-lens-ring{position:absolute;border-radius:50%;border:1px solid rgba(224,169,59,.3);width:62%;aspect-ratio:1;animation:pp-ring 4.5s var(--ease-out) infinite}
.hero-lens-ring:nth-child(2){animation-delay:1.5s}
.hero-lens-ring:nth-child(3){animation-delay:3s}
.hero-card{position:relative;z-index:2;width:min(100%,23rem);background:rgba(255,253,248,.97);border:1px solid rgba(222,213,194,.9);border-radius:var(--r-lg);box-shadow:0 28px 60px rgba(8,20,16,.42);overflow:hidden;transform:perspective(1200px) rotateY(-7deg) rotateX(2.5deg);transition:transform .6s var(--ease-out);animation:pp-float 7s ease-in-out infinite}
.hero-card:hover{transform:perspective(1200px) rotateY(0) rotateX(0) scale(1.02)}
.hero-card-top{display:flex;align-items:center;gap:.5rem;padding:.6rem .9rem;background:var(--pine);color:var(--on-dark);font-family:var(--font-mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase}
.hero-card-dot{width:7px;height:7px;border-radius:50%;background:var(--amber);animation:pp-blip 2s ease-out infinite}
.hero-card-top b{margin-left:auto;font-weight:500;color:var(--on-dark-2);letter-spacing:.1em}
.hero-card-media{position:relative;background:var(--sand);min-height:11rem;display:grid;place-items:center;overflow:hidden}
.hero-card-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-card-media::after{content:"";position:absolute;left:0;right:0;top:0;height:22%;background:linear-gradient(to bottom,transparent,rgba(224,169,59,.28),transparent);animation:pp-scan 4.5s var(--ease) infinite}
.hero-card-body{padding:.9rem 1.1rem 1.15rem}
.hero-card-cat{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--moss)}
.hero-card-name{font-family:var(--font-display);font-size:1.14rem;font-weight:600;color:var(--ink);margin:.15rem 0 .6rem;letter-spacing:-.02em}
.hero-card-metrics{display:grid;gap:.5rem}
.hcm{display:grid;grid-template-columns:5.2rem 1fr 2.1rem;align-items:center;gap:.55rem}
.hcm-l{font-size:.68rem;color:var(--text-2)}
.hcm-track{height:5px;border-radius:3px;background:var(--sand-2);overflow:hidden}
.hcm-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--moss),var(--brass));transform-origin:left;transform:scaleX(0);animation:hcm-grow 1.3s var(--ease-out) forwards}
.hcm-v{font-family:var(--font-mono);font-size:.68rem;font-weight:600;color:var(--pine);text-align:right}
.hero-pill{position:absolute;z-index:3;display:flex;align-items:center;gap:.4rem;padding:.4rem .75rem;border-radius:var(--r-full);background:rgba(255,253,248,.95);border:1px solid var(--line);box-shadow:var(--sh-2);font-family:var(--font-mono);font-size:.65rem;font-weight:600;color:var(--pine);white-space:nowrap}
.hero-pill i{font-style:normal;color:var(--brass)}
.hero-pill--1{top:13%;left:-5%;animation:pp-float 6s ease-in-out infinite}
.hero-pill--2{top:35%;right:-6%;animation:pp-float 7.5s .8s ease-in-out infinite}
.hero-pill--3{top:56%;left:-7%;animation:pp-float 6.8s 1.6s ease-in-out infinite}
@media (max-width:980px){
  .hero-inner{grid-template-columns:1fr;gap:2.5rem}
  .hero-copy{max-width:none}
  .hero-viz{min-height:0;order:2}
  .hero-card{transform:none;width:min(100%,22rem)}
  .hero-pill--1{left:-2%}.hero-pill--2{right:-2%}
}
@media (max-width:560px){
  .hero-pill{display:none}
  .hero-stats{gap:1.1rem}
  #site-search{padding-right:1.2rem}
  .hero-search-btn{position:static;margin-top:.6rem;width:100%;padding:.75rem}
  .hero-search-form{flex-wrap:wrap}
  .hero-search-ic{top:1rem}
  .search-panel{top:calc(100% - 2.6rem)}
}
.ticker{background:var(--pine);color:var(--on-dark-2);border-block:1px solid rgba(239,232,218,.1);overflow:hidden;padding:.7rem 0}
.ticker-track{display:flex;width:max-content;animation:pp-drift 42s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-item{display:flex;align-items:center;gap:.6rem;padding-inline:1.6rem;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.ticker-item::after{content:"";width:4px;height:4px;border-radius:50%;background:var(--brass);margin-left:1.6rem}
.ticker-item b{color:var(--amber);font-weight:600}
.aff{display:flex;align-items:flex-start;gap:.7rem;max-width:var(--wrap);margin:1.5rem auto 0;padding:.85rem 1.1rem;background:var(--sand);border:1px solid var(--line-soft);border-left:3px solid var(--brass);border-radius:var(--r-sm);font-size:var(--t-xs);color:var(--text-2)}
.aff svg{width:15px;height:15px;color:var(--brass);flex-shrink:0;margin-top:1px}

/* ==========================================================================
   EDITOR'S TOP PICKS — award podium
   ========================================================================== */
.picks-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.2vw,1.6rem);align-items:end}
.pick{position:relative;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-1);transition:transform .42s var(--ease-out),box-shadow .42s var(--ease-out),border-color .42s var(--ease)}
.pick:hover{transform:translateY(-8px);box-shadow:var(--sh-3);border-color:var(--sand-2)}
.pick--1{order:2;border-color:rgba(192,138,46,.5);box-shadow:0 10px 34px rgba(192,138,46,.18)}
.pick--2{order:1}
.pick--3{order:3}
.pick--1 .pick-media{background:linear-gradient(165deg,#FBF3E1,var(--sand));min-height:14.5rem}
.pick--1:hover{box-shadow:0 18px 46px rgba(192,138,46,.26)}
.pick-ribbon{position:absolute;top:0;left:0;z-index:3;display:flex;align-items:center;gap:.35rem;padding:.4rem .8rem .45rem .7rem;background:var(--pine);color:var(--on-dark);border-bottom-right-radius:var(--r-md);font-family:var(--font-mono);font-size:.63rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.pick--1 .pick-ribbon{background:var(--brass);color:#1B1405}
.pick-ribbon svg{width:12px;height:12px}
.pick-media{position:relative;background:var(--sand);display:grid;place-items:center;min-height:12rem;overflow:hidden}
.pick-media::before{content:"";position:absolute;width:150%;aspect-ratio:1;border-radius:50%;background:repeating-radial-gradient(circle,transparent 0 13px,rgba(31,68,54,.05) 13px 14px);opacity:.85;transition:transform .8s var(--ease-out)}
.pick:hover .pick-media::before{transform:scale(1.12) rotate(6deg)}
.pick-media img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease-out)}
.pick--1 .pick-media img{object-position:center}
.pick:hover .pick-media img{transform:scale(1.08) rotate(-2deg)}
.pick-body{padding:1.1rem 1.2rem 1.3rem;display:flex;flex-direction:column;flex:1;gap:.5rem}
.pick-cat{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--moss)}
.pick-name{font-size:var(--t-lg);font-weight:600;letter-spacing:-.02em;line-height:1.2}
.pick--1 .pick-name{font-size:var(--t-xl)}
.pick-name a::after{content:"";position:absolute;inset:0;z-index:4}
.pick-why{font-size:var(--t-sm);color:var(--text-2);line-height:1.5;flex:1}
.pick-why b{color:var(--pine);font-weight:600}
.pick-foot{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding-top:.75rem;border-top:1px dashed var(--line)}
.pick-score{display:flex;align-items:baseline;gap:.25rem;font-family:var(--font-mono)}
.pick-score b{font-size:1.16rem;font-weight:600;color:var(--pine)}
.pick-score span{font-size:.66rem;color:var(--text-3)}
.pick-stars{color:var(--brass);font-size:.72rem;letter-spacing:.05em}
.pick-cta{display:inline-flex;align-items:center;gap:.35rem;font-size:var(--t-xs);font-weight:600;color:var(--moss);transition:gap .25s var(--ease),color .25s var(--ease)}
.pick-cta svg{width:12px;height:12px}
.pick:hover .pick-cta{gap:.6rem;color:var(--brass)}
@media (max-width:860px){
  .picks-grid{grid-template-columns:1fr;gap:1rem}
  .pick--1,.pick--2,.pick--3{order:0}
  .pick-media,.pick--1 .pick-media{min-height:10rem}
}

/* ==========================================================================
   MAGNIFICATION EXPLAINER
   ========================================================================== */
.mag{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(1.75rem,4vw,3.5rem);align-items:center}
.mag-opts{display:flex;flex-direction:column;gap:.6rem}
.mag-opt{display:grid;grid-template-columns:auto 1fr;gap:.2rem 1rem;align-items:center;padding:1rem 1.15rem;border-radius:var(--r-md);border:1.5px solid rgba(239,232,218,.16);background:rgba(239,232,218,.05);text-align:left;transition:border-color .3s var(--ease),background .3s var(--ease),transform .3s var(--spring)}
.mag-opt:hover{border-color:rgba(224,169,59,.5);transform:translateX(4px)}
.mag-opt.is-on{border-color:var(--amber);background:rgba(224,169,59,.12)}
.mag-opt-x{grid-row:1/3;font-family:var(--font-display);font-size:1.7rem;font-weight:600;color:var(--amber);line-height:1;letter-spacing:-.03em;min-width:3.1rem}
.mag-opt-t{font-size:var(--t-sm);font-weight:600;color:#fff}
.mag-opt-d{font-size:var(--t-xs);color:var(--on-dark-2);line-height:1.45}
.mag-note{margin-top:.4rem;padding:.85rem 1rem;border-radius:var(--r-sm);background:rgba(239,232,218,.06);border-left:2px solid var(--amber);font-size:var(--t-xs);color:var(--on-dark-2)}
.mag-note b{color:var(--amber)}
.mag-stage{position:relative}
.mag-view{position:relative;aspect-ratio:16/11;border-radius:var(--r-lg);overflow:hidden;background:var(--pine);border:1px solid rgba(239,232,218,.14);box-shadow:inset 0 0 70px rgba(0,0,0,.5)}
.mag-view img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform-origin:58% 42%;transition:transform 1s var(--ease-out)}
.mag-mask{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 50%,transparent 52%,rgba(9,22,17,.55) 68%,rgba(9,22,17,.95) 82%)}
.mag-cross{position:absolute;inset:0;pointer-events:none;opacity:.5}
.mag-cross span{position:absolute;background:rgba(224,169,59,.5)}
.mag-cross span:nth-child(1){left:50%;top:42%;width:1px;height:16%;transform:translateX(-50%)}
.mag-cross span:nth-child(2){top:50%;left:42%;height:1px;width:16%;transform:translateY(-50%)}
.mag-hud{position:absolute;left:1rem;bottom:1rem;z-index:2;display:flex;gap:.5rem;flex-wrap:wrap}
.mag-hud b{padding:.28rem .65rem;border-radius:var(--r-full);background:rgba(9,22,17,.75);border:1px solid rgba(224,169,59,.35);backdrop-filter:blur(4px);font-family:var(--font-mono);font-size:.64rem;font-weight:500;color:var(--amber)}
.mag-fov{position:absolute;right:1rem;top:1rem;z-index:2;padding:.3rem .7rem;border-radius:var(--r-full);background:rgba(9,22,17,.75);border:1px solid rgba(239,232,218,.2);font-family:var(--font-mono);font-size:.64rem;color:var(--on-dark)}
.mag-legend{margin-top:.9rem;text-align:center;font-size:var(--t-xs);color:var(--on-dark-2)}
@media (max-width:900px){.mag{grid-template-columns:1fr}}

/* ==========================================================================
   BIRDING STYLE ROUTER
   ========================================================================== */
.styles-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1.1rem}
.style-card{position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;gap:.6rem;padding:1.5rem 1.35rem 1.4rem;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out),border-color .3s var(--ease)}
.style-card::before{content:"";position:absolute;inset:auto -30% -60% auto;width:16rem;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(46,107,79,.1),transparent 68%);transform:scale(0);transition:transform .6s var(--ease-out);z-index:-1}
.style-card:hover{transform:translateY(-6px);box-shadow:var(--sh-3);border-color:var(--moss)}
.style-card:hover::before{transform:scale(1)}
.style-ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--sand);color:var(--pine);transition:background .35s var(--ease),color .35s var(--ease),transform .45s var(--spring)}
.style-card:hover .style-ic{background:var(--pine);color:var(--amber);transform:rotate(-8deg) scale(1.08)}
.style-ic svg{width:22px;height:22px}
.style-t{font-size:var(--t-lg);font-weight:600;letter-spacing:-.02em}
.style-d{font-size:var(--t-sm);color:var(--text-2);flex:1;line-height:1.55}
.style-meta{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.15rem}
.style-meta b{padding:.2rem .55rem;border-radius:var(--r-full);background:var(--sand);font-family:var(--font-mono);font-size:.6rem;font-weight:500;color:var(--text-2);letter-spacing:.04em}
.style-link{display:inline-flex;align-items:center;gap:.35rem;margin-top:.4rem;font-size:var(--t-xs);font-weight:600;color:var(--moss);transition:gap .25s var(--ease),color .25s var(--ease)}
.style-link svg{width:12px;height:12px}
.style-card:hover .style-link{gap:.65rem;color:var(--brass)}
.style-link::after{content:"";position:absolute;inset:0}

/* ==========================================================================
   PRICE TIERS
   ========================================================================== */
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:1.15rem}
.tier{position:relative;display:flex;flex-direction:column;gap:.9rem;padding:1.6rem 1.4rem;border-radius:var(--r-lg);background:var(--card);border:1px solid var(--line);transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out),border-color .3s var(--ease)}
.tier:hover{transform:translateY(-5px);box-shadow:var(--sh-2)}
.tier--best{border-color:var(--brass);box-shadow:0 8px 30px rgba(192,138,46,.15)}
.tier--best::after{content:"Sweet spot";position:absolute;top:-.7rem;right:1.1rem;padding:.2rem .65rem;border-radius:var(--r-full);background:var(--brass);color:#1B1405;font-family:var(--font-mono);font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.tier-head{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;padding-bottom:.85rem;border-bottom:1px dashed var(--line)}
.tier-name{font-size:var(--t-lg);font-weight:600;letter-spacing:-.02em}
.tier-range{font-family:var(--font-mono);font-size:var(--t-sm);font-weight:600;color:var(--brass)}
.tier-line{font-size:var(--t-sm);color:var(--text-2);line-height:1.55}
.tier-list{display:flex;flex-direction:column;gap:.45rem}
.tier-list li{display:flex;align-items:flex-start;gap:.5rem;font-size:var(--t-xs);color:var(--text-2);line-height:1.5}
.tier-list li::before{content:"";flex-shrink:0;width:14px;height:14px;margin-top:2px;border-radius:50%;background:var(--sand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E6B4F' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/10px no-repeat}
.tier-pick{display:flex;align-items:center;gap:.7rem;margin-top:auto;padding:.7rem;border-radius:var(--r-sm);background:var(--sand);transition:background .25s var(--ease),transform .25s var(--ease)}
.tier-pick:hover{background:var(--sand-2);transform:translateX(3px)}
.tier-pick img{width:40px;height:40px;object-fit:contain;flex-shrink:0}
.tier-pick-l{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.tier-pick-n{font-size:var(--t-xs);font-weight:600;color:var(--text);line-height:1.3}
.tier-pick-r{margin-left:auto;font-family:var(--font-mono);font-size:var(--t-xs);font-weight:600;color:var(--brass)}

/* ==========================================================================
   COMPARE TABLE
   ========================================================================== */
.cmp-shell{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-2);overflow:hidden}
.cmp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cmp{min-width:60rem;font-size:var(--t-sm)}
.cmp thead th{position:sticky;top:0;z-index:2;padding:.85rem 1rem;text-align:left;background:var(--pine);color:var(--on-dark);font-family:var(--font-mono);font-size:.63rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.cmp thead th:first-child{padding-left:1.3rem}
.cmp tbody tr{border-bottom:1px solid var(--line-soft);cursor:pointer;transition:background .22s var(--ease)}
.cmp tbody tr:last-child{border-bottom:none}
.cmp tbody tr:hover{background:var(--sand)}
.cmp tbody tr:hover .cmp-name{color:var(--brass)}
.cmp tbody tr:hover .cmp-go{opacity:1;transform:translateX(0)}
.cmp tbody tr:hover .cmp-thumb{transform:scale(1.1) rotate(-3deg)}
.cmp td{padding:.9rem 1rem;vertical-align:middle}
.cmp td:first-child{padding-left:1.3rem}
.cmp-rank{font-family:var(--font-display);font-size:1.15rem;font-weight:700;color:var(--sand-2);width:3.4rem}
.cmp-rank.is-medal{font-size:1.4rem}
.cmp-prod{display:flex;align-items:center;gap:.8rem;min-width:15rem}
.cmp-thumb{width:46px;height:46px;flex-shrink:0;border-radius:var(--r-sm);background:var(--sand);object-fit:contain;padding:3px;transition:transform .3s var(--spring)}
.cmp-name{font-weight:600;color:var(--text);line-height:1.25;transition:color .22s var(--ease)}
.cmp-brand{font-family:var(--font-mono);font-size:.63rem;color:var(--text-3);letter-spacing:.06em}
.cmp-cat{display:inline-block;padding:.2rem .55rem;border-radius:var(--r-full);background:var(--sand);font-size:.66rem;font-weight:500;color:var(--text-2);white-space:nowrap}
.cmp-score{display:flex;flex-direction:column;gap:.3rem;min-width:6.5rem}
.cmp-score-t{display:flex;align-items:baseline;gap:.25rem;font-family:var(--font-mono)}
.cmp-score-t b{font-size:.95rem;font-weight:600;color:var(--pine)}
.cmp-score-t span{font-size:.62rem;color:var(--text-3)}
.cmp-bar{height:4px;border-radius:2px;background:var(--sand-2);overflow:hidden}
.cmp-bar i{display:block;height:100%;border-radius:2px;background:linear-gradient(90deg,var(--moss),var(--brass));transform-origin:left;transform:scaleX(0);transition:transform 1s var(--ease-out)}
.cmp.is-in .cmp-bar i{transform:scaleX(var(--w,1))}
.cmp-spec{font-family:var(--font-mono);font-size:.72rem;color:var(--text-2);white-space:nowrap}
.cmp-spec b{color:var(--text);font-weight:600}
.cmp-pc{display:flex;gap:.35rem;font-family:var(--font-mono);font-size:.66rem;font-weight:600}
.cmp-pc .p{color:var(--moss)}
.cmp-pc .c{color:var(--rust)}
.cmp-price{font-family:var(--font-mono);font-size:.76rem;font-weight:600;color:var(--text);white-space:nowrap}
.cmp-go{display:inline-flex;align-items:center;gap:.3rem;font-size:var(--t-xs);font-weight:600;color:var(--brass);white-space:nowrap;opacity:.45;transform:translateX(-4px);transition:opacity .25s var(--ease),transform .25s var(--ease)}
.cmp-go svg{width:12px;height:12px}
.cmp-foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:.85rem 1.3rem;background:var(--sand);border-top:1px solid var(--line-soft);font-size:var(--t-xs);color:var(--text-2)}
.cmp-foot a{font-weight:600;color:var(--moss)}
.cmp-foot a:hover{color:var(--brass)}
.cmp-hint{display:none;font-family:var(--font-mono);font-size:.62rem;color:var(--text-3);letter-spacing:.08em}
@media (max-width:900px){.cmp-hint{display:block}}

/* ==========================================================================
   FILTER BAR
   ========================================================================== */
.fb{position:sticky;top:calc(var(--header-h) + 12px);z-index:60;background:rgba(250,247,240,.9);backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:var(--r-md);padding:1rem 1.1rem;margin-bottom:1.75rem;box-shadow:var(--sh-1)}
.fb-row{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.fb-row + .fb-row{margin-top:.9rem;padding-top:.9rem;border-top:1px dashed var(--line)}
.fb-label{font-family:var(--font-mono);font-size:.62rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--text-3);flex-shrink:0;margin-right:.15rem}
.fb-cats{display:flex;gap:.4rem;flex-wrap:wrap;flex:1}
.cat-pill{display:inline-flex;align-items:center;gap:.4rem;padding:.42rem .8rem;border-radius:var(--r-full);border:1px solid var(--line);background:var(--card);font-size:var(--t-xs);font-weight:500;color:var(--text-2);transition:all .25s var(--ease)}
.cat-pill b{font-family:var(--font-mono);font-size:.6rem;font-weight:600;padding:.05rem .32rem;border-radius:var(--r-full);background:var(--sand);color:var(--text-3);transition:all .25s var(--ease)}
.cat-pill:hover{border-color:var(--moss);color:var(--pine);transform:translateY(-1px)}
.cat-pill.is-on{background:var(--pine);border-color:var(--pine);color:var(--on-dark);box-shadow:0 3px 12px rgba(31,68,54,.24)}
.cat-pill.is-on b{background:rgba(224,169,59,.9);color:#1B1405}
.fb-sel{appearance:none;-webkit-appearance:none;padding:.45rem 2rem .45rem .8rem;border-radius:var(--r-full);border:1px solid var(--line);background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6B62' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right .6rem center/13px no-repeat;font-size:var(--t-xs);font-weight:500;color:var(--text);cursor:pointer;transition:border-color .22s var(--ease),box-shadow .22s var(--ease)}
.fb-sel:hover{border-color:var(--moss)}
.fb-sel:focus{outline:none;border-color:var(--brass);box-shadow:0 0 0 3px rgba(192,138,46,.15)}
.fb-count{margin-left:auto;font-family:var(--font-mono);font-size:var(--t-xs);color:var(--text-2);white-space:nowrap}
.fb-count b{color:var(--pine);font-weight:600}
.fb-reset{display:inline-flex;align-items:center;gap:.3rem;font-size:var(--t-xs);font-weight:600;color:var(--text-3);padding:.3rem .5rem;border-radius:var(--r-sm);transition:color .2s var(--ease),background .2s var(--ease)}
.fb-reset:hover{color:var(--rust);background:var(--sand)}
.fb-reset svg{width:12px;height:12px}
@media (max-width:640px){.fb{position:static}.fb-count{margin-left:0;width:100%}}

/* ==========================================================================
   PRODUCT GRID + CARDS
   ========================================================================== */
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2vw,1.5rem)}
@media (max-width:960px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.grid{grid-template-columns:1fr}}
.card{position:relative;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;box-shadow:var(--sh-1);transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out),border-color .3s var(--ease);animation:pp-rise .45s var(--ease-out) both}
.card:hover{transform:translateY(-6px);box-shadow:var(--sh-3);border-color:var(--sand-2)}
.card-media{position:relative;background:var(--sand);display:grid;place-items:center;min-height:11rem;overflow:hidden}
.card-media::before{content:"";position:absolute;inset:0;background:repeating-radial-gradient(circle at 50% 50%,transparent 0 15px,rgba(31,68,54,.045) 15px 16px);opacity:0;transition:opacity .5s var(--ease)}
.card:hover .card-media::before{opacity:1}
.card-media img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease-out)}
.card:hover .card-media img{transform:scale(1.07) rotate(-1.5deg)}
.card-rank{position:absolute;top:.7rem;left:.7rem;z-index:2;display:grid;place-items:center;min-width:24px;height:24px;padding-inline:.3rem;border-radius:var(--r-full);background:rgba(31,68,54,.9);color:var(--on-dark);font-family:var(--font-mono);font-size:.6rem;font-weight:600;letter-spacing:.03em;backdrop-filter:blur(4px)}
.card-score{position:absolute;top:.7rem;right:.7rem;z-index:2;display:flex;align-items:center;gap:.25rem;padding:.22rem .5rem;border-radius:var(--r-full);background:rgba(255,253,248,.94);border:1px solid var(--line);font-family:var(--font-mono);font-size:.68rem;font-weight:600;color:var(--pine);box-shadow:var(--sh-1)}
.card-score svg{width:10px;height:10px;color:var(--brass)}
.card-body{display:flex;flex-direction:column;gap:.5rem;padding:1rem 1.1rem 1.15rem;flex:1}
.card-cat{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;color:var(--moss)}
.card-title{font-size:var(--t-base);font-weight:600;letter-spacing:-.015em;line-height:1.3}
.card-title a::after{content:"";position:absolute;inset:0;z-index:3}
.card-feats{display:flex;flex-direction:column;gap:.32rem;margin-top:.1rem;flex:1}
.card-feats li{display:flex;align-items:flex-start;gap:.42rem;font-size:.76rem;line-height:1.4;color:var(--text-2)}
.card-feats li svg{width:11px;height:11px;flex-shrink:0;margin-top:3px;color:var(--brass)}
.card-foot{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding-top:.7rem;margin-top:.2rem;border-top:1px dashed var(--line)}
.card-price{font-family:var(--font-mono);font-size:.76rem;font-weight:600;color:var(--text)}
.card-price s{color:var(--text-3);font-weight:400;margin-right:.3rem;font-size:.68rem}
.card-go{display:inline-flex;align-items:center;gap:.3rem;font-size:var(--t-xs);font-weight:600;color:var(--moss);transition:gap .25s var(--ease),color .25s var(--ease)}
.card-go svg{width:12px;height:12px}
.card:hover .card-go{gap:.6rem;color:var(--brass)}
.grid-empty{grid-column:1/-1;padding:3.5rem 1rem;text-align:center;border:1.5px dashed var(--line);border-radius:var(--r-md);background:var(--sand)}
.grid-empty b{display:block;font-family:var(--font-display);font-size:var(--t-lg);color:var(--text);margin-bottom:.35rem}
.grid-empty p{font-size:var(--t-sm);color:var(--text-2);margin-bottom:1rem}
.pager{display:flex;justify-content:center;align-items:center;gap:.35rem;margin-top:2.25rem;flex-wrap:wrap}
.pg-btn{min-width:38px;height:38px;padding-inline:.7rem;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--card);font-size:var(--t-xs);font-weight:600;color:var(--text-2);display:inline-flex;align-items:center;justify-content:center;transition:all .22s var(--ease)}
.pg-btn:hover:not(.is-off):not(.is-on){border-color:var(--moss);color:var(--pine);transform:translateY(-2px)}
.pg-btn.is-on{background:var(--pine);border-color:var(--pine);color:var(--on-dark);box-shadow:0 3px 12px rgba(31,68,54,.25)}
.pg-btn.is-off{opacity:.35;pointer-events:none}
.pg-gap{color:var(--text-3);padding-inline:.2rem;font-size:var(--t-xs)}

/* ==========================================================================
   GLOSSARY / STATS / NEWSLETTER
   ========================================================================== */
.gloss{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:.9rem}
.gl{position:relative;padding:1.15rem 1.2rem;border-radius:var(--r-md);background:var(--card);border:1px solid var(--line);overflow:hidden;transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out),border-color .3s var(--ease)}
.gl::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(var(--moss),var(--brass));transform:scaleY(0);transform-origin:top;transition:transform .45s var(--ease-out)}
.gl:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:var(--sand-2)}
.gl:hover::before{transform:scaleY(1)}
.gl-t{display:flex;align-items:center;gap:.5rem;font-family:var(--font-display);font-size:var(--t-base);font-weight:600;color:var(--ink);margin-bottom:.4rem}
.gl-t i{font-style:normal;font-family:var(--font-mono);font-size:.56rem;font-weight:600;padding:.12rem .4rem;border-radius:var(--r-full);background:var(--sand);color:var(--moss);letter-spacing:.08em;text-transform:uppercase}
.gl-d{font-size:var(--t-sm);color:var(--text-2);line-height:1.55}
.gl-d b{color:var(--pine);font-weight:600}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:1.5rem}
.stat{text-align:center;position:relative}
.stat:not(:last-child)::after{content:"";position:absolute;right:-.75rem;top:15%;bottom:15%;width:1px;background:linear-gradient(transparent,rgba(239,232,218,.25),transparent)}
.stat b{display:block;font-family:var(--font-display);font-size:var(--t-3xl);font-weight:600;color:var(--amber);line-height:1;letter-spacing:-.04em}
.stat span{display:block;margin-top:.4rem;font-size:var(--t-xs);color:var(--on-dark-2);letter-spacing:.03em}
@media (max-width:720px){.stat::after{display:none}}
.nl{position:relative;overflow:hidden;isolation:isolate;display:grid;grid-template-columns:1.2fr .8fr;gap:2rem;align-items:center;padding:clamp(1.75rem,4vw,2.75rem);border-radius:var(--r-xl);background:linear-gradient(120deg,var(--pine),var(--pine-deep));color:var(--on-dark);box-shadow:var(--sh-3)}
.nl::before{content:"";position:absolute;inset:-40% -10% auto auto;width:26rem;aspect-ratio:1;border-radius:50%;z-index:-1;background:radial-gradient(circle,rgba(224,169,59,.18),transparent 65%);animation:pp-float 11s ease-in-out infinite}
.nl h2{font-size:var(--t-2xl);color:#fff;margin-bottom:.5rem}
.nl p{color:var(--on-dark-2);font-size:var(--t-sm);max-width:38ch}
.nl-form{display:flex;gap:.5rem;flex-wrap:wrap}
.nl-form input{flex:1;min-width:11rem;padding:.8rem 1.1rem;border-radius:var(--r-full);border:1px solid rgba(239,232,218,.24);background:rgba(239,232,218,.09);color:#fff;font-size:var(--t-sm)}
.nl-form input::placeholder{color:var(--on-dark-2)}
.nl-form input:focus{outline:none;border-color:var(--amber);background:rgba(239,232,218,.14)}
.nl-note{margin-top:.7rem;font-size:.68rem;color:var(--on-dark-2);opacity:.8}
.nl-ok{display:none;font-size:var(--t-sm);color:var(--amber);font-weight:600;align-items:center;gap:.4rem}
.nl-ok svg{width:15px;height:15px}
.nl-ok.is-on{display:flex;animation:pp-rise .4s var(--ease-out) both}
@media (max-width:800px){.nl{grid-template-columns:1fr;gap:1.4rem}}

/* ==========================================================================
   PRODUCT PAGE
   ========================================================================== */
.crumbs{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;padding:1.1rem 0;font-size:var(--t-xs);color:var(--text-3)}
.crumbs a{color:var(--text-2);transition:color .2s var(--ease)}
.crumbs a:hover{color:var(--brass)}
.crumbs svg{width:11px;height:11px;opacity:.5}
.crumbs b{color:var(--text);font-weight:500}
.pd{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,3.5vw,3rem);padding-bottom:clamp(2rem,4vw,3rem)}
@media (max-width:900px){.pd{grid-template-columns:1fr}}
.pd-gal{position:sticky;top:calc(var(--header-h) + 1.25rem);align-self:start}
@media (max-width:900px){.pd-gal{position:static}}
.pd-stage{position:relative;background:var(--sand);border:1px solid var(--line);border-radius:var(--r-lg);aspect-ratio:4/3;display:grid;place-items:center;overflow:hidden}
.pd-stage::before{content:"";position:absolute;inset:0;background:repeating-radial-gradient(circle at 50% 50%,transparent 0 18px,rgba(31,68,54,.05) 18px 19px)}
.pd-stage img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;transition:opacity .35s var(--ease),transform .5s var(--ease-out)}
.pd-stage img.is-swap{opacity:0;transform:scale(.96)}
.pd-zoom{position:absolute;bottom:.8rem;right:.8rem;z-index:2;display:flex;align-items:center;gap:.3rem;padding:.3rem .6rem;border-radius:var(--r-full);background:rgba(255,253,248,.9);border:1px solid var(--line);font-family:var(--font-mono);font-size:.6rem;color:var(--text-3);letter-spacing:.06em}
.pd-zoom svg{width:10px;height:10px}
.pd-thumbs{display:flex;gap:.55rem;margin-top:.7rem}
.pd-thumb{position:relative;flex:1;background:var(--sand);border:1.5px solid var(--line);border-radius:var(--r-sm);aspect-ratio:1;display:grid;place-items:center;overflow:hidden;transition:border-color .25s var(--ease),transform .25s var(--spring)}
.pd-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pd-thumb:hover{border-color:var(--moss);transform:translateY(-2px)}
.pd-thumb.is-on{border-color:var(--brass);box-shadow:0 0 0 3px rgba(192,138,46,.16)}
.pd-trust{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-top:.85rem}
.pd-trust div{display:flex;flex-direction:column;align-items:center;gap:.25rem;text-align:center;padding:.7rem .4rem;border-radius:var(--r-sm);background:var(--sand)}
.pd-trust svg{width:15px;height:15px;color:var(--moss)}
.pd-trust b{font-size:.66rem;font-weight:600;color:var(--text);line-height:1.2}
.pd-trust span{font-size:.6rem;color:var(--text-3)}
.pd-cat{display:inline-flex;align-items:center;gap:.4rem;padding:.24rem .6rem;border-radius:var(--r-full);background:var(--sand);border:1px solid var(--line-soft);font-family:var(--font-mono);font-size:.62rem;letter-spacing:.11em;text-transform:uppercase;color:var(--moss);margin-bottom:.8rem}
.pd-title{font-size:var(--t-3xl);line-height:1.05;margin-bottom:.5rem}
.pd-brand{font-size:var(--t-sm);color:var(--text-3);margin-bottom:1.1rem}
.pd-brand b{color:var(--pine);font-weight:600}
.pd-lede{font-size:var(--t-lg);color:var(--text-2);line-height:1.6;margin-bottom:1.4rem}
.pd-score{display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap;padding:1.15rem 1.25rem;border-radius:var(--r-md);background:var(--card);border:1px solid var(--line);box-shadow:var(--sh-1);margin-bottom:1.25rem}
.pd-dial{position:relative;width:82px;height:82px;flex-shrink:0}
.pd-dial svg{width:100%;height:100%;transform:rotate(-90deg)}
.pd-dial circle{fill:none;stroke-width:7;stroke-linecap:round}
.pd-dial .trk{stroke:var(--sand-2)}
.pd-dial .fil{stroke:var(--brass);stroke-dasharray:220;stroke-dashoffset:220;transition:stroke-dashoffset 1.4s var(--ease-out)}
.pd-dial-c{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.pd-dial-c b{font-family:var(--font-display);font-size:1.35rem;font-weight:600;color:var(--pine);line-height:1}
.pd-dial-c span{font-family:var(--font-mono);font-size:.52rem;color:var(--text-3);letter-spacing:.08em}
.pd-score-side{flex:1;min-width:11rem}
.pd-stars{display:flex;align-items:center;gap:.35rem;margin-bottom:.35rem;flex-wrap:wrap}
.pd-stars-ic{color:var(--brass);font-size:.9rem;letter-spacing:.04em}
.pd-stars b{font-family:var(--font-mono);font-size:var(--t-sm);font-weight:600;color:var(--text)}
.pd-stars span{font-size:var(--t-xs);color:var(--text-3)}
.pd-bars{display:grid;gap:.4rem;margin-top:.6rem}
.pdb{display:grid;grid-template-columns:5.6rem 1fr 2rem;gap:.5rem;align-items:center}
.pdb-l{font-size:.68rem;color:var(--text-2)}
.pdb-t{height:5px;border-radius:3px;background:var(--sand-2);overflow:hidden}
.pdb-f{display:block;height:100%;width:100%;border-radius:3px;background:linear-gradient(90deg,var(--moss),var(--brass));transform-origin:left;transform:scaleX(0);transition:transform 1.1s var(--ease-out)}
.pd-score.is-in .pdb-f{transform:scaleX(var(--w,1))}
.pdb-v{font-family:var(--font-mono);font-size:.66rem;font-weight:600;color:var(--pine);text-align:right}
.pd-verdict{position:relative;padding:1.2rem 1.3rem 1.2rem 1.5rem;border-radius:var(--r-md);background:linear-gradient(120deg,var(--pine),var(--pine-deep));color:var(--on-dark);box-shadow:var(--sh-2);overflow:hidden;margin-bottom:1.25rem}
.pd-verdict::before{content:"";position:absolute;inset:-60% -20% auto auto;width:15rem;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(224,169,59,.16),transparent 65%)}
.pd-verdict-l{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--font-mono);font-size:.62rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);margin-bottom:.5rem}
.pd-verdict-l svg{width:13px;height:13px}
.pd-verdict p{position:relative;font-size:var(--t-sm);line-height:1.6;color:var(--on-dark)}
.pd-cta{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:.75rem}
.pd-cta .btn{flex:1;min-width:9rem}
.pd-cta-note{font-size:.66rem;color:var(--text-3);text-align:center}
.pc{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;margin-block:1.5rem}
@media (max-width:520px){.pc{grid-template-columns:1fr}}
.pc-col{padding:1.1rem 1.15rem;border-radius:var(--r-md);border:1px solid var(--line);background:var(--card)}
.pc-col--pro{border-left:3px solid var(--moss)}
.pc-col--con{border-left:3px solid var(--rust)}
.pc-h{display:flex;align-items:center;gap:.45rem;margin-bottom:.7rem;font-family:var(--font-mono);font-size:.64rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.pc-col--pro .pc-h{color:var(--moss)}
.pc-col--con .pc-h{color:var(--rust)}
.pc-h svg{width:14px;height:14px}
.pc-h i{margin-left:auto;font-style:normal;color:var(--text-3);letter-spacing:0}
.pc-list{display:flex;flex-direction:column;gap:.5rem}
.pc-list li{display:flex;align-items:flex-start;gap:.5rem;font-size:var(--t-sm);color:var(--text-2);line-height:1.5}
.pc-list li svg{width:13px;height:13px;flex-shrink:0;margin-top:4px}
.pc-col--pro li svg{color:var(--moss)}
.pc-col--con li svg{color:var(--rust)}
.specs{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;margin-block:1.5rem}
.specs-h{display:flex;align-items:center;gap:.5rem;padding:.8rem 1.15rem;background:var(--pine);color:var(--on-dark);font-family:var(--font-mono);font-size:.64rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase}
.specs-h svg{width:14px;height:14px;color:var(--amber)}
.specs-h b{margin-left:auto;font-weight:500;color:var(--on-dark-2);letter-spacing:.08em}
.specs-grid{display:grid;grid-template-columns:1fr 1fr}
@media (max-width:640px){.specs-grid{grid-template-columns:1fr}}
.spec{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding:.72rem 1.15rem;border-bottom:1px solid var(--line-soft);transition:background .2s var(--ease)}
.spec:hover{background:var(--sand)}
.specs-grid .spec:nth-child(odd){border-right:1px solid var(--line-soft)}
@media (max-width:640px){.specs-grid .spec:nth-child(odd){border-right:none}}
.spec-k{font-size:var(--t-xs);color:var(--text-2);flex-shrink:0}
.spec-v{font-family:var(--font-mono);font-size:var(--t-xs);font-weight:600;color:var(--text);text-align:right}
.pd-read{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(1.5rem,3.5vw,3rem);align-items:start}
.pd-read .prose{max-width:72ch}
.pd-read .ads{flex-direction:column;align-items:center;padding:0;position:sticky;top:calc(var(--header-h) + 1.25rem)}
@media (max-width:900px){.pd-read{grid-template-columns:1fr}.pd-read .ads{flex-direction:row;position:static;margin-top:1.5rem}}
.prose{max-width:68ch}
.prose h2{position:relative;font-size:var(--t-xl);margin:2rem 0 .75rem;padding-left:.9rem}
.prose h2::before{content:"";position:absolute;left:0;top:.18em;bottom:.18em;width:3px;border-radius:2px;background:linear-gradient(var(--brass),var(--moss))}
.prose p{margin-bottom:1rem;color:var(--text-2);line-height:1.75}
.prose p:last-child{margin-bottom:0}
.prose strong{color:var(--text);font-weight:600}
.pullq{position:relative;margin:1.75rem 0;padding:1.4rem 1.5rem 1.4rem 3.2rem;border-radius:var(--r-md);background:var(--sand);border:1px solid var(--line-soft)}
.pullq::before{content:"\201C";position:absolute;left:.9rem;top:.15rem;font-family:var(--font-display);font-size:3.4rem;line-height:1;color:var(--brass);opacity:.5}
.pullq p{font-family:var(--font-display);font-size:var(--t-lg);font-style:italic;color:var(--ink);line-height:1.5;margin:0}
.pullq cite{display:block;margin-top:.6rem;font-family:var(--font-mono);font-size:.66rem;font-style:normal;color:var(--text-3);letter-spacing:.06em}
.revs{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;margin-top:1rem}
@media (max-width:720px){.revs{grid-template-columns:1fr}}
.rev{position:relative;padding:1.1rem 1.15rem;border-radius:var(--r-md);background:var(--card);border:1px solid var(--line);transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out)}
.rev:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.rev-top{display:flex;align-items:center;gap:.6rem;margin-bottom:.55rem}
.rev-av{width:32px;height:32px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;background:var(--pine);color:var(--amber);font-family:var(--font-display);font-size:.8rem;font-weight:600}
.rev-who b{display:block;font-size:var(--t-xs);font-weight:600;color:var(--text);line-height:1.2}
.rev-who span{font-family:var(--font-mono);font-size:.6rem;color:var(--text-3)}
.rev-stars{margin-left:auto;color:var(--brass);font-size:.7rem;letter-spacing:.04em}
.rev-t{font-family:var(--font-display);font-size:var(--t-base);font-weight:600;color:var(--ink);margin-bottom:.3rem;line-height:1.3}
.rev-b{font-size:var(--t-sm);color:var(--text-2);line-height:1.55}
.rev-ver{display:inline-flex;align-items:center;gap:.25rem;margin-top:.6rem;font-family:var(--font-mono);font-size:.58rem;color:var(--moss);letter-spacing:.05em}
.rev-ver svg{width:10px;height:10px}
.rel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
@media (max-width:900px){.rel-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.rel-grid{grid-template-columns:1fr}}

/* ==========================================================================
   STATIC PAGES
   ========================================================================== */
.page-hd{position:relative;overflow:hidden;background:linear-gradient(120deg,var(--pine),var(--pine-deep));color:var(--on-dark);padding-block:clamp(2.5rem,5vw,4rem)}
.page-hd::before{content:"";position:absolute;inset:-50% -10% auto auto;width:24rem;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(224,169,59,.14),transparent 65%);animation:pp-float 12s ease-in-out infinite}
.page-hd .wrap{position:relative}
.page-hd h1{font-size:var(--t-3xl);color:#fff;margin-bottom:.5rem}
.page-hd p{color:var(--on-dark-2);font-size:var(--t-lg);max-width:52ch}
.page-body{max-width:var(--wrap-narrow);margin-inline:auto;padding-block:clamp(2rem,5vw,3.5rem);padding-inline:clamp(1rem,4vw,2rem)}
.page-body h2{font-size:var(--t-xl);margin:2rem 0 .7rem}
.page-body h2:first-child{margin-top:0}
.page-body h3{font-size:var(--t-lg);margin:1.5rem 0 .5rem}
.page-body p{margin-bottom:1rem;color:var(--text-2);line-height:1.75}
.page-body ul{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem}
.page-body ul li{display:flex;align-items:flex-start;gap:.55rem;color:var(--text-2);line-height:1.6}
.page-body ul li::before{content:"";flex-shrink:0;width:5px;height:5px;margin-top:.65em;border-radius:50%;background:var(--brass)}
.page-body a{color:var(--moss);font-weight:500;text-decoration:underline;text-decoration-color:var(--sand-2);text-underline-offset:3px;transition:color .2s var(--ease)}
.page-body a:hover{color:var(--brass)}
.page-body strong{color:var(--text);font-weight:600}
.note-card{padding:1.15rem 1.25rem;border-radius:var(--r-md);background:var(--sand);border:1px solid var(--line-soft);border-left:3px solid var(--brass);margin-block:1.5rem}
.note-card p:last-child{margin-bottom:0}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.ft{background:var(--pine-deep);color:var(--on-dark-2);position:relative;overflow:hidden;margin-top:clamp(3rem,6vw,5rem)}
.ft::before{content:"";position:absolute;inset:auto auto -60% -10%;width:30rem;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(46,107,79,.3),transparent 65%)}
.ft-ridge{display:block;width:100%;height:26px;color:var(--paper)}
.ft-inner{position:relative;max-width:var(--wrap);margin-inline:auto;padding:clamp(2.5rem,5vw,3.5rem) clamp(1rem,4vw,2rem) 0;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:clamp(1.5rem,3vw,2.5rem)}
@media (max-width:860px){.ft-inner{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.ft-inner{grid-template-columns:1fr}}
.ft-brand{display:flex;align-items:center;gap:.65rem;margin-bottom:.9rem}
.ft-logo{width:40px;height:40px;object-fit:contain;border-radius:8px}
.price-note{margin-top:1.1rem;font-family:var(--font-mono);font-size:.7rem;line-height:1.5;color:var(--text-3);letter-spacing:.02em}
.price-note b{color:var(--text-2);font-weight:600}
.ft-name{font-family:var(--font-display);font-size:1.2rem;font-weight:700;color:#fff;letter-spacing:-.03em;line-height:1}
.ft-tag{font-family:var(--font-mono);font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;color:var(--sage);margin-top:3px}
.ft-desc{font-size:var(--t-xs);line-height:1.65;max-width:34ch;margin-bottom:1.1rem}
.ft-badges{display:flex;gap:.4rem;flex-wrap:wrap}
.ft-badge{display:inline-flex;align-items:center;gap:.3rem;padding:.25rem .55rem;border-radius:var(--r-full);border:1px solid rgba(239,232,218,.16);background:rgba(239,232,218,.05);font-family:var(--font-mono);font-size:.58rem;color:var(--sage);letter-spacing:.05em}
.ft-badge svg{width:10px;height:10px;color:var(--amber)}
.ft-h{font-family:var(--font-mono);font-size:.62rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-bottom:.85rem}
.ft-links{display:flex;flex-direction:column;gap:.5rem}
.ft-link{position:relative;display:inline-flex;align-items:center;gap:.35rem;width:fit-content;font-size:var(--t-xs);color:var(--on-dark-2);transition:color .22s var(--ease),transform .22s var(--ease)}
.ft-link::before{content:"";width:0;height:1.5px;background:var(--amber);border-radius:2px;transition:width .28s var(--ease-out)}
.ft-link:hover{color:#fff;transform:translateX(3px)}
.ft-link:hover::before{width:9px}
.ft-link i{font-style:normal;font-family:var(--font-mono);font-size:.54rem;padding:.02rem .28rem;border-radius:var(--r-full);background:rgba(239,232,218,.1);color:var(--sage)}
.ft-bottom{position:relative;max-width:var(--wrap);margin:clamp(2rem,4vw,2.75rem) auto 0;padding:1.1rem clamp(1rem,4vw,2rem);border-top:1px solid rgba(239,232,218,.1);display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.ft-copy{font-size:.66rem;color:var(--sage)}
.ft-dis{font-size:.62rem;color:var(--sage);opacity:.75;max-width:60ch}
.ft-top{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .8rem;border-radius:var(--r-full);border:1px solid rgba(239,232,218,.18);font-family:var(--font-mono);font-size:.6rem;color:var(--on-dark-2);letter-spacing:.08em;transition:all .25s var(--ease)}
.ft-top:hover{border-color:var(--amber);color:var(--amber);transform:translateY(-2px)}
.ft-top svg{width:11px;height:11px}

/* ==========================================================================
   COOKIE BANNER + ADS
   ========================================================================== */
#cookie-banner{position:fixed;left:50%;bottom:1.25rem;z-index:950;transform:translateX(-50%) translateY(140%);width:min(calc(100vw - 2rem),44rem);display:flex;align-items:center;gap:1rem;flex-wrap:wrap;padding:.95rem 1.15rem;border-radius:var(--r-md);background:var(--card);border:1px solid var(--line);box-shadow:var(--sh-3);transition:transform .55s var(--ease-out)}
html.cookie-ask #cookie-banner{transform:translateX(-50%) translateY(0)}
#cookie-banner p{flex:1;min-width:14rem;font-size:var(--t-xs);color:var(--text-2)}
#cookie-banner a{color:var(--moss);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.cookie-btns{display:flex;gap:.45rem;margin-left:auto}
.cookie-btns button{padding:.5rem 1rem;border-radius:var(--r-full);font-size:var(--t-xs);font-weight:600;transition:all .22s var(--ease)}
#cookie-accept{background:var(--pine);color:var(--on-dark)}
#cookie-accept:hover{background:var(--moss);transform:translateY(-1px)}
#cookie-decline{border:1px solid var(--line);color:var(--text-2)}
#cookie-decline:hover{border-color:var(--text-3);color:var(--text)}
.ads{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap;padding:1.25rem 0}
.pd-main{min-width:0}

/* Product shots ship on white/grey studio backgrounds; multiply melts that
   into the warm card surface instead of leaving a pale box. */
.pick-media img,.card-media img,.pd-stage img,.hero-card-media img,
.tier-pick img,.cmp-thumb,.sr-item img,.pd-thumb img{mix-blend-mode:multiply}

/* Stacked label pairs live inside a plain inline <span> wrapper — force the
   two lines apart, otherwise name and brand collide on one line. */
.cmp-name,.cmp-brand,.sr-t,.sr-c,.hd-mi-t,.hd-mi-n,.tier-pick-l,.tier-pick-n,.ft-name,.ft-tag{display:block}
/* Rank medals: emoji render as tofu on machines without an emoji font. */
.cmp-medal{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;
  font-family:var(--font-mono);font-size:.66rem;font-weight:700;color:#fff;box-shadow:var(--sh-1)}
.cmp-medal--1{background:linear-gradient(145deg,#E0A93B,#B8801F);color:#1B1405}
.cmp-medal--2{background:linear-gradient(145deg,#C9CBC6,#9AA098);color:#1F2622}
.cmp-medal--3{background:linear-gradient(145deg,#C08457,#96603A)}

/* ==========================================================================
   BUY BOX — affiliate search-out
   ========================================================================== */
.buy{
  position:relative;overflow:hidden;isolation:isolate;
  margin-bottom:1.25rem;padding:1.15rem 1.25rem;
  border-radius:var(--r-md);background:var(--card);
  border:1px solid var(--line);border-left:3px solid var(--brass);
  box-shadow:var(--sh-1);
  transition:box-shadow .35s var(--ease),border-color .35s var(--ease);
}
.buy::before{
  content:"";position:absolute;inset:-70% -25% auto auto;width:14rem;aspect-ratio:1;border-radius:50%;z-index:-1;
  background:radial-gradient(circle,rgba(224,169,59,.14),transparent 68%);
  opacity:0;transition:opacity .5s var(--ease);
}
.buy:hover{box-shadow:var(--sh-2)}
.buy:hover::before{opacity:1}
.buy-row{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:.9rem}
.buy-l{
  display:block;font-family:var(--font-mono);font-size:.58rem;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--text-3);margin-bottom:.15rem;
}
.buy-p{font-family:var(--font-display);font-size:var(--t-xl);font-weight:600;color:var(--pine);line-height:1;letter-spacing:-.02em}
.buy-p small{font-family:var(--font-sans);font-size:.66rem;font-weight:500;color:var(--text-3);letter-spacing:0}
.buy-stock{
  display:inline-flex;align-items:center;gap:.35rem;
  font-family:var(--font-mono);font-size:.6rem;color:var(--moss);letter-spacing:.05em;white-space:nowrap;
}
.buy-stock i{width:6px;height:6px;border-radius:50%;background:var(--moss);animation:pp-blip 2.4s ease-out infinite;flex-shrink:0}
.buy-cta{width:100%;padding-block:.9rem}
.buy-cta .buy-ext{width:13px;height:13px;opacity:.75;transition:transform .3s var(--spring)}
.buy-cta:hover .buy-ext{transform:translate(2px,-2px)}
.buy-alt{
  display:flex;align-items:center;justify-content:center;gap:.4rem;
  width:100%;margin-top:.5rem;padding:.6rem;border-radius:var(--r-full);
  border:1px solid var(--line);background:transparent;
  font-size:var(--t-xs);font-weight:600;color:var(--text-2);
  transition:border-color .22s var(--ease),color .22s var(--ease),background .22s var(--ease);
}
.buy-alt:hover{border-color:var(--pine);color:var(--pine);background:var(--sand)}
.buy-alt svg{width:12px;height:12px}
.buy-note{margin-top:.75rem;font-size:.64rem;line-height:1.5;color:var(--text-3);text-align:center}
.buy-note b{color:var(--text-2);font-weight:600}
/* app variant — nothing to buy, so no affiliate link */
.buy--free{border-left-color:var(--moss)}
.buy--free .buy-p{color:var(--moss)}
.buy-stores{display:flex;gap:.4rem;flex-wrap:wrap}
.buy-store{
  display:inline-flex;align-items:center;gap:.4rem;flex:1;min-width:8rem;justify-content:center;
  padding:.6rem .8rem;border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--sand);
  font-size:var(--t-xs);font-weight:600;color:var(--text-2);
}
.buy-store svg{width:13px;height:13px;color:var(--moss)}