:root {
  color-scheme: light;
  --c-ink: #141a22;
  --c-ink-2: #2c3542;
  --c-muted: #5a6574;
  --c-line: #d5dce6;
  --c-off: #eef2f6;
  --c-white: #ffffff;
  --c-navy: #0d2a45;
  --c-navy-700: #081c2f;
  --c-steel: #1a4a73;
  --c-red: #c41230;
  --c-red-600: #a00e27;
  --c-red-50: #fcecef;
  --c-focus: #e8a317;
  --c-accent: #e8a317;
  --ff-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --ff-sans: "Source Sans 3", "Segoe UI", sans-serif;
  --container: 1180px;
  --gutter: clamp(1rem, 3vw, 1.75rem);
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --shadow-sm: 0 1px 2px rgb(13 42 69 / 0.06);
  --shadow-md: 0 10px 28px rgb(13 42 69 / 0.1);
  --ease: 180ms ease;
  --space-section: clamp(2.5rem, 5vw, 4.5rem);
  /* Half rhythm, used where the blocks on both sides of a join paint the same background. */
  --space-flat-join: clamp(1.25rem, 2.5vw, 2rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
body {
  margin: 0;
  font-family: var(--ff-sans);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  line-height: 1.6;
  color: var(--c-ink);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; height: auto; }
a {
  color: var(--c-steel);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}
a:hover { color: var(--c-red); }
:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 3px;
}
h1, h2, h3, h4 {
  font-family: var(--ff-display);
  line-height: 1.12;
  letter-spacing: 0.01em;
  color: var(--c-navy);
  margin: 0 0 0.55em;
  font-weight: 700;
  text-transform: uppercase;
}
h1 { font-size: clamp(2.1rem, 1.6rem + 2.2vw, 3.4rem); }
h2 { font-size: clamp(1.55rem, 1.3rem + 1.1vw, 2.15rem); }
h3 { font-size: clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem); }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.2em; }

.container {
  width: min(100% - (var(--gutter) * 2), var(--container));
  margin-inline: auto;
}
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 1000;
  padding: 0.75rem 1rem;
  background: var(--c-navy);
  color: #fff;
  font-weight: 700;
  transform: translateY(-120%);
  transition: transform var(--ease);
}
.skip-link:focus { transform: translateY(0); color: #fff; }

.amsoil-dealer-bar {
  background: #000;
  box-shadow: 0 2px 5px #333;
  text-align: center;
  padding: 15px var(--gutter);
}
.amsoil-dealer-bar__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  line-height: 0;
  text-decoration: none;
}
.amsoil-dealer-bar__link:hover,
.amsoil-dealer-bar__link:focus-visible { opacity: 0.92; }
.amsoil-dealer-bar__logo {
  display: block;
  width: 385px;
  max-width: min(100%, 385px);
  height: auto;
  margin-inline: auto;
  background: transparent;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgb(255 255 255 / 0.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--c-line);
  box-shadow: var(--shadow-sm);
}
/* The logo plus nine nav items need more room than the reading-width content
   container, so the header row gets its own wider cap. Small screens still fall
   back to the gutter-aware `min()` in `.container`. */
.site-header .container { --container: 82.5rem; }
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 84px;
  padding-block: 0.75rem;
  position: relative;
}
.site-logo {
  display: inline-flex;
  align-items: center;
  flex: 0 1 auto;
  line-height: 0;
  text-decoration: none;
}
.site-logo img {
  display: block;
  width: auto;
  height: 56px;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
  background: transparent;
}
.site-logo:hover { opacity: 0.92; text-decoration: none; }
@media (max-width: 48em) {
  .site-logo img { height: 46px; }
}
@media (max-width: 35em) {
  .site-logo img { height: 38px; }
}
.primary-nav ul {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.15rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.primary-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.45rem 0.5rem;
  color: var(--c-ink-2);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--r-sm);
}
.primary-nav a:hover,
.primary-nav a[aria-current="page"] {
  color: var(--c-red);
  background: var(--c-red-50);
}
.primary-nav .nav-cta {
  background: var(--c-red);
  color: #fff;
  font-weight: 700;
  margin-inline-start: 0.35rem;
}
.primary-nav .nav-cta:hover {
  background: var(--c-red-600);
  color: #fff;
}
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  background: #fff;
  cursor: pointer;
  padding: 0;
}
.nav-toggle span[aria-hidden="true"],
.nav-toggle span[aria-hidden="true"]::before,
.nav-toggle span[aria-hidden="true"]::after {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--c-navy);
  position: relative;
}
.nav-toggle span[aria-hidden="true"]::before,
.nav-toggle span[aria-hidden="true"]::after {
  content: "";
  position: absolute;
  left: 0;
}
.nav-toggle span[aria-hidden="true"]::before { top: -6px; }
.nav-toggle span[aria-hidden="true"]::after { top: 6px; }

