/* ---------------------------------------------------------------
   Inner page design language.

   The same treatment the homepage uses, expressed once against the
   shared component classes (.solution-section, .card, .accordion,
   .author-box, .solution-cta) that every inner template already uses.
   No page file is edited and no per-page override is added.

   SCOPE. Every rule is scoped with :is(...) listing the body classes
   converted so far, so a page type opts in by being added to that list
   rather than by getting its own stylesheet. Groups 3 and 4 extend the
   list; nothing else changes.

   Converted: .page-state (group 1), .page-solution and .page-hub
   (group 2), .page-industry (group 3). All four hubs share .page-hub,
   so every hub was restyled in group 2 rather than being left
   half-converted between groups.

   The industry templates introduced no component the state and solution
   pages had not already brought, so group 3 was a scope addition only.

   Group 4 adds the remaining page types: resources, about, get-a-quote,
   blog index and post, sitemap, legal and the 404. Their extra
   components (the quote form, the article body, the glossary index) are
   appended at the end of this file.

   HERO IMAGES ARE NOT TOUCHED. .solution-hero--media keeps its
   <picture>, its sources and its dimensions. Only type and the scrim
   are restyled.

   Requires tokens.css. Loaded globally from header.php.
--------------------------------------------------------------- */

/* ---------------------------------------------------------------
   SECTION RHYTHM
--------------------------------------------------------------- */

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .solution-section {
  padding: 84px 0;
}

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .alt-bg {
  background: var(--sk-wash);
}

/* .container now matches the nav globally, see main.css tokens */

/* ---------------------------------------------------------------
   HERO
   Image, picture element and dimensions untouched. Type only, plus a
   slightly deeper scrim so Sora at these weights stays legible over a
   photograph.
--------------------------------------------------------------- */

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .solution-hero__title {
  font-family: var(--sk-heading);
  font-size: clamp(38px, 5vw, 74px);
  line-height: 1.0;
  letter-spacing: -0.05em;
  font-weight: 700;
}

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .solution-hero__eyebrow {
  /* flex + fit-content, not inline-flex. An inline-level box sits in a
     line box built from the parent's line-height, which at this font
     size is 10px taller than the eyebrow itself, and all 10px land
     above it as half-leading. Harmless when the hero was top-aligned;
     once the block is centred it is 10px of false skew at the top. */
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 9px;
  font-family: var(--sk-heading);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .solution-hero__eyebrow:before {
  content: "";
  width: 22px;
  height: 1.5px;
  background: var(--sk-green-bright);
  flex-shrink: 0;
}

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .solution-hero__lead {
  font-family: var(--sk-body);
  font-size: 19px;
  line-height: 1.6;
}

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .solution-hero--media .solution-hero__scrim {
  background: linear-gradient(115deg, rgba(11, 11, 69, 0.92) 0%, rgba(11, 11, 69, 0.79) 55%, rgba(11, 11, 69, 0.64) 100%);
}

/* A trailing margin on the last child of the hero is not part of the
   block, but it is part of the box, so it reads as dead ground under
   the buttons and, once the block is vertically centred, it also drags
   the copy up by half its height. The homepage is the live case:
   .hero__actions carries a 40px margin-bottom for a .hero__signals list
   that page does not render. Every width, not just desktop. */
:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .solution-hero__inner > :last-child,
:is(.page-hub) .hub-hero__inner > :last-child {
  margin-bottom: 0;
}

/* ---------------------------------------------------------------
   HEADINGS
   No eyebrow element exists in these templates, and inventing one
   would mean writing new copy into 16 pages. The short green rule is
   rendered above the heading instead, which gives the same signal
   without adding words.
--------------------------------------------------------------- */

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) h2 {
  font-family: var(--sk-heading);
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.08;
  letter-spacing: -0.042em;
  font-weight: 700;
  color: var(--sk-navy);
}

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .solution-section__inner > h2:before,
:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .section-head > h2:before {
  content: "";
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--sk-green);
  margin-bottom: 18px;
}

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) h3 {
  font-family: var(--sk-heading);
  letter-spacing: -0.025em;
  font-weight: 600;
  color: var(--sk-navy);
}

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .section-head {
  max-width: 760px;
  margin-bottom: 40px;
}

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .section-head p,
:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .solution-section__inner > p {
  font-family: var(--sk-body);
  font-size: 16px;
  line-height: 1.75;
  color: var(--sk-prose);
}

/* ---------------------------------------------------------------
   PROSE PANEL
   A section whose inner holds only prose becomes a contained white
   panel with a two-column split. :has() keeps the panel off sections
   that also carry a grid, an accordion or a list, which must not be
   forced into columns.
--------------------------------------------------------------- */

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .solution-section__inner:not(:has(.card-grid, .accordion, .checklist, ul, ol, table, .solution-cta__actions, .card, .claim-card, .glossary-group, .cost-card)) {
  background: var(--sk-white);
  border: 1px solid var(--sk-hairline-soft);
  border-radius: 26px;
  padding: 48px 52px;
  box-shadow: var(--sk-shadow-panel-soft);
}

/* TWO COLUMNS BY GRID, NOT BY MULTICOL.
   `columns: 2` flows text top-to-bottom then wraps, which slices a single
   paragraph in half across the column break: one column ends "how your
   agency actually" and the next begins "operates." Grid places each
   paragraph as a whole item, so a paragraph can never be split. */
:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .solution-section__inner:not(:has(.card-grid, .accordion, .checklist, ul, ol, table, .solution-cta__actions, .card, .claim-card, .glossary-group, .cost-card)):has(p + p) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 44px;
  row-gap: 18px;
  align-items: start;
}

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .solution-section__inner:not(:has(.card-grid, .accordion, .checklist, ul, ol, table, .solution-cta__actions, .card, .claim-card, .glossary-group, .cost-card)) > :is(h2, h3, .eyebrow) {
  grid-column: 1 / -1;
}

/* On the wash the panel still needs to read as a panel. */
:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .alt-bg .solution-section__inner:not(:has(.card-grid, .accordion, .checklist, ul, ol, table, .solution-cta__actions, .card, .claim-card, .glossary-group, .cost-card)) {
  background: var(--sk-white);
}

/* ---------------------------------------------------------------
   CARDS
   Same language as the homepage: gradient fill, index in the corner,
   green bleed on hover, 8px lift, sliding arrow on the link.
--------------------------------------------------------------- */

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .card-grid {
  gap: 20px;
  counter-reset: pcard;
}

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .card,
:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .coverage-card {
  background: var(--sk-card-fill);
  border: 1px solid var(--sk-hairline-soft);
  border-radius: 22px;
  padding: 30px 26px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--sk-shadow-rest);
  transition: transform 0.5s var(--sk-ease), box-shadow 0.5s, border-color 0.5s;
}

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .card:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100px;
  background: var(--sk-bleed-soft);
  opacity: 0;
  transition: opacity 0.5s;
  pointer-events: none;
}

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .card:hover {
  transform: translateY(-8px);
  border-color: rgba(11, 11, 69, 0.14);
  box-shadow: var(--sk-shadow-lift);
}

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .card:hover:before {
  opacity: 1;
}

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .card-grid > .card:after {
  counter-increment: pcard;
  content: counter(pcard, decimal-leading-zero);
  position: absolute;
  top: 28px;
  right: 26px;
  font-family: var(--sk-heading);
  font-size: 11px;
  font-weight: 600;
  color: var(--sk-idx);
  transition: color 0.5s;
  z-index: 2;
}

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .card-grid > .card:hover:after {
  color: var(--sk-green);
}

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .card__body {
  position: relative;
  z-index: 2;
}

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .card__title {
  font-family: var(--sk-heading);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.028em;
  margin-bottom: 10px;
  padding-right: 34px;
}

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .card__text {
  font-family: var(--sk-body);
  font-size: 14.5px;
  line-height: 1.68;
  color: var(--sk-card-text);
}

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .card__link {
  margin-top: 18px;
  font-family: var(--sk-body);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--sk-navy);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .card__link:after {
  content: "\2192";
  transition: transform 0.4s var(--sk-ease);
}

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .card:hover .card__link:after {
  transform: translateX(4px);
}

