/* ==========================================================================
   Nolan: shared brand foundation
   Loaded by every page BEFORE its own inline <style>, so page-specific rules
   always win. Contains ONLY what every page shares: design tokens, the reset,
   base typography, the nav, and the footer.

   PALETTE IS LOCKED (see CLAUDE.md). Hard rules:
     - Ink is primary: text, buttons, the logo tile.
     - Cyan is the ONLY accent, and it is a FILL/STROKE colour, never text on
       a light background. Cyan on white measures 2.22:1 and fails WCAG for
       text AND for UI. Anything sitting on cyan must be ink (8.13:1).
     - NO red. NO gradients. NO drop shadows. Hairline 1px borders only.
   ========================================================================== */

:root{
  --ink:#161618;
  --cyan:#00BCF0;
  --grey:#54545A;
  --grey-lt:#9A9AA2;
  --bg:#FAFAF9;
  --bg-alt:#F4F4F2;
  --white:#FFFFFF;
  --display:'Plus Jakarta Sans',sans-serif;
  --body:'Inter',sans-serif;

  /* hairlines: the only separation device; no shadows anywhere */
  --line:#E3E3E0;
  --line-strong:#161618;
  --cyan-line:rgba(0,188,240,0.55);

  /* sharp, flat radii */
  --r-xs:3px;
  --r-sm:4px;
  --r-md:6px;
  --track:.14em;   /* uppercase label tracking */
}

/* BASE */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:var(--body);background:var(--bg);color:var(--ink);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
h1,h2,h3{font-family:var(--display);line-height:1.12;letter-spacing:-0.025em;}
a{color:inherit;text-decoration:none;}
.wrap{max-width:1060px;margin:0 auto;padding:0 24px;}
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-radius:0;}

/* ANNOUNCEMENT BAR */
.announce{background:var(--ink);color:#fff;font-size:13.5px;text-align:center;padding:9px 24px;}
.announce a{display:inline-flex;align-items:center;gap:9px;font-weight:500;}
.announce .pill{font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:var(--track);text-transform:uppercase;background:var(--cyan);color:var(--ink);padding:2px 8px;border-radius:var(--r-xs);}
.announce .arrow{color:var(--cyan);transition:transform .2s;}
.announce a:hover .arrow{transform:translateX(3px);}

/* NAV */
/* white to match the hero image's field (#FFFFFF) and the logo lockup.
   Scoped to `body > nav` on purpose: the legal pages mark their table of
   contents up as <nav class="toc">, and a bare `nav` selector made that
   card sticky too, so it floated over the page while scrolling. */
body > nav{position:sticky;top:0;background:var(--white);z-index:50;border-bottom:1px solid transparent;transition:border-color .2s;}
body > nav.stuck{border-bottom-color:var(--line);}
/* belt and braces: any nested nav stays in the flow */
main nav,.legal nav{position:static;z-index:auto;}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:96px;}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:800;font-size:20px;}
/* nav brand is the full lockup (mark + wordmark) from assets/nolan_logo.svg.
   That file carries ~26% vertical padding inside its own viewBox, so the
   box is taller than the ink; height is set to land the ink near 26px. */
.brand-logo{height:93px;width:auto;display:block;}
/* footer brand still uses the inlined mark + text wordmark */
.kb{width:30px;height:30px;background:var(--ink);border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--cyan);}
.kb svg{height:18px;width:auto;display:block;}
.nav-links{display:flex;gap:34px;align-items:center;font-size:16px;font-weight:500;color:var(--grey);}
.nav-links a:not(.nav-cta){transition:color .15s;}
.nav-links a:not(.nav-cta):hover{color:var(--ink);}
.nav-cta{display:inline-flex;align-items:center;gap:11px;color:var(--white);background:var(--ink);padding:10px 22px;border-radius:var(--r-sm);border:1px solid var(--ink);transition:background .15s,color .15s;}
.nav-cta:hover{background:var(--cyan);border-color:var(--cyan);color:var(--ink)!important;}
.nav-cta .ac-apple{width:26px;height:26px;fill:currentColor;flex-shrink:0;}
.nav-cta .ac-txt{display:flex;flex-direction:column;line-height:1.1;text-align:left;}
.nav-cta .ac-s{font-size:11px;opacity:.75;}
.nav-cta .ac-b{font-family:var(--display);font-weight:700;font-size:18px;}

/* FOOTER */
.site-foot{background:var(--white);border-top:1px solid var(--line);}
.foot-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding:60px 0 44px;}
.foot-brand .brand{margin-bottom:14px;}
.foot-tag{font-size:14.5px;color:var(--grey);max-width:30ch;}
.foot-mail{display:inline-block;margin-top:16px;font-size:14.5px;color:var(--ink);font-weight:500;border-bottom:1px solid var(--cyan);padding-bottom:1px;transition:border-color .15s;}
.foot-mail:hover{border-bottom-width:2px;}
.foot-col h4{font-family:var(--display);font-weight:700;font-size:11.5px;letter-spacing:var(--track);text-transform:uppercase;color:var(--ink);margin-bottom:16px;}
.foot-col ul{list-style:none;}
.foot-col li{margin-bottom:11px;}
.foot-col a{font-size:14.5px;color:var(--grey);transition:color .15s;}
.foot-col a:hover{color:var(--ink);}
.foot-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 0 36px;border-top:1px solid var(--line);font-size:13.5px;color:var(--grey);}
.foot-social{display:flex;gap:8px;}
.foot-social a{width:32px;height:32px;border-radius:var(--r-sm);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s;}
.foot-social a:hover{background:var(--cyan);border-color:var(--cyan);}
.foot-social svg{width:15px;height:15px;fill:var(--grey);transition:fill .15s;}
.foot-social a:hover svg{fill:var(--ink);}

@media(max-width:900px){
  .foot-top{grid-template-columns:1fr 1fr;gap:36px 24px;}
  .foot-brand{grid-column:1/-1;}
}
@media(max-width:820px){
  .nav-links a:not(.nav-cta){display:none;}
  .foot-bottom{flex-direction:column;align-items:flex-start;gap:16px;}
}
@media(max-width:620px){
  /* the 1.5x nav leaves only ~5px between logo and CTA at 390px, so step it
     back down on small screens so they aren't shoulder to shoulder */
  .nav-inner{height:74px;}
  .brand-logo{height:70px;}
  .nav-cta{padding:8px 14px;gap:8px;}
  .nav-cta .ac-apple{width:20px;height:20px;}
  .nav-cta .ac-s{font-size:9px;}
  .nav-cta .ac-b{font-size:14px;}
}
@media(max-width:520px){
  .foot-top{grid-template-columns:1fr;gap:32px;}
  .announce{font-size:12.5px;}
  .announce .pill{display:none;}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;}
  html{scroll-behavior:auto;}
}