/* The logo plus nine nav items need roughly 1245px of viewport to stay on one
   line. Collapsing at 81em leaves about 50px of slack at the narrowest desktop
   width and 100px at 1366px, so a fallback font cannot push the CTA onto a
   second row. No common screen size falls in the 1281-1296px band this skips. */
@media (max-width: 81em) {
  .nav-toggle { display: inline-flex; }
  .primary-nav {
    display: none;
    position: absolute;
    inset-inline: 0;
    top: 100%;
    background: #fff;
    border-bottom: 1px solid var(--c-line);
    box-shadow: var(--shadow-md);
    padding: 0.75rem var(--gutter) 1rem;
  }
  .primary-nav.is-open { display: block; }
  .primary-nav ul { flex-direction: column; align-items: stretch; }
  .primary-nav .nav-cta { margin-inline-start: 0; justify-content: center; }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.7rem 1.2rem;
  border-radius: var(--r-md);
  border: 2px solid transparent;
  font-family: var(--ff-sans);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--ease), border-color var(--ease), color var(--ease), transform 80ms ease;
}
.btn:active { transform: translateY(1px); }
.btn--primary {
  background: var(--c-red);
  border-color: var(--c-red);
  color: #fff;
}
.btn--primary:hover { background: var(--c-red-600); border-color: var(--c-red-600); color: #fff; }
.btn--secondary {
  background: transparent;
  border-color: #fff;
  color: #fff;
}
.btn--secondary:hover { background: #fff; color: var(--c-navy); }
.page-product .btn--secondary,
.section .btn--secondary {
  border-color: var(--c-navy);
  color: var(--c-navy);
}
.page-product .btn--secondary:hover,
.section .btn--secondary:hover {
  background: var(--c-navy);
  color: #fff;
}

.hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(900px 420px at 85% 15%, rgb(196 18 48 / 0.38), transparent 60%),
    radial-gradient(700px 380px at 0% 100%, rgb(26 74 115 / 0.45), transparent 55%),
    linear-gradient(135deg, #0a2036 0%, #123556 48%, #0d2a45 100%);
  display: grid;
  align-items: center;
  border-block-end: 1px solid rgb(255 255 255 / 0.08);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgb(255 255 255 / 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(180deg, #000 20%, transparent 90%);
  pointer-events: none;
  animation: gridDrift 28s linear infinite;
}
@keyframes gridDrift {
  from { transform: translateY(0); }
  to { transform: translateY(48px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero::after { animation: none; }
}
.hero__inner {
  position: relative;
  z-index: 1;
  padding-block: clamp(1.85rem, 4vw, 3rem);
  max-width: none;
  /* Keeps a long unbreakable brand token from widening the grid track past the viewport. */
  min-width: 0;
}
.hero__eyebrow {
  margin: 0 0 0.5rem;
  font-family: var(--ff-display);
  font-size: clamp(0.95rem, 0.9rem + 0.35vw, 1.2rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--c-accent);
  animation: riseIn 0.7s ease both;
}
.hero__headline {
  margin: 0 0 0.85rem;
  font-family: var(--ff-display);
  /* Sized to always clear the gutters on the narrowest supported viewport. */
  font-size: clamp(2rem, 1.35rem + 3.1vw, 4rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  line-height: 1.02;
  color: #fff;
  text-shadow: 0 10px 40px rgb(0 0 0 / 0.35);
  animation: riseIn 0.7s ease 0.08s both;
}
.hero__lede {
  color: #b8c7d8;
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.2rem);
  margin-bottom: 0.7rem;
  animation: riseIn 0.7s ease 0.16s both;
}
.hero__lede + .hero__lede { animation-delay: 0.2s; }
.hero__lede:last-of-type { margin-bottom: 1.35rem; }
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  animation: riseIn 0.7s ease 0.24s both;
}
@keyframes riseIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.page-intro { padding-block: 1.25rem 0.5rem; }
.page-intro h1 { margin-bottom: 0.4rem; }
.page-intro > p { color: var(--c-muted); }
.page-intro > p:last-child { margin-bottom: 0; }
/* The intro and the section below it are both white, so full section padding reads as a void. */
.page-intro + .section,
.page-hero + .section { padding-block-start: clamp(1.5rem, 3vw, 2.25rem); }

.section { padding-block: var(--space-section); }
/* A margin at either end of a section stacks on top of the section padding, so the join ends up
   wider than the rhythm it was set to. Drop them and let the padding alone decide the gap. */
.section > .container > :first-child { margin-top: 0; }
.section > .container > :last-child { margin-bottom: 0; }
/* Where the blocks on both sides of a join paint the same background, the doubled padding
   reads as a void rather than as breathing room, so those joins run at half rhythm. A change
   of background does the separating on its own and keeps the full measure. */
.section:not(.section--muted, .section--cta, .cta-band):has(+ .section:not(.section--muted, .section--cta, .cta-band)) {
  padding-block-end: var(--space-flat-join);
}
.section:not(.section--muted, .section--cta, .cta-band) + .section:not(.section--muted, .section--cta, .cta-band),
main > .container:not(.page-intro) + .section:not(.section--muted, .section--cta, .cta-band) {
  padding-block-start: var(--space-flat-join);
}
.section--muted { background: var(--c-off); }
.section h2 { margin-bottom: 0.4rem; }
/* The tight h2 margin above assumes a muted intro paragraph follows. A subheading needs its own gap. */
.section h2 + h3 { margin-top: 1.35rem; }
.section > .container > p,
.section-intro {
  color: var(--c-muted);
  margin-bottom: 1.5rem;
}
/* Must follow the muted paragraph rule above: equal specificity, so order decides. */
.section--cta {
  background: linear-gradient(135deg, #0d2a45, #163a5c);
  color: #fff;
}
.section--cta h2 { color: #fff; }
.section--cta > .container > p,
.section--cta p { color: #eef5fc; }
.section--cta strong { color: #fff; }
.section--cta .btn--primary { margin-top: 0.35rem; }

.category-grid,
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: 1.15rem;
}
/* Matches the spacing a muted intro paragraph would provide when the grid follows the heading directly. */
.section h2 + .product-grid { margin-top: 1.5rem; }
.category-card,
.product-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
}
.product-card__link {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  flex: 1;
  padding: 1.15rem;
  text-decoration: none;
  color: inherit;
  min-height: 100%;
}
.product-card:hover,
.category-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: rgb(26 74 115 / 0.35);
}
.category-card {
  gap: 0.55rem;
  padding: 1.15rem;
}
.category-card h3,
.product-card h3 {
  margin: 0;
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--ff-sans);
  font-size: 1.05rem;
  color: var(--c-navy);
}
.category-card h3 a {
  color: var(--c-navy);
  text-decoration: none;
}
.category-card p,
.product-card p {
  color: var(--c-muted);
  font-size: 0.95rem;
  margin: 0;
  flex: 1;
}
.product-card__link > img {
  width: auto;
  max-width: 78%;
  max-height: 160px;
  margin-inline: auto;
  object-fit: contain;
  background: transparent;
  aspect-ratio: 1;
}
.text-link {
  font-weight: 700;
  color: var(--c-red);
  text-decoration: none;
  margin-top: auto;
}
.text-link:hover { text-decoration: underline; color: var(--c-red-600); }

.breadcrumbs { padding-block: 1rem; font-size: 0.92rem; color: var(--c-muted); }
.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.55rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.breadcrumbs li:not(:last-child)::after {
  content: "/";
  margin-left: 0.55rem;
  color: var(--c-line);
}
.breadcrumbs a { color: var(--c-muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--c-navy); }
.breadcrumbs [aria-current="page"] { color: var(--c-navy); font-weight: 600; }

.product-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
  padding-block-end: 1.5rem;
}
@media (max-width: 54em) {
  .product-layout { grid-template-columns: 1fr; }
}
.product-gallery {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  padding: 1.25rem;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-white);
  box-shadow: var(--shadow-sm);
}
.product-gallery img {
  width: min(100%, 340px);
  max-height: 360px;
  object-fit: contain;
  background: transparent;
}
.product-code {
  margin: 0 0 0.35rem;
  color: var(--c-red);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.82rem;
}
.product-summary h1 {
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--ff-sans);
  font-size: clamp(1.65rem, 1.35rem + 1.2vw, 2.35rem);
  line-height: 1.15;
}
.product-tagline {
  color: var(--c-muted);
  font-size: 1.1rem;
  margin-bottom: 1rem;
}
.product-bullets {
  margin: 1rem 0 1.25rem;
  padding-left: 1.15rem;
}
.product-bullets li { margin: 0.35rem 0; }

/* Keep prose from shrinking below the shared .container width.
   Do not set width here: on .container.prose it would override the
   container calc and break alignment with .product-layout. */
.prose { max-width: none; }
.container.prose { max-width: none; }
.prose h2 { margin-top: 1.75rem; }

.table-wrap {
  overflow-x: auto;
  margin: 1rem 0 0.5rem;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-white);
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.data-table th,
.data-table td {
  padding: 0.6rem 0.9rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--c-line);
}
.data-table thead th {
  background: var(--c-off);
  font-family: var(--ff-display);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-navy);
}
.data-table tbody th {
  width: 60%;
  font-weight: 600;
  color: var(--c-ink-2);
}
.data-table tbody tr:last-child th,
.data-table tbody tr:last-child td { border-bottom: 0; }
/* The 60% row-header width above suits two-column spec tables. Comparison tables need even columns,
   and the min-width lets .table-wrap scroll them instead of crushing the cells on narrow screens. */