/* The cost cards carry a figure rather than a link. */
:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .cost-card__range {
  font-family: var(--sk-heading);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--sk-green);
}

/* ---------------------------------------------------------------
   CHECKLIST
--------------------------------------------------------------- */

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .checklist li {
  font-family: var(--sk-body);
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--sk-prose);
}

/* ---------------------------------------------------------------
   ACCORDION
   Each item becomes a card, matching the grid treatment.
--------------------------------------------------------------- */

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .accordion {
  display: grid;
  gap: 12px;
}

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .accordion__item {
  background: var(--sk-card-fill);
  border: 1px solid var(--sk-hairline-soft);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(11, 11, 69, 0.04);
  transition: border-color 0.4s, box-shadow 0.4s;
}

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .accordion__item:hover {
  border-color: rgba(11, 11, 69, 0.14);
  box-shadow: var(--sk-shadow-rest);
}

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .accordion__trigger {
  font-family: var(--sk-heading);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.022em;
  color: var(--sk-navy);
  padding: 22px 24px;
  background: none;
  width: 100%;
  text-align: left;
}

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .accordion__panel {
  padding: 0 24px 22px;
}

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .accordion__panel p {
  font-family: var(--sk-body);
  font-size: 15px;
  line-height: 1.72;
  color: var(--sk-prose);
}

/* ---------------------------------------------------------------
   AUTHOR BYLINE
   Content unchanged, panel treatment applied.
--------------------------------------------------------------- */

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .author-box {
  padding: 0 0 84px;
}

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .author-box__inner {
  background: var(--sk-card-fill);
  border: 1px solid var(--sk-hairline-soft);
  border-radius: 22px;
  padding: 32px 34px;
  box-shadow: var(--sk-shadow-rest);
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-start;
  justify-content: space-between;
}

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .author-box__name {
  font-family: var(--sk-heading);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--sk-navy);
  margin-bottom: 8px;
}

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .author-box__title {
  font-family: var(--sk-heading);
  font-size: 14px;
  font-weight: 600;
  color: var(--sk-green);
}

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .author-box__npn,
:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .author-box__spec,
:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .author-box__updated {
  font-family: var(--sk-body);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--sk-muted);
}

/* ---------------------------------------------------------------
   CTA BAND
--------------------------------------------------------------- */

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .solution-cta {
  /* Same gradient as the footer, so the CTA and the footer read as one
     continuous light section with no seam between them. */
  background: var(--sk-footer-light);
  position: relative;
  overflow: hidden;
  padding: 84px 0 96px;
}

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .solution-cta:after {
  content: "";
  position: absolute;
  top: -220px;
  right: -160px;
  width: 680px;
  height: 680px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(108, 153, 52, 0.10), transparent 66%);
  pointer-events: none;
}

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .solution-cta__inner {
  position: relative;
  z-index: 2;
}

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .solution-cta h2 {
  color: var(--sk-navy);
}

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .solution-cta h2:before {
  background: var(--sk-green);
}

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .solution-cta p {
  font-family: var(--sk-body);
  color: var(--sk-prose);
  line-height: 1.7;
}

/* ---------------------------------------------------------------
   BUTTONS
   Pills. Every state sets colour explicitly, because main.css carries
   a global a:hover colour that would otherwise win and blank the text.
--------------------------------------------------------------- */

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .btn {
  border-radius: var(--sk-radius-pill);
  font-family: var(--sk-body);
  font-size: 15.5px;
  font-weight: 500;
  padding: 16px 32px;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  transition: background 0.3s var(--sk-ease), color 0.3s, border-color 0.3s, transform 0.3s var(--sk-ease), box-shadow 0.3s var(--sk-ease);
}

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .btn--primary {
  background: var(--sk-navy);
  border-color: var(--sk-navy);
  color: var(--sk-white);
}

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .btn--primary:hover,
:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .btn--primary:focus-visible {
  background: var(--sk-navy-hover);
  border-color: var(--sk-navy-hover);
  color: var(--sk-white);
  transform: translateY(-2px);
  box-shadow: 0 14px 32px -10px rgba(11, 11, 69, 0.45);
}

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .btn--secondary {
  background: var(--sk-white);
  color: var(--sk-navy);
  border-color: rgba(11, 11, 69, 0.16);
}

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .btn--secondary:hover,
:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .btn--secondary:focus-visible {
  background: var(--sk-white);
  color: var(--sk-navy);
  border-color: var(--sk-navy);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -12px rgba(11, 11, 69, 0.20);
}

/* On the dark hero and the dark CTA band the outline button inverts. */
:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .solution-hero .btn--secondary {
  /* SOLID, never translucent. This was rgba(255,255,255,0.08), so the
     hero photograph showed straight through the button and it read as
     broken glass rather than a control. White fill, navy label, alpha 1. */
  background: var(--white);
  color: var(--navy);
  border-color: var(--white);
}

/* The CTA band is light now, so its buttons take the light treatment:
   green primary, white outlined secondary. */
:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .solution-cta .btn--primary,
:is(.page-hub) .hub-cta .btn--primary {
  background: var(--sk-green-cta);
  border-color: var(--sk-green);
  color: var(--sk-white);
}

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .solution-cta .btn--primary:hover,
:is(.page-hub) .hub-cta .btn--primary:hover,
:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .solution-cta .btn--primary:focus-visible,
:is(.page-hub) .hub-cta .btn--primary:focus-visible {
  background: var(--sk-green-dark, #5a7f2b);
  border-color: var(--sk-green-dark, #5a7f2b);
  color: var(--sk-white);
}

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .solution-cta .btn--secondary,
:is(.page-hub) .hub-cta .btn--secondary {
  background: var(--sk-white);
  color: var(--sk-navy);
  border-color: rgba(11, 11, 69, 0.16);
}

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .solution-cta .btn--secondary:hover,
:is(.page-hub) .hub-cta .btn--secondary:hover,
:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .solution-cta .btn--secondary:focus-visible,
:is(.page-hub) .hub-cta .btn--secondary:focus-visible {
  background: var(--sk-white);
  color: var(--sk-navy);
  border-color: var(--sk-navy);
}

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .solution-hero .btn--secondary:hover,
:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .solution-hero .btn--secondary:focus-visible {
  /* SOLID, never translucent. This was rgba(255,255,255,0.08), so the
     hero photograph showed straight through the button and it read as
     broken glass rather than a control. White fill, navy label, alpha 1. */
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
}

/* ---------------------------------------------------------------
   BREADCRUMBS AND SECTION LINKS
--------------------------------------------------------------- */

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .breadcrumbs {
  font-family: var(--sk-body);
  font-size: 13px;
}

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .breadcrumbs a {
  color: var(--sk-muted);
}

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .breadcrumbs a:hover {
  color: var(--sk-navy);
}

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .section-cta a {
  font-family: var(--sk-heading);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.015em;
  color: var(--sk-navy);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .section-cta a:after {
  content: "\2192";
  transition: transform 0.4s var(--sk-ease);
}

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .section-cta a:hover:after {
  transform: translateX(4px);
}

@media (max-width: 900px) {
  :is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .solution-section {
    padding: 56px 0;
  }
  :is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .solution-section__inner:not(:has(.card-grid, .accordion, .checklist, ul, ol, table, .card, .claim-card, .glossary-group, .cost-card)) {
    padding: 30px 24px;
    columns: auto;
  }
  /* .container now matches the nav globally, see main.css tokens */
}

/* ---------------------------------------------------------------
   GROUP 2 COMPONENTS

   The hub templates use hub-* rather than solution-*, and the solution
   pages add a few components of their own. Both are mapped onto the
   same treatment defined above rather than given a parallel one.
--------------------------------------------------------------- */

/* Hub hero. Image, picture element and dimensions untouched. */
:is(.page-hub) .hub-hero__title {
  font-family: var(--sk-heading);
  font-size: clamp(38px, 5vw, 74px);
  line-height: 1.0;
  letter-spacing: -0.05em;
  font-weight: 700;
}

:is(.page-hub) .hub-hero__eyebrow {
  /* flex + fit-content, not inline-flex. An inline-level box sits in a
     line box built from the parent's line-height, which at this font
     size is 10px taller than the eyebrow itself, and all 10px land
     above it as half-leading. Harmless when the hero was top-aligned;
     once the block is centred it is 10px of false skew at the top. */
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 9px;
  font-family: var(--sk-heading);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

:is(.page-hub) .hub-hero__eyebrow:before {
  content: "";
  width: 22px;
  height: 1.5px;
  background: var(--sk-green-bright);
  flex-shrink: 0;
}

:is(.page-hub) .hub-hero__lead {
  font-family: var(--sk-body);
  font-size: 19px;
  line-height: 1.6;
}

:is(.page-hub) .hub-section {
  padding: 84px 0;
}

:is(.page-hub) .hub-section__inner > h2:before {
  content: "";
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--sk-green);
  margin-bottom: 18px;
}

:is(.page-hub) .hub-section__inner > p {
  font-family: var(--sk-body);
  font-size: 16px;
  line-height: 1.75;
  color: var(--sk-prose);
}

/* Prose-only hub sections get the contained panel, same guard as the
   state pages so grids and lists are never forced into columns. */
:is(.page-hub) .hub-section__inner:not(:has(.card-grid, .accordion, .checklist, ul, ol, table, .program-steps, .card, .claim-card, .glossary-group, .cost-card)) {
  background: var(--sk-white);
  border: 1px solid var(--sk-hairline-soft);
  border-radius: 26px;
  padding: 48px 52px;
  box-shadow: var(--sk-shadow-panel-soft);
}

:is(.page-hub) .hub-section__inner:not(:has(.card-grid, .accordion, .checklist, ul, ol, table, .program-steps, .card, .claim-card, .glossary-group, .cost-card)):has(p + p) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 44px;
  row-gap: 18px;
  align-items: start;
}

:is(.page-hub) .hub-section__inner:not(:has(.card-grid, .accordion, .checklist, ul, ol, table, .program-steps, .card, .claim-card, .glossary-group, .cost-card)) > :is(h2, h3, .eyebrow) {
  grid-column: 1 / -1;
}

/* Hub CTA band, same gradient and glow as the state CTA. */
:is(.page-hub) .hub-cta {
  /* Same gradient as the footer, so the CTA and the footer read as one
     continuous light section with no seam between them. */
  background: var(--sk-footer-light);
  position: relative;
  overflow: hidden;
  padding: 84px 0 96px;
}

:is(.page-hub) .hub-cta:after {
  content: "";
  position: absolute;
  top: -220px;
  right: -160px;
  width: 680px;
  height: 680px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(108, 153, 52, 0.10), transparent 66%);
  pointer-events: none;
}

:is(.page-hub) .hub-cta__inner {
  position: relative;
  z-index: 2;
}

:is(.page-hub) .hub-cta h2 {
  color: var(--sk-navy);
}

:is(.page-hub) .hub-cta h2:before {
  background: var(--sk-green);
}

:is(.page-hub) .hub-cta p {
  font-family: var(--sk-body);
  color: var(--sk-prose);
  line-height: 1.7;
}

/* Numbered program steps read as cards. */
:is(.page-hub) .program-steps li {
  background: var(--sk-card-fill);
  border: 1px solid var(--sk-hairline-soft);
  border-radius: 22px;
  padding: 28px 26px;
  box-shadow: var(--sk-shadow-rest);
  transition: transform 0.5s var(--sk-ease), box-shadow 0.5s;
}

:is(.page-hub) .program-steps li:hover {
  transform: translateY(-8px);
  box-shadow: var(--sk-shadow-lift);
}

/* ---------------------------------------------------------------
   SOLUTION PAGE COMPONENTS
--------------------------------------------------------------- */

:is(.page-solution) .claim-card {
  background: var(--sk-card-fill);
  border: 1px solid var(--sk-hairline-soft);
  border-radius: 22px;
  padding: 28px 26px;
  box-shadow: var(--sk-shadow-rest);
  transition: transform 0.5s var(--sk-ease), box-shadow 0.5s, border-color 0.5s;
}

:is(.page-solution) .claim-card:hover {
  transform: translateY(-8px);
  border-color: rgba(11, 11, 69, 0.14);
  box-shadow: var(--sk-shadow-lift);
}

:is(.page-solution) .claim-card__title {
  font-family: var(--sk-heading);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--sk-navy);
  margin-bottom: 10px;
}

:is(.page-solution) .claim-list li,
:is(.page-solution) .exclusion-list li {
  font-family: var(--sk-body);
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--sk-prose);
}

:is(.page-solution) .limits-table {
  font-family: var(--sk-body);
  font-size: 15px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--sk-hairline-soft);
  box-shadow: var(--sk-shadow-rest);
}

:is(.page-solution) .limits-table th {
  font-family: var(--sk-heading);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sk-label);
  background: var(--sk-panel);
}

:is(.page-solution) .limits-table td {
  color: var(--sk-prose);
}

/* ---------------------------------------------------------------
   GROUP 4 COMPONENTS

   The quote form, the article body, the glossary index and the sitemap
   grid. Presentation only: every field name, value and validation hook
   in get-a-quote/index.php is untouched, because the handler in
   api/quote-submit.php matches on those names and this is the
   conversion path.
--------------------------------------------------------------- */

/* ---------------------------------------------------------------
   QUOTE FORM
--------------------------------------------------------------- */

.quote-form {
  background: var(--sk-card-fill);
  border: 1px solid var(--sk-hairline-soft);
  border-radius: 26px;
  padding: 44px 46px;
  box-shadow: var(--sk-shadow-panel-soft);
}

.form-fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 var(--space-lg);
}

.form-fieldset legend {
  font-family: var(--sk-heading);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--sk-label);
  padding: 0;
  margin-bottom: 18px;
}

.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  font-family: var(--sk-heading);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--sk-navy);
  margin-bottom: 7px;
}

.form-optional {
  font-family: var(--sk-body);
  font-weight: 400;
  font-size: 12.5px;
  color: var(--sk-label);
  letter-spacing: 0;
}

.form-control {
  width: 100%;
  padding: 14px 16px;
  font-family: var(--sk-body);
  font-size: 15.5px;
  line-height: 1.4;
  color: var(--sk-navy);
  background: var(--sk-white);
  border: 1px solid rgba(11, 11, 69, 0.14);
  border-radius: 12px;
  transition: border-color 0.24s, box-shadow 0.24s;
}

.form-control::placeholder {
  color: var(--sk-label);
}

.form-control:hover {
  border-color: rgba(11, 11, 69, 0.26);
}

.form-control:focus {
  outline: none;
  border-color: var(--sk-green);
  box-shadow: 0 0 0 3px rgba(108, 153, 52, 0.18);
}

.form-control[aria-invalid="true"] {
  border-color: #8A1F1F;
}

