/*
    The site's foundation, loaded by every page — the marketing pages, the article shell and
    _AppLayout — before anything page-specific (Pages/Shared/_SiteHead.cshtml links it):

      1. design tokens, the reset and the body
      2. the web fonts (DM Sans, DM Serif Display, self-hosted)
      3. the skip link, the header (_SiteNav.cshtml) and the footer (_SiteFooter.cshtml)

    One file rather than three (it used to be fonts.css + site.css + site-nav.css): every page
    loaded all three, render-blocking, in the same order. The CSP has no 'unsafe-inline' for
    styles (style-src 'self'), so everything shared lives here once and every other
    stylesheet reads these tokens. Change a color here and it changes everywhere.

    Text colors are chosen for WCAG AA (4.5:1) on the background they sit on, including the
    off-white panels, which is why --gray and --blue are a shade darker than the old front
    page's. --gray-light and --teal are for borders, icons and accents, not small text on a
    light background; text there that wants to be teal uses --teal-text.
*/

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --navy:   #0f1a2b;
  --blue:   #0b63e5;
  --blue-hover: #0a56c7;
  --teal:   #00c8b4;
  --teal-text: #0f766e;
  --red-text: #dc2626;
  --white:  #ffffff;
  --off-white: #f7f8fa;
  --gray:   #5f6f86;
  --gray-light: #94a3b8;
  --light-border: #e2e8f0;
  --ink:    #26364d;
  /* Secondary text on the navy sections and the footer. */
  --on-navy: #94a3b8;
  --on-navy-muted: #8a9bb5;
  --font-display: 'DM Serif Display', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --font-mono:    'SF Mono', Menlo, Consolas, monospace;
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  color: var(--navy);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ── Fonts ───────────────────────────────────────────────────────────────────────
   Self-hosted (SIL OFL 1.1, see fonts/OFL.txt): no third party sees a visitor's IP, and
   font-src stays 'self'. Generated from the Google Fonts css2 response for DM Sans and DM
   Serif Display; the unicode-range rules are Google's, so a latin-ext file is fetched only by
   a page that uses one of its characters. DM Sans upright is one variable file covering
   300-700, declared once as a range rather than once per weight. The two upright latin files
   are preloaded by _SiteHead.cshtml: keep those URLs in step with these. */