.data-table--compare { table-layout: fixed; min-width: 34rem; }
.data-table--compare tbody th { width: auto; }
.data-table--compare thead th:first-child { width: 22%; }
.package-table td {
  vertical-align: middle;
  padding-block: 0.15rem;
}
.package-code {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.source-note {
  color: var(--c-muted);
  font-size: 0.9rem;
  margin-top: 0.4rem;
}
.spec-list {
  columns: 2;
  column-gap: 2.25rem;
  margin: 0.85rem 0 0.5rem;
  padding-left: 1.15rem;
}
.spec-list li {
  break-inside: avoid;
  margin: 0.3rem 0;
}
.fit-list,
.package-list,
.doc-list {
  margin: 0.85rem 0 0.5rem;
  padding-left: 1.15rem;
}
.fit-list li,
.package-list li,
.doc-list li { margin: 0.35rem 0; }
@media (max-width: 44em) {
  .spec-list { columns: 1; }
  .data-table tbody th { width: auto; }
}
.accordion {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-top: 1rem;
}
.accordion__item {
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: #fff;
  overflow: hidden;
}
.accordion__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 48px;
  padding: 0.95rem 1.1rem;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  color: var(--c-navy);
}
.accordion__summary::-webkit-details-marker { display: none; }
.accordion__summary::after {
  content: "+";
  color: var(--c-red);
  font-size: 1.35rem;
  line-height: 1;
}
.accordion__item[open] .accordion__summary::after { content: "−"; }
.accordion__panel {
  padding: 0 1.1rem 1.1rem;
  color: var(--c-muted);
  border-top: 1px solid var(--c-line);
}
.accordion__panel p { margin: 0.85rem 0 0; }