.form-error {
  display: block;
  margin-top: 6px;
  font-family: var(--sk-body);
  font-size: 13px;
  font-weight: 500;
  color: #8A1F1F;
}

.form-message {
  border-radius: 14px;
  padding: 16px 18px;
  font-family: var(--sk-body);
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: var(--space-md);
}

.form-message--error {
  background: #FDECEC;
  border: 1px solid #E8B4B4;
  color: #8A1F1F;
}

/* Coverage checkboxes read as selectable cards. The input keeps its
   name, value and checked state; only the box around it changes. */
.form-checkboxes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
}

.form-check {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 16px;
  border-radius: 14px;
  background: var(--sk-white);
  border: 1px solid var(--sk-card-border);
  cursor: pointer;
  transition: border-color 0.24s, transform 0.24s, box-shadow 0.24s;
}

.form-check:hover {
  border-color: rgba(11, 11, 69, 0.24);
  transform: translateY(-2px);
  box-shadow: var(--sk-shadow-rest);
}

.form-check__input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.form-check__box {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1.5px solid rgba(11, 11, 69, 0.26);
  background: var(--sk-white);
  position: relative;
  transition: background 0.2s, border-color 0.2s;
}

.form-check__box:after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid var(--sk-white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform 0.2s var(--sk-ease);
}

.form-check__input:checked + .form-check__box {
  background: var(--sk-green);
  border-color: var(--sk-green);
}

.form-check__input:checked + .form-check__box:after {
  transform: rotate(45deg) scale(1);
}

.form-check__input:focus-visible + .form-check__box {
  box-shadow: 0 0 0 3px rgba(108, 153, 52, 0.28);
}

.form-check__text {
  font-family: var(--sk-body);
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--sk-navy);
}

/* The honeypot must stay reachable to a bot and invisible to a person,
   so this hides it without display:none and without disabling it. */
.form-honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.cf-turnstile {
  margin: var(--space-md) 0;
}

.quote-form__privacy {
  font-family: var(--sk-body);
  font-size: 13px;
  line-height: 1.6;
  color: var(--sk-muted);
  margin-top: var(--space-md);
}

.btn--block {
  width: 100%;
}

/* ---------------------------------------------------------------
   ARTICLE BODY
   Blog posts get the same contained panel and readable measure the
   state page prose uses.
--------------------------------------------------------------- */

/* ARTICLE COLUMN.

   This rule asked for 820px and got 736px: the panel is <div class=
   "container post-body__inner">, and resource.css, which loads AFTER
   pages.css on a post page, caps .post-body__inner at 46rem with the
   same single-class specificity. Scoping to the body class settles it.

   736px is 57% of a 1280px content box, so the article sat in a narrow
   ribbon down the middle of the page. It is now 980px, 77%, with 852px
   of content inside it.

   The prose keeps a comfortable measure INSIDE that panel: no body size
   fills 852px in under 80 characters. The extra width goes where it
   earns its keep, which is the header image, tables and blockquotes. */
:is(.page-blog-post) .post-body__inner {
  max-width: min(100%, 980px);
  margin: 0 auto;
  background: var(--sk-white);
  border: 1px solid var(--sk-hairline-soft);
  border-radius: 26px;
  padding: 48px 52px;
  box-shadow: var(--sk-shadow-panel-soft);
}

@media (min-width: 1024px) {
  :is(.page-blog-post) .post-body__inner {
    padding: 56px 64px;
  }
}

/* Later than resource.css cannot be arranged, so these outrank it. */
:is(.page-blog-post) .post-body__inner > p,
:is(.page-blog-post) .post-body__inner li {
  font-family: var(--sk-body);
  font-size: 18px;
  line-height: 1.75;
  color: var(--sk-prose);
  /* 69ch, not 78ch. The ch unit is the advance of "0", which is wider
     than the average prose character, so 78ch measured out at 89 real
     characters a line. 69ch lands at 78. */
  max-width: 69ch;
}

/* HEADER IMAGE. Every migrated post opens with a <picture>, which is
   inline by default and so sat on a text baseline inside a box narrower
   than the panel. Block, full panel width, and the 16/9 ratio the files
   actually are, so the space is reserved before the image loads. */
:is(.page-blog-post) .post-body__inner > picture,
:is(.page-blog-post) .post-body__inner > p:first-child > picture {
  display: block;
  width: 100%;
  margin: 0 0 32px;
}

:is(.page-blog-post) .post-body__inner > picture > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.post-body__meta {
  font-family: var(--sk-body);
  font-size: 13.5px;
  color: var(--sk-muted);
  border-bottom: 1px solid var(--sk-hairline);
  padding-bottom: 16px;
  margin-bottom: 28px;
}

.post-body__inner h2 {
  font-size: clamp(24px, 2.4vw, 32px);
  letter-spacing: -0.035em;
  margin-top: 40px;
}

.post-body__inner h3 {
  font-size: 20px;
  margin-top: 28px;
}

.post-body__inner img,
.post-body__inner picture img {
  border-radius: 18px;
}

/* ---------------------------------------------------------------
   INDEX LISTING

   The card is image, title, byline, excerpt, link, in that order and
   with nothing between them but the gap the grid sets. The image is
   the post's own lead image, pulled out of the article by
   postLeadImage(); a post without one gets .post-list__item--noimage
   and the text simply takes the whole card.
--------------------------------------------------------------- */

.post-list__item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: start;
  background: var(--sk-card-fill);
  border: 1px solid var(--sk-hairline-soft);
  border-radius: 22px;
  padding: 18px;
  margin-bottom: 18px;
  box-shadow: var(--sk-shadow-rest);
  transition: transform 0.5s var(--sk-ease), box-shadow 0.5s;
}

.post-list__item:hover {
  transform: translateY(-6px);
  box-shadow: var(--sk-shadow-lift);
}

/* Image above the text on phones, left of it from 720px up. The column
   is fixed so a row of cards keeps one text edge down the page. */
@media (min-width: 720px) {
  .post-list__item {
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 28px;
    align-items: center;
  }
  .post-list__item--noimage {
    grid-template-columns: minmax(0, 1fr);
  }
}

.post-list__media {
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  background: var(--sk-panel);
  /* The intrinsic ratio of every blog image on the site (1600x900).
     Reserving it here means the card is its final height before the
     lazy image arrives, so nothing below it shifts. */
  aspect-ratio: 16 / 9;
}

.post-list__media picture {
  display: block;
  height: 100%;
}

.post-list__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The text column owns its own rhythm, so every child's margin is
   dropped and the gaps are the grid's. That is what removes the dead
   space: no stacked paragraph margins, no empty last-child margin. */
