/* =====================================================================
site-improver v2 — palette-driven CTA, Amazon identity via label + glyph
Same selectors as original templates/site-style.css. Content-preserving.
===================================================================== */
:root {
/* Neutrals — stable across all palettes */
--neutral-0: #ffffff;
--neutral-50: #fafafa;
--neutral-100: #f4f5f4;
--neutral-200: #e7e9e7;
--neutral-300: #d3d6d3;
--neutral-500: #6b7570;
--neutral-700: #2a302c;
--neutral-800: #1a1f1b;
--neutral-900: #0d0f0d;
/* Semantic neutrals */
--color-white: var(--neutral-0);
--color-text: var(--neutral-800);
--color-text-mute: var(--neutral-500);
--color-ink: var(--neutral-900);
--color-border: var(--neutral-200);
/* Palette — defaults to outdoor. Override via .palette-* on */
--color-accent: #16a34a;
--color-accent-2: #15803d;
--color-accent-ink: #14532d;
--color-accent-soft: #dcfce7;
--color-dark: #14261a;
--color-surface-1: #f1f7f3;
--color-light-bg: var(--color-surface-1); /* alias for backward compat */
/* Typography */
--font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
--font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
/* Layout */
--max-width: 1200px;
--radius-sm: 6px;
--radius: 10px;
--radius-lg: 16px;
--shadow-sm: 0 1px 2px rgba(15,23,20,.06), 0 1px 1px rgba(15,23,20,.04);
--shadow: 0 6px 16px rgba(15,23,20,.08), 0 2px 4px rgba(15,23,20,.04);
--shadow-lg: 0 20px 40px rgba(15,23,20,.12), 0 4px 10px rgba(15,23,20,.06);
--t: .18s ease;
--header-h: 64px;
/* Amazon smile glyph — inline SVG, inherits currentColor via mask */
--icon-amazon: url("data:image/svg+xml;utf8,");
/* External-link arrow (used for non-Amazon outbound / anchors if needed) */
--icon-arrow: url("data:image/svg+xml;utf8,");
}
/* ============================================================
PALETTES
Each sets 6 tokens: accent, accent-2 (hover), accent-ink (pressed/deep),
accent-soft (callout bg), dark (dark sections), surface-1 (light sections).
============================================================ */
.palette-outdoor { --color-accent:#16a34a; --color-accent-2:#15803d; --color-accent-ink:#14532d; --color-accent-soft:#dcfce7; --color-dark:#14261a; --color-surface-1:#f1f7f3; }
.palette-wellness { --color-accent:#0d9488; --color-accent-2:#0f766e; --color-accent-ink:#134e4a; --color-accent-soft:#ccfbf1; --color-dark:#0f2423; --color-surface-1:#eef6f5; }
.palette-tech { --color-accent:#2563eb; --color-accent-2:#1d4ed8; --color-accent-ink:#1e3a8a; --color-accent-soft:#dbeafe; --color-dark:#0f1629; --color-surface-1:#eef3fb; }
.palette-auto { --color-accent:#ea580c; --color-accent-2:#c2410c; --color-accent-ink:#7c2d12; --color-accent-soft:#ffedd5; --color-dark:#1a130a; --color-surface-1:#fbf1e8; }
.palette-home { --color-accent:#b45309; --color-accent-2:#92400e; --color-accent-ink:#78350f; --color-accent-soft:#fef3c7; --color-dark:#1c1410; --color-surface-1:#f6f0e6; }
.palette-fashion { --color-accent:#a16207; --color-accent-2:#854d0e; --color-accent-ink:#713f12; --color-accent-soft:#fef9c3; --color-dark:#18181b; --color-surface-1:#f5f2ed; }
.palette-food { --color-accent:#dc2626; --color-accent-2:#b91c1c; --color-accent-ink:#7f1d1d; --color-accent-soft:#fee2e2; --color-dark:#1c1011; --color-surface-1:#faeceb; }
.palette-beauty { --color-accent:#db2777; --color-accent-2:#be185d; --color-accent-ink:#831843; --color-accent-soft:#fce7f3; --color-dark:#1c1019; --color-surface-1:#f9ecf2; }
.palette-kids { --color-accent:#7c3aed; --color-accent-2:#6d28d9; --color-accent-ink:#4c1d95; --color-accent-soft:#ede9fe; --color-dark:#1a1226; --color-surface-1:#f0edfa; }
.palette-sports { --color-accent:#0284c7; --color-accent-2:#0369a1; --color-accent-ink:#075985; --color-accent-soft:#e0f2fe; --color-dark:#0c1e2e; --color-surface-1:#eaf3fa; }
/* ============================================================
RESET
============================================================ */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
html,body{ overflow-x: hidden; }
body{
font-family: var(--font-body);
font-size: 16px;
line-height: 1.6;
color: var(--color-text);
background: var(--color-white);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img,svg,picture,video{ max-width:100%; height:auto; display:block; }
a{ color: inherit; text-decoration: none; }
p{ font-family: var(--font-body); }
ul,ol{ padding-left: 1.25em; }
li{ margin: .3em 0; }
strong{ font-weight: 600; color: var(--color-ink); }
h1,h2,h3,h4,h5{
font-family: var(--font-body);
font-weight: 700;
line-height: 1.2;
color: var(--color-ink);
letter-spacing: -0.01em;
}
:focus-visible{
outline: 3px solid color-mix(in srgb, var(--color-accent) 55%, transparent);
outline-offset: 2px;
border-radius: 4px;
}
@media (prefers-reduced-motion: reduce){
*{ transition:none!important; animation:none!important; scroll-behavior:auto!important; }
}
/* ============================================================
LAYOUT
============================================================ */
.container{
max-width: var(--max-width);
margin: 0 auto;
padding: 0 clamp(16px, 4vw, 32px);
}
section{ scroll-margin-top: calc(var(--header-h) + 12px); }
.section-heading{
font-family: var(--font-mono);
font-size: clamp(1.5rem, 2.5vw, 2rem);
letter-spacing: -0.01em;
text-align: center;
margin-bottom: 12px;
}
.section-heading + p,
.block-products > .container > p{
text-align: center;
max-width: 68ch;
margin: 0 auto 40px;
color: var(--color-text-mute);
}
/* ============================================================
BUTTONS — palette-driven; Amazon identity via label + glyph
============================================================ */
.btn{
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
font-family: var(--font-body);
font-weight: 600;
font-size: 15px;
line-height: 1;
padding: 14px 22px;
border-radius: var(--radius-sm);
border: 1px solid transparent;
cursor: pointer;
transition: transform var(--t), box-shadow var(--t), background var(--t), border-color var(--t);
text-decoration: none;
white-space: nowrap;
color: #fff;
}
.btn:active{ transform: translateY(1px); }
/* Primary = Amazon destination. bg/hover come from palette. */
.btn-primary{
background: var(--color-accent);
color: #fff;
border-color: color-mix(in srgb, var(--color-accent-ink) 45%, transparent);
box-shadow:
0 6px 16px color-mix(in srgb, var(--color-accent) 28%, transparent),
inset 0 1px 0 rgba(255,255,255,.14);
}
/* Amazon "smile-arrow" glyph before label, in white currentColor via mask */
.btn-primary::before{
content: "";
flex: 0 0 20px;
width: 20px; height: 9px;
background: currentColor;
-webkit-mask: var(--icon-amazon) center/contain no-repeat;
mask: var(--icon-amazon) center/contain no-repeat;
opacity: .96;
}
.btn-primary::after{
content: "→";
font-weight: 700;
font-size: 16px;
margin-left: -2px;
transition: transform var(--t);
}
.btn-primary:hover{
background: var(--color-accent-2);
transform: translateY(-1px);
box-shadow:
0 10px 24px color-mix(in srgb, var(--color-accent) 38%, transparent),
inset 0 1px 0 rgba(255,255,255,.16);
}
.btn-primary:hover::after{ transform: translateX(3px); }
.btn-primary:active{
background: var(--color-accent-ink);
box-shadow: 0 3px 8px color-mix(in srgb, var(--color-accent) 30%, transparent);
}
/* Header variant — same palette, compact */
.btn-header{
background: var(--color-accent);
color: #fff;
border-color: color-mix(in srgb, var(--color-accent-ink) 40%, transparent);
padding: 9px 14px;
font-size: 13px;
gap: 8px;
box-shadow: 0 2px 8px color-mix(in srgb, var(--color-accent) 22%, transparent);
}
.btn-header::before{
content: "";
flex: 0 0 16px;
width: 16px; height: 7px;
background: currentColor;
-webkit-mask: var(--icon-amazon) center/contain no-repeat;
mask: var(--icon-amazon) center/contain no-repeat;
opacity: .9;
}
.btn-header:hover{
background: var(--color-accent-2);
transform: translateY(-1px);
box-shadow: 0 6px 14px color-mix(in srgb, var(--color-accent) 30%, transparent);
}
/* ============================================================
HEADER
============================================================ */
.site-header{
position: sticky;
top: 0;
z-index: 50;
background: rgba(255,255,255,.92);
backdrop-filter: saturate(180%) blur(10px);
-webkit-backdrop-filter: saturate(180%) blur(10px);
border-bottom: 1px solid transparent;
transition: border-color var(--t), box-shadow var(--t);
}
.site-header.is-scrolled{
border-bottom-color: var(--color-border);
box-shadow: 0 2px 12px rgba(0,0,0,.04);
}
.header-inner{
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
min-height: var(--header-h);
padding-top: 10px;
padding-bottom: 10px;
}
.brand-name{
font-family: var(--font-mono);
font-weight: 700;
font-size: 18px;
letter-spacing: -0.02em;
color: var(--color-ink);
flex: 0 0 auto;
}
/* Desktop product nav — always one row of slots.
Long labels wrap inside their own slot (2+ lines within one link),
but the menu itself never breaks into two rows. */
.main-nav{
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
flex: 1;
column-gap: clamp(10px, 1.1vw, 18px);
min-width: 0;
padding: 0 12px;
}
.main-nav a{
flex: 1 1 0;
min-width: 0;
text-align: center;
font-size: clamp(12px, 0.9vw, 13.5px);
font-weight: 500;
line-height: 1.25;
color: var(--color-text-mute);
white-space: normal; /* allow wrapping within a slot */
padding: 4px 0;
border-bottom: 1px solid transparent;
transition: color var(--t), border-color var(--t);
}
.main-nav a:hover{
color: var(--color-ink);
border-bottom-color: var(--color-accent);
}
/* Below 1100px the nav becomes cramped — hide until mobile hamburger takes over */
@media (max-width: 1099px){
.main-nav{ display: none; }
}
.nav-toggle{
display: none;
background: transparent;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
width: 40px; height: 40px;
font-size: 20px;
color: var(--color-ink);
cursor: pointer;
align-items: center;
justify-content: center;
}
.mobile-nav{
display: none;
flex-direction: column;
gap: 4px;
padding: 12px clamp(16px, 4vw, 32px) 20px;
border-top: 1px solid var(--color-border);
background: var(--color-white);
}
.mobile-nav a{
padding: 10px 0;
font-size: 15px;
color: var(--color-text);
border-bottom: 1px solid var(--color-border);
}
.mobile-nav a:last-child{ border-bottom: none; }
.mobile-nav .btn-primary{ margin-top: 12px; width: 100%; }
.site-header.is-open .mobile-nav{ display: flex; }
/* ============================================================
HERO
============================================================ */
.block-hero{
background:
radial-gradient(1200px 420px at 15% -10%, color-mix(in srgb, var(--color-accent) 14%, transparent) 0%, transparent 60%),
linear-gradient(180deg, var(--color-surface-1) 0%, var(--color-white) 100%);
padding: clamp(40px, 6vw, 80px) 0 clamp(48px, 6vw, 96px);
overflow: hidden;
}
.hero-inner{
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: clamp(32px, 5vw, 64px);
align-items: center;
}
.hero-content{ max-width: 58ch; }
.hero-heading{
font-family: var(--font-mono);
font-size: clamp(2rem, 3.4vw, 2.9rem);
line-height: 1.1;
letter-spacing: -0.02em;
margin-bottom: 20px;
color: var(--color-ink);
}
.hero-text p{
font-size: clamp(15px, 1.05vw, 17px);
line-height: 1.65;
color: var(--color-text);
margin-bottom: 24px;
}
.hero-badges{
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 28px;
/* Prevent overflow on narrow viewports — badges shrink instead of pushing
parent wider when their combined width exceeds available space. */
max-width: 100%;
}
.hero-badges .badge{
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
font-size: 13px;
font-weight: 500;
font-family: var(--font-mono);
color: var(--color-accent-ink);
background: var(--color-accent-soft);
border: 1px solid color-mix(in srgb, var(--color-accent) 22%, transparent);
border-radius: 999px;
/* Allow long badge labels to wrap inside the pill instead of forcing
horizontal overflow on narrow screens. */
white-space: normal;
text-align: left;
line-height: 1.3;
max-width: 100%;
}
@media (max-width: 600px){
.hero-badges{ gap: 6px; }
.hero-badges .badge{ font-size: 12px; padding: 5px 10px; border-radius: 14px; }
}
.hero-content .btn-primary{
padding: 16px 28px;
font-size: 16px;
}
.hero-image picture, .hero-image img{
width: 100%;
aspect-ratio: 4/3;
object-fit: contain;
filter: drop-shadow(0 20px 30px rgba(0,0,0,.12));
}
@media (max-width: 860px){
.hero-inner{ grid-template-columns: 1fr; }
.hero-image{ order: -1; }
.hero-image picture, .hero-image img{ max-height: 260px; aspect-ratio: auto; }
}
/* ------------------------------------------------------------
Hero variants — same HTML, class on .block-hero.
· (none) / hero-split text left / image right (default)
· hero-flip image left / text right (mirror)
· hero-centered stacked centered, image below
· hero-panel text on white, image on accent-soft panel
------------------------------------------------------------ */
/* FLIP: mirror default (image left, text right) */
.block-hero.hero-flip .hero-inner{ grid-template-columns: 1fr 1.05fr; }
.block-hero.hero-flip .hero-image{ order: -1; }
.block-hero.hero-flip .hero-content{ margin-left: auto; }
.block-hero.hero-flip{
background:
radial-gradient(1200px 420px at 85% -10%, color-mix(in srgb, var(--color-accent) 14%, transparent) 0%, transparent 60%),
linear-gradient(180deg, var(--color-surface-1) 0%, var(--color-white) 100%);
}
@media (max-width: 860px){
.block-hero.hero-flip .hero-inner{ grid-template-columns: 1fr; }
}
/* CENTERED: stacked, content top, image crown below */
.block-hero.hero-centered .hero-inner{
grid-template-columns: 1fr;
text-align: center;
gap: clamp(24px, 3vw, 40px);
max-width: 960px;
margin: 0 auto;
}
.block-hero.hero-centered .hero-content{
max-width: 720px;
margin: 0 auto;
order: 1;
}
.block-hero.hero-centered .hero-heading{
font-size: clamp(2.1rem, 4vw, 3.2rem);
}
.block-hero.hero-centered .hero-text p{ max-width: 62ch; margin-left: auto; margin-right: auto; }
.block-hero.hero-centered .hero-badges{ justify-content: center; }
.block-hero.hero-centered .hero-image{ order: 2; max-width: 520px; margin: 0 auto; }
.block-hero.hero-centered .hero-image picture,
.block-hero.hero-centered .hero-image img{
aspect-ratio: 5/4;
max-height: 440px;
}
/* Desktop: switch from stacked-centered to 2-column side-by-side so it doesn't
read as a mobile layout. Text aligns left, image sits to the right. The
"centered" identity comes from the balanced 1.05:1 grid in a max-width
container, not from text-align. */
@media (min-width: 900px){
.block-hero.hero-centered .hero-inner{
grid-template-columns: 1.05fr 1fr;
text-align: left;
align-items: center;
max-width: 1140px;
gap: clamp(40px, 5vw, 64px);
}
.block-hero.hero-centered .hero-content{ max-width: none; margin: 0; }
.block-hero.hero-centered .hero-text p{ max-width: 56ch; margin-left: 0; margin-right: 0; }
.block-hero.hero-centered .hero-badges{ justify-content: flex-start; }
/* Image goes to the RIGHT column. Order 2 (mobile default) means it lands
in the second grid column on desktop. Text takes column 1 (left). */
.block-hero.hero-centered .hero-image{ max-width: none; margin: 0; }
.block-hero.hero-centered .hero-image picture,
.block-hero.hero-centered .hero-image img{ max-height: 480px; }
}
/* PANEL: text on white left, image on accent-soft panel right */
.block-hero.hero-panel{
background: var(--color-white);
padding: 0;
overflow: visible;
}
.block-hero.hero-panel > .container{
max-width: none;
padding: 0;
}
.block-hero.hero-panel .hero-inner{
grid-template-columns: 1fr 1fr;
gap: 0;
align-items: stretch;
max-width: none;
}
.block-hero.hero-panel .hero-content{
padding: clamp(40px, 6vw, 80px) clamp(24px, 5vw, 64px);
max-width: 620px;
margin-left: auto;
align-self: center;
}
.block-hero.hero-panel .hero-image{
background:
radial-gradient(800px 400px at 60% 50%, color-mix(in srgb, var(--color-accent) 18%, transparent) 0%, transparent 70%),
linear-gradient(135deg, var(--color-accent-soft) 0%, color-mix(in srgb, var(--color-accent) 8%, white) 100%);
display: flex;
align-items: center;
justify-content: center;
padding: clamp(32px, 5vw, 64px);
position: relative;
overflow: hidden;
}
.block-hero.hero-panel .hero-image::before{
content: "";
position: absolute;
inset: auto 20% 8% 20%;
height: 18px;
background: radial-gradient(ellipse at center, rgba(0,0,0,.18) 0%, transparent 70%);
pointer-events: none;
}
.block-hero.hero-panel .hero-image picture,
.block-hero.hero-panel .hero-image img{
width: 100%;
max-width: 520px;
max-height: 480px;
aspect-ratio: 1/1;
filter: drop-shadow(0 24px 40px rgba(0,0,0,.15));
position: relative;
z-index: 1;
}
@media (max-width: 860px){
.block-hero.hero-panel .hero-inner{ grid-template-columns: 1fr; }
.block-hero.hero-panel .hero-content{ padding: clamp(32px, 6vw, 48px) clamp(16px, 4vw, 32px); max-width: none; }
.block-hero.hero-panel .hero-image{ order: -1; padding: clamp(24px, 5vw, 40px); }
.block-hero.hero-panel .hero-image picture, .block-hero.hero-panel .hero-image img{ max-height: 260px; aspect-ratio: auto; }
}
/* ============================================================
TRUST (dark section)
============================================================ */
.block-trust{
background: var(--color-dark);
color: #e9edec;
padding: clamp(32px, 4vw, 56px) 0;
}
.trust-grid{
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 28px;
}
.trust-item{ display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.trust-item .trust-icon{
width: 48px; height: 48px;
background: color-mix(in srgb, var(--color-accent) 22%, transparent);
border: 1px solid color-mix(in srgb, var(--color-accent) 35%, transparent);
border-radius: 50%;
padding: 8px;
object-fit: contain;
flex: 0 0 48px;
}
.trust-item .label{
font-family: var(--font-mono);
font-size: 14px;
font-weight: 600;
color: #fff;
line-height: 1.3;
}
.trust-item p{ font-size: 14px; line-height: 1.55; color: #c9cfcd; }
@media (max-width: 900px){ .trust-grid{ grid-template-columns: repeat(2, 1fr); gap: 24px; } }
@media (max-width: 560px){ .trust-grid{ grid-template-columns: 1fr; } }
/* ------------------------------------------------------------
Trust variants — same HTML, swapped class on .block-trust
· (no class) / .trust-cards dark 4-up with icon circles (default)
· .trust-minimal light, no icons, large numbered counters
· .trust-split light surface, icon+text side-by-side per item (2-up)
· .trust-row white, single horizontal strip with dividers
· .trust-panels white cards with accent icon tile + soft shadow
------------------------------------------------------------ */
/* -- MINIMAL: no icons, big mono counters, editorial look -- */
.block-trust.trust-minimal{
background: var(--color-surface-1);
color: var(--color-text);
}
.trust-minimal .trust-grid{
grid-template-columns: repeat(4, 1fr);
counter-reset: trust;
gap: 24px;
}
.trust-minimal .trust-item{
counter-increment: trust;
padding-top: 20px;
border-top: 1px solid color-mix(in srgb, var(--color-ink) 12%, transparent);
gap: 12px;
align-items: flex-start;
text-align: left;
}
.trust-minimal .trust-item::before{
content: counter(trust, decimal-leading-zero);
font-family: var(--font-mono);
font-size: 12px;
font-weight: 600;
letter-spacing: .05em;
color: var(--color-accent);
}
.trust-minimal .trust-item .trust-icon{ display: none; }
.trust-minimal .trust-item .label{
font-family: var(--font-body);
font-size: 16px;
font-weight: 700;
color: var(--color-ink);
letter-spacing: -0.01em;
}
.trust-minimal .trust-item p{ color: var(--color-text-mute); }
/* -- SPLIT: icon left, text right, light surface, 2 per row -- */
.block-trust.trust-split{
background: var(--color-surface-1);
color: var(--color-text);
}
.trust-split .trust-grid{ grid-template-columns: repeat(2, 1fr); gap: 20px; }
.trust-split .trust-item{
flex-direction: row;
align-items: flex-start;
text-align: left;
gap: 16px;
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius);
padding: 18px 20px;
}
.trust-split .trust-item .trust-icon{
width: 52px; height: 52px;
background: var(--color-accent-soft);
border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent);
border-radius: var(--radius-sm);
padding: 10px;
flex: 0 0 52px;
}
.trust-split .trust-item .label{
color: var(--color-ink);
font-size: 15px;
}
.trust-split .trust-item p{ color: var(--color-text-mute); }
.trust-split .trust-item > *:not(.trust-icon){ flex: 1; min-width: 0; }
.trust-split .trust-item > .trust-item-body{ display: contents; }
/* -- ROW: thin horizontal strip with vertical dividers -- */
.block-trust.trust-row{
background: var(--color-white);
color: var(--color-text);
border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
padding: clamp(24px, 3vw, 40px) 0;
}
.trust-row .trust-grid{
grid-template-columns: repeat(4, 1fr);
gap: 0;
}
.trust-row .trust-item{
padding: 4px 20px;
border-left: 1px solid var(--color-border);
align-items: flex-start;
text-align: left;
gap: 8px;
}
.trust-row .trust-item:first-child{ border-left: none; padding-left: 0; }
.trust-row .trust-item:last-child{ padding-right: 0; }
.trust-row .trust-item .trust-icon{
width: 28px; height: 28px;
background: none;
border: none;
padding: 0;
flex: 0 0 28px;
filter: none;
}
.trust-row .trust-item .label{
font-family: var(--font-body);
font-size: 14px;
font-weight: 700;
color: var(--color-ink);
}
.trust-row .trust-item p{
font-size: 13px;
color: var(--color-text-mute);
line-height: 1.5;
}
@media (max-width: 900px){
.trust-row .trust-grid{ grid-template-columns: repeat(2, 1fr); }
.trust-row .trust-item{ padding: 12px 16px; }
.trust-row .trust-item:nth-child(2n+1){ border-left: none; padding-left: 0; }
}
@media (max-width: 560px){
.trust-row .trust-grid{ grid-template-columns: 1fr; gap: 16px; }
.trust-row .trust-item{ border-left: none; padding: 0; border-top: 1px solid var(--color-border); padding-top: 16px; }
.trust-row .trust-item:first-child{ border-top: none; padding-top: 0; }
}
/* -- PANELS: white cards with colored icon tile + shadow -- */
.block-trust.trust-panels{
background: var(--color-surface-1);
color: var(--color-text);
}
.trust-panels .trust-grid{ grid-template-columns: repeat(4, 1fr); gap: 20px; }
.trust-panels .trust-item{
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius);
padding: 22px;
box-shadow: var(--shadow-sm);
gap: 14px;
transition: transform var(--t), box-shadow var(--t);
}
.trust-panels .trust-item:hover{ transform: translateY(-2px); box-shadow: var(--shadow); }
.trust-panels .trust-item .trust-icon{
width: 44px; height: 44px;
background: var(--color-accent-soft);
border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent);
border-radius: var(--radius-sm);
padding: 9px;
flex: 0 0 44px;
box-shadow: 0 2px 6px color-mix(in srgb, var(--color-accent) 18%, transparent);
}
.trust-panels .trust-item .label{
color: var(--color-ink);
font-size: 15px;
font-family: var(--font-body);
}
.trust-panels .trust-item p{ color: var(--color-text-mute); font-size: 13.5px; }
@media (max-width: 900px){ .trust-panels .trust-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .trust-panels .trust-grid{ grid-template-columns: 1fr; } }
/* ============================================================
PRODUCTS
============================================================ */
.block-products{ padding: clamp(48px, 6vw, 88px) 0; background: var(--color-white); }
.products-grid{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.product-card{
display: flex;
flex-direction: column;
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius);
overflow: hidden;
transition: transform var(--t), box-shadow var(--t), border-color var(--t);
position: relative;
}
.product-card::before{
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 3px;
background: linear-gradient(90deg, var(--color-accent), var(--color-accent-2));
opacity: 0;
transition: opacity var(--t);
}
.product-card:hover{
transform: translateY(-3px);
box-shadow: var(--shadow-lg);
border-color: transparent;
}
.product-card:hover::before{ opacity: 1; }
.product-image{
aspect-ratio: 4/3;
background: linear-gradient(180deg, var(--color-surface-1) 0%, var(--color-white) 92%);
display: flex;
align-items: center;
justify-content: center;
padding: 24px 20px 20px;
border-bottom: 1px solid var(--color-border);
position: relative;
}
/* Ground shadow under image — anchors object, makes empty padding look intentional */
.product-image::after{
content: "";
position: absolute;
left: 22%; right: 22%;
bottom: 10px;
height: 10px;
background: radial-gradient(ellipse at center, rgba(0,0,0,.10) 0%, transparent 70%);
z-index: 0;
pointer-events: none;
}
.product-image picture{ position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; max-width: 100%; max-height: 100%; }
.product-image picture, .product-image img{
max-width: 100%;
max-height: 220px; /* normalize visual weight across bundles vs singles */
width: auto;
height: auto;
object-fit: contain;
}
.product-content{
padding: 20px 22px 22px;
display: flex;
flex-direction: column;
gap: 12px;
flex: 1;
}
.product-name{
font-size: 18px;
font-weight: 700;
color: var(--color-ink);
margin: 0;
font-family: var(--font-body);
}
.product-description{
font-size: 14px;
line-height: 1.55;
color: var(--color-text-mute);
flex: 1; /* absorb extra space: no "hole" above highlight */
}
.product-description p + p{ margin-top: 10px; }
.product-description ul{ margin-top: 8px; }
.product-highlight{
font-size: 14px;
line-height: 1.5;
color: var(--color-accent-ink);
background: var(--color-accent-soft);
border-left: 3px solid var(--color-accent);
padding: 10px 12px;
border-radius: 4px;
}
.product-content .btn-primary{ width: 100%; margin-top: 4px; }
@media (max-width: 900px){ .products-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .products-grid{ grid-template-columns: 1fr; } }
/* "Plus N more products available" footer beneath the products grid when the
CSV had more items than rendered. Centered as a small CTA strip. */
.products-more{
text-align: center;
margin-top: clamp(28px, 3.5vw, 44px);
}
.products-more p{
font-size: 15px;
color: var(--color-muted);
margin: 0 0 14px;
}
.products-more .btn{ display: inline-flex; }
/* ------------------------------------------------------------
Products variants — same HTML, swapped class on .block-products
· (none) / .products-cards soft-bordered card, shadow on hover (default)
· .products-flat no border, no shadow, thin divider (minimal)
· .products-frame tinted image slot, thicker frame (showcase)
· .products-compact smaller image slot, tighter text (dense lineup)
------------------------------------------------------------ */
/* FLAT: minimal, no border, no shadow */
.block-products.products-flat .product-card{
border: none;
border-radius: 0;
box-shadow: none;
padding-bottom: 16px;
border-bottom: 1px solid var(--color-border);
}
.block-products.products-flat .product-card::before{ display: none; }
.block-products.products-flat .product-card:hover{
transform: none;
box-shadow: none;
border-color: var(--color-border);
}
.block-products.products-flat .product-image{
background: var(--color-white);
border-bottom: none;
}
.block-products.products-flat .product-image::after{ opacity: .6; }
.block-products.products-flat .product-content{ padding: 16px 4px 0; }
/* FRAME: accent-tinted image slot, thicker outline */
.block-products.products-frame .product-card{
border: 1.5px solid var(--color-border);
box-shadow: none;
}
.block-products.products-frame .product-card:hover{
border-color: var(--color-accent);
transform: translateY(-2px);
box-shadow: 0 8px 20px color-mix(in srgb, var(--color-accent) 14%, transparent);
}
.block-products.products-frame .product-image{
background: linear-gradient(180deg, var(--color-accent-soft) 0%, var(--color-white) 92%);
}
/* COMPACT: square image slot, tighter layout, dense lineup */
.block-products.products-compact .product-image{
aspect-ratio: 1/1;
padding: 18px;
}
.block-products.products-compact .product-image img,
.block-products.products-compact .product-image picture{ max-height: 180px; }
.block-products.products-compact .product-content{ padding: 16px 18px 18px; gap: 10px; }
.block-products.products-compact .product-name{ font-size: 16px; }
.block-products.products-compact .product-description{ font-size: 13px; }
.block-products.products-compact .product-highlight{ font-size: 13px; }
/* ============================================================
CATEGORIES (category-site mode)
Replaces .block-products on category sites. 2-3 col responsive
tile grid; each tile shows the top-product image of its category
plus the category name and product count.
============================================================ */
.block-categories{ padding: clamp(48px, 6vw, 88px) 0; background: var(--color-white); }
.categories-grid{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.category-tile{
display: flex;
flex-direction: column;
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius);
overflow: hidden;
text-decoration: none;
color: inherit;
transition: transform var(--t), box-shadow var(--t), border-color var(--t);
position: relative;
}
.category-tile::before{
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 3px;
background: linear-gradient(90deg, var(--color-accent), var(--color-accent-2));
opacity: 0;
transition: opacity var(--t);
}
a.category-tile:hover{
transform: translateY(-3px);
box-shadow: var(--shadow-lg);
border-color: transparent;
}
a.category-tile:hover::before{ opacity: 1; }
.category-tile-image{
aspect-ratio: 4/3;
background: linear-gradient(180deg, var(--color-surface-1) 0%, var(--color-white) 92%);
display: flex;
align-items: center;
justify-content: center;
padding: 24px 20px 20px;
border-bottom: 1px solid var(--color-border);
position: relative;
}
.category-tile-image::after{
content: "";
position: absolute;
left: 22%; right: 22%;
bottom: 10px;
height: 10px;
background: radial-gradient(ellipse at center, rgba(0,0,0,.10) 0%, transparent 70%);
z-index: 0;
pointer-events: none;
}
.category-tile-image picture{ position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; max-width: 100%; max-height: 100%; }
.category-tile-image picture, .category-tile-image img{
max-width: 100%;
max-height: 200px;
width: auto;
height: auto;
object-fit: contain;
}
.category-tile-content{
padding: 18px 22px 20px;
display: flex;
flex-direction: column;
gap: 6px;
}
.category-name{
font-size: 18px;
font-weight: 700;
color: var(--color-ink);
margin: 0;
font-family: var(--font-body);
}
.category-count{
font-family: var(--font-mono);
font-size: 12px;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--color-text-mute);
}
@media (max-width: 900px){ .categories-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .categories-grid{ grid-template-columns: 1fr; } }
/* ============================================================
TOP SELLERS (category-site mode)
Sits below .block-categories. Uses the same card pattern as
.product-card but with a category badge on each card.
============================================================ */
.block-top-sellers{ padding: clamp(48px, 6vw, 88px) 0; background: var(--color-surface-1); }
.top-sellers-grid{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.top-seller-card{
display: flex;
flex-direction: column;
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius);
overflow: hidden;
transition: transform var(--t), box-shadow var(--t), border-color var(--t);
position: relative;
}
.top-seller-card::before{
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 3px;
background: linear-gradient(90deg, var(--color-accent), var(--color-accent-2));
opacity: 0;
transition: opacity var(--t);
}
.top-seller-card:hover{
transform: translateY(-3px);
box-shadow: var(--shadow-lg);
border-color: transparent;
}
.top-seller-card:hover::before{ opacity: 1; }
.top-seller-image{
aspect-ratio: 4/3;
background: linear-gradient(180deg, var(--color-surface-1) 0%, var(--color-white) 92%);
display: flex;
align-items: center;
justify-content: center;
padding: 22px 18px 18px;
border-bottom: 1px solid var(--color-border);
position: relative;
}
.top-seller-image::after{
content: "";
position: absolute;
left: 22%; right: 22%;
bottom: 10px;
height: 10px;
background: radial-gradient(ellipse at center, rgba(0,0,0,.10) 0%, transparent 70%);
z-index: 0;
pointer-events: none;
}
.top-seller-image picture{ position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; max-width: 100%; max-height: 100%; }
.top-seller-image picture, .top-seller-image img{
max-width: 100%;
max-height: 180px;
width: auto;
height: auto;
object-fit: contain;
}
.top-seller-info{
padding: 16px 20px 18px;
display: flex;
flex-direction: column;
gap: 8px;
flex: 1;
}
.top-seller-category{
display: inline-block;
align-self: flex-start;
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--color-accent-ink);
background: var(--color-accent-soft);
padding: 3px 8px;
border-radius: 3px;
}
.top-seller-name{
font-size: 15px;
font-weight: 600;
color: var(--color-ink);
margin: 0;
font-family: var(--font-body);
line-height: 1.35;
}
.top-seller-info .btn{ width: 100%; margin-top: auto; }
@media (max-width: 900px){ .top-sellers-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .top-sellers-grid{ grid-template-columns: 1fr; } }
/* ============================================================
CATEGORY SHOWCASE (category-site mode)
One block per detected category, sits below Top Sellers.
Two-column on desktop: text + buying guide on the left,
product list on the right. Single column on mobile.
============================================================ */
.block-category-showcase{
padding: clamp(48px, 6vw, 80px) 0;
background: var(--color-white);
border-top: 1px solid var(--color-border);
}
.block-category-showcase + .block-category-showcase{
border-top: 1px solid var(--color-border);
}
.category-showcase-header{
margin-bottom: 28px;
display: flex;
flex-direction: column;
gap: 6px;
}
.category-showcase-tag{
align-self: flex-start;
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--color-accent-ink);
background: var(--color-accent-soft);
padding: 4px 10px;
border-radius: 3px;
}
.category-showcase-header .section-heading{ margin: 0; }
.category-showcase-grid{
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 36px;
align-items: start;
}
.category-showcase-text{
font-size: 16px;
line-height: 1.6;
color: var(--color-ink);
}
.category-showcase-text > p{ margin: 0 0 16px; }
.category-showcase-text > p:last-child{ margin-bottom: 0; }
.category-showcase-guide{
margin-top: 24px;
padding: 18px 20px;
background: var(--color-surface-1);
border-left: 3px solid var(--color-accent);
border-radius: 4px;
}
.category-showcase-guide h3{
font-family: var(--font-mono);
font-size: 12px;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--color-accent-ink);
margin: 0 0 10px;
}
.category-showcase-guide ul{
margin: 0;
padding-left: 20px;
font-size: 14px;
line-height: 1.55;
}
.category-showcase-guide li{ margin-bottom: 6px; }
.category-showcase-products{
background: var(--color-surface-1);
border: 1px solid var(--color-border);
border-radius: var(--radius);
padding: 20px 22px;
}
.category-showcase-products h3{
font-family: var(--font-mono);
font-size: 12px;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--color-text-mute);
margin: 0 0 14px;
}
.category-showcase-products ul{
list-style: none;
margin: 0;
padding: 0;
}
.category-showcase-products li{
padding: 12px 0;
border-bottom: 1px solid var(--color-border);
font-size: 14px;
line-height: 1.5;
}
.category-showcase-products li:last-child{ border-bottom: none; }
.category-showcase-products li strong{
display: block;
color: var(--color-ink);
font-weight: 600;
margin-bottom: 2px;
}
@media (max-width: 760px){
.category-showcase-grid{ grid-template-columns: 1fr; gap: 24px; }
}
/* ============================================================
SPEC TABLE
============================================================ */
.block-spec-table{
background: var(--color-surface-1);
padding: clamp(48px, 6vw, 80px) 0;
}
/* When spec-table immediately follows the products grid, halve the joining
gap — both blocks have ~80px padding, combined ~160px reads as a chasm. */
.block-products + .block-spec-table{ padding-top: clamp(20px, 2.5vw, 32px); }
.table-wrap{
overflow-x: auto;
border-radius: var(--radius);
background: var(--color-white);
box-shadow: var(--shadow);
border: 1px solid var(--color-border);
margin-bottom: 28px;
}
.block-spec-table table{ width: 100%; border-collapse: collapse; font-size: 14px; }
.block-spec-table th, .block-spec-table td{
padding: 14px 16px;
text-align: left;
border-bottom: 1px solid var(--color-border);
vertical-align: top;
}
.block-spec-table thead th{
background: var(--color-ink);
color: #fff;
font-family: var(--font-mono);
font-size: 13px;
font-weight: 600;
}
.block-spec-table tbody tr:nth-child(even){ background: var(--neutral-50); }
.block-spec-table tbody tr:hover{ background: var(--color-accent-soft); }
.block-spec-table tbody td:first-child{ font-weight: 600; color: var(--color-ink); }
/* ------------------------------------------------------------
Spec-table variants (class on .block-spec-table)
· (none) / spec-cards dark thead + zebra (default)
· spec-minimal no thead fill, horizontal rules only
· spec-accent thead in accent-soft, no zebra, modern clean
------------------------------------------------------------ */
.block-spec-table.spec-minimal .table-wrap{
background: transparent;
box-shadow: none;
border: none;
border-top: 2px solid var(--color-ink);
border-bottom: 2px solid var(--color-ink);
border-radius: 0;
}
.block-spec-table.spec-minimal thead th{
background: transparent;
color: var(--color-ink);
border-bottom: 1px solid var(--color-ink);
}
.block-spec-table.spec-minimal tbody tr:nth-child(even){ background: transparent; }
.block-spec-table.spec-minimal tbody tr:hover{ background: transparent; }
.block-spec-table.spec-minimal tbody td{
border-bottom: 1px solid var(--color-border);
}
.block-spec-table.spec-minimal{ background: var(--color-white); }
.block-spec-table.spec-accent thead th{
background: var(--color-accent-soft);
color: var(--color-accent-ink);
border-bottom: 2px solid var(--color-accent);
font-family: var(--font-mono);
}
.block-spec-table.spec-accent tbody tr:nth-child(even){ background: transparent; }
.block-spec-table.spec-accent tbody tr:hover{ background: var(--color-accent-soft); }
.block-spec-table.spec-accent tbody td:first-child{
color: var(--color-accent-ink);
border-right: 1px solid var(--color-border);
}
/* ------------------------------------------------------------
Generic content-table styling
Tables generated INSIDE content blocks (education / about / article body /
category showcase) used to inherit only browser defaults — no borders,
no header treatment, no zebra. They now inherit the spec-accent visual
language so multi-table pages look intentional rather than half-styled.
------------------------------------------------------------ */
.education-content table,
.about-content table,
.article-body table,
.category-showcase-products table{
width: 100%;
border-collapse: collapse;
font-size: 14px;
margin: 16px 0 28px;
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius);
overflow: hidden;
display: table; /* ensure table layout even after `display: block` overrides elsewhere */
}
.education-content th, .education-content td,
.about-content th, .about-content td,
.article-body th, .article-body td,
.category-showcase-products th, .category-showcase-products td{
padding: 12px 14px;
text-align: left;
border-bottom: 1px solid var(--color-border);
vertical-align: top;
}
.education-content thead th,
.about-content thead th,
.article-body thead th,
.category-showcase-products thead th{
background: var(--color-accent-soft);
color: var(--color-accent-ink);
font-family: var(--font-mono);
font-size: 13px;
font-weight: 600;
border-bottom: 2px solid var(--color-accent);
}
.education-content tbody tr:hover,
.about-content tbody tr:hover,
.article-body tbody tr:hover,
.category-showcase-products tbody tr:hover{ background: var(--color-accent-soft); }
.education-content tbody td:first-child,
.about-content tbody td:first-child,
.article-body tbody td:first-child,
.category-showcase-products tbody td:first-child{
font-weight: 600;
color: var(--color-ink);
}
.education-content tbody tr:last-child td,
.about-content tbody tr:last-child td,
.article-body tbody tr:last-child td,
.category-showcase-products tbody tr:last-child td{ border-bottom: 0; }
/* ============================================================
EDUCATION
============================================================ */
.block-education{ padding: clamp(40px, 5vw, 72px) 0; background: var(--color-white); }
.block-education:nth-of-type(even){ background: var(--color-surface-1); }
.block-education > .container{ max-width: 760px; }
.block-education .section-heading{ text-align: left; margin-bottom: 20px; }
.education-content{ font-size: 16px; line-height: 1.7; color: var(--color-text); }
.education-content p{ margin-bottom: 16px; max-width: 68ch; }
.education-content h3{
font-family: var(--font-mono);
font-size: 18px;
font-weight: 600;
margin: 28px 0 10px;
color: var(--color-ink);
}
.education-content ul, .education-content ol{ margin: 8px 0 16px; padding-left: 1.25em; }
.education-content li{ margin: 6px 0; }
.education-inline-image{
max-width: 480px;
margin: 20px auto;
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow);
}
.education-inline-image img{ width: 100%; height: auto; }
.block-education.variant-dropcap .education-content p:first-of-type::first-letter{
font-family: var(--font-mono);
font-weight: 700;
font-size: 3.2em;
line-height: .85;
float: left;
padding: 6px 12px 0 0;
color: var(--color-accent);
}
.block-education.variant-narrow > .container{ max-width: 640px; }
.block-education.variant-narrow .section-heading{ text-align: center; }
.block-education.variant-boxheader > .container{ max-width: 820px; }
.block-education.variant-boxheader .section-heading{
display: inline-block;
background: var(--color-ink);
color: #fff;
padding: 10px 18px;
border-radius: var(--radius-sm);
text-align: left;
margin-bottom: 24px;
}
.block-education.variant-tint{ background: var(--color-accent-soft); }
.block-education.variant-inset > .container{
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: clamp(24px, 4vw, 40px);
box-shadow: var(--shadow-sm);
}
/* ------------------------------------------------------------
Education variants v2 — work on INNER hierarchy (H3, lead, lists).
Combine with any existing outer variant (narrow/tint/inset/…).
All CSS-only, content-preserving, reuses existing HTML.
· edu-stepped numbered H3s (01 02 …), lead paragraph, check lists
· edu-rail accent left-bar on every H3, divider after lead
· edu-magazine 2-column text reflow, H3 spans columns
· edu-callout first paragraph as accent-soft lede tile
------------------------------------------------------------ */
/* Shared: the very first paragraph of the block = subtle lead.
Content-creator splits .education-content around images, so we scope
strictly to the first such container to avoid "multi-lead" artifacts.
Same size/weight as body text — only a slightly darker ink color
gives the lede a quiet emphasis without breaking the typographic rhythm. */
.block-education[class*="edu-"] .education-content:first-of-type > p:first-child{
color: var(--color-ink);
}
.block-education[class*="edu-"] .education-content ul{
list-style: none;
padding-left: 0;
}
.block-education[class*="edu-"] .education-content ul li{
position: relative;
padding-left: 26px;
margin: 8px 0;
}
.block-education[class*="edu-"] .education-content ul li::before{
content: "✓";
position: absolute;
left: 0; top: 0.35em;
width: 16px; height: 16px;
background: var(--color-accent-soft);
color: var(--color-accent-ink);
font-size: 10px;
font-weight: 700;
line-height: 16px;
text-align: center;
border-radius: 50%;
border: 1px solid color-mix(in srgb, var(--color-accent) 35%, transparent);
}
/* -- STEPPED: numbered H3s, lede paragraph -- */
.block-education.edu-stepped{ counter-reset: edu-step; }
.block-education.edu-stepped .education-content h3{
counter-increment: edu-step;
display: flex;
align-items: baseline;
gap: 12px;
padding-top: 8px;
margin-top: 36px;
font-family: var(--font-body);
font-size: 18px;
color: var(--color-ink);
}
.block-education.edu-stepped .education-content h3::before{
content: counter(edu-step, decimal-leading-zero);
font-family: var(--font-mono);
font-size: 12px;
font-weight: 700;
letter-spacing: .04em;
color: var(--color-accent);
background: var(--color-accent-soft);
padding: 4px 9px;
border-radius: 999px;
flex-shrink: 0;
line-height: 1;
}
.block-education.edu-stepped .education-content h3:first-of-type{ margin-top: 20px; }
/* -- RAIL: accent left-bar on H3s, divider after lead -- */
.block-education.edu-rail .education-content:first-of-type > p:first-child{
padding-bottom: 22px;
border-bottom: 1px solid var(--color-border);
margin-bottom: 26px;
}
.block-education.edu-rail .education-content h3{
border-left: 3px solid var(--color-accent);
padding: 2px 0 2px 14px;
font-family: var(--font-body);
color: var(--color-ink);
}
/* -- MAGAZINE: 2-column text reflow across the whole block,
section-heading, first-paragraph lead & inline images span columns -- */
.block-education.edu-magazine > .container{
max-width: 1040px;
column-count: 2;
column-gap: 40px;
column-rule: 1px solid var(--color-border);
}
.block-education.edu-magazine .section-heading,
.block-education.edu-magazine .education-inline-image{
column-span: all;
}
.block-education.edu-magazine .section-heading{
text-align: left;
margin-bottom: 24px;
}
.block-education.edu-magazine .education-content{ display: block; }
.block-education.edu-magazine .education-content p,
.block-education.edu-magazine .education-content ul{
break-inside: avoid-column;
}
.block-education.edu-magazine .education-content h3{
margin: 22px 0 10px;
break-after: avoid;
}
.block-education.edu-magazine .education-content > p:first-of-type{
max-width: none;
}
/* First paragraph of the whole block = lead, spans both columns */
.block-education.edu-magazine .education-content:first-of-type p:first-child{
column-span: all;
padding-bottom: 18px;
margin-bottom: 22px;
border-bottom: 1px solid var(--color-border);
max-width: 78ch;
}
.block-education.edu-magazine .education-inline-image{
margin: 28px auto;
max-width: 620px;
}
@media (max-width: 760px){
.block-education.edu-magazine > .container{ column-count: 1; column-rule: none; }
}
/* -- CALLOUT: first paragraph as lede-tile on accent-soft -- */
.block-education.edu-callout .education-content:first-of-type > p:first-child{
background: var(--color-accent-soft);
border-left: 4px solid var(--color-accent);
padding: 18px 22px;
border-radius: var(--radius);
color: var(--color-accent-ink);
margin-bottom: 28px;
max-width: none;
}
.block-education.edu-callout .education-content h3{
color: var(--color-ink);
font-family: var(--font-body);
position: relative;
}
.block-education.edu-callout .education-content h3::before{
content: "";
display: inline-block;
width: 22px; height: 2px;
background: var(--color-accent);
vertical-align: middle;
margin-right: 12px;
transform: translateY(-3px);
}
/* ============================================================
REVIEWS
============================================================ */
.block-reviews{
padding: clamp(32px, 4vw, 56px) 0;
background: var(--color-surface-1);
}
/* Default layout — uniform 3×2 grid (always 6 reviews, fills cleanly) */
.reviews-grid{
display: grid;
gap: 20px;
max-width: 960px;
margin: 0 auto;
grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px){ .reviews-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .reviews-grid{ grid-template-columns: 1fr; } }
/* -- LAYOUT: stack (single column, wide, editorial) -- */
.block-reviews.reviews-stack .reviews-grid{
grid-template-columns: 1fr;
max-width: 760px;
}
/* -- LAYOUT: pyramid (1+2+3 = 6, upside-down triangle) -- */
.block-reviews.reviews-pyramid .reviews-grid{
grid-template-columns: repeat(6, 1fr);
max-width: 1080px;
}
.block-reviews.reviews-pyramid .review-card:nth-child(1){ grid-column: span 6; }
.block-reviews.reviews-pyramid .review-card:nth-child(2),
.block-reviews.reviews-pyramid .review-card:nth-child(3){ grid-column: span 3; }
.block-reviews.reviews-pyramid .review-card:nth-child(4),
.block-reviews.reviews-pyramid .review-card:nth-child(5),
.block-reviews.reviews-pyramid .review-card:nth-child(6){ grid-column: span 2; }
@media (max-width: 900px){
.block-reviews.reviews-pyramid .reviews-grid{ grid-template-columns: repeat(2, 1fr); }
.block-reviews.reviews-pyramid .review-card:nth-child(n){ grid-column: span 1; }
.block-reviews.reviews-pyramid .review-card:nth-child(1){ grid-column: span 2; }
}
@media (max-width: 560px){
.block-reviews.reviews-pyramid .reviews-grid{ grid-template-columns: 1fr; }
.block-reviews.reviews-pyramid .review-card:nth-child(1){ grid-column: span 1; }
}
/* -- LAYOUT: mosaic (asymmetric 4-col × 2-row, diagonal feel) --
row 1: [BIG 2] [1] [1]
row 2: [1] [1] [BIG 2] */
.block-reviews.reviews-mosaic .reviews-grid{
grid-template-columns: repeat(4, 1fr);
max-width: 1080px;
}
.block-reviews.reviews-mosaic .review-card:nth-child(1),
.block-reviews.reviews-mosaic .review-card:nth-child(6){ grid-column: span 2; }
.block-reviews.reviews-mosaic .review-card:nth-child(2),
.block-reviews.reviews-mosaic .review-card:nth-child(3),
.block-reviews.reviews-mosaic .review-card:nth-child(4),
.block-reviews.reviews-mosaic .review-card:nth-child(5){ grid-column: span 1; }
@media (max-width: 900px){
.block-reviews.reviews-mosaic .reviews-grid{ grid-template-columns: repeat(2, 1fr); }
.block-reviews.reviews-mosaic .review-card:nth-child(n){ grid-column: span 1; }
.block-reviews.reviews-mosaic .review-card:nth-child(1),
.block-reviews.reviews-mosaic .review-card:nth-child(6){ grid-column: span 2; }
}
@media (max-width: 560px){
.block-reviews.reviews-mosaic .reviews-grid{ grid-template-columns: 1fr; }
.block-reviews.reviews-mosaic .review-card:nth-child(1),
.block-reviews.reviews-mosaic .review-card:nth-child(6){ grid-column: span 1; }
}
/* Featured-like emphasis for wider cards in pyramid/mosaic */
.block-reviews.reviews-pyramid .review-card:nth-child(1),
.block-reviews.reviews-mosaic .review-card:nth-child(1),
.block-reviews.reviews-mosaic .review-card:nth-child(6){
background: linear-gradient(180deg, var(--color-white) 0%, var(--color-accent-soft) 140%);
border-left-width: 4px;
}
.block-reviews.reviews-pyramid .review-card:nth-child(1) p,
.block-reviews.reviews-mosaic .review-card:nth-child(1) p{ font-size: 16px; }
.review-card{
background: var(--color-white);
border: 1px solid var(--color-border);
border-left: 3px solid var(--color-accent);
border-radius: var(--radius);
padding: 22px 24px;
box-shadow: var(--shadow-sm);
position: relative;
}
.review-card::before{
content: "\201C";
position: absolute;
top: 4px; right: 18px;
font-family: Georgia, serif;
font-size: 54px;
line-height: 1;
color: color-mix(in srgb, var(--color-accent) 25%, transparent);
pointer-events: none;
}
.review-card p{ font-size: 15px; line-height: 1.6; color: var(--color-text); }
.review-card p + p{ margin-top: 10px; }
.review-card cite{
display: block;
margin-top: 12px;
font-size: 13px;
font-style: normal;
font-family: var(--font-mono);
color: var(--color-text-mute);
}
/* -- TONE: accent (dark section) — composes with any layout -- */
.block-reviews.reviews-accent{ background: var(--color-dark); color: #e9edec; }
.block-reviews.reviews-accent .section-heading{ color: #fff; }
.block-reviews.reviews-accent .review-card,
.block-reviews.reviews-accent .review-card:nth-child(n){
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.08);
border-left: 3px solid var(--color-accent);
}
.block-reviews.reviews-accent .review-card p{ color: #e9edec; }
.block-reviews.reviews-accent .review-card cite{ color: rgba(255,255,255,.55); }
/* ============================================================
YOUTUBE
============================================================ */
.block-youtube{ padding: clamp(28px, 3.5vw, 48px) 0; background: var(--color-white); }
.youtube-embed{
position: relative;
width: 100%;
max-width: 900px;
margin: 0 auto;
aspect-ratio: 16 / 9;
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow-lg);
background: #000;
}
.youtube-embed iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.youtube-summary{
max-width: 720px;
margin: 20px auto 0;
text-align: center;
color: var(--color-text-mute);
font-size: 15px;
}
/* ============================================================
FAQ
============================================================ */
/* Enable auto-height transitions where supported (Chrome 129+, Safari 17.4+) */
@supports (interpolate-size: allow-keywords) {
:root { interpolate-size: allow-keywords; }
}
.block-faq{ padding: clamp(32px, 4vw, 56px) 0 clamp(20px, 2.5vw, 32px); background: var(--color-surface-1); }
.faq-list{
max-width: 820px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 10px;
}
.faq-item{
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius);
transition: border-color var(--t), box-shadow var(--t);
overflow: hidden;
}
.faq-item:hover{ border-color: color-mix(in srgb, var(--color-accent) 40%, var(--color-border)); }
.faq-item.is-open{
border-color: var(--color-accent);
box-shadow: var(--shadow-sm);
}
.faq-question{
cursor: pointer;
/* min tap target ≥ 44px (via padding + content) */
padding: 18px 56px 18px 20px;
font-family: var(--font-mono);
font-size: 15px;
font-weight: 500;
color: var(--color-ink);
position: relative;
line-height: 1.4;
margin: 0;
user-select: none;
}
.faq-question::after{
content: "+";
position: absolute;
right: 18px; top: 50%;
width: 22px; height: 22px;
transform: translateY(-50%);
display: grid;
place-items: center;
font-family: var(--font-body);
font-size: 22px;
font-weight: 300;
color: var(--color-text-mute);
transition: transform var(--t), color var(--t);
}
.faq-item.is-open .faq-question::after{
content: "−";
color: var(--color-accent);
}
/* Default answer: clipped to 0, animates to content height.
Uses max-height fallback for older browsers; the :where() wrapped
interpolate-size rule smooths it to true auto where supported. */
.faq-answer{
max-height: 0;
overflow: hidden;
padding: 0 20px;
color: var(--color-text);
font-size: 15px;
line-height: 1.6;
transition: max-height .28s ease, padding .28s ease;
}
.faq-item.is-open .faq-answer{
max-height: 1500px;
padding-bottom: 20px;
}
@supports (interpolate-size: allow-keywords) {
.faq-answer{
max-height: 0;
transition: max-height .28s ease, padding .28s ease;
}
.faq-item.is-open .faq-answer{ max-height: max-content; }
}
.faq-answer p + p{ margin-top: 10px; }
/* ------------------------------------------------------------
FAQ variants (same HTML, class on .block-faq).
· (none) / default accordion, one at a time optional (all independent here)
· faq-flat all answers visible, no accordion, dense
· faq-numbered Q01/Q02/... accent pills, still accordion
· faq-split sticky sidebar of questions + right pane answers
------------------------------------------------------------ */
/* FLAT — all open, compact, SEO-first */
.block-faq.faq-flat .faq-list{ gap: 0; max-width: 820px; }
.block-faq.faq-flat .faq-item{
border: none;
border-bottom: 1px solid var(--color-border);
border-radius: 0;
background: transparent;
box-shadow: none;
}
.block-faq.faq-flat .faq-item:last-child{ border-bottom: none; }
.block-faq.faq-flat .faq-question{
cursor: default;
padding: 16px 0 6px;
font-family: var(--font-body);
font-size: 16px;
font-weight: 700;
color: var(--color-ink);
}
.block-faq.faq-flat .faq-question::after{ display: none; }
.block-faq.faq-flat .faq-answer{
max-height: none!important;
padding: 0 0 16px;
color: var(--color-text-mute);
font-size: 14.5px;
}
/* NUMBERED — accordion with accent-pill counter before each question */
.block-faq.faq-numbered .faq-list{ counter-reset: faq; }
.block-faq.faq-numbered .faq-question{
counter-increment: faq;
padding-left: 66px;
}
.block-faq.faq-numbered .faq-question::before{
content: "Q" counter(faq, decimal-leading-zero);
position: absolute;
left: 16px; top: 50%;
transform: translateY(-50%);
font-family: var(--font-mono);
font-size: 11px;
font-weight: 700;
letter-spacing: .04em;
color: var(--color-accent);
background: var(--color-accent-soft);
padding: 4px 8px;
border-radius: 999px;
line-height: 1;
}
.block-faq.faq-numbered .faq-answer{ padding-left: 66px; padding-right: 20px; }
.block-faq.faq-numbered .faq-item.is-open .faq-answer{ padding-bottom: 20px; }
@media (max-width: 560px){
.block-faq.faq-numbered .faq-question{ padding-left: 56px; }
.block-faq.faq-numbered .faq-question::before{ left: 12px; }
.block-faq.faq-numbered .faq-answer{ padding-left: 56px; }
}
/* SPLIT — sidebar nav + right pane with all answers visible (JS injects .faq-nav) */
.block-faq.faq-split > .container{ max-width: 1100px; }
.block-faq.faq-split .faq-nav{
position: sticky;
top: calc(var(--header-h) + 16px);
display: flex;
flex-direction: column;
gap: 2px;
align-self: start;
max-height: calc(100vh - var(--header-h) - 32px);
overflow-y: auto;
padding-right: 12px;
}
.block-faq.faq-split .faq-nav-link{
display: block;
padding: 10px 12px;
font-size: 13.5px;
color: var(--color-text-mute);
border-left: 2px solid transparent;
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
transition: background var(--t), color var(--t), border-color var(--t);
cursor: pointer;
line-height: 1.35;
}
.block-faq.faq-split .faq-nav-link:hover{ color: var(--color-ink); background: var(--color-white); }
.block-faq.faq-split .faq-nav-link.is-active{
color: var(--color-accent-ink);
background: var(--color-accent-soft);
border-left-color: var(--color-accent);
font-weight: 500;
}
.block-faq.faq-split .container{
display: grid;
grid-template-columns: 280px 1fr;
gap: 40px;
align-items: start;
}
.block-faq.faq-split .section-heading{ grid-column: 1 / -1; }
.block-faq.faq-split .faq-list{ max-width: none; margin: 0; }
.block-faq.faq-split .faq-item{
background: var(--color-white);
border: 1px solid var(--color-border);
transition: border-color var(--t), box-shadow var(--t);
}
.block-faq.faq-split .faq-item.is-active{
border-color: var(--color-accent);
box-shadow: var(--shadow);
}
.block-faq.faq-split .faq-question{ cursor: default; }
.block-faq.faq-split .faq-question::after{ display: none; }
.block-faq.faq-split .faq-answer{
max-height: none!important;
padding: 0 20px 20px;
}
@media (max-width: 900px){
.block-faq.faq-split .container{ grid-template-columns: 1fr; gap: 16px; }
.block-faq.faq-split .faq-nav{ position: static; max-height: none; flex-direction: row; flex-wrap: wrap; overflow: visible; }
.block-faq.faq-split .faq-nav-link{ border-left: none; border-bottom: 2px solid transparent; border-radius: var(--radius-sm); background: var(--color-white); padding: 6px 10px; font-size: 12px; }
.block-faq.faq-split .faq-nav-link.is-active{ border-bottom-color: var(--color-accent); }
}
/* ============================================================
ABOUT
============================================================ */
.block-about{ padding: clamp(48px, 6vw, 80px) 0; background: var(--color-white); }
.about-inner{ max-width: 760px; }
.about-content{ font-size: 16px; line-height: 1.7; color: var(--color-text); }
.about-content p{ margin-bottom: 14px; }
.block-about.about-leadparagraph .about-content p:first-of-type{
font-size: 16px;
color: var(--color-text);
font-weight: 400;
}
/* ------------------------------------------------------------
About variants (class on .block-about)
· (none) / about-leadparagraph narrow column, larger first p (existing)
· about-pullquote first paragraph as pull-quote with big mark
· about-narrow tight editorial column (580px)
· about-split lead left / body right, 2-col on desktop
------------------------------------------------------------ */
/* PULLQUOTE — first paragraph emphasized as a pull-quote */
.block-about.about-pullquote .about-inner{ max-width: 820px; }
.block-about.about-pullquote .about-content p:first-of-type{
position: relative;
font-size: 16px;
line-height: 1.7;
color: var(--color-text);
font-weight: 400;
padding: 4px 0 4px 20px;
border-left: 3px solid var(--color-accent);
margin: 0 0 18px;
max-width: 68ch;
}
.block-about.about-pullquote .about-content p:first-of-type::before{ display: none; }
/* NARROW — tight editorial column */
.block-about.about-narrow .about-inner{ max-width: 580px; }
.block-about.about-narrow .section-heading{ text-align: center; }
.block-about.about-narrow .about-content{ font-size: 15.5px; }
/* SPLIT — lead left, body right */
.block-about.about-split .about-inner{ max-width: 1080px; }
.block-about.about-split .section-heading{ text-align: left; margin-bottom: 28px; }
.block-about.about-split .about-content{
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: clamp(32px, 4vw, 56px);
align-items: start;
}
.block-about.about-split .about-content p:first-of-type{
font-size: 16px;
line-height: 1.7;
color: var(--color-text);
font-weight: 400;
margin: 0;
padding-right: 20px;
border-right: 1px solid var(--color-border);
position: sticky;
top: calc(var(--header-h) + 20px);
}
.block-about.about-split .about-content p:not(:first-of-type){
grid-column: 2;
margin-bottom: 14px;
}
@media (max-width: 900px){
.block-about.about-split .about-content{ grid-template-columns: 1fr; gap: 20px; }
.block-about.about-split .about-content p:first-of-type{
position: static;
border-right: none;
border-bottom: 1px solid var(--color-border);
padding-right: 0;
padding-bottom: 20px;
}
.block-about.about-split .about-content p:not(:first-of-type){ grid-column: 1; }
}
/* ============================================================
CONTACT
============================================================ */
.block-contact{ padding: clamp(40px, 5vw, 72px) 0; background: var(--color-surface-1); }
.contact-grid{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 20px;
}
.contact-col{
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius);
padding: 20px;
font-size: 14px;
line-height: 1.55;
}
.contact-col .label{
display: block;
font-family: var(--font-mono, inherit);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-ink);
margin-bottom: 10px;
padding-bottom: 8px;
border-bottom: 1px solid var(--color-border);
}
.contact-col p{ margin: 0 0 8px; }
.contact-col p:last-child{ margin-bottom: 0; }
/* ============================================================
LEGAL / FOOTER
============================================================ */
.block-legal{
background: var(--color-ink);
color: #a8b1ac;
padding: 32px 0;
font-size: 13px;
line-height: 1.55;
}
.legal-inner{ display: grid; gap: 10px; justify-items: center; text-align: center; }
.block-legal a{ color: #d6dbd8; text-decoration: underline; text-underline-offset: 2px; }
.legal-disclaimer{ opacity: .85; max-width: 80ch; }
.affiliate-disclosure{ font-style: italic; opacity: .8; max-width: 80ch; }
.copyright{ font-family: var(--font-mono); font-size: 12px; opacity: .7; margin-top: 6px; }
/* Footer site-link nav (Articles · Privacy) — sits above the copyright row */
.footer-nav{
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
font-family: var(--font-mono);
font-size: 12px;
text-transform: uppercase;
letter-spacing: .06em;
margin-bottom: 4px;
}
.footer-nav a{
color: #d6dbd8;
text-decoration: none;
border-bottom: 1px solid transparent;
padding-bottom: 1px;
transition: border-color .15s ease, opacity .15s ease;
}
.footer-nav a:hover{ border-bottom-color: #d6dbd8; }
.footer-nav-sep{ color: #6b7670; opacity: .7; }
/* ============================================================
ARTICLES INDEX page — flat catalog of all guides
Reuses .block-article + .article-wrap container; only the
list itself needs new styling.
============================================================ */
.articles-index-intro{
font-size: 16px;
color: var(--color-muted, #687279);
margin: 0 0 28px;
max-width: 70ch;
}
.articles-index-list{
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 14px;
}
.articles-index-item{
border-top: 1px solid var(--color-border, #e6e8ea);
padding-top: 14px;
}
.articles-index-item:first-child{ border-top: none; padding-top: 0; }
.articles-index-link{
display: block;
text-decoration: none;
color: inherit;
padding: 6px 0;
}
.articles-index-link:hover .articles-index-title{
color: var(--color-accent);
text-decoration: underline;
text-underline-offset: 3px;
}
.articles-index-title{
font-family: var(--font-sans);
font-size: 19px;
font-weight: 600;
margin: 0 0 4px;
color: var(--color-ink);
line-height: 1.3;
}
.articles-index-excerpt{
font-size: 14px;
color: var(--color-muted, #687279);
margin: 0;
line-height: 1.55;
}
/* ============================================================
PRIVACY page — slim spacing pass on top of .article-body
============================================================ */
.privacy-body h2{
font-size: 20px;
margin-top: 32px;
margin-bottom: 10px;
}
.privacy-body p{ margin: 0 0 14px; }
.privacy-body p:last-child{ margin-bottom: 0; }
/* ============================================================
MOBILE BOTTOM CTA BAR
============================================================ */
.mobile-cta-bar{ display: none; }
@media (max-width: 720px){
.mobile-cta-bar{
display: flex;
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 60;
padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
background: rgba(255,255,255,.96);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-top: 1px solid var(--color-border);
box-shadow: 0 -6px 18px rgba(0,0,0,.06);
}
.mobile-cta-bar .btn-primary{ flex: 1; padding: 14px 18px; font-size: 15px; }
body{ padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
}
/* ============================================================
HEADER RESPONSIVE
============================================================ */
.btn-amazon-mobile{ display: none; }
@media (max-width: 720px){
.btn-header{ display: none; }
.btn-amazon-mobile{
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
background: var(--color-accent);
color: #fff;
border: 1px solid color-mix(in srgb, var(--color-accent-ink) 40%, transparent);
padding: 8px 12px;
font-size: 13px;
border-radius: var(--radius-sm);
font-weight: 600;
text-decoration: none;
}
.btn-amazon-mobile::before{
content: "";
width: 16px; height: 7px;
background: currentColor;
-webkit-mask: var(--icon-amazon) center/contain no-repeat;
mask: var(--icon-amazon) center/contain no-repeat;
flex: 0 0 16px;
opacity: .9;
}
.nav-toggle{ display: inline-flex; }
}
/* PRINT */
@media print{
.site-header, .mobile-cta-bar, .block-youtube, .nav-toggle{ display:none!important; }
*{ background: transparent!important; box-shadow: none!important; color: #000!important; }
}
/* ============================================================
GUIDES (homepage section + article pages)
============================================================ */
.block-guides{ padding: clamp(20px, 2.5vw, 32px) 0 clamp(40px, 5vw, 72px); background: var(--color-surface); }
.block-guides .section-heading{ margin-bottom: 12px; }
.guides-intro{
font-size: 16px;
line-height: 1.6;
color: var(--color-muted);
max-width: 70ch;
margin: 0 0 24px;
}
.guides-list{
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 32px;
row-gap: 4px;
}
@media (max-width: 720px){
.guides-list{ grid-template-columns: 1fr; column-gap: 0; }
}
.guide-item a{
display: inline-block;
padding: 8px 0;
color: var(--color-ink);
text-decoration: none;
border-bottom: 1px solid transparent;
font-size: 17px;
line-height: 1.45;
font-weight: 500;
transition: border-color .15s ease, color .15s ease;
}
.guide-item a:hover{
color: var(--color-accent);
border-bottom-color: var(--color-accent);
}
/* ============================================================
ARTICLE PAGE
============================================================ */
.block-article{ padding: clamp(48px, 6vw, 80px) 0; background: var(--color-bg); }
.article-wrap{ max-width: 720px; margin: 0 auto; padding: 0 24px; }
.article-breadcrumb{
font-size: 13px;
color: var(--color-muted);
margin-bottom: 24px;
font-family: var(--font-mono, inherit);
}
.article-breadcrumb a{ color: inherit; text-decoration: none; }
.article-breadcrumb a:hover{ text-decoration: underline; }
.article-title{
font-size: clamp(1.6rem, 3.2vw, 2.2rem);
font-weight: 700;
line-height: 1.25;
margin: 0 0 12px;
color: var(--color-ink);
}
.article-byline{
font-size: 14px;
color: var(--color-muted);
margin: 0 0 32px;
font-style: italic;
}
.article-body p{ font-size: 17px; line-height: 1.75; margin: 0 0 20px; color: var(--color-ink); }
.article-body ul, .article-body ol{ padding-left: 24px; margin: 0 0 20px; }
.article-body li{ font-size: 17px; line-height: 1.7; margin-bottom: 8px; color: var(--color-ink); }
.article-body table{ width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 15px; }
.article-body th, .article-body td{
padding: 10px 14px;
border: 1px solid var(--color-border);
text-align: left;
vertical-align: top;
}
.article-body th{ background: var(--color-surface); font-weight: 600; }
.article-body strong{ font-weight: 600; }
.article-body a{ color: var(--color-accent); text-decoration: underline; text-underline-offset: 2px; }
/* ── Block 3: Key Facts list (always present in every article) ───────── */
.article-body .key-facts{
list-style: none;
padding: 18px 22px;
margin: 24px 0;
background: var(--color-surface-1);
border-radius: var(--radius);
border-left: 4px solid var(--color-accent);
}
.article-body .key-facts li{
font-size: 15px;
line-height: 1.6;
margin-bottom: 8px;
color: var(--color-ink);
padding-left: 18px;
position: relative;
}
.article-body .key-facts li:last-child{ margin-bottom: 0; }
.article-body .key-facts li::before{
content: "›";
position: absolute;
left: 0;
color: var(--color-accent);
font-weight: 700;
}
/* ── Article modules — each visually distinct, all coherent ───────────── */
.article-module{
margin: 32px 0;
padding: 22px 24px;
border-radius: var(--radius);
background: var(--color-white);
border: 1px solid var(--color-border);
}
.article-module h2{
font-size: 19px;
font-weight: 600;
color: var(--color-ink);
margin: 0 0 14px;
display: flex;
align-items: center;
gap: 10px;
}
.article-module h2::before{
content: "";
width: 4px;
height: 18px;
background: var(--color-accent);
border-radius: 2px;
flex-shrink: 0;
}
.article-module ul, .article-module ol{ padding-left: 22px; margin: 0; }
.article-module li{ font-size: 15px; line-height: 1.65; margin-bottom: 10px; color: var(--color-ink); }
.article-module li:last-child{ margin-bottom: 0; }
.article-module table{ margin: 0; font-size: 14px; }
/* Per-module visual treatment */
.module-safety-checklist{ background: color-mix(in srgb, var(--color-accent) 6%, var(--color-white)); border-color: color-mix(in srgb, var(--color-accent) 30%, var(--color-border)); }
.module-safety-checklist h3::before{ background: #d97706; } /* warning amber */
.module-troubleshooting-table{ background: var(--color-surface-1); }
.module-comparison-table{ background: var(--color-white); }
.module-numbered-steps{ background: var(--color-surface-1); }
.module-numbered-steps ol{ counter-reset: step-counter; list-style: none; padding-left: 0; }
.module-numbered-steps ol li{ counter-increment: step-counter; padding-left: 38px; position: relative; }
.module-numbered-steps ol li::before{
content: counter(step-counter);
position: absolute;
left: 0;
top: 0;
width: 26px; height: 26px;
background: var(--color-accent);
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 13px;
font-family: var(--font-mono);
}
.module-common-mistakes{ background: var(--color-surface-1); }
.module-common-mistakes ul{ list-style: none; padding-left: 0; }
.module-common-mistakes li{ padding-left: 26px; position: relative; }
.module-common-mistakes li::before{
content: "✕";
position: absolute;
left: 0;
color: #c2410c;
font-weight: 700;
}
.module-edge-cases{ background: var(--color-accent-soft); border-color: color-mix(in srgb, var(--color-accent) 25%, var(--color-border)); }
.module-decision-criteria{ background: var(--color-white); }
.module-decision-criteria ul{ list-style: none; padding-left: 0; }
.module-decision-criteria li{ padding-left: 26px; position: relative; }
.module-decision-criteria li::before{
content: "→";
position: absolute;
left: 0;
color: var(--color-accent);
font-weight: 700;
}
.module-quick-examples{ background: var(--color-surface-1); }
.article-more-guides{
margin-top: 56px;
padding-top: 32px;
border-top: 1px solid var(--color-border);
}
.article-more-guides h2{
font-size: 18px;
font-weight: 600;
margin: 0 0 16px;
color: var(--color-ink);
}
.article-more-guides ul{
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 4px;
}
.article-more-guides li a{
display: inline-block;
padding: 6px 0;
color: var(--color-ink);
text-decoration: none;
font-size: 15px;
line-height: 1.5;
border-bottom: 1px solid transparent;
transition: border-color .15s ease, color .15s ease;
}
.article-more-guides li a:hover{
color: var(--color-accent);
border-bottom-color: var(--color-accent);
}
/* ============================================================
IMAGE PLACEHOLDER (when product has no Amazon API image)
============================================================ */
.image-placeholder{
width: 100%;
aspect-ratio: 4 / 3;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
background: var(--color-surface, #f4f5f3);
border: 1px dashed var(--color-border, #e0e1de);
border-radius: var(--radius, 6px);
color: var(--color-muted, #8a8f8c);
padding: 20px;
}
.image-placeholder-icon{
width: 48px;
height: auto;
}
.image-placeholder-label{
font-size: 12px;
font-family: var(--font-mono, inherit);
letter-spacing: 0.04em;
text-transform: uppercase;
opacity: .85;
text-align: center;
}
.hero-image .image-placeholder{ aspect-ratio: 1 / 1; max-width: 420px; }