/* ============================================================================
   THE ACTUARY — CHROME · "CONTROL LIMITS"
   ----------------------------------------------------------------------------
   The one copy of everything every page shares: tokens, the base sheet, the
   button family, the masthead and the footer. Loaded FIRST on every page —
   landing.css and site.css carry only their page systems (sheets, bands) and
   may override chrome by cascade order, never by redeclaring it.

   The markup this styles lives in web/partials/{masthead,footer}.html; the
   Askama base template and the design fixture are held to the same rendering
   by scripts/chromecheck.mjs, which also bans these selectors and the :root
   token block from the page sheets. Chrome drifts nowhere or it fails checks.

   Spacing between a page's last section and the footer belongs to the page
   system (site.css gives footer.site a top margin; the landing's closing
   sheet carries its own padding) — chrome defines the components, not their
   surroundings.
   ========================================================================= */

/* ---- fonts (Slack Lato, used only inside the landing's .slack artifact,
        stays in landing.css) ------------------------------------------------ */
@font-face {
  font-family: 'Oswald';
  src: url('/static/fonts/oswald-latin-wght-normal.woff2') format('woff2');
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Public Sans';
  src: url('/static/fonts/public-sans-latin-wght-normal.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/static/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/static/fonts/ibm-plex-mono-latin-600-normal.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ---- tokens: the law ------------------------------------------------------ */
:root {
  color-scheme: light;

  /* stock */
  --bond: #f8f8f5;
  --plate: #fdfdfb;
  --sunk: #efefe9;
  --carbon: #1b1d1c;
  --carbon-press: #0e100f;
  --carbon-2: #575c59;
  --carbon-3: #6d726e;

  /* rules are alpha steps of carbon, never grey hexes */
  --rule: rgba(27, 29, 28, 0.16);
  --rule-strong: rgba(27, 29, 28, 0.38);
  --rule-faint: rgba(27, 29, 28, 0.09);
  --zone: rgba(27, 29, 28, 0.035);
  --zone-2: rgba(27, 29, 28, 0.07);

  /* the instrument speaking — data and semantics, never chrome */
  --evidence: #0072b2;
  --evidence-deep: #005a8e;
  --evidence-wash: #e9f1f7;
  --limit: #a82c1b;
  --limit-wash: #f7eae7;
  --watch: #b87a00;
  --watch-ink: #7a5200;
  --no-data: #d6d2c4;

  /* faces */
  --font-masthead: 'Oswald', 'Arial Narrow', sans-serif;
  --font-form: 'Public Sans', 'Helvetica Neue', sans-serif;
  --font-typed: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* module: 8px */
  --u: 8px;
  --u2: 16px;
  --u3: 24px;
  --u4: 32px;
  --u5: 40px;
  --u6: 48px;
  --u8: 64px;
  --u10: 80px;
  --u12: 96px;

  /* one page width under two historical names */
  --measure: 1160px;
  --page-w: var(--measure);
  --radius: 0px;

  /* motion: micro feedback, one orchestrated load, one easing */
  --dur: 120ms;
  --slow: 640ms;
  --ease: cubic-bezier(0.3, 0.7, 0, 1);
}

/* ---- reset & base --------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
}
html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
body {
  background: var(--bond);
  color: var(--carbon);
  font-family: var(--font-form);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img,
svg,
canvas {
  max-width: 100%;
}
a {
  color: var(--evidence);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color var(--dur) var(--ease);
}
a:hover {
  color: var(--evidence-deep);
}
:focus-visible {
  outline: 2px solid var(--carbon);
  outline-offset: 2px;
}
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.skip {
  position: absolute;
  left: -100vw;
  top: 0;
  background: var(--carbon);
  color: var(--bond);
  padding: 10px 16px;
  font: 600 0.875rem var(--font-form);
  z-index: 60;
}
.skip:focus {
  left: 0;
}

/* ---- buttons: ink blocks and rule frames ---------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: 600 0.9375rem var(--font-form);
  letter-spacing: 0;
  padding: 12px 22px;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  transition:
    background var(--dur) var(--ease),
    color var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}
.btn:active {
  transform: translateY(1px);
}
.btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}
.btn-primary {
  background: var(--carbon);
  color: var(--bond);
}
.btn-primary:hover {
  background: var(--carbon-press);
  color: var(--bond);
}
.btn-ghost {
  background: transparent;
  color: var(--carbon);
  box-shadow: inset 0 0 0 1px var(--carbon);
}
.btn-ghost:hover {
  background: var(--zone);
  color: var(--carbon);
}
.btn-sm {
  padding: 8px 14px;
  font-size: 0.8125rem;
}

/* ---- masthead ------------------------------------------------------------- */
.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bond);
  border-bottom: 1px solid var(--carbon);
}
.masthead-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--u3);
  padding-block: 10px;
  min-height: 56px;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--u3);
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-masthead);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--carbon);
  text-decoration: none;
}
.wordmark .mark,
.mark {
  width: 24px;
  height: 22px;
  flex: none;
}
/* the mark is the thesis: a labeled limit, and the trace that leaves it */
.mark .m-floor {
  stroke: var(--carbon);
  stroke-opacity: 0.55;
  stroke-dasharray: 3 2.6;
}
.mark .m-base {
  stroke: var(--carbon);
  stroke-width: 1.4;
}
.mark .m-trace {
  stroke: var(--evidence);
  stroke-width: 1.7;
}
.masthead nav {
  display: flex;
  align-items: center;
  gap: var(--u3);
}
.masthead nav a {
  white-space: nowrap;
}
.masthead nav a:not(.btn) {
  font: 500 0.875rem var(--font-form);
  color: var(--carbon-2);
  text-decoration: none;
}
.masthead nav a:not(.btn):hover {
  color: var(--carbon);
}
.masthead nav a[aria-current='page'] {
  color: var(--carbon);
  font-weight: 700;
}
.masthead .btn {
  padding: 8px 16px;
  font-size: 0.875rem;
}