.page-hero {
  padding-block: clamp(1.15rem, 2.4vw, 1.75rem);
  background: linear-gradient(180deg, var(--c-off), #fff);
  border-bottom: 1px solid var(--c-line);
}
.page-hero h1 { margin-bottom: 0.4rem; }
.page-hero p { color: var(--c-muted); margin: 0; }

.account-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
  gap: 1.15rem;
}
.account-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.35rem;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
}
.account-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: rgb(26 74 115 / 0.35);
}
.account-card h2,
.account-card h3 {
  margin: 0;
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--ff-sans);
  font-size: 1.2rem;
}
.account-card h2 a,
.account-card h3 a {
  color: var(--c-navy);
  text-decoration: none;
}
.account-card p { margin: 0; color: var(--c-muted); font-size: 0.95rem; }

/* The heading anchor is stretched over the tile so the whole card is one click target.
   It stays the card's only link, which is why the bottom cue is a span rather than a
   second anchor to the same page. */
.account-card h2 a::after,
.account-card h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-lg);
}
.account-card:hover h2 a,
.account-card:hover h3 a { color: var(--c-red); }
/* Focus lands on the stretched anchor, so the ring is drawn on the card it covers.
   Both rules sit behind :has(), so browsers without it keep the anchor's own outline
   rather than losing the focus indicator entirely. */
