/* RankerGuru — locked design tokens. Zero hardcoded hex values below this block. */
:root{
  --color-bg:#070B14; --color-bg-card:#0D1421; --color-bg-hover:#121B2E; --color-bg-subtle:#0A1020;
  --color-border:#1A2640; --color-border-hover:#2A3F60;
  --color-gold:#F5A623; --color-gold-dim:#7A5212; --color-gold-glow:rgba(245,166,35,0.12);
  --color-signal-up:#10B981; --color-signal-down:#EF4444; --color-signal-link:#3B82F6; --color-signal-new:#8B5CF6;
  --color-text:#F1F5F9; --color-text-subtle:#94A3B8; --color-text-muted:#64748B; --color-text-inverse:#070B14;
  --font-display:'Space Grotesk',sans-serif; --font-body:'Inter',sans-serif; --font-data:'JetBrains Mono',monospace;
  --text-hero:clamp(42px,6vw,72px); --text-h1:clamp(32px,4vw,52px); --text-h2:28px; --text-h3:20px;
  --text-card:16px; --text-body:15px; --text-body-lg:18px; --text-label:11px; --text-meta:12px; --text-data:13px;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px;
  --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px; --space-20:80px; --space-24:96px;
  --radius-sm:4px; --radius-md:8px; --radius-lg:12px; --radius-xl:16px;
  --container-max:1140px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--color-bg); color:var(--color-text); font-family:var(--font-body); font-size:var(--text-body); line-height:1.7; overflow-x:hidden;}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer;}
.container{max-width:var(--container-max); margin:0 auto; padding:0 var(--space-6);}

.skip-link{position:absolute; left:-9999px; top:0; background:var(--color-gold); color:var(--color-text-inverse); padding:var(--space-3) var(--space-5); z-index:200; font-family:var(--font-data); font-weight:600; border-radius:0 0 var(--radius-md) 0;}
.skip-link:focus{left:0;}
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{outline:2px solid var(--color-gold); outline-offset:2px; border-radius:var(--radius-sm);}

/* ===== NAV ===== */
header.site-nav{position:sticky; top:0; z-index:100; background:transparent; border-bottom:1px solid transparent; transition:background-color 250ms ease, border-color 250ms ease, backdrop-filter 250ms ease;}
header.site-nav.scrolled{background:rgba(7,11,20,0.82); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom:1px solid var(--color-border);}
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:var(--space-4) 0; gap:var(--space-4);}
.logo{display:flex; align-items:center; gap:var(--space-2); font-family:var(--font-display); font-weight:700; font-size:20px; color:var(--color-text);}
.logo-badge{font-family:var(--font-data); font-size:10px; font-weight:600; letter-spacing:0.06em; background:var(--color-gold); color:var(--color-text-inverse); padding:2px 7px; border-radius:var(--radius-sm);}
nav.nav-links{display:flex; gap:var(--space-8); align-items:center;}
nav.nav-links a{font-family:var(--font-data); font-size:var(--text-meta); color:var(--color-text-subtle); text-transform:uppercase; letter-spacing:0.08em; transition:color 150ms ease; min-height:44px; display:flex; align-items:center;}
nav.nav-links a:hover, nav.nav-links a.active{color:var(--color-gold);}
.nav-cta{font-family:var(--font-display); font-weight:600; font-size:14px; background:var(--color-gold); color:var(--color-text-inverse); padding:var(--space-3) var(--space-5); border-radius:var(--radius-md); border:none; transition:transform 150ms ease, box-shadow 150ms ease; min-height:44px; display:inline-flex; align-items:center; white-space:nowrap;}
.nav-cta:hover{transform:scale(1.02); box-shadow:0 8px 20px var(--color-gold-glow);}
.nav-right{display:flex; align-items:center; gap:var(--space-6);}
.hamburger{display:none; background:none; border:1px solid var(--color-border); border-radius:var(--radius-md); width:44px; height:44px; align-items:center; justify-content:center; color:var(--color-text);}
.hamburger svg{width:20px; height:20px;}

.mobile-overlay{position:fixed; inset:0; background:var(--color-bg); z-index:150; display:flex; flex-direction:column; padding:var(--space-6); transform:translateX(100%); transition:transform 250ms ease;}
.mobile-overlay.open{transform:translateX(0);}
.mobile-overlay-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--space-10);}
.mobile-overlay nav{display:flex; flex-direction:column; gap:var(--space-6);}
.mobile-overlay nav a{font-family:var(--font-display); font-size:28px; font-weight:600;}
.close-btn{background:none; border:1px solid var(--color-border); border-radius:var(--radius-md); width:44px; height:44px; color:var(--color-text);}

