/* Layout & component styles (ported from docs/设计 v2). Tokens live in tokens.css. */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}
body {
  margin: 0; color: var(--color-ink); background: var(--color-bg);
  font-family: var(--fnt-body); font-size: var(--fs-700); line-height: 1.65; -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

h1, h2, h3, .brand, .footer-brand, .primary-nav a, .mobile-menu a, .menu-btn, .button, .eyebrow,
.category-title, .card-meta, .text-link, .card-link, .brand-wall span,
.score-badge, .site-footer h2, .method-list span, .ph-brand, .ph-kicker { font-family: var(--fnt-ui); }

h1, h2, h3 { margin: 0; color: var(--color-ink); }
h1 { max-width: 16ch; font-size: var(--fs-h1); line-height: 1.08; font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: var(--fs-h2); line-height: 1.18; font-weight: 600; }
h3 { font-size: var(--fs-900); line-height: 1.3; font-weight: 600; }
p { overflow-wrap: break-word; }

.eyebrow { margin: 0 0 12px; color: var(--color-accent); font-size: var(--fs-200); font-weight: 600; line-height: 1.3; letter-spacing: 0.06em; text-transform: uppercase; }
.muted { color: var(--color-muted); }
.tnum { font-variant-numeric: tabular-nums; }
.container { width: min(100% - 40px, var(--container-max)); margin-inline: auto; }
.skip-link { position: absolute; left: 16px; top: 12px; z-index: 60; transform: translateY(-180%); background: var(--color-ink); color: var(--color-ink-inverse); padding: 8px 12px; border-radius: var(--radius-md); text-decoration: none; }
.skip-link:focus { transform: translateY(0); }
.ico { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* header */
.site-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--color-line); background: rgba(255,255,255,0.92); backdrop-filter: saturate(1.1) blur(8px); box-shadow: var(--shadow-xs); }
.header-inner { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand, .footer-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--color-ink); font-weight: 700; text-decoration: none; letter-spacing: -0.01em; }
.brand b { color: var(--color-accent); }
.logo-mark { display: inline-grid; flex: 0 0 auto; width: 36px; height: 36px; }
.logo-mark svg { display: block; width: 100%; height: 100%; }
.logo-tile { fill: var(--color-accent); }
.logo-letter { fill: var(--color-ink-inverse); }
.logo-letter-s { fill: none; stroke: var(--color-ink-inverse); stroke-width: 5.2; stroke-linecap: round; }
/* Dark surfaces (footer): same evergreen tile reads cleanly; a hairline ring lifts it off the charcoal. */
.logo-mark-dark .logo-tile { stroke: rgba(251, 251, 249, 0.14); stroke-width: 3; }
.primary-nav { display: none; align-items: center; gap: 24px; font-size: var(--fs-500); font-weight: 600; color: var(--color-ink); }
.primary-nav a { text-decoration: none; position: relative; }
.primary-nav a:hover { color: var(--color-accent); }
/* active nav state — current section gets accent color + a 2px underline indicator */
.primary-nav a.is-active, .nav-dd-trigger.is-active { color: var(--color-accent); }
.primary-nav a.is-active::after,
.nav-dd-trigger.is-active::before { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 2px; border-radius: 2px; background: var(--color-accent); }
.nav-dd-menu a.is-active { background: var(--color-accent-soft); color: var(--color-accent-strong); }
.mobile-menu a.is-active { color: var(--color-accent); background: var(--color-accent-soft); box-shadow: inset 3px 0 0 var(--color-accent); }
.nav-divider { width: 1px; height: 22px; background: var(--color-line); }
.menu-btn { display: inline-flex; align-items: center; gap: 8px; background: none; border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: 9px 13px; font-size: var(--fs-500); font-weight: 600; color: var(--color-ink); cursor: pointer; }
.mobile-menu { display: none; border-top: 1px solid var(--color-line); background: #fff; }
.mobile-menu.open { display: block; }
.mobile-menu a { display: block; padding: 13px 20px; color: var(--color-ink); text-decoration: none; border-bottom: 1px solid var(--color-line); font-weight: 600; }
@media (min-width: 900px) { .primary-nav { display: flex; } .menu-btn { display: none; } .mobile-menu { display: none !important; } }

/* nav dropdown (Categories) */
.nav-dd { position: relative; display: inline-flex; align-items: center; }
.nav-dd-trigger { position: relative; display: inline-flex; align-items: center; gap: 6px; font-family: var(--fnt-ui); font-size: var(--fs-500); font-weight: 600; color: var(--color-ink); background: none; border: 0; padding: 0; cursor: pointer; }
.nav-dd-trigger::after { content: "\25BE"; color: var(--color-muted); }
.nav-dd-ico { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nav-dd:hover .nav-dd-trigger, .nav-dd:focus-within .nav-dd-trigger { color: var(--color-accent); }
.nav-dd::after { content: ""; position: absolute; top: 100%; left: -8px; right: -8px; height: 12px; }
.nav-dd-menu { position: absolute; top: 100%; left: 0; margin-top: 8px; display: none; z-index: 60; min-width: 280px; background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 8px; }
.nav-dd:hover .nav-dd-menu, .nav-dd:focus-within .nav-dd-menu { display: block; }
.nav-dd-menu a { display: block; padding: 8px 12px; border-radius: var(--radius-sm); font-family: var(--fnt-ui); font-size: var(--fs-400); font-weight: 500; color: var(--color-ink); text-decoration: none; }
.nav-dd-menu a:hover { background: var(--color-accent-soft); color: var(--color-accent-strong); }
.mm-label { display: block; padding: 14px 20px 4px; font-family: var(--fnt-ui); font-size: var(--fs-200); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-muted); }
.mobile-menu a.mm-sub { padding-left: 32px; font-weight: 500; }

/* buttons */
.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; gap: 8px; border-radius: var(--radius-md); padding: 11px 18px; border: 1.5px solid transparent; font-size: var(--fs-500); font-weight: 600; text-decoration: none; cursor: pointer; transition: color 0.15s, background 0.15s, border-color 0.15s; }
.button-primary { background: var(--color-accent); color: var(--color-ink-inverse); border-color: var(--color-accent); }
.button-primary:hover { background: var(--color-accent-strong); border-color: var(--color-accent-strong); }
.button-secondary { background: var(--color-bg); color: var(--color-accent); border-color: var(--color-line); }
.button-secondary:hover { border-color: var(--color-accent); background: var(--color-accent-soft); }
.button-small { min-height: 44px; padding: 10px 14px; font-size: var(--fs-300); }

