/*
  Website-wide base styles: color palette, element defaults and typography.
  Design theme: "blueprint lab" - cobalt ink on warm drafting paper, with
  dark blueprint sections, technical-drawing details and a serif + mono type pairing.
  Reusable classes live in "common.css".
*/

:root {
  --color1: #1f3fd1;
  --color2: #162f9e;
  --color3: #0a1440;
  --color4: #4b5474;
  --color5: #ffffff;
  --color6: #f4f2ec;
  --color7: #cdd6f6;
  --color8: #e9ecf8;
  --color9: #0e7a58;
  --color10: #6b7280;
  --color11: #b42318;
  --color12: #8fb0ff;
  --color13: #111a3b;
  --color14: #b8c3ea;
  --color15: #0d1d5c;
  --color16: #ff6b3d;

  --page-background: var(--color6);
  --page-grid-line: color-mix(in srgb, var(--color1) 6%, transparent);
  --page-grid-major-line: color-mix(in srgb, var(--color1) 10%, transparent);
  --page-glow: color-mix(in srgb, var(--color1) 10%, transparent);
  --body-text: var(--color13);
  --heading-text: var(--color3);
  --muted-text: var(--color4);
  --link-text: var(--color1);
  --focus-outline: var(--color1);
  --selection-background: var(--color1);
  --selection-text: var(--color5);

  --scrollbar-track: var(--color6);
  --scrollbar-thumb: color-mix(in srgb, var(--color1) 55%, var(--color6));
  --scrollbar-thumb-hover: var(--color1);

  --eyebrow-text: var(--color1);
  --eyebrow-marker: var(--color16);
  --eyebrow-number-text: var(--color4);
  --highlight-text: var(--color1);
  --highlight-underline: var(--color16);
  --primary-button-background: var(--color1);
  --primary-button-hover-background: var(--color2);
  --primary-button-text: var(--color5);
  --primary-button-shadow: var(--color3);
  --secondary-button-background: var(--color5);
  --secondary-button-text: var(--color3);
  --secondary-button-border: var(--color3);
  --secondary-button-shadow: var(--color7);
  --secondary-button-hover-shadow: var(--color1);
  --light-button-background: var(--color5);
  --light-button-text: var(--color3);
  --light-button-shadow: var(--color16);
  --card-background: var(--color5);
  --card-border: color-mix(in srgb, var(--color1) 22%, transparent);
  --card-shadow: color-mix(in srgb, var(--color1) 12%, transparent);
  --card-corner-mark: var(--color1);
  --icon-badge-background: var(--color8);
  --icon-badge-border: color-mix(in srgb, var(--color1) 35%, transparent);
  --icon-badge-text: var(--color1);
  --included-icon: var(--color9);
  --excluded-icon: var(--color10);
  --note-text: var(--color4);
  --skip-link-background: var(--color3);
  --skip-link-text: var(--color5);

  --blueprint-background: var(--color15);
  --blueprint-grid-line: color-mix(in srgb, var(--color12) 10%, transparent);
  --blueprint-grid-major-line: color-mix(in srgb, var(--color12) 18%, transparent);
  --blueprint-heading-text: var(--color5);
  --blueprint-text: var(--color14);
  --blueprint-eyebrow-text: var(--color12);
  --blueprint-link-text: var(--color5);
  --blueprint-line: color-mix(in srgb, var(--color12) 45%, transparent);

  --header-background: color-mix(in srgb, var(--color6) 88%, transparent);
  --header-border: color-mix(in srgb, var(--color1) 20%, transparent);
  --header-progress: var(--color1);
  --brand-orbit: var(--color1);
  --nav-link-text: var(--color3);
  --nav-link-number: var(--color4);
  --nav-link-hover-text: var(--color1);
  --nav-link-active-marker: var(--color16);
  --menu-button-background: var(--color5);
  --menu-button-border: var(--color3);
  --menu-button-icon: var(--color3);
  --menu-panel-background: var(--color5);
  --menu-panel-border: var(--color3);
  --menu-panel-shadow: var(--color1);

  --footer-background: var(--color3);
  --footer-grid-line: color-mix(in srgb, var(--color12) 7%, transparent);
  --footer-text: var(--color14);
  --footer-heading: var(--color12);
  --footer-brand-text: var(--color5);
  --footer-link-hover: var(--color5);
  --footer-link-marker: var(--color16);
  --footer-divider: color-mix(in srgb, var(--color12) 22%, transparent);
  --footer-wordmark-stroke: color-mix(in srgb, var(--color12) 26%, transparent);

  --cta-background: var(--color1);
  --cta-grid-line: color-mix(in srgb, var(--color5) 9%, transparent);
  --cta-orbit: color-mix(in srgb, var(--color5) 22%, transparent);
  --cta-corner-mark: var(--color5);
  --cta-text: var(--color5);
  --cta-muted-text: color-mix(in srgb, var(--color5) 82%, var(--color1));
  --cta-eyebrow-text: var(--color5);

  --hero-orbit: color-mix(in srgb, var(--color1) 22%, transparent);
  --hero-electron: var(--color16);
  --mockup-background: var(--color15);
  --mockup-grid-line: color-mix(in srgb, var(--color12) 12%, transparent);
  --mockup-shadow: var(--color3);
  --mockup-line: color-mix(in srgb, var(--color12) 55%, transparent);
  --mockup-placeholder: color-mix(in srgb, var(--color12) 22%, transparent);
  --mockup-accent: var(--color16);
  --mockup-dimension: var(--color12);
  --mockup-panel-background: var(--color5);
  --mockup-panel-text: var(--color3);
  --mockup-panel-muted-text: var(--color4);
  --chip-background: var(--color5);
  --chip-border: var(--color3);
  --chip-text: var(--color3);
  --chip-icon: var(--color1);
  --chip-shadow: var(--color16);

  --feature-sheet-background: var(--color5);
  --feature-sheet-border: color-mix(in srgb, var(--color1) 22%, transparent);
  --feature-sheet-shadow: color-mix(in srgb, var(--color1) 12%, transparent);
  --feature-cell-hover-background: var(--color8);
  --feature-number-text: var(--color4);
  --plan-featured-border: var(--color1);
  --plan-featured-shadow: var(--color16);
  --plan-stamp-text: var(--color1);
  --plan-stamp-border: var(--color1);
  --plan-stamp-background: var(--color5);
  --table-header-background: var(--color3);
  --table-header-text: var(--color5);
  --table-featured-header-background: var(--color1);
  --table-row-border: color-mix(in srgb, var(--color1) 14%, transparent);
  --table-featured-column-background: color-mix(in srgb, var(--color1) 5%, transparent);
  --step-number-text: var(--color1);
  --step-number-background: var(--color5);
  --step-number-border: var(--color1);
  --step-active-number-background: var(--color1);
  --step-active-number-text: var(--color5);
  --step-line: color-mix(in srgb, var(--color1) 35%, transparent);
  --faq-item-border: color-mix(in srgb, var(--color1) 16%, transparent);
  --faq-icon: var(--color1);
  --faq-icon-open-background: var(--color1);
  --faq-icon-open-text: var(--color5);
  --list-check-icon: var(--color5);
  --list-check-background: var(--color1);
  --ruler-tick: color-mix(in srgb, var(--color1) 40%, transparent);
  --not-found-number-stroke: var(--color1);

  --input-background: var(--color5);
  --input-border: var(--color3);
  --input-focus-border: var(--color1);
  --input-focus-shadow: var(--color1);
  --input-text: var(--color13);
  --required-marker: var(--color11);
  --form-error-background: color-mix(in srgb, var(--color11) 7%, var(--color5));
  --form-error-border: color-mix(in srgb, var(--color11) 35%, transparent);
  --form-error-text: var(--color11);
  --form-success-background: color-mix(in srgb, var(--color9) 8%, var(--color5));
  --form-success-text: var(--color9);

  --password-toggle-text: var(--color4);
  --password-toggle-hover-text: var(--color1);
  --product-choice-background: var(--color5);
  --product-choice-border: color-mix(in srgb, var(--color1) 22%, transparent);
  --product-choice-selected-border: var(--color1);
  --product-choice-selected-shadow: var(--color1);
  --product-choice-checkbox: var(--color1);
  --offer-card-selected-border: var(--color1);
  --offer-card-selected-shadow: var(--color1);
  --offer-choice-checkbox: var(--color1);
  --offer-choice-divider: color-mix(in srgb, var(--color1) 16%, transparent);
  --offer-link-result-background: color-mix(in srgb, var(--color9) 8%, var(--color5));

  --font-body: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-heading: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", "URW Palladio L", Georgia, serif;
  --font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --radius-large: 10px;
  --radius-medium: 6px;
  --radius-small: 4px;
  --content-width: 1160px;
  --header-height: 76px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-height) + 16px);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* Drafting-paper background: a soft glow (moved by js/main.js), major grid lines every 5 cells, and a fine grid. */
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--body-text);
  background-color: var(--page-background);
  background-image:
    radial-gradient(circle at var(--glow-x, 80%) var(--glow-y, 10%), var(--page-glow), transparent 30rem),
    linear-gradient(var(--page-grid-major-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--page-grid-major-line) 1px, transparent 1px),
    linear-gradient(var(--page-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--page-grid-line) 1px, transparent 1px);
  background-size: auto, 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-attachment: fixed;
  overflow-x: hidden;
}

