*{ margin:0; padding:0; box-sizing:border-box; }
body{ font-family:"Inter", ui-sans-serif, system-ui, sans-serif; background:#f8fafc; color:#1e293b; line-height:1.7; border:12px solid #e2e8f0; min-height:100vh; -webkit-font-smoothing:antialiased; }
a{ color:#4f46e5; }
img{ max-width:100%; }

header.site{ background:#fff; border-bottom:1px solid #0f172a; padding:0 1.5rem; height:5rem; display:flex; align-items:center; justify-content:space-between; }
header.site .brand{ display:flex; align-items:center; gap:.5rem; text-decoration:none; color:#0f172a; font-weight:900; font-size:1.4rem; letter-spacing:-0.05em; text-transform:uppercase; }
header.site .brand img{ width:2rem; height:2rem; object-fit:contain; }
header.site nav{ display:flex; gap:1.5rem; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.15em; }
header.site nav a{ color:#64748b; text-decoration:none; }
header.site nav a:hover{ color:#0f172a; }
@media (max-width:640px){ header.site nav{ display:none; } }

.wrap{ max-width:46rem; margin:0 auto; padding:2.5rem 1.5rem 4rem; background:#fff; border-left:1px solid #e2e8f0; border-right:1px solid #e2e8f0; }
.breadcrumb{ font-size:.75rem; color:#94a3b8; text-transform:uppercase; letter-spacing:.1em; margin-bottom:2rem; }
.breadcrumb a{ color:#64748b; text-decoration:none; }
.breadcrumb a:hover{ color:#0f172a; }

.eyebrow{ display:inline-block; font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.25em; color:#4f46e5; margin-bottom:.75rem; }
h1{ font-size:2rem; line-height:1.15; letter-spacing:-0.02em; color:#0f172a; margin-bottom:.75rem; }
.meta{ font-size:.8rem; color:#94a3b8; margin-bottom:2.5rem; }
.lead{ font-size:1.1rem; color:#475569; margin-bottom:2rem; }

article h2{ font-size:1.35rem; letter-spacing:-0.01em; color:#0f172a; margin:2.5rem 0 .9rem; }
article h3{ font-size:1.1rem; color:#0f172a; margin:1.8rem 0 .6rem; }
article p{ color:#475569; margin-bottom:1rem; }
article ul, article ol{ color:#475569; margin:0 0 1.2rem 1.3rem; }
article li{ margin-bottom:.5rem; }
article strong{ color:#334155; }

.cta{ background:#0f172a; color:#fff; border-radius:1rem; padding:2rem; text-align:center; margin:2.5rem 0; }
.cta h2{ color:#fff; margin:0 0 .5rem; }
.cta p{ color:#cbd5e1; margin-bottom:1.25rem; }
.cta a{ display:inline-flex; align-items:center; gap:.5rem; background:#4f46e5; color:#fff; text-decoration:none; font-weight:700; text-transform:uppercase; letter-spacing:.1em; font-size:.8rem; padding:.9rem 1.8rem; border-radius:.5rem; }
.cta a:hover{ background:#4338ca; }

.faq{ margin-top:2.5rem; border-top:1px solid #e2e8f0; }
.faq details{ border-bottom:1px solid #e2e8f0; padding:1.1rem 0; }
.faq summary{ font-weight:700; color:#0f172a; cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:1rem; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; color:#4f46e5; font-size:1.3rem; line-height:1; }
.faq details[open] summary::after{ content:"\2212"; }
.faq details p{ margin-top:.8rem; font-size:.95rem; }

.related{ margin-top:3rem; padding-top:2rem; border-top:1px solid #e2e8f0; }
.related h2{ font-size:1rem; text-transform:uppercase; letter-spacing:.1em; color:#0f172a; margin-bottom:1rem; }
.related a{ display:block; padding:.5rem 0; text-decoration:none; color:#4f46e5; font-weight:600; }
.related a:hover{ text-decoration:underline; }

.cards{ display:grid; grid-template-columns:1fr; gap:1.25rem; margin-top:1rem; }
@media (min-width:640px){ .cards{ grid-template-columns:1fr 1fr; } }
.card{ display:block; border:1px solid #e2e8f0; border-radius:1rem; padding:1.5rem; text-decoration:none; transition:all .2s; background:#fff; }
.card:hover{ transform:translateY(-2px); box-shadow:0 12px 30px rgba(15,23,42,.06); border-color:#c7d2fe; }
.card h2{ font-size:1.05rem; color:#0f172a; margin:0 0 .5rem; }
.card p{ color:#64748b; font-size:.9rem; margin:0; }

footer.site{ text-align:center; padding:2.5rem 1.5rem; font-size:.72rem; color:#94a3b8; text-transform:uppercase; letter-spacing:.1em; }
footer.site nav{ margin-bottom:1rem; }
footer.site nav a{ color:#64748b; text-decoration:none; margin:0 .6rem; font-weight:700; }
footer.site nav a:hover{ color:#0f172a; }