/* ---- the narrow-screen index ---------------------------------------------- */
/* Wide rows print their destinations; narrow rows fold them behind one label.
 * The fold is already this site's vocabulary (the pricing questions, the
 * methodology drawers), so the masthead borrows it rather than inventing
 * chrome. Hidden above 40rem, where every link fits inline. */
.navindex {
  display: none;
}
.navindex > summary {
  list-style: none;
  cursor: pointer;
  font: 500 0.8125rem var(--font-masthead);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--carbon);
  padding: 4px 0;
  white-space: nowrap;
}
.navindex > summary::-webkit-details-marker {
  display: none;
}
/* The one printed cue: a rule that turns as the form unfolds. */
.navindex > summary::after {
  content: '';
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-left: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 120ms var(--ease, cubic-bezier(0.3, 0.7, 0, 1));
}
.navindex[open] > summary::after {
  transform: translateY(1px) rotate(-135deg);
}
.navindex > summary:focus-visible {
  outline: 2px solid var(--carbon);
  outline-offset: 2px;
}
.navindex-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  /* the fold sits over the form it covers, inside the masthead's own layer */
  z-index: 1;
  display: flex;
  flex-direction: column;
  background: var(--bond);
  border-bottom: 1px solid var(--carbon);
  padding-inline: var(--u2);
}
.masthead nav .navindex-panel a {
  padding-block: 14px;
  font-size: 0.9375rem;
  border-top: 1px solid rgba(27, 29, 28, 0.14);
}
.masthead nav .navindex-panel a:first-child {
  border-top: 0;
}

