/* Shared chrome + typography for pages added after the original hand-built set
   (guides, downloads, articles). The older pages carry their own inline <style>
   block; anything new pulls from here so the nav, footer, and article styling
   only exist in one place. Tokens match index.html. */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
:root{
  --blue:#2563EB;--blue-mid:rgba(37,99,235,.1);--blue-soft:rgba(37,99,235,.05);
  --blue-border:rgba(37,99,235,.2);--black:#1d1d1f;--gray:#6e6e73;--gray2:#86868b;
  --light:#f5f5f7;--white:#fff;--border:#e5e5e7;--f:'Inter',system-ui,sans-serif;
}
html{scroll-behavior:smooth;}
body{font-family:var(--f);background:var(--white);color:var(--black);overflow-x:hidden;}

/* NAV */
nav{position:sticky;top:0;z-index:300;height:56px;padding:0 48px;display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.94);backdrop-filter:blur(20px) saturate(180%);border-bottom:1px solid var(--border);}
.logo{font-size:18px;font-weight:600;letter-spacing:-.03em;color:var(--black);text-decoration:none;}
.logo span{color:var(--blue);}
.nav-links{display:flex;gap:24px;list-style:none;align-items:center;}
.nav-links a{font-size:13px;color:var(--gray);text-decoration:none;transition:color .15s;}
.nav-links a:hover{color:var(--black);}
.nav-links a.active{color:var(--blue);font-weight:500;}
.nav-btn{background:var(--blue);color:#fff!important;padding:8px 18px;border-radius:8px;font-weight:500!important;font-size:13px;}
.nav-btn:hover{opacity:.87;}
.mnav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;background:none;border:none;cursor:pointer;padding:9px;margin-left:auto;}
.mnav-toggle span{display:block;width:22px;height:2px;background:#1d1d1f;border-radius:2px;transition:transform .2s,opacity .2s;}
.mnav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.mnav-toggle.open span:nth-child(2){opacity:0;}
.mnav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.mobile-nav{display:none;position:fixed;top:56px;left:0;right:0;z-index:290;background:#fff;border-bottom:1px solid var(--border);flex-direction:column;padding:8px 20px 18px;box-shadow:0 14px 30px rgba(0,0,0,.08);}
.mobile-nav.open{display:flex;}
.mobile-nav a{padding:14px 4px;font-size:15px;font-weight:500;color:var(--black);border-bottom:1px solid #f0f0f2;text-decoration:none;}
.mobile-nav a.active{color:var(--blue);}
.mobile-nav a:last-child{border-bottom:none;}
.mobile-nav .mobile-nav-cta{margin-top:12px;background:var(--blue);color:#fff;border-radius:8px;text-align:center;padding:13px;border-bottom:none;}
@media(max-width:900px){nav .nav-links{display:none;}.mnav-toggle{display:flex;}nav .nav-btn{white-space:nowrap;}}

/* PAGE HERO */
.page-hero{background:linear-gradient(160deg,#fafffe 0%,#f0f4ff 55%,#f5f0ff 100%);padding:84px 48px 64px;text-align:center;border-bottom:1px solid var(--border);}
.breadcrumb{font-size:12px;color:var(--gray2);margin-bottom:18px;}
.breadcrumb a{color:var(--gray2);text-decoration:none;}
.breadcrumb a:hover{color:var(--blue);}
.page-hero h1{font-size:clamp(34px,5vw,54px);font-weight:600;letter-spacing:-.035em;line-height:1.08;max-width:760px;margin:0 auto 18px;}
.page-hero h1 em{background:linear-gradient(135deg,#2563EB,#7c3aed);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-style:normal;}
.page-hero p{font-size:17px;font-weight:300;color:var(--gray);max-width:580px;margin:0 auto;line-height:1.6;}
.eyebrow{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);margin-bottom:14px;}

/* LAYOUT */
.inner{max-width:1120px;margin:0 auto;padding:72px 48px;}
.narrow{max-width:720px;}

/* ARTICLE */
.article{max-width:720px;margin:0 auto;padding:64px 24px 80px;}
.article-meta{display:flex;gap:14px;align-items:center;flex-wrap:wrap;font-size:12px;color:var(--gray2);margin-bottom:26px;padding-bottom:22px;border-bottom:1px solid var(--border);}
.article-tag{background:var(--blue-mid);color:var(--blue);font-weight:600;padding:4px 11px;border-radius:100px;font-size:11px;}
.article h2{font-size:26px;font-weight:600;letter-spacing:-.025em;margin:44px 0 14px;line-height:1.2;}
.article h3{font-size:18px;font-weight:600;margin:30px 0 10px;}
.article p{font-size:16px;line-height:1.75;color:#38383b;margin-bottom:18px;}
.article ul,.article ol{margin:0 0 20px 22px;}
.article li{font-size:16px;line-height:1.75;color:#38383b;margin-bottom:9px;}
.article strong{font-weight:600;color:var(--black);}
.article a{color:var(--blue);}
.article blockquote{border-left:3px solid var(--blue);background:var(--blue-soft);padding:18px 22px;margin:26px 0;border-radius:0 10px 10px 0;}
.article blockquote p{margin:0;font-size:15px;color:var(--gray);}
.callout{background:var(--light);border:1px solid var(--border);border-radius:12px;padding:22px 24px;margin:28px 0;}
.callout h4{font-size:14px;font-weight:600;margin-bottom:8px;}
.callout p{font-size:14px;margin-bottom:0;color:var(--gray);}
.article-end{margin-top:52px;padding-top:32px;border-top:1px solid var(--border);}

/* BUTTONS */
.btn-primary{background:var(--blue);color:#fff;padding:13px 28px;border-radius:8px;font-size:15px;font-weight:500;text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:opacity .15s,transform .15s;border:none;cursor:pointer;}
.btn-primary:hover{opacity:.88;transform:translateY(-1px);}
.btn-secondary{background:var(--white);color:var(--black);border:1px solid var(--border);padding:13px 26px;border-radius:8px;font-size:15px;font-weight:500;text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:border-color .15s,transform .15s;}
.btn-secondary:hover{border-color:var(--black);transform:translateY(-1px);}

/* FOOTER */
footer{background:var(--white);border-top:1px solid var(--border);padding:28px 48px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;}
.f-logo{font-size:16px;font-weight:600;letter-spacing:-.03em;color:var(--black);text-decoration:none;}
.f-logo span{color:var(--blue);}
.f-links{display:flex;gap:20px;list-style:none;flex-wrap:wrap;}
.f-links a{font-size:12px;color:var(--gray2);text-decoration:none;}
.f-links a:hover{color:var(--black);}
.f-contact{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.f-mail{font-size:12px;font-weight:500;color:var(--blue);text-decoration:none;}
.f-mail:hover{text-decoration:underline;}
.f-reply{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--gray2);}
.f-reply-dot{width:6px;height:6px;border-radius:50%;background:#22c55e;flex-shrink:0;}
.f-copy{flex-basis:100%;text-align:center;font-size:12px;color:#b0b0b5;padding-top:18px;border-top:1px solid var(--border);}

@media(max-width:768px){
  nav{padding:0 20px;}
  .inner{padding:56px 20px;}
  .page-hero{padding:60px 20px 48px;}
  footer{flex-direction:column;text-align:center;padding:24px 20px;}
  .f-links{justify-content:center;}
  .f-contact{justify-content:center;}
}