/* ===== TICKER ===== */
.ticker-bar{background:var(--color-bg-card); border-bottom:1px solid var(--color-border); overflow:hidden;}
.ticker-inner{display:flex; align-items:stretch;}
.ticker-label{flex-shrink:0; display:flex; align-items:center; gap:var(--space-2); font-family:var(--font-data); font-size:11px; font-weight:600; color:var(--color-gold); letter-spacing:0.1em; padding:var(--space-2) var(--space-5); border-right:1px solid var(--color-border); text-transform:uppercase;}
.ticker-dot{width:6px; height:6px; border-radius:50%; background:var(--color-signal-up); animation:pulse 1.6s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1;} 50%{opacity:0.35;}}
.ticker-viewport{overflow:hidden; flex:1; position:relative;}
.ticker-track{display:flex; width:max-content; animation:ticker-scroll 38s linear infinite; padding:var(--space-2) 0;}
.ticker-viewport:hover .ticker-track{animation-play-state:paused;}
@keyframes ticker-scroll{from{transform:translateX(0);} to{transform:translateX(-50%);}}
.ticker-item{display:flex; align-items:center; gap:var(--space-2); font-family:var(--font-data); font-size:var(--text-meta); color:var(--color-text-subtle); white-space:nowrap; padding:0 var(--space-8);}
.ticker-item .delta-up{color:var(--color-signal-up);}
.ticker-item .delta-down{color:var(--color-signal-down);}
.ticker-item .delta-new{color:var(--color-signal-new);}

/* ===== HERO ===== */
.hero{position:relative; padding:var(--space-24) 0 0; overflow:hidden;}
.hero::before{content:""; position:absolute; top:-20%; left:50%; transform:translateX(-50%); width:900px; height:900px; background:radial-gradient(circle, var(--color-gold-glow) 0%, transparent 70%); pointer-events:none; z-index:0;}
.hero-serp-ghost{position:absolute; top:var(--space-16); right:-4%; width:520px; max-width:60vw; opacity:0.5; pointer-events:none; font-family:var(--font-data); z-index:0; user-select:none;}
.hero-serp-ghost .ghost-num{font-family:var(--font-display); font-weight:700; font-size:220px; color:var(--color-gold-dim); line-height:1; opacity:0.5;}
.hero-serp-ghost .ghost-row{background:var(--color-bg-card); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:var(--space-4); margin-top:-40px;}
.hero-serp-ghost .ghost-link{color:var(--color-signal-link); font-size:15px; font-family:var(--font-body); font-weight:600;}
.hero-serp-ghost .ghost-url{color:var(--color-signal-up); font-size:var(--text-meta); margin:var(--space-1) 0;}
.hero-serp-ghost .ghost-desc{color:var(--color-text-muted); font-size:var(--text-meta); line-height:1.6;}
.hero-content{position:relative; z-index:1; max-width:760px;}
.eyebrow{display:inline-flex; align-items:center; gap:var(--space-2); font-family:var(--font-data); font-size:var(--text-label); color:var(--color-gold); letter-spacing:0.1em; text-transform:uppercase; margin-bottom:var(--space-5);}
.hero h1{font-family:var(--font-display); font-size:var(--text-hero); font-weight:700; letter-spacing:-0.03em; line-height:1.05; margin-bottom:var(--space-6);}
.hero h1 .accent{color:var(--color-gold);}
.hero-sub{font-size:var(--text-body-lg); color:var(--color-text-subtle); line-height:1.7; max-width:600px; margin-bottom:var(--space-8);}
.cta-row{display:flex; align-items:center; gap:var(--space-6); flex-wrap:wrap; margin-bottom:var(--space-16);}
.btn-gold{font-family:var(--font-display); font-weight:600; font-size:15px; background:var(--color-gold); color:var(--color-text-inverse); padding:var(--space-4) var(--space-6); border-radius:var(--radius-md); border:none; transition:transform 150ms ease, box-shadow 150ms ease; min-height:44px; display:inline-flex; align-items:center;}
.btn-gold:hover{transform:scale(1.02); box-shadow:0 8px 24px var(--color-gold-glow);}
.btn-gold:disabled{opacity:0.6; cursor:default; transform:none;}
.btn-outline{font-family:var(--font-display); font-weight:600; font-size:14px; background:transparent; color:var(--color-text); border:1px solid var(--color-border); padding:var(--space-3) var(--space-6); border-radius:var(--radius-md); min-height:44px; display:inline-flex; align-items:center; transition:all 150ms ease;}
.btn-outline:hover{border-color:var(--color-border-hover); background:var(--color-bg-hover);}
.ghost-link-cta{font-family:var(--font-data); font-size:14px; color:var(--color-text-subtle); border-bottom:1px solid var(--color-border); padding-bottom:2px; transition:color 150ms ease, border-color 150ms ease; min-height:44px; display:inline-flex; align-items:center;}
.ghost-link-cta:hover{color:var(--color-gold); border-color:var(--color-gold);}

