/*
 * Site-wide base typography (D-022). Loaded after style.css and Bootstrap.
 * Element-level defaults only (body, headings, small, form fields), so any component that sets
 * its own size keeps it; those sizes were already snapped to the design-system scale.
 * Inter everywhere; Pacifico only through .cy-special / .script-text.
 */
body {
  font-family: var(--cy-font) !important; /* style.css used !important for Poppins */
  font-size: var(--cy-fs-md);
  line-height: var(--cy-lh-md);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--cy-font);
  letter-spacing: -0.01em;
}
h1, .h1 { font-size: var(--cy-h1-fs); line-height: var(--cy-h1-lh); font-weight: var(--cy-weight-heading); }
h2, .h2 { font-size: var(--cy-h2-fs); line-height: var(--cy-h2-lh); font-weight: var(--cy-weight-subheading); }
h3, .h3 { font-size: var(--cy-h3-fs); line-height: var(--cy-h3-lh); font-weight: var(--cy-weight-title); }
h4, .h4 { font-size: var(--cy-h4-fs); line-height: var(--cy-h4-lh); font-weight: var(--cy-weight-title); letter-spacing: 0; }
h5, .h5 { font-size: var(--cy-fs-lg); line-height: var(--cy-lh-lg); font-weight: var(--cy-weight-title); letter-spacing: 0; }
h6, .h6 { font-size: var(--cy-fs-md); line-height: var(--cy-lh-md); font-weight: var(--cy-weight-title); letter-spacing: 0; }

small, .small { font-size: var(--cy-fs-xs); }

button, input, select, optgroup, textarea {
  font-family: var(--cy-font);
}

/* ---------- Heading standard (D-023): one size per level, on every page ----------
   H1 36/28 (desktop/mobile) page title, one per page · H2 28/24 section title ·
   H3 18/16 sub-section or card title · H4 16 small card/list title. H5/H6 are not used.
   !important because the old page CSS gave each heading its own size; the standard has to win.
   Opt out with .cy-heading-free on a heading or a container (home hero, decorative banner art).
   ALL-CAPS headings come from CSS text-transform; the standard switches them to the source's own
   sentence case. */
/* OLD (pre 2026-10-21): H1 used weight var(--cy-weight-heading) and text-transform: none, colour inherited.
   Why: D-027 - owner: every page's H1 has the same style, the PI design's: bold, UPPERCASE, black, with the key
   words in .cy-h1-accent (coral-to-brown gradient). Size stays per level (36/28); heroes that opt out of the
   size (.cy-heading-free) still get the weight, case and colour. Exception: the DPI ad banner's white H1 on a photo. */
