/* Compare hub page. Light styling, site.css does the heavy lifting. */

:root{
  --bg:#FAFBFC;
  --ink:#0C374D;
  --muted:#536B7E;
  --faint:#8BA0B3;
  --line-soft:rgba(12,55,77,.06);
  --teal:#4FA6C0;
  --teal-soft:#E0F0F5;
  --teal-ink:#2B7A92;
}

body{padding-top:80px}

.section{max-width:1180px;margin:0 auto;padding:48px 32px 80px}
.kicker{display:inline-flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-ink);font-weight:700;margin-bottom:14px}

/* ----- HERO ----- */
.hub-hero{padding:48px 32px 24px;max-width:1180px;margin:0 auto}
.hub-hero-inner{max-width:780px}
.hub-breadcrumb{font-size:13px;color:var(--muted);margin-bottom:18px;display:flex;align-items:center;gap:10px}
.hub-breadcrumb a{color:var(--muted);text-decoration:none}
.hub-breadcrumb a:hover{color:var(--teal-ink)}
.hub-breadcrumb span{color:var(--faint)}
.hub-breadcrumb b{color:var(--ink);font-weight:600}
.hub-h1{font-size:clamp(36px,5vw,60px);font-weight:700;letter-spacing:-.025em;line-height:1.05;color:var(--ink);margin:8px 0 18px;text-wrap:balance}
.hub-h1 em{font-style:normal;color:var(--teal)}
.hub-lede{color:var(--muted);font-size:18px;line-height:1.6;max-width:680px}

/* ----- CARD GRID ----- */
.hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:18px;margin-bottom:32px}
.hub-card{display:block;background:#fff;border:1px solid var(--line-soft);border-radius:16px;padding:28px 28px 24px;text-decoration:none;color:inherit;transition:transform .2s,box-shadow .2s,border-color .2s}
.hub-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(12,55,77,.08);border-color:rgba(79,166,192,.3)}
.hub-card-tag{display:inline-block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;background:var(--teal-soft);color:var(--teal-ink);padding:4px 10px;border-radius:999px;margin-bottom:14px}
.hub-card h3{font-size:22px;font-weight:700;letter-spacing:-.015em;color:var(--ink);margin-bottom:12px}
.hub-card h3 span{color:var(--faint);font-weight:500;font-style:italic;margin:0 4px}
.hub-card p{color:var(--muted);font-size:15px;line-height:1.6;margin-bottom:18px}
.hub-card-go{display:inline-block;color:var(--teal-ink);font-weight:600;font-size:14px}

.hub-more{color:var(--muted);font-size:15px;line-height:1.6;max-width:560px}
.hub-more a{color:var(--teal-ink);text-decoration:underline;text-underline-offset:3px}

/* ----- REVEAL ----- */
.reveal{opacity:0;transform:translateY(40px);transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.is-visible{opacity:1;transform:translateY(0)}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

@media (max-width:780px){
  .section{padding:32px 24px 64px}
  .hub-hero{padding:32px 24px 16px}
}