:root{
  --brand-blue:#1e6fd9;
  --brand-blue-2:#2563eb;
  --brand-ink:#0f172a;
  --brand-green:#22c55e;
  --brand-orange:#f59e0b;
  --brand-red:#ef4444;
  --brand-purple:#8b5cf6;
}

:root{
  --blue: var(--brand-blue); --green:#22C55E;
  --ink:#0F172A; --text:#475569;
  --bg:#F1F5F9; --card:#FFFFFF;
  --border:rgba(15,23,42,.10);
  --shadow:0 8px 24px rgba(15,23,42,.08);
  --r:12px; --r2:16px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background:linear-gradient(180deg,#fff 0%, var(--bg) 100%);
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(1120px, calc(100% - 32px)); margin:0 auto;}

.topbar{
  position:sticky; top:0; z-index:10;
  backdrop-filter:saturate(180%) blur(10px);
  background:rgba(255,255,255,.75);
  border-bottom:1px solid var(--border);
}
.topbar-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0; gap:14px;
}
.brand{
  display:flex; align-items:center; gap:12px;
}
.logo{
  height:44px;
  width:auto;
  overflow:visible;
  border-radius:12px;
}


.brand strong{font-size:16px; letter-spacing:-.02em;}
.brand span{display:block; font-size:12px; color:var(--text); margin-top:2px;}
.nav{display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end;}
.pill{
  padding:8px 10px; border:1px solid var(--border); border-radius:999px;
  background:#fff; color:var(--text); font-size:13px; font-weight:600;
}
.pill.active{border-color:rgba(37,99,235,.35); color:var(--ink); box-shadow:0 6px 18px rgba(37,99,235,.10);}

.breadcrumbs{padding:18px 0 6px; color:var(--text); font-size:13px;}
.breadcrumbs a{color:var(--blue); font-weight:700;}

h1{margin:6px 0 10px; font-size:34px; letter-spacing:-.03em;}
.sub{margin:0 0 16px; color:var(--text); font-size:15px; line-height:1.6; max-width:75ch;}

.hero{
  padding:26px 0 10px;
}
.hero-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--r2);
  box-shadow:var(--shadow);
  padding:18px;
}
.hero-grid{
  display:grid; grid-template-columns: 1.25fr .75fr;
  gap:12px; align-items:stretch;
}
@media (max-width: 920px){ .hero-grid{grid-template-columns:1fr;} }
.hero-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px;}
.btn{
  border:1px solid transparent;
  border-radius:12px;
  padding:10px 12px;
  font-weight:800;
  font-size:14px;
  cursor:pointer;
  transition: transform .08s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
  display:inline-flex; align-items:center; gap:10px;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--blue); color:#fff; box-shadow:0 10px 24px rgba(37,99,235,.22);}