h1:not(.cy-heading-free):not(.cy-heading-free *) {
  font-size: var(--cy-h1-fs) !important;
  line-height: var(--cy-h1-lh) !important;
}
h1 {
  font-weight: 700 !important;
  text-transform: uppercase !important;
  color: var(--cy-neutral-1000) !important;
  letter-spacing: 0;
}
h1.dpi-banner-hding { color: #fff !important; }
/* D-065: the careers hero H1 also sits on a dark photo overlay (black was unreadable there). */
.career-hero-copy h1 { color: #fff !important; }
.cy-h1-accent {
  background: linear-gradient(191.06deg, var(--cy-brand-600) 0%, var(--cy-brand-800) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
h2:not(.cy-heading-free):not(.cy-heading-free *) {
  font-size: var(--cy-h2-fs) !important;
  line-height: var(--cy-h2-lh) !important;
  font-weight: var(--cy-weight-subheading) !important;
  text-transform: none !important;
}
h3:not(.cy-heading-free):not(.cy-heading-free *) {
  font-size: var(--cy-h3-fs) !important;
  line-height: var(--cy-h3-lh) !important;
  font-weight: var(--cy-weight-title) !important;
  text-transform: none !important;
}
h4:not(.cy-heading-free):not(.cy-heading-free *),
h5:not(.cy-heading-free):not(.cy-heading-free *),
h6:not(.cy-heading-free):not(.cy-heading-free *) {
  font-size: var(--cy-h4-fs) !important;
  line-height: var(--cy-h4-lh) !important;
  font-weight: var(--cy-weight-title) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* Former headings that were really labels, names or numbers (now <p class="… cy-ht">).
   Zero-specificity defaults that mirror Bootstrap's heading spacing; the element's own class
   styles (size, colour, margins) still win. */
p:where(.cy-ht) {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-weight: 500;
  line-height: 1.2;
}

/* D-030: an H1 on a dark photo hero (About) keeps the H1 style but in white; key words in solid coral. */
h1.cy-h1--on-dark { color: var(--cy-neutral-0) !important; }
h1.cy-h1--on-dark span { color: var(--cy-brand-600); }
/* Coral key words inside a section heading (Career design: "Life at <CoverYou>"). */
.cy-accent { color: var(--cy-brand-600); }

/* ---------- Section text standard (D-037) ----------
   Owner: "the sections of content should all use the same heading, subhead and paragraph size, colour and style".
   One style per role, on every page, whatever the section's own markup (design-system .cy-section-head, the home
   .compare-heading/.trust-heading blocks, the product-page template's what-is/why-essential/how-it-works/benefits/
   key-features blocks, calculators/checklists, and the new Claims/PI/About pages):
     section title (H2)     28/36 (24/32 phone), 600, black   - size from the heading standard above
     section intro (p)      16/24 (15/22 phone), 400, black
     sub-heading (H3)       18/24 (16/22 phone), 600, black
     card / step text       14/22, 400, black
   !important because each old template set its own sizes and greys. */
:root { --cy-section-text: var(--cy-neutral-1000); }

:is(.cy-section-head__title, .compare-heading > h2, .trust-heading > h2, [class*="-title-wrapper"] > h2) { color: var(--cy-section-text) !important; }

/* D-062: `.why-essential-text p` replaces `.why-essential-paragraph`, a class no page uses, so the "Why" text on
   term, life, home and cyber stopped at 14px grey while the "What is" text above it was 16px black. */
.cy-section-head > p,
:is(.compare-heading, .trust-heading) > p,
:where(div, header):has(> .compare-accent) > p,
.what-is-text, .why-essential-text p, .why-essential-list li,
.ab-sub, .ab-who__copy p, .ab-story__text p,
.ca-why__text, .ca-why__list li,
.pl-what__text p, .pl-why__text p, .pl-why__text li {
  font-family: var(--cy-font) !important;
  font-size: var(--cy-fs-lg) !important;
  line-height: 24px !important;
  font-weight: 400 !important;
  color: var(--cy-section-text) !important;
  letter-spacing: 0 !important;
}

.process-title, .benefit-title, .key-feature-title,
.cy-benefit__title, .pl-step__title, .ca-step__title, .ab-mv__title, .ab-serve__title {
  font-family: var(--cy-font) !important;
  font-size: var(--cy-fs-xl) !important;
  line-height: 24px !important;
  font-weight: 600 !important;
  color: var(--cy-section-text) !important;
  letter-spacing: 0 !important;
}

.process-description, .benefit-description, .key-feature-text,
.cy-benefit__text, .pl-step__text, .ca-step__text, .pl-feature p, .ab-mv__card p, .ab-step__label {
  font-family: var(--cy-font) !important;
  font-size: var(--cy-fs-md) !important;
  line-height: 22px !important;
  font-weight: 400 !important;
  color: var(--cy-section-text) !important;
  letter-spacing: 0 !important;
}

@media (max-width: 767px) {
  .cy-section-head > p,
  :is(.compare-heading, .trust-heading) > p,
  :where(div, header):has(> .compare-accent) > p,
  .what-is-text, .why-essential-text p, .why-essential-list li,
  .ab-sub, .ab-who__copy p, .ab-story__text p,
  .ca-why__text, .ca-why__list li,
  .pl-what__text p, .pl-why__text p, .pl-why__text li { font-size: 15px !important; line-height: 22px !important; }
  .process-title, .benefit-title, .key-feature-title,
  .cy-benefit__title, .pl-step__title, .ca-step__title, .ab-mv__title, .ab-serve__title { font-size: var(--cy-fs-lg) !important; line-height: 22px !important; }
  /* D-062: term, life, home and cyber shrink their card text to 11-12px (benefits in grey) in their own phone CSS,
     which comes later in the page; `body` outranks it. Same 14/22 black as the other product pages. */
  body .process-description, body .benefit-description, body .key-feature-text {
    font-size: var(--cy-fs-md) !important;
    line-height: 22px !important;
    color: var(--cy-section-text) !important;
  }
  body .benefit-title { color: var(--cy-section-text) !important; }
}
/* Centred section intros all wrap at the same width (D-037).
   OLD: also listed `.pl-what__text p` - owner (22 Oct): the PI "What is" text uses the page's full column.
   OLD: also listed `.what-is-text` - owner (23 Oct): the same on term, life, home and cyber (D-061). */
.cy-section-head:not(.cy-section-head--left) > p,
:is(.compare-heading, .trust-heading) > p,
:where(div, header):has(> .compare-accent) > p {
  max-width: 820px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}