.stats-bar{border-top:1px solid var(--color-border); padding:var(--space-8) 0; position:relative; z-index:1;}
.stats-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-6);}
.stat-num{font-family:var(--font-display); font-weight:700; font-size:32px; color:var(--color-text);}
.stat-label{font-family:var(--font-data); font-size:var(--text-meta); color:var(--color-text-muted); text-transform:uppercase; letter-spacing:0.08em; margin-top:var(--space-1);}

/* ===== SECTION HEADER ===== */
.section{padding:var(--space-20) 0;}
.section-header{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:var(--space-8); gap:var(--space-4); flex-wrap:wrap;}
.section-label{font-family:var(--font-data); font-size:var(--text-label); color:var(--color-gold); text-transform:uppercase; letter-spacing:0.1em; margin-bottom:var(--space-2); display:block;}
.section-title{font-family:var(--font-display); font-weight:700; font-size:var(--text-h2);}
.view-all{font-family:var(--font-body); font-size:13px; color:var(--color-signal-link); font-weight:600; min-height:44px; display:inline-flex; align-items:center;}
.view-all:hover{text-decoration:underline;}

/* ===== RANK PILLS ===== */
.rank-pill{display:inline-flex; align-items:center; gap:4px; font-family:var(--font-data); font-size:10px; font-weight:600; padding:3px 8px; border-radius:20px; text-transform:uppercase; letter-spacing:0.04em; white-space:nowrap;}
.rank-editor{background:var(--color-gold-glow); border:1px solid rgba(245,166,35,0.4); color:var(--color-gold);}
.rank-trending{background:rgba(59,130,246,0.12); border:1px solid rgba(59,130,246,0.4); color:var(--color-signal-link);}
.rank-rising{background:rgba(16,185,129,0.12); border:1px solid rgba(16,185,129,0.4); color:var(--color-signal-up);}
.rank-new{background:rgba(139,92,246,0.12); border:1px solid rgba(139,92,246,0.4); color:var(--color-signal-new);}
.rank-category{background:transparent; border:1px solid var(--color-border); color:var(--color-text-muted);}

/* ===== FEATURED CONTENT ===== */
.featured-grid{display:grid; grid-template-columns:60% 40%; border:1px solid var(--color-border); border-radius:var(--radius-xl); overflow:hidden;}
.featured-main{padding:var(--space-10); border-right:1px solid var(--color-border); background:var(--color-bg-card);}
.featured-main .rank-pill{margin-bottom:var(--space-5);}
.featured-main h2{font-family:var(--font-display); font-weight:700; font-size:var(--text-h2); line-height:1.25; margin-bottom:var(--space-4);}
.featured-main p{color:var(--color-text-subtle); margin-bottom:var(--space-6); max-width:520px;}
.meta-row{display:flex; align-items:center; gap:var(--space-3); font-family:var(--font-data); font-size:var(--text-meta); color:var(--color-text-muted); margin-bottom:var(--space-6); flex-wrap:wrap;}
.meta-row .dot{width:3px; height:3px; border-radius:50%; background:var(--color-text-muted);}
.read-link{color:var(--color-signal-link); font-weight:600; font-size:14px; min-height:44px; display:inline-flex; align-items:center;}
.read-link:hover{text-decoration:underline;}
.featured-aside{display:flex; flex-direction:column; background:var(--color-bg-card);}
.aside-item{padding:var(--space-6) var(--space-8); border-bottom:1px solid var(--color-border); transition:background-color 200ms ease;}
.aside-item:last-child{border-bottom:none;}
.aside-item:hover{background:var(--color-bg-hover);}
.aside-item .rank-pill{margin-bottom:var(--space-3);}
.aside-item h3{font-family:var(--font-display); font-weight:600; font-size:15px; line-height:1.4; margin-bottom:var(--space-2);}
.aside-item .meta-row{margin-bottom:0; font-size:11px;}
.aside-item a{display:block;}