.post-list__text {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.post-list__text > * {
  margin: 0;
}

/* Scoped to the body class so this outranks the site-wide `h2` rule
   earlier in this file, which is :is(<page list>) h2 and would
   otherwise set a 42px section heading on a card title. */
:is(.page-blog) .post-list__title {
  font-family: var(--sk-heading);
  font-size: clamp(20px, 1.6vw, 25px);
  line-height: 1.22;
  letter-spacing: -0.03em;
}

/* Navy, not the site's green link colour. The blog index does not load
   resource.css, which is where .post-list__title a was given its navy,
   so the title fell through to the global green anchor rule. */
.post-list__title a {
  color: var(--sk-navy);
  text-decoration: none;
}

.post-list__title a:hover,
.post-list__title a:focus-visible {
  color: var(--sk-navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.post-list__meta {
  font-family: var(--sk-body);
  font-size: 13px;
  color: var(--sk-muted);
}

.post-list__excerpt {
  font-family: var(--sk-body);
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--sk-card-text);
  max-width: 72ch;
}

.post-list__more {
  margin-top: 2px;
}

.post-list__more a {
  display: inline-flex;
  align-items: center;
  font-family: var(--sk-body);
  font-weight: 500;
  font-size: 13.5px;
  color: var(--sk-navy);
}

.post-list__arrow {
  display: inline-block;
  margin-left: 8px;
  transition: transform 0.3s var(--sk-ease);
}

.post-list__item:hover .post-list__arrow,
.post-list__more a:hover .post-list__arrow,
.post-list__more a:focus-visible .post-list__arrow {
  transform: translateX(6px);
}

@media (prefers-reduced-motion: reduce) {
  .post-list__item,
  .post-list__arrow {
    transition: none;
  }
  .post-list__item:hover {
    transform: none;
  }
}

.pager__status {
  font-family: var(--sk-body);
  font-size: 13.5px;
  color: var(--sk-muted);
}

.preview-banner {
  font-family: var(--sk-body);
}

/* ---------------------------------------------------------------
   GLOSSARY AND SITEMAP
--------------------------------------------------------------- */

.glossary-index a,
.states-grid a {
  font-family: var(--sk-heading);
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: -0.015em;
  color: var(--sk-navy);
}

.glossary-letter {
  font-family: var(--sk-heading);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--sk-navy);
}

.glossary-group {
  background: var(--sk-white);
  border: 1px solid var(--sk-hairline-soft);
  border-radius: 22px;
  padding: 30px 32px;
  margin-bottom: 16px;
  box-shadow: var(--sk-shadow-rest);
}

.glossary-list dt {
  font-family: var(--sk-heading);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--sk-navy);
}

.glossary-list dd {
  font-family: var(--sk-body);
  color: var(--sk-prose);
  line-height: 1.7;
  max-width: 72ch;
}

/* ---------------------------------------------------------------
   LEGAL PAGES
   Long text, so measure matters more than anything else here.
--------------------------------------------------------------- */

:is(.page-legal) .solution-section__inner > p,
:is(.page-legal) .solution-section__inner li {
  font-size: 16px;
  line-height: 1.8;
  color: var(--sk-prose);
  max-width: 72ch;
}

:is(.page-legal) .solution-section__inner > h3 {
  margin-top: 30px;
  margin-bottom: 8px;
}

/* ---------------------------------------------------------------
   CONSENT CHECKBOX

   Shares the coverage checkbox mechanics so it feels part of the same
   form, but is deliberately a single full-width agreement rather than
   one card in a grid, so it does not read as another multi-select
   option.
--------------------------------------------------------------- */

.form-consent {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 18px 20px;
  border-radius: 14px;
  background: var(--sk-panel);
  border: 1px solid rgba(11, 11, 69, 0.12);
  cursor: pointer;
  transition: border-color 0.24s, background 0.24s;
}

.form-consent:hover {
  border-color: rgba(11, 11, 69, 0.26);
}

.form-consent .form-check__box {
  margin-top: 1px;
}

.form-consent__text {
  font-family: var(--sk-body);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--sk-navy);
  font-weight: 500;
}

/* A checked agreement reads as settled rather than outstanding. */
.form-consent:has(.form-check__input:checked) {
  border-color: rgba(108, 153, 52, 0.45);
  background: rgba(108, 153, 52, 0.06);
}

.form-consent--error {
  border-color: #8A1F1F;
  background: #FDECEC;
}

/* ===============================================================
   APPROVED DESIGN ROLLOUT
   Light hero, hero stat cards, green card CTAs, legible index
   numbers, and the dark rounded CTA panel. Scoped to every page
   type through the same :is() list used above.
   =============================================================== */

/* ---------------------------------------------------------------
   LIGHT HERO

   Replaces the dark navy gradient on every hero WITHOUT a photo.
   A hero that has a photo keeps it: .solution-hero--media is
   untouched here and handled below. That is what keeps all 16 state
   heroes rendering their images.
--------------------------------------------------------------- */

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .solution-hero:not(.solution-hero--media),
:is(.page-hub) .hub-hero:not(.hub-hero--media) {
  position: relative;
  overflow: hidden;
  background: var(--sk-hero-light);
  color: var(--sk-navy);
  /* Was 76 top / 104 bottom. Symmetric now, so the 28px surplus under
     the buttons is gone and the block reads as composed at the sizes
     where height is content-driven. Desktop overrides this with
     --hero-pad-lg; below 1024px this is the whole story. */
  padding: 88px 0;
}

/* Two soft bleeds, blue top right and green bottom left. */
:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .solution-hero:not(.solution-hero--media):after,
:is(.page-hub) .hub-hero:not(.hub-hero--media):after {
  content: "";
  position: absolute;
  top: -320px;
  right: -200px;
  width: 1000px;
  height: 1000px;
  border-radius: 50%;
  background: var(--sk-hero-bleed-blue);
  pointer-events: none;
}

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .solution-hero:not(.solution-hero--media):before,
:is(.page-hub) .hub-hero:not(.hub-hero--media):before {
  content: "";
  position: absolute;
  bottom: -380px;
  left: -240px;
  width: 880px;
  height: 880px;
  border-radius: 50%;
  background: var(--sk-hero-bleed-green);
  pointer-events: none;
}

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .solution-hero:not(.solution-hero--media) .solution-hero__inner,
:is(.page-hub) .hub-hero:not(.hub-hero--media) .hub-hero__inner {
  position: relative;
  z-index: 2;
}

/* Type on the light ground. */
:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .solution-hero:not(.solution-hero--media) .solution-hero__title,
:is(.page-hub) .hub-hero:not(.hub-hero--media) .hub-hero__title {
  font-size: clamp(42px, 5.2vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.05em;
  color: var(--sk-navy);
}

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .solution-hero:not(.solution-hero--media) .solution-hero__lead,
:is(.page-hub) .hub-hero:not(.hub-hero--media) .hub-hero__lead {
  font-size: 19px;
  line-height: 1.68;
  color: var(--sk-lede);
  max-width: var(--hero-measure);
}

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .solution-hero:not(.solution-hero--media) .solution-hero__eyebrow,
:is(.page-hub) .hub-hero:not(.hub-hero--media) .hub-hero__eyebrow {
  color: var(--sk-eyebrow);
  letter-spacing: 0.17em;
  gap: 11px;
}

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .solution-hero:not(.solution-hero--media) .solution-hero__eyebrow:before,
:is(.page-hub) .hub-hero:not(.hub-hero--media) .hub-hero__eyebrow:before {
  width: 26px;
  background: var(--sk-green);
}

/* ---------------------------------------------------------------
   PHOTO HERO

   Kept, per the hard rule. The overlay is warmed toward navy so the
   Sora headline stays legible over a photograph, and the type scale
   matches the light hero so the two read as one system.
--------------------------------------------------------------- */

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource) .solution-hero--media .solution-hero__scrim {
  background: linear-gradient(112deg, rgba(11, 11, 69, 0.92) 0%, rgba(11, 11, 69, 0.79) 48%, rgba(11, 11, 69, 0.64) 100%);
}

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource) .solution-hero--media .solution-hero__title {
  font-size: clamp(42px, 5.2vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.05em;
  color: var(--sk-white);
}

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource) .solution-hero--media .solution-hero__lead {
  font-size: 19px;
  line-height: 1.68;
  /* Solid white. At 0.86 this lead measured 3.90:1 at 390px against the
     lightest point of the photo, because the glyph itself was 14 percent
     photograph. Opaque white plus the deeper scrim below clears 4.5:1. */
  color: var(--sk-white);
  max-width: var(--hero-measure);
}

