/*
 * FEM SOCIETY — Complete Design System v3.0
 * Covers: tokens, layout, header/mega-menu, sidebar,
 *         calculators, homepage, ads, footer, utilities, responsive
 */

/* ── Google Fonts (display=swap for CWV) ──────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Caveat:wght@700&display=swap');

/* ═══════════════════════════════════════
   1. TOKENS
═══════════════════════════════════════ */
:root {
  --primary:   #CC785C;
  --pd:        #B5654A;
  --pl:        #D4A27F;
  --sand:      #EBDBBC;
  --bg:        #F8F8F5;
  --bgl:       #EFEFEA;
  --bgc:       #FFFFFF;
  --bgd:       #1A1A18;
  --tx:        #1A1A18;
  --txm:       #6B6B67;
  --txl:       #9B9B96;
  --bd:        #E4E4DD;
  --sh0:       0 1px 3px rgba(0,0,0,.06);
  --sh1:       0 4px 16px rgba(0,0,0,.09);
  --sh2:       0 10px 36px rgba(0,0,0,.14);
  --hg:        linear-gradient(135deg,#1A1A18 0%,#3A3A38 100%);
  --r:         6px;
  --rl:        12px;
  --rx:        18px;
  --f:         'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --fd:        'Caveat',cursive;
  --tr:        all .18s ease;
  --sidebar-w: 280px;
  --header-h:  62px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--f);
  font-size: 15px;
  line-height: 1.65;
  color: var(--tx);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: var(--tx); text-decoration: none; transition: var(--tr); }
a:hover { color: var(--primary); }
h1,h2,h3,h4,h5 { font-weight: 800; line-height: 1.22; color: var(--tx); }
p { color: var(--txm); margin-bottom: .9rem; }
p:last-child { margin-bottom: 0; }
ul, ol { padding-left: 1.4rem; }
li { color: var(--txm); margin-bottom: .2rem; }
img { max-width: 100%; display: block; }
input, select, textarea, button { font-family: var(--f); font-size: 14.5px; }
.sr-only { position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap; }

/* ═══════════════════════════════════════
   2. TYPOGRAPHY
═══════════════════════════════════════ */
h1 { font-size: clamp(22px, 4vw, 44px); }
h2 { font-size: clamp(18px, 3vw, 32px); }
h3 { font-size: clamp(15px, 2vw, 20px); }
h4 { font-size: 14px; }
.eyebrow {
  display:inline-flex;align-items:center;gap:6px;
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--txm);background:rgba(0,0,0,.04);border:1px solid var(--bd);
  padding:4px 12px;border-radius:100px;margin-bottom:12px;
}
.doodle-font { font-family: var(--fd); }