.btn-secondary{background:#fff; color:var(--blue); border-color:rgba(37,99,235,.25);}
.btn-success{background:rgba(34,197,94,.12); color:#0B3B1F; border-color:rgba(34,197,94,.28); cursor:default;}

.panel{
  background:#fff; border:1px solid var(--border);
  border-radius:var(--r2); box-shadow:var(--shadow);
  padding:14px;
}
.section{margin-top:18px;}
.section h2{margin:0 0 10px; font-size:18px; letter-spacing:-.02em;}

.field{
  background:#fff; border:1px solid var(--border);
  border-radius:14px; padding:10px 12px;
  display:flex; align-items:center; gap:10px;
}
.field input{
  width:100%; border:none; outline:none;
  font-size:14px; color:var(--ink);
}

.brand-grid{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap:10px;
}
@media (max-width: 1100px){ .brand-grid{grid-template-columns:repeat(5,1fr);} }
@media (max-width: 980px){ .brand-grid{grid-template-columns:repeat(4,1fr);} }
@media (max-width: 720px){ .brand-grid{grid-template-columns:repeat(3,1fr);} }
@media (max-width: 460px){ .brand-grid{grid-template-columns:repeat(2,1fr);} }

.brand-tile{
  border:1px solid var(--border);
  border-radius:16px;
  background:#fff;
  padding:12px;
  display:flex; flex-direction:column; gap:10px;
  align-items:center;
  box-shadow: 0 10px 26px rgba(15,23,42,.06);
  transition: transform .10s ease, box-shadow .12s ease, border-color .12s ease;
}
.brand-tile:hover{transform:translateY(-1px); box-shadow:0 14px 30px rgba(15,23,42,.10); border-color:rgba(15,23,42,.16);}
.brand-logo-wrap{
  width:100%;
  aspect-ratio: 1.9 / 1;
  border-radius:14px;
  border:1px solid var(--border);
  background: linear-gradient(135deg, rgba(37,99,235,.08), rgba(34,197,94,.06));
  display:grid; place-items:center;
  overflow:hidden;
}
.brand-logo-wrap img{
  width:72%;
  height:72%;
  object-fit:contain;
  filter: saturate(1.05);
}
.brand-name{
  font-weight:900; font-size:13px;
  text-align:center;
  max-width: 100%;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.brand-tag{font-size:12px; font-weight:800; color:var(--text);}

.range-nav{
  display:flex; flex-wrap:wrap; gap:10px;
}
.range-btn{
  border:1px solid var(--border);
  background:#fff;
  border-radius:999px;
  padding:8px 12px;
  font-size:13px;
  font-weight:800;
  color:var(--ink);
  cursor:pointer;
}
.range-btn.active{border-color:rgba(37,99,235,.45); background:rgba(37,99,235,.10);}

footer{padding:26px 0 36px; color:var(--text); font-size:13px;}
.small{font-size:12px; color:var(--text); line-height:1.6}

/* Brand page */
.brand-hero{
  display:flex; gap:14px; align-items:center; flex-wrap:wrap;
}
.brand-hero-logo{
  width:96px; height:96px; border-radius:20px;
  border:1px solid var(--border);
  background:#fff;
  box-shadow: var(--shadow);
  padding:10px;
  display:grid; place-items:center;
}
.brand-hero-logo img{width:100%; height:100%; object-fit:contain;}
.kv{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.kvi{
  border:1px solid var(--border);
  border-radius:14px;
  padding:10px;
  background:rgba(241,245,249,.55);
}
.kvi .k{margin:0 0 6px; font-size:12px; color:var(--text); font-weight:900;}
.kvi .v{margin:0; font-size:14px; font-weight:900;}
/* Site footer */
.site-footer{
  margin-top:40px;
  padding:32px 0 40px;
  background:#fff;
  border-top:1px solid var(--border);
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.2fr 1fr 1.4fr;
  gap:24px;
}
@media (max-width: 900px){
  .footer-grid{ grid-template-columns: 1fr; }
}
.footer-col h4{
  margin:0 0 10px;
  font-size:14px;
  font-weight:900;
  letter-spacing:-0.01em;
}
.footer-col ul{
  list-style:none;
  margin:0;
  padding:0;
}
.footer-col li{ margin-bottom:8px; }
.footer-col a{
  font-size:13px;
  font-weight:600;
  color:var(--text);
}
.footer-col a:hover{ color:var(--blue); }
.footer-note{
  font-size:13px;
  color:var(--text);
  line-height:1.6;
}
.footer-note p{ margin:0 0 10px; }
.footer-note .copyright{
  font-weight:700;
  color:var(--ink);
}
.affiliate-note{
  font-size:12px;
  color:var(--text);
  font-weight:600;
}
.affiliate-note a{
  color:var(--blue);
  font-weight:800;
}

/* Cookie consent banner (UK/EU compliant) */
.cb-consent-backdrop{
  position:fixed; inset:0;
  background: rgba(15,23,42,.35);
  display:none;
  z-index:9998;
}
.cb-consent{
  position:fixed;
  left:16px; right:16px; bottom:16px;
  max-width: 980px;
  margin:0 auto;
  background:#fff;
  border:1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 18px 60px rgba(15,23,42,.20);
  padding:14px;
  z-index:9999;
  display:none;
}
.cb-consent .row{
  display:flex;
  gap:14px;
  align-items:flex-start;
  justify-content:space-between;
  flex-wrap:wrap;
}
.cb-consent h4{
  margin:0 0 6px;
  font-size:14px;
  font-weight:900;
  letter-spacing:-0.01em;
}
.cb-consent p{
  margin:0;
  font-size:13px;
  color:var(--text);
  line-height:1.55;
  max-width: 78ch;
}
.cb-consent a{ color:var(--blue); font-weight:800; }
.cb-consent .actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
.cb-consent .btn-sm{
  border:1px solid transparent;
  border-radius:12px;
  padding:9px 10px;
  font-weight:900;
  font-size:13px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.cb-consent .btn-accept{ background: var(--blue); color:#fff; box-shadow: 0 10px 24px rgba(37,99,235,.18); }
.cb-consent .btn-reject{ background:#fff; color:var(--ink); border-color: var(--border); }
.cb-consent .btn-manage{ background: rgba(37,99,235,.10); color: var(--blue); border-color: rgba(37,99,235,.22); }

.cb-consent-modal{
  position:fixed;
  left:16px; right:16px;
  top:50%;
  transform: translateY(-50%);
  max-width: 760px;
  margin:0 auto;
  background:#fff;
  border:1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 18px 60px rgba(15,23,42,.25);
  padding:14px;
  z-index:9999;
  display:none;
}
.cb-consent-modal .head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:10px;
}
.cb-consent-modal .close{
  border:1px solid var(--border);
  background:rgba(255,255,255,.9);
  border-radius:12px;
  padding:8px 10px;
  cursor:pointer;
  font-weight:900;
}
.cb-toggle{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:10px;
  border:1px solid var(--border);
  border-radius:14px;
  background: rgba(241,245,249,.55);
  margin-top:10px;
}
.cb-toggle h5{ margin:0 0 4px; font-size:13px; font-weight:900; }
.cb-toggle .desc{ margin:0; font-size:12px; color:var(--text); line-height:1.5; }
.cb-switch{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  font-weight:900;
  color:var(--text);
}
.cb-switch input{ width:18px; height:18px; }
.cb-consent-modal .footer-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
  margin-top:12px;
}

/* CompareBrands cohesive theme */
body{
  background: linear-gradient(180deg, rgba(30,111,217,.06), rgba(34,197,94,.03) 40%, rgba(255,255,255,1) 75%);
}
.topbar{
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(10px);
}
.logo img{
  height:44px;
  width:auto;
  max-width:220px;
  display:block;
}


.brand strong{
  color: var(--brand-ink);
}
.brand strong span{
  color: var(--brand-blue);
}
.pill{
  border-color: rgba(15,23,42,.10);
}
.pill:hover{
  border-color: rgba(30,111,217,.35);
}
.pill.active{
  border-color: rgba(30,111,217,.45);
  background: rgba(30,111,217,.08);
  color: var(--brand-blue);
}
.pill-primary{
  background: var(--brand-blue);
  box-shadow: 0 12px 30px rgba(30,111,217,.18);
}
.pill-primary:hover{
  background: var(--brand-blue-2);
}
.range-btn.active{
  background: var(--brand-blue);
  color: #fff;
}
.hero-card{
  border: 1px solid rgba(15,23,42,.10);
}
.card:hover{
  border-color: rgba(30,111,217,.25);
}
.site-footer{
  background: linear-gradient(180deg, rgba(30,111,217,.06), #fff);
}
.site-footer h4{
  color: var(--brand-blue);
}

/* Creative background mesh */
body{
  background: radial-gradient(1200px 500px at 15% -10%, rgba(30,111,217,.18), transparent 60%),
              radial-gradient(900px 500px at 95% 5%, rgba(34,197,94,.14), transparent 55%),
              radial-gradient(900px 550px at 65% 105%, rgba(245,158,11,.12), transparent 55%),
              linear-gradient(180deg, rgba(255,255,255,1), rgba(248,250,252,1));
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(2px 2px at 20% 30%, rgba(30,111,217,.35) 50%, transparent 55%),
    radial-gradient(2px 2px at 70% 20%, rgba(34,197,94,.28) 50%, transparent 55%),
    radial-gradient(2px 2px at 85% 60%, rgba(245,158,11,.25) 50%, transparent 55%),
    radial-gradient(2px 2px at 35% 80%, rgba(139,92,246,.22) 50%, transparent 55%);
  opacity:.35;
  mix-blend-mode:multiply;
}
.hero-card{
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(10px);
}
.panel{
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(8px);
}

/* v19: stronger brand background + corrected footer typography + tighter hero alignment */
:root{
  --brand-navy:#1e4f9a;
  --brand-blue:#1e6fd9;
  --brand-green:#43b02a;
  --brand-mint:#22c55e;
  --bg-core:#f2f7ff;
  --bg-core-2:#ecfbf3;
  --footer:#0b2a4a;
  --footer-2:#0f3a63;
  --text-on-dark: rgba(255,255,255,.88);
  --text-on-dark-muted: rgba(255,255,255,.72);
}

/* More colourful full-page background (side gutters + diagonals) */
body{
  background:
    linear-gradient(90deg,
      rgba(30,79,154,.22) 0%,
      rgba(30,79,154,.10) 14%,
      rgba(255,255,255,0) 28%,
      rgba(255,255,255,0) 72%,
      rgba(67,176,42,.10) 86%,
      rgba(67,176,42,.18) 100%
    ),
    radial-gradient(900px 520px at 10% 12%, rgba(30,111,217,.34), transparent 62%),
    radial-gradient(900px 520px at 92% 14%, rgba(67,176,42,.30), transparent 62%),
    radial-gradient(980px 620px at 10% 92%, rgba(30,79,154,.20), transparent 64%),
    radial-gradient(980px 620px at 92% 90%, rgba(34,197,94,.18), transparent 64%),
    linear-gradient(180deg, var(--bg-core), var(--bg-core-2));
  background-attachment: fixed;
}
body::before, body::after{ display:none !important; }

/* Keep middle content crisp */
.hero-card, .panel, .card{
  background: rgba(255,255,255,.97);
}

/* Tighter hero layout: align logo, title, subtitle */
.hero{ margin-top: 10px; margin-bottom: 10px; }
.hero-card{ padding: 16px 18px !important; }
.hero-card h1{ margin: 6px 0 6px !important; line-height:1.12; }
.hero-card p.sub{ margin: 8px auto 0 !important; max-width: 72ch; }
.home-hero-wrap{ margin: 0 auto -22px !important; }
img.home-hero-logo{ margin: 0 auto 0 !important; max-width: 520px !important; }
img.about-hero-logo{ margin: 0 auto 0 !important; max-width: 560px !important; }

/* Header logo use wordmark: allow wide */
.logo{ height:44px; width:auto; overflow:visible; border-radius:0; }
.logo img{ height:44px; width:auto; max-width: 260px; }

/* Buttons/tabs consistent */
.pill-primary{ background: var(--brand-blue); }
.pill-primary:hover{ filter: brightness(.98); }
.pill.active{ color: var(--brand-blue); }

/* Footer: fix wrong text colours + spacing */
.site-footer{
  background: linear-gradient(180deg, var(--footer-2), var(--footer));
  color: var(--text-on-dark);
}
.site-footer h4{ color:#fff; }
.site-footer ul li a{ color: var(--text-on-dark); }
.site-footer ul li a:hover{ color:#fff; }
.site-footer .footer-note p{ color: var(--text-on-dark); }
.site-footer .affiliate-note{ color: var(--text-on-dark-muted); }
.site-footer .affiliate-note a{ color: rgba(255,255,255,.88); font-weight: 900; text-decoration: underline; }

.site-footer .affiliate-note a:hover{ color:#ffffff; }

.site-footer .copyright{ color: var(--text-on-dark-muted); }

/* v21 alignment tweaks */
.hero-card{ text-align:center; }
.hero-card img.home-hero-logo,
.hero-card img.about-hero-logo{
  display:block;
  margin-left:auto !important;
  margin-right:auto !important;
}
/* tighter vertical rhythm */
.hero-card h1{ margin-top: 10px !important; }
.hero-card p.sub{ margin-top: 8px !important; }
/* About hero: logo centered but tagline left-aligned within content width like screenshot */
.about-hero p.sub{
  text-align:left;
  margin-left:auto !important;
  margin-right:auto !important;
  max-width: 72ch;
}

/* v22: exact hero alignment fixes */
/* Home hero: logo tight to title */
.home-hero-wrap{ margin: 0 auto -22px !important; }
img.home-hero-logo{ margin: 0 auto 0 !important; }
.hero-card h1{ margin-top: 10px !important; } /* keep */
.hero-card p.sub{ margin-top: 6px !important; }

/* About hero: logo centered, tagline left aligned within same card padding */
.about-hero{ text-align:center; }
.about-hero .sub{
  text-align:left !important;
  width:100%;
  max-width: none !important;
  margin-top: 10px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* v22 footer link override */
.site-footer .affiliate-note a{ color: rgba(255,255,255,.88) !important; text-decoration: underline; }
.site-footer .affiliate-note a:hover{ color:#ffffff !important; }

/* v23 – EXACT hero alignment per reference images */

/* Shared hero card */
.hero-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}

/* Home hero */
.home-hero-wrap{ margin:0 !important; }
img.home-hero-logo{
  margin:0 !important;
  max-width:420px !important;
}
.hero-card h1{
  margin:4px 0 2px !important;
  text-align:center;
}
.hero-card p.sub{
  margin:0 !important;
  text-align:center;
  max-width:64ch;
}

/* About hero */
.about-hero{
  align-items:center;
}
.about-hero img.about-hero-logo{
  margin:0 !important;
  max-width:420px !important;
}
.about-hero p.sub{
  margin-top:6px !important;
  text-align:left !important;
  width:100%;
  max-width:none !important;
}

/* Footer text colour – no green */
.site-footer,
.site-footer a,
.site-footer .affiliate-note,
.site-footer .affiliate-note a{
  color:rgba(255,255,255,.9) !important;
}

/* v24: About hero spacing to match reference image */
.about-hero{
  padding: 18px 18px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap: 10px !important;
}
.about-hero img.about-hero-logo{
  max-width: 520px !important;
}
.about-hero p.sub{
  text-align:center !important;
  margin: 0 !important;
  max-width: 70ch !important;
  width: 100% !important;
}

/* v25: Hero spacing matched to reference (compensate for logo image whitespace) */
.hero-card{ text-align:center; }
.home-hero-wrap{ margin: 0 auto -22px !important; }
.home-hero-logo{
  display:block;
  margin:0 auto -18px !important; /* pull next line up */
  max-width: 520px;
  width:100%;
  height:auto;
}
.hero-card h1{
  margin-top: 6px !important;
  margin-bottom: 6px !important;
}
.hero-card .sub{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  max-width: 66ch;
}

/* About hero: compact card like reference */
.about-hero{
  padding: 18px 18px 20px !important;
}
.about-hero-logo{
  display:block;
  margin:0 auto -14px !important; /* pull tagline up */
  max-width: 560px;
  width:100%;
  height:auto;
}
.about-hero .sub{
  text-align:center !important;
  margin:0 !important;
  max-width: 70ch !important;
}

/* v26: Tight-cropped hero logo + precise spacing to match reference */
.hero-card{ text-align:center; }
.home-hero-logo, .about-hero-logo{
  display:block;
  margin: 0 auto 10px !important;
  width: 100%;
  height: auto;
}
.home-hero-logo{ max-width: 520px !important; }
.about-hero-logo{ max-width: 560px !important; }

/* Home hero spacing */
.hero-card h1{
  margin: 0 0 10px !important;
  line-height: 1.12;
}
.hero-card p.sub{
  margin: 0 auto !important;
  max-width: 66ch;
}

/* About hero spacing */
.about-hero{ padding: 18px 18px 20px !important; }
.about-hero .sub{
  text-align:center !important;
  margin: 0 auto !important;
  max-width: 70ch !important;
}

/* v27: Match reference alignment (Index + About) */


.hero-card.home-hero .home-hero-wrap{ margin: 0 0 14px !important; }
.hero-card.home-hero img.home-hero-logo{
  display:block;
  margin:0 auto !important;
  max-width: 520px !important;
  width:100%;
  height:auto;
}
.hero-card.home-hero h1{
  margin: 0 0 10px !important;
  line-height: 1.08;
}
.hero-card.home-hero p.sub{
  margin: 0 auto 16px !important;
  max-width: 70ch;
}
.hero-card.home-hero .hero-actions{
  margin-top: 0 !important;
}

/* ABOUT hero spacing */
.hero-card.about-hero{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding: 28px 22px 26px !important;
  text-align:center;
}
.hero-card.about-hero img.about-hero-logo{
  display:block;
  margin:0 auto 14px !important;
  max-width: 560px !important;
  width:100%;
  height:auto;
}
.hero-card.about-hero p.sub{
  margin: 0 auto !important;
  max-width: 80ch !important;
  text-align:center !important;
}

/* Ensure footer links are not green */
.site-footer .affiliate-note a{
  color: rgba(255,255,255,.9) !important;
  text-decoration: underline;
}
.site-footer .affiliate-note a:hover{ color:#ffffff !important; }

/* v28: Alignment to match reference screenshots (hero + search card) */


.hero-card.home-hero img.home-hero-logo{
  max-width: 520px !important;
  margin: 0 auto 10px !important;
}
.hero-card.home-hero h1{
  margin: 0 0 10px !important;
}
.hero-card.home-hero p.sub{
  margin: 0 auto 16px !important;
  max-width: 70ch;
}

/* HOME search card: center content like reference */
.hero-card.home-search-card{
  padding: 22px 22px 20px !important;
  border-radius: 22px;
  text-align:center;
}
.home-search-card .quick-search{
  max-width: 380px;
  margin: 0 auto 12px;
}
.home-search-card .qs-title{
  font-weight: 900;
  letter-spacing: -.01em;
  margin-bottom: 4px;
}
.home-search-card .qs-open{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
}
.home-search-card .qs-body{
  max-width: 380px;
  margin: 0 auto;
}
.home-search-card .field{
  margin: 14px auto 12px;
}
.home-search-card .qs-panel{
  box-shadow:none;
  padding:12px;
}
.home-search-card .qs-results-title{
  font-weight: 900;
  margin-bottom: 2px;
}

/* ABOUT hero: bigger like reference */
.hero-card.about-hero{
  padding: 28px 22px 26px !important;
  border-radius: 22px;
}
.hero-card.about-hero img.about-hero-logo{
  max-width: 560px !important;
  margin: 0 auto 14px !important;
}
.hero-card.about-hero p.sub{
  margin: 0 auto !important;
  max-width: 80ch !important;
}

/* About page title sizing like reference */
.page-title{
  margin: 18px 0 14px;
  font-size: 48px;
  letter-spacing: -0.03em;
}

/* v30: Pixel-match spacing to reference screenshots
   - Home: reduce gap between hero logo and H1
   - About: reduce gap between hero logo and tagline
*/


.hero-card.home-hero img.home-hero-logo{ margin: 0 auto 6px !important; }
.hero-card.home-hero h1{ margin-top: 0 !important; }

/* ABOUT hero: tighten logo-to-tagline spacing */
.hero-card.about-hero img.about-hero-logo{ margin: 0 auto 10px !important; }

/* v39: Exact match (Home hero only) — pull H1 closer without overlap */
.hero-card.home-hero .home-hero-wrap{ margin: 0 0 0 !important; }
.hero-card.home-hero img.home-hero-logo{ display:block; margin: 0 auto -18px !important; }
.hero-card.home-hero h1{ margin-top: 0 !important; }





/* HOME hero – tighten wordmark→H1 gap by collapsing transparent whitespace under logo image */
.hero-card.home-hero .home-hero-wrap{ margin-bottom: 0 !important; }
.hero-card.home-hero img.home-hero-logo{ display:block; margin-bottom: -16px !important; }
.hero-card.home-hero h1{ margin-top: 0 !important; }