.account-card:has(h2 a:focus-visible),
.account-card:has(h3 a:focus-visible) {
  outline: 3px solid var(--c-focus);
  outline-offset: 3px;
}
.account-card:has(h2 a:focus-visible) h2 a:focus-visible,
.account-card:has(h3 a:focus-visible) h3 a:focus-visible { outline: none; }
.card-actions {
  margin-top: auto;
  padding-top: 0.35rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.6rem;
}
/* The heading anchor's stretched overlay covers the whole tile, so the sign-up link
   has to be raised above it. The "View details" cue stays under the overlay so a
   click on it still opens the card's own page. */
.card-actions__cta {
  position: relative;
  z-index: 1;
}
.card-cta {
  font-weight: 700;
  color: var(--c-navy);
}
.account-card:hover .card-cta { text-decoration: underline; color: var(--c-red); }
/* Marks the recommended path for personal-use shoppers without a second card style. */
.account-card--featured { border-color: var(--c-red); box-shadow: 0 0 0 1px var(--c-red), var(--shadow-sm); }

.card-eyebrow {
  margin: 0;
  font-family: var(--ff-display);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--c-red);
}
.card-price {
  margin: 0;
  font-family: var(--ff-display);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--c-navy);
}
.card-price span {
  display: block;
  font-family: var(--ff-sans);
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--c-muted);
}
.card-list {
  margin: 0;
  padding-left: 1.1em;
  font-size: 0.95rem;
  color: var(--c-ink-2);
}
.card-list li { margin: 0.3rem 0; }

.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 165px), 1fr));
  gap: 1rem;
}
.stat-card {
  padding: 1.35rem 1rem;
  text-align: center;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, #fff, var(--c-off));
  box-shadow: var(--shadow-sm);
}
.stat-card__value {
  font-family: var(--ff-display);
  font-size: clamp(1.85rem, 1.45rem + 1.6vw, 2.55rem);
  font-weight: 700;
  line-height: 1;
  color: var(--c-red);
}
.stat-card__label {
  margin-top: 0.45rem;
  font-size: 0.9rem;
  line-height: 1.35;
  color: var(--c-muted);
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 1.15rem;
}
.benefit-card {
  padding: 1.35rem;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.benefit-card h3 {
  margin: 0 0 0.4rem;
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--ff-sans);
  font-size: 1.08rem;
}
.benefit-card p { margin: 0; color: var(--c-muted); font-size: 0.95rem; }
.benefit-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 0.85rem;
  border-radius: var(--r-md);
  background: var(--c-red-50);
  color: var(--c-red);
}
.benefit-card__icon svg { width: 24px; height: 24px; }