/* ═══════════════════════════════════════
   3. LAYOUT
═══════════════════════════════════════ */
.site { display:flex;flex-direction:column;min-height:100vh; }
.site-body {
  display:grid;
  grid-template-columns:1fr var(--sidebar-w);
  gap:28px;
  max-width:1240px;margin:0 auto;padding:28px 20px;
  width:100%;align-items:start;
}
.site-main { min-width:0;flex:1; }
.site-sidebar { width:var(--sidebar-w); }
.full-w { width:100%;max-width:100%;padding:0; }
.wrap { max-width:1240px;margin:0 auto;padding:0 20px; }
.wrap-sm { max-width:800px;margin:0 auto;padding:0 20px; }
.section { padding:64px 0; }
.section-sm { padding:32px 0; }
.sec-title { text-align:center;max-width:640px;margin:0 auto 40px; }
.sec-title h2 { margin-bottom:12px; }
.sec-title p { font-size:15px;color:var(--txm); }
.crumb { display:flex;align-items:center;gap:6px;font-size:12px;color:var(--txm);margin-bottom:14px; }
.crumb a { color:var(--txm); }
.crumb a:hover { color:var(--primary); }
.crumb-sep { opacity:.4; }
.skip { position:absolute;top:-999px;left:0;padding:8px 16px;background:var(--primary);color:#fff;font-weight:700;border-radius:0 0 var(--r) 0;z-index:9999; }
.skip:focus { top:0; }

/* ═══════════════════════════════════════
   4. HEADER + MEGA MENU
═══════════════════════════════════════ */
.hdr {
  position:sticky;top:0;z-index:1000;
  background:#fff;border-bottom:1px solid var(--bd);
  transition:box-shadow .2s;height:var(--header-h);
  display:flex;align-items:center;
}
.hdr.scrolled { box-shadow:var(--sh1); }
.hdr-in {
  display:flex;align-items:center;gap:12px;
  width:100%;height:100%;max-width:1240px;margin:0 auto;padding:0 20px;
}
/* Logo */
.logo { display:flex;align-items:center;gap:9px;flex-shrink:0;text-decoration:none; }
.logo-icon { width:40px;height:40px;display:flex;align-items:center;justify-content:center;font-size:24px; }
.logo-t { font-family:var(--fd);font-size:22px;font-weight:700;color:var(--tx)!important;letter-spacing:-.3px;line-height:1; }
.logo:hover .logo-t { color:var(--primary)!important; }

/* Primary nav */
.hnav { display:flex;align-items:center;gap:2px;flex:1;margin-left:8px; }
.hnav > a {
  font-size:13.5px;font-weight:600;padding:7px 12px;border-radius:var(--r);
  color:var(--txm);transition:var(--tr);
}
.hnav > a:hover, .hnav > a.active { color:var(--primary);background:rgba(204,120,92,.07); }

/* Mega menu trigger */
.mega-trigger {
  font-size:13.5px;font-weight:600;padding:7px 12px;border-radius:var(--r);
  color:var(--txm);background:none;border:none;cursor:pointer;
  transition:var(--tr);display:flex;align-items:center;gap:5px;position:relative;
}
.mega-trigger:hover, .mega-trigger.open { color:var(--primary);background:rgba(204,120,92,.07); }
.mega-trigger svg { transition:transform .2s; }
.mega-trigger.open svg { transform:rotate(180deg); }

/* Mega dropdown */
.mega-drop {
  position:fixed;top:var(--header-h);left:0;right:0;
  background:#fff;border-bottom:2px solid var(--bd);
  box-shadow:0 16px 48px rgba(0,0,0,.12);
  padding:28px 0;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:all .22s cubic-bezier(.4,0,.2,1);
  pointer-events:none;z-index:999;
}
.mega-drop.open { opacity:1;visibility:visible;transform:translateY(0);pointer-events:all; }
.mega-inner { max-width:1240px;margin:0 auto;padding:0 20px; }
.mega-grid {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:8px;
}
.mega-cat {
  padding:12px;border-radius:var(--rl);border:1px solid transparent;
  transition:var(--tr);cursor:pointer;
}
.mega-cat:hover { background:rgba(204,120,92,.06);border-color:rgba(204,120,92,.15); }
.mega-cat-head { display:flex;align-items:center;gap:8px;margin-bottom:8px; }
.mega-cat-icon { font-size:20px;flex-shrink:0; }
.mega-cat-name { font-size:12.5px;font-weight:800;color:var(--tx); }
.mega-cat-links { list-style:none;padding:0;margin:0; }
.mega-cat-links li { margin-bottom:2px; }
.mega-cat-links a { font-size:11.5px;color:var(--txm);font-weight:500;display:block;padding:2px 0; }
.mega-cat-links a:hover { color:var(--primary); }
.mega-cat-links .see-all { color:var(--primary);font-weight:700;margin-top:4px; }
.mega-footer { display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--bd);margin-top:20px;padding-top:16px; }
.mega-footer span { font-size:12px;color:var(--txm); }

/* Header CTA */
.hcta { display:flex;align-items:center;gap:10px;margin-left:auto;flex-shrink:0; }
.hdr-search {
  display:flex;align-items:center;background:var(--bgl);border:1.5px solid var(--bd);
  border-radius:var(--r);padding:6px 12px;gap:8px;width:180px;transition:var(--tr);
}
.hdr-search:focus-within { border-color:var(--primary);background:#fff;box-shadow:0 0 0 3px rgba(204,120,92,.1); }
.hdr-search input { background:none;border:none;outline:none;font-size:13px;color:var(--tx);width:100%; }
.hdr-search input::placeholder { color:var(--txl); }

/* Hamburger */
.ham { width:38px;height:38px;display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:var(--bgl);border:1px solid var(--bd);border-radius:var(--r);cursor:pointer;padding:0; }
.ham span { display:block;width:18px;height:2px;background:var(--tx);border-radius:2px;transition:var(--tr); }
.ham.on span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.ham.on span:nth-child(2) { opacity:0; }
.ham.on span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* Mobile nav */
.mnav {
  position:fixed;top:var(--header-h);left:0;right:0;bottom:0;
  background:#fff;z-index:999;overflow-y:auto;padding:12px 0 32px;
  transform:translateX(-100%);transition:transform .28s cubic-bezier(.4,0,.2,1);
  border-top:1px solid var(--bd);
}
.mnav.on { transform:translateX(0); }
.mnav a { display:flex;align-items:center;gap:10px;padding:12px 20px;font-size:14px;font-weight:600;color:var(--tx);border-bottom:1px solid rgba(0,0,0,.04); }
.mnav a:hover { background:var(--bgl);color:var(--primary); }
.m-lbl { padding:14px 20px 6px;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--txl); }

