@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/assets/fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(/assets/fonts/source-serif-4-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===== design tokens (Option A "Trail"): change these to re-theme the whole site ===== */
:root{
  --bg:#FBFAF7; --bg-2:#F2F0EA; --surface:#FFFFFF; --surface-2:#F4F2EC; --line:#E3E0D6; --line-2:#D2CEC1;
  --fg:#14211B; --fg-2:#46524B; --fg-3:#5B665F;
  --cy:#1F6B47; --cy-dim:#17553A; --mg:#B45309; --vi:#2F855A; --lime:#1F6B47; --amber:#B7791F;
  --good:#1F6B47; --bad:#B42318;
  --radius:12px; --maxw:1200px;
  --ff:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --hf:'Source Serif 4',Georgia,'Times New Roman',serif;
  --ff-mono:var(--ff);
  --acsoft:#E4F1EA; --cta:#1F6B47; --ctaink:#FFFFFF;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0F1713; --bg-2:#16201A; --surface:#1A261F; --surface-2:#1F2D25; --line:#2A3830; --line-2:#3A4A40;
    --fg:#E8EEE9; --fg-2:#BCC8C0; --fg-3:#98A69D;
    --cy:#5FCB93; --cy-dim:#8EDDB3; --mg:#F0A35E; --vi:#5FCB93; --lime:#5FCB93; --amber:#E7B65A;
    --good:#5FCB93; --bad:#FF8A80; --acsoft:#1E3328; --cta:#3FAE77; --ctaink:#06130C;
    color-scheme:dark;
  }
}
body{font-family:var(--ff)}
h1,h2,h3,h4,.h-xl,.h-lg,.h-md{font-family:var(--hf);font-weight:700;letter-spacing:-.015em}
.hub-card h2,.post-card h2,.site-foot h4,.cat-tile,.btn,.chip,.nav,.nav-menu,.hub-meta{font-family:var(--ff)}

/* ============================================================
   HOME REDESIGN (2026-10-30) - clean light look.
   Scoped to the home page only (this file); content is unchanged.
   ============================================================ */
body { font-size:16px; line-height:1.6; }
::selection { background:var(--line-2); color:var(--ctaink); }
.bg-fx { display:none; }
.progress { background:var(--cy); }
.mono, .eyebrow .lbl, .chip, .btn, .nav-links a, .hub-meta, .site-foot h4 { font-family:var(--ff); }
.mono { letter-spacing:.08em; font-size:.72rem; font-weight:600; }

/* shapes: round everything, drop the clipped "gaming" corners */
.panel, .chip, .btn, .nav-score, .eyebrow .num, .totop { clip-path:none !important; }
.panel { border-radius:16px; background:var(--surface); box-shadow:0 1px 2px rgba(15,23,42,.04); }
.panel.ticked::before, .panel.ticked::after { display:none; }
.chip { border-radius:999px; text-transform:none; letter-spacing:0; font-size:.78rem; font-weight:600; padding:5px 12px; }
.chip.cy { background:var(--acsoft); border-color:var(--line-2); color:var(--cy-dim); }
.eyebrow .num { border-radius:999px; background:var(--acsoft); color:var(--cy-dim); padding:3px 11px; font-family:var(--ff); }
.eyebrow .lbl { letter-spacing:.1em; font-weight:600; }
.btn { border-radius:999px; text-transform:none; letter-spacing:0; font-size:.92rem; font-weight:600; padding:12px 24px; }
.btn-primary { background:var(--cta); color:var(--ctaink); }
.btn-primary:hover { background:var(--cy-dim); box-shadow:0 8px 22px rgba(22,163,74,.28); }
.btn-ghost { background:var(--surface); color:var(--fg); border-color:var(--line-2); }
.btn-ghost:hover { border-color:var(--cy); color:var(--cy); }
h1,h2,h3,h4 { letter-spacing:-.025em; }
a { color:var(--cy-dim); }