.steps {
  counter-reset: step;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 1.15rem;
}
.step-card {
  counter-increment: step;
  padding: 1.35rem;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: var(--shadow-sm);
  color: var(--c-ink-2);
  font-size: 0.97rem;
}
.step-card::before {
  content: counter(step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  margin-bottom: 0.8rem;
  border-radius: 50%;
  background: var(--c-navy);
  color: #fff;
  font-family: var(--ff-display);
  font-size: 1.3rem;
  font-weight: 700;
}

/* Grids and rows that sit directly under a heading need the spacing the muted intro paragraph would have added. */
.section h2 + .stat-row,
.section h2 + .grid,
.section h2 + .steps,
.section h2 + .account-grid,
.prose h2 + .stat-row,
.prose h2 + .grid,
.prose h2 + .steps { margin-top: 1.5rem; }
.prose .stat-row,
.prose .grid,
.prose .steps { margin-bottom: 1.5rem; }

.final-cta { margin-top: 2rem; }
.fine-print {
  margin: 1.25rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--c-line);
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--c-muted);
}
.related-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 0.75rem;
}
.related-links a {
  display: block;
  min-height: 44px;
  padding: 0.75rem 1rem;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: #fff;
  font-weight: 600;
  color: var(--c-navy);
  text-decoration: none;
  transition: border-color var(--ease), color var(--ease), background-color var(--ease);
}
.related-links a:hover {
  border-color: var(--c-red);
  color: var(--c-red);
  background: var(--c-red-50);
}

.cta-band {
  background: linear-gradient(135deg, var(--c-red), var(--c-red-600));
  color: #fff;
  text-align: center;
  padding-block: clamp(2.5rem, 5vw, 3.75rem);
}
.cta-band h2 { color: #fff; }
.cta-band > .container > p,
.cta-band p { color: #fff2f4; }
.cta-band strong { color: #fff; }
.cta-band .btn--primary {
  background: #fff;
  border-color: #fff;
  color: var(--c-red);
}
.cta-band .btn--primary:hover {
  background: var(--c-off);
  color: var(--c-red-600);
}

/* On both dark panels the default steel link and red hover are unreadable. */
.section--cta a:not(.btn),
.cta-band a:not(.btn) { color: #fff; }
.section--cta a:not(.btn):hover,
.cta-band a:not(.btn):hover { color: #fff; text-decoration-thickness: 0.16em; }

.site-footer {
  margin-top: 0;
  background: var(--c-navy-700);
  color: #e3ebf5;
  padding-block: clamp(2.5rem, 5vw, 3.75rem) 1.25rem;
}
.site-footer a { color: #f0f5fb; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr));
  gap: 1.75rem 2rem;
  align-items: start;
}
@media (max-width: 72em) {
  .site-footer__grid { grid-template-columns: 1.4fr repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 56em) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 36em) {
  .site-footer__grid { grid-template-columns: 1fr; }
}
.site-footer__brand {
  font-family: var(--ff-display);
  font-size: 1.6rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 0.75rem;
  line-height: 1.1;
}
.site-footer__heading {
  color: #fff;
  font-family: var(--ff-display);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 0.75rem;
}
.site-footer__grid ul { list-style: none; margin: 0; padding: 0; }
.site-footer__grid li { margin: 0.35rem 0; }
.site-footer__grid > div > p:not(.site-footer__brand) {
  color: #cfd9e6;
  font-size: 0.95rem;
  margin: 0 0 0.35rem;
}
.site-footer__legal {
  margin-top: 2rem;
  padding-top: 1.15rem;
  border-top: 1px solid rgb(255 255 255 / 0.12);
  font-size: 0.88rem;
  color: #b9c5d4;
}
.site-footer__legal p { margin: 0; }

.page-404 {
  min-height: 50vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 3rem var(--gutter);
}
.page-404 h1 { margin-bottom: 0.5rem; }