main {
  flex: 1;
}

::selection {
  background: var(--selection-background);
  color: var(--selection-text);
}

/* Slim scrollbar with a flat ink thumb, matching the squared, technical look of the site.
   The transparent border plus padding-box clip makes the thumb float inside the track. */
::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 3px;
  background: var(--scrollbar-thumb) padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover) padding-box;
}

::-webkit-scrollbar-corner {
  background: var(--scrollbar-track);
}

/* Firefox has no scrollbar pseudo-elements, so it gets a thin solid version instead.
   Scoped to Firefox, because Chrome ignores the styles above once scrollbar-color is set. */
@supports (-moz-appearance: none) {
  html {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  }
}

h1,
h2,
h3,
h4 {
  margin: 0 0 0.75rem;
  color: var(--heading-text);
  line-height: 1.12;
  text-wrap: balance;
}

/* Large headings use the editorial serif; small headings stay in the sans for quick scanning. */
h1,
h2 {
  font-family: var(--font-heading);
  font-weight: 400;
  letter-spacing: -0.02em;
}

h1 {
  font-size: clamp(2.5rem, 7vw, 4.4rem);
  line-height: 1.04;
}

h2 {
  font-size: clamp(1.9rem, 4.6vw, 2.9rem);
}

h3 {
  font-family: var(--font-body);
  font-size: 1.15rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}

p {
  margin: 0 0 1rem;
  text-wrap: pretty;
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--link-text);
  text-underline-offset: 3px;
}

img,
svg {
  display: block;
  max-width: 100%;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

strong {
  font-weight: 650;
  color: var(--heading-text);
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--focus-outline);
  outline-offset: 3px;
  border-radius: 2px;
}