/* ============================================================================
   SHARED SITE CHROME — identical header + footer on the landing (/) and the
   app (/app). Self-contained (no dependency on page tokens) so the two pages
   are guaranteed to look like ONE product. If you change the chrome, change it
   HERE only. Loaded by both index.html and app.html.
   ========================================================================== */
.wrap{max-width:1140px;margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-9999px;top:0;background:#243a66;color:#fff;padding:10px 14px;z-index:100}
.skip:focus{left:8px;top:8px}

/* ---- header --------------------------------------------------------------- */
.site{position:sticky;top:0;z-index:40;background:#1c2742;color:#f4f6fa;border-bottom:1px solid #0e1426}
.site-in{max-width:1140px;margin:0 auto;padding:10px 20px;display:flex;align-items:center;gap:16px}
.site .logo{display:flex;align-items:center;gap:9px;color:#f4f6fa;font-weight:700;letter-spacing:-.2px;background:none;border:none;cursor:pointer;font-size:16px;font-family:inherit;padding:0;text-decoration:none}
.site .logo:hover{text-decoration:none;opacity:.92}
.site .logo .pip{display:inline-flex;width:28px;height:28px;border-radius:3px;background:#4f74c4;color:#fff;font-weight:800;align-items:center;justify-content:center;font-size:14px}
/* Brand logo (inline SVG, uses currentColor → light on the dark header, dark on
   the light footer; the cyan accent is fixed). One mark for every surface. */
.site .logo svg{height:28px;width:auto;display:block}
.foot .logo svg{height:24px;width:auto;display:block}
.site nav{margin-left:auto;display:flex;align-items:center;gap:6px}
.site nav a,.site nav .navlink{color:#c3cbdb;padding:8px 12px;border-radius:3px;font-size:14px;font-weight:500;background:none;border:none;cursor:pointer;font-family:inherit;text-decoration:none;white-space:nowrap}
.site nav a:hover,.site nav .navlink:hover{color:#fff;background:rgba(255,255,255,.08);text-decoration:none}
.site nav .navlink.active{color:#fff;background:rgba(255,255,255,.12);font-weight:700}
.site nav .navlink-icon{font-size:16px;padding:8px 10px;line-height:1}
.nav-sep{width:1px;height:22px;background:rgba(255,255,255,.18);margin:0 6px;flex:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;cursor:pointer;border:1px solid transparent;border-radius:3px;padding:10px 18px;font-size:14.5px;font-family:inherit;transition:opacity .12s,background .12s;text-decoration:none;white-space:nowrap}
.btn-accent{background:#f1c40f;color:#3a2e00;border-color:#caa400}
.btn-accent:hover{opacity:.92;text-decoration:none}
.btn-ghost{background:transparent;color:#243a66;border-color:#c8ccd4}
.btn-ghost:hover{background:#eef0f4;text-decoration:none}
.btn-lg{padding:13px 24px;font-size:16px}
.nav-toggle{display:none;background:none;border:1px solid #39507f;color:#fff;border-radius:3px;padding:8px 10px;cursor:pointer;font-size:16px;line-height:1}

/* ---- footer --------------------------------------------------------------- */
.foot{padding:40px 0;font-size:13px;color:#5b6472;background:#faf9f5;border-top:1px solid #e4e7ec}
.foot .logo{display:flex;align-items:center;gap:9px;color:#1b2230;font-weight:700;background:none;border:none;cursor:pointer;font-size:16px;font-family:inherit;padding:0;text-decoration:none}
.foot .logo .pip{display:inline-flex;width:26px;height:26px;border-radius:3px;background:#4f74c4;color:#fff;font-weight:800;align-items:center;justify-content:center;font-size:13px}
.foot .cols{display:flex;gap:36px;flex-wrap:wrap;margin-bottom:20px;align-items:center}
.foot a,.foot .linkish{color:#5b6472;background:none;border:none;cursor:pointer;font-family:inherit;font-size:13px;padding:0;text-decoration:none}
.foot a:hover,.foot .linkish:hover{color:#243a66;text-decoration:underline}
.foot .disc{border-top:1px solid #e4e7ec;padding-top:16px;line-height:1.6;max-width:none}
/* fat footer (marketing pages) — links to every guide so Google crawls them all from the homepage */
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:28px;margin-bottom:24px}
.foot-brand p{margin:12px 0 0;font-size:13px;color:#5b6472;max-width:26ch;line-height:1.5}
.foot-col h4{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#8b94a3;margin:0 0 10px;font-weight:700}
.foot-col a{display:block;color:#5b6472;font-size:13.5px;padding:4px 0;text-decoration:none}
.foot-col a:hover{color:#243a66;text-decoration:underline}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}}

@media(max-width:820px){
  .site nav{display:none;position:absolute;top:52px;left:0;right:0;flex-direction:column;background:#1c2742;padding:8px;gap:2px;border-bottom:1px solid #0e1426}
  .site nav.open{display:flex}
  .site nav a,.site nav .navlink{padding:11px 12px;text-align:left}
  .site nav .navlink-icon{width:auto}
  .nav-sep{display:none}
  .site nav .btn{margin-top:4px}
  .nav-toggle{display:inline-block;margin-left:auto}
  .foot .cols{gap:18px}
}