/* ═══════════════════════════════════════
   5. SIDEBAR
═══════════════════════════════════════ */
.sidebar { display:flex;flex-direction:column;gap:16px;position:sticky;top:calc(var(--header-h) + 16px); }
.sw { background:var(--bgc);border:1px solid var(--bd);border-radius:var(--rl);overflow:hidden;box-shadow:var(--sh0); }
.sw-head { padding:11px 14px;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--txm);border-bottom:1px solid var(--bd);background:var(--bgl); }
.calc-nav { list-style:none;padding:0;margin:0; }
.calc-nav li { border-bottom:1px solid var(--bd); }
.calc-nav li:last-child { border-bottom:none; }
.calc-nav a { display:flex;align-items:center;gap:10px;padding:10px 14px;font-size:12.5px;font-weight:600;color:var(--txm);transition:var(--tr); }
.calc-nav a:hover { background:rgba(204,120,92,.06);color:var(--primary); }
.calc-nav a.active { background:rgba(204,120,92,.09);color:var(--primary);border-left:3px solid var(--primary); }
.calc-nav .ci { width:26px;height:26px;background:var(--bgl);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0; }
.calc-nav a.active .ci { background:rgba(204,120,92,.15); }
.qtip { padding:12px 14px;background:rgba(235,219,188,.2);border-left:3px solid var(--sand);margin:10px;border-radius:var(--r); }
.qtip-label { font-size:10px;font-weight:800;color:var(--primary);text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px; }
.qtip p { font-size:12px;line-height:1.6;color:var(--txm);margin:0; }
.rel-list { list-style:none;padding:0;margin:0; }
.rel-list li { border-bottom:1px solid var(--bd); }
.rel-list li:last-child { border-bottom:none; }
.rel-list a { display:flex;align-items:center;gap:8px;padding:9px 14px;font-size:12.5px;font-weight:600;color:var(--txm);transition:var(--tr); }
.rel-list a:hover { color:var(--primary);background:rgba(204,120,92,.05); }

/* ═══════════════════════════════════════
   6. FOOTER
═══════════════════════════════════════ */
.ftr { background:var(--bgd);color:rgba(255,255,255,.55);padding:56px 0 0;margin-top:auto; }
.ftr-grid { display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:36px;margin-bottom:40px; }
.fb .logo-t { color:#fff!important;font-size:22px;margin-bottom:10px;display:block; }
.fb p { font-size:12.5px;color:rgba(255,255,255,.45);line-height:1.7;margin-bottom:8px; }
.fb .tagline { font-size:11px;color:rgba(255,255,255,.3);font-style:italic; }
.fc h4 { font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.35);margin-bottom:14px; }
.fc ul { list-style:none;padding:0; }
.fc ul li { margin-bottom:6px; }
.fc ul li a { font-size:12.5px;color:rgba(255,255,255,.5); }
.fc ul li a:hover { color:var(--sand); }
.ftr-cats { border-top:1px solid rgba(255,255,255,.08);padding:24px 0;display:grid;grid-template-columns:repeat(5,1fr);gap:8px; }
.ftr-cat a { display:flex;align-items:center;gap:8px;font-size:12px;color:rgba(255,255,255,.45);font-weight:600;padding:6px 0; }
.ftr-cat a:hover { color:var(--sand); }
.fbot { border-top:1px solid rgba(255,255,255,.07);padding:16px 0;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px; }
.fbot span { font-size:11.5px;color:rgba(255,255,255,.28); }
.fbl { display:flex;gap:16px; }
.fbl a { font-size:11.5px;color:rgba(255,255,255,.35); }
.fbl a:hover { color:var(--sand); }
.fdisc { font-size:11px!important;color:rgba(255,255,255,.25)!important;line-height:1.6;font-style:italic;border-top:1px solid rgba(255,255,255,.06);padding-top:12px;margin-top:12px; }

