/* Typography (pulls Inter like your homepage) */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap");

:root{
  --blue:#0074e4;
  --blue-d:#005bb5;
  --bg:#f7f7f8;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --border:#e5e7eb;
  --shadow:0 14px 40px rgba(2,6,23,.10);
  --radius:16px;
  --max:1080px;
}

/* Base */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  color:var(--text);
  background: radial-gradient(1200px 600px at 20% -10%, #e0f2fe 0%, transparent 60%), var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.container{ max-width:var(--max); margin:40px auto; padding:0 20px; }

/* Header */
.site-header{
  background:transparent;
  position:sticky; top:0; backdrop-filter:saturate(1.1) blur(6px);
}
.site-header .inner{
  max-width:var(--max); margin:0 auto; padding:12px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.brand{ font-weight:800; letter-spacing:.2px; text-decoration:none; color:var(--text); }
.nav{ display:flex; gap:12px; align-items:center; }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; border-radius:12px; border:1px solid transparent;
  font-weight:700; text-decoration:none; cursor:pointer; transition:.2s ease;
}
.btn-primary{ background:var(--blue); color:#fff; box-shadow:0 10px 24px rgba(0,116,228,.18); }
.btn-primary:hover{ background:var(--blue-d); transform:translateY(-1px); }
.btn-secondary{ background:#e0f2fe; color:var(--blue); border-color:#e0f2fe; }
.pill{ display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border:1px solid var(--border); border-radius:10px; background:#fff; color:var(--text); text-decoration:none; font-weight:600; }

/* Cards / grid */
.card{
  background:#fff; border:1px solid var(--border); border-radius:14px; padding:16px;
  box-shadow:0 6px 18px rgba(15,23,42,.06);
}
.grid{ display:grid; gap:16px; grid-template-columns:repeat(3,1fr); }
@media (max-width: 880px){ .grid{ grid-template-columns:1fr } }
.card a{ text-decoration:none; color:inherit; }

/* Typography helpers */
h1{ font-size:32px; margin:0 0 8px; }
h2{ font-size:22px; margin:20px 0 10px; font-weight:800; }
.intro, .lead{ color:#334155; margin:0 0 12px; line-height:1.6; }
.meta{ color:var(--muted); font-size:14px; }
.section-title{ font-size:22px; margin:0 0 10px; font-weight:800; }
.spacer{ height:28px; }

/* Guide page blocks */
.guide-hero{ margin-top:18px; }
.guide-cta{
  margin:22px 0 0;
  padding:16px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.guide-cta .text{ font-weight:600; }
.cta{ font-weight:600; }
.cta a{ color:var(--blue); text-decoration:none; }
.cta a:hover{ text-decoration:underline; }

/* Footer (simple) */
.site-footer{ margin:40px 0 24px; color:var(--muted); text-align:center; font-size:14px; }

.site-header a:hover { opacity:.9; }
nav[aria-label="Breadcrumb"] a { border-bottom:1px solid transparent; }
nav[aria-label="Breadcrumb"] a:hover { border-bottom-color: currentColor; }