/* ===== ARTICLE CARDS GRID ===== */
.cards-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-6);}
.card{background:var(--color-bg-card); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:var(--space-6); transition:transform 200ms ease-out, border-color 200ms ease-out; display:flex; flex-direction:column; height:100%;}
.card:hover{border-color:rgba(245,166,35,0.4); transform:translateY(-3px);}
.card-top{display:flex; align-items:center; justify-content:space-between; gap:var(--space-2); margin-bottom:var(--space-4);}
.category-tag{font-family:var(--font-data); font-size:10px; color:var(--color-text-muted); text-transform:uppercase; letter-spacing:0.08em;}
.card h3{font-family:var(--font-display); font-weight:600; font-size:var(--text-card); line-height:1.4; margin-bottom:var(--space-3);}
.card p{font-size:14px; color:var(--color-text-subtle); line-height:1.6; margin-bottom:var(--space-5); flex:1;}
.card-footer{display:flex; justify-content:space-between; align-items:center; font-family:var(--font-data); font-size:11px; color:var(--color-text-muted); padding-top:var(--space-4); border-top:1px solid var(--color-border);}
.popular-signal{color:var(--color-signal-up); display:flex; align-items:center; gap:3px;}
.empty-state{text-align:center; padding:var(--space-24) 0;}
.empty-state .ghost-rank-huge{font-family:var(--font-data); font-weight:700; font-size:96px; color:var(--color-border); margin-bottom:var(--space-6);}
.empty-state p{font-family:var(--font-data); color:var(--color-text-muted);}

/* ===== TOOLS SECTION (homepage teaser) ===== */
.tools-section{background:var(--color-bg-card); border-top:1px solid var(--color-border); border-bottom:1px solid var(--color-border); padding:var(--space-20) 0;}
.tools-grid{display:grid; grid-template-columns:repeat(4,1fr);}
.tool-col{padding:0 var(--space-6); border-right:1px solid var(--color-border); position:relative;}
.tool-col:last-child{border-right:none;}
.ghost-rank{font-family:var(--font-data); font-weight:700; font-size:64px; line-height:1; margin-bottom:var(--space-4);}
.ghost-rank.rank-1{color:var(--color-gold-dim);}
.ghost-rank.rank-other{color:var(--color-border);}
.tool-col h3{font-family:var(--font-display); font-weight:700; font-size:20px; margin-bottom:var(--space-3);}
.tool-col .price{font-family:var(--font-data); font-size:var(--text-meta); color:var(--color-text-muted); margin-bottom:var(--space-3);}
.tool-col p.desc{font-size:14px; color:var(--color-text-subtle); margin-bottom:var(--space-4); min-height:64px;}
.verdict{font-family:var(--font-data); font-size:10px; letter-spacing:0.06em; text-transform:uppercase; margin-bottom:var(--space-5); display:inline-block;}
.verdict.gold{color:var(--color-gold);}
.verdict.plain{color:var(--color-text-muted);}
.tool-cta{display:inline-flex; align-items:center; justify-content:center; width:100%; font-family:var(--font-display); font-weight:600; font-size:13px; padding:var(--space-3) var(--space-4); border-radius:var(--radius-md); transition:all 150ms ease; min-height:44px;}
.tool-cta.filled{background:var(--color-gold); color:var(--color-text-inverse); border:1px solid var(--color-gold);}
.tool-cta.filled:hover{transform:scale(1.02); box-shadow:0 8px 20px var(--color-gold-glow);}
.tool-cta.ghost{background:transparent; color:var(--color-text); border:1px solid var(--color-border);}
.tool-cta.ghost:hover{border-color:var(--color-border-hover); background:var(--color-bg-hover);}

/* ===== TOOLS COMPARISON PAGE ===== */
.tools-hero{padding-top:var(--space-16); padding-bottom:var(--space-12);}
.tools-hero h1{font-family:var(--font-display); font-weight:700; font-size:var(--text-h1); letter-spacing:-0.02em; line-height:1.1; margin-bottom:var(--space-6); max-width:700px;}
.tools-hero .sub{font-size:var(--text-body-lg); color:var(--color-text-subtle); max-width:600px; margin-bottom:var(--space-10);}
.stat-pills{display:flex; flex-wrap:wrap; gap:var(--space-4);}
.stat-pill{border:1px solid var(--color-border); border-radius:999px; padding:var(--space-2) var(--space-5); font-family:var(--font-data); font-size:12px; color:var(--color-text-subtle);}
.stat-pill strong{color:var(--color-gold); font-weight:600;}
.filter-bar{position:sticky; top:64px; z-index:40; background:rgba(7,11,20,0.92); backdrop-filter:blur(16px); border-top:1px solid var(--color-border); border-bottom:1px solid var(--color-border); padding:var(--space-3) 0;}
.filter-bar-inner{display:flex; gap:var(--space-3); overflow-x:auto;}
.filter-btn{font-family:var(--font-data); font-size:12px; text-transform:uppercase; letter-spacing:0.06em; padding:var(--space-2) var(--space-4); border-radius:999px; white-space:nowrap; min-height:44px; border:1px solid var(--color-border); background:transparent; color:var(--color-text-subtle); transition:all 150ms ease;}
.filter-btn.active{background:var(--color-gold); color:var(--color-text-inverse); border-color:var(--color-gold);}
.filter-btn:hover:not(.active){border-color:var(--color-border-hover);}