/* ---------------------------------------------------------------
   CARD CTA: full-width green pill at the bottom of the card

   424 .card__link instances across 43 templates, so this is done in
   CSS. The card becomes a column and the text flexes, which pins the
   button to the bottom and keeps a row of cards aligned.
--------------------------------------------------------------- */

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .card {
  display: flex;
  flex-direction: column;
  padding: 34px 32px 32px;
}

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .card__text {
  flex: 1;
  margin-bottom: 26px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--sk-card-text);
}

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .card__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  margin-top: auto;
  padding: 13px 22px;
  border-radius: var(--sk-radius-pill);
  /* White on --sk-green is 3.36:1; --sk-green-cta is 4.95:1. */
  border: 1px solid var(--sk-green-cta);
  background: var(--sk-green-cta);
  color: var(--sk-white);
  font-family: var(--sk-body);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  text-align: center;
  transition: background 0.3s var(--sk-ease), border-color 0.3s var(--sk-ease), color 0.3s, transform 0.3s var(--sk-ease), box-shadow 0.3s var(--sk-ease);
}

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .card__link:hover,
:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .card__link:focus-visible {
  background: var(--sk-green-cta-hover);
  border-color: var(--sk-green-cta-hover);
  color: var(--sk-white);
  transform: translateY(-2px);
  box-shadow: 0 14px 32px -10px rgba(108, 153, 52, 0.5);
}

/* The arrow the earlier pass appended is redundant inside a pill. */
:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .card__link:after {
  content: none;
}

/* ---------------------------------------------------------------
   INDEX NUMBERS
   14px, weight 700, readable. Green on hover, bright green on navy.
--------------------------------------------------------------- */

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .card-grid > .card:after,
:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .feature:after {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--sk-num);
  top: 32px;
  right: 30px;
}

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .card-grid > .card:hover:after,
:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .feature:hover:after {
  color: var(--sk-num-hover);
}

/* Numbered process steps. */
:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote) .process-steps__num,
:is(.page-hub) .program-steps li:before {
  font-family: var(--sk-heading);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--sk-num);
  background: none;
}

/* On a navy ground the number switches to the bright green. */
:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource) .solution-cta .card:after,
:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource) .step.navy .snum {
  color: var(--sk-num-dark);
}

/* ---------------------------------------------------------------
   BUTTONS
   Primary green, secondary white inverting to solid navy. Every
   state sets colour explicitly: main.css has a global a:hover colour
   that silently blanks button text otherwise.
--------------------------------------------------------------- */

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .btn--primary {
  background: var(--sk-green-cta);
  border-color: var(--sk-green);
  color: var(--sk-white);
}

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .btn--primary:hover,
:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .btn--primary:focus-visible {
  background: var(--sk-green-cta-hover);
  border-color: var(--sk-green-cta-hover);
  color: var(--sk-white);
  transform: translateY(-2px);
  box-shadow: 0 14px 32px -10px rgba(108, 153, 52, 0.5);
}

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .btn--secondary {
  background: var(--sk-white);
  color: var(--sk-navy);
  border-color: rgba(11, 11, 69, 0.18);
}

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .btn--secondary:hover,
:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .btn--secondary:focus-visible {
  background: var(--sk-navy);
  color: var(--sk-white);
  border-color: var(--sk-navy);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -12px rgba(11, 11, 69, 0.3);
}

/* On dark grounds: the photo hero and the dark CTA panel. */
:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource) .solution-hero--media .btn--secondary,
:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote) .solution-cta .btn--secondary,
:is(.page-hub) .hub-cta .btn--secondary {
  /* SOLID, never translucent. This was rgba(255,255,255,0.08), so the
     hero photograph showed straight through the button and it read as
     broken glass rather than a control. White fill, navy label, alpha 1. */
  background: var(--white);
  color: var(--navy);
  border-color: var(--white);
}

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource) .solution-hero--media .btn--secondary:hover,
:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote) .solution-cta .btn--secondary:hover,
:is(.page-hub) .hub-cta .btn--secondary:hover,
:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource) .solution-hero--media .btn--secondary:focus-visible,
:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote) .solution-cta .btn--secondary:focus-visible,
:is(.page-hub) .hub-cta .btn--secondary:focus-visible {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
}

/* ---------------------------------------------------------------
   CTA: a dark rounded panel, not a full-bleed band
--------------------------------------------------------------- */

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote) .solution-cta,
:is(.page-hub) .hub-cta {
  background: var(--sk-section-wash);
  padding: 0 0 100px;
}

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote) .solution-cta:after,
:is(.page-hub) .hub-cta:after {
  content: none;
}

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote) .solution-cta > .solution-cta__inner,
:is(.page-hub) .hub-cta > .hub-cta__inner {
  background: var(--sk-cta-dark);
  border-radius: 28px;
  padding: 72px 60px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote) .solution-cta__inner:after,
:is(.page-hub) .hub-cta__inner:after {
  content: "";
  position: absolute;
  top: -200px;
  right: -140px;
  width: 640px;
  height: 640px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(108, 153, 52, 0.2), transparent 66%);
  pointer-events: none;
}

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote) .solution-cta__inner > *,
:is(.page-hub) .hub-cta__inner > * {
  position: relative;
  z-index: 2;
}

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote) .solution-cta h2,
:is(.page-hub) .hub-cta h2 {
  color: var(--sk-white);
}

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote) .solution-cta h2:before,
:is(.page-hub) .hub-cta h2:before {
  content: none;
}

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote) .solution-cta p,
:is(.page-hub) .hub-cta p {
  color: #A9B6D6;
  font-size: 17px;
  line-height: 1.65;
}

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote) .solution-cta .btn--primary,
:is(.page-hub) .hub-cta .btn--primary {
  background: var(--sk-green-cta);
  border-color: var(--sk-green);
  color: var(--sk-white);
}

/* ===============================================================
   BUG FIXES: button colour, number placement, coverage grid width
   =============================================================== */

/* ---------------------------------------------------------------
   BUG 1. Light-hero secondary button.

   solution.css and hub.css set colour:white on this button for the old
   dark hero and load after this file, so on the light hero it rendered
   white on white. Those rules are now scoped to the photo hero at
   source. This is the light-ground treatment, with colour set
   explicitly in BOTH states so no cascade can blank it again.
--------------------------------------------------------------- */

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .solution-hero:not(.solution-hero--media) .btn--secondary,
:is(.page-hub) .hub-hero:not(.hub-hero--media) .btn--secondary {
  background: var(--sk-white);
  color: var(--sk-navy);
  border-color: rgba(11, 11, 69, 0.18);
}

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .solution-hero:not(.solution-hero--media) .btn--secondary:hover,
:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .solution-hero:not(.solution-hero--media) .btn--secondary:focus-visible,
:is(.page-hub) .hub-hero:not(.hub-hero--media) .btn--secondary:hover,
:is(.page-hub) .hub-hero:not(.hub-hero--media) .btn--secondary:focus-visible {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
}

/* ---------------------------------------------------------------
   BUG 2. The index number belongs in the heading's row.

   It was absolutely positioned, so it overlapped or sat under the
   title. Now the title itself is the flex row and the number is its
   trailing item: same row, right aligned, top aligned, and it cannot
   overlap because it is a flex sibling of the text rather than a layer
   on top of it.
--------------------------------------------------------------- */

/* Retire the absolute version. */
:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .card-grid > .card:after,
:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .feature:after {
  content: none;
}

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .card-grid,
:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .feature-grid {
  counter-reset: pcard;
}

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .card-grid > .card,
:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .feature-grid > .feature {
  counter-increment: pcard;
}

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .card-grid > .card .card__title,
:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .feature-grid > .feature h3 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  padding-right: 0;
}

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .card-grid > .card .card__title:after,
:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .feature-grid > .feature h3:after {
  content: counter(pcard, decimal-leading-zero);
  font-family: var(--sk-heading);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.1;
  color: var(--sk-num);
  flex-shrink: 0;
  padding-top: 4px;
  transition: color 0.5s;
}

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .card:hover .card__title:after,
:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .feature:hover h3:after {
  color: var(--sk-num-hover);
}