/* hero */
.hero-section { position: relative; overflow: hidden; padding: 56px 0; background: linear-gradient(100deg, rgba(246,245,241,0.96) 0%, rgba(246,245,241,0.7) 55%, rgba(231,240,236,0.7) 100%), var(--color-soft); }
.hero-section::after { content: ""; position: absolute; inset: auto 0 0; height: 1px; background: var(--color-line); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 0.84fr); gap: var(--space-10); align-items: center; }
.hero-copy { max-width: 680px; }
.hero-lede { max-width: 60ch; margin: 20px 0 0; color: var(--color-muted); font-size: var(--fs-1000); line-height: 1.55; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero-note { max-width: 54ch; margin: 18px 0 0; color: var(--color-muted); font-size: var(--fs-400); }
.hero-visual { min-height: 360px; }
/* hero feature: "this week's shortlist" */
.hero-feature { border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: #fff; overflow: hidden; box-shadow: var(--shadow-sm); }
.hero-feature-head { padding: 14px 18px; border-bottom: 1px solid var(--color-line); background: var(--color-soft); }
.hero-feature-head .eyebrow { margin: 0; }
.hero-pick { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--color-line); text-decoration: none; color: inherit; transition: background 0.15s; }
.hero-pick:last-child { border-bottom: 0; }
.hero-pick:hover { background: var(--color-accent-soft); }
.hero-pick-thumb { display: grid; place-items: center; width: 72px; height: 54px; background: var(--color-soft); border-radius: var(--radius-sm); overflow: hidden; }
.hero-pick-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.hero-pick-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hero-pick-name { font-family: var(--fnt-ui); font-weight: 600; font-size: var(--fs-400); line-height: 1.25; color: var(--color-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hero-pick-meta { font-size: var(--fs-200); color: var(--color-muted); }
/* jump nav (all-picks) */
.jump-nav { display: flex; flex-wrap: wrap; gap: 8px; }
.jump-nav a { display: inline-flex; align-items: center; gap: 6px; font-family: var(--fnt-ui); font-size: var(--fs-400); font-weight: 600; color: var(--color-accent-strong); background: var(--color-accent-soft); border-radius: var(--radius-sm); padding: 6px 12px; text-decoration: none; }
.jump-nav a:hover { background: var(--color-accent); color: #fff; }
.jump-count { font-variant-numeric: tabular-nums; font-weight: 500; opacity: 0.75; }

/* sections */
.section { padding: var(--space-12) 0; }
.section-soft { background: var(--color-soft); }
.section-heading { max-width: 62ch; margin-bottom: var(--space-7); }
.section-heading p:not(.eyebrow) { margin: 12px 0 0; color: var(--color-muted); }
.split-heading { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.text-link, .card-link { color: var(--color-accent); font-size: var(--fs-400); font-weight: 600; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.text-link:hover, .card-link:hover { color: var(--color-accent-strong); }

/* category grid */
.category-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.category-card { display: grid; grid-template-rows: auto auto 1fr; min-height: 210px; padding: var(--space-5); border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: var(--color-bg); text-decoration: none; transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s; }
.category-card:hover, .guide-card:hover, .product-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); border-color: rgba(31,95,75,0.34); }
.category-icon { display: grid; place-items: center; width: 50px; height: 50px; margin-bottom: 20px; border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: var(--color-accent-soft); color: var(--color-accent-strong); }
.category-icon .cat-svg { width: 28px; height: 28px; }
.guide-cover img { width: 100%; height: 100%; object-fit: contain; }
.guide-cover { display: grid; place-items: center; }
.guide-cover img { padding: 14px; }
/* (category icons render as SVG via Icon.astro / .cat-svg — the old CSS pseudo-element icon set was removed as dead code) */
.category-title { color: var(--color-ink); font-size: var(--fs-800); font-weight: 600; line-height: 1.25; }
.category-text { margin-top: 10px; color: var(--color-muted); font-size: var(--fs-500); line-height: 1.5; }

/* guides */
.guide-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.guide-card, .product-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: var(--color-bg); transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s; }
.guide-cover { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--color-soft); }
.guide-cover::before, .guide-cover::after { content: ""; position: absolute; display: block; }
.guide-cover-pool { background: linear-gradient(180deg, #f8faf7 0 45%, #a9d2cc 45% 100%); }
.guide-cover-pool::before { left: 12%; right: 12%; bottom: 13%; height: 34%; border: 1px solid rgba(31,95,75,0.28); border-radius: var(--radius-lg); background: repeating-linear-gradient(135deg, rgba(255,255,255,0.58) 0 12px, transparent 12px 25px); }
.guide-cover-pool::after { right: 22%; bottom: 24%; width: 66px; height: 38px; border: 3px solid var(--color-accent); border-radius: var(--radius-lg); background: #fff; }
.guide-cover-power { background: linear-gradient(180deg, #fbfaf5 0 50%, #ece8dc 50% 100%); }
.guide-cover-power::before { left: 16%; bottom: 17%; width: 84px; height: 84px; border: 3px solid var(--color-ink); border-radius: var(--radius-lg); background: #fff; }
.guide-cover-power::after { right: 12%; top: 18%; width: 100px; height: 58px; border: 2px solid var(--color-accent); background: repeating-linear-gradient(90deg, #eff6f3 0 22px, #d6e8e1 22px 26px); transform: rotate(-6deg); }
.guide-cover-lawn { background: linear-gradient(180deg, #fbfaf6 0 40%, #dfeade 40% 100%); }
.guide-cover-lawn::before { left: 10%; right: 10%; bottom: 14%; height: 36%; border-radius: var(--radius-lg); background: repeating-linear-gradient(90deg, rgba(31,95,75,0.18) 0 8px, transparent 8px 24px), #bfd8bc; }
.guide-cover-lawn::after { left: 38%; bottom: 30%; width: 84px; height: 46px; border: 3px solid var(--color-accent); border-radius: var(--radius-lg); background: #fff; }
.guide-cover-floor { background: linear-gradient(180deg, #f8f8f5 0 46%, #e7f0ec 46% 100%); }
.guide-cover-floor::before { left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; border: 3px solid var(--color-accent); border-radius: 50%; background: #fff; }
.guide-cover-floor::after { left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--color-warm); }
.guide-cover-generic { background: linear-gradient(135deg, var(--color-accent-soft), #dfeae4); }
.guide-body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); flex: 1; }
.card-meta { margin: 0; color: var(--color-muted); font-size: var(--fs-300); font-weight: 600; }
.guide-body h3 { font-size: var(--fs-700); }
.guide-body p:not(.card-meta), .product-body p:not(.card-meta) { color: var(--color-muted); font-size: var(--fs-500); margin: 0; }
.guide-body .card-link { margin-top: auto; align-self: flex-start; }

/* products */
.product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.product-art { position: relative; aspect-ratio: 4 / 3; display: grid; place-items: center; gap: 4px; text-align: center; background: var(--color-soft); border-bottom: 1px solid var(--color-line); padding: 12px; }
.product-art img { width: 100%; height: 100%; object-fit: contain; }
.product-art .ph-icon { margin-bottom: 10px; }
.product-art .ph-brand { font-weight: 600; font-size: var(--fs-600); color: var(--color-muted); opacity: 1; }
.product-art .ph-kicker { font-size: var(--fs-100); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-muted); }
.product-body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); flex: 1; }
.product-body h3 { font-size: var(--fs-800); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
.card-verdict { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; min-height: 2.8em; }
.product-foot { margin-top: auto; display: flex; flex-direction: column; gap: 12px; padding-top: 16px; }
.score-row { display: flex; align-items: center; gap: 10px; color: var(--color-muted); font-size: var(--fs-300); font-weight: 600; }
.score-badge { display: grid; place-items: center; width: 46px; height: 34px; border: 1px solid var(--color-accent); border-radius: var(--radius-md); background: var(--color-accent-soft); color: var(--color-accent-strong); font-weight: 700; font-variant-numeric: tabular-nums; }
.score-label { color: inherit; text-decoration: none; }
.score-label:hover { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; }
.score-scale { font-weight: 500; font-size: var(--fs-100); letter-spacing: 0.03em; text-transform: uppercase; color: var(--color-muted); opacity: 0.85; }
.product-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid var(--color-line); }
.paid-link { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 5px; color: var(--color-muted); font-size: var(--fs-300); line-height: 1.35; }
/* plain affiliate text links keep the accent-link style; button CTAs (.button) keep their own color */
.paid-link a:not(.button) { display: inline-flex; align-items: center; gap: 5px; color: var(--color-accent); font-weight: 600; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* method */
.section-method { border-top: 1px solid var(--color-line); background: linear-gradient(180deg, #fff 0%, #f8f7f3 100%); }
.method-grid { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: var(--space-10); align-items: start; }
.method-grid > div:first-child p:not(.eyebrow) { max-width: 62ch; color: var(--color-muted); margin: 0 0 24px; }
.method-list { display: grid; gap: 12px; }
.method-list article { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--space-4); align-items: start; padding: var(--space-5); border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: var(--color-bg); }
.method-list span { display: grid; grid-row: 1 / span 2; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--color-accent-soft); color: var(--color-accent-strong); font-size: var(--fs-300); font-weight: 700; font-variant-numeric: tabular-nums; }
.method-list h3, .method-list p { grid-column: 2; }
.method-list p { margin: 6px 0 0; color: var(--color-muted); font-size: var(--fs-500); }

/* brands */
.brand-wall { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.brand-wall a, .brand-wall span { display: grid; min-height: 54px; place-items: center; padding: 10px; border: 1px solid var(--color-line); border-radius: var(--radius-md); color: var(--color-muted); background: var(--color-bg); font-family: var(--fnt-ui); font-size: var(--fs-400); font-weight: 600; text-align: center; text-decoration: none; }
.brand-wall a { transition: color 0.15s, border-color 0.15s; }
.brand-wall a:hover { color: var(--color-ink); border-color: rgba(31,95,75,0.34); }

/* for brands */
.forbrands-panel { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 40px; align-items: center; padding: 36px; border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: var(--color-bg); }
.forbrands-panel p { color: var(--color-muted); margin: 12px 0 0; }
.forbrands-cta { display: flex; justify-content: flex-end; }
@media (max-width: 900px) { .forbrands-panel { grid-template-columns: 1fr; } .forbrands-cta { justify-content: flex-start; } }

/* disclosure */
.disclosure-bar { padding: var(--space-6) 0; border-top: 1px solid var(--color-line); background: var(--color-soft); color: var(--color-muted); font-size: var(--fs-400); }
.disclosure-inner { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.disclosure-inner strong { color: var(--color-ink); }
.disclosure-inner a { color: var(--color-accent); font-weight: 600; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* footer */
.site-footer { padding: var(--space-11) 0 var(--space-7); background: var(--color-footer-bg); color: var(--color-footer-text); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: var(--space-8); }
.footer-brand { color: var(--color-ink-inverse); font-size: var(--fs-800); }
.footer-brand b { color: var(--color-footer-accent); }
.site-footer p { max-width: 36ch; color: var(--color-footer-text); font-size: var(--fs-400); }
.site-footer h2 { margin: 0 0 14px; color: var(--color-footer-heading); font-size: var(--fs-300); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.site-footer nav { display: grid; align-content: start; gap: 10px; }
.site-footer a { color: var(--color-footer-link); font-size: var(--fs-400); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.footer-bottom { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--color-footer-line); }
.footer-bottom p { color: var(--color-footer-text); font-size: var(--fs-300); margin: 0; max-width: none; }

/* prose (guides/trust pages) */
.prose { max-width: var(--container-prose); margin-inline: auto; }
.prose p, .prose li { font-size: var(--fs-700); line-height: 1.7; color: var(--color-ink); }
.prose h2 { margin: 40px 0 12px; }
.prose h3 { margin: 28px 0 8px; }
.prose details { border-bottom: 1px solid var(--color-line); }
.prose details summary { padding: 14px 0; cursor: pointer; font-weight: 600; font-family: var(--fnt-ui); list-style-position: inside; }
.prose details[open] summary { color: var(--color-accent); }
.prose details p { margin: 0 0 14px; }

/* product detail hero */
.product-hero { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 40px; align-items: start; }
.product-hero .product-art-framed { border: 1px solid var(--color-line); border-radius: var(--radius-lg); }
.product-title { font-size: var(--fs-display); line-height: 1.12; letter-spacing: -0.01em; }
.breadcrumb { font-size: var(--fs-300); color: var(--color-muted); padding: 16px 0 0; }
.breadcrumb a { color: var(--color-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--color-accent); }

/* guide: two-column lead + in-guide TOC */
.guide-lead { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(220px, 0.7fr); gap: 48px; align-items: start; }
.guide-lead-main h1 { margin-top: 8px; }
.guide-intro-text { margin: 18px 0 0; font-size: var(--fs-900); line-height: 1.6; color: var(--color-ink); max-width: 60ch; }
.guide-toc { position: sticky; top: 84px; border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: var(--color-bg); padding: 18px 20px; box-shadow: var(--shadow-xs); }
.guide-toc .eyebrow { margin: 0 0 10px; }
.guide-toc nav { display: grid; gap: 9px; }
.guide-toc a { font-family: var(--fnt-ui); font-size: var(--fs-400); font-weight: 600; color: var(--color-ink); text-decoration: none; }
.guide-toc a:hover { color: var(--color-accent); }

/* guide: differentiated detail blocks */
.guide-detail { display: grid; gap: 44px; }
.guide-block h2 { margin-bottom: 16px; }
.guide-block-text { max-width: 70ch; font-size: var(--fs-700); line-height: 1.7; color: var(--color-ink); margin: 0 0 12px; }
.guide-checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; max-width: 70ch; }
.guide-checklist li { position: relative; padding-left: 30px; line-height: 1.5; font-size: var(--fs-700); }
.guide-checklist li::before { content: ""; position: absolute; left: 6px; top: 3px; width: 7px; height: 12px; border: solid var(--color-accent); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
/* guide: "also considered" — low-prominence secondary list (pool items beyond the top picks) */
.also-considered { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--color-line); }
.also-head h3 { font-size: var(--fs-900); }
.also-head .muted { margin: 8px 0 0; max-width: 72ch; font-size: var(--fs-400); }
.also-list { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 1px; background: var(--color-line); border: 1px solid var(--color-line); border-radius: var(--radius-lg); overflow: hidden; }
.also-item { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 16px; background: var(--color-bg); }
.also-name { font-family: var(--fnt-ui); font-size: var(--fs-500); line-height: 1.35; }
.also-brand { color: var(--color-muted); font-weight: 500; margin-left: 6px; }
.also-item .score-badge { width: 42px; height: 30px; font-size: var(--fs-400); flex: 0 0 auto; }
.compare-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.compare-card { border: 1px solid var(--color-line); border-radius: var(--radius-lg); padding: 16px 18px; background: var(--color-bg); }
.compare-card strong { display: block; font-family: var(--fnt-ui); font-size: var(--fs-500); font-weight: 600; }
.compare-card span { display: block; margin-top: 6px; color: var(--color-muted); font-size: var(--fs-400); line-height: 1.5; }
@media (max-width: 900px) { .guide-lead { grid-template-columns: 1fr; gap: 24px; } .guide-toc { position: static; } }
@media (max-width: 760px) { .compare-cards { grid-template-columns: 1fr; } }

/* category: collapsible "more we track" compact list (density) */
.more-track { margin-top: 24px; border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: var(--color-bg); }
.more-track > summary { padding: 14px 18px; cursor: pointer; font-family: var(--fnt-ui); font-weight: 600; color: var(--color-ink); }
.more-track[open] > summary { border-bottom: 1px solid var(--color-line); color: var(--color-accent); }
.track-list { list-style: none; margin: 0; padding: 0; }
.track-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 16px; align-items: center; padding: 11px 18px; border-bottom: 1px solid var(--color-line); }
.track-list li:last-child { border-bottom: 0; }
.track-name { font-size: var(--fs-400); line-height: 1.4; min-width: 0; }
.track-name strong { font-family: var(--fnt-ui); font-weight: 600; }
@media (max-width: 640px) {
  .track-list li { grid-template-columns: 1fr auto; row-gap: 8px; }
  .track-list .paid-link { grid-column: 1 / -1; }
}

/* comparison table */
.cmp-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--color-line); border-radius: var(--radius-lg); }
table.cmp { width: 100%; min-width: 560px; border-collapse: collapse; font-size: var(--fs-400); }
table.cmp th, table.cmp td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--color-line); font-variant-numeric: tabular-nums; }
table.cmp thead th { background: var(--color-soft); font-family: var(--fnt-ui); font-weight: 600; }

/* responsive */
@media (max-width: 1080px) {
  .hero-grid, .method-grid, .product-hero { grid-template-columns: 1fr; }
  .category-grid, .guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brand-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .brand-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  body { font-size: var(--fs-600); }
  .hero-lede { font-size: var(--fs-800); }
  .hero-visual { min-height: 0; margin-top: 8px; }
  .hero-actions, .product-actions { flex-direction: column; align-items: stretch; }
  .button { width: 100%; }
  .category-grid, .guide-grid, .product-grid, .footer-grid { grid-template-columns: 1fr; }
  .brand-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split-heading { flex-direction: column; align-items: flex-start; }
  .section { padding: var(--space-10) 0; }
  .method-list article { grid-template-columns: 1fr; }
  .method-list span, .method-list h3, .method-list p { grid-column: 1; grid-row: auto; }
}