.compare-table-wrap{overflow-x:auto; border:1px solid var(--color-border); border-radius:var(--radius-xl);}
table.compare-table{width:100%; border-collapse:collapse; min-width:720px;}
table.compare-table thead th{text-align:left; padding:var(--space-5); background:var(--color-bg-card); position:relative; min-width:150px;}
table.compare-table thead th.feature-col{font-family:var(--font-data); font-size:12px; color:var(--color-text-muted); text-transform:uppercase; letter-spacing:0.06em; position:sticky; left:0; background:var(--color-bg-card); min-width:160px;}
table.compare-table thead th.winner{border-left:1px solid rgba(245,166,35,0.3); border-right:1px solid rgba(245,166,35,0.3);}
.th-ghost-rank{position:absolute; top:-8px; right:12px; font-family:var(--font-data); font-weight:700; font-size:48px; line-height:1; pointer-events:none; user-select:none; opacity:0.4;}
.th-ghost-rank.rank-1{color:var(--color-gold-dim);}
.th-ghost-rank.rank-other{color:var(--color-border);}
.th-tool-name{font-family:var(--font-display); font-weight:700; font-size:18px; position:relative;}
.th-tool-price{font-family:var(--font-data); font-size:12px; color:var(--color-text-muted); margin-top:4px;}
.th-tool-score{font-family:var(--font-data); font-size:12px; color:var(--color-signal-up); margin-top:4px; font-weight:600;}
table.compare-table tbody td{padding:var(--space-5); border-top:1px solid var(--color-border); font-weight:600;}
table.compare-table tbody td.feature-label{font-family:var(--font-data); font-size:14px; color:var(--color-text-subtle); font-weight:400; position:sticky; left:0; background:inherit;}
table.compare-table tbody tr:nth-child(even){background:rgba(255,255,255,0.02);}
table.compare-table tbody tr:hover{background:var(--color-gold-glow);}
table.compare-table tbody td.winner-cell{border-left:1px solid rgba(245,166,35,0.3); border-right:1px solid rgba(245,166,35,0.3);}
.cell-yes{color:var(--color-signal-up);}
.cell-partial{color:var(--color-gold);}
.cell-no{color:var(--color-signal-down); opacity:0.6;}
.cell-score{color:var(--color-signal-up); font-family:var(--font-data);}

.tool-deepdive{position:relative; background:var(--color-bg-card); border:1px solid var(--color-border); border-radius:var(--radius-xl); padding:var(--space-8); overflow:hidden; margin-bottom:var(--space-8);}
.tool-deepdive .dd-ghost-rank{position:absolute; top:var(--space-4); right:var(--space-6); font-family:var(--font-data); font-weight:700; font-size:96px; line-height:1; pointer-events:none; user-select:none; opacity:0.3;}
.tool-deepdive .dd-ghost-rank.rank-1{color:var(--color-gold-dim);}
.tool-deepdive .dd-ghost-rank.rank-other{color:var(--color-border);}
.dd-head{position:relative; display:flex; align-items:baseline; gap:var(--space-4); margin-bottom:var(--space-2); flex-wrap:wrap;}
.dd-head h2{font-family:var(--font-display); font-weight:700; font-size:24px;}
.dd-price{font-family:var(--font-data); font-size:12px; border:1px solid var(--color-border); border-radius:999px; padding:var(--space-1) var(--space-3); color:var(--color-text-subtle);}
.dd-desc{position:relative; color:var(--color-text-subtle); margin-bottom:var(--space-6); max-width:500px;}
.pros-cons{position:relative; display:grid; grid-template-columns:1fr 1fr; gap:var(--space-6); margin-bottom:var(--space-6); max-width:700px;}
.pros-cons h4{font-family:var(--font-data); font-size:11px; text-transform:uppercase; letter-spacing:0.08em; margin-bottom:var(--space-3);}
.pros-cons h4.pros{color:var(--color-signal-up);}
.pros-cons h4.cons{color:var(--color-signal-down);}
.pros-cons ul{list-style:none; display:flex; flex-direction:column; gap:var(--space-2);}
.pros-cons li{display:flex; align-items:flex-start; gap:var(--space-2); font-size:14px; color:var(--color-text-subtle);}
.dd-bestfor{position:relative; font-family:var(--font-data); font-size:12px; color:var(--color-text-muted); margin-bottom:var(--space-6);}
.dd-bestfor span{color:var(--color-text-subtle);}