/* On a navy ground the number switches to the bright green. */
:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote) .solution-cta .card__title:after,
:is(.page-hub) .hub-cta .card__title:after {
  color: var(--sk-num-dark);
}

/* Numbered process steps: number top right, on the heading's row. */
:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote) .process-steps li {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 20px;
  align-items: start;
}

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote) .process-steps li > h3 {
  grid-column: 1;
  grid-row: 1;
}

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote) .process-steps__num {
  grid-column: 2;
  grid-row: 1;
  font-family: var(--sk-heading);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--sk-num);
  background: none;
  width: auto;
  height: auto;
  min-width: 0;
  padding: 4px 0 0;
  border-radius: 0;
  display: block;
}

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote) .process-steps li > p {
  grid-column: 1 / -1;
  grid-row: 2;
}

/* ---------------------------------------------------------------
   BUG 3. Coverage grid was 4 across, wrapping headings and buttons.

   components.css uses repeat(auto-fit, minmax(280px, 1fr)), which fits
   four columns in the 1280px container. Explicit counts instead.
--------------------------------------------------------------- */

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .card-grid,
:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote) .feature-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

@media (max-width: 1100px) {
  :is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .card-grid,
  :is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote) .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 700px) {
  :is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .card-grid,
  :is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote) .feature-grid {
    grid-template-columns: 1fr;
  }
}

/* Button label on one line. Nothing in the markup is shortened: the
   type is stepped down and the pill is allowed to hold a single line. */
:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .card__link {
  white-space: nowrap;
  font-size: 13.5px;
  padding: 13px 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  text-align: center;
  line-height: 1.3;
}

@media (max-width: 1240px) and (min-width: 1101px) {
  :is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote) .card__link {
    font-size: 12.5px;
    padding: 13px 14px;
  }
}

/* ---------------------------------------------------------------
   ROUND 2 FIX: HUB STEP NUMBERS

   hub.css sizes the step number as an absolutely positioned badge at
   top-left and reserves room for it with
   `padding-left: calc(var(--space-lg) + 3rem)` on the li.

   The redesign block above restyles `.page-hub .program-steps li` with
   a flat `padding: 28px 26px`, which REMOVED that reserved gutter. The
   badge, still absolute, then had nowhere of its own to sit and landed
   on top of the heading and body copy.

   Fixed structurally rather than by restoring the gutter: the number is
   now a flex sibling of the heading text inside the h3, so it occupies
   real space in the layout and cannot overlap anything. No absolute
   positioning is involved.
--------------------------------------------------------------- */

:is(.page-hub) .program-steps li:before {
  content: none;
}

:is(.page-hub) .program-steps h3 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}

:is(.page-hub) .program-steps h3:after {
  content: counter(step);
  font-family: var(--sk-heading);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.1;
  color: var(--sk-num);
  flex-shrink: 0;
  padding-top: 4px;
  transition: color 0.5s;
}

/* Navy step cards take the bright green so the number stays legible. */
:is(.page-hub) .program-steps li:nth-child(3n+3) h3:after {
  color: var(--sk-num-dark);
}

:is(.page-hub) .program-steps li:hover h3:after {
  color: var(--sk-num-hover);
}

:is(.page-hub) .program-steps li:nth-child(3n+3):hover h3:after {
  color: var(--sk-num-dark);
}

/* ---------------------------------------------------------------
   ROUND 2 FIX: TRAILING LINK AND BUTTON ALIGNMENT

   `.card` was already a flex column, but nothing flexed, so every card
   was only as tall as its own content and the trailing link sat wherever
   the copy happened to end. Cards in a grid row stretch to equal height,
   so the links landed at different heights.

   The body now flexes and the trailing element takes `margin-top: auto`,
   which pins it to the bottom edge of the card. Because every card in a
   row is the same height, the trailing elements are then the same
   distance from the top of the row. This holds whether the card ends in
   a text link or a button.
--------------------------------------------------------------- */

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .card-grid > .card {
  display: flex;
  flex-direction: column;
}

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .card-grid > .card > .card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

/* The copy absorbs the slack, so whatever follows it is pushed to the
   bottom edge of the card. Grid rows stretch every card to the same
   height, so those trailing elements then share one baseline. */
:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .card-grid > .card .card__text,
:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .card-grid > .card > .card__body > p {
  flex: 1 1 auto;
}

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .card-grid > .card .card__link,
:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .card-grid > .card > .card__body > .btn {
  margin-top: auto;
  align-self: flex-start;
}

/* Card headings on inner pages: same one-line treatment as the homepage. */
:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .card-grid > .card .card__title {
  font-size: 16px;
  letter-spacing: -0.022em;
  gap: 10px;
}

/* ---------------------------------------------------------------
   ORPHANED PROSE

   A section whose inner container holds a card grid, list or table is
   excluded from the panel rules above by their `:not(:has(...))` gates.
   That is correct for the grid itself, but it also means any paragraph
   sitting beside the grid gets no panel and renders bare on the section
   background at a 72ch measure, with dead space beside it. Measured
   across the whole site that was 305 paragraphs on 43 pages, every one
   of them 727px wide inside a 1360px container.

   This is a shared rule keyed on shape rather than on page, so a section
   that grows a stray paragraph later is caught automatically and no page
   needs its own fix.

   WHY `p:not([class])`: every functional paragraph in the codebase
   carries a class (.card__text, .section-cta, .cost-card__range,
   .author-box__*, .quote-form__privacy and so on) and every one of them
   already lives inside a card or panel. Unclassed prose that is a direct
   child of the section container is exactly the orphaned case and
   nothing else.

   Consecutive paragraphs are drawn as one continuous panel: the run's
   first item carries the top edge, its last item the bottom edge and the
   shadow, and the middle segments only the sides. They butt together
   with no margin, so the seams do not show.
--------------------------------------------------------------- */

:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) :is(.solution-section, .hub-section) > .container:has(.card-grid, .accordion, .checklist, ul, ol, table, .program-steps, .card, .claim-card, .glossary-group, .cost-card) > p:not([class]) {
  background: var(--sk-white);
  border-left: 1px solid var(--sk-hairline-soft);
  border-right: 1px solid var(--sk-hairline-soft);
  border-top: 0 solid var(--sk-hairline-soft);
  border-bottom: 0 solid var(--sk-hairline-soft);
  border-radius: 0;
  /* Inside a contained panel the measure is already controlled, so the
     copy runs the panel's full width instead of a 72ch column. */
  max-width: none;
  width: auto;
  margin: 0;
  padding: 0 52px 22px;
}

/* First paragraph of a run: top edge of the panel. */
:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) :is(.solution-section, .hub-section) > .container:has(.card-grid, .accordion, .checklist, ul, ol, table, .program-steps, .card, .claim-card, .glossary-group, .cost-card) > p:not([class]):not(p:not([class]) + p:not([class])) {
  border-top-width: 1px;
  border-top-left-radius: 26px;
  border-top-right-radius: 26px;
  padding-top: 46px;
  margin-top: 28px;
}

/* Last paragraph of a run: bottom edge, and the only shadow, so a run
   never shows a shadow band between its own segments. */
:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) :is(.solution-section, .hub-section) > .container:has(.card-grid, .accordion, .checklist, ul, ol, table, .program-steps, .card, .claim-card, .glossary-group, .cost-card) > p:not([class]):not(:has(+ p:not([class]))) {
  border-bottom-width: 1px;
  border-bottom-left-radius: 26px;
  border-bottom-right-radius: 26px;
  padding-bottom: 46px;
  margin-bottom: 28px;
  box-shadow: var(--sk-shadow-panel-soft);
}

/* NO MULTICOL HERE. These are individual paragraphs each drawn as one
   segment of a panel. Putting `columns: 2` on a single paragraph splits
   that paragraph's own sentences across two columns, which is exactly the
   mid-sentence break we are removing. They run the panel's full width. */

/* The closing note after the step sequence on the solutions hub reads as
   a conclusion, so it is labelled like a section eyebrow rather than
   left to look like leftover text. Generated content, so the markup and
   the copy are untouched. */
:is(.page-hub) .hub-section > .container > .program-steps + p:not([class]):before {
  content: "In short";
  display: block;
  font-family: var(--sk-heading);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sk-num);
  margin-bottom: 14px;
}


/* ---------------------------------------------------------------
   MOBILE: PROSE PANELS DROP TO ONE COLUMN

   Inner-page prose panels and orphaned-prose runs. At 430px the panel is about 485px wide, so a
   two-column split gave roughly 20 characters per line, which is
   unreadable. Below 768px the split collapses.

   These repeat the exact selectors that set `columns: 2` above. A
   media query adds no specificity, so matching the original
   selector and coming later in the file is what makes them win.
--------------------------------------------------------------- */

@media (max-width: 768px) {
  :is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .solution-section__inner:not(:has(.card-grid, .accordion, .checklist, ul, ol, table, .solution-cta__actions, .card, .claim-card, .glossary-group, .cost-card)):has(p + p) {
    grid-template-columns: 1fr;
    column-gap: normal;
  }

  :is(.page-hub) .hub-section__inner:not(:has(.card-grid, .accordion, .checklist, ul, ol, table, .program-steps, .card, .claim-card, .glossary-group, .cost-card)):has(p + p) {
    grid-template-columns: 1fr;
    column-gap: normal;
  }

}

/* ---------------------------------------------------------------
   HERO PRESENCE, DESKTOP ONLY

   Two complaints, both of which apply to every hero.

   HEIGHT. Raising the padding was the wrong lever and it is gone. A
   hero measured by its content finished 553 to 759px on a 900px
   viewport, 61 to 84% of it, so the section read short on exactly the
   pages with the least copy. Height now comes from the viewport, and
   the content block is centred in it rather than sitting at the top of
   a padded box. See --hero-height in tokens.css.

   DEAD SPACE ON THE RIGHT. Every hero had it, not just the gradient
   ones. An earlier pass widened the gradient hub leads to 820px and
   deliberately left the photo heroes at 620px on the theory that a
   photograph fills its own right-hand side. It does not: the
   photograph is a background, the copy is the content, and a lead
   ending at 47% of the container reads as a column in the left third
   whatever is painted behind it. All heroes now share one measure.

   THE BREAKPOINT IS 1024px, and it is a real boundary rather than a
   tidy number: everything here is about filling a landscape window,
   and none of it helps a portrait one.

   A phone hero is already tall. Measured across all 88 pages at
   390x844 they run 519 to 802px, 62 to 95% of the viewport, on content
   alone, because the headline wraps to four or five lines and the lead
   to six or seven. Asking for 80vh there would add nothing on most
   pages and push the buttons under the fold on the rest. So below
   1024px the height stays content-driven, with generous symmetric
   padding, and the lead already ran the full column.
--------------------------------------------------------------- */
@media (min-width: 1024px) {
  /* HEIGHT AND VERTICAL CENTRING, photo and gradient alike.

     Both variants are spelled out because the gradient rule that sets
     the base padding carries a :not() and so outranks a bare
     .solution-hero. Matching its shape here means source order decides,
     and this is later.

     The hero becomes a flex container and .solution-hero__inner is its
     only in-flow child, so align-items: center composes the eyebrow,
     headline, lead and buttons as one block in the middle of the
     height. The photo layer and the two gradient bleeds are all
     position: absolute, so none of them become flex items. */
  :is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .solution-hero,
  :is(.page-hub) .hub-hero,
  :is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .solution-hero:not(.solution-hero--media),
  :is(.page-hub) .hub-hero:not(.hub-hero--media),
  :is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .solution-hero--media,
  :is(.page-hub) .hub-hero--media {
    min-height: var(--hero-height);
    display: flex;
    align-items: center;
    padding-top: var(--hero-pad-lg);
    padding-bottom: var(--hero-pad-lg);
  }

  /* ONE MEASURE, PHOTO OR GRADIENT. 620px and 820px both become 920px,
     which is 72% of the 1280px content box at 1440px, and the lead
     steps from 19px to 21px so that 920px still holds a 76 to 79
     character line rather than a 92 character one.

     The gradient and photo selectors are both spelled out because the
     blocks above that set the old measure carry a :not() or a --media
     class and so outrank a bare .solution-hero__lead. Matching their
     shape here means source order decides, and this is later. */
  :is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .solution-hero__lead,
  :is(.page-hub) .hub-hero__lead,
  :is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .solution-hero:not(.solution-hero--media) .solution-hero__lead,
  :is(.page-hub) .hub-hero:not(.hub-hero--media) .hub-hero__lead,
  :is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .solution-hero--media .solution-hero__lead,
  :is(.page-hub) .hub-hero--media .hub-hero__lead {
    font-size: var(--hero-lead-size-lg);
    max-width: var(--hero-measure-lg);
  }

  /* The headline takes the whole column. The 20ch and 22ch caps in
     solution.css and hub.css are gone; this is the belt to those
     braces, so a page that ships without its $extra_css still widens.
     The homepage is the exception and keeps its cap, for the reason
     written on .hero__title in home.css. */
  :is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .solution-hero__title,
  :is(.page-hub) .hub-hero__title {
    max-width: none;
  }
}

/* ---------------------------------------------------------------
   INLINE LINKS IN HERO COPY

   No hero currently contains an inline link: checked every page type
   locally and on the live site, and every anchor inside a hero today is
   a button. This rule exists so that the first one added does not
   inherit the green accent, which is what makes a link unreadable over
   a photograph.

   Over a photo the link is white and underlined, so it is legible
   against any part of the image and still reads as a link without
   relying on colour. Over the light gradient heroes the accessible
   on-light green is used instead, which is 4.96:1 on white.
--------------------------------------------------------------- */
:is(.page-home) .hero__lead a:not(.btn):not(.sk-btn),
:is(.page-home) .hero__title a:not(.btn):not(.sk-btn),
:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .solution-hero--media .solution-hero__lead a:not(.btn):not(.sk-btn),
:is(.page-hub) .hub-hero--media .hub-hero__lead a:not(.btn):not(.sk-btn) {
  color: var(--sk-white);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

:is(.page-home) .hero__lead a:not(.btn):not(.sk-btn):hover,
:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .solution-hero--media .solution-hero__lead a:not(.btn):not(.sk-btn):hover,
:is(.page-hub) .hub-hero--media .hub-hero__lead a:not(.btn):not(.sk-btn):hover {
  color: var(--sk-white);
  text-decoration-thickness: 2px;
}

/* Gradient heroes carry navy text on a light wash, so green is legible
   there, provided it is the on-light green rather than the accent. */
:is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .solution-hero:not(.solution-hero--media) .solution-hero__lead a:not(.btn):not(.sk-btn),
:is(.page-hub) .hub-hero:not(.hub-hero--media) .hub-hero__lead a:not(.btn):not(.sk-btn) {
  color: var(--sk-on-light-green);
  text-decoration: underline;
  text-underline-offset: 3px;
}