/* DM Sans, italic, latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/dmsans-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* DM Sans, italic, latin */
@font-face {
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/dmsans-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* DM Sans, normal, latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(../fonts/dmsans-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* DM Sans, normal, latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(../fonts/dmsans-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* DM Serif Display, italic, latin-ext */
@font-face {
  font-family: 'DM Serif Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/dmserifdisplay-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* DM Serif Display, italic, latin */
@font-face {
  font-family: 'DM Serif Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/dmserifdisplay-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* DM Serif Display, normal, latin-ext */
@font-face {
  font-family: 'DM Serif Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/dmserifdisplay-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* DM Serif Display, normal, latin */
@font-face {
  font-family: 'DM Serif Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/dmserifdisplay-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Skip link ───────────────────────────────────────────────────────────────────
   First focusable thing on every page (it opens _SiteNav.cshtml); off-screen until a keyboard
   user tabs to it. Every page's content is <main id="main">. */
.skip-link {
  position: absolute; left: 12px; top: -48px; z-index: 200;
  background: var(--navy); color: #fff;
  padding: 8px 14px; border-radius: 6px;
  font-family: var(--font-body); font-weight: 600; font-size: .875rem; text-decoration: none;
}
.skip-link:focus { top: 12px; color: #fff; outline: 2px solid var(--teal); outline-offset: 2px; }
main:focus { outline: none; }

/* ── Header (_SiteNav.cshtml) ────────────────────────────────────────────────────
   A class, not a bare `nav` selector: a breadcrumb or a table of contents is a <nav> too, and
   would otherwise become a second sticky bar. */
.site-nav {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  height: 64px;
  padding: 0 5vw;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--light-border);
}

.nav-brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-body);
  font-weight: 700; font-size: 1.2rem; letter-spacing: -.02em;
  color: var(--navy); text-decoration: none;
  flex-shrink: 0;
}
/* The mark carries its own dial, so it sits on the page rather than on a tile: the T is a
   hole, and a navy plate behind a navy dial would fill it in. Do not add a background. */
.nav-brand-mark { width: 28px; height: 28px; flex-shrink: 0; }
.nav-brand-mark svg { width: 100%; height: 100%; display: block; }

.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a {
  font-family: var(--font-body);
  font-size: .9rem; font-weight: 500;
  color: var(--gray); text-decoration: none;
  transition: color .15s;
}
.nav-links a:hover { color: var(--navy); }
.nav-links a.is-current { color: var(--navy); font-weight: 600; }

.nav-cta {
  background: var(--blue); color: #fff !important;
  padding: 8px 20px; border-radius: 6px;
  font-weight: 600 !important; font-size: .875rem;
  transition: background .15s, transform .1s;
}
.nav-cta:hover { background: var(--blue-hover); transform: translateY(-1px); }

/* Sign out is a POST form (see _SiteNav.cshtml), so its button is dressed as a link. */
.nav-signout { display: flex; }
.nav-signout button {
  font-family: var(--font-body);
  font-size: .9rem; font-weight: 500;
  color: var(--gray);
  background: none; border: 0; padding: 0;
  cursor: pointer;
  transition: color .15s;
}
.nav-signout button:hover { color: var(--navy); }

.nav-brand:focus-visible,
.nav-links a:focus-visible,
.nav-signout button:focus-visible,
.nav-toggle:focus-visible,
.site-footer a:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Menu button: hidden until the links collapse. 44px, a thumb-sized target. */
.nav-toggle {
  display: none;
  align-items: center; justify-content: center;
  width: 44px; height: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--light-border);
  border-radius: 8px;
  cursor: pointer;
  color: var(--navy);
}
.nav-toggle:hover { background: var(--off-white); }
.nav-toggle svg { width: 20px; height: 20px; display: block; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

/* Mobile: the links collapse into a panel behind the button (site-nav.js) rather than
   disappearing, so every page stays reachable from every other on a phone. */
@media (max-width: 768px) {
  .site-nav { padding: 0 20px; }
  .nav-toggle { display: inline-flex; }

  .nav-links {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 20px 18px;
    background: rgba(255, 255, 255, .98);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--light-border);
    box-shadow: 0 12px 24px -18px rgba(15, 26, 43, .5);
  }
  /* [hidden] alone loses to `display: flex` above. */
  .nav-links[hidden] { display: none; }

  .nav-links a,
  .nav-signout button {
    padding: 13px 2px;
    font-size: 1rem;
    border-bottom: 1px solid var(--light-border);
  }
  .nav-links > :last-child,
  .nav-links > :last-child button { border-bottom: none; }

  .nav-signout button { width: 100%; text-align: left; }

  .nav-cta {
    margin-top: 14px;
    padding: 13px 20px;
    text-align: center;
    border-radius: 8px;
  }
  .nav-cta:hover { transform: none; }
}

/* ── Footer (_SiteFooter.cshtml) ─────────────────────────────────────────────────
   One footer on every page. There used to be four (navy on the homepage, navy and centered on
   pricing, grey on white in the articles and the app) with four link lists and two different
   copyright holders. This is the old homepage's bar: full width, brand at the left edge,
   copyright at the right, links and copyright in a quiet slate. That bar's #4a6080 was 2.7:1
   on navy; --footer-quiet is the same hue lightened just past WCAG AA's 4.5:1. */
.site-footer {
  --footer-quiet: #7085a5;
  background: var(--navy);
  padding: 32px 5vw;
  font-family: var(--font-body);
  line-height: 1.5;
}
.site-footer-inner {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px 28px;
}
.site-footer-brand { font-weight: 700; font-size: .95rem; color: #fff; text-decoration: none; }
.site-footer-links { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.site-footer-links a { font-size: .8rem; color: var(--footer-quiet); text-decoration: none; transition: color .15s; }
.site-footer-links a:hover { color: var(--on-navy); }
.site-footer-copy { font-size: .8rem; color: var(--footer-quiet); margin: 0; }
.site-footer a:focus-visible { outline-color: var(--teal); }

@media (max-width: 768px) {
  .site-footer-inner { flex-direction: column; align-items: flex-start; }
  /* Tap targets: a row of 13px links is too tight for a thumb. */
  .site-footer-links a { display: inline-block; padding: 6px 0; font-size: .9rem; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-cta { transition: none; }
  .nav-cta:hover { transform: none; }
}