/* ===== NEWSLETTER ===== */
.newsletter-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-16); align-items:center;}
.newsletter-copy h2{font-family:var(--font-display); font-weight:700; font-size:var(--text-h2); margin:var(--space-2) 0 var(--space-5); line-height:1.3;}
.newsletter-copy h2 .accent{color:var(--color-gold);}
.newsletter-copy > p{color:var(--color-text-subtle); margin-bottom:var(--space-6); max-width:480px;}
.proof-list{display:flex; flex-direction:column; gap:var(--space-4);}
.proof-item{display:flex; align-items:flex-start; gap:var(--space-3); font-size:14px; color:var(--color-text-subtle);}
.proof-item .delta-up{color:var(--color-signal-up); font-family:var(--font-data); font-weight:600;}
.serp-widget{background:var(--color-bg-card); border:1px solid var(--color-border); border-radius:var(--radius-xl); padding:var(--space-6);}
.serp-result{padding:var(--space-4) 0; border-bottom:1px solid var(--color-border);}
.serp-result:first-child{padding-top:0;}
.serp-result-head{display:flex; align-items:center; justify-content:space-between; gap:var(--space-2);}
.serp-pos{font-family:var(--font-data); font-weight:700; font-size:13px; color:var(--color-gold);}
.serp-delta{font-family:var(--font-data); font-size:12px; font-weight:600;}
.serp-title{color:var(--color-signal-link); font-size:15px; font-weight:600; margin-top:var(--space-2);}
.serp-url{color:var(--color-signal-up); font-family:var(--font-data); font-size:11px; margin:var(--space-1) 0;}
.serp-desc{color:var(--color-text-muted); font-size:13px; line-height:1.5;}
.email-form{display:flex; gap:var(--space-3); margin-top:var(--space-6);}
.email-input{flex:1; background:transparent; border:1px solid var(--color-border); border-radius:var(--radius-md); color:var(--color-text); padding:var(--space-4); font-family:var(--font-body); font-size:14px; min-height:44px; transition:border-color 150ms ease;}
.email-input::placeholder{color:var(--color-text-muted);}
.email-input:focus{border-color:var(--color-gold); outline:none;}
.micro-copy{font-family:var(--font-data); font-size:11px; color:var(--color-text-muted); margin-top:var(--space-3);}
.form-message{font-family:var(--font-data); font-size:12px; margin-top:var(--space-3);}
.form-message.success{color:var(--color-signal-up);}
.form-message.error{color:var(--color-signal-down);}
.compact-newsletter{max-width:740px; margin-top:var(--space-10); background:var(--color-bg-card); border:1px solid var(--color-border); border-radius:var(--radius-xl); padding:var(--space-8);}
.compact-newsletter h3{font-family:var(--font-display); font-size:22px; margin-bottom:var(--space-3);}
.compact-newsletter h3 .accent{color:var(--color-gold);}
.compact-newsletter p{color:var(--color-text-subtle); font-size:14px; margin-bottom:var(--space-5);}

/* ===== FOOTER ===== */
footer{border-top:1px solid var(--color-border); padding:var(--space-16) 0 var(--space-8);}
.footer-top{display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:var(--space-8); margin-bottom:var(--space-12);}
.footer-brand .logo{margin-bottom:var(--space-3);}
.footer-brand p{color:var(--color-text-muted); font-size:14px; max-width:220px;}
.footer-col h4{font-family:var(--font-data); font-size:11px; text-transform:uppercase; letter-spacing:0.08em; color:var(--color-text-muted); margin-bottom:var(--space-4);}
.footer-col ul{list-style:none; display:flex; flex-direction:column; gap:var(--space-3);}
.footer-col a{font-size:14px; color:var(--color-text-subtle); transition:color 150ms ease;}
.footer-col a:hover{color:var(--color-gold);}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:var(--space-6); border-top:1px solid var(--color-border); font-family:var(--font-data); font-size:12px; color:var(--color-text-muted); flex-wrap:wrap; gap:var(--space-3);}
.footer-bottom a{color:var(--color-text-muted); text-decoration:underline;}

