@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap");
:root {
--cream:        #FBF8F3;
--cream-2:      #F4EFE6;
--cream-3:      #EDE6D8;
--ink:          #1A1418;
--ink-2:        #4A4248;
--ink-3:        #7A7178;
--ink-4:        #A89FA4;
--coral:        #E0526A;
--coral-dark:   #C53E56;
--coral-soft:   #F4DAD8;
--forest:       #2D4F3C;
--forest-soft:  #DCE6DF;
--gray:         #E5DED5;
--gray-2:       #D2C9BD;
--gold:         #B8862F;
--plum:         #6B3F5C;
--accent:       var(--coral);
--accent-dark:  var(--coral-dark);
--accent-soft:  var(--coral-soft);
--r-sm: 6px;
--r-md: 12px;
--r-lg: 20px;
--r-xl: 32px;
--font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
--shadow-sm: 0 1px 2px rgba(26,20,24,.04);
--shadow-md: 0 6px 24px -8px rgba(26,20,24,.12);
--shadow-lg: 0 24px 48px -16px rgba(26,20,24,.18);
--maxw: 1240px;
--maxw-narrow: 720px;
--row-pad-y: 28px;
--section-pad-y: 80px;
}
[data-density="compact"] {
--row-pad-y: 18px;
--section-pad-y: 48px;
}
[data-theme="dark"] {
--cream:        #15110F;
--cream-2:      #1F1A18;
--cream-3:      #2A2421;
--ink:          #F4EFE6;
--ink-2:        #C9C0B8;
--ink-3:        #948B82;
--ink-4:        #6B6259;
--gray:         #2E2723;
--gray-2:       #3F3530;
--coral-soft:   #3A1F23;
--forest-soft:  #1F2D24;
}
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
font-family: var(--font-body);
font-size: 16px;
line-height: 1.6;
color: var(--ink);
background: var(--cream);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
transition: background .2s, color .2s;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; color: inherit; }
a { color: inherit; text-decoration: none; transition: color .15s; cursor: pointer; }
a:hover { color: var(--accent); }
h1, h2, h3, h4, h5 {
font-family: var(--font-display);
font-weight: 600;
line-height: 1.05;
letter-spacing: -0.02em;
color: var(--ink);
text-wrap: balance;
}
h1 { font-size: clamp(2.5rem, 5vw + 1rem, 5.5rem); }
h2 { font-size: clamp(1.75rem, 2.5vw + 1rem, 2.75rem); }
h3 { font-size: clamp(1.25rem, 1vw + 1rem, 1.5rem); }
h4 { font-size: 1rem; }
p { color: var(--ink-2); text-wrap: pretty; }
.serif-ital { font-family: var(--font-display);  color: var(--accent); }
.eyebrow {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ink-3);
display: inline-flex;
align-items: center;
gap: 8px;
}
.eyebrow::before {
content: "";
width: 6px; height: 6px;
border-radius: 50%;
background: var(--accent);
flex-shrink: 0;
}
.eyebrow--mute::before { background: var(--ink-3); }
.eyebrow--forest::before { background: var(--forest); }
.mono { font-family: var(--font-mono); }
.muted { color: var(--ink-3); }
.container {
width: 100%;
max-width: var(--maxw);
margin: 0 auto;
padding: 0 28px;
}
.container--narrow { max-width: var(--maxw-narrow); }
.site-header {
position: sticky;
top: 0;
z-index: 50;
background: color-mix(in oklab, var(--cream) 88%, transparent);
backdrop-filter: saturate(180%) blur(14px);
-webkit-backdrop-filter: saturate(180%) blur(14px);
border-bottom: 1px solid var(--gray);
}
.site-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 64px;
gap: 24px;
}
.logo {
font-family: var(--font-display);
font-size: 22px;
font-weight: 600;
letter-spacing: -0.025em;
color: var(--ink);
display: inline-flex;
align-items: baseline;
gap: 1px;
}
.logo em {
color: var(--accent);
}
.logo .dot {
display: inline-block;
width: 6px; height: 6px;
border-radius: 50%;
background: var(--accent);
margin-left: 3px;
align-self: center;
}
.site-nav {
display: flex;
gap: 4px;
}
.site-nav__link {
padding: 8px 14px;
font-size: 14px;
font-weight: 600;
color: var(--ink-2);
border-radius: 999px;
transition: background .15s, color .15s;
}
.site-nav__link:hover { background: var(--cream-2); color: var(--ink); }
.site-nav__link.is-active { background: var(--ink); color: var(--cream); }
.site-nav__link.is-active:hover { background: var(--ink); color: var(--cream); }
.site-search {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 12px 7px 11px;
border: 1px solid var(--gray);
border-radius: 999px;
font-size: 13px;
color: var(--ink-3);
background: var(--cream);
transition: border-color .15s;
cursor: pointer;
white-space: nowrap;
flex-shrink: 0;
}
.site-search:hover { border-color: var(--ink-3); color: var(--ink); }
.site-search kbd {
font-family: var(--font-mono);
font-size: 11px;
background: var(--cream-2);
padding: 1px 6px;
border-radius: var(--r-sm);
border: 1px solid var(--gray);
color: var(--ink-3);
}
.marquee {
background: var(--ink);
color: var(--cream);
overflow: hidden;
border-bottom: 1px solid var(--ink);
}
.marquee__track {
display: inline-flex;
gap: 48px;
padding: 10px 0;
white-space: nowrap;
animation: marquee 90s linear infinite;
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.04em;
}
.marquee__track span { display: inline-flex; align-items: center; gap: 12px; }
.marquee__track strong { color: var(--accent); font-weight: 600; }
.marquee__track .sep { opacity: .25; }
@keyframes marquee {
from { transform: translateX(0); }
to   { transform: translateX(-50%); }
}
.hero {
padding: 72px 0 88px;
position: relative;
overflow: hidden;
}
.hero__grid {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 64px;
align-items: end;
}
.hero__title {
font-size: clamp(2.25rem, 4vw + 1rem, 3.75rem); font-weight: 700;
margin-top: 24px;
margin-bottom: 24px;
letter-spacing: -0.03em;
line-height: 1.05;
}
.hero__title em {
color: var(--accent);
}
.hero__lede {
font-size: 1.1875rem;
line-height: 1.5;
color: var(--ink-2);
max-width: 540px;
margin-bottom: 32px;
}
.hero__cta-row {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 40px;
}
.hero__stats {
display: grid;
grid-template-columns: repeat(4, auto);
gap: 32px;
padding-top: 28px;
border-top: 1px solid var(--gray);
}
.hero__stat-num {
font-family: var(--font-display);
font-size: 2rem;
font-weight: 600;
color: var(--ink);
line-height: 1;
}
.hero__stat-label {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-3);
margin-top: 6px;
}
.hero__panel {
background: var(--cream-2);
border-radius: var(--r-xl);
padding: 22px;
display: flex;
flex-direction: column;
gap: 8px;
}
.hero__panel-head {
display: flex;
justify-content: space-between;
align-items: center;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-3);
padding: 0 4px 12px;
border-bottom: 1px dashed var(--gray-2);
margin-bottom: 6px;
}
.hero__panel-row {
display: grid;
grid-template-columns: 28px 56px 1fr auto;
gap: 14px;
align-items: center;
padding: 12px 12px;
background: var(--cream);
border-radius: var(--r-md);
text-decoration: none;
transition: transform .15s;
}
.hero__panel-row:hover { transform: translateX(4px); color: var(--ink); }
.hero__panel-rank {
font-family: var(--font-mono);
font-size: 16px;
font-weight: 600;
color: var(--accent);
}
.hero__panel-row .product-thumb { width: 56px; height: 56px; }
.hero__panel-row__name {
font-size: 14px;
font-weight: 600;
color: var(--ink);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.hero__panel-row__brand {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-3);
margin-bottom: 2px;
}
.hero__panel-row__pct {
font-family: var(--font-mono);
font-size: 13px;
font-weight: 600;
color: var(--accent);
}
@media (max-width: 980px) {
.hero__grid { grid-template-columns: 1fr; gap: 48px; }
.hero__stats { grid-template-columns: repeat(2, auto); gap: 24px; }
}
.section { padding: var(--section-pad-y) 0; }
.section--alt { background: var(--cream-2); }
.section--ink { background: var(--ink); color: var(--cream); }
.section--ink h2, .section--ink h3 { color: var(--cream); }
.section--ink p { color: color-mix(in oklab, var(--cream) 80%, transparent); }
.section__head {
display: flex;
justify-content: space-between;
align-items: end;
gap: 24px;
margin-bottom: 40px;
}
.section__head h2 { max-width: 720px; }
.section__head-meta {
font-family: var(--font-mono);
font-size: 12px;
color: var(--ink-3);
white-space: nowrap;
}
.section__head-meta a {
text-decoration: underline;
text-underline-offset: 3px;
}
.section--ink .section__head-meta { color: var(--ink-4); }
.product-thumb {
aspect-ratio: 1;
background: var(--cream);
border-radius: var(--r-md);
display: flex;
align-items: center;
justify-content: center;
padding: 8px;
position: relative;
overflow: hidden;
}
.product-thumb__shape {
width: 70%;
height: 70%;
display: block;
}
.product-thumb--cream-2 { background: var(--cream-2); }
.cat-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 14px;
}
.cat-card {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 22px 20px 18px;
min-height: 200px;
background: var(--cream-2);
border-radius: var(--r-lg);
text-decoration: none;
color: var(--ink);
overflow: hidden;
transition: transform .25s ease, box-shadow .25s ease;
border: 1px solid transparent;
}
.cat-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-md);
color: var(--ink);
border-color: var(--gray);
}
.cat-card__num {
font-family: var(--font-mono);
font-size: 11px;
color: var(--ink-3);
letter-spacing: 0.12em;
}
.cat-card__title {
font-family: var(--font-display);
font-size: 1.5rem;
font-weight: 600;
line-height: 1;
letter-spacing: -0.02em;
margin-top: auto;
}
.cat-card__count {
font-family: var(--font-mono);
font-size: 11px;
color: var(--ink-3);
letter-spacing: 0.04em;
margin-top: 8px;
}
.cat-card__count strong { color: var(--ink); font-weight: 600; }
.cat-card__glyph {
position: absolute;
right: -10px; top: 14px;
width: 80px; height: 80px;
opacity: .25;
color: var(--accent);
}
.cat-card:hover .cat-card__glyph { opacity: .5; transform: scale(1.05) rotate(-4deg); transition: all .3s; }
.cat-card--moat {
grid-column: span 2;
background: var(--ink);
color: var(--cream);
border-color: var(--ink);
}
.cat-card--moat:hover { color: var(--cream); border-color: var(--ink); }
.cat-card--moat .cat-card__num,
.cat-card--moat .cat-card__count { color: color-mix(in oklab, var(--cream) 60%, transparent); }
.cat-card--moat .cat-card__count strong { color: var(--cream); }
.cat-card--moat .cat-card__title { color: var(--cream); }
.cat-card--moat .cat-card__title em { color: var(--accent);  }
.cat-card--moat .cat-card__glyph { opacity: .5; color: var(--accent); }
@media (max-width: 1100px) { .cat-grid { grid-template-columns: repeat(3, 1fr); } .cat-card--moat { grid-column: span 2; } }
@media (max-width: 600px) { .cat-grid { grid-template-columns: repeat(2, 1fr); } .cat-card--moat { grid-column: span 2; } }
.rail {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 14px;
}
.rail-card {
display: flex;
flex-direction: column;
background: var(--cream);
border: 1px solid var(--gray);
border-radius: var(--r-lg);
padding: 16px;
text-decoration: none;
color: var(--ink);
transition: border-color .15s, transform .25s;
}
.rail-card:hover {
border-color: var(--ink-3);
transform: translateY(-2px);
color: var(--ink);
}
.rail-card__rank {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
color: var(--accent);
letter-spacing: 0.14em;
}
.rail-card__rank-num { font-size: 14px; }
.rail-card__img-wrap {
aspect-ratio: 1;
background: var(--cream-2);
border-radius: var(--r-md);
margin: 12px 0 14px;
display: flex;
align-items: center;
justify-content: center;
padding: 18px;
}
.rail-card__brand {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-3);
margin-bottom: 4px;
}
.rail-card__name {
font-family: var(--font-display);
font-size: 1rem;
font-weight: 600;
line-height: 1.2;
letter-spacing: -0.01em;
margin-bottom: auto;
padding-bottom: 14px;
}
.rail-card__meta {
display: flex;
justify-content: space-between;
align-items: end;
padding-top: 12px;
border-top: 1px solid var(--gray);
font-family: var(--font-mono);
font-size: 11px;
}
.rail-card__pct { color: var(--accent); font-weight: 600; font-size: 13px; }
.rail-card__mentions { color: var(--ink-3); }
@media (max-width: 1100px) { .rail { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .rail { grid-template-columns: repeat(2, 1fr); } }
.score-ring {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
.score-ring__svg { position: relative; }
.score-ring__svg svg { transform: rotate(-90deg); }
.score-ring__svg circle.bg { stroke: var(--gray); }
.score-ring__svg circle.fg { stroke: var(--accent); transition: stroke-dashoffset .8s ease; }
.score-ring__pct {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-mono);
font-weight: 600;
color: var(--ink);
}
.score-ring__label {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-3);
text-align: center;
line-height: 1.2;
}
.score-bar {
display: flex;
flex-direction: column;
gap: 6px;
width: 100%;
}
.score-bar__num {
display: flex;
align-items: baseline;
gap: 6px;
font-family: var(--font-mono);
}
.score-bar__num .big {
font-size: 28px;
font-weight: 600;
color: var(--accent);
letter-spacing: -0.02em;
}
.score-bar__num .lbl {
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-3);
}
.score-bar__track {
display: flex;
height: 6px;
border-radius: 999px;
overflow: hidden;
background: var(--gray);
}
.score-bar__seg.pos { background: var(--accent); }
.score-bar__seg.neu { background: var(--gray-2); }
.score-bar__seg.neg { background: var(--ink-3); }
.score-bar__legend {
display: flex;
justify-content: space-between;
font-family: var(--font-mono);
font-size: 10px;
color: var(--ink-3);
letter-spacing: 0.06em;
}
.score-bar__legend .pos { color: var(--accent); font-weight: 600; }
.score-num {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
.score-num__big { font-family: var(--font-display); font-size: 3rem; font-weight: 700; letter-spacing: -0.04em; line-height: 0.95; color: var(--ink); }
.score-num__big em { color: var(--accent);  }
.score-num__sub {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-3);
}
.sub-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 10px;
font-family: var(--font-mono);
font-size: 11px;
background: var(--accent-soft);
color: var(--accent-dark);
border-radius: 999px;
white-space: nowrap;
}
[data-theme="dark"] .sub-chip { color: var(--accent); }
.sub-chip--ghost { background: transparent; color: var(--ink-2); border: 1px solid var(--gray); }
.sub-chip--forest { background: var(--forest-soft); color: var(--forest); }
[data-theme="dark"] .sub-chip--forest { color: #9DC9AB; }
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 20px;
font-size: 14px;
font-weight: 600;
border-radius: 999px;
transition: transform .15s, background .15s, box-shadow .15s, color .15s;
white-space: nowrap;
cursor: pointer;
}
.btn:active { transform: scale(0.98); }
.btn--primary { background: var(--ink); color: var(--cream); }
.btn--primary:hover { background: var(--accent); color: white; }
.btn--coral { background: var(--accent); color: white; }
.btn--coral:hover { background: var(--accent-dark); color: white; box-shadow: var(--shadow-md); }
.btn--ghost { background: transparent; border: 1px solid var(--gray); color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink); color: var(--ink); }
.btn--lg { padding: 15px 26px; font-size: 15px; }
.btn--inline { padding: 8px 14px; font-size: 13px; }
.page-header {
padding: 48px 0 40px;
border-bottom: 1px solid var(--gray);
}
.breadcrumb {
font-family: var(--font-mono);
font-size: 11px;
color: var(--ink-3);
margin-bottom: 24px;
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
letter-spacing: 0.06em;
}
.breadcrumb a { color: var(--ink-3); }
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb__sep { color: var(--gray-2); }
.page-header__title {
font-size: clamp(2rem, 3.5vw + 1rem, 3.75rem); font-weight: 700; margin-bottom: 16px;
letter-spacing: -0.025em;
}
.page-header__title em { color: var(--accent);  }
.page-header__lede {
font-size: 1.0625rem;
max-width: 680px;
color: var(--ink-2);
margin-bottom: 24px;
}
.page-header__sources {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
.pdp { padding: 40px 0 80px; }
.pdp__grid {
display: grid;
grid-template-columns: minmax(340px, 0.85fr) minmax(0, 1.25fr);
gap: 56px;
align-items: start;
}
.pdp__buy-col {
position: sticky;
top: 80px;
display: flex;
flex-direction: column;
gap: 20px;
}
.pdp__content-col {
min-width: 0;
}
.pdp__media {
background: var(--cream-2);
border-radius: var(--r-xl);
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 48px;
position: relative;
overflow: hidden;
}
.pdp__buy-card {
background: var(--cream);
border: 1px solid color-mix(in oklab, var(--ink) 14%, transparent);
border-radius: var(--r-lg);
padding: 22px 22px 24px;
display: flex;
flex-direction: column;
gap: 14px;
}
.pdp__buy-price {
display: flex;
align-items: baseline;
gap: 10px;
flex-wrap: wrap;
}
.pdp__buy-price-num {
font-family: var(--font-display);
font-size: 32px;
font-weight: 700;
color: var(--ink);
letter-spacing: -0.01em;
}
.pdp__buy-price-meta {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.06em;
color: var(--ink-3);
text-transform: uppercase;
}
.pdp__buy-disclosure {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.06em;
color: var(--ink-3);
text-transform: uppercase;
line-height: 1.5;
}
.pdp__buy-divider {
height: 1px;
background: color-mix(in oklab, var(--ink) 12%, transparent);
margin: 4px -22px;
}
.pdp__buy-score {
display: flex;
flex-direction: column;
gap: 8px;
}
.pdp__buy-score-row .pdp__sentiment-pct {
margin: 0;
}
.pdp__buy-score-row .pdp__sentiment-pct strong {
font-size: 30px;
}
.pdp__buy-score-row .pdp__sentiment-pct span {
font-size: 14px;
color: var(--ink-2);
}
.pdp__buy-score-meta {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.06em;
color: var(--ink-3);
text-transform: uppercase;
}
.pdp__subs-row { margin-bottom: 24px; }
.pdp__jump-cta {
display: inline-block;
margin-top: 24px;
padding: 12px 20px;
background: var(--ink);
color: var(--cream);
border-radius: 999px;
font-family: var(--font-mono);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
text-decoration: none;
transition: transform 0.15s;
}
.pdp__jump-cta:hover { transform: translateY(-1px); }
@media (max-width: 980px) {
.pdp__grid { grid-template-columns: 1fr; gap: 32px; }
.pdp__buy-col { position: static; }
.pdp__media { aspect-ratio: 4 / 3; padding: 32px; }
}
.pdp__rank-badge {
position: absolute;
top: 22px; left: 22px;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 14px;
background: var(--cream);
border-radius: 999px;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
white-space: nowrap;
max-width: calc(100% - 44px);
overflow: hidden;
text-overflow: ellipsis;
z-index: 2;
}
.pdp__rank-badge .num { color: var(--accent); font-size: 13px; white-space: nowrap; }
.pdp__rank-badge > span { white-space: nowrap; }
.pdp__media-meta {
position: absolute;
left: 22px; right: 22px; bottom: 22px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
pointer-events: none;
}
.pdp__media-meta > * { pointer-events: auto; }
.pdp__media-watermark {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-3);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
text-align: right;
}
.pdp__brand {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-3);
margin-bottom: 14px;
font-family: var(--font-mono);
}
.pdp__title {
font-family: var(--font-display);
font-size: clamp(1.75rem, 2.5vw + 1rem, 2.75rem); font-weight: 700;
font-weight: 600;
line-height: 1.02;
letter-spacing: -0.025em;
margin-bottom: 22px;
}
.pdp__title em {  color: var(--accent); }
.pdp__more-mentions {
margin-top: 24px;
border-top: 1px solid var(--rule);
padding-top: 18px;
}
.pdp__more-mentions summary {
cursor: pointer;
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--accent);
font-weight: 700;
list-style: none;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 16px;
border: 1px solid var(--rule);
border-radius: 999px;
background: var(--paper);
user-select: none;
transition: background 0.15s, border-color 0.15s;
}
.pdp__more-mentions summary:hover {
background: var(--paper-2);
border-color: var(--accent);
}
.pdp__more-mentions summary::-webkit-details-marker { display: none; }
.pdp__more-mentions[open] summary { background: var(--paper-2); }
.pdp__more-mentions[open] summary::after {
content: "↑";
font-size: 14px;
margin-left: 4px;
}
.compact-mention-feed {
margin-top: 18px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px 24px;
}
@media (max-width: 768px) {
.compact-mention-feed { grid-template-columns: 1fr; }
}
.compact-mention {
padding: 12px 0;
border-bottom: 1px solid var(--rule);
font-size: 14px;
line-height: 1.45;
}
.compact-mention__meta {
display: flex;
align-items: center;
gap: 6px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.04em;
color: var(--ink-3);
margin-bottom: 6px;
}
.compact-mention__user { font-weight: 700; color: var(--ink-2); }
.compact-mention__sep { color: var(--ink-4); }
.compact-mention__quote {
color: var(--ink-2);
margin-bottom: 4px;
}
.compact-mention__src {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.06em;
color: var(--ink-3);
text-decoration: none;
}
.compact-mention__src:hover { color: var(--accent); }
.compact-mention--positive { border-left: 2px solid var(--positive); padding-left: 10px; }
.compact-mention--neutral  { border-left: 2px solid var(--neutral-bar); padding-left: 10px; }
.compact-mention--negative { border-left: 2px solid var(--negative); padding-left: 10px; }
.pdp__sticky-buy {
display: none;
}
@media (max-width: 768px) {
.pdp__sticky-buy {
display: flex;
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 100;
align-items: center;
gap: 12px;
padding: 10px 14px 14px;
background: var(--paper);
border-top: 1px solid var(--rule);
box-shadow: 0 -4px 18px rgba(0,0,0,0.07);
transform: translateY(110%);
transition: transform 0.25s ease-out;
padding-bottom: max(14px, env(safe-area-inset-bottom));
}
.pdp__sticky-buy.is-visible { transform: translateY(0); }
.pdp__sticky-buy-info {
flex: 1;
min-width: 0;
overflow: hidden;
}
.pdp__sticky-buy-brand {
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-3);
font-weight: 600;
}
.pdp__sticky-buy-name {
font-family: var(--font-display);
font-size: 13px;
font-weight: 600;
color: var(--ink);
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pdp__sticky-buy .btn-amazon {
flex-shrink: 0;
}
.site-footer { padding-bottom: 80px; }
}
.pdp__compare {
margin: 22px 0;
padding: 18px 20px;
background: var(--paper-2);
border-radius: var(--r-lg);
border: 1px solid var(--rule);
}
.pdp__compare-eyebrow {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.14em;
font-weight: 700;
color: var(--ink-3);
margin-bottom: 14px;
}
.pdp__alt-card {
display: flex;
align-items: center;
gap: 14px;
padding: 12px 14px;
background: var(--paper);
border: 1px solid var(--rule);
border-radius: var(--r-md);
margin-bottom: 10px;
text-decoration: none;
color: inherit;
transition: border-color 0.15s, transform 0.15s;
}
.pdp__alt-card:last-child { margin-bottom: 0; }
.pdp__alt-card:hover {
border-color: var(--accent);
transform: translateX(2px);
}
.pdp__alt-kind {
flex-shrink: 0;
width: 90px;
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.12em;
text-transform: uppercase;
font-weight: 700;
color: var(--accent-deep);
line-height: 1.3;
}
.pdp__alt-img {
flex-shrink: 0;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
background: var(--paper-2);
border-radius: 6px;
overflow: hidden;
}
.pdp__alt-img img,
.pdp__alt-img .product-img--sm { max-width: 100%; max-height: 100%; object-fit: contain; }
.pdp__alt-body { flex: 1; min-width: 0; }
.pdp__alt-brand {
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-3);
font-weight: 600;
margin-bottom: 2px;
}
.pdp__alt-name {
font-family: var(--font-display);
font-size: 15px;
font-weight: 600;
color: var(--ink);
margin-bottom: 4px;
line-height: 1.2;
}
.pdp__alt-meta {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: var(--ink-2);
flex-wrap: wrap;
}
.pdp__alt-meta strong { color: var(--ink); font-weight: 700; }
.pdp__alt-delta {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.05em;
font-weight: 700;
padding: 2px 6px;
border-radius: 3px;
}
.pdp__alt-delta--save { background: rgba(92,138,94,0.15); color: var(--positive); }
.pdp__alt-delta--up { background: rgba(26,26,26,0.06); color: var(--ink-3); }
.pdp__alt-sep { color: var(--ink-4); }
.pdp__alt-arrow {
flex-shrink: 0;
font-size: 18px;
color: var(--ink-3);
font-weight: 300;
}
@media (max-width: 540px) {
.pdp__alt-kind { width: 100%; margin-bottom: 6px; }
.pdp__alt-card { flex-wrap: wrap; }
}
.pdp__why-picked {
margin-top: 16px;
border-top: 1px solid var(--rule);
padding-top: 14px;
}
.pdp__why-picked summary {
cursor: pointer;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-3);
font-weight: 600;
list-style: none;
display: flex;
align-items: center;
gap: 6px;
user-select: none;
}
.pdp__why-picked summary::-webkit-details-marker { display: none; }
.pdp__why-picked summary::before {
content: "+";
font-size: 14px;
font-weight: 700;
color: var(--accent);
transition: transform 0.2s;
display: inline-block;
}
.pdp__why-picked[open] summary::before { content: "−"; }
.pdp__why-picked summary:hover { color: var(--ink-2); }
.pdp__why-picked-body {
margin-top: 14px;
display: flex;
flex-direction: column;
gap: 10px;
font-size: 13px;
color: var(--ink-2);
line-height: 1.5;
}
.pdp__why-row { display: flex; gap: 10px; align-items: flex-start; }
.pdp__why-key {
flex-shrink: 0;
width: 92px;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-4);
font-weight: 600;
padding-top: 2px;
}
.pdp__why-val { flex: 1; min-width: 0; }
.pdp__why-footer {
margin-top: 4px;
padding-top: 10px;
border-top: 1px dashed var(--rule);
font-size: 12px;
}
.pdp__why-footer a {
color: var(--accent);
text-decoration: underline;
text-underline-offset: 3px;
}
.pdp__social-proof {
display: flex;
align-items: center;
gap: 18px;
padding: 18px 22px;
background: var(--cream-2);
border-radius: var(--r-lg);
margin: 18px 0 22px;
border: 1px solid var(--rule);
}
.pdp__social-proof-num {
font-family: var(--font-display);
font-size: 56px;
line-height: 1;
font-weight: 700;
color: var(--accent-deep);
letter-spacing: -0.03em;
}
.pdp__social-proof-text {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.pdp__social-proof-text strong {
font-size: 17px;
color: var(--ink);
font-weight: 600;
line-height: 1.25;
}
.pdp__social-proof-meta {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.04em;
color: var(--ink-3);
line-height: 1.4;
}
@media (max-width: 540px) {
.pdp__social-proof { padding: 14px 16px; gap: 12px; }
.pdp__social-proof-num { font-size: 42px; }
.pdp__social-proof-text strong { font-size: 15px; }
}
.pdp__consensus {
display: grid;
grid-template-columns: auto 1fr;
gap: 28px;
padding: 24px;
background: var(--cream-2);
border-radius: var(--r-lg);
margin-bottom: 28px;
align-items: center;
}
.pdp__consensus-meta {
display: flex;
flex-direction: column;
gap: 8px;
font-family: var(--font-mono);
font-size: 12px;
}
.pdp__consensus-meta-row { display: flex; justify-content: space-between; gap: 16px; }
.pdp__consensus-meta-row .k { color: var(--ink-3); letter-spacing: 0.08em; text-transform: uppercase; font-size: 10px; }
.pdp__consensus-meta-row .v { color: var(--ink); font-weight: 600; }
.pdp__cta-row {
display: flex;
gap: 12px;
align-items: center;
margin-bottom: 14px;
}
.pdp__price-strip {
display: flex;
align-items: baseline;
gap: 14px;
margin-bottom: 24px;
font-family: var(--font-mono);
font-size: 12px;
color: var(--ink-3);
}
.pdp__price-strip .price {
font-family: var(--font-display);
font-size: 1.5rem;
font-weight: 600;
color: var(--ink);
}
.pdp__tldr {
background: var(--accent-soft);
border-radius: var(--r-lg);
padding: 20px 22px;
margin-bottom: 32px;
font-size: 1rem;
line-height: 1.55;
color: var(--ink);
position: relative;
}
[data-theme="dark"] .pdp__tldr { color: var(--ink); background: var(--accent-soft); }
.pdp__tldr-label {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent-dark);
margin-bottom: 8px;
}
[data-theme="dark"] .pdp__tldr-label { color: var(--accent); }
.pdp__pros-cons {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
margin-bottom: 32px;
}
.pc-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.pc-list__head {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-3);
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 6px;
}
.pc-list__head::before {
content: "";
width: 7px; height: 7px; border-radius: 50%;
}
.pc-list--pros .pc-list__head::before { background: var(--forest); }
.pc-list--cons .pc-list__head::before { background: var(--accent); }
.pc-item {
display: flex;
gap: 10px;
font-size: 14px;
line-height: 1.5;
color: var(--ink-2);
}
.pc-item__bullet {
color: var(--ink-4);
font-family: var(--font-mono);
font-size: 12px;
flex-shrink: 0;
width: 16px;
}
.pdp__section { margin-top: 64px; }
.pdp__section-title {
font-family: var(--font-display);
font-size: clamp(1.5rem, 1.5vw + 1rem, 2rem);
font-weight: 600;
margin-bottom: 8px;
letter-spacing: -0.02em;
}
.pdp__section-sub {
font-family: var(--font-mono);
font-size: 12px;
color: var(--ink-3);
margin-bottom: 28px;
letter-spacing: 0.04em;
}
.quote-feed {
display: flex;
flex-direction: column;
gap: 0;
border-top: 1px solid var(--gray);
}
.quote-row {
display: grid;
grid-template-columns: 28px minmax(0, 1fr) auto;
gap: 16px;
padding: 22px 0;
border-bottom: 1px solid var(--gray);
}
.quote-row > div { min-width: 0; }
.quote-row__body {
overflow-wrap: anywhere;
word-break: break-word;
}
.quote-row__avatar {
width: 28px; height: 28px;
border-radius: 50%;
background: var(--accent);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-mono);
font-size: 12px;
font-weight: 600;
flex-shrink: 0;
margin-top: 2px;
}
.quote-row__avatar--alt { background: var(--forest); }
.quote-row__avatar--alt-2 { background: var(--ink); }
.quote-row__avatar--alt-3 { background: var(--gold); }
.quote-row__avatar--alt-4 { background: var(--plum); }
.quote-row__head {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
font-family: var(--font-mono);
font-size: 12px;
margin-bottom: 6px;
color: var(--ink-3);
}
.quote-row__head .user { color: var(--ink); font-weight: 600; }
.quote-row__head .dot { color: var(--gray-2); }
.quote-row__body {
font-size: 15px;
line-height: 1.55;
color: var(--ink-2);
}
.quote-row__body mark {
background: var(--accent-soft);
color: var(--ink);
padding: 1px 4px;
border-radius: 3px;
font-weight: 600;
}
[data-theme="dark"] .quote-row__body mark { color: var(--ink); }
.quote-row__meta {
font-family: var(--font-mono);
font-size: 11px;
color: var(--ink-3);
margin-top: 8px;
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.quote-row__open {
align-self: flex-start;
font-family: var(--font-mono);
font-size: 11px;
color: var(--ink-3);
letter-spacing: 0.06em;
padding-top: 4px;
text-decoration: none;
white-space: nowrap;
}
.quote-row__open:hover { color: var(--accent); }
@media (max-width: 700px) {
.quote-row {
grid-template-columns: 28px minmax(0, 1fr);
column-gap: 12px;
row-gap: 6px;
}
.quote-row__open {
grid-column: 2;
align-self: flex-start;
padding-top: 2px;
}
}
.pullquote {
padding: 28px 0;
border-bottom: 1px solid var(--gray);
}
.pullquote__text { font-size: clamp(1.0625rem, 0.5vw + 1rem, 1.25rem); font-weight: 500; line-height: 1.45; color: var(--ink); letter-spacing: -0.005em; margin-bottom: 12px; }
.pullquote__text::before { content: "\201C "; color: var(--accent); margin-right: 4px; }
.pullquote__text::after { content: "\201D "; color: var(--accent); margin-left: 4px; }
.pullquote__meta {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
font-family: var(--font-mono);
font-size: 11px;
color: var(--ink-3);
}
.pullquote__meta .user { color: var(--ink); font-weight: 600; }
.rank-list {
display: flex;
flex-direction: column;
gap: 0;
}
.rank-row {
display: grid;
grid-template-columns: 56px 132px 1fr 200px 130px;
gap: 24px;
padding: var(--row-pad-y) 0;
border-bottom: 1px solid var(--gray);
align-items: center;
text-decoration: none;
color: var(--ink);
transition: background .15s;
}
.rank-row:hover { background: var(--cream-2); color: var(--ink); }
.rank-row__rank { font-family: var(--font-mono); font-size: 1.5rem; font-weight: 600; color: var(--ink-3); text-align: center; line-height: 1; }
.rank-row__rank.is-top { color: var(--accent);  }
.rank-row__img {
aspect-ratio: 1;
background: var(--cream-2);
border-radius: var(--r-md);
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
}
.rank-row__body { min-width: 0; }
.rank-row__brand {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-3);
font-family: var(--font-mono);
margin-bottom: 4px;
}
.rank-row__name {
font-family: var(--font-display);
font-size: 1.375rem;
font-weight: 600;
line-height: 1.15;
letter-spacing: -0.015em;
margin-bottom: 10px;
}
.rank-row__quote {
font-size: 14px;
color: var(--ink-2);
line-height: 1.5;
margin-bottom: 10px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.rank-row__quote::before { content: "\201C "; color: var(--accent); }
.rank-row__quote::after { content: "\201D "; color: var(--accent); }
.rank-row__sources {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.rank-row__cta {
text-align: right;
}
@media (max-width: 980px) {
.rank-row {
grid-template-columns: 44px 100px 1fr;
grid-template-areas:
"rank img body"
".    img body"
"score score score"
"cta  cta  cta";
gap: 16px;
padding: 20px 0;
}
}
.filter-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 18px 0;
border-bottom: 1px solid var(--gray);
}
.filter-row__group { display: flex; gap: 6px; flex-wrap: wrap; }
.filter-row__sep { width: 1px; background: var(--gray); align-self: stretch; }
.filter-chip {
padding: 6px 14px;
font-size: 13px;
font-family: var(--font-body);
border-radius: 999px;
border: 1px solid var(--gray);
background: transparent;
color: var(--ink-2);
cursor: pointer;
transition: all .15s;
display: inline-flex;
align-items: center;
gap: 6px;
}
.filter-chip:hover { border-color: var(--ink-3); color: var(--ink); }
.filter-chip.is-active { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.filter-chip__count {
font-family: var(--font-mono);
font-size: 10px;
color: var(--ink-3);
}
.filter-chip.is-active .filter-chip__count { color: color-mix(in oklab, var(--cream) 60%, transparent); }
.gadget-hero {
background: var(--ink);
color: var(--cream);
padding: 80px 0 100px;
position: relative;
overflow: hidden;
}
.gadget-hero h1 { color: var(--cream); }
.gadget-hero h1 em { color: var(--accent);  }
.gadget-hero p { color: color-mix(in oklab, var(--cream) 80%, transparent); }
.gadget-hero .eyebrow { color: var(--ink-4); }
.gadget-hero .eyebrow::before { background: var(--accent); }
.gadget-hero__grid {
display: grid;
grid-template-columns: 1fr auto;
gap: 64px;
align-items: end;
}
.gadget-stats {
display: flex;
gap: 36px;
font-family: var(--font-mono);
}
.gadget-stat__num { font-family: var(--font-display); font-size: 2.5rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.gadget-stat__num em { color: var(--accent);  }
.gadget-stat__lbl {
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-4);
margin-top: 8px;
}
.gadget-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.gadget-card {
background: var(--cream-2);
border-radius: var(--r-lg);
padding: 28px;
display: flex;
flex-direction: column;
gap: 14px;
transition: transform .25s, box-shadow .25s;
cursor: pointer;
border: 1px solid transparent;
}
.gadget-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--gray); }
.gadget-card__head {
display: flex;
justify-content: space-between;
align-items: start;
}
.gadget-card__title {
font-family: var(--font-display);
font-size: 1.6rem;
font-weight: 600;
line-height: 1.05;
letter-spacing: -0.02em;
}
.gadget-card__title em {  color: var(--accent); }
.gadget-card__media {
aspect-ratio: 16/10;
background: var(--cream);
border-radius: var(--r-md);
display: flex;
align-items: center;
justify-content: center;
padding: 28px;
}
.gadget-card__lede {
font-size: 14px;
line-height: 1.5;
color: var(--ink-2);
flex: 1;
}
.gadget-card__foot {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 12px;
border-top: 1px dashed var(--gray-2);
font-family: var(--font-mono);
font-size: 11px;
color: var(--ink-3);
}
.gadget-card__foot strong { color: var(--ink); font-weight: 600; }
.gadget-card__arrow {
width: 28px; height: 28px;
border-radius: 50%;
border: 1px solid var(--gray);
display: flex;
align-items: center;
justify-content: center;
color: var(--ink);
transition: all .2s;
}
.gadget-card:hover .gadget-card__arrow { background: var(--accent); color: white; border-color: var(--accent); transform: translateX(2px); }
@media (max-width: 900px) { .gadget-grid { grid-template-columns: 1fr; } }
.method-card {
background: var(--cream-2);
border-radius: var(--r-xl);
padding: 40px;
display: grid;
grid-template-columns: auto 1fr;
gap: 40px;
align-items: center;
}
.method-card__steps {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.method-step {
display: flex;
flex-direction: column;
gap: 10px;
}
.method-step__num {
font-family: var(--font-mono);
font-size: 11px;
color: var(--accent);
letter-spacing: 0.14em;
font-weight: 600;
}
.method-step__t {
font-family: var(--font-display);
font-size: 1rem;
font-weight: 600;
letter-spacing: -0.01em;
}
.method-step__d {
font-size: 13px;
color: var(--ink-2);
line-height: 1.45;
}
@media (max-width: 900px) {
.method-card { grid-template-columns: 1fr; padding: 28px; }
.method-card__steps { grid-template-columns: repeat(2, 1fr); }
}
.site-footer {
border-top: 1px solid var(--gray);
padding: 64px 0 40px;
margin-top: 80px;
}
.site-footer__grid {
display: grid;
grid-template-columns: 1.4fr repeat(3, 1fr);
gap: 48px;
margin-bottom: 48px;
}
.site-footer__col h4 {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-3);
font-weight: 600;
margin-bottom: 14px;
}
.site-footer__col ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.site-footer__col a { font-size: 14px; color: var(--ink-2); }
.site-footer__col a:hover { color: var(--accent); }
.site-footer__bottom {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 16px;
padding-top: 24px;
border-top: 1px solid var(--gray);
font-family: var(--font-mono);
font-size: 11px;
color: var(--ink-3);
letter-spacing: 0.04em;
}
@media (max-width: 800px) {
.site-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
.site-nav { display: none; }
.site-search span { display: none; }
.site-search kbd { display: none; }
}
.thread {
background: var(--cream-2);
border-radius: var(--r-lg);
padding: 24px;
display: flex;
flex-direction: column;
gap: 14px;
border: 1px solid var(--gray);
}
.thread__head {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--font-mono);
font-size: 11px;
color: var(--ink-3);
}
.thread__title { font-size: 0.9375rem; font-weight: 600; line-height: 1.4; color: var(--ink); letter-spacing: -0.005em; }
.thread__meta {
display: flex;
justify-content: space-between;
font-family: var(--font-mono);
font-size: 11px;
color: var(--ink-3);
padding-top: 12px;
border-top: 1px dashed var(--gray-2);
}
.thread__meta strong { color: var(--accent); font-weight: 600; }
.stat-strip {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
border: 1px solid var(--gray);
border-radius: var(--r-lg);
overflow: hidden;
}
.stat-strip__cell {
padding: 20px 22px;
border-right: 1px solid var(--gray);
display: flex;
flex-direction: column;
gap: 4px;
}
.stat-strip__cell:last-child { border-right: 0; }
.stat-strip__num {
font-family: var(--font-display);
font-size: 2rem;
font-weight: 600;
letter-spacing: -0.025em;
line-height: 1;
}
.stat-strip__num em { color: var(--accent);  }
.stat-strip__lbl {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-3);
margin-top: 8px;
}
@media (max-width: 800px) {
.stat-strip { grid-template-columns: repeat(2, 1fr); }
.stat-strip__cell:nth-child(2) { border-right: 0; }
.stat-strip__cell:nth-child(1), .stat-strip__cell:nth-child(2) { border-bottom: 1px solid var(--gray); }
}
.ticker {
display: flex;
flex-direction: column;
gap: 0;
background: var(--cream-2);
border-radius: var(--r-lg);
overflow: hidden;
}
.ticker__row {
display: grid;
grid-template-columns: 80px 1fr 80px;
gap: 16px;
padding: 14px 18px;
border-bottom: 1px solid var(--gray);
font-size: 13px;
align-items: center;
}
.ticker__row:last-child { border-bottom: 0; }
.ticker__time { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }
.ticker__action { color: var(--ink-2); line-height: 1.4; }
.ticker__action strong { color: var(--ink); font-weight: 600; }
.ticker__sub { font-family: var(--font-mono); font-size: 11px; color: var(--accent); text-align: right; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.col { display: flex; flex-direction: column; gap: 12px; }
.gap-sm { gap: 6px; }
.gap-lg { gap: 24px; }
.divider { height: 1px; background: var(--gray); margin: 24px 0; }
.divider--dashed { border-top: 1px dashed var(--gray-2); height: 0; }
.tag-wash { background: var(--cream-2); padding: 4px 10px; border-radius: var(--r-sm); font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); }
.scroll-x { overflow-x: auto; padding-bottom: 8px; }
.scroll-x::-webkit-scrollbar { height: 6px; }
.scroll-x::-webkit-scrollbar-thumb { background: var(--gray-2); border-radius: 999px; }
em, i { font-style: normal; }
h1 em, h2 em, h3 em, h4 em,
.logo em,
.hero__title em,
.page-header__title em,
.pdp__title em,
.cat-card--moat .cat-card__title em,
.gadget-card__title em,
.score-num__big em,
.gadget-stat__num em,
.stat-strip__num em {
font-style: normal;
color: var(--accent);
font-weight: inherit;
}
.serif-ital { font-style: normal; font-weight: 600; color: var(--accent); }
.product-img {
position: relative;
width: 100%;
aspect-ratio: 1;
background: linear-gradient(180deg, #FAF7F2 0%, #F2EBE0 100%);
border-radius: var(--r-md);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
isolation: isolate;
}
[data-theme="dark"] .product-img {
background: linear-gradient(180deg, #2A211D 0%, #1F1816 100%);
}
.product-img__svg {
width: 78%;
height: 92%;
display: block;
filter: drop-shadow(0 14px 18px rgba(26,20,24,0.18)) drop-shadow(0 2px 4px rgba(26,20,24,0.10));
position: relative;
z-index: 2;
}
.product-img__shadow {
position: absolute;
bottom: 6%;
left: 14%;
right: 14%;
height: 10%;
background: radial-gradient(ellipse at center, rgba(26,20,24,0.20) 0%, rgba(26,20,24,0.06) 50%, transparent 70%);
border-radius: 50%;
z-index: 1;
filter: blur(2px);
}
.product-img--sm { aspect-ratio: 1; }
.product-img--md { aspect-ratio: 1; }
.product-img--lg { aspect-ratio: 1; }
.btn-amazon {
display: inline-flex;
align-items: center;
gap: 10px;
background: linear-gradient(180deg, #FFD814 0%, #F7CA00 50%, #F0B800 100%);
color: #0F1111;
border: 1px solid #E0A100;
border-radius: 8px;
padding: 10px 16px;
font-family: var(--font-body);
font-weight: 600;
font-size: 14px;
cursor: pointer;
text-decoration: none !important;
box-shadow: 0 1px 0 rgba(255,255,255,0.55) inset, 0 2px 5px rgba(0,0,0,0.08);
transition: filter .12s, transform .12s, box-shadow .12s;
white-space: nowrap;
}
.btn-amazon:hover {
filter: brightness(1.04);
box-shadow: 0 1px 0 rgba(255,255,255,0.55) inset, 0 4px 10px rgba(0,0,0,0.14);
color: #0F1111;
}
.btn-amazon:active { transform: translateY(1px); }
.btn-amazon__icon {
display: inline-flex;
align-items: center;
justify-content: center;
color: #232F3E;
flex: 0 0 auto;
}
.btn-amazon__label {
display: inline-flex;
flex-direction: column;
line-height: 1.1;
align-items: flex-start;
}
.btn-amazon__lead { font-size: 13px; font-weight: 600; letter-spacing: -0.005em; }
.btn-amazon__price {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
color: #4D5759;
letter-spacing: 0.02em;
margin-top: 1px;
}
.btn-amazon__arr { color: #232F3E; font-weight: 700; font-size: 14px; flex: 0 0 auto; }
.btn-amazon--sm { padding: 8px 12px; gap: 8px; border-radius: 6px; }
.btn-amazon--sm .btn-amazon__lead { font-size: 12px; }
.btn-amazon--sm .btn-amazon__price { font-size: 10px; }
.btn-amazon--lg { padding: 14px 22px; gap: 12px; border-radius: 10px; }
.btn-amazon--lg .btn-amazon__lead { font-size: 15px; }
.btn-amazon--lg .btn-amazon__price { font-size: 12px; }
.btn-alt {
display: inline-flex;
align-items: center;
gap: 8px;
background: #fff;
color: var(--ink);
border: 1px solid var(--ink);
border-radius: 8px;
padding: 10px 16px;
font-family: var(--font-body);
font-weight: 600;
font-size: 13px;
cursor: pointer;
text-decoration: none !important;
transition: background .12s, color .12s, transform .12s;
white-space: nowrap;
}
.btn-alt:hover { background: var(--ink); color: #fff; }
.btn-alt:active { transform: translateY(1px); }
.btn-alt__label { letter-spacing: -0.005em; }
.btn-alt__arr { font-weight: 700; flex: 0 0 auto; }
.btn-alt--sm { padding: 8px 12px; gap: 6px; border-radius: 6px; font-size: 12px; }
.btn-alt--lg { padding: 14px 22px; gap: 10px; border-radius: 10px; font-size: 15px; }
.btn-amazon--unavailable {
background: #d8d3cd;
color: #4a4640;
cursor: not-allowed;
box-shadow: none;
filter: grayscale(1);
pointer-events: none;
user-select: none;
}
.btn-amazon--unavailable:hover {
background: #d8d3cd;
transform: none;
box-shadow: none;
}
.btn-amazon--unavailable .btn-amazon__lead {
text-transform: none;
letter-spacing: 0.01em;
font-weight: 600;
}
.btn-amazon--unavailable .btn-amazon__icon { opacity: 0.55; }
.card--unavailable {
position: relative;
opacity: 0.62;
filter: saturate(0.55);
transition: opacity 0.15s ease, filter 0.15s ease;
}
.card--unavailable:hover { opacity: 0.78; filter: saturate(0.75); }
.card--unavailable .product-img--real img,
.card--unavailable .photo-frame { filter: grayscale(0.7); }
.card-unavail-badge {
display: inline-flex;
align-items: center;
gap: 6px;
margin: 0 0 10px;
padding: 4px 10px;
background: #efe9e1;
border: 1px solid #d8cfc1;
color: #4a4640;
font-family: var(--font-mono, "IBM Plex Mono", monospace);
font-size: 10px;
letter-spacing: 0.07em;
text-transform: uppercase;
border-radius: 4px;
width: fit-content;
}
.card-unavail-badge::before {
content: "●";
color: #9a8e7a;
font-size: 9px;
line-height: 1;
}
.pdp-unavail-banner {
display: flex;
align-items: flex-start;
gap: 12px;
margin: 8px 0 4px;
padding: 14px 18px;
background: #f5efe6;
border: 1px solid #e0d5c2;
border-left: 4px solid #c79a5a;
border-radius: 6px;
color: #3a3530;
font-size: 14px;
line-height: 1.45;
}
.pdp-unavail-banner__icon {
color: #c79a5a;
font-size: 18px;
line-height: 1.2;
flex-shrink: 0;
}
.pdp-unavail-banner__body strong {
display: inline;
font-weight: 700;
margin-right: 6px;
}
.pdp-unavail-banner__body span {
color: var(--ink-2, #5a5650);
}
.hero--lean { padding: 80px 0 64px; background: var(--cream); }
.hero__lean-grid {
display: grid;
grid-template-columns: 1.3fr 1fr;
gap: 64px;
align-items: center;
}
.hero__lean-copy { max-width: 620px; }
.hero__lean-copy .hero__title { margin-top: 24px; margin-bottom: 24px; }
.hero__lean-copy .hero__lede { font-size: 1.0625rem; line-height: 1.55; max-width: 540px; }
.hero__lean-copy .hero__cta-row { margin-top: 32px; align-items: center; gap: 20px; }
.hero__sub-link {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-3);
text-decoration: none;
cursor: pointer;
transition: color .15s;
}
.hero__sub-link:hover { color: var(--ink); }
@media (max-width: 1000px) {
.hero__lean-grid { grid-template-columns: 1fr; gap: 40px; }
}
.trust-badge {
background: var(--cream);
border: 1px solid var(--gray);
border-radius: var(--r-lg);
padding: 22px 24px;
box-shadow: var(--shadow-sm);
}
[data-theme="dark"] .trust-badge { background: var(--cream-2); }
.hero-featured {
margin-top: 18px;
background: var(--paper);
border: 1px solid var(--rule);
border-radius: var(--r-lg);
padding: 18px 20px 16px;
box-shadow: var(--shadow-sm);
}
.hero-featured__eyebrow {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.14em;
font-weight: 700;
color: var(--ink-3);
margin-bottom: 12px;
}
.hero-featured__dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--accent);
}
.hero-featured__inner {
display: flex;
align-items: center;
gap: 14px;
text-decoration: none;
color: inherit;
margin-bottom: 12px;
}
.hero-featured__img {
flex-shrink: 0;
width: 64px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
background: var(--paper-2);
border-radius: 8px;
overflow: hidden;
}
.hero-featured__img img,
.hero-featured__img .product-img--sm {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.hero-featured__body { min-width: 0; flex: 1; }
.hero-featured__brand {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-3);
font-weight: 600;
margin-bottom: 3px;
}
.hero-featured__name {
font-family: var(--font-display);
font-size: 17px;
font-weight: 600;
line-height: 1.2;
color: var(--ink);
margin-bottom: 6px;
}
.hero-featured__meta {
font-size: 13px;
color: var(--ink-2);
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.hero-featured__meta strong { color: var(--accent-deep); font-weight: 700; }
.hero-featured__sep { color: var(--ink-4); }
.hero-featured__cta { display: flex; }
.hero-featured__cta .btn-amazon { width: 100%; justify-content: center; }
.trust-badge__top {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-2);
padding-bottom: 18px;
border-bottom: 1px dashed var(--gray);
}
.trust-badge__dot {
width: 8px; height: 8px;
background: #2D9D5F;
border-radius: 50%;
flex: 0 0 auto;
box-shadow: 0 0 0 3px rgba(45,157,95,0.18);
}
.trust-badge__stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
padding: 22px 0 18px;
}
.trust-badge__stats > div {
display: flex;
flex-direction: column;
gap: 2px;
}
.trust-badge__stats strong {
font-family: var(--font-display);
font-size: 1.875rem;
font-weight: 700;
letter-spacing: -0.03em;
color: var(--ink);
line-height: 1;
}
.trust-badge__stats span {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-3);
}
.trust-badge__bottom {
font-size: 12px;
color: var(--ink-3);
padding-top: 14px;
border-top: 1px dashed var(--gray);
line-height: 1.5;
}
.trust-badge__bottom a { color: var(--accent); font-weight: 600; }
.section__head--simple {
margin-bottom: 36px;
align-items: end;
}
.section__head--simple h2 { letter-spacing: -0.025em; }
.cat-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
@media (max-width: 1000px) { .cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .cat-grid { grid-template-columns: 1fr; } }
.cat-card {
display: flex;
flex-direction: column;
background: var(--cream);
border-radius: var(--r-lg);
padding: 0;
text-decoration: none;
color: var(--ink);
cursor: pointer;
transition: transform .25s ease, box-shadow .25s ease, border-color .15s;
border: 1px solid var(--gray);
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.cat-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-md);
color: var(--ink);
border-color: var(--ink-3);
}
.cat-card__collage {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 1px;
background: var(--gray);
aspect-ratio: 16 / 11;
}
.cat-card__cell {
background: linear-gradient(180deg, #FAF7F2 0%, #F2EBE0 100%);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
[data-theme="dark"] .cat-card__cell { background: linear-gradient(180deg, #2A211D 0%, #1F1816 100%); }
.cat-card__cell svg {
width: 64%;
height: 86%;
filter: drop-shadow(0 8px 12px rgba(26,20,24,0.16));
}
.cat-card__foot {
padding: 18px 20px 20px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.cat-card__title {
font-family: var(--font-display);
font-size: 1.375rem;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.1;
color: var(--ink);
margin-bottom: 4px;
}
.cat-card__count {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.04em;
color: var(--ink-3);
}
.cat-card__count strong { color: var(--ink); font-weight: 700; }
.cat-card__top { color: var(--accent); font-weight: 600; }
.cat-card__arrow {
font-size: 22px;
color: var(--ink-3);
transition: transform .2s, color .15s;
flex: 0 0 auto;
}
.cat-card:hover .cat-card__arrow { transform: translateX(4px); color: var(--accent); }
.cat-card--moat {
grid-column: span 1;
background: var(--ink);
color: var(--cream);
border-color: var(--ink);
}
.cat-card--moat:hover { color: var(--cream); border-color: var(--ink); }
.cat-card--moat .cat-card__title { color: var(--cream); }
.cat-card--moat .cat-card__count { color: color-mix(in oklab, var(--cream) 60%, transparent); }
.cat-card--moat .cat-card__count strong { color: var(--cream); }
.cat-card--moat .cat-card__top { color: var(--accent); }
.cat-card--moat .cat-card__arrow { color: var(--accent); }
.cat-card--moat .cat-card__cell { background: linear-gradient(180deg, #2A211D 0%, #1F1816 100%); }
.top-list {
display: flex;
flex-direction: column;
gap: 0;
border-top: 1px solid var(--gray);
}
.top-row {
display: grid;
grid-template-columns: 56px 92px 1fr 240px 200px;
gap: 24px;
align-items: center;
padding: 20px 8px;
border-bottom: 1px solid var(--gray);
transition: background .15s;
}
.top-row:hover { background: var(--cream-2); }
.top-row__rank {
font-family: var(--font-mono);
font-size: 1.125rem;
font-weight: 700;
color: var(--ink-3);
text-align: center;
letter-spacing: 0.02em;
}
.top-row:nth-child(-n+3) .top-row__rank { color: var(--accent); }
.top-row__img {
width: 92px;
height: 92px;
border-radius: var(--r-md);
display: block;
cursor: pointer;
text-decoration: none;
overflow: hidden;
}
.top-row__body { cursor: pointer; min-width: 0; text-decoration: none; color: inherit; }
.top-row__brand {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-3);
margin-bottom: 4px;
font-weight: 600;
display: flex;
align-items: center;
gap: 8px;
}
.top-row__cat-chip {
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.12em;
font-weight: 700;
color: var(--accent-deep);
background: rgba(194,96,67,0.10);
padding: 2px 7px;
border-radius: 3px;
line-height: 1.4;
}
.top-row__name {
font-family: var(--font-display);
font-size: 1.0625rem;
font-weight: 600;
letter-spacing: -0.015em;
line-height: 1.25;
color: var(--ink);
margin-bottom: 8px;
}
.top-row__subs {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.top-row__score { display: flex; flex-direction: column; gap: 6px; }
.top-row__pct {
font-family: var(--font-mono);
font-size: 11px;
color: var(--ink-3);
letter-spacing: 0.04em;
}
.top-row__pct strong {
font-family: var(--font-display);
font-size: 1.5rem;
font-weight: 700;
letter-spacing: -0.03em;
color: var(--ink);
margin-right: 6px;
}
.top-row__bar {
height: 6px;
background: var(--gray);
border-radius: 3px;
overflow: hidden;
}
.top-row__bar-fill {
height: 100%;
background: var(--accent);
border-radius: 3px;
}
.top-row__meta {
font-family: var(--font-mono);
font-size: 11px;
color: var(--ink-3);
letter-spacing: 0.02em;
}
.top-row__cta {
display: flex;
flex-direction: column;
gap: 8px;
align-items: stretch;
}
.top-row__cta .btn-amazon { width: 100%; justify-content: center; }
.top-row__details {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.04em;
color: var(--ink-3);
text-align: center;
cursor: pointer;
transition: color .15s;
text-decoration: none;
}
.top-row__details:hover { color: var(--accent); }
@media (max-width: 1100px) {
.top-row {
grid-template-columns: 40px 80px 1fr 180px;
grid-template-rows: auto auto;
}
.top-row__cta {
grid-column: 3 / 5;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.top-row__cta .btn-amazon { width: auto; }
}
@media (max-width: 700px) {
.top-row {
display: flex !important;
flex-wrap: wrap !important;
align-items: flex-start !important;
gap: 12px !important;
padding: 12px !important;
border: 1px solid var(--gray) !important;
border-radius: var(--r-lg) !important;
margin-bottom: 14px !important;
position: relative;
background: var(--cream);
}
.top-row__rank {
order: -1 !important;
position: static !important;
align-self: center;
background: transparent !important;
padding: 0 !important;
min-width: 20px;
text-align: center !important;
font-size: 17px !important;
font-weight: 700 !important;
color: var(--ink-3) !important;
line-height: 1 !important;
}
.top-row__img,
.top-row a.top-row__img {
flex: 0 0 96px !important;
width: 96px !important;
height: 96px !important;
aspect-ratio: 1 / 1 !important;
margin: 0 !important;
background: var(--cream-2) !important;
border-radius: 10px !important;
overflow: hidden;
border: none !important;
align-self: flex-start !important;
}
.top-row__img .product-img--real,
.top-row__img .product-img {
width: 100% !important;
height: 100% !important;
aspect-ratio: 1 / 1 !important;
padding: 6px;
background: transparent !important;
}
.top-row__img .photo-frame { width: 100% !important; height: 100% !important; }
.top-row__img img {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
max-width: none !important;
max-height: none !important;
}
.top-row__body {
flex: 1 1 150px !important;
min-width: 0 !important;
display: block !important;
padding: 0 !important;
}
.top-row__brand { font-size: 11px !important; margin-bottom: 2px !important; }
.top-row__name { font-size: 15px !important; margin-bottom: 4px !important; line-height: 1.25 !important; }
.top-row__tagline {
font-size: 12.5px !important;
color: var(--ink-2) !important;
margin-bottom: 6px !important;
line-height: 1.4 !important;
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
}
.top-row__subs { display: flex; gap: 5px; flex-wrap: wrap; }
.top-row__score {
flex: 1 1 100% !important;
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap;
align-items: center;
gap: 10px;
padding: 0 !important;
margin-top: 6px !important;
grid-column: auto !important;
}
.top-row__pct { font-size: 11px !important; margin-bottom: 0 !important; }
.top-row__pct strong { font-size: 18px !important; }
.top-row__bar { flex: 1; min-width: 90px; }
.top-row__meta { font-size: 11px !important; margin-top: 0 !important; }
.top-row__cta {
flex: 1 1 100% !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
padding: 0 !important;
margin-top: 4px !important;
grid-column: auto !important;
gap: 12px !important;
}
.top-row__cta .btn-amazon { width: auto !important; flex: 1; min-height: 44px; }
.top-row__details { flex-shrink: 0; font-size: 11px !important; }
}
.rail-card {
display: flex;
flex-direction: column;
background: var(--cream);
border-radius: var(--r-md);
border: 1px solid var(--gray);
overflow: hidden;
position: relative;
transition: border-color .15s, transform .25s;
}
.rail-card:hover { border-color: var(--ink-3); transform: translateY(-2px); }
.rail-card__main {
display: flex;
flex-direction: column;
cursor: pointer;
text-decoration: none;
color: inherit;
padding: 0;
}
.rail-card__rank-badge {
position: absolute;
top: 12px; left: 12px;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 700;
background: var(--ink);
color: var(--cream);
padding: 4px 8px;
border-radius: 4px;
letter-spacing: 0.06em;
z-index: 5;
}
.rail-card__img-wrap {
aspect-ratio: 1;
background: linear-gradient(180deg, #FAF7F2 0%, #F2EBE0 100%);
display: flex;
align-items: center;
justify-content: center;
}
.rail-card__img-wrap .product-img { background: transparent; }
.rail-card__brand {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-3);
padding: 14px 16px 4px;
}
.rail-card__name {
font-family: var(--font-display);
font-size: 1rem;
font-weight: 600;
line-height: 1.25;
letter-spacing: -0.015em;
color: var(--ink);
padding: 0 16px 12px;
min-height: 44px;
}
.rail-card__bar {
height: 4px;
background: var(--gray);
margin: 0 16px;
border-radius: 2px;
overflow: hidden;
}
.rail-card__bar-fill {
height: 100%;
background: var(--accent);
border-radius: 2px;
}
.rail-card__meta {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 16px 14px;
font-family: var(--font-mono);
font-size: 11px;
color: var(--ink-3);
}
.rail-card__pct strong { color: var(--ink); font-weight: 700; font-size: 13px; }
.rail-card .btn-amazon {
margin: 0 16px 16px;
justify-content: center;
}
.rank-row--v2 {
display: grid;
grid-template-columns: 56px 140px 1fr 220px 220px;
gap: 24px;
align-items: center;
padding: 22px 20px;
background: var(--cream);
border: 1px solid var(--gray);
border-radius: var(--r-md);
margin-bottom: 12px;
transition: border-color .15s, transform .15s;
}
.rank-row--v2:hover { border-color: var(--ink-3); }
.rank-row__img--big {
width: 140px;
height: 140px;
background: transparent;
display: block;
cursor: pointer;
text-decoration: none;
}
.rank-row__img--big .product-img { width: 100%; height: 100%; }
.rank-row--v2 .rank-row__body { cursor: pointer; min-width: 0; text-decoration: none; color: inherit; }
.rank-row--v2 .rank-row__cta {
display: flex;
flex-direction: column;
gap: 10px;
align-items: stretch;
}
.rank-row--v2 .rank-row__cta .btn-amazon { width: 100%; justify-content: center; }
.rank-row__details {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.04em;
color: var(--ink-3);
text-align: center;
cursor: pointer;
transition: color .15s;
text-decoration: none;
}
.rank-row__details:hover { color: var(--accent); }
@media (max-width: 1100px) {
.rank-row--v2 {
grid-template-columns: 40px 120px 1fr;
grid-template-rows: auto auto;
gap: 16px;
align-items: start;
}
.rank-row__img--big { width: 120px; height: 120px; align-self: start; }
.rank-row--v2 .rank-row__body { align-self: start; min-width: 0; }
.rank-row__score { grid-column: 1 / 4; }
.rank-row--v2 .rank-row__cta {
grid-column: 1 / 4;
flex-direction: row;
justify-content: space-between;
}
.rank-row--v2 .rank-row__cta .btn-amazon { width: auto; }
}
@media (max-width: 700px) {
.rank-row--v2 {
display: flex !important;
flex-wrap: wrap;
align-items: flex-start;
gap: 12px;
padding: 12px !important;
border-radius: var(--r-lg);
margin-bottom: 14px;
position: relative;
}
.rank-row--v2 .rank-row__rank {
order: -1;
position: static;
align-self: center;
background: transparent;
padding: 0;
min-width: 20px;
text-align: center;
font-size: 17px;
font-weight: 700;
color: var(--ink-3);
line-height: 1;
}
.rank-row__img--big,
.rank-row--v2 .rank-row__img--big,
.rank-row--v2 .rank-row__img {
flex: 0 0 96px;
width: 96px !important;
height: 96px !important;
aspect-ratio: 1 / 1 !important;
margin: 0 !important;
background: var(--cream-2) !important;
border-radius: 10px !important;
overflow: hidden;
align-self: flex-start !important;
}
.rank-row--v2 .rank-row__img--big .product-img--real,
.rank-row--v2 .rank-row__img--big .product-img,
.rank-row--v2 .rank-row__img .product-img--real {
width: 100% !important;
height: 100% !important;
aspect-ratio: 1 / 1 !important;
padding: 6px;
background: transparent !important;
}
.rank-row--v2 .rank-row__img--big img,
.rank-row--v2 .rank-row__img img {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
max-width: none !important;
max-height: none !important;
}
.rank-row--v2 .rank-row__body {
flex: 1 1 150px !important;
min-width: 0 !important;
display: block !important;
padding: 0 !important;
}
.rank-row--v2 .rank-row__quote {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.rank-row--v2 .rank-row__score {
flex: 1 1 100% !important;
display: block;
padding: 0 !important;
margin-top: 6px;
grid-column: auto !important;
}
.rank-row--v2 .rank-row__cta {
flex: 1 1 100% !important;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 0 !important;
margin-top: 4px;
grid-column: auto !important;
gap: 12px;
}
.rank-row--v2 .rank-row__cta .btn-amazon { width: auto; flex: 1; min-height: 44px; }
}
.pillars {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
@media (max-width: 900px) { .pillars { grid-template-columns: 1fr; gap: 24px; } }
.pillar {
padding: 28px 28px 32px;
background: var(--cream);
border-radius: var(--r-lg);
border: 1px solid var(--gray);
}
.pillar__num {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 700;
color: var(--accent);
letter-spacing: 0.16em;
margin-bottom: 16px;
}
.pillar__title {
font-family: var(--font-display);
font-size: 1.25rem;
font-weight: 700;
letter-spacing: -0.02em;
margin-bottom: 12px;
color: var(--ink);
}
.pillar p {
font-size: 14.5px;
line-height: 1.6;
color: var(--ink-2);
}
.pdp__amazon { flex: 1; min-height: 56px; }
.pdp__aff-note {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.04em;
color: var(--ink-3);
width: 100%;
margin-top: 4px;
}
.pdp__media .product-img {
background: transparent;
}
.hero-search {
display: flex;
align-items: stretch;
background: var(--cream);
border: 1px solid var(--ink);
border-radius: 999px;
padding: 6px 6px 6px 20px;
max-width: 560px;
margin-top: 28px;
box-shadow: 0 8px 24px -16px color-mix(in oklab, var(--ink) 40%, transparent);
transition: box-shadow .2s, transform .2s;
}
.hero-search:focus-within {
box-shadow: 0 12px 32px -16px color-mix(in oklab, var(--ink) 60%, transparent);
}
.hero-search__icon {
display: flex;
align-items: center;
color: var(--ink-2);
padding-right: 10px;
}
.hero-search__input {
flex: 1;
border: 0;
background: transparent;
font: 500 16px/1.4 var(--font-sans);
color: var(--ink);
outline: none;
padding: 14px 0;
min-width: 0;
}
.hero-search__input::placeholder { color: var(--ink-3); font-weight: 400; }
.hero-search__submit {
border: 0;
background: var(--ink);
color: var(--cream);
font: 600 14px/1 var(--font-sans);
letter-spacing: -0.005em;
padding: 0 22px;
border-radius: 999px;
cursor: pointer;
transition: background .2s;
}
.hero-search__submit:hover { background: var(--accent); }
.hero-search__chips {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-top: 14px;
font-size: 13px;
color: var(--ink-2);
}
.hero-search__try {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-3);
margin-right: 4px;
}
.hero-search__chips .chip {
padding: 5px 12px;
border: 1px solid color-mix(in oklab, var(--ink) 14%, transparent);
border-radius: 999px;
font-size: 13px;
font-family: var(--font-mono);
color: var(--ink-2);
cursor: pointer;
transition: all .15s;
background: transparent;
}
.hero-search__chips .chip:hover {
border-color: var(--ink);
color: var(--ink);
background: var(--cream-2);
}
.home-journal-grid {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 24px;
}
@media (max-width: 1000px) {
.home-journal-grid { grid-template-columns: 1fr; }
}
.home-journal-card {
display: flex;
flex-direction: column;
background: var(--cream);
border: 1px solid color-mix(in oklab, var(--ink) 12%, transparent);
border-radius: 12px;
overflow: hidden;
text-decoration: none;
color: inherit;
cursor: pointer;
transition: transform .2s, box-shadow .2s, border-color .2s;
}
.home-journal-card:hover {
transform: translateY(-2px);
border-color: var(--ink);
box-shadow: 0 18px 40px -24px color-mix(in oklab, var(--ink) 50%, transparent);
}
.home-journal-card--lead {
grid-row: 1 / span 2;
flex-direction: column;
}
.home-journal-card--lead .home-journal-card__cover { aspect-ratio: 5 / 4; }
.home-journal-card--lead .home-journal-card__title { font-size: clamp(1.4rem, 1.4vw + 1rem, 2rem); }
.home-journal-card__cover {
position: relative;
aspect-ratio: 16 / 10;
display: flex;
align-items: center;
justify-content: center;
background: var(--cream-2);
overflow: hidden;
}
.home-journal-card__cover .product-image,
.home-journal-card__cover .product-image-wrap {
transform: scale(1.05);
transition: transform .4s ease;
}
.home-journal-card:hover .home-journal-card__cover .product-image,
.home-journal-card:hover .home-journal-card__cover .product-image-wrap {
transform: scale(1.1);
}
.home-journal-card__sticker {
position: absolute;
top: 14px;
left: 14px;
background: var(--ink);
color: var(--cream);
font: 500 11px/1 var(--font-mono);
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 6px 10px;
border-radius: 4px;
}
.home-journal-card__body {
display: flex;
flex-direction: column;
gap: 12px;
padding: 20px 22px 22px;
flex: 1;
}
.home-journal-card__title {
font-family: var(--font-sans);
font-weight: 600;
font-size: 1.15rem;
line-height: 1.25;
letter-spacing: -0.015em;
color: var(--ink);
margin: 0;
}
.home-journal-card__excerpt {
font-size: 14px;
line-height: 1.55;
color: var(--ink-2);
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.journal-card__meta {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--ink-3);
}
.journal-card__tag {
color: var(--accent-dark, var(--accent));
font-weight: 500;
}
.journal-card__byline {
display: flex;
align-items: center;
gap: 10px;
margin-top: auto;
padding-top: 10px;
font-size: 13px;
color: var(--ink-2);
}
.journal-card__date { color: var(--ink-3); font-size: 12px; }
.journal-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
background: linear-gradient(135deg, var(--accent), var(--accent-dark));
color: var(--cream);
font: 600 13px/1 var(--font-mono);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.journal-avatar--sm { width: 28px; height: 28px; font-size: 11px; }
.journal-header {
padding: 56px 0 40px;
border-bottom: 1px solid color-mix(in oklab, var(--ink) 10%, transparent);
}
.journal-header__grid {
display: grid;
grid-template-columns: 1.6fr 1fr;
gap: 48px;
align-items: end;
margin-top: 28px;
}
@media (max-width: 900px) { .journal-header__grid { grid-template-columns: 1fr; gap: 24px; } }
.journal-header__title {
font-family: var(--font-sans);
font-weight: 700;
font-size: clamp(2rem, 2.6vw + 1.2rem, 3.4rem);
line-height: 1.05;
letter-spacing: -0.03em;
color: var(--ink);
margin: 0;
text-wrap: balance;
}
.journal-header__title em {
font-style: italic;
color: var(--accent-dark, var(--accent));
}
.journal-header__lede {
font-size: 16px;
line-height: 1.6;
color: var(--ink-2);
max-width: 420px;
}
.journal-featured {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 0;
background: var(--cream);
border: 1px solid var(--ink);
border-radius: 16px;
overflow: hidden;
cursor: pointer;
transition: transform .25s, box-shadow .25s;
text-decoration: none;
color: inherit;
}
.journal-featured:hover {
transform: translateY(-2px);
box-shadow: 0 24px 48px -28px color-mix(in oklab, var(--ink) 60%, transparent);
}
@media (max-width: 900px) { .journal-featured { grid-template-columns: 1fr; } }
.journal-featured__cover {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 360px;
border-right: 1px solid color-mix(in oklab, var(--ink) 14%, transparent);
}
.journal-featured__sticker {
position: absolute;
top: 20px;
left: 20px;
background: var(--ink);
color: var(--cream);
padding: 10px 14px;
border-radius: 6px;
display: flex;
flex-direction: column;
gap: 2px;
}
.journal-featured__sticker strong {
font: 600 12px/1 var(--font-mono);
letter-spacing: 0.1em;
text-transform: uppercase;
}
.journal-featured__sticker span {
font: 400 11px/1.2 var(--font-sans);
color: color-mix(in oklab, var(--cream) 70%, transparent);
}
.journal-featured__body {
padding: 40px 44px;
display: flex;
flex-direction: column;
gap: 14px;
justify-content: center;
}
.journal-featured__title {
font-family: var(--font-sans);
font-weight: 700;
font-size: clamp(1.5rem, 1.5vw + 1rem, 2.2rem);
line-height: 1.15;
letter-spacing: -0.02em;
color: var(--ink);
margin: 0;
}
.journal-featured__excerpt {
font-size: 15px;
line-height: 1.6;
color: var(--ink-2);
margin: 0;
}
.journal-featured__cta {
margin-left: auto;
font-family: var(--font-mono);
font-size: 13px;
color: var(--accent-dark, var(--accent));
font-weight: 500;
}
.journal-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
@media (max-width: 1000px) { .journal-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .journal-grid { grid-template-columns: 1fr; } }
.journal-card {
display: flex;
flex-direction: column;
background: var(--cream);
border: 1px solid color-mix(in oklab, var(--ink) 12%, transparent);
border-radius: 12px;
overflow: hidden;
text-decoration: none;
color: inherit;
cursor: pointer;
transition: transform .2s, box-shadow .2s, border-color .2s;
}
.journal-card:hover {
transform: translateY(-2px);
border-color: var(--ink);
box-shadow: 0 16px 32px -20px color-mix(in oklab, var(--ink) 50%, transparent);
}
.journal-card__cover {
aspect-ratio: 5 / 3;
display: flex;
align-items: center;
justify-content: center;
background: var(--cream-2);
overflow: hidden;
}
.journal-card__body {
padding: 18px 20px 22px;
display: flex;
flex-direction: column;
gap: 10px;
flex: 1;
}
.journal-card__title {
font-family: var(--font-sans);
font-weight: 600;
font-size: 1.05rem;
line-height: 1.3;
letter-spacing: -0.01em;
color: var(--ink);
margin: 0;
}
.journal-card__excerpt {
font-size: 13.5px;
line-height: 1.55;
color: var(--ink-2);
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.article-page { background: var(--cream); }
.article-hero {
padding: 48px 0 40px;
border-bottom: 1px solid color-mix(in oklab, var(--ink) 10%, transparent);
}
.article-hero__container { max-width: 800px; margin: 0 auto; }
.article-hero__tag {
display: inline-block;
font: 500 11px/1 var(--font-mono);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--accent-dark, var(--accent));
margin: 16px 0 18px;
}
.article-hero__title {
font-family: var(--font-sans);
font-weight: 700;
font-size: clamp(2rem, 3vw + 1rem, 3.4rem);
line-height: 1.05;
letter-spacing: -0.03em;
color: var(--ink);
margin: 0 0 20px;
text-wrap: balance;
}
.article-hero__lede {
font-size: 18px;
line-height: 1.55;
color: var(--ink-2);
margin: 0 0 32px;
max-width: 700px;
}
.article-hero__meta {
display: flex;
align-items: center;
gap: 14px;
padding-top: 20px;
border-top: 1px solid color-mix(in oklab, var(--ink) 8%, transparent);
font-size: 14px;
color: var(--ink-2);
}
.article-hero__meta-bottom {
font-family: var(--font-mono);
font-size: 12px;
color: var(--ink-3);
margin-top: 2px;
}
.article-hero__share {
margin-left: auto;
display: flex;
gap: 8px;
}
.btn-icon {
width: 38px;
height: 38px;
border-radius: 50%;
border: 1px solid color-mix(in oklab, var(--ink) 16%, transparent);
background: var(--cream);
color: var(--ink);
font-size: 16px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all .15s;
}
.btn-icon:hover { border-color: var(--ink); background: var(--cream-2); }
.article-body { padding: 56px 0 80px; }
.article-body__container {
max-width: 720px;
margin: 0 auto;
}
.article-body__container > p,
.article-body__container > ol,
.article-body__container > ul {
font-family: var(--font-sans);
font-size: 18px;
line-height: 1.7;
color: var(--ink);
margin: 0 0 24px;
text-wrap: pretty;
}
.article-body__container em { font-style: italic; }
.article-body__container strong { font-weight: 600; }
.article-lead {
font-size: 21px !important;
line-height: 1.55 !important;
color: var(--ink) !important;
margin-bottom: 32px !important;
letter-spacing: -0.01em;
}
.article-lead strong { color: var(--accent-dark, var(--accent)); }
.article-h2 {
font-family: var(--font-sans);
font-weight: 700;
font-size: 1.75rem;
line-height: 1.15;
letter-spacing: -0.02em;
color: var(--ink);
margin: 48px 0 18px;
}
.article-tldr {
margin: 32px 0 40px;
padding: 28px 32px;
background: var(--cream-2);
border: 1px solid color-mix(in oklab, var(--ink) 12%, transparent);
border-radius: 12px;
border-left: 4px solid var(--accent);
}
.article-tldr__head {
display: flex;
align-items: baseline;
gap: 12px;
margin-bottom: 18px;
}
.article-tldr__label {
font: 600 12px/1 var(--font-mono);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--accent-dark, var(--accent));
background: var(--cream);
padding: 6px 10px;
border-radius: 4px;
}
.article-tldr__head > span:last-child {
font-size: 14px;
color: var(--ink-2);
}
.article-tldr__cols {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
@media (max-width: 720px) { .article-tldr__cols { grid-template-columns: 1fr; } }
.article-tldr__col-head {
font: 600 12px/1 var(--font-mono);
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 10px;
padding-bottom: 6px;
border-bottom: 1px solid color-mix(in oklab, var(--ink) 14%, transparent);
}
.article-tldr__col-head--buy  { color: #2D7A4A; }
.article-tldr__col-head--skip { color: var(--accent-dark, #C53E56); }
.article-tldr__col-head--mid  { color: var(--ink-2); }
.article-tldr__cols ul {
list-style: none;
padding: 0;
margin: 0;
font-size: 14px !important;
line-height: 1.7 !important;
}
.article-tldr__cols li {
padding: 4px 0;
color: var(--ink) !important;
}
.article-product {
display: grid;
grid-template-columns: 200px 1fr;
gap: 28px;
align-items: start;
margin: 28px 0 36px;
padding: 24px;
background: var(--cream-2);
border: 1px solid color-mix(in oklab, var(--ink) 10%, transparent);
border-radius: 12px;
}
@media (max-width: 700px) {
.article-product {
display: flex !important;
flex-wrap: wrap;
align-items: flex-start;
gap: 12px;
padding: 12px !important;
margin: 16px 0 20px !important;
border-radius: var(--r-lg);
}
.article-product__img {
flex: 0 0 96px !important;
width: 96px !important;
height: 96px !important;
aspect-ratio: 1 / 1 !important;
margin: 0 !important;
background: var(--cream) !important;
border-radius: 10px !important;
overflow: hidden;
align-self: flex-start !important;
}
.article-product__img .product-img--real,
.article-product__img .product-img {
width: 100% !important;
height: 100% !important;
aspect-ratio: 1 / 1 !important;
padding: 6px;
background: transparent !important;
}
.article-product__img .photo-frame { width: 100% !important; height: 100% !important; }
.article-product__img img {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
max-width: none !important;
max-height: none !important;
}
.article-product__body {
flex: 1 1 150px !important;
min-width: 0 !important;
}
.article-product__rank { margin-bottom: 4px !important; }
.article-product__name { font-size: 1.05rem !important; margin-bottom: 6px !important; }
.article-product__score { margin-bottom: 8px !important; }
.article-product__why {
font-size: 13.5px !important;
line-height: 1.5 !important;
margin: 0 0 10px !important;
-webkit-line-clamp: 3;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
}
.article-product__cta { width: 100%; gap: 8px; }
.article-product__cta .btn-amazon { flex: 1; min-height: 44px; justify-content: center; }
}
.article-product__img {
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 1;
background: var(--cream);
border-radius: 8px;
cursor: pointer;
}
.article-product__rank {
font: 500 11px/1 var(--font-mono);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-3);
margin-bottom: 8px;
}
.article-product__brand {
font: 600 11px/1 var(--font-mono);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--accent-dark, var(--accent));
margin-bottom: 4px;
}
.article-product__name {
font-family: var(--font-sans);
font-weight: 600;
font-size: 1.25rem;
line-height: 1.2;
color: var(--ink);
margin: 0 0 10px;
}
.article-product__score {
font-size: 13px;
color: var(--ink-2);
margin-bottom: 12px;
font-family: var(--font-mono);
}
.article-product__score strong {
color: var(--ink);
font-size: 15px;
}
.article-product__why {
font-size: 15px !important;
line-height: 1.6 !important;
color: var(--ink) !important;
margin: 0 0 16px !important;
}
.article-product__cta {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
}
.article-quote {
margin: 12px 0;
padding: 12px 16px;
background: var(--cream);
border-left: 3px solid var(--accent);
border-radius: 0 6px 6px 0;
font-size: 14px;
}
.article-quote p {
font-style: italic;
color: var(--ink) !important;
margin: 0 0 6px !important;
font-size: 14px !important;
line-height: 1.5 !important;
}
.article-quote footer {
font-family: var(--font-mono);
font-size: 11px;
color: var(--ink-3);
letter-spacing: 0.04em;
}
.article-skips {
display: flex;
flex-direction: column;
gap: 0;
margin: 24px 0 36px;
border-top: 1px solid color-mix(in oklab, var(--ink) 12%, transparent);
}
.article-skip {
display: grid;
grid-template-columns: 80px 1fr;
gap: 20px;
padding: 20px 0;
border-bottom: 1px solid color-mix(in oklab, var(--ink) 12%, transparent);
}
.article-skip__num {
font: 600 14px/1 var(--font-mono);
letter-spacing: 0.06em;
color: var(--accent-dark, var(--accent));
padding-top: 4px;
}
.article-skip__brand {
font: 600 11px/1 var(--font-mono);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-3);
margin-bottom: 6px;
}
.article-skip__name {
font-family: var(--font-sans);
font-weight: 600;
font-size: 1.1rem;
margin: 0 0 10px;
color: var(--ink);
}
.article-skip p {
font-size: 15px !important;
line-height: 1.6 !important;
color: var(--ink-2) !important;
margin: 0 !important;
}
.article-steps {
list-style: none;
counter-reset: step;
padding: 0;
margin: 24px 0 32px !important;
}
.article-steps li {
counter-increment: step;
position: relative;
padding: 14px 0 14px 56px;
border-bottom: 1px dashed color-mix(in oklab, var(--ink) 14%, transparent);
font-size: 16px !important;
line-height: 1.55 !important;
}
.article-steps li:last-child { border-bottom: none; }
.article-steps li::before {
content: counter(step, decimal-leading-zero);
position: absolute;
left: 0;
top: 14px;
font: 600 14px/1 var(--font-mono);
color: var(--accent-dark, var(--accent));
background: var(--cream-2);
padding: 6px 10px;
border-radius: 4px;
}
.article-end-cta {
margin: 48px 0 32px;
padding: 32px;
background: var(--ink);
color: var(--cream);
border-radius: 12px;
display: grid;
grid-template-columns: 1fr auto;
gap: 24px;
align-items: center;
}
@media (max-width: 720px) { .article-end-cta { grid-template-columns: 1fr; } }
.article-end-cta strong {
font-family: var(--font-sans);
font-weight: 700;
font-size: 1.4rem;
display: block;
margin-bottom: 6px;
}
.article-end-cta p {
font-size: 14px !important;
line-height: 1.5 !important;
color: color-mix(in oklab, var(--cream) 80%, transparent) !important;
margin: 0 !important;
}
.article-end-cta .btn--primary {
background: var(--accent);
color: var(--cream);
border-color: var(--accent);
}
.article-end-cta .btn--primary:hover { background: var(--accent-dark); }
.article-disclosure {
font-size: 13px !important;
line-height: 1.6 !important;
color: var(--ink-3) !important;
padding: 16px 20px !important;
background: var(--cream-2);
border-radius: 8px;
margin-top: 24px !important;
}
.article-disclosure strong { color: var(--ink-2); }
.article-disclosure a {
color: var(--accent-dark, var(--accent));
text-decoration: underline;
text-underline-offset: 2px;
}
.breadcrumb {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-mono);
font-size: 12px;
color: var(--ink-3);
letter-spacing: 0.04em;
}
.breadcrumb a { color: var(--ink-2); cursor: pointer; }
.breadcrumb a:hover { color: var(--ink); text-decoration: underline; }
.breadcrumb span:last-child { color: var(--ink); }
.photo-frame {
position: relative;
width: 100%;
height: 100%;
background: var(--cream-2, #F2EBE0);
border: 1px solid var(--ink, #1A1612);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
color: var(--ink-3, #6B5F52);
}
[data-theme="dark"] .photo-frame {
background: #1F1816;
border-color: #3A2F2A;
color: #6B5F52;
}
.photo-frame__diag {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0.18;
pointer-events: none;
}
.photo-frame__label {
position: relative;
z-index: 2;
text-align: center;
background: var(--cream-2, #F2EBE0);
padding: 6px 10px;
}
[data-theme="dark"] .photo-frame__label { background: #1F1816; }
.photo-frame__kicker {
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-3);
line-height: 1;
margin-bottom: 4px;
}
.photo-frame__brand {
font-family: var(--font-display);
font-weight: 600;
font-size: 13px;
color: var(--ink);
letter-spacing: -0.01em;
line-height: 1.1;
}
.cat-card__cell .photo-frame { border: none; background: transparent; }
.cat-card__cell .photo-frame__label { background: transparent; }
.cat-card__cell { padding: 0; }
.top-row__img .photo-frame { aspect-ratio: 1; }
.rail-card__img-wrap .photo-frame { width: 100%; height: 100%; aspect-ratio: 1; }
.pdp__media .photo-frame {
width: 100%;
height: 100%;
aspect-ratio: 1;
background: transparent;
border: none;
}
.pdp__media .photo-frame__label { background: transparent; padding: 12px 16px; }
.pdp__media .photo-frame__kicker { font-size: 11px; }
.pdp__media .photo-frame__brand { font-size: 22px; }
.pdp__media .photo-frame__diag { opacity: 0.12; }
.rank-row__img--big .photo-frame { width: 100%; height: 100%; aspect-ratio: 1; }
.sent-bar {
display: flex;
flex-direction: column;
gap: 8px;
width: 100%;
}
.sent-bar__track {
display: flex;
height: 10px;
background: var(--gray, #E8E0D2);
border: 1px solid var(--ink, #1A1612);
overflow: hidden;
position: relative;
}
[data-theme="dark"] .sent-bar__track {
background: #2A211D;
border-color: #3A2F2A;
}
.sent-bar__seg {
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-mono);
font-size: 9px;
font-weight: 600;
letter-spacing: 0.05em;
color: white;
border-right: 1px solid var(--ink);
transition: width 0.4s ease;
min-width: 0;
}
.sent-bar__seg:last-child { border-right: none; }
.sent-bar__seg--pos { background: var(--accent, #E0526A); }
.sent-bar__seg--neu { background: #C9B894; color: var(--ink); }
.sent-bar__seg--neg { background: var(--ink, #1A1612); color: white; }
.sent-bar__seg-pct {
white-space: nowrap;
padding: 0 4px;
text-shadow: 0 1px 0 rgba(0,0,0,0.15);
}
.sent-bar__seg--neu .sent-bar__seg-pct { text-shadow: none; }
.sent-bar--sm .sent-bar__track { height: 6px; }
.sent-bar--sm .sent-bar__seg-pct { display: none; }
.sent-bar--md .sent-bar__track { height: 10px; }
.sent-bar--lg .sent-bar__track { height: 14px; }
.sent-bar--lg .sent-bar__seg { font-size: 10px; }
.sent-bar__legend {
display: flex;
gap: 16px;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-3);
flex-wrap: wrap;
}
.sent-bar__legend-item {
display: inline-flex;
align-items: center;
gap: 6px;
}
.sent-bar__dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--gray);
border: 1px solid var(--ink);
}
.sent-bar__legend-item--pos .sent-bar__dot { background: var(--accent); }
.sent-bar__legend-item--neu .sent-bar__dot { background: #C9B894; }
.sent-bar__legend-item--neg .sent-bar__dot { background: var(--ink); }
.sent-bar__legend-count {
margin-left: 4px;
color: var(--ink);
font-weight: 600;
}
.top-row__tagline,
.rail-card__tagline,
.pdp__tagline {
font-family: var(--font-serif, Georgia, serif);
font-style: italic;
color: var(--ink-2, #4A413A);
line-height: 1.35;
text-wrap: pretty;
}
.top-row__tagline { font-size: 14px; margin: 4px 0 8px; }
.rail-card__tagline { font-size: 13px; margin: 6px 0 10px; }
.pdp__tagline {
font-size: 19px;
margin: 4px 0 24px;
max-width: 56ch;
color: var(--ink-2);
}
.top-row__pct { margin-bottom: 6px; font-size: 13px; color: var(--ink-2); }
.top-row__pct strong { font-size: 22px; color: var(--ink); font-weight: 700; letter-spacing: -0.02em; }
.top-row__score { display: flex; flex-direction: column; gap: 8px; }
.top-row__score .sent-bar__legend { display: none; }
.rail-card__main .sent-bar { margin: 4px 0 8px; }
.pdp__sentiment-hero {
border: 1px solid var(--ink);
background: var(--cream, #FAF7F2);
padding: 20px 22px;
margin-bottom: 20px;
display: flex;
flex-direction: column;
gap: 14px;
}
[data-theme="dark"] .pdp__sentiment-hero { background: #1F1816; border-color: #3A2F2A; }
.pdp__sentiment-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
}
.pdp__sentiment-pct {
font-size: 16px;
color: var(--ink-2);
margin-bottom: 4px;
}
.pdp__sentiment-pct strong {
font-family: var(--font-display);
font-size: 38px;
font-weight: 700;
color: var(--ink);
letter-spacing: -0.03em;
margin-right: 6px;
}
.pdp__sentiment-sub {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.06em;
color: var(--ink-3);
text-transform: uppercase;
line-height: 1.5;
}
.pdp__sentiment-ring,
.pdp__sentiment-num { flex-shrink: 0; }
@media (max-width: 640px) {
.pdp__sentiment-head { flex-direction: column; align-items: flex-start; }
.pdp__sentiment-pct strong { font-size: 32px; }
.sent-bar__legend { gap: 10px; font-size: 9px; }
}
.cat-card__hero {
width: 100%;
aspect-ratio: 16 / 11;
background: var(--cream-2, #F2EBE0);
border-bottom: 1px solid var(--ink, #1A1612);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
padding: 0;
}
[data-theme="dark"] .cat-card__hero {
background: #1F1816;
border-bottom-color: #3A2F2A;
}
.cat-card--moat .cat-card__hero {
background: var(--ink, #1A1612);
border-bottom-color: var(--ink, #1A1612);
}
.cat-illo {
width: 100%;
height: 100%;
display: block;
}
.cat-card__collage { display: none; }
.home-journal-card__cover,
.journal-card__cover,
.journal-featured__cover {
background: var(--cream-2, #F2EBE0) !important;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
border-bottom: 1px solid var(--ink, #1A1612);
}
[data-theme="dark"] .home-journal-card__cover,
[data-theme="dark"] .journal-card__cover,
[data-theme="dark"] .journal-featured__cover {
background: #1F1816 !important;
border-bottom-color: #3A2F2A;
}
.home-journal-card__cover .article-illo,
.journal-card__cover .article-illo,
.journal-featured__cover .article-illo {
width: 100%;
height: 100%;
display: block;
}
.home-journal-card--lead .home-journal-card__cover,
.journal-featured__cover {
background: var(--cream, #FAF7F2) !important;
}
[data-theme="dark"] .home-journal-card--lead .home-journal-card__cover,
[data-theme="dark"] .journal-featured__cover {
background: #2A211D !important;
}
.home-journal-card__sticker,
.journal-featured__sticker {
position: absolute;
z-index: 2;
}
.cat-card { overflow: hidden; }
:root {
--tone-pos: #2D7A3E;
--tone-pos-soft: #C8DDC4;
--tone-pos-bg: #EBF3E7;
--tone-mid: #B47A1F;
--tone-mid-soft: #ECD9B0;
--tone-mid-bg: #F7EDD8;
--tone-neg: #B33A2F;
--tone-neg-soft: #E8C2BC;
--tone-neg-bg: #F5DEDA;
}
[data-theme="dark"] {
--tone-pos: #7AB088;
--tone-pos-soft: #2D4A33;
--tone-pos-bg: #1F3325;
--tone-mid: #D4B070;
--tone-mid-soft: #4A3A1F;
--tone-mid-bg: #33271A;
--tone-neg: #D4756A;
--tone-neg-soft: #4A2A24;
--tone-neg-bg: #33201D;
}
.sent-bar__seg--pos { background: var(--tone-pos) !important; color: white; }
.sent-bar__seg--neu { background: var(--tone-mid) !important; color: white; }
.sent-bar__seg--neg { background: var(--tone-neg) !important; color: white; }
.sent-bar__legend-item--pos .sent-bar__dot { background: var(--tone-pos); border-color: var(--tone-pos); }
.sent-bar__legend-item--neu .sent-bar__dot { background: var(--tone-mid); border-color: var(--tone-mid); }
.sent-bar__legend-item--neg .sent-bar__dot { background: var(--tone-neg); border-color: var(--tone-neg); }
.sent-bar__seg .sent-bar__seg-pct { text-shadow: 0 1px 0 rgba(0,0,0,0.18); }
.score-ring[data-tone="high"] svg .fg { stroke: var(--tone-pos); }
.score-ring[data-tone="mid"] svg .fg { stroke: var(--tone-mid); }
.score-ring[data-tone="low"] svg .fg { stroke: var(--tone-mid); }
.score-ring[data-tone="neg"] svg .fg { stroke: var(--tone-neg); }
.score-ring[data-tone="high"] .score-ring__pct { color: var(--tone-pos); }
.score-ring[data-tone="mid"] .score-ring__pct,
.score-ring[data-tone="low"] .score-ring__pct { color: var(--tone-mid); }
.score-ring[data-tone="neg"] .score-ring__pct { color: var(--tone-neg); }
.score-num[data-tone="high"] em { color: var(--tone-pos); }
.score-num[data-tone="mid"] em,
.score-num[data-tone="low"] em { color: var(--tone-mid); }
.score-num[data-tone="neg"] em { color: var(--tone-neg); }
.top-row__pct[data-tone="high"] strong,
.rail-card__pct[data-tone="high"] strong,
.pdp__sentiment-pct[data-tone="high"] strong { color: var(--tone-pos); }
.top-row__pct[data-tone="mid"] strong,
.top-row__pct[data-tone="low"] strong,
.rail-card__pct[data-tone="mid"] strong,
.rail-card__pct[data-tone="low"] strong,
.pdp__sentiment-pct[data-tone="mid"] strong,
.pdp__sentiment-pct[data-tone="low"] strong { color: var(--tone-mid); }
.top-row__pct[data-tone="neg"] strong,
.rail-card__pct[data-tone="neg"] strong,
.pdp__sentiment-pct[data-tone="neg"] strong { color: var(--tone-neg); }
.product-illo {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
background: transparent;
}
.product-illo__svg {
width: 100%;
height: 100%;
display: block;
}
.product-illo--sm .product-illo__svg { max-height: 100%; }
.product-illo--md .product-illo__svg { max-height: 100%; }
.product-illo--lg .product-illo__svg { max-height: 100%; }
.top-row__img,
.rank-row__img--big,
.rail-card__img-wrap {
background: var(--cream-2, #F2EBE0);
border: 1px solid var(--ink, #1A1612);
overflow: hidden;
}
[data-theme="dark"] .top-row__img,
[data-theme="dark"] .rank-row__img--big,
[data-theme="dark"] .rail-card__img-wrap {
background: #1F1816;
border-color: #3A2F2A;
}
.reddit-pulse {
border: 1px solid var(--ink, #1A1612);
background: var(--cream-2, #F2EBE0);
padding: 0;
margin: 24px 0;
position: relative;
}
[data-theme="dark"] .reddit-pulse {
background: #1F1816;
border-color: #3A2F2A;
}
.reddit-pulse__head {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 22px;
border-bottom: 1px solid var(--ink);
background: var(--cream, #FAF7F2);
flex-wrap: wrap;
gap: 8px;
}
[data-theme="dark"] .reddit-pulse__head { background: #2A211D; border-bottom-color: #3A2F2A; }
.reddit-pulse__kicker {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink);
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 8px;
}
.reddit-pulse__live {
color: var(--tone-neg);
font-size: 14px;
animation: pulseDot 1.6s ease-in-out infinite;
}
@keyframes pulseDot {
0%, 100% { opacity: 1; }
50% { opacity: 0.35; }
}
.reddit-pulse__count {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.05em;
color: var(--ink-3, #6B5F52);
text-transform: uppercase;
}
.reddit-pulse__count strong { color: var(--ink); font-weight: 700; }
.reddit-pulse__hero-quote {
padding: 32px 32px 24px;
position: relative;
border-bottom: 1px solid color-mix(in oklab, var(--ink) 20%, transparent);
}
.reddit-pulse__hero-mark {
position: absolute;
top: 4px;
left: 14px;
font-family: var(--font-display);
font-size: 88px;
font-weight: 700;
color: var(--tone-pos);
line-height: 1;
opacity: 0.35;
pointer-events: none;
}
.reddit-pulse__hero-body {
font-family: var(--font-display, Georgia, serif);
font-size: 22px;
line-height: 1.4;
color: var(--ink);
font-weight: 500;
letter-spacing: -0.01em;
text-wrap: pretty;
margin-bottom: 14px;
position: relative;
z-index: 1;
}
.reddit-pulse__hero-body mark {
background: var(--tone-pos-bg);
color: var(--ink);
padding: 0 4px;
font-weight: 600;
border-bottom: 1px solid var(--tone-pos);
}
.reddit-pulse__hero-meta {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.06em;
color: var(--ink-3);
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
text-transform: uppercase;
}
.reddit-pulse__user { color: var(--ink); font-weight: 600; }
.reddit-pulse__sep { opacity: 0.4; }
.reddit-pulse__minis {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
border-bottom: 1px solid color-mix(in oklab, var(--ink) 20%, transparent);
}
.reddit-pulse__mini {
padding: 18px 18px;
border-right: 1px solid color-mix(in oklab, var(--ink) 20%, transparent);
display: flex;
flex-direction: column;
gap: 10px;
justify-content: space-between;
min-height: 130px;
}
.reddit-pulse__mini:last-child { border-right: none; }
.reddit-pulse__mini-body {
font-family: var(--font-serif, Georgia, serif);
font-size: 14px;
line-height: 1.45;
color: var(--ink-2, #4A413A);
font-style: italic;
text-wrap: pretty;
}
.reddit-pulse__mini-meta {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.06em;
color: var(--ink-3);
text-transform: uppercase;
display: flex;
justify-content: space-between;
gap: 8px;
}
.reddit-pulse__mini-meta .reddit-pulse__sub { color: var(--ink); font-weight: 600; }
.reddit-pulse__subs {
padding: 14px 22px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
border-bottom: 1px solid color-mix(in oklab, var(--ink) 20%, transparent);
}
.reddit-pulse__subs-label {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.12em;
color: var(--ink-3);
text-transform: uppercase;
margin-right: 6px;
}
.reddit-pulse__sub-pill {
display: inline-flex;
align-items: center;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
padding: 4px 10px;
border: 1px solid var(--ink);
background: var(--cream, #FAF7F2);
color: var(--ink);
border-radius: 999px;
letter-spacing: 0.02em;
}
[data-theme="dark"] .reddit-pulse__sub-pill { background: #2A211D; }
.reddit-pulse__cta {
display: block;
text-align: center;
padding: 14px 22px;
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink);
font-weight: 600;
background: var(--ink);
color: var(--cream);
cursor: pointer;
text-decoration: none;
transition: background 0.15s;
}
.reddit-pulse__cta:hover { background: var(--tone-pos); color: white; }
@media (max-width: 720px) {
.reddit-pulse__hero-body { font-size: 17px; }
.reddit-pulse__hero-mark { font-size: 64px; }
.reddit-pulse__minis { grid-template-columns: 1fr; }
.reddit-pulse__mini { border-right: none; border-bottom: 1px solid color-mix(in oklab, var(--ink) 20%, transparent); }
.reddit-pulse__mini:last-child { border-bottom: none; }
}
.site-nav__link[href], .logo[href] { cursor: pointer; }
.product-img--real {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
position: relative;
border-radius: var(--r-md);
overflow: hidden;
}
.product-img--real img {
width: 100%;
height: 100%;
object-fit: contain;
background: var(--cream);
}
.pdp__media .product-img--real { aspect-ratio: 1; max-width: 480px; max-height: 480px; margin: 0 auto; }
.rail-card__img-wrap .product-img--real { aspect-ratio: 1; }
.top-row__img .product-img--real { aspect-ratio: 1; width: 84px; }
.rank-row__img .product-img--real { aspect-ratio: 1; width: 120px; }
.pdp__pin-link {
display: inline-flex;
align-items: center;
gap: 6px;
background: transparent;
border: 0;
padding: 0;
margin: 0;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-3);
cursor: pointer;
white-space: nowrap;
flex-shrink: 0;
transition: color 140ms ease;
-webkit-tap-highlight-color: transparent;
}
.pdp__pin-icon {
display: block;
color: #E60023;
transition: transform 140ms ease;
}
.pdp__pin-link:hover,
.pdp__pin-link:focus-visible {
color: var(--accent);
outline: none;
}
.pdp__pin-link:hover .pdp__pin-icon { transform: scale(1.1); }
.article-hero__cover { position: relative; }
.pin-link--blog {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 10px;
background: transparent;
border: 0;
padding: 0;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-3);
cursor: pointer;
transition: color 140ms ease;
-webkit-tap-highlight-color: transparent;
}
.pin-link--blog:hover,
.pin-link--blog:focus-visible {
color: var(--accent);
outline: none;
}
@media (max-width: 700px) {
.pdp__media-meta { left: 14px; right: 14px; bottom: 14px; gap: 10px; }
.pdp__pin-link { font-size: 9px; letter-spacing: 0.12em; gap: 5px; }
.pdp__media-watermark { font-size: 9px; letter-spacing: 0.10em; }
}
@media (max-width: 420px) {
.pdp__media-watermark { max-width: 60%; }
}
.verdict-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
border-radius: 999px;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
font-weight: 600;
white-space: nowrap;
}
.verdict-badge--holy-grail   { background: var(--coral); color: white; }
.verdict-badge--editors-pick { background: var(--ink); color: var(--cream); }
.verdict-badge--top-pick     { background: var(--forest); color: white; }
.verdict-badge--highly-rec   { background: var(--cream-2); color: var(--ink); border: 1px solid var(--gray-2); }
.verdict-badge--recommended  { background: transparent; color: var(--ink-3); border: 1px solid var(--gray-2); }
.verdict-badge--mixed        { background: var(--gold); color: white; opacity: 0.85; }
.verdict-badge--early-signal { background: transparent; color: var(--ink-3); border: 1px dashed var(--gold); font-style: italic; }
.pdp__buy-score-ci {
display: inline-block;
margin-top: 4px;
font-size: 11px;
color: var(--ink-4);
font-family: var(--mono, "JetBrains Mono", monospace);
letter-spacing: 0.02em;
border-bottom: 1px dotted var(--gray-2);
cursor: help;
}
.amazon-chip {
display: inline-flex;
align-items: baseline;
gap: 2px;
font-family: var(--mono, "JetBrains Mono", monospace);
font-size: 11px;
letter-spacing: 0.02em;
color: var(--ink-3);
white-space: nowrap;
}
.amazon-chip__star { color: #F59E0B; font-size: 12px; line-height: 1; }
.amazon-chip__rating { font-weight: 600; color: var(--ink-2); }
.amazon-chip__sep { color: var(--ink-4); }
.amazon-chip__reviews { color: var(--ink-3); }
.rail-card__amazon, .top-row__amazon, .rank-row__amazon {
margin-top: 6px;
}
.rank-row__amazon { margin-top: 8px; opacity: 0.85; }
.pdp__divergence {
margin: 24px 0;
padding: 18px 20px;
background: var(--cream-2);
border-left: 3px solid var(--coral);
border-radius: 0 6px 6px 0;
}
.pdp__divergence-eyebrow {
font-family: var(--mono, "JetBrains Mono", monospace);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--coral);
margin-bottom: 10px;
}
.pdp__divergence-title {
font-family: var(--font-display, serif);
font-size: 19px;
line-height: 1.3;
color: var(--ink);
margin-bottom: 10px;
letter-spacing: -0.01em;
}
.pdp__divergence-body {
font-size: 14px;
line-height: 1.55;
color: var(--ink-2);
}
.pdp__divergence-body strong { color: var(--ink); }
.top-row__img {
background: var(--cream-2);
border-radius: var(--r-md);
width: 84px;
height: 84px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.top-row__img img {
max-width: 80%;
max-height: 80%;
object-fit: contain;
}
.trust-badge {
background: var(--cream-2);
border: 1px solid var(--gray);
border-radius: var(--r-lg);
padding: 24px;
font-size: 14px;
line-height: 1.5;
}
.trust-badge__top {
display: flex; align-items: center; gap: 10px;
font-family: var(--font-mono); font-size: 11px;
letter-spacing: 0.06em;
color: var(--ink-3);
padding-bottom: 16px;
border-bottom: 1px solid var(--gray-2);
}
.trust-badge__dot { width: 8px; height: 8px; background: var(--forest); border-radius: 50%; }
.trust-badge__stats {
display: grid; grid-template-columns: repeat(2, 1fr);
gap: 16px;
padding: 16px 0;
}
.trust-badge__stats > div { display: flex; flex-direction: column; }
.trust-badge__stats strong {
font-family: var(--font-display); font-size: 28px; font-weight: 700;
color: var(--ink); line-height: 1;
}
.trust-badge__stats span {
font-family: var(--font-mono); font-size: 10px;
letter-spacing: 0.1em; text-transform: uppercase;
color: var(--ink-3); margin-top: 4px;
}
.trust-badge__bottom {
font-size: 13px; color: var(--ink-2);
padding-top: 16px;
border-top: 1px solid var(--gray-2);
}
.trust-badge__bottom a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.hero__lean-grid {
display: grid;
grid-template-columns: 1.3fr 1fr;
gap: 64px;
align-items: start;
}
@media (max-width: 980px) {
.hero__lean-grid { grid-template-columns: 1fr; }
}
.hero__sub-link {
display: inline-block;
font-family: var(--font-mono); font-size: 13px;
color: var(--ink-3); text-decoration: underline;
text-underline-offset: 4px;
cursor: pointer;
}
.top-list { display: flex; flex-direction: column; gap: 0; }
.top-row {
display: grid;
grid-template-columns: 60px 100px 1fr 280px 200px;
gap: 24px;
align-items: center;
padding: 24px 0;
border-bottom: 1px solid var(--gray);
}
.top-row__rank {
font-family: var(--font-mono); font-size: 32px; font-weight: 600;
color: var(--ink-3); line-height: 1;
}
.top-row__brand {
font-family: var(--font-mono); font-size: 11px;
letter-spacing: 0.14em; text-transform: uppercase;
color: var(--ink-3); margin-bottom: 4px;
}
.top-row__name { font-size: 18px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.top-row__tagline { font-size: 14px; color: var(--ink-2); margin-bottom: 8px; line-height: 1.45; }
.top-row__subs { display: flex; gap: 6px; flex-wrap: wrap; }
.top-row__pct {
font-family: var(--font-mono); font-size: 13px;
color: var(--ink-2);
margin-bottom: 8px;
}
.top-row__pct strong { font-size: 22px; color: var(--ink); font-weight: 700; }
.top-row__pct[data-tone="high"] strong { color: var(--forest); }
.top-row__pct[data-tone="mid"] strong { color: var(--gold); }
.top-row__pct[data-tone="low"] strong { color: var(--accent); }
.top-row__meta {
font-family: var(--font-mono); font-size: 11px;
color: var(--ink-3);
margin-top: 6px;
}
.top-row__cta { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.top-row__details {
font-family: var(--font-mono); font-size: 12px;
color: var(--ink-3); text-decoration: underline;
text-underline-offset: 3px;
text-align: center;
}
@media (max-width: 980px) {
.top-row { grid-template-columns: 50px 80px 1fr; gap: 16px; }
.top-row__score, .top-row__cta { grid-column: 1 / -1; }
}
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.pillar { padding: 28px; background: var(--cream); border-radius: var(--r-lg); border: 1px solid var(--gray); }
.pillar__num {
font-family: var(--font-mono); font-size: 40px; font-weight: 700;
color: var(--accent); line-height: 1; margin-bottom: 16px;
}
.pillar__title {
font-family: var(--font-display); font-size: 20px; font-weight: 600;
color: var(--ink); margin-bottom: 12px;
}
@media (max-width: 980px) { .pillars { grid-template-columns: 1fr; } }
.home-journal-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 24px; }
.home-journal-card {
display: flex; flex-direction: column;
background: var(--cream); border-radius: var(--r-lg); overflow: hidden;
border: 1px solid var(--gray);
transition: transform .15s, box-shadow .15s;
}
.home-journal-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.home-journal-card__cover {
aspect-ratio: 16/9; background: var(--cream-2);
position: relative;
display: flex; align-items: center; justify-content: center;
border-bottom: 1px solid var(--gray);
overflow: hidden;
}
.home-journal-card__cover img { width: 100%; height: 100%; object-fit: cover; }
.home-journal-card__sticker {
position: absolute; top: 14px; left: 14px;
padding: 4px 10px;
background: var(--ink); color: var(--cream);
font-family: var(--font-mono); font-size: 10px;
letter-spacing: 0.12em; text-transform: uppercase;
border-radius: 999px;
}
.home-journal-card__body { padding: 20px 22px 22px; }
.home-journal-card__title {
font-family: var(--font-display); font-size: 22px; font-weight: 600;
color: var(--ink); margin: 8px 0 10px; line-height: 1.2;
}
.home-journal-card__excerpt { font-size: 14px; color: var(--ink-2); line-height: 1.5; margin-bottom: 16px; }
.home-journal-card--lead .home-journal-card__title { font-size: 28px; }
@media (max-width: 980px) { .home-journal-grid { grid-template-columns: 1fr; } }
.article-body { font-size: 17px; line-height: 1.7; color: var(--ink-2); }
.article-body p { margin-bottom: 1.4em; }
.article-body h2 {
font-family: var(--font-display); font-size: 28px; font-weight: 700;
color: var(--ink); margin: 56px 0 18px;
letter-spacing: -0.02em;
}
.article-body h3 {
font-family: var(--font-display); font-size: 20px; font-weight: 600;
color: var(--ink); margin: 32px 0 12px;
}
.article-body ul, .article-body ol { margin: 0 0 1.4em 1.4em; }
.article-body li { margin-bottom: 0.6em; }
.article-body strong { color: var(--ink); }
.article-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.article-body blockquote {
margin: 28px 0;
padding: 18px 22px;
border-left: 3px solid var(--accent);
background: var(--cream-2);
font-style: italic;
color: var(--ink);
}
.article-body table {
width: 100%; border-collapse: collapse;
margin: 24px 0;
font-size: 14px;
}
.article-body table th, .article-body table td {
padding: 10px 14px;
border-bottom: 1px solid var(--gray);
text-align: left;
}
.article-body table th {
background: var(--cream-2);
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink);
}
.article-body code {
font-family: var(--font-mono);
font-size: 0.92em;
background: var(--cream-2);
padding: 2px 6px;
border-radius: 4px;
}
.article-body img { border-radius: var(--r-md); margin: 24px 0; }
.article-hero {
padding: 56px 0 32px;
}
.article-hero__title {
font-family: var(--font-display); font-weight: 700;
font-size: clamp(2.25rem, 4vw + 1rem, 3.75rem);
letter-spacing: -0.025em; line-height: 1.05;
margin: 18px 0 24px;
}
.article-hero__lede {
font-size: 1.1875rem; line-height: 1.5; color: var(--ink-2); max-width: 720px;
margin-bottom: 28px;
}
.article-hero__meta {
font-family: var(--font-mono); font-size: 12px;
letter-spacing: 0.08em; color: var(--ink-3);
display: flex; gap: 16px; flex-wrap: wrap;
padding-top: 18px; border-top: 1px solid var(--gray);
}
.article-grid {
display: grid;
grid-template-columns: minmax(0, 720px) 1fr;
gap: 64px;
align-items: start;
}
.article-aside {
position: sticky; top: 96px;
font-family: var(--font-mono); font-size: 12px;
color: var(--ink-3);
}
.article-aside h4 {
font-family: var(--font-mono); font-size: 11px;
letter-spacing: 0.14em; text-transform: uppercase;
color: var(--ink); margin-bottom: 12px;
}
.article-aside ul { list-style: none; padding: 0; margin: 0; }
.article-aside li { margin-bottom: 8px; line-height: 1.5; }
.article-aside a { color: var(--ink-2); }
.article-aside a:hover { color: var(--accent); }
@media (max-width: 980px) {
.article-grid { grid-template-columns: 1fr; gap: 32px; }
.article-aside { position: static; }
}
.journal-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
}
.journal-card {
background: var(--cream); border-radius: var(--r-lg); overflow: hidden;
border: 1px solid var(--gray);
display: flex; flex-direction: column;
transition: transform .15s, box-shadow .15s;
}
.journal-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.journal-card__cover {
aspect-ratio: 16/9; background: var(--cream-2);
display: flex; align-items: center; justify-content: center;
position: relative; overflow: hidden;
border-bottom: 1px solid var(--gray);
}
.journal-card__cover-mark {
font-family: var(--font-display);
font-weight: 800; font-size: 64px;
color: var(--coral); opacity: 0.6;
letter-spacing: -0.04em;
font-style: italic;
}
.journal-card__body { padding: 18px 20px 22px; flex: 1; display: flex; flex-direction: column; }
.journal-card__title {
font-family: var(--font-display); font-size: 18px;
color: var(--ink); margin: 8px 0 10px; line-height: 1.25; font-weight: 600;
}
.journal-card__excerpt { font-size: 13px; color: var(--ink-2); line-height: 1.5; margin-bottom: 14px; flex: 1; }
.journal-card__meta {
display: flex; gap: 8px;
font-family: var(--font-mono); font-size: 10px;
letter-spacing: 0.08em; text-transform: uppercase;
color: var(--ink-3);
}
.journal-card__tag {
background: var(--coral-soft); color: var(--coral-dark);
padding: 3px 8px; border-radius: 4px;
letter-spacing: 0.08em;
font-weight: 600;
}
@media (max-width: 980px) { .journal-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .journal-grid { grid-template-columns: 1fr; } }
.sub-chip {
display: inline-flex; align-items: center;
font-family: var(--font-mono); font-size: 10px;
font-weight: 500;
padding: 3px 10px;
border: 1px solid var(--gray-2);
background: var(--cream);
color: var(--ink-2);
border-radius: 999px;
letter-spacing: 0.04em;
}
.sub-chip--forest { background: var(--forest-soft); border-color: var(--forest); color: var(--forest); }
.pc-item {
display: flex;
gap: 12px;
padding: 14px 0;
border-bottom: 1px solid var(--gray);
}
.pc-item:last-child { border-bottom: 0; }
.pc-item__bullet {
flex-shrink: 0;
width: 24px; height: 24px;
display: flex; align-items: center; justify-content: center;
font-family: var(--font-mono); font-size: 14px; font-weight: 700;
border-radius: 50%;
margin-top: 2px;
}
.pc-list--pros .pc-item__bullet { background: var(--forest-soft); color: var(--forest); }
.pc-list--cons .pc-item__bullet { background: var(--coral-soft); color: var(--coral-dark); }
.pc-item__body { flex: 1; min-width: 0; }
.pc-item__reason {
font-size: 15px;
line-height: 1.45;
color: var(--ink);
font-weight: 500;
margin-bottom: 6px;
}
.pc-item__quote {
font-family: var(--font-display);
font-style: italic;
font-size: 13px;
line-height: 1.55;
color: var(--ink-2);
padding: 8px 12px;
background: var(--cream-2);
border-left: 2px solid var(--gray-2);
border-radius: 0 var(--r-sm) var(--r-sm) 0;
margin: 6px 0 8px;
}
.pc-list--pros .pc-item__quote { border-left-color: var(--forest); }
.pc-list--cons .pc-item__quote { border-left-color: var(--coral-dark); }
.pc-item__src {
display: inline-block;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.04em;
color: var(--ink-3);
text-decoration: none;
margin-top: 2px;
}
.pc-item__src[href]:hover { color: var(--accent); text-decoration: underline; }
.search-input-wrap {
position: relative;
margin-bottom: 32px;
}
.search-input__icon {
position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
color: var(--ink-3);
pointer-events: none;
}
.search-input {
width: 100%;
padding: 18px 24px 18px 52px;
font-size: 18px;
border: 2px solid var(--gray);
border-radius: var(--r-md);
background: var(--cream-2);
color: var(--ink);
outline: none;
transition: border-color .15s, background .15s;
}
.search-input:focus {
border-color: var(--coral);
background: var(--cream);
}
.search-input::placeholder { color: var(--ink-3); }
.search-results {
display: flex;
flex-direction: column;
}
.search-result {
display: grid;
grid-template-columns: 72px 1fr 24px;
gap: 18px;
align-items: center;
padding: 16px;
border-bottom: 1px solid var(--gray);
text-decoration: none;
color: inherit;
transition: background .12s;
}
.search-result:hover { background: var(--cream-2); }
.search-result__img {
width: 72px; height: 72px;
background: var(--cream-2);
border-radius: var(--r-md);
overflow: hidden;
display: flex; align-items: center; justify-content: center;
}
.search-result__img img { width: 100%; height: 100%; object-fit: contain; }
.search-result__img-fallback { width: 100%; height: 100%; background: var(--cream-3); }
.search-result__brand {
font-family: var(--font-mono); font-size: 11px;
letter-spacing: 0.1em; text-transform: uppercase;
color: var(--ink-3); margin-bottom: 4px;
}
.search-result__name { font-size: 17px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.search-result__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.search-result__arr {
font-size: 18px; color: var(--ink-3);
transition: transform .15s, color .15s;
}
.search-result:hover .search-result__arr { transform: translateX(4px); color: var(--coral); }
@media (max-width: 640px) {
.search-result { grid-template-columns: 56px 1fr; }
.search-result__img { width: 56px; height: 56px; }
.search-result__arr { display: none; }
}
.featured-card {
display: grid;
grid-template-columns: 5fr 6fr;
background: var(--ink);
color: var(--cream);
border-radius: var(--r-xl);
overflow: hidden;
text-decoration: none;
transition: transform .15s, box-shadow .15s;
min-height: 360px;
}
.featured-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); color: var(--cream); }
.featured-card__cover {
padding: 32px 40px;
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
min-height: 360px;
}
.featured-card__cover-meta {
display: flex;
justify-content: space-between;
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.12em;
font-weight: 600;
}
.featured-card__cover-mark {
display: flex;
align-items: center;
gap: 16px;
margin: auto 0;
}
.featured-card__num {
font-family: var(--font-display);
font-size: 140px;
font-weight: 800;
line-height: 1;
letter-spacing: -0.04em;
color: currentColor;
}
.featured-card__dot {
width: 16px; height: 16px; border-radius: 50%;
background: currentColor;
margin-top: 90px;
}
.featured-card__cover-stat {
font-family: var(--font-mono);
font-size: 11px;
}
.featured-card__body {
padding: 48px 48px;
display: flex;
flex-direction: column;
justify-content: center;
background: var(--ink);
}
.featured-card__body .eyebrow { color: var(--coral); margin-bottom: 14px; }
.featured-card__body .eyebrow::before { background: var(--coral); }
.featured-card__title {
font-family: var(--font-display);
font-size: clamp(28px, 3.2vw, 40px);
font-weight: 700;
line-height: 1.12;
letter-spacing: -0.025em;
color: var(--cream);
margin: 8px 0 18px;
}
.featured-card__excerpt {
font-size: 16px;
line-height: 1.55;
color: rgba(244,239,230,0.78);
margin-bottom: 24px;
max-width: 520px;
}
.featured-card__cta {
display: inline-block;
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--coral);
font-weight: 700;
}
@media (max-width: 980px) {
.featured-card { grid-template-columns: 1fr; }
.featured-card__num { font-size: 96px; }
.featured-card__cover { min-height: 280px; }
.featured-card__body { padding: 32px 28px; }
}
.journal-card__cover {
aspect-ratio: 16/10;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 18px 22px;
position: relative;
border-bottom: 1px solid var(--gray);
}
.journal-card__cover-meta {
display: flex;
justify-content: space-between;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.12em;
font-weight: 600;
}
.journal-card__cover-num {
font-family: var(--font-display);
font-size: 64px;
font-weight: 800;
line-height: 1;
letter-spacing: -0.04em;
color: currentColor;
align-self: flex-end;
}
.home-journal-card__cover {
aspect-ratio: 16/9;
position: relative;
display: flex;
flex-direction: column;
padding: 18px 22px;
border-bottom: 1px solid var(--gray);
overflow: hidden;
}
.home-journal-card__cover-meta {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.18em;
font-weight: 600;
}
.home-journal-card__cover-icon {
font-size: 40px;
line-height: 1;
margin-top: auto;
align-self: flex-start;
color: currentColor;
}
.home-journal-card--lead .home-journal-card__cover { aspect-ratio: 4/3; }
.home-journal-card--lead .home-journal-card__cover-icon { font-size: 80px; }
.article-products-rail {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 24px;
}
@media (max-width: 720px) {
.article-products-rail { grid-template-columns: 1fr 1fr; gap: 16px; }
}
@media (max-width: 480px) {
.article-products-rail { grid-template-columns: 1fr; }
}
.catalog-cats {
display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.filter-chip {
padding: 7px 14px;
font-family: var(--font-mono); font-size: 12px; font-weight: 600;
letter-spacing: 0.04em;
background: var(--cream);
color: var(--ink-2);
border: 1px solid var(--gray);
border-radius: 999px;
cursor: pointer;
transition: background .12s, border-color .12s, color .12s;
display: inline-flex; align-items: center; gap: 6px;
}
.filter-chip:hover { border-color: var(--ink-3); color: var(--ink); }
.filter-chip.is-active { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.filter-chip__count {
font-size: 10px;
background: var(--cream-2);
color: var(--ink-3);
padding: 1px 6px;
border-radius: 999px;
}
.filter-chip.is-active .filter-chip__count { background: rgba(244,239,230,0.15); color: var(--cream); }
.catalog-sort {
font-family: var(--font-mono); font-size: 12px;
padding: 7px 12px;
background: var(--cream);
color: var(--ink);
border: 1px solid var(--gray);
border-radius: var(--r-sm);
cursor: pointer;
}
.catalog-grid {
display: grid;
grid-template-columns: 1fr;
gap: 0;
}
.catalog-card {
display: grid;
grid-template-columns: 50px 80px 1fr 90px;
gap: 20px;
align-items: center;
padding: 20px 0;
border-bottom: 1px solid var(--gray);
text-decoration: none;
color: inherit;
transition: background .12s;
}
.catalog-card:hover { background: var(--cream-2); }
.catalog-card__rank {
font-family: var(--font-mono); font-size: 24px; font-weight: 600;
color: var(--ink-3); line-height: 1;
}
.catalog-card__img {
width: 80px; height: 80px;
background: var(--cream-2);
border-radius: var(--r-md);
overflow: hidden;
display: flex; align-items: center; justify-content: center;
}
.catalog-card__img img { width: 100%; height: 100%; object-fit: contain; }
.catalog-card__img-fb { width: 100%; height: 100%; background: var(--cream-3); }
.catalog-card__brand {
font-family: var(--font-mono); font-size: 11px;
letter-spacing: 0.1em; text-transform: uppercase;
color: var(--ink-3); margin-bottom: 5px;
}
.catalog-card__name { font-size: 17px; font-weight: 600; color: var(--ink); margin-bottom: 6px; line-height: 1.25; }
.catalog-card__verdict { display: flex; gap: 6px; }
.catalog-card__score { text-align: right; }
.catalog-card__pct {
font-family: var(--font-display); font-size: 22px; font-weight: 700;
color: var(--ink); line-height: 1;
}
.catalog-card__pct[data-tone="high"] { color: var(--forest); }
.catalog-card__pct[data-tone="mid"] { color: var(--gold); }
.catalog-card__pct[data-tone="low"] { color: var(--accent); }
.catalog-card__pct-lbl {
font-family: var(--font-mono); font-size: 10px;
letter-spacing: 0.06em; color: var(--ink-3);
margin-top: 4px;
}
@media (max-width: 720px) {
.catalog-card { grid-template-columns: 40px 60px 1fr; gap: 12px; }
.catalog-card__img { width: 60px; height: 60px; }
.catalog-card__score { grid-column: 2 / -1; text-align: left; padding-top: 8px; }
}
.hero-search-dropdown {
display: none;
position: absolute;
top: calc(100% + 8px);
left: 0;
right: 0;
background: var(--cream);
border: 1px solid var(--gray);
border-radius: var(--r-md);
box-shadow: var(--shadow-lg);
z-index: 100;
max-height: 480px;
overflow-y: auto;
padding: 8px;
}
.hero-search-item {
display: grid;
grid-template-columns: 48px 1fr 50px;
gap: 14px;
align-items: center;
padding: 10px 12px;
border-radius: var(--r-sm);
text-decoration: none;
color: inherit;
transition: background .12s;
}
.hero-search-item:hover, .hero-search-item.is-active {
background: var(--cream-2);
color: var(--ink);
}
.hero-search-item__img {
width: 48px; height: 48px;
background: var(--cream-2);
border-radius: var(--r-sm);
overflow: hidden;
display: flex; align-items: center; justify-content: center;
}
.hero-search-item__img img { width: 100%; height: 100%; object-fit: contain; }
.hero-search-item__brand {
font-family: var(--font-mono); font-size: 10px;
letter-spacing: 0.08em; text-transform: uppercase;
color: var(--ink-3); margin-bottom: 3px;
}
.hero-search-item__name { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.2; }
.hero-search-item__score {
font-family: var(--font-mono); font-size: 13px; font-weight: 700;
color: var(--forest); text-align: right;
}
.hero-search-item--all {
display: flex;
justify-content: center;
font-family: var(--font-mono); font-size: 12px;
letter-spacing: 0.04em;
color: var(--accent);
padding: 12px;
border-top: 1px solid var(--gray);
margin-top: 4px;
}
.article-page { background: var(--cream); }
.article-hero {
padding: 56px 0 32px;
background: var(--cream);
border-bottom: 1px solid var(--gray);
}
.article-hero__container { max-width: 880px; }
.article-hero__tag {
display: inline-block;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent);
font-weight: 600;
margin-bottom: 14px;
}
.article-hero__title {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(2.25rem, 4vw + 1rem, 4rem);
letter-spacing: -0.025em;
line-height: 1.05;
color: var(--ink);
margin: 8px 0 20px;
}
.article-hero__lede {
font-size: 1.25rem;
line-height: 1.5;
color: var(--ink-2);
max-width: 720px;
margin-bottom: 32px;
}
.article-hero__meta {
display: flex; gap: 16px; align-items: center;
padding-top: 20px;
border-top: 1px solid var(--gray);
font-size: 14px;
}
.journal-avatar {
width: 44px; height: 44px;
background: var(--coral-soft);
color: var(--coral-dark);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-family: var(--font-display);
font-weight: 700; font-size: 18px;
}
.article-hero__meta-bottom {
font-family: var(--font-mono); font-size: 12px;
letter-spacing: 0.04em; color: var(--ink-3);
margin-top: 4px;
}
.article-hero__share {
margin-left: auto;
display: flex; gap: 8px;
}
.btn-icon {
width: 36px; height: 36px;
border: 1px solid var(--gray);
border-radius: 50%;
background: var(--cream);
display: flex; align-items: center; justify-content: center;
cursor: pointer;
}
.article-body {
padding: 48px 0 80px;
}
.article-body__container { max-width: 760px; }
.article-lead {
font-family: var(--font-display);
font-size: 1.4rem;
line-height: 1.45;
color: var(--ink);
margin-bottom: 32px;
font-weight: 400;
}
.article-lead strong { font-weight: 700; }
.article-tldr {
background: var(--cream-2);
border: 1px solid var(--gray);
border-radius: var(--r-lg);
padding: 24px 28px;
margin: 32px 0 48px;
}
.article-tldr__head {
display: flex; align-items: baseline; gap: 12px;
font-family: var(--font-mono);
margin-bottom: 18px;
padding-bottom: 14px;
border-bottom: 1px dashed var(--gray-2);
}
.article-tldr__label {
font-size: 11px;
letter-spacing: 0.16em;
font-weight: 700;
color: var(--accent);
background: var(--coral-soft);
padding: 3px 10px;
border-radius: 999px;
}
.article-tldr__head > span:last-child {
font-size: 12px;
color: var(--ink-3);
}
.article-tldr__cols {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 24px;
}
.article-tldr__col-head {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
font-weight: 700;
margin-bottom: 12px;
padding-bottom: 6px;
border-bottom: 1.5px solid currentColor;
display: inline-block;
}
.article-tldr__col-head--buy { color: var(--forest); }
.article-tldr__col-head--skip { color: var(--coral-dark); }
.article-tldr__col-head--mid { color: var(--gold); }
.article-tldr__cols ul {
list-style: none;
padding: 0; margin: 0;
}
.article-tldr__cols li {
font-size: 14px;
line-height: 1.45;
color: var(--ink-2);
padding: 6px 0;
border-bottom: 1px solid var(--gray);
}
.article-tldr__cols li:last-child { border-bottom: 0; }
@media (max-width: 720px) {
.article-tldr__cols { grid-template-columns: 1fr; gap: 18px; }
}
h2.article-h2 {
font-family: var(--font-display);
font-size: clamp(1.75rem, 2.5vw + 1rem, 2.25rem);
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.15;
color: var(--ink);
margin: 56px 0 18px;
}
.article-body p,
.article-body ul,
.article-body ol {
font-size: 1.0625rem;
line-height: 1.7;
color: var(--ink-2);
margin-bottom: 1.4em;
}
.article-body h3 {
font-family: var(--font-display);
font-size: 1.375rem;
font-weight: 600;
color: var(--ink);
margin: 36px 0 12px;
}
.article-body strong { color: var(--ink); }
.article-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.article-body ul, .article-body ol { padding-left: 1.6em; }
.article-body li { margin-bottom: 0.5em; }
.article-body blockquote {
margin: 28px 0;
padding: 18px 22px;
border-left: 3px solid var(--accent);
background: var(--cream-2);
font-style: italic;
font-family: var(--font-display);
color: var(--ink);
border-radius: 0 var(--r-md) var(--r-md) 0;
}
.article-body table {
width: 100%; border-collapse: collapse;
margin: 28px 0;
font-size: 14px;
}
.article-body table th, .article-body table td {
padding: 10px 14px;
border-bottom: 1px solid var(--gray);
text-align: left;
}
.article-body table th {
background: var(--cream-2);
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.article-body code {
font-family: var(--font-mono);
font-size: 0.92em;
background: var(--cream-2);
padding: 2px 6px;
border-radius: 4px;
}
.article-product {
display: grid;
grid-template-columns: 220px 1fr;
gap: 28px;
margin: 40px 0;
padding: 24px;
background: var(--cream-2);
border: 1px solid var(--gray);
border-radius: var(--r-lg);
}
.article-product__img {
display: block;
background: var(--cream);
border-radius: var(--r-md);
overflow: hidden;
aspect-ratio: 1;
text-decoration: none;
}
.article-product__img .product-img--real { width: 100%; height: 100%; }
.article-product__rank {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-3);
font-weight: 600;
margin-bottom: 6px;
}
.article-product__brand {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-3);
margin-bottom: 4px;
}
.article-product__name {
font-family: var(--font-display);
font-size: 24px;
font-weight: 600;
letter-spacing: -0.015em;
color: var(--ink);
margin: 4px 0 12px;
line-height: 1.2;
}
.article-product__name a { color: inherit; text-decoration: none; }
.article-product__name a:hover { color: var(--accent); }
.article-product__score {
font-size: 14px;
color: var(--ink-2);
margin-bottom: 14px;
}
.article-product__score strong {
font-size: 18px;
color: var(--forest);
font-weight: 700;
}
.article-product__why {
font-size: 15px;
line-height: 1.55;
color: var(--ink-2);
margin-bottom: 14px;
}
.article-quote {
margin: 16px 0 20px;
padding: 14px 18px;
background: var(--cream);
border-left: 3px solid var(--coral);
border-radius: 0 var(--r-sm) var(--r-sm) 0;
font-family: var(--font-display);
font-style: italic;
font-size: 15px;
line-height: 1.5;
color: var(--ink);
}
.article-quote p { margin: 0 0 8px; font-size: inherit; line-height: inherit; color: inherit; font-style: inherit; }
.article-quote footer {
font-style: normal;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.04em;
color: var(--ink-3);
}
.article-product__cta {
display: flex; gap: 12px;
flex-wrap: wrap;
align-items: center;
margin-top: 8px;
}
@media (max-width: 720px) {
.article-product {
grid-template-columns: 1fr;
gap: 16px;
padding: 20px;
}
.article-product__img {
width: 100%;
max-width: 220px;
min-height: 200px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
}
.article-product__img .product-img--real,
.article-product__img .product-img--md {
width: 100%;
height: 100%;
min-height: 180px;
}
.article-product__img img {
display: block;
max-width: 100%;
max-height: 100%;
}
}
.article-end-cta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 28px 32px;
background: var(--ink);
color: var(--cream);
border-radius: var(--r-lg);
margin: 56px 0 32px;
}
.article-end-cta strong {
display: block;
font-family: var(--font-display);
font-size: 22px;
margin-bottom: 6px;
color: var(--cream);
}
.article-end-cta p {
margin: 0;
font-size: 14px;
color: rgba(244,239,230,0.75);
}
.article-end-cta .btn--primary {
background: var(--coral);
color: var(--cream);
white-space: nowrap;
}
.article-end-cta .btn--primary:hover { background: var(--coral-dark); }
@media (max-width: 720px) {
.article-end-cta { flex-direction: column; align-items: flex-start; padding: 24px; }
}
.article-disclosure {
font-size: 13px !important;
line-height: 1.55 !important;
color: var(--ink-3) !important;
padding-top: 24px;
border-top: 1px solid var(--gray);
margin-top: 32px;
}
.product-img--real img,
.search-result__img img,
.hero-search-item__img img,
.catalog-card__img img,
.top-row__img img,
.rail-card__img-wrap img,
.article-product__img img,
.pdp__media img,
.hero__panel-row .product-thumb img {
mix-blend-mode: multiply;
}
.product-img--real,
.search-result__img,
.hero-search-item__img,
.catalog-card__img,
.top-row__img,
.rail-card__img-wrap,
.article-product__img {
background: transparent !important;
mix-blend-mode: normal;
}
.pdp__media .product-img--real {
background: var(--cream-2) !important;
border-radius: var(--r-lg);
padding: 24px;
}
.pdp__media .product-img--real img {
mix-blend-mode: multiply;
}
.cat-card {
display: block;
position: relative;
background: var(--cream);
border: 1px solid var(--gray);
border-radius: var(--r-lg);
overflow: hidden;
text-decoration: none;
color: inherit;
transition: transform .15s, box-shadow .15s, border-color .15s;
}
.cat-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
border-color: var(--coral);
color: inherit;
}
.cat-card__cover {
aspect-ratio: 16/10;
overflow: hidden;
background: var(--cream-2);
border-bottom: 1px solid var(--gray);
}
.cat-card__cover img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.cat-card__body {
padding: 18px 20px 22px;
}
.cat-card__eyebrow {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.1em;
color: var(--ink-3);
margin-bottom: 12px;
line-height: 1.3;
}
.cat-card__title {
font-family: var(--font-display);
font-size: 24px;
font-weight: 700;
letter-spacing: -0.015em;
color: var(--ink);
margin-bottom: 6px;
}
.cat-card__count {
font-family: var(--font-mono);
font-size: 12px;
color: var(--ink-3);
}
.journal-card__cover--img,
.home-journal-card__cover--img {
aspect-ratio: 16/9;
padding: 0;
position: relative;
overflow: hidden;
}
.journal-card__cover--img picture,
.home-journal-card__cover--img picture {
position: absolute;
inset: 0;
display: block;
}
.journal-card__cover--img picture img,
.journal-card__cover--img img,
.home-journal-card__cover--img picture img,
.home-journal-card__cover--img img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: left center;
display: block;
}
.home-journal-card--lead {
display: flex;
flex-direction: column;
}
.home-journal-card--lead .home-journal-card__cover--img {
aspect-ratio: auto;
flex: 1 1 auto;
min-height: 380px;
}
.featured-card__cover--img {
display: block;
padding: 0;
position: relative;
overflow: hidden;
min-height: 360px;
}
.featured-card__cover--img picture {
position: absolute;
inset: 0;
display: block;
}
.featured-card__cover--img picture img,
.featured-card__cover--img img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: left center;
display: block;
}
.article-hero__cover {
margin-top: 32px;
border-radius: var(--r-lg);
overflow: hidden;
aspect-ratio: 16/9;
background: var(--cream-2);
}
.article-hero__cover img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
@media (max-width: 720px) {
.featured-card__cover--img { min-height: 240px; }
.article-hero__cover { aspect-ratio: 3/2; }
}
html { -webkit-text-size-adjust: 100%; }
input, select, textarea, .site-search { font-size: 16px; }
a, button, .btn-amazon, .site-nav__link, .top-row, .rank-row, .rail-card,
.cat-card, .pdp__alt-card, summary {
-webkit-tap-highlight-color: rgba(0,0,0,0);
touch-action: manipulation;
}
@media (hover: none) and (pointer: coarse) {
.top-row:hover, .rank-row:hover, .rail-card:hover, .cat-card:hover,
.pdp__alt-card:hover, .site-nav__link:hover, a:hover {
background: inherit;
transform: none !important;
color: inherit;
}
.pdp__alt-card:hover { border-color: var(--rule); }
.hero__panel-row:hover { transform: none; }
}
@media (max-width: 480px) {
.container { padding: 0 16px; }
}
@media (max-width: 900px) {
.site-header__inner { gap: 12px; height: 56px; }
.logo { font-size: 19px; flex-shrink: 0; }
.site-nav {
gap: 2px;
flex: 1;
min-width: 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
}
.site-nav::-webkit-scrollbar { display: none; }
.site-nav {
mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 14px), transparent 100%);
-webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 14px), transparent 100%);
}
.site-nav__link {
padding: 7px 11px;
font-size: 13px;
white-space: nowrap;
flex-shrink: 0;
}
.site-search { padding: 6px 10px 6px 10px; font-size: 13px; }
.site-search kbd { display: none; }
.site-search span:not(.site-search__icon) { display: none; }
}
@media (max-width: 480px) {
.site-header__inner { gap: 8px; }
.site-nav__link { padding: 6px 9px; font-size: 12.5px; }
.logo { font-size: 18px; }
}
@media (max-width: 640px) {
.hero { padding: 36px 0 48px; }
.hero__title {
font-size: clamp(1.85rem, 7.5vw, 2.4rem) !important;
margin-top: 14px;
margin-bottom: 16px;
line-height: 1.08;
}
.hero__lede { font-size: 1rem; line-height: 1.5; margin-bottom: 22px; }
.hero__cta-row { gap: 8px; margin-bottom: 28px; }
.hero__stats { grid-template-columns: repeat(2, 1fr); gap: 18px; padding-top: 22px; }
.hero__stat-num { font-size: 1.5rem; }
.hero__panel { padding: 16px; }
.trust-badge__stats { grid-template-columns: repeat(2, 1fr); gap: 14px; padding: 16px 0 14px; }
.trust-badge__stats strong { font-size: 1.5rem; }
.trust-badge__top { font-size: 10px; padding-bottom: 14px; }
}
@media (max-width: 480px) {
.hero-featured { padding: 14px 14px 12px; margin-top: 14px; }
.hero-featured__inner { gap: 10px; margin-bottom: 10px; }
.hero-featured__img { width: 52px; height: 52px; }
.hero-featured__name { font-size: 14.5px; line-height: 1.25; margin-bottom: 4px; }
.hero-featured__brand { font-size: 9px; }
.hero-featured__meta { font-size: 12px; gap: 4px; }
.hero-featured__eyebrow { font-size: 9px; margin-bottom: 10px; }
}
@media (max-width: 480px) {
.top-row {
grid-template-columns: 28px 64px 1fr;
gap: 10px;
padding: 14px 4px;
}
.top-row__rank { font-size: 0.95rem; }
.top-row__img { width: 64px; height: 64px; }
.top-row__name { font-size: 0.98rem; line-height: 1.22; margin-bottom: 4px; }
.top-row__brand { font-size: 9.5px; gap: 6px; }
.top-row__cat-chip { font-size: 8px; padding: 1px 5px; letter-spacing: 0.08em; }
.top-row__pct strong { font-size: 1.15rem; }
.top-row__score, .top-row__cta { grid-column: 1 / 4; }
.top-row__score {
flex-direction: row;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.top-row__bar { flex: 1; min-width: 100px; }
.top-row__cta {
flex-direction: row;
align-items: center;
gap: 8px;
}
.top-row__cta .btn-amazon { flex: 1; min-height: 42px; }
.top-row__details { font-size: 10px; flex-shrink: 0; }
.top-row__subs { gap: 4px; }
.top-row__tagline {
font-size: 13px !important;
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
}
}
@media (max-width: 540px) {
.rank-row {
grid-template-columns: 32px 88px 1fr !important;
grid-template-areas: none !important;
gap: 12px;
padding: 18px 0;
}
.rank-row__rank { font-size: 1.1rem; align-self: start; padding-top: 4px; }
.rank-row__img { padding: 10px; }
.rank-row__name { font-size: 1.05rem; line-height: 1.18; margin-bottom: 6px; }
.rank-row__brand { font-size: 9.5px; }
.rank-row__quote { font-size: 13px; -webkit-line-clamp: 3; }
.rank-row__cta {
grid-column: 1 / 4;
text-align: left;
margin-top: 4px;
}
.rank-row__cta .btn-amazon { width: 100%; justify-content: center; min-height: 44px; }
}
@media (max-width: 768px) {
.pdp__media { padding: 24px; }
.pdp__media-watermark { font-size: 9px; }
.pdp__rank-badge {
top: 14px; left: 14px; padding: 5px 10px; font-size: 10px;
gap: 6px;
max-width: calc(100% - 28px);
}
.pdp__rank-badge .num { font-size: 11px; }
.pdp__title { font-size: clamp(1.5rem, 6vw, 2rem) !important; margin-bottom: 14px; }
.pdp__brand { font-size: 11px; margin-bottom: 10px; }
.pdp__buy-card { padding: 16px 16px 18px; gap: 12px; }
.pdp__buy-divider { margin: 4px -16px; }
.pdp__social-proof {
padding: 14px 16px;
gap: 14px;
margin: 14px 0 18px;
}
.pdp__social-proof-num { font-size: 38px; }
.pdp__social-proof-text strong { font-size: 14.5px; }
.pdp__social-proof-meta { font-size: 11.5px; line-height: 1.4; }
.pdp__compare { padding: 14px 16px; margin: 18px 0; }
.pdp__compare-eyebrow { font-size: 9px; margin-bottom: 10px; }
.pdp__why-picked { padding-top: 12px; }
.pdp__why-picked-body { font-size: 12.5px; }
}
@media (max-width: 480px) {
.pdp__why-row { flex-direction: column; gap: 4px; align-items: stretch; }
.pdp__why-key { width: 100%; padding-top: 0; }
}
@media (max-width: 380px) {
.pdp__alt-card { gap: 10px; padding: 10px 12px; }
.pdp__alt-img { width: 42px; height: 42px; }
.pdp__alt-name { font-size: 13.5px; }
.pdp__alt-meta { font-size: 11.5px; }
.pdp__alt-arrow { display: none; }
}
@media (max-width: 768px) {
.btn-amazon { min-height: 44px; align-items: center; }
.btn-amazon--sm { min-height: 40px; }
}
@media (max-width: 768px) {
body:has(.pdp__sticky-buy) main { padding-bottom: 90px; }
.pdp__sticky-buy .btn-amazon { padding: 10px 14px; min-height: 42px; }
.pdp__sticky-buy .btn-amazon__price { display: none; }
}
@media (max-width: 480px) {
.pdp__title, .top-row__name, .rank-row__name, .rail-card__name, .hero-featured__name {
overflow-wrap: break-word;
word-break: break-word;
}
}
@media (max-width: 540px) {
.article-body { font-size: 15.5px; line-height: 1.6; }
.article-body h2 { font-size: 1.45rem; margin-top: 28px; }
.article-body h3 { font-size: 1.15rem; margin-top: 22px; }
.article-body blockquote { padding: 12px 14px; font-size: 14.5px; }
}
@media (max-width: 640px) {
:root { --section-pad-y: 48px; }
}
@media (max-width: 540px) {
.site-footer { font-size: 13px; }
.site-footer__grid { grid-template-columns: 1fr 1fr !important; gap: 24px; }
}
@media (max-width: 640px) {
.pdp__pros-cons {
grid-template-columns: 1fr;
gap: 22px;
}
}
@media (max-width: 640px) {
.rank-row {
display: block;
padding: 22px 0;
}
.rank-row > * { display: block; }
.rank-row__rank {
display: inline-block;
padding: 4px 12px;
margin-bottom: 14px;
background: var(--cream-2);
border-radius: 999px;
font-size: 1rem;
text-align: left;
}
.rank-row__img {
width: 100%;
max-width: 100%;
aspect-ratio: 16 / 10;
margin-bottom: 16px;
padding: 24px;
}
.rank-row__body { margin-bottom: 14px; }
.rank-row__score { margin-bottom: 16px; }
.rank-row__cta { text-align: left; }
.rank-row__cta .btn-amazon { width: 100%; justify-content: center; }
.rank-row__details { display: inline-block; margin-top: 10px; }
}
@media (max-width: 768px) {
body:has(.pdp__sticky-buy) { padding-bottom: 90px; }
}
html, body { overflow-x: hidden; max-width: 100vw; }
img, video, iframe, table, pre, code, svg { max-width: 100%; height: auto; }
@media (max-width: 800px) {
.site-nav { display: flex !important; }
.site-search span { display: none; }
.site-search kbd { display: none; }
}
@media (max-width: 900px) {
.site-header__inner { gap: 10px; height: 56px; padding: 0 14px; }
.logo { font-size: 19px; flex-shrink: 0; }
.site-nav {
display: flex !important;
gap: 2px;
flex: 1 1 0;
min-width: 0;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
white-space: nowrap;
mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 14px), transparent 100%);
-webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 14px), transparent 100%);
}
.site-nav::-webkit-scrollbar { display: none; }
.site-nav__link {
flex-shrink: 0;
padding: 6px 10px;
font-size: 13px;
white-space: nowrap;
}
.site-search {
flex-shrink: 0;
padding: 6px 10px;
font-size: 13px;
}
}
@media (max-width: 480px) {
.site-header__inner { gap: 8px; padding: 0 12px; }
.site-nav__link { padding: 6px 9px; font-size: 12.5px; }
.logo { font-size: 18px; }
}
@media (max-width: 640px) { .container { padding: 0 16px; } }
@media (max-width: 380px) { .container { padding: 0 12px; } }
@media (max-width: 768px) {
.hero, .hero--lean { padding: 28px 0 36px; overflow: hidden; }
.hero__grid, .hero__lean-grid {
grid-template-columns: 1fr !important;
gap: 28px;
}
.hero__lean-copy, .hero__lean-visual { max-width: 100%; min-width: 0; }
.hero__title {
font-size: clamp(1.85rem, 8.5vw, 2.5rem) !important;
margin-top: 12px;
margin-bottom: 14px;
line-height: 1.06;
overflow-wrap: break-word;
word-break: break-word;
}
.hero__lede {
font-size: 0.95rem !important;
line-height: 1.5;
margin-bottom: 18px;
max-width: 100%;
}
.hero__cta-row { gap: 8px; margin-bottom: 24px; flex-wrap: wrap; }
.hero-search-wrap { max-width: 100% !important; width: 100%; }
.hero-search {
flex-wrap: nowrap;
width: 100%;
box-sizing: border-box;
padding: 4px 4px 4px 14px;
}
.hero-search__input {
min-width: 0;
flex: 1 1 0;
width: 100%;
font-size: 15px;
padding: 12px 0;
}
.hero-search__icon { padding-right: 6px; }
.hero-search__icon svg { width: 18px; height: 18px; }
.hero-search__submit {
padding: 0 16px;
font-size: 13px;
}
.hero-search__chips {
gap: 6px;
flex-wrap: wrap;
margin-top: 10px;
}
.hero-search__chips a, .hero-search__chips .hero-search__chip { font-size: 12px; }
.hero__stats { grid-template-columns: repeat(2, 1fr) !important; gap: 16px; }
.hero__stat-num { font-size: 1.5rem; }
}
@media (max-width: 768px) {
.trust-badge { padding: 16px 18px; }
.trust-badge__stats {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 12px 14px;
}
.trust-badge__stats > div { min-width: 0; }
.trust-badge__stats strong {
font-size: 1.4rem;
overflow-wrap: anywhere;
}
.trust-badge__stats span { font-size: 9.5px; }
.trust-badge__top {
flex-wrap: wrap;
font-size: 9.5px;
gap: 4px 8px;
}
.trust-badge__bottom { font-size: 12.5px; }
}
@media (max-width: 768px) {
.hero-featured { margin-top: 14px; padding: 14px; }
.hero-featured__inner { gap: 12px; }
.hero-featured__img { width: 56px; height: 56px; flex-shrink: 0; }
.hero-featured__body { min-width: 0; flex: 1 1 0; }
.hero-featured__name {
font-size: 14px;
line-height: 1.25;
overflow-wrap: break-word;
word-break: break-word;
}
.hero-featured__brand { font-size: 9.5px; }
.hero-featured__meta { font-size: 12px; gap: 4px 6px; flex-wrap: wrap; }
.hero-featured__cta { width: 100%; }
.hero-featured__cta .btn-amazon { width: 100%; justify-content: center; min-height: 44px; }
}
@media (max-width: 768px) {
.section__head, .section__head--simple {
flex-direction: column;
align-items: flex-start;
gap: 10px;
margin-bottom: 28px;
}
.section__head h2 {
font-size: clamp(1.4rem, 5.5vw, 2rem) !important;
line-height: 1.15;
max-width: 100%;
overflow-wrap: break-word;
}
.section__head-meta {
white-space: normal !important;
font-size: 11px;
}
}
@media (max-width: 540px) {
.cat-grid {
grid-template-columns: 1fr 1fr !important;
gap: 10px;
}
.cat-card--moat {
grid-column: span 2 !important;
}
.cat-card { min-height: 132px; padding: 16px 14px 12px; }
.cat-card__title { font-size: 1.15rem; }
.cat-card__glyph { width: 60px; height: 60px; }
}
@media (max-width: 380px) {
.cat-grid { grid-template-columns: 1fr !important; }
.cat-card--moat { grid-column: span 1 !important; }
}
@media (max-width: 540px) {
.rail { grid-template-columns: 1fr !important; gap: 12px; }
.rail-card { padding: 14px; }
.rail-card__name { font-size: 0.98rem; }
}
@media (max-width: 540px) {
.top-row {
grid-template-columns: 28px 60px 1fr !important;
gap: 10px;
padding: 14px 0;
align-items: start;
}
.top-row__rank { font-size: 0.95rem; padding-top: 4px; }
.top-row__img { width: 60px; height: 60px; padding: 6px; }
.top-row__body { min-width: 0; }
.top-row__name {
font-size: 0.98rem;
line-height: 1.22;
margin-bottom: 4px;
overflow-wrap: break-word;
word-break: break-word;
}
.top-row__brand { font-size: 9.5px; gap: 6px; flex-wrap: wrap; }
.top-row__cat-chip { font-size: 8px; padding: 1px 5px; letter-spacing: 0.08em; }
.top-row__tagline {
font-size: 13px !important;
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
}
.top-row__pct strong { font-size: 1.15rem; }
.top-row__score {
grid-column: 1 / -1;
flex-direction: row;
align-items: center;
gap: 8px 14px;
flex-wrap: wrap;
margin-top: 6px;
}
.top-row__bar { flex: 1 1 100px; min-width: 100px; }
.top-row__cta {
grid-column: 1 / -1;
flex-direction: row;
align-items: stretch;
gap: 8px;
margin-top: 4px;
}
.top-row__cta .btn-amazon {
flex: 1;
min-height: 44px;
justify-content: center;
}
.top-row__details { font-size: 10px; flex-shrink: 0; }
}
@media (max-width: 540px) {
.rank-row {
grid-template-columns: 32px 84px 1fr !important;
grid-template-areas: none !important;
gap: 10px;
padding: 16px 0;
align-items: start;
}
.rank-row > * { grid-area: auto !important; }
.rank-row__rank { font-size: 1.05rem; padding-top: 4px; }
.rank-row__img { padding: 8px; align-self: start; }
.rank-row__body { min-width: 0; }
.rank-row__name { font-size: 1rem; line-height: 1.2; margin-bottom: 6px; }
.rank-row__brand { font-size: 9.5px; }
.rank-row__quote {
font-size: 12.5px;
-webkit-line-clamp: 3;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
}
.rank-row__cta {
grid-column: 1 / -1;
text-align: left;
margin-top: 6px;
}
.rank-row__cta .btn-amazon {
width: 100%;
justify-content: center;
min-height: 44px;
}
}
@media (max-width: 768px) {
.pdp__layout, .pdp__grid, .pdp-grid, .pdp__top {
grid-template-columns: 1fr !important;
gap: 20px;
}
.pdp__media-col, .pdp__content-col { min-width: 0; }
.pdp__media { padding: 20px; }
.pdp__media-watermark { font-size: 9px; }
.pdp__rank-badge {
top: 14px; left: 14px; padding: 5px 10px; font-size: 10px;
gap: 6px;
max-width: calc(100% - 28px);
}
.pdp__breadcrumb {
flex-wrap: wrap;
font-size: 11px;
gap: 4px 8px;
}
.pdp__title {
font-size: clamp(1.4rem, 6.5vw, 1.95rem) !important;
line-height: 1.15;
margin-bottom: 12px;
overflow-wrap: break-word;
word-break: break-word;
}
.pdp__brand { font-size: 11px; margin-bottom: 8px; }
.pdp__buy-card { padding: 16px; gap: 12px; }
.pdp__buy-card .btn-amazon {
width: 100%;
min-height: 48px;
justify-content: center;
}
.pdp__buy-divider { margin: 4px -16px; }
.pdp__social-proof {
padding: 12px 14px;
gap: 12px;
margin: 14px 0 18px;
flex-wrap: wrap;
}
.pdp__social-proof-num { font-size: 36px; flex-shrink: 0; }
.pdp__social-proof-text { min-width: 0; flex: 1 1 0; }
.pdp__social-proof-text strong { font-size: 14.5px; }
.pdp__social-proof-meta { font-size: 11.5px; line-height: 1.4; }
.pdp__compare { padding: 12px 14px; margin: 18px 0; }
.pdp__compare-grid {
grid-template-columns: 1fr !important;
gap: 8px;
}
.pdp__why-picked { padding-top: 12px; }
.pdp__why-picked-body { font-size: 12.5px; }
.pdp__quote-card, .pdp__quote { padding: 14px; }
.pdp__quote-text { font-size: 14px; line-height: 1.55; }
.pdp__divergence,
.pdp__faq,
.pdp__about { padding: 14px; }
}
@media (max-width: 480px) {
.pdp__why-row { flex-direction: column; gap: 4px; align-items: stretch; }
.pdp__why-key { width: 100%; padding-top: 0; }
}
@media (max-width: 768px) {
body:has(.pdp__sticky-buy) main { padding-bottom: 92px; }
.pdp__sticky-buy { padding: 8px 12px; }
.pdp__sticky-buy .btn-amazon {
padding: 10px 14px;
min-height: 42px;
font-size: 14px;
}
.pdp__sticky-buy .btn-amazon__price { display: none; }
}
@media (max-width: 768px) {
.journal-grid,
.journal-featured,
.journal-header__grid,
.pillars,
.article-tldr__cols,
.article-product,
.article-end-cta,
.blog-grid,
.featured-grid {
grid-template-columns: 1fr !important;
gap: 18px;
}
.featured-card { padding: 16px; }
.featured-card__cover { aspect-ratio: 16/10; }
.journal-card, .pillar-card { padding: 16px; }
}
@media (max-width: 540px) {
.article-body, .article__body, .pillar__body {
font-size: 16px;
line-height: 1.65;
}
.article-hero h1, .article__title, .pillar__title {
font-size: clamp(1.55rem, 6.5vw, 2.05rem) !important;
line-height: 1.15;
overflow-wrap: break-word;
}
.article-body h2, .article__body h2 {
font-size: 1.4rem;
margin-top: 28px;
line-height: 1.2;
}
.article-body h3, .article__body h3 {
font-size: 1.1rem;
margin-top: 20px;
}
.article-body img, .article__body img { border-radius: 8px; }
.article-body blockquote, .article__body blockquote {
padding: 12px 14px;
font-size: 14.5px;
margin-left: 0;
}
.article-body table, .article__body table {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
max-width: 100%;
}
.article-body pre, .article__body pre {
overflow-x: auto;
font-size: 12.5px;
}
}
@media (max-width: 768px) {
.marquee__track { font-size: 11px; gap: 32px; }
}
@media (max-width: 540px) {
.site-footer { padding: 32px 0; font-size: 13px; }
.site-footer__grid {
grid-template-columns: 1fr 1fr !important;
gap: 22px;
}
}
@media (max-width: 380px) {
.site-footer__grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 768px) {
.btn-amazon { min-height: 46px; }
.btn-amazon--sm { min-height: 40px; }
}
@media (max-width: 480px) {
h1, h2, h3, p, li,
.top-row__name, .rank-row__name, .pdp__title,
.featured-card__title, .journal-card__title,
.article-body h1, .article-body h2, .article-body h3,
.article-body p, .article-body li {
overflow-wrap: break-word;
word-break: break-word;
hyphens: auto;
}
.mono, code, kbd { word-break: break-all; }
}
@media (max-width: 768px) {
.hero-search-dropdown,
.search-dropdown {
max-width: 100% !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
box-sizing: border-box;
}
}
@media (max-width: 380px) {
.pdp__alt-card { gap: 10px; padding: 10px 12px; }
.pdp__alt-img { width: 42px; height: 42px; }
.pdp__alt-name { font-size: 13.5px; }
.pdp__alt-meta { font-size: 11.5px; }
.pdp__alt-arrow { display: none; }
}
@media (max-width: 768px) {
.scrollable, .table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
max-width: 100%;
}
}
@media (max-width: 768px) {
.methodology__grid, .about__grid {
grid-template-columns: 1fr !important;
gap: 24px;
}
}
@media (max-width: 480px) {
.hero__stats { padding-top: 18px; gap: 14px; }
.hero__stat-label { font-size: 9.5px; letter-spacing: 0.08em; }
}
@media (max-width: 768px) {
.pillar-sticky-buy .pillar-sticky-buy__dismiss {
order: -1;
color: var(--ink-3);
opacity: 0.6;
transition: opacity 0.2s;
}
.pillar-sticky-buy .pillar-sticky-buy__dismiss:hover,
.pillar-sticky-buy .pillar-sticky-buy__dismiss:focus {
opacity: 1;
outline: none;
}
.pillar-sticky-buy ~ .site-footer { padding-bottom: 80px; }
}
.pdp-enrich { padding: 32px 0; border-top: 1px solid var(--rule); }
.pdp-enrich > section + section { margin-top: 24px; }
.pdp-enrich__decision {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-bottom: 24px;
}
@media (max-width: 640px) {
.pdp-enrich__decision { grid-template-columns: 1fr; }
}
.pdp-enrich__decision-col {
padding: 16px 18px;
border-radius: 10px;
background: var(--paper-2, #fafaf7);
}
.pdp-enrich__decision-col--for { border-left: 3px solid var(--accent, #2c8e6a); }
.pdp-enrich__decision-col--skip { border-left: 3px solid #d04848; }
.pdp-enrich__decision-head {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-3);
font-weight: 600;
margin-bottom: 10px;
}
.pdp-enrich__decision-col ul {
list-style: none;
padding: 0;
margin: 0;
}
.pdp-enrich__decision-col li {
padding: 8px 0 8px 18px;
position: relative;
font-size: 14px;
line-height: 1.45;
color: var(--ink);
}
.pdp-enrich__decision-col li:before {
content: "•";
position: absolute;
left: 0;
color: var(--ink-3);
}
.pdp-enrich__verdict {
padding: 18px 20px;
border-radius: 10px;
background: linear-gradient(180deg, rgba(44,142,106,0.04) 0%, transparent 100%);
border: 1px solid rgba(44,142,106,0.18);
margin-bottom: 24px;
}
.pdp-enrich__verdict-label {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--accent, #2c8e6a);
font-weight: 700;
margin-bottom: 8px;
}
.pdp-enrich__verdict-body {
font-size: 15px;
line-height: 1.55;
color: var(--ink);
}
.pdp-enrich__complaints { margin-bottom: 24px; }
.pdp-enrich__complaints-head {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-3);
font-weight: 600;
margin-bottom: 10px;
}
.pdp-enrich__complaints ul {
list-style: none;
padding: 0;
margin: 0;
}
.pdp-enrich__complaint {
display: flex;
gap: 12px;
padding: 10px 0;
border-bottom: 1px solid var(--rule);
align-items: baseline;
font-size: 14px;
line-height: 1.4;
}
.pdp-enrich__complaint:last-child { border-bottom: 0; }
.pdp-enrich__complaint-sev {
font-family: var(--font-mono);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.08em;
padding: 3px 7px;
border-radius: 4px;
flex-shrink: 0;
min-width: 60px;
text-align: center;
}
.pdp-enrich__complaint--minor .pdp-enrich__complaint-sev {
background: #f0f0eb;
color: var(--ink-3);
}
.pdp-enrich__complaint--medium .pdp-enrich__complaint-sev {
background: #fef3e2;
color: #b56b1d;
}
.pdp-enrich__complaint--serious .pdp-enrich__complaint-sev {
background: #fde4e4;
color: #b81e1e;
}
.pdp-enrich__controversy {
padding: 16px 20px;
border-radius: 10px;
background: #fff8e7;
border: 1px solid #f0d690;
margin-bottom: 24px;
}
.pdp-enrich__controversy-head {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #8a5d10;
margin-bottom: 8px;
}
.pdp-enrich__controversy-body {
font-size: 14px;
line-height: 1.5;
color: var(--ink);
}
.pdp-enrich__alternatives { margin-bottom: 24px; }
.pdp-enrich__alternatives-head {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-3);
font-weight: 600;
margin-bottom: 10px;
}
.pdp-enrich__alternatives-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
@media (max-width: 640px) {
.pdp-enrich__alternatives-grid { grid-template-columns: 1fr; }
}
.pdp-enrich__alt-card {
display: block;
padding: 14px 16px;
border: 1px solid var(--rule);
border-radius: 10px;
background: var(--paper);
text-decoration: none;
color: inherit;
transition: border-color 0.15s, transform 0.1s;
}
.pdp-enrich__alt-card:hover {
border-color: var(--accent, #2c8e6a);
transform: translateY(-1px);
text-decoration: none;
}
.pdp-enrich__alt-label {
font-size: 12px;
font-weight: 600;
color: var(--accent, #2c8e6a);
margin-bottom: 4px;
}
.pdp-enrich__alt-product {
font-size: 14px;
margin-bottom: 6px;
color: var(--ink);
}
.pdp-enrich__alt-product strong { font-weight: 700; }
.pdp-enrich__alt-why {
font-size: 12px;
color: var(--ink-3);
line-height: 1.4;
}
.pdp-enrich__related {
padding-top: 8px;
border-top: 1px solid var(--rule);
}
.pdp-enrich__related-head {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-3);
font-weight: 600;
margin-bottom: 10px;
}
.pdp-enrich__related-links {
display: flex;
flex-wrap: wrap;
gap: 12px 18px;
}
.pdp-enrich__pillar-link {
font-size: 13px;
color: var(--accent, #2c8e6a);
text-decoration: underline;
text-underline-offset: 3px;
}
@media (max-width: 700px) {
.article-hero { padding: 22px 0 18px !important; }
.article-hero__tag { margin-bottom: 8px !important; }
.article-hero__title {
font-size: 1.7rem !important;
line-height: 1.13 !important;
margin: 4px 0 12px !important;
}
.article-hero__lede {
font-size: 1.0625rem !important;
line-height: 1.45 !important;
margin-bottom: 16px !important;
}
.article-hero__meta { padding-top: 14px !important; gap: 12px !important; }
.article-body { padding: 22px 0 48px !important; }
.article-lead { font-size: 1.15rem !important; line-height: 1.4 !important; margin-bottom: 18px !important; }
h2.article-h2, .article-h2 { font-size: 1.4rem !important; margin: 30px 0 12px !important; }
.article-body h3 { margin: 24px 0 10px !important; }
.article-body p, .article-body ul, .article-body ol { margin-bottom: 1.15em !important; }
.article-body blockquote { margin: 18px 0 !important; padding: 14px 16px !important; }
.article-tldr { padding: 16px 16px !important; margin: 20px 0 26px !important; }
.article-tldr__head { margin-bottom: 14px !important; padding-bottom: 10px !important; }
#top-list { padding-top: 36px !important; padding-bottom: 36px !important; }
}
.site-nav-m { display: none; }
@media (max-width: 900px) {
.site-nav-m {
display: flex;
gap: 8px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding: 0 16px 10px;
}
.site-nav-m::-webkit-scrollbar { display: none; }
.site-nav-m__link {
flex: 0 0 auto;
font-size: 13px;
line-height: 1;
padding: 8px 13px;
border: 1px solid var(--gray);
border-radius: 999px;
background: var(--card, #fff);
color: var(--ink-2);
text-decoration: none;
white-space: nowrap;
}
.site-nav-m__link.is-active { background: var(--ink); border-color: var(--ink); color: var(--cream); }
}
.prefoot { border-top: 1px solid var(--gray); background: var(--cream-2, #f3ece1); padding: 52px 0 56px; }
.prefoot__eyebrow {
font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em;
text-transform: uppercase; color: var(--accent);
}
.prefoot__title { font-family: var(--font-display); font-size: clamp(1.5rem, 2.8vw, 2.1rem); letter-spacing: -.02em; margin: 8px 0 22px; }
.prefoot__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.prefoot__card {
display: flex; flex-direction: column; gap: 8px;
border: 1px solid var(--gray); border-radius: 16px; padding: 20px;
background: var(--card, #fff); text-decoration: none; color: inherit;
transition: border-color .15s, transform .15s;
}
.prefoot__card:hover { border-color: var(--accent); transform: translateY(-2px); }
.prefoot__name { font-family: var(--font-display); font-size: 19px; font-weight: 650; letter-spacing: -.01em; }
.prefoot__desc { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); flex: 1; }
.prefoot__go { font-family: var(--font-mono); font-size: 12px; color: var(--accent); }
@media (max-width: 760px) { .prefoot__grid { grid-template-columns: 1fr; } .prefoot { padding: 40px 0 44px; } }
.toolstrip { padding: 64px 0 8px; }
.toolstrip__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 24px; }
.toolstrip__card {
display: flex; flex-direction: column; gap: 8px;
border: 1px solid var(--gray); border-radius: 18px; padding: 22px 20px;
background: var(--card, #fff); text-decoration: none; color: inherit;
transition: border-color .15s, transform .15s;
}
.toolstrip__card:hover { border-color: var(--accent); transform: translateY(-2px); }
.toolstrip__icon { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(214,90,68,.14), rgba(214,90,68,.04)); color: var(--accent); }
.toolstrip__name { font-family: var(--font-display); font-size: 18px; font-weight: 650; letter-spacing: -.01em; }
.toolstrip__desc { font-size: 13px; line-height: 1.5; color: var(--ink-2); flex: 1; }
.toolstrip__stat { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3); }
@media (max-width: 900px) { .toolstrip__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .toolstrip__grid { grid-template-columns: 1fr; } }
.pdp-xlinks { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.pdp-xlinks a {
font-family: var(--font-mono); font-size: 12px; text-decoration: none;
color: var(--ink-2); border: 1px solid var(--gray); border-radius: 999px;
padding: 7px 12px; transition: border-color .15s, color .15s;
}
.pdp-xlinks a:hover { border-color: var(--accent); color: var(--accent); }
.article-collage { margin: 30px 0; }
.article-collage img { display: block; width: 100%; height: auto; border-radius: 16px; border: 1px solid var(--gray); }
.article-collage figcaption { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .04em; color: var(--ink-3); margin-top: 9px; }
.toolstrip__card { overflow: hidden; }
.toolstrip__viz { display: block; margin: -22px -20px 10px; border-bottom: 1px solid var(--cream-2); }
.toolstrip__viz img { display: block; width: 100%; height: 92px; object-fit: cover; }
@media (max-width: 700px) {
.toolstrip__viz img { height: 74px; }
}