/* ═══════════════════════════════════════
   7. BUTTONS
═══════════════════════════════════════ */
.btn { display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:11px 22px;border-radius:var(--r);font-size:13.5px;font-weight:700;cursor:pointer;border:2px solid transparent;transition:var(--tr);line-height:1;white-space:nowrap;text-decoration:none; }
.btn-p { background:var(--primary);color:#fff;border-color:var(--primary); }
.btn-p:hover { background:var(--pd);border-color:var(--pd);color:#fff;transform:translateY(-1px); }
.btn-o { background:transparent;color:var(--primary);border-color:var(--primary); }
.btn-o:hover { background:var(--primary);color:#fff; }
.btn-d { background:rgba(255,255,255,.08);color:rgba(255,255,255,.75);border-color:rgba(255,255,255,.12); }
.btn-d:hover { background:rgba(255,255,255,.15);color:#fff;border-color:rgba(255,255,255,.2); }
.btn-sm { padding:8px 16px;font-size:12.5px; }
.btn-lg { padding:14px 28px;font-size:15px; }
.btn-full { width:100%;justify-content:center;padding:14px;font-size:14.5px; }

/* ═══════════════════════════════════════
   8. CARDS & BADGES
═══════════════════════════════════════ */
.card { background:var(--bgc);border:1px solid var(--bd);border-radius:var(--rl);box-shadow:var(--sh0); }
.badge { display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:100px;font-size:10.5px;font-weight:700; }
.badge-p { background:rgba(204,120,92,.12);color:var(--primary);border:1px solid rgba(204,120,92,.25); }
.badge-s { background:rgba(235,219,188,.3);color:#8a6d3b;border:1px solid rgba(235,219,188,.6); }
.badge-g { background:rgba(34,197,94,.1);color:#15803d;border:1px solid rgba(34,197,94,.25); }
.badge-r { background:rgba(239,68,68,.08);color:#dc2626;border:1px solid rgba(239,68,68,.2); }

/* ═══════════════════════════════════════
   9. CALCULATOR COMPONENTS
═══════════════════════════════════════ */
.calc-card { background:var(--bgc);border:1px solid var(--bd);border-radius:var(--rl);box-shadow:var(--sh0);overflow:hidden;margin-bottom:24px; }
.calc-head { padding:20px 24px 16px;border-bottom:1px solid var(--bd);background:var(--bgc);display:flex;align-items:flex-start;gap:14px; }
.calc-icon { width:44px;height:44px;border-radius:var(--r);background:rgba(204,120,92,.1);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0; }
.calc-title-block { flex:1; }
.calc-title { font-size:18px;font-weight:900;color:var(--tx);margin-bottom:3px; }
.calc-sub { font-size:12.5px;color:var(--txm);line-height:1.5;margin:0; }
.calc-badges { display:flex;gap:6px;margin-top:8px;flex-wrap:wrap; }
.free-badge { display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;color:var(--primary);background:rgba(204,120,92,.08);border:1px solid rgba(204,120,92,.2);padding:2px 10px;border-radius:100px; }
.calc-body { padding:20px 24px; }
.fg { margin-bottom:16px; }
.fg label { display:block;font-size:12.5px;font-weight:700;color:var(--tx);margin-bottom:5px; }
.fg small { display:block;font-size:11px;color:var(--txm);margin-top:3px; }
.fg2 { display:grid;grid-template-columns:1fr 1fr;gap:14px; }
.fg3 { display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px; }
.fg2>.fg,.fg3>.fg{margin-bottom:0}
.fg input[type=text],.fg input[type=number],.fg input[type=date],.fg select,.fg textarea { padding:10px 13px;border:1.5px solid var(--bd);border-radius:var(--r);background:var(--bg);color:var(--tx);font-size:14px;transition:var(--tr);width:100%;-webkit-appearance:none;appearance:none; }
.fg input:focus,.fg select:focus,.fg textarea:focus { outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(204,120,92,.12);background:#fff; }
.fg input::placeholder { color:var(--txl); }
.rp { display:flex;flex-wrap:wrap;gap:7px; }
.rp input[type=radio] { position:absolute;opacity:0;pointer-events:none; }
.rp label { padding:7px 15px;border:1.5px solid var(--bd);border-radius:100px;font-size:12.5px;font-weight:600;color:var(--txm);cursor:pointer;transition:var(--tr);background:var(--bgc); }
.rp label:hover { border-color:var(--primary);color:var(--primary); }
.rp input:checked + label { background:var(--primary);border-color:var(--primary);color:#fff; }
.ck-g { display:flex;flex-direction:column;gap:7px; }
.ck-row { display:flex;align-items:center;gap:8px;cursor:pointer; }
.ck-row input[type=checkbox] { width:16px;height:16px;accent-color:var(--primary);cursor:pointer; }
.ck-row span { font-size:13px;color:var(--tx); }
input[type=range] { -webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:2px;background:var(--bd);outline:none;cursor:pointer; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--primary);border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.18);cursor:pointer; }
input[type=range]::-moz-range-thumb { width:18px;height:18px;border-radius:50%;background:var(--primary);border:2px solid #fff;cursor:pointer; }
.range-row { display:flex;align-items:center;gap:10px; }
.range-row input[type=range] { flex:1; }
.rv { min-width:36px;text-align:right;font-weight:700;color:var(--primary);font-size:14px; }
.rb { display:none;margin-top:20px;background:var(--bgd);border-radius:var(--rl);padding:22px;border:1px solid rgba(255,255,255,.06); }
.rb.on { display:block;animation:fade-in .3s ease; }
@keyframes fade-in { from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)} }
.rb-title { font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:rgba(255,255,255,.4);margin-bottom:14px; }
.rb-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px; }
.rb-item { background:rgba(255,255,255,.05);border-radius:var(--r);padding:12px; }
.rb-val { font-size:22px;font-weight:900;color:var(--sand);margin-bottom:2px; }
.rb-key { font-size:10.5px;color:rgba(255,255,255,.45);text-transform:uppercase;letter-spacing:.07em; }
.rb-note { font-size:12px;color:rgba(255,255,255,.78);line-height:1.65;margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.08); }
.rb-note strong { color:rgba(255,255,255,.95); }
.pb-wrap { margin:14px 0; }
.pb-label { display:flex;justify-content:space-between;font-size:12px;font-weight:700;color:rgba(255,255,255,.6);margin-bottom:6px; }
.pb { height:8px;background:rgba(255,255,255,.1);border-radius:100px;overflow:hidden; }
.pb-fill { height:100%;border-radius:100px;background:linear-gradient(90deg,var(--primary) 0%,var(--sand) 100%);transition:width .6s cubic-bezier(.4,0,.2,1); }
.calc-div { border:none;border-top:1px solid var(--bd);margin:20px 0; }
.cs { margin-bottom:20px; }
.cs-title { font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--txm);margin-bottom:12px;padding-bottom:6px;border-bottom:1px solid var(--bd); }

/* ═══════════════════════════════════════
   10. HOMEPAGE
═══════════════════════════════════════ */
/* Hero */
.hp-hero {
  background:linear-gradient(135deg, #1A1A18 0%, #2A2A28 50%, #1A1A18 100%);
  padding:64px 0 56px;
  position:relative;overflow:hidden;
}
.hp-hero::before {
  content:'';position:absolute;top:-20%;right:-5%;
  width:600px;height:600px;
  background:radial-gradient(circle,rgba(204,120,92,.2) 0%,transparent 65%);
  pointer-events:none;
}
.hp-hero::after {
  content:'';position:absolute;bottom:-10%;left:-10%;
  width:400px;height:400px;
  background:radial-gradient(circle,rgba(235,219,188,.08) 0%,transparent 65%);
  pointer-events:none;
}
.hp-hero-in { max-width:1240px;margin:0 auto;padding:0 20px;position:relative;z-index:1; }
.hp-hero-eyebrow { display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);padding:5px 14px;border-radius:100px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-bottom:20px; }
.hp-hero h1 { color:#fff;margin-bottom:16px;max-width:720px; }
.hp-hero h1 em { font-style:normal;color:var(--sand); }
.hp-hero-sub { font-size:16px;color:rgba(255,255,255,.6);max-width:580px;line-height:1.7;margin-bottom:32px; }
.hp-search-bar {
  display:flex;align-items:center;gap:0;
  background:#fff;border-radius:var(--rl);
  box-shadow:0 8px 32px rgba(0,0,0,.2);
  max-width:560px;overflow:hidden;
  border:2px solid rgba(255,255,255,.1);
}
.hp-search-bar input { flex:1;padding:16px 20px;border:none;outline:none;font-size:15px;color:var(--tx);background:transparent; }
.hp-search-bar input::placeholder { color:var(--txl); }
.hp-search-bar button { padding:12px 24px;background:var(--primary);border:none;cursor:pointer;font-size:14px;font-weight:700;color:#fff;transition:var(--tr);flex-shrink:0; }
.hp-search-bar button:hover { background:var(--pd); }
.hp-search-results { position:absolute;top:calc(100% + 4px);left:0;right:0;background:#fff;border-radius:var(--rl);box-shadow:var(--sh2);max-height:320px;overflow-y:auto;z-index:100;display:none; }
.hp-search-results.show { display:block; }
.hp-search-item { display:flex;align-items:center;gap:10px;padding:10px 16px;cursor:pointer;transition:var(--tr); }
.hp-search-item:hover { background:var(--bgl); }
.hp-search-item span:first-child { font-size:18px; }
.hp-search-item span:last-child { font-size:13px;font-weight:600;color:var(--tx); }
.hp-hero-badges { display:flex;gap:10px;margin-top:20px;flex-wrap:wrap; }
.hp-badge { display:inline-flex;align-items:center;gap:6px;padding:6px 14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:100px;font-size:12px;font-weight:600;color:rgba(255,255,255,.75);text-decoration:none;transition:var(--tr); }
.hp-badge:hover { background:rgba(255,255,255,.15);color:#fff; }
.hp-stats-row { display:flex;gap:32px;margin-top:32px;flex-wrap:wrap; }
.hp-stat { display:flex;align-items:center;gap:8px; }
.hp-stat-val { font-size:20px;font-weight:900;color:var(--sand); }
.hp-stat-key { font-size:11px;color:rgba(255,255,255,.45);text-transform:uppercase;letter-spacing:.07em; }

/* Category pills */
.cat-pills { padding:20px 0;background:var(--bgc);border-bottom:1px solid var(--bd); }
.cat-pills-in { display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:0 20px;max-width:1240px;margin:0 auto; }
.cat-pills-in::-webkit-scrollbar { display:none; }
.cat-pill { display:inline-flex;align-items:center;gap:6px;padding:8px 16px;background:var(--bgl);border:1.5px solid var(--bd);border-radius:100px;font-size:12.5px;font-weight:700;color:var(--txm);white-space:nowrap;text-decoration:none;transition:var(--tr);flex-shrink:0; }
.cat-pill:hover, .cat-pill.active { background:var(--primary);border-color:var(--primary);color:#fff; }

/* Trending/Featured */
.hp-trending { padding:48px 0; }
.trending-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:20px; }
.trending-card {
  background:var(--bgc);border:1.5px solid var(--bd);border-radius:var(--rl);
  padding:20px;transition:var(--tr);text-decoration:none;display:block;
  position:relative;overflow:hidden;
}
.trending-card::before { content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--primary),var(--sand));opacity:0;transition:var(--tr); }
.trending-card:hover { border-color:var(--primary);box-shadow:var(--sh1);transform:translateY(-3px); }
.trending-card:hover::before { opacity:1; }
.tc-icon { width:48px;height:48px;border-radius:var(--rl);background:rgba(204,120,92,.1);display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:14px; }
.tc-tag { font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.09em;color:var(--primary);margin-bottom:6px; }
.tc-title { font-size:15px;font-weight:800;color:var(--tx);margin-bottom:6px;line-height:1.3; }
.tc-desc { font-size:12.5px;color:var(--txm);line-height:1.5;margin-bottom:14px; }
.tc-cta { display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--primary); }

/* Category section */
.hp-cat-section { padding:40px 0;border-top:1px solid var(--bd); }
.hp-cat-section:first-of-type { border-top:none; }
.cat-section-head { display:flex;align-items:center;justify-content:space-between;margin-bottom:20px; }
.cat-section-head-left { display:flex;align-items:center;gap:12px; }
.cat-section-icon { width:40px;height:40px;background:rgba(204,120,92,.1);border-radius:var(--r);display:flex;align-items:center;justify-content:center;font-size:20px; }
.cat-section-head h2 { font-size:18px;font-weight:900;color:var(--tx); }
.cat-section-head p { font-size:12.5px;color:var(--txm);margin:0; }
.see-all-link { font-size:12.5px;font-weight:700;color:var(--primary);white-space:nowrap; }
.calc-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:12px; }
.calc-mini {
  background:var(--bgc);border:1.5px solid var(--bd);border-radius:var(--rl);
  padding:14px;text-decoration:none;transition:var(--tr);display:block;
}
.calc-mini:hover { border-color:var(--primary);box-shadow:var(--sh0);transform:translateY(-2px); }
.cm-icon { font-size:22px;margin-bottom:8px; }
.cm-title { font-size:13px;font-weight:800;color:var(--tx);margin-bottom:4px;line-height:1.3; }
.cm-desc { font-size:11.5px;color:var(--txm);line-height:1.5; }

/* Info strip */
.hp-strip {
  background:var(--bgd);padding:32px 0;
  display:flex;
}
.hp-strip-in { display:flex;align-items:center;justify-content:center;gap:48px;flex-wrap:wrap; }
.hp-strip-item { display:flex;align-items:center;gap:12px; }
.hp-strip-icon { font-size:24px; }
.hp-strip-text strong { display:block;font-size:18px;font-weight:900;color:#fff; }
.hp-strip-text span { font-size:11.5px;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.07em; }
.hp-divider { width:1px;height:40px;background:rgba(255,255,255,.1); }

/* Newsletter CTA */
.hp-newsletter { background:linear-gradient(135deg,rgba(204,120,92,.08) 0%,rgba(235,219,188,.12) 100%);border:1.5px solid rgba(204,120,92,.2);border-radius:var(--rx);padding:40px;margin:0;text-align:center; }
.hp-newsletter h3 { font-size:22px;margin-bottom:8px; }
.hp-newsletter p { font-size:14px;color:var(--txm);margin-bottom:20px; }
.hp-newsletter-form { display:flex;gap:10px;max-width:400px;margin:0 auto; }
.hp-newsletter-form input { flex:1;padding:12px 16px;border:1.5px solid var(--bd);border-radius:var(--r);outline:none;font-size:14px; }
.hp-newsletter-form input:focus { border-color:var(--primary);box-shadow:0 0 0 3px rgba(204,120,92,.1); }
.hp-newsletter-privacy { font-size:11px;color:var(--txl);margin-top:10px; }

/* ═══════════════════════════════════════
   11. AD ZONES (heatmap-optimized)
═══════════════════════════════════════ */
.ad { display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--txl);background:var(--bgl);border:1.5px dashed var(--bd);border-radius:var(--r); }
.ad-label { position:absolute;top:4px;left:50%;transform:translateX(-50%);font-size:9px;color:var(--txl);white-space:nowrap; }
.ad-wrap { position:relative; }

/* Leaderboard — between hero and content */
.ad-leader { width:100%;min-height:90px;margin:0; }

/* Sidebar top 300×250 — highest RPM */
.ad-300 { width:100%;min-height:250px;margin-bottom:16px; }

/* In-content 300×250 — after result box */
.ad-inline { width:100%;max-width:336px;min-height:280px;margin:20px auto; }

/* Sticky footer (mobile) */
.ad-sticky-bot { display:none;position:fixed;bottom:0;left:0;right:0;min-height:50px;background:#fff;border-top:1px solid var(--bd);z-index:900;justify-content:center;align-items:center; }

/* Between sections */
.ad-section { width:100%;min-height:90px;margin:24px 0; }

/* ═══════════════════════════════════════
   12. COMPONENTS (links, CTA, etc.)
═══════════════════════════════════════ */
.link-cloud { display:flex;flex-wrap:wrap;gap:8px;margin:16px 0; }
.link-pill { display:inline-flex;align-items:center;gap:5px;padding:5px 13px;border:1.5px solid var(--bd);border-radius:100px;font-size:12px;font-weight:600;color:var(--txm);background:var(--bgc);transition:var(--tr); }
.link-pill:hover { border-color:var(--primary);color:var(--primary);background:rgba(204,120,92,.04); }
.cta { background:var(--bgd);border-radius:var(--rl);padding:48px;text-align:center;position:relative;overflow:hidden;margin:40px 0; }
.cta::before { content:'';position:absolute;top:-30%;right:-5%;width:400px;height:400px;background:radial-gradient(circle,rgba(204,120,92,.2) 0%,transparent 65%);pointer-events:none; }
.cta h2 { color:#fff;margin-bottom:10px;position:relative; }
.cta p { color:rgba(255,255,255,.55);font-size:15px;margin-bottom:22px;position:relative;max-width:500px;margin-left:auto;margin-right:auto; }

/* ═══════════════════════════════════════
   13. ARCHIVE / CATEGORY PAGE
═══════════════════════════════════════ */
.arc-hero { background:var(--bgc);border-bottom:1px solid var(--bd);padding:32px 0;margin-bottom:28px; }
.arc-hero-in { display:flex;align-items:center;gap:16px; }
.arc-hero-icon { width:56px;height:56px;border-radius:var(--rl);background:rgba(204,120,92,.1);display:flex;align-items:center;justify-content:center;font-size:28px;flex-shrink:0; }
.arc-hero h1 { font-size:clamp(18px,3vw,28px); }
.arc-hero p { margin:4px 0 0;color:var(--txm);font-size:14px; }
.calc-archive-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin-bottom:32px; }
.calc-arc-card { background:var(--bgc);border:1.5px solid var(--bd);border-radius:var(--rl);padding:16px;text-decoration:none;transition:var(--tr);display:block; }
.calc-arc-card:hover { border-color:var(--primary);box-shadow:var(--sh1);transform:translateY(-2px); }
.cac-icon { font-size:24px;margin-bottom:10px; }
.cac-title { font-size:14px;font-weight:800;color:var(--tx);margin-bottom:5px;line-height:1.3; }
.cac-desc { font-size:12px;color:var(--txm);line-height:1.5; }

/* ═══════════════════════════════════════
   14. UTILITY
═══════════════════════════════════════ */
.mt0{margin-top:0}.mt8{margin-top:8px}.mt16{margin-top:16px}.mt24{margin-top:24px}.mt32{margin-top:32px}
.mb0{margin-bottom:0}.mb8{margin-bottom:8px}.mb16{margin-bottom:16px}.mb24{margin-bottom:24px}
.text-c{text-align:center}.text-p{color:var(--primary)}.text-m{color:var(--txm)}
.d-flex{display:flex}.gap8{gap:8px}.gap12{gap:12px}.gap16{gap:16px}
.flex-wrap{flex-wrap:wrap}.align-c{align-items:center}
.hide{display:none!important}.show{display:block!important}

/* ═══════════════════════════════════════
   15. RESPONSIVE
═══════════════════════════════════════ */
@media(max-width:1024px){
  .site-body{grid-template-columns:1fr}
  .site-sidebar{width:100%;position:static}
  .sidebar{flex-direction:row;flex-wrap:wrap}
  .sw{flex:1 1 280px}
  .fg2{grid-template-columns:1fr 1fr}
  .mega-grid{grid-template-columns:repeat(3,1fr)}
  .ftr-grid{grid-template-columns:1fr 1fr}
  .ftr-cats{grid-template-columns:repeat(3,1fr)}
  .calc-grid{grid-template-columns:repeat(2,1fr)}
  .trending-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  :root{--header-h:56px;--sidebar-w:100%}
  .hnav,.hcta .btn-sm,.hdr-search{display:none}
  .ham{display:flex}
  .site-body{padding:16px 12px;gap:20px}
  .fg2,.fg3{grid-template-columns:1fr}
  .calc-head{flex-direction:column;gap:10px}
  .calc-body{padding:16px}
  .section{padding:44px 0}
  .rb-grid{grid-template-columns:1fr 1fr}
  .cta{padding:32px 20px}
  .hp-hero{padding:40px 0 36px}
  .hp-stats-row{gap:16px}
  .trending-grid{grid-template-columns:1fr}
  .calc-grid{grid-template-columns:repeat(2,1fr)}
  .ftr-grid{grid-template-columns:1fr}
  .ftr-cats{grid-template-columns:repeat(2,1fr)}
  .mega-grid{grid-template-columns:1fr 1fr}
  .hp-newsletter-form{flex-direction:column}
  .ad-sticky-bot{display:flex}
  .hp-strip-in{gap:24px}
  .hp-divider{display:none}
}
@media(max-width:480px){
  .rb-grid{grid-template-columns:1fr}
  .rp label{font-size:12px;padding:6px 12px}
  .calc-title{font-size:16px}
  .calc-grid{grid-template-columns:1fr 1fr}
  .ftr-cats{grid-template-columns:1fr 1fr}
  .hp-search-bar{border-radius:var(--r)}
}