/* ===== POST PAGE ===== */
.progress-bar{position:fixed; top:0; left:0; height:3px; background:var(--color-gold); width:0%; z-index:300; transition:width 100ms linear;}
.post-header{padding:var(--space-10) 0 var(--space-8); border-bottom:1px solid var(--color-border);}
.breadcrumb{font-family:var(--font-data); font-size:11px; color:var(--color-text-muted); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:var(--space-5);}
.breadcrumb a{color:var(--color-text-muted); transition:color 150ms ease;}
.breadcrumb a:hover{color:var(--color-gold);}
.post-header h1{font-family:var(--font-display); font-weight:700; font-size:var(--text-h1); letter-spacing:-0.02em; line-height:1.15; max-width:760px; margin:var(--space-5) 0 var(--space-6);}
.post-meta-row{display:flex; align-items:center; gap:var(--space-4); font-family:var(--font-data); font-size:var(--text-meta); color:var(--color-text-muted); flex-wrap:wrap;}
.post-meta-row .dot{width:3px; height:3px; border-radius:50%; background:var(--color-text-muted);}
.keyword-pill{border:1px solid var(--color-border); border-radius:var(--radius-sm); padding:2px 8px; color:var(--color-text-subtle);}
.post-layout{display:grid; grid-template-columns:63% 33%; gap:4%; padding:var(--space-12) 0 var(--space-20); align-items:start;}
.article-body{max-width:740px; font-size:var(--text-body-lg); line-height:1.8; color:var(--color-text);}
.article-body > *{margin-bottom:var(--space-6);}
.article-body h2{font-family:var(--font-display); font-weight:700; font-size:24px; padding-left:var(--space-4); border-left:3px solid var(--color-gold); margin-top:var(--space-10);}
.article-body h3{font-family:var(--font-display); font-weight:600; font-size:18px; margin-top:var(--space-8);}
.article-body p{color:var(--color-text-subtle);}
.article-body blockquote{border-left:3px solid var(--color-gold); background:var(--color-gold-glow); padding:var(--space-5) var(--space-6); font-style:italic; color:var(--color-text); border-radius:0 var(--radius-md) var(--radius-md) 0;}
.article-body code{font-family:var(--font-data); background:var(--color-bg-subtle); padding:2px 6px; border-radius:4px; font-size:14px; color:var(--color-gold);}
.article-body pre{font-family:var(--font-data); background:var(--color-bg-subtle); padding:var(--space-5); border-radius:var(--radius-md); overflow-x:auto; font-size:13px; border:1px solid var(--color-border); color:var(--color-text-subtle);}
.article-body pre code{background:none; padding:0;}
.article-body a{color:var(--color-signal-link);}
.article-body a:hover{text-decoration:underline;}
.article-body ul, .article-body ol{color:var(--color-text-subtle); padding-left:var(--space-6);}
.article-body li{margin-bottom:var(--space-2);}
.sidebar{position:sticky; top:calc(64px + var(--space-6)); display:flex; flex-direction:column; gap:var(--space-8);}
.sidebar-widget{background:var(--color-bg-card); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:var(--space-6);}
.sidebar-widget h4{font-family:var(--font-data); font-size:var(--text-label); text-transform:uppercase; letter-spacing:0.08em; color:var(--color-gold); margin-bottom:var(--space-5);}
.tool-mini{display:flex; align-items:center; gap:var(--space-3); padding:var(--space-3) 0; border-bottom:1px solid var(--color-border);}
.tool-mini:last-of-type{border-bottom:none;}
.tool-mini .num{font-family:var(--font-data); font-weight:700; color:var(--color-gold-dim); font-size:20px; width:32px; flex-shrink:0;}
.tool-mini .info h5{font-family:var(--font-display); font-weight:600; font-size:14px;}
.tool-mini .info p{font-size:12px; color:var(--color-text-muted);}
.sidebar-cta{display:block; text-align:center; margin-top:var(--space-4); font-family:var(--font-display); font-weight:600; font-size:13px; background:var(--color-gold); color:var(--color-text-inverse); padding:var(--space-3); border-radius:var(--radius-md); min-height:44px; line-height:1.4; display:flex; align-items:center; justify-content:center; transition:transform 150ms ease;}
.sidebar-cta:hover{transform:scale(1.02);}
.related-item{display:block; padding:var(--space-3) 0; border-bottom:1px solid var(--color-border);}
.related-item:last-child{border-bottom:none;}
.related-item h5{font-family:var(--font-display); font-weight:600; font-size:13px; line-height:1.4; margin-bottom:var(--space-1);}
.related-item span{font-family:var(--font-data); font-size:11px; color:var(--color-text-muted);}
.author-card{display:flex; gap:var(--space-4); align-items:center; background:var(--color-bg-card); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:var(--space-6); margin-top:var(--space-10); max-width:740px;}
.author-avatar{width:56px; height:56px; border-radius:50%; background:var(--color-gold-glow); border:1px solid var(--color-gold); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; color:var(--color-gold);}
.author-card h4{font-family:var(--font-display); font-size:15px; margin-bottom:2px;}
.author-card p{font-size:13px; color:var(--color-text-muted);}
.related-grid{max-width:740px; margin-top:var(--space-12);}
.related-grid > .section-label{margin-bottom:var(--space-5);}
.related-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-5);}
.related-card{background:var(--color-bg-card); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:var(--space-5); transition:transform 200ms ease-out, border-color 200ms ease-out;}
.related-card:hover{border-color:rgba(245,166,35,0.4); transform:translateY(-3px);}
.related-card h5{font-family:var(--font-display); font-weight:600; font-size:14px; line-height:1.4; margin-bottom:var(--space-2);}
.related-card span{font-family:var(--font-data); font-size:11px; color:var(--color-text-muted);}
.mobile-sidebar-scroll{display:none;}