/* ---- footer: end of form -------------------------------------------------- */
footer.site {
  border-top: 2px solid var(--carbon);
  padding-block: var(--u6) var(--u4);
}
.foot-in {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--u3);
}
.foot-top {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr));
  gap: var(--u4);
}
.foot-brand .wordmark {
  margin-bottom: 10px;
}
.foot-brand p {
  font-size: 0.875rem;
  color: var(--carbon-2);
  max-width: 34ch;
}
.foot-col h4 {
  font: 600 0.65625rem var(--font-typed);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--carbon-3);
  margin-bottom: 10px;
}
.foot-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 7px;
}
.foot-col a {
  font-size: 0.875rem;
  color: var(--carbon-2);
  text-decoration: none;
}
.foot-col a:hover {
  color: var(--evidence);
  text-decoration: underline;
}
.foot-mark {
  margin-top: var(--u6);
  color: var(--carbon);
  user-select: none;
}
.foot-mark .tickrule {
  display: block;
  width: 100%;
  height: 14px;
}
.foot-word {
  display: block;
  font-family: var(--font-masthead);
  font-weight: 600;
  font-size: clamp(2.75rem, 10vw, 8.25rem);
  line-height: 1.04;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(27, 29, 28, 0.09);
  white-space: nowrap;
  overflow: hidden;
  transition: color 200ms var(--ease);
}
.foot-mark:hover .foot-word {
  color: rgba(27, 29, 28, 0.18);
}
.colophon {
  font-size: 0.8125rem;
  color: var(--carbon-2);
  margin-top: var(--u4);
  max-width: 86ch;
  line-height: 1.7;
}
.copyright {
  /* typed voice inlined: the .num utility lives in the page sheets, and the
     footer must not depend on which one loaded */
  font-family: var(--font-typed);
  font-variant-numeric: tabular-nums;
  font-size: 0.71875rem;
  color: var(--carbon-3);
  margin-top: var(--u2);
}

/* the closing moment: the tick rule draws and the ghost word rises with the
   reader's own scroll — transform/opacity only, still under reduced motion */
@supports (animation-timeline: view()) {
  .foot-mark .tickrule {
    transform-origin: left;
    animation: tickdraw linear both;
    animation-timeline: view();
    animation-range: entry 10% entry 90%;
  }
  .foot-word {
    animation: wordrise linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 100%;
  }
  @keyframes tickdraw {
    from {
      transform: scaleX(0.24);
      opacity: 0;
    }
    to {
      transform: none;
      opacity: 1;
    }
  }
  @keyframes wordrise {
    from {
      transform: translateY(26px);
      opacity: 0.35;
    }
    to {
      transform: none;
      opacity: 1;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .foot-mark .tickrule,
    .foot-word {
      animation: none;
    }
  }
}

/* ---- scroll entrances (reveal.js marks blocks; base state = visible) ------ */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--slow) var(--ease),
    transform var(--slow) var(--ease);
}
.js [data-reveal].in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---- responsive ----------------------------------------------------------- */
@media (max-width: 62rem) {
  .masthead nav {
    gap: var(--u2);
  }
  .foot-top {
    grid-template-columns: 1fr 1fr;
    gap: var(--u4) var(--u3);
  }
}
@media (max-width: 40rem) {
  .masthead-in,
  .foot-in {
    padding-inline: var(--u2);
  }
  /* Below the width that holds four labels the whole index folds: the row
   * keeps the way in, the fold keeps every destination, and nothing is
   * unreachable from the header at any width. */
  .masthead nav a[data-aux],
  .masthead nav a[data-aux2] {
    display: none;
  }
  .navindex {
    display: block;
  }
  .masthead-in,
  .masthead nav {
    gap: var(--u2);
  }
  .masthead .btn {
    padding: 8px 14px;
    font-size: 0.8125rem;
  }
  .foot-top {
    grid-template-columns: 1fr;
  }
  .foot-word {
    letter-spacing: 0.2em;
  }
}
/* below 416px the row cannot hold a label beside the action (measured: it
   needs 415px with fallback-font slack) — brand, index and action stay to the
   320 floor, and Pricing joins the fold rather than leaving the site */
@media (max-width: 26rem) {
  .masthead nav a[data-aux3] {
    display: none;
  }
}

/* motion stops fully under reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}