/* header */
.nav { background:color-mix(in srgb,var(--bg) 92%,transparent); border-bottom:1px solid var(--line); }
.nav-in { height:64px; }
.brand { font-weight:800; }
.brand .mark { border-radius:8px; clip-path:none; background:linear-gradient(135deg,#22c55e,var(--cy-dim)); }
.nav-links a { font-size:.88rem; letter-spacing:0; text-transform:none; font-weight:500; color:var(--fg-2); }
.nav-dd-t { font-family:var(--ff); font-size:.88rem; letter-spacing:0; text-transform:none; font-weight:600; border-radius:999px; background:var(--surface); }
.nav-menu { max-height:75vh; overflow:auto; }

/* hero: compact */
.hero { padding:44px 0 34px; }
.hero-grid { gap:40px; }
.hero h1.h-xl { font-size:clamp(2rem,4.4vw,3.2rem); font-weight:800; line-height:1.08; }
.hero h1 .accent { background:linear-gradient(120deg,var(--cy),#4ade80); -webkit-background-clip:text; background-clip:text; }
.hero .tagline { font-size:1.05rem; margin-top:14px; }
.home-hero .hero-meta { display:none; }          /* replaced by the category tab bar below */
.hero-cta { margin-top:22px; }
.home-feature { max-width:440px; justify-self:end; }
.home-feature .mono { color:var(--cy-dim); }

/* cards */
.hub-card { border-radius:16px; border:1px solid var(--line); background:var(--surface); box-shadow:0 1px 2px rgba(15,23,42,.04); }
.hub-card:hover { border-color:var(--cy); box-shadow:0 14px 34px rgba(15,23,42,.10); }
.hub-img { background:var(--surface-2); aspect-ratio:16/10; border-bottom:1px solid var(--line); }
.hub-body { padding:16px 18px 18px; gap:6px; }
.hub-card h2 { font-size:1.08rem; font-weight:700; }
.hub-card h2 .accent { display:block; margin-top:2px; font-size:.84rem; font-weight:500; color:var(--fg-3); }
.hub-card p { font-size:.88rem; -webkit-line-clamp:2; }
.hub-score { background:var(--acsoft); border-radius:999px; padding:2px 10px; font-family:var(--ff); }
.hub-score b { font-size:1rem; }
.hub-meta { font-family:var(--ff); text-transform:none; letter-spacing:0; font-size:.76rem; gap:4px 12px; }
.hub-price { color:var(--cy-dim); font-weight:700; }

/* category tab bar */
.cat-tabs { position:sticky; top:64px; z-index:40; background:color-mix(in srgb,var(--bg) 92%,transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.cat-tabs-in { display:flex; gap:8px; overflow-x:auto; padding-block:12px; scrollbar-width:none; }
.cat-tabs-in::-webkit-scrollbar { display:none; }
.cat-tab { flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; padding:8px 16px; border:1px solid var(--line-2); border-radius:999px; background:var(--surface); color:var(--fg-2); font:600 .86rem/1 var(--ff); cursor:pointer; white-space:nowrap; transition:all .15s; }
.cat-tab small { font-size:.72rem; font-weight:600; color:var(--fg-3); background:var(--surface-2); border-radius:999px; padding:2px 7px; }
.cat-tab:hover { border-color:var(--cy); color:var(--cy-dim); }
.cat-tab[aria-selected="true"] { background:var(--cy); border-color:var(--cy); color:#fff; }
.cat-tab[aria-selected="true"] small { background:rgba(255,255,255,.22); color:#fff; }

/* category blocks */
section.cat-block { padding:34px 0 26px; border-top:0; background:transparent !important; scroll-margin-top:130px; }
section.cat-block + section.cat-block { border-top:0; }
.cat-block .cat-head { margin-bottom:14px; align-items:center; }
.cat-block .cat-head .eyebrow { display:none; }
.cat-block .cat-head h2 { font-size:1.5rem; }
.cat-block .cat-head .lead { font-size:.95rem; margin-top:6px; }
.niche-chips { margin:0 0 20px; gap:8px; }
.niche-chips a { border-radius:999px; font-family:var(--ff); font-size:.8rem; letter-spacing:0; text-transform:none; font-weight:500; padding:6px 13px; background:var(--surface); }
.niche-chips a:hover { border-color:var(--cy); color:var(--cy-dim); }
.cat-block .hub-grid { grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:18px; }

/* "All" view: every category becomes one compact, swipeable row */
body.view-all section.cat-block { padding:22px 0 8px; }
body.view-all .cat-block .cat-head { margin-bottom:10px; }
body.view-all .cat-block .cat-head h2 { font-size:1.25rem; }
body.view-all .cat-block .cat-head .lead, body.view-all .niche-chips { display:none; }
body.view-all .cat-block .hub-grid { display:flex; gap:16px; overflow-x:auto; padding:4px 2px 14px; scroll-snap-type:x proximity; scrollbar-width:thin; }
body.view-all .cat-block .hub-card { flex:0 0 280px; scroll-snap-align:start; }
section.cat-block[hidden] { display:none !important; }

/* how-we-review + CTA + footer */
#how { background:var(--bg-2); border-top:1px solid var(--line); padding:56px 0; }
.how-grid { gap:16px; }
.panel.how h3 { font-size:1.02rem; }
.cta-band { background:linear-gradient(135deg,var(--acsoft),var(--acsoft)); border-color:var(--line-2); }
.cta-band::before { display:none; }
footer.site-foot { background:var(--bg-2); }
.site-foot h4 { font-size:.78rem; letter-spacing:.08em; }
.totop { border-radius:50%; }
@media (max-width:700px) {
  .hero { padding:30px 0 24px; }
  .cat-tabs { top:64px; }
  body.view-all .cat-block .hub-card { flex-basis:250px; }
}

/* ---- home v2: sections, category tiles, trust bar, compact footer ---- */
.cat-tabs { display:none; }
.trust { padding:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--surface); }
.trust-in { display:grid; grid-template-columns:repeat(4,1fr); }
.trust-in div { display:flex; flex-direction:column; align-items:center; gap:2px; padding:18px 10px; border-left:1px solid var(--line); text-align:center; }
.trust-in div:first-child { border-left:0; }
.trust-in b { font-size:1.5rem; font-weight:800; color:var(--cy-dim); letter-spacing:-.02em; }
.trust-in span { font-size:.8rem; color:var(--fg-3); font-weight:500; }
section.home-sec { padding:52px 0; border-top:0; }
section.home-sec.alt { background:var(--bg-2); }
section.home-sec + section.home-sec { border-top:0; }
.sec-top { display:flex; align-items:flex-end; justify-content:space-between; gap:16px 24px; flex-wrap:wrap; margin-bottom:26px; }
.sec-top h2 { font-size:clamp(1.4rem,2.6vw,1.9rem); }
.sec-top p { margin:6px 0 0; font-size:.95rem; max-width:62ch; }
.sec-top .more { font-weight:600; font-size:.92rem; white-space:nowrap; }
.cat-tiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:12px; }
.cat-tile { display:flex; flex-direction:column; gap:3px; padding:15px 18px; background:var(--surface); border:1px solid var(--line); border-radius:14px; color:var(--fg); transition:all .15s; }
.cat-tile:hover { text-decoration:none; border-color:var(--cy); box-shadow:0 8px 22px rgba(15,23,42,.08); transform:translateY(-2px); }
.t-name { font-weight:700; font-size:.95rem; line-height:1.25; }
.t-n { font-size:.78rem; color:var(--fg-3); }
section.home-sec .hub-grid { grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); }
#how { padding:52px 0; }
#how .sec-head { margin-bottom:26px; }
section:has(> .wrap > .cta-band) { padding:44px 0 56px; }

/* compact footer */
.foot-grid { grid-template-columns:1.8fr 1fr 1fr 1fr; gap:32px; padding-block:40px 24px; }
.foot-brand p { max-width:40ch; }
.site-foot ul { display:block; }

/* blog */
.blog-hero { padding:56px 0 40px; }
.blog-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:22px; }
.blog-grid:empty, .blog-grid:not(:has(*)) { display:none; }
.post-card { display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:16px; overflow:hidden; color:var(--fg); transition:all .15s; }
.post-card:hover { text-decoration:none; border-color:var(--cy); box-shadow:0 14px 34px rgba(15,23,42,.10); }
.post-img { aspect-ratio:16/10; background:var(--surface-2); }
.post-img img { width:100%; height:100%; object-fit:cover; }
.post-body { padding:18px 20px 20px; display:flex; flex-direction:column; gap:8px; }
.post-top { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:.78rem; color:var(--fg-3); }
.post-card h2 { font-size:1.15rem; }
.post-card p { margin:0; font-size:.92rem; }
.post-more { font-weight:600; font-size:.9rem; color:var(--cy-dim); margin-top:4px; }
.blog-empty { text-align:center; max-width:560px; margin:0 auto; padding:30px 0; }
.blog-empty p { margin:10px 0 20px; }
.blog-grid:has(*) ~ .blog-empty { display:none; }
@media (max-width:760px) {
  .trust-in { grid-template-columns:repeat(2,1fr); }
  .trust-in div:nth-child(3) { border-left:0; }
  .trust-in div:nth-child(n+3) { border-top:1px solid var(--line); }
  .foot-grid { grid-template-columns:1fr 1fr; }
  section.home-sec { padding:38px 0; }
  .cat-tiles { grid-template-columns:repeat(2,1fr); }
}

/* ===== review/shared components ===== */
.hero h1 .accent,.hub-card h2 .accent{background:none;-webkit-background-clip:initial;background-clip:initial;color:var(--cy)}
.hero h1 .accent{color:var(--cy)}
.nav-cta,.btn.nav-cta{clip-path:none!important;border-radius:999px;background:var(--cta)!important;color:var(--ctaink)!important;font-family:var(--ff);text-transform:none;letter-spacing:0;font-weight:700;font-size:.85rem}
.nav-score{border-radius:999px;background:var(--acsoft);border-color:transparent}
.nav-score b,.nav-score span{font-family:var(--ff)}

/* ===== surfaces that were hard-coded white in the original sheet (needed for dark mode) ===== */
.nav,.nav.stuck{background:color-mix(in srgb,var(--bg) 94%,transparent)}
.rail{background:color-mix(in srgb,var(--bg) 94%,transparent)}
.dock{background:color-mix(in srgb,var(--bg) 97%,transparent);box-shadow:0 -8px 26px rgba(15,23,41,.10)}
.dock,.dock *{color:var(--fg)}
.dock .score,.dock .num,.dock b{color:var(--cy)}
.ring::before{background:var(--surface)}
.panel,.buy,.panel.ticked{background:var(--surface)}
.meter .bar{background:var(--surface-2)}
.hub-img{background:var(--surface-2)}
.hub-img.ph{background:linear-gradient(135deg,var(--acsoft),var(--surface-2))}
.btn-primary,.nav-cta{background:var(--cta);color:var(--ctaink)}
.btn-primary:hover{background:var(--cy-dim)}
.audience>div{background:var(--surface)}
.totop{background:var(--surface);color:var(--fg)}
.nav-dd-t,.nav-menu{background:var(--surface);color:var(--fg)}
.nav-menu a{color:var(--fg)}
@media print{.nav,.dock,.rail,.totop{display:none!important}}
@media (max-width:560px){
  .dock .btn{white-space:nowrap;padding:10px 14px;font-size:.8rem}
  .dock .btn-ghost{display:none}
}
img{height:auto}

/* ===== small-screen fixes (found by the 360px audit) ===== */
.eyebrow{flex-wrap:wrap;row-gap:6px}
.eyebrow .lbl{min-width:0;overflow-wrap:anywhere}
.hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
@media (max-width:960px){.hero-grid{grid-template-columns:minmax(0,1fr)}}
.hero-grid>*{min-width:0}
.spec .v,.spec .k{min-width:0;white-space:normal;overflow-wrap:anywhere}
.chip.lime,.chip{font-size:max(.72rem,11.5px)}
@media (max-width:480px){
  .nav-in{gap:10px}
  .nav-cta{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:9px 14px}
  .nav-score{display:none}
}
.hero-price{flex-wrap:wrap}
.hero-price .cap{white-space:normal;overflow-wrap:anywhere;min-width:0}
.rail-in a{background:var(--surface);color:var(--fg-2);border-color:var(--line-2);font-family:var(--ff);text-transform:none;letter-spacing:0;clip-path:none;border-radius:999px}
.rail-in a.active{background:var(--cta);color:var(--ctaink);border-color:var(--cta)}
.pills a.on,.hub-cats a.on,.niche-chips a.on{background:var(--cta);border-color:var(--cta);color:var(--ctaink)}
.pills a.on small,.hub-cats a.on small,.niche-chips a.on small{color:var(--ctaink);opacity:.85}