/* Shared chrome for the ARCatalog marketing pages.
 *
 * Each page still carries its own body styles; this file supplies only the
 * pieces that must look identical everywhere — the sticky nav, the header
 * treatment and the footer. Loaded as a separate stylesheet because the CSP
 * allows 'unsafe-inline' for style but not for script, and keeping it external
 * means one edit updates every page instead of four. */

:root{
  --navy:#0A1628;--navy2:#16294A;--blue:#4F8EF7;--blue-dk:#2f6fd0;
  /* Brand blue #4F8EF7 is 3.21:1 on white — below WCAG AA's 4.5:1 for small
     text. This darker shade of the same hue passes at 4.52:1 and is used
     wherever blue carries small text or sits under white text. */
  --blue-a11y:#1669f5;
  --line:#e4eaf2;--muted:#5b6875;
  --shadow-lg:0 1px 2px rgba(10,22,40,.06),0 8px 18px rgba(10,22,40,.07),0 28px 60px rgba(10,22,40,.10);
}

/* Inline links are underlined, not colour-only (WCAG 1.4.1). Nav, footer and
   button links opt out because their shape already identifies them. */
.page-body a:not(.btn):not(.cta){text-decoration:underline;text-underline-offset:2px}

/* --- sticky nav --- */
.site-nav{position:sticky;top:0;z-index:50;background:rgba(10,22,40,.94);
  backdrop-filter:saturate(150%) blur(10px);border-bottom:1px solid rgba(255,255,255,.08)}
.site-nav .navwrap{max-width:1060px;margin:0 auto;padding:0 22px;display:flex;
  align-items:center;justify-content:space-between;height:58px}
.site-nav .logo{color:#fff;font-weight:800;font-size:16px;letter-spacing:.2px;text-decoration:none}
.site-nav .links{display:flex;gap:22px;align-items:center}
.site-nav .links a{color:rgba(255,255,255,.76);font-size:14px;font-weight:500;text-decoration:none}
.site-nav .links a:hover{color:#fff}
.site-nav .navcta{background:var(--blue-a11y);color:#fff!important;padding:9px 16px;
  border-radius:9px;font-weight:700;text-decoration:none}
.site-nav .navcta:hover{background:var(--blue-dk)}
@media(max-width:760px){.site-nav .links a:not(.navcta){display:none}}

/* --- page header --- */
.page-head{background:linear-gradient(150deg,var(--navy) 0%,var(--navy2) 65%,#1d3560 100%);
  color:#fff;padding:52px 0 46px;position:relative;overflow:hidden}
.page-head::after{content:'';position:absolute;inset:auto -10% -70% -10%;height:70%;
  background:radial-gradient(ellipse at center,rgba(79,142,247,.2),transparent 70%);pointer-events:none}
.page-head .eyebrow{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.7px;
  text-transform:uppercase;color:#9cc0ff;background:rgba(79,142,247,.14);
  border:1px solid rgba(79,142,247,.3);padding:5px 13px;border-radius:999px;margin-bottom:16px}

/* --- footer ---
   The child selectors are NOT redundant. Each page carries its own
   `p{color:var(--ink)}` rule, which beats an inherited colour and rendered
   near-black text on the navy footer at 1.3:1 — caught by the accessibility
   gate on three pages at once. Setting the colour on the actual elements is
   what makes it stick. */
.site-foot{background:var(--navy);color:rgba(255,255,255,.82);padding:36px 0;
  text-align:center;font-size:14px}
.site-foot p,.site-foot strong,.site-foot div,.site-foot span{
  color:rgba(255,255,255,.82)}
.site-foot strong{color:#fff}
/* Underlined, not colour-only (WCAG 1.4.1). The email link sits mid-sentence
   in the footer paragraph, so a reader who can't distinguish the blue has no
   other cue that it's a link — the accessibility gate flagged exactly this. */
.site-foot a{color:#9cc0ff;text-decoration:underline;text-underline-offset:2px}
.site-foot a:hover{color:#fff}
.site-foot .fl{margin-top:10px;display:flex;gap:8px;justify-content:center;flex-wrap:wrap}

/* Touch targets stay finger-sized on the devices this is actually read on. */
@media(max-width:760px){
  .site-nav .navcta,.site-foot a{min-height:44px;display:inline-flex;align-items:center}
}