/* ===== CATEGORY / ARCHIVE PAGE ===== */
.category-hero{padding-top:var(--space-16); padding-bottom:var(--space-10);}
.category-hero h1{font-family:var(--font-display); font-weight:700; font-size:var(--text-h1); letter-spacing:-0.02em; margin-bottom:var(--space-4);}
.category-hero .count{font-family:var(--font-data); font-size:14px; color:var(--color-text-muted); margin-bottom:var(--space-4);}
.category-hero .desc{color:var(--color-text-subtle); max-width:600px;}
.sort-bar{border-top:1px solid var(--color-border); border-bottom:1px solid var(--color-border); padding:var(--space-4) 0;}
.sort-bar-inner{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:var(--space-4);}
.sort-links{display:flex; gap:var(--space-2);}
.sort-link{font-family:var(--font-data); font-size:12px; text-transform:uppercase; letter-spacing:0.06em; padding:var(--space-2) var(--space-4); border-radius:999px; min-height:44px; display:inline-flex; align-items:center; border:1px solid var(--color-border); color:var(--color-text-subtle); transition:all 150ms ease;}
.sort-link.active{background:var(--color-gold); color:var(--color-text-inverse); border-color:var(--color-gold);}
.sort-link:hover:not(.active){border-color:var(--color-border-hover);}
.pagination{display:flex; justify-content:center; gap:var(--space-2); margin-top:var(--space-16);}
.page-btn{width:44px; height:44px; border-radius:var(--radius-md); font-family:var(--font-data); font-size:14px; display:flex; align-items:center; justify-content:center; border:1px solid var(--color-border); color:var(--color-text-subtle); transition:all 150ms ease;}
.page-btn.active{background:var(--color-gold); color:var(--color-text-inverse); border-color:var(--color-gold);}
.page-btn:hover:not(.active){border-color:var(--color-border-hover);}

/* ===== RESPONSIVE ===== */
@media (max-width:1024px){
  .featured-grid{grid-template-columns:1fr;}
  .featured-main{border-right:none; border-bottom:1px solid var(--color-border);}
  .tools-grid{grid-template-columns:repeat(2,1fr);}
  .tool-col{border-bottom:1px solid var(--color-border); padding-bottom:var(--space-8); margin-bottom:var(--space-8);}
  .tool-col:nth-child(2n){border-right:none;}
  .footer-top{grid-template-columns:1fr 1fr;}
  .post-layout{grid-template-columns:1fr; gap:0;}
  .sidebar{position:static; display:none;}
  .mobile-sidebar-scroll{display:flex; gap:var(--space-4); overflow-x:auto; padding:var(--space-6) 0; margin-top:var(--space-8); border-top:1px solid var(--color-border);}
  .mobile-sidebar-scroll .sidebar-widget{min-width:280px; flex-shrink:0;}
  .related-cards{grid-template-columns:1fr 1fr;}
}
@media (max-width:768px){
  nav.nav-links{display:none;}
  .hamburger{display:flex;}
  .nav-cta{display:none;}
  .hero-serp-ghost{display:none;}
  .stats-grid{grid-template-columns:repeat(2,1fr); gap:var(--space-6) var(--space-4);}
  .cards-grid{grid-template-columns:1fr;}
  .tools-grid{grid-template-columns:1fr;}
  .tool-col{border-right:none;}
  .newsletter-grid{grid-template-columns:1fr; gap:var(--space-10);}
  .footer-top{grid-template-columns:1fr 1fr; gap:var(--space-6);}
  .email-form{flex-direction:column;}
  .cta-row{flex-direction:column; align-items:flex-start;}
  .related-cards{grid-template-columns:1fr;}
  .author-card{flex-direction:column; text-align:center;}
  .pros-cons{grid-template-columns:1fr;}
}
@media (max-width:480px){
  .footer-top{grid-template-columns:1fr;}
  .stats-grid{grid-template-columns:1fr 1fr;}
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; transition-duration:0.01ms !important;}
  .ticker-track{animation:none;}
  html{scroll-behavior:auto;}
}