/* Shared by the pages that sit beside the organization site: About and the
   blog. The bar and the footer match the organization page, so moving from
   it to one of these does not feel like leaving for another product. */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --blue:#1a56db;--blue-dark:#1240a8;--navy:#0d2e7a;--blue-light:#e8f0fe;
  --red:#dc2626;--green:#16a34a;--amber:#c2410c;
  --bg:#fff;--bg2:#f8fafc;--text:#1e293b;--text2:#475569;--text3:#94a3b8;--line:#e2e8f0;
  --ease:cubic-bezier(.16,1,.3,1);
}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--text);background:var(--bg);
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
h1,h2,h3,h4{font-family:'Sora',sans-serif}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:0 1.5rem}
.skip{position:absolute;left:-999px;top:8px;background:#fff;color:var(--navy);padding:8px 14px;border-radius:8px;z-index:200}
.skip:focus{left:8px}

/* ---- bar ---- */
.site-nav{background:var(--navy);position:sticky;top:0;z-index:100;box-shadow:0 2px 12px rgba(0,0,0,.15)}
.site-nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;height:64px}
.logo{color:#fff;font-family:'Sora',sans-serif;font-size:1.1rem;font-weight:800;letter-spacing:-.5px;text-decoration:none;white-space:nowrap}
.logo em{color:#f87171;font-style:normal}
.nav-links{list-style:none;display:flex;gap:1.6rem}
.nav-links a{color:rgba(255,255,255,.8);text-decoration:none;font-size:.84rem;white-space:nowrap;transition:color .2s}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:#fff}
.nav-links a[aria-current="page"]{box-shadow:inset 0 -2px 0 #f87171;padding-bottom:3px}
.nav-right{display:flex;align-items:center;gap:10px}
.nav-signin{color:rgba(255,255,255,.85);text-decoration:none;font-size:.84rem;font-weight:600;padding:8px 6px}
.nav-signin:hover{color:#fff}
.nav-cta{background:var(--red);color:#fff;text-decoration:none;font-size:.84rem;font-weight:700;padding:9px 16px;border-radius:9px;
  white-space:nowrap;box-shadow:0 1px 2px rgba(0,0,0,.22);transition:background .18s,transform .12s}
.nav-cta:hover{background:#b91c1c}
.nav-cta:active{transform:scale(.97)}
.nav-menu{display:none;position:relative}
.nav-menu summary{list-style:none;cursor:pointer;color:#fff;display:flex;align-items:center;padding:8px;border-radius:8px}
.nav-menu summary::-webkit-details-marker{display:none}
.nav-menu[open] summary{background:rgba(255,255,255,.12)}
.nav-menu-panel{position:absolute;right:0;top:calc(100% + 10px);background:#fff;border-radius:14px;min-width:210px;padding:8px;
  box-shadow:0 18px 50px rgba(13,46,122,.28);border:1px solid var(--line)}
.nav-menu-panel a{display:block;padding:10px 12px;border-radius:9px;color:var(--text);text-decoration:none;font-size:.9rem;font-weight:500}
.nav-menu-panel a:hover{background:var(--bg2);color:var(--blue)}
@media(max-width:860px){.nav-links,.nav-signin{display:none}.nav-menu{display:block}}
@media(max-width:380px){.nav-cta{padding:8px 12px;font-size:.8rem}}

/* the footer is the organization page's own: css/footer.css */

/* ---- shared bits ---- */
.eyebrow{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--blue)}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--blue);color:#fff;text-decoration:none;border:none;cursor:pointer;
  padding:13px 24px;border-radius:12px;font:700 .92rem 'Sora',sans-serif;transition:background .2s,transform .12s,box-shadow .2s}
.btn:hover{background:var(--blue-dark)}
.btn:active{transform:scale(.97)}
.btn-ghost{background:transparent;color:var(--blue);box-shadow:inset 0 0 0 1.5px var(--blue)}
.btn-ghost:hover{background:var(--blue);color:#fff}
.btn-light{background:#fff;color:var(--navy)}
.btn-light:hover{background:var(--blue-light)}
.btn-line{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.45)}
.btn-line:hover{background:rgba(255,255,255,.12)}
/* sections settle in as the page is read; without script they are simply shown */
.js .rv{opacity:0;transform:translateY(16px)}
.js .rv.seen{opacity:1;transform:none;transition:opacity .55s ease,transform .6s var(--ease)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.js .rv{opacity:1;transform:none}.js .rv.seen{transition:none}}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.site-nav :focus-visible{outline-color:#fff}

/* space between the last section and the footer */
.org-foot{margin-top:5rem}