/* ---------------------------------------------------------------
   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 the heading face 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);
  /* SINGLE COLUMN, at the measure the design already reads at.

     This panel used to place each paragraph as a whole grid item in a
     two-column grid. Audited at 1440px across 88 pages: 451 of these
     sections, and 343 of them, 76%, ended with one column more than
     20% taller than the other, because whole paragraphs of unequal
     length cannot balance. The Texas "What the contracts typically ask
     for" section was a nine-line paragraph beside a three-line one.

     Native multicol balancing was measured as the alternative and does
     not rescue it: with break-inside:avoid keeping paragraphs whole,
     378 of 533 sections were still over 20%. Nor is there a subset
     worth keeping in two columns. The best group, sections with
     exactly two columned paragraphs, is 18 of 34 within tolerance, and
     four-paragraph sections are 61 of 150. No selector expressible in
     CSS holds the 20% line, so every one of them goes single column,
     which is 0% by construction and reads strictly top to bottom.

     THE PANEL IS NOT THE MEASURE. It used to be: this carried
     max-width 740px so the paragraph inside it ran 85 characters. That
     put the panel's own left edge at x=350 while every heading on the
     page sat at x=80, which is the misalignment this pass exists to
     remove. The panel goes on the content line with everything else and
     the measure moves onto the paragraph, where it belongs. See the
     PROSE MEASURE rule at the end of this file. */
}

/* ONE COLUMN. The note below records what this used to be.
   `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;
  /* row-gap: 0, not the 18px this carried as a two-column grid. There,
     18px separated rows of side-by-side paragraphs. In one column it
     lands between every paragraph and adds to the 24px margin they
     already carry, giving 42px of space against a 28px line: one and
     a half blank lines between paragraphs. Spacing comes from the
     paragraph margin alone now. */
  row-gap: 0;
  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 {
  /* The increment lives on the card element (see further down this
     file), not here. Having both the element and its pseudo-element
     increment pcard stepped the counter twice per card, so every
     grid numbered itself 02, 04, 06 instead of 01, 02, 03. */
  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;
  /* Same problem and same fix as .author-box__title: --sk-green is a
     mid green that only reaches 3.30:1 as text on a white card.
     --sk-on-light-green is the token for green text on a light ground,
     5.62:1 here. Scoped rather than a token change, because --sk-green
     is a BACKGROUND in seven places and must not move. */
  color: var(--sk-on-light-green);
}

/* ---------------------------------------------------------------
   CHECKLIST
   The light twin of the exclusion band. Same structure, same row
   rhythm, same tiled mark, inverted for a light ground: white-to-wash
   gradient instead of navy, green tint instead of red.

   142 lists across 71 pages, all built from <ul class="checklist"><li>,
   so this is done in CSS with no template change.

   The mark stays absolutely positioned. It is not a flex or grid item,
   for the reason recorded below: these rows carry inline <strong> and
   links, and a flex container promotes every child element to its own
   item, which splits the row.
--------------------------------------------------------------- */

: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 {
  display: block;
  gap: 0;
  list-style: none;
  margin: 28px 0;
  padding: 4px 28px;
  background: linear-gradient(168deg, #FFFFFF 0%, #FAFBFE 100%);
  border: 1px solid rgba(11, 11, 69, 0.09);
  border-radius: 20px;
  box-shadow: var(--sk-shadow-panel-soft);
}

: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);
  /* The mark stays absolutely positioned and the indent comes down
     from 32px to 26px.

     A two-column grid was the obvious way to state the gap explicitly,
     and it is wrong here: a grid wraps every inline child in its own
     grid item, so a list item containing a <strong> or a link splits
     across items and lands on a second row. One item on the state
     pages did exactly that, sizing the mark column to 121px instead of
     16px and pushing the document 86px wider than the viewport. These
     items carry inline markup, so the mark has to stay out of flow.

     26px of indent against a mark that measures about 16px at its new
     size leaves a 10px gap, down from 22px.

     That 26px becomes 42px now that the mark is a 26px tile rather
     than a bare glyph: 26 for the tile plus a 16px gutter, matching
     the exclusion band's 28 + 16. */
  position: relative;
  padding: 17px 0 17px 42px;
  border-bottom: 1px solid rgba(11, 11, 69, 0.07);
}

: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:last-child {
  border-bottom: 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) .checklist li::before {
  /* A rounded square tile, the light counterpart of the exclusion
     band's red one. Absolutely positioned, so the row's inline markup
     is left alone. */
  position: absolute;
  left: 0;
  top: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: rgba(108, 153, 52, 0.11);
  border: 1px solid rgba(108, 153, 52, 0.26);
  /* 13px inside the tile rather than 1.15em: the glyph is centred by
     the flexbox now, so it no longer has to share the first line's
     box to sit on its baseline. */
  font-size: 13px;
  line-height: 1;
  font-weight: 800;
  /* --sk-green as text is 3.3:1, the same failure already fixed on
     .author-box__title and .cost-card__range. 811 marks on 71 pages. */
  color: var(--sk-on-light-green);
}

/* ---------------------------------------------------------------
   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 {
  /* 56px top, not 0. This block's first child is a bordered card, and
     with no top padding that card's edge landed exactly on the section
     boundary above it, on all 76 pages that carry an author box. 56px
     is the same top padding every .solution-section gets, so the card
     now clears the section above by the usual 44 + 56 = 100px. */
  padding: 56px 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;
  /* --sk-green is 3.20:1 on the author box, measured across all 228
     instances. --sk-on-light-green is the existing token for green text
     on a light ground and is 5.45:1 there. Same role, no new token. */
  color: var(--sk-on-light-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);
  /* Same as the solution panel above: on the content line, with the
     measure carried by the paragraph rather than the panel. */
}

: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;
  /* row-gap: 0, not the 18px this carried as a two-column grid. There,
     18px separated rows of side-by-side paragraphs. In one column it
     lands between every paragraph and adds to the 24px margin they
     already carry, giving 42px of space against a 28px line: one and
     a half blank lines between paragraphs. Spacing comes from the
     paragraph margin alone now. */
  row-gap: 0;
  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 {
  /* Was min(100%, 980px), its own island at x=230. On the line now. */
  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);
}

/* EYEBROW OVER A PHOTOGRAPH.

   The eyebrow falls through to --green (#6C9934) on the media heroes,
   which is a mid green on a navy scrim: 3.23:1 at worst. The scrim
   varies by photograph, so this was chosen against the lightest ground
   ANY eyebrow sits on rather than an average. Sampling all 216
   photo-hero eyebrows across every page at 1440, 768 and 390 gave
   11,043 distinct ground colours, the lightest being rgb(56,56,104) on
   the umbrella liability hero at 390px.

   --sk-green-bright is the existing token for green accent text on a
   dark ground and clears that worst case at 6.23:1. No new token, and
   it is already the colour of the dash beside the eyebrow on these
   heroes, so the mark and the word now match.

   Full page list, not the shorter photo-hero list used by the scrim
   rules below: /about/ carries a photograph too and was one of the
   failures. */
: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__eyebrow,
:is(.page-hub) .hub-hero--media .hub-hero__eyebrow {
  color: var(--sk-green-bright);
}

: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
   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);
  /* Top padding was zeroed when these stopped being full-bleed bands
     and became rounded panels, which left the panel touching the
     section above it. Restored to the section's own 56px. */
  padding: 56px 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;
  /* The PARAGRAPH is the panel here, so a max-width would shrink the
     painted card rather than the line inside it. The panel keeps its
     full width and the measure comes from the right padding instead.

     `max-width: none` is what this used to carry, on the reasoning
     that "inside a contained panel the measure is already controlled".
     It was not: measured at 1440px these ran 115 to 170 characters,
     the widest running text on the site, while the prose panel two
     sections up ran 90. One measure for both now.

     100% resolves against the container, which is the paragraph's
     containing block, so the arithmetic holds at every width; max()
     floors it at the panel's own padding so the rule cannot go
     negative and drop on a narrow viewport. */
  max-width: none;
  width: auto;
  margin: 0;
  padding: 0 52px 22px;
}

/* ---------------------------------------------------------------
   THE ORPHANED PANEL FLOWS IN TWO COLUMNS

   This panel has been three things. It was full width with its copy
   padded to a 760px measure, which left 414px of empty card. Then it
   hugged: `width: fit-content` shrank the card to the copy, which fixed
   the fill and broke the page, because a 864px card stacked between
   1280px cards reads as a mistake rather than as a measure. The hug is
   gone.

   The card is full width again, and the copy fills it by flowing across
   two columns - the same `columns: 424px 2`, the same
   `clamp(48px, 4.4vw, 64px)` gap and the same 1px --sk-hairline-soft
   rule as every multi-paragraph panel on the site.

   BREAKING MID-PARAGRAPH IS THE POINT HERE. Everywhere else
   `break-inside: avoid` keeps a paragraph whole, because a panel with
   several paragraphs can end a column at a paragraph boundary. This
   panel is ONE paragraph: there is no boundary, so avoiding the break
   would fill column one and leave column two empty. Nothing sets
   break-inside on it, and the text runs down the left column and
   continues at the top of the right, which is how a newspaper sets a
   single run of copy.

   THE MEASURE STILL APPLIES WHERE THERE IS ONLY ONE COLUMN. Between
   992 and 1081px the panel's content box is under the 896px that
   `columns: 424px 2` needs for two tracks, so it renders as one column
   and the padding gives it a measure, stepping 636 -> 760px at 1024px
   with the type. Above 1081px the columns are the measure and the
   padding is the card's own 52px.

   1082px is where a 760px measure stops filling 85% of the panel; the
   arithmetic is in the TWO-COLUMN PROSE SPLIT block. It is written as a
   breakpoint here rather than derived, because the measure lives in
   padding on this element and padding cannot be conditional on the used
   column count.
--------------------------------------------------------------- */

@media (min-width: 992px) {
  :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(form, input, textarea, select, button, iframe, video, embed, object, .cf-turnstile)) {
    columns: 424px 2;
    column-gap: clamp(48px, 4.4vw, 64px);
    column-rule: 1px solid var(--sk-hairline-soft);
  }

  /* TOO SHORT FOR TWO COLUMNS.

     `orphans` and `widows` both default to 2, so a paragraph of two
     rendered lines or fewer cannot be broken at all: the whole of it
     stays in column one and column two renders empty beside the rule.
     90 of the 381 lone paragraphs on the site did this at 1440px.

     They go back to one full-width column, where a two-line paragraph
     sets as one line across the panel and fills it. `data-onecol` is
     written into the markup by scripts/mark-short-prose.py from a
     measurement of every paragraph in Chrome, not from a character
     count: two-line paragraphs run 18 to 133 characters and three-line
     ones 120 to 573, and 35 of the two-line set sit in that overlap.
     The six sitemap intros are generated in a loop and carry the same
     attribute from a length test in that template.

     An attribute, not a class, because every orphan rule on the site is
     keyed on `p:not([class])`. */
  :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])[data-onecol] {
    columns: auto;
    column-rule: none;
  }
}

@media (min-width: 992px) and (max-width: 1081px) {
  :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]) {
    padding-right: max(52px, calc(100% - var(--prose-measure) - 52px));
  }
}

@media (min-width: 1024px) {
  :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]) {
    font-size: var(--prose-size-lg);
    line-height: 1.72;
  }
}

@media (min-width: 1024px) and (max-width: 1081px) {
  :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]) {
    padding-right: max(52px, calc(100% - var(--prose-measure-lg) - 52px));
  }
}

/* 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: 34px;
  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: 34px;
  margin-bottom: 28px;
  box-shadow: var(--sk-shadow-panel-soft);
}

/* A LONE paragraph, tighter again.

   46px top and bottom was chosen for a tall multi-paragraph panel. 456
   of the 554 panels on the site are one or two lines, where that put
   92px of air around 20px of text and the panel read as empty.

   Padding is scaled to the content by run length, which is as far as
   CSS can go: it cannot count the lines a paragraph wraps to, so there
   is no selector for "this one is six lines". A run of two or more
   paragraphs is always tall and keeps 34px at its ends; a paragraph
   that is both the first and the last of its run is the short case and
   takes 24px. That is the 82% of panels where the problem actually
   was. */
: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])):not(:has(+ p:not([class]))) {
  padding-top: 24px;
  padding-bottom: 24px;
}

/* And less side padding on a phone. 52px each side of a 350px panel is
   104px of padding around a 246px column, 30% of the panel's width,
   which pushed a two-line callout to ten lines. 24px gives it 302px. */
@media (max-width: 560px) {
  :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]) {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* 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.

   The second selector is the same note once its run is wrapped in
   .prose-panel: the paragraph stopped being the step list's adjacent
   sibling, the label vanished, and the resources hub lost 33px of
   height. Positional selectors are exactly what a wrapper breaks, and
   this was the only one on the site that pointed at a wrapped run. */
:is(.page-hub) .hub-section > .container > .program-steps + p:not([class]):before,
:is(.page-hub) .hub-section > .container > .program-steps + .prose-panel > p:first-child: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.
--------------------------------------------------------------- */

/* The two rules that used to live here dropped these panels to one
   column below 768px. One column is the default now, at every width,
   so they have been removed rather than left restating it. */

/* ---------------------------------------------------------------
   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;
}

/* ===============================================================
   CONTACT PAGE
   Scoped to .page-contact, which the contact template adds beside
   .page-resource so every rule above still matches.
   =============================================================== */

/* ---------------------------------------------------------------
   THE METHOD CARDS

   Four cards in a three-column grid put the fourth alone on a row
   with two empty columns beside it. The fourth, "Our office", is
   also a different kind of thing from the other three: Call, Email
   and Hours are ways to reach a person, that one is a place. It is
   now a full-width panel below the row, so the grid holds exactly
   three and there is no orphan at any width.

   The cards themselves are untouched .card.coverage-card and keep
   the site treatment: --sk-card-fill, the hairline border, the
   22px radius, --sk-shadow-rest and the 8px hover lift. Grid rows
   stretch by default, so the three are equal height.
--------------------------------------------------------------- */

/* EXPLICIT COLUMNS, so an orphan is impossible at any width.

   The shared grid is repeat(auto-fit, minmax(280px, 1fr)). With three
   cards that is fine at 1440px, where it resolves to three, but at
   768px the container is 720px wide and 3 x 280 + 2 x 20 does not fit,
   so auto-fit drops to two columns and leaves the third card alone with
   an empty column beside it: the same defect as before, one breakpoint
   down.

   Three above 900px. Two between 561 and 900, with the last card
   spanning the full row so no column is ever left empty. One below
   that, which is what the shared rule already does. */
:is(.page-contact) .card-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 900px) {
  :is(.page-contact) .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  :is(.page-contact) .card-grid > .card:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  :is(.page-contact) .card-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Buttons inside these cards were full-width pills, which on a label
   as short as a phone number reads as a slab rather than a control.
   Same pill treatment as every other card CTA, sized to its content. */
:is(.page-contact) .card-grid > .card .card__link {
  width: auto;
  align-self: flex-start;
}

/* ---------------------------------------------------------------
   OUR OFFICE PANEL

   The same surface as a card, at full width, holding the address on
   one side and the map on the other.
--------------------------------------------------------------- */

:is(.page-contact) .office-panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 20px;          /* the card grid's own gap */
  padding: 0;
  overflow: hidden;
  background: var(--sk-card-fill);
  border: 1px solid var(--sk-hairline-soft);
  border-radius: 22px;
  box-shadow: var(--sk-shadow-rest);
  transition: transform 0.5s var(--sk-ease), box-shadow 0.5s, border-color 0.5s;
}

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

/* Map beside the address from 900px up, stacked below it under that.
   The address column leads because it is the content; the map
   illustrates it. */
@media (min-width: 900px) {
  :is(.page-contact) .office-panel {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: stretch;
  }
}

:is(.page-contact) .office-panel__info {
  padding: 34px 32px 32px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

:is(.page-contact) .office-panel__title {
  font-family: var(--sk-heading);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.028em;
  margin-bottom: 10px;
}

:is(.page-contact) .office-panel__intro {
  font-family: var(--sk-body);
  font-size: 15px;
  line-height: 1.7;
  color: var(--sk-card-text);
  margin: 0;
  max-width: 46ch;
}

/* THE SEPARATION. The paragraph and the address ran together as two
   blocks of the same grey at the same size. A rule and real space
   between them makes the address read as a distinct block. */
:is(.page-contact) .office-panel__nap {
  width: 100%;
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--sk-hairline);
}

:is(.page-contact) .office-address {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-style: normal;
  font-family: var(--sk-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--sk-prose);
}

:is(.page-contact) .office-address__name {
  font-family: var(--sk-heading);
  font-weight: 600;
  color: var(--sk-navy);
}

/* Phone, email and hours as labelled rows rather than more lines of
   the address, so the address is an address and these are the ways to
   use it. */
:is(.page-contact) .office-contact {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

:is(.page-contact) .office-contact li {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: baseline;
  gap: 12px;
  margin: 0;
}

:is(.page-contact) .office-contact__label {
  font-family: var(--sk-heading);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* Back on --sk-label now that the token itself is compliant. This
     was scoped to --sk-muted when --sk-label was #8D96AD and 2.86:1 on
     this card; that special case is no longer needed, and these labels
     should match every other label on the site. */
  color: var(--sk-label);
}

:is(.page-contact) .office-contact__value {
  font-family: var(--sk-body);
  font-size: 15px;
  line-height: 1.5;
  /* --sk-on-light-green. The colour these links inherited measured
     3.95:1 on this card, under the 4.5:1 bar; this is 5.73:1 on white
     and 4.87:1 against the darkest ground the card gradient reaches.
     --green-dark has since been darkened to the same value site-wide. */
  color: var(--sk-on-light-green);
  word-break: break-word;
}

:is(.page-contact) .office-contact__value--plain {
  color: var(--sk-prose);
}

/* On a phone the 58px label column leaves 216px for the value, and the
   email address is 28 characters, so it broke mid-word. The label goes
   above the value instead, which gives it the full column. */
@media (max-width: 560px) {
  :is(.page-contact) .office-contact li {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
}

:is(.page-contact) .office-contact__value:hover,
:is(.page-contact) .office-contact__value:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

:is(.page-contact) .office-panel__cta {
  margin-top: 26px;
  width: auto;
  align-self: flex-start;
}

/* ---------------------------------------------------------------
   THE MAP

   Click to load: the placeholder is ours, the iframe is not created
   until someone asks for it, so the page contacts Google only on
   interaction. See initMapEmbed() in assets/js/main.js.
--------------------------------------------------------------- */

:is(.page-contact) .office-panel__map {
  min-height: 260px;
}

:is(.page-contact) .map-embed {
  position: relative;
  height: 100%;
  min-height: 260px;
  /* Stacked under the address, so the ratio is what gives it height.
     4:3 on a phone, where the column is narrow and a wide strip would
     show almost nothing. 16:9 on a tablet, because 4:3 of a 718px
     column is a 539px map, which is more of the screen than a map of
     one office earns. Above 900px it sits beside the address and takes
     the grid row's height instead. */
  aspect-ratio: 4 / 3;
  background:
    radial-gradient(circle at 30% 30%, rgba(108, 153, 52, 0.10), transparent 60%),
    var(--sk-panel);
  border-top: 1px solid var(--sk-hairline-soft);
}

@media (min-width: 561px) {
  :is(.page-contact) .map-embed {
    aspect-ratio: 16 / 9;
  }
}

@media (min-width: 900px) {
  :is(.page-contact) .map-embed {
    aspect-ratio: auto;
    border-top: 0;
    border-left: 1px solid var(--sk-hairline-soft);
  }
}

:is(.page-contact) .map-embed__load {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 28px 26px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: center;
  font-family: var(--sk-body);
  transition: background 0.4s var(--sk-ease);
}

:is(.page-contact) .map-embed__load:hover,
:is(.page-contact) .map-embed__load:focus-visible {
  background: rgba(11, 11, 69, 0.03);
}

:is(.page-contact) .map-embed__icon {
  color: var(--sk-on-light-green);
  line-height: 0;
}

:is(.page-contact) .map-embed__label {
  font-size: 15px;
  font-weight: 600;
  color: var(--sk-navy);
}

:is(.page-contact) .map-embed__note {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--sk-on-light-body);
  max-width: 34ch;
}

:is(.page-contact) .map-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 260px;
  border: 0;
}

:is(.page-contact) .map-embed__fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 26px;
  text-align: center;
  font-family: var(--sk-body);
  font-size: 15px;
  color: var(--sk-on-light-green);
}

/* ---------------------------------------------------------------
   GREEN PROSE LINKS

   --green-dark was #5a7f2b when this rule was written, which measured
   4.21:1 on the .alt-bg wash. It has since been darkened site-wide to
   #4E7024, the same value as --sk-on-light-green, so this rule is now
   a no-op that resolves to the colour it would inherit anyway.

   Kept as a guard rather than deleted: it names the requirement for
   this page explicitly, so if the two tokens are ever separated again
   the contact page does not quietly drop back under the bar.
--------------------------------------------------------------- */
:is(.page-contact) .solution-section__inner a:not(.btn):not(.card__link):not(.office-contact__value) {
  color: var(--sk-on-light-green);
}


/* ===============================================================
   APPROVED CARD SYSTEM
   design-reference.html, homepage and Texas state page.

   Every value below is the reference's. Where our markup differs
   from the reference's the difference is noted on the rule rather
   than papered over.
   =============================================================== */

/* ---------------------------------------------------------------
   PAGE GROUND
   The reference's light white-to-blue wash, kept as the site
   background exactly as the brief asks.
--------------------------------------------------------------- */
: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,
:is(.page-home) .alt-bg,
:is(.page-home) .trust-stats {
  background: linear-gradient(170deg, #FFFFFF 0%, #F6F9FD 30%, #EDF3FB 60%, #F4F8FD 100%);
}

/* ---------------------------------------------------------------
   CARD A, the primary light 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) .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,
:is(.page-home) .card-grid > .card {
  background: #fff;
  border: 1px solid rgba(11, 11, 69, 0.09);
  border-radius: 20px;
  padding: 30px 28px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: none;
  transition: transform 0.45s var(--sk-ease), box-shadow 0.45s, border-color 0.45s;
}

/* The wash that fades in from the top 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) .card:before,
:is(.page-home) .card-grid > .card:before {
  content: "";
  position: absolute;
  inset: 0;
  height: auto;
  background: linear-gradient(160deg, rgba(87, 123, 42, 0.06), transparent 55%);
  opacity: 0;
  transition: opacity 0.45s;
  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,
:is(.page-home) .card-grid > .card:hover {
  transform: translateY(-6px);
  border-color: rgba(11, 11, 69, 0.16);
  box-shadow: 0 28px 56px -24px rgba(11, 11, 69, 0.26);
}

: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,
:is(.page-home) .card-grid > .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 > *,
:is(.page-home) .card-grid > .card > * {
  position: relative;
  z-index: 2;
}

/* THE ICON TILE. 46px at 13px radius, scaling on hover.

   486 of the 1,059 cards on the site carry one: every card on the 50
   state pages, the 8 solution pages and the homepage. The other 573
   have no tile in the markup and none is invented here, because
   choosing an icon per card is a content decision, not a
   presentational one. A card without a tile simply starts at its
   title, which the flex column handles without a gap. */
: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) .icon-tile,
:is(.page-home) .icon-tile {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  margin-bottom: 22px;
  transition: transform 0.45s 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 .icon-tile,
:is(.page-home) .card-grid > .card:hover .icon-tile {
  transform: scale(1.06);
}

: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) .icon-tile--blue,
:is(.page-home) .icon-tile--blue {
  background: #E8EFFB;
  color: #2B4A8A;
}

: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) .icon-tile--green,
:is(.page-home) .icon-tile--green {
  background: #EDF3E3;
  color: #4E7024;
}

/* The index number, top right, green on hover.

   The homepage is NOT listed here on purpose. Its card element already
   carries counter-increment in home-redesign.css, so incrementing again
   on the pseudo-element stepped the counter twice per card and the
   homepage numbered its cards 02, 04, 06. home-redesign.css owns the
   homepage's copy of this rule. */
: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 {
  /* NO counter-increment here. The card element already increments
     pcard at line 1858, so incrementing again on its pseudo-element
     stepped the counter twice per card and every grid numbered
     itself 02, 04, 06. The same defect the homepage had. */
  content: counter(pcard, decimal-leading-zero);
  position: absolute;
  top: 28px;
  right: 28px;
  font-family: var(--sk-heading);
  font-size: 12.5px;
  font-weight: 700;
  color: #A8B1C6;
  transition: color 0.45s;
  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: #4E7024;
}

: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,
:is(.page-home) .card-grid > .card .card__title {
  font-family: var(--sk-heading);
  font-size: 19.5px;
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.24;
  margin-bottom: 10px;
  padding-right: 34px;
  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) .card__text,
:is(.page-home) .card-grid > .card .card__text {
  font-size: 14.8px;
  line-height: 1.68;
  color: #5F6980;
  flex: 1;
  margin-bottom: 0;
}

/* THE ARROW LINK, replacing the full-width green pill.

   The reference's card CTA is a text link with a sliding arrow, not a
   filled button, so the pill treatment introduced earlier is undone
   here. Navy on a light card, and the arrow moves 4px on 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,
:is(.page-home) .card-grid > .card .card__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: auto;
  align-self: flex-start;
  margin-top: 22px;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 0;
  box-shadow: none;
  font-family: var(--sk-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--sk-navy);
  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) .card__link:after,
:is(.page-home) .card-grid > .card .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,
:is(.page-home) .card-grid > .card:hover .card__link:after {
  transform: translateX(4px);
}

: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,
:is(.page-home) .card-grid > .card .card__link:hover {
  background: none;
  color: var(--sk-navy);
  transform: none;
  box-shadow: none;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------------------------------------------------------------
   THE TWO COLOUR FAMILIES

   Alternated on .alt-bg, which the templates already alternate down
   the page, so adjacent card sections always differ: a section on the
   wash reads green, a section on white reads blue. That is a rule
   rather than a hand-placed choice, so a new section inherits the
   alternation instead of needing a decision.
--------------------------------------------------------------- */

/* Alternated on the section's position AMONG CARD SECTIONS.

   Two simpler switches were tried and measured, and both fail. .alt-bg
   is not it: the industry pages carry it on all three card sections, so
   all three came out the same. Plain nth-of-type is not it either,
   because card sections are not adjacent siblings, they sit at
   positions like 5, 7 and 13 with prose sections between them, so
   parity tracks the gaps rather than the cards. Measured, that left 19
   pages with two neighbouring card sections in the same family.

   :nth-child(of S) counts only the elements matching S, so this counts
   card sections and nothing else and two in a row can never match.

   Wrapped in :where() so it adds no specificity. Without that the
   selector inherits the specificity of its own argument and outranks
   the dark band below it, which quietly left the navy section's cards
   with a pale green fill.
   Where a browser does not support it the selector does not match and
   every card keeps the plain white base above, which is the
   reference's own default rather than a broken state. */

/* BLUE, odd sections. */
: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) :where(section:nth-child(odd of section:has(.card-grid))) .card {
  background: linear-gradient(165deg, #FCFDFF, #F4F8FD);
}

: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) :where(section:nth-child(odd of section:has(.card-grid))) .card:hover {
  border-color: rgba(43, 74, 138, 0.24);
}

: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) :where(section:nth-child(odd of section:has(.card-grid))) .card:before {
  background: linear-gradient(160deg, rgba(43, 74, 138, 0.07), transparent 55%);
}

/* GREEN, even sections. */
: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) :where(section:nth-child(even of section:has(.card-grid))) .card {
  background: linear-gradient(165deg, #FCFEFA, #F5F9F1);
}

: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) :where(section:nth-child(even of section:has(.card-grid))) .card:hover {
  border-color: rgba(87, 123, 42, 0.26);
}

: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) :where(section:nth-child(even of section:has(.card-grid))) .card:before {
  background: linear-gradient(160deg, rgba(87, 123, 42, 0.06), transparent 55%);
}

/* ---------------------------------------------------------------
   FAQ CARDS
   Navy numbered square, hairline rule under the question, answer
   below. Our accordion markup carries the question in a button and
   the answer in a panel, so the reference's two-part card is built
   from those rather than from its <div> pair.
--------------------------------------------------------------- */

:is(.page-home, .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;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  counter-reset: faq;
}

@media (max-width: 1100px) {
  :is(.page-home, .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 {
    grid-template-columns: minmax(0, 1fr);
  }
}

:is(.page-home, .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: #fff;
  border: 1px solid rgba(11, 11, 69, 0.09);
  border-radius: 18px;
  padding: 26px 28px;
  box-shadow: none;
  transition: transform 0.45s var(--sk-ease), box-shadow 0.45s, border-color 0.45s;
}

:is(.page-home, .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 {
  transform: translateY(-4px);
  border-color: rgba(11, 11, 69, 0.16);
  box-shadow: 0 24px 48px -22px rgba(11, 11, 69, 0.24);
}

/* The question row: numbered square, then the question, then the rule
   that separates it from the answer. */
:is(.page-home, .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 {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  /* flex-start, not the space-between this button inherits from
     components.css. With the number added as a third flex item,
     space-between pushed the question into the middle of the card. */
  justify-content: flex-start;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  font-family: var(--sk-heading);
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.32;
  color: var(--sk-navy);
}

:is(.page-home, .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:before {
  counter-increment: faq;
  content: counter(faq, decimal-leading-zero);
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--sk-navy);
  color: #fff;
  font-family: var(--sk-heading);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* The chevron sits at the far right on its own. */
:is(.page-home, .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__icon {
  margin-left: auto;
  flex-shrink: 0;
}

/* THE RULE UNDER THE QUESTION belongs to the open state.

   The reference's FAQ is static, question over rule over answer. Ours
   is a real accordion whose answers collapse, so drawing the rule
   unconditionally left a line with nothing under it and a band of
   empty card beneath that. It appears when the answer does. */
:is(.page-home, .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:has(.accordion__trigger[aria-expanded="true"]) .accordion__trigger {
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(11, 11, 69, 0.08);
  margin-bottom: 15px;
}

:is(.page-home, .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;
  font-size: 14.8px;
  line-height: 1.7;
  color: #5F6980;
}

/* ---------------------------------------------------------------
   CARD B, the dark band

   One section per page, and only where the contrast earns it. The
   homepage's "Who We Serve" is the reference's own example and is the
   one section carrying it here, because it is the only section on the
   site with a class of its own to target. Every other page type uses
   generic .solution-section wrappers with nothing to distinguish the
   third section from the second, so placing a band there would need a
   class adding to each template. Deliberately not done rather than
   guessed at with :nth-of-type, which would land on a different
   section whenever a page's section count differs.
--------------------------------------------------------------- */

:is(.page-home) .home-industries {
  background: linear-gradient(155deg, #080826 0%, #0B0B45 55%, #12124F 100%);
  position: relative;
  overflow: hidden;
}

:is(.page-home) .home-industries:after {
  content: "";
  position: absolute;
  top: -200px;
  right: -120px;
  width: 700px;
  height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(87, 123, 42, 0.16), transparent 62%);
  pointer-events: none;
}

:is(.page-home) .home-industries > .container {
  position: relative;
  z-index: 2;
}

:is(.page-home) .home-industries h2 {
  color: #fff;
}

:is(.page-home) .home-industries .section-head p,
:is(.page-home) .home-industries > .container > p {
  color: #A9B6D6;
}

:is(.page-home) .home-industries .eyebrow {
  color: #9FD45C;
}

/* The dark card itself. */
:is(.page-home) .home-industries .card-grid > .card {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.09);
}

/* The light line catching the top edge. */
:is(.page-home) .home-industries .card-grid > .card:before {
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  opacity: 1;
}

:is(.page-home) .home-industries .card-grid > .card:hover {
  background: rgba(255, 255, 255, 0.075);
  border-color: rgba(159, 212, 92, 0.3);
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.6);
}

/* The green glow, as a third layer so the top line is not replaced. */
:is(.page-home) .home-industries .card-grid > .card .card__body:before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top left, rgba(159, 212, 92, 0.1), transparent 62%);
  opacity: 0;
  transition: opacity 0.45s;
  pointer-events: none;
  z-index: 1;
}

:is(.page-home) .home-industries .card-grid > .card:hover .card__body:before {
  opacity: 1;
}

:is(.page-home) .home-industries .card-grid > .card .card__body {
  position: relative;
  z-index: 2;
}

:is(.page-home) .home-industries .icon-tile {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #9FD45C;
}

:is(.page-home) .home-industries .card-grid > .card:after {
  color: rgba(255, 255, 255, 0.32);
}

:is(.page-home) .home-industries .card-grid > .card:hover:after {
  color: #9FD45C;
}

:is(.page-home) .home-industries .card__title {
  color: #fff;
}

:is(.page-home) .home-industries .card__text {
  color: #A9B6D6;
}

:is(.page-home) .home-industries .card__link {
  color: #9FD45C;
}

:is(.page-home) .home-industries .card__link:hover {
  color: #9FD45C;
}

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

   A card grid used to end and the next heading was most of a screen
   away. Padding comes down by a third, and the bottom is tighter than
   the top so a grid no longer floats well above the edge of its own
   section.

     top    84px -> 56px   (homepage 86px -> 56px)
     bottom 84px -> 44px   (homepage 86px -> 44px)
     phone  56px -> 40px top, 32px bottom

   Still two distinct bands: 100px between one section's last card and
   the next section's eyebrow, against 168px 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) .solution-section,
:is(.page-hub) .hub-section,
:is(.page-home) section {
  padding: 56px 0 44px;
}

@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,
  :is(.page-hub) .hub-section,
  :is(.page-home) section {
    padding: 40px 0 32px;
  }
}

/* The panels above follow the sections down to 40px on mobile. */
@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) .author-box,
  :is(.page-state, .page-solution, .page-hub, .page-industry, .page-resource, .page-about, .page-quote) .solution-cta,
  :is(.page-hub) .hub-cta {
    padding-top: 40px;
  }
}

/* ---------------------------------------------------------------
   THE GREEN RULE ABOVE A HEADING

   Removed everywhere. This was a block-level 22px rule sitting above
   the h2 with 18px beneath it, added when these templates had no
   eyebrow element of their own. The reference has no such rule.

   NOT removed: the short dash BESIDE the eyebrow text, which the
   reference keeps (.eb:before, inline, 24px, before the words). That
   one is part of the eyebrow, not a rule above it.
--------------------------------------------------------------- */

: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,
: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,
:is(.page-hub) .hub-section__inner > h2:before,
:is(.page-hub) .hub-cta h2:before,
:is(.page-home) .home-final-cta h2:before {
  content: none;
}

/* ---------------------------------------------------------------
   ONE INDEX NUMBER, NOT TWO

   An earlier pass put the index inline at the end of the card title
   while another put one in the top-right corner, both counting the
   same `pcard`. Every card showed both: "General Liability 01" with
   "02" in the corner, odd inline and even in the corner because two
   pseudo-elements were incrementing one counter. The reference has a
   single number, top right.
--------------------------------------------------------------- */
: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: none;
}

/* The title was a flex row only to park that inline number at its end.
   Back to a block, with the corner kept clear. */
: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: block;
  padding-right: 34px;
}


/* ---------------------------------------------------------------
   THE EYEBROW DASH

   Removed site-wide. The short green rule sat inline before the
   eyebrow text, so every one read "— COVERAGE". The words stay, with
   their size, tracking, weight and colour untouched; only the mark
   goes. The flex gap goes with it, or the text would keep the space
   the dash used to occupy.
--------------------------------------------------------------- */

: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,
:is(.page-hub) .hub-hero__eyebrow:before,
:is(.page-home) .eyebrow: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) .eyebrow:before {
  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) .solution-hero__eyebrow,
:is(.page-hub) .hub-hero__eyebrow,
:is(.page-home) .eyebrow,
: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) .eyebrow {
  gap: 0;
}

/* ---------------------------------------------------------------
   TILE TINT FOLLOWS THE SECTION

   The reference tints the tile to match its section's family, so the
   tint is decided here rather than by a class in the markup. That also
   means the 480 tiles that already carried an explicit --blue or
   --green class can never disagree with the cards around them.
--------------------------------------------------------------- */

: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) :where(section:nth-child(odd of section:has(.card-grid))) .card-grid > .card .icon-tile {
  background: #E8EFFB;
  color: #2B4A8A;
}

: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) :where(section:nth-child(even of section:has(.card-grid))) .card-grid > .card .icon-tile {
  background: #EDF3E3;
  color: #4E7024;
}

/* The icon never outgrows its tile. */
: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) .icon-tile > svg,
:is(.page-home) .icon-tile > svg {
  width: 22px;
  height: 22px;
  display: block;
  flex-shrink: 0;
}

/* ---------------------------------------------------------------
   QUOTE FORM, TWO COLUMNS AT DESKTOP

   The form was a single column at every width, which on the
   conversion page meant 460px-wide inputs and a long scroll. It
   becomes a two-column grid at 768px and up, and stays exactly as it
   was below that.

   The pairing is done with grid placement alone, not by reordering
   the markup, so the DOM order still reads
   business name / first / last / email / phone / state / employees /
   agency type / address / zip / agency phone / coverage / notes /
   turnstile / consent / submit. Laid out two-up with the full-width
   groups spanning both tracks, that DOM order lands exactly on the
   requested pairs, so visual order is left to right then down and tab
   order follows it without a single tabindex.

   align-items: start keeps each group at its own height. An inline
   error grows its own group and pushes the rows below it down, which
   is the correct behaviour, but it never stretches or shifts the
   field beside it.
--------------------------------------------------------------- */

@media (min-width: 768px) {
  .quote-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 22px;
    align-items: start;
  }

  /* Vertical rhythm still comes from .form-group's own margin-bottom,
     so there is no row-gap here to double it up. */
  .quote-form > .form-group {
    min-width: 0;
  }

  /* Everything that is not half of a pair. The honeypot is
     position:absolute and the hidden inputs and the Turnstile script
     tag are display:none, so none of them become grid items. */
  .quote-form > .form-group:has(#business_name),
  .quote-form > .form-group:has(#agency_type),
  .quote-form > .form-group:has(#agency_address),
  .quote-form > .form-group:has(.form-fieldset),
  .quote-form > .form-group:has(#notes),
  .quote-form > .form-group:has(.cf-turnstile),
  .quote-form > .form-group:has(#consent),
  .quote-form > .form-group:has(button[type="submit"]),
  .quote-form > .quote-form__privacy {
    grid-column: 1 / -1;
  }

  /* The fieldset carries the bottom margin in a single-column form.
     In the grid the group already provides it. */
  .quote-form > .form-group .form-fieldset {
    margin-bottom: 0;
  }
}

/* ---------------------------------------------------------------
   EXCLUSION LISTS, DARK BAND
   Option D from exclusions-reference.html, applied to all 9
   "what X does not cover" lists site-wide.

   Built from the existing <ul class="exclusion-list"><li><strong>
   markup with no template change, so every page picks it up at once.

   The mark stays absolutely positioned rather than becoming a flex
   item, and the row keeps a matching left pad. Making the li a flex
   container looked equivalent but was not: a flex container turns
   every child ELEMENT into its own item and only wraps bare text runs
   in anonymous ones, so <strong>Label.</strong> became item one and
   the sentence after it item two. They rendered as two columns, which
   at 390px left the label stacked one word per 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) .exclusion-list {
  display: block;
  gap: 0;
  list-style: none;
  margin: 28px 0;
  padding: 14px 32px;
  background: linear-gradient(155deg, #080826, #0B0B45 58%, #12124F);
  border-radius: 22px;
  position: relative;
  overflow: hidden;
}

/* Soft red-tinted glow, top right, behind the rows. */
: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) .exclusion-list:after {
  content: "";
  position: absolute;
  top: -160px;
  right: -90px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(196, 90, 84, 0.18), transparent 64%);
  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) .exclusion-list li {
  position: relative;
  /* 28px mark + 16px gutter */
  padding: 20px 0 20px 44px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  z-index: 2;
  font-family: var(--sk-body);
  font-size: 15.4px;
  line-height: 1.66;
  color: #A9B6D6;
}

: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) .exclusion-list li:last-child {
  border-bottom: none;
}

/* Rounded square x mark in a translucent red tile. */
: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) .exclusion-list li::before {
  content: "\2715";
  position: absolute;
  left: 0;
  top: 21px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(232, 124, 118, 0.14);
  border: 1px solid rgba(232, 124, 118, 0.26);
  color: #E8938D;
  font-size: 12px;
  font-weight: 700;
  line-height: 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) .exclusion-list strong {
  color: #FFFFFF;
  font-weight: 600;
}

: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) .exclusion-list a {
  color: #9FD45C;
  text-decoration: none;
  border-bottom: 1px solid rgba(159, 212, 92, 0.3);
}

: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) .exclusion-list a:hover {
  border-bottom-color: #9FD45C;
}

@media (max-width: 640px) {
  :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) .exclusion-list {
    padding: 10px 20px;
    border-radius: 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) .exclusion-list li {
    padding: 17px 0 17px 41px;
  }

  :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) .exclusion-list li::before {
    top: 18px;
  }
}

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

   Two problems, one cause. The form's container is a
   .solution-section__inner, so it was picking up the prose-panel
   treatment: a white card with a hairline border, a 26px radius and a
   shadow, wrapped around .quote-form, which is already exactly that
   card. A card inside an identical card.

   It was also inheriting the 740px prose measure added for the
   two-column prose fix. 740 less the container's 104px of padding left
   a 634px form, and once that was split into two tracks with a 22px
   gap and the form's own 92px of padding, each paired field came out
   at 259px. A field at 390px wide on a phone is 246px, so the desktop
   columns were 13px wider than the mobile ones: the two-column pairing
   was correct but had no room to read as columns.

   So the outer card is dropped and the width is set for the form
   rather than for prose. 964px less the 104px of container padding
   gives an 860px form panel, and (860 - 92 - 46) / 2 puts each paired
   field at 373px: 44% wider than before, comfortably a desktop field,
   and well short of the 571px they would reach if the container ran
   the full 1256px.

   Desktop only. Below 768px the form is single column and full width,
   the container keeps its 24px gutter, and none of this applies.
--------------------------------------------------------------- */


/* ---------------------------------------------------------------
   THE CONTENT LINE

   Every top-level block on the site now starts on one vertical line
   and stops on one other. Measured at 1440px before this rule, across
   13 page types and 134 blocks, there were FIVE left edges and FIVE
   widths:

     x= 80 w=1280  90 blocks  a plain .container's text edge, which is
                              where every heading, lead and card grid
                              already sat
     x=350 w= 740  26 blocks  prose panels, from their reading measure
     x= 40 w=1360  16 blocks  the CTA panels, author boxes and homepage
                              bands: they paint a card on the container
                              BOX, which is 40px left of the text in
                              the section above them
     x=290 w= 860   1 block   the quote form
     x=230 w= 980   1 block   the blog article

   x=80 wins because 90 of 134 blocks are already there and it is the
   line the type sits on: .container is 1360px wide with 40px of
   padding, so its text begins 40px inside its box. A card has to be
   pulled in by that same 40px or it hangs to the left of every heading
   on the page. That is the whole defect.

   width: calc(100% - 2 * pad) keeps the inset at narrow widths where
   the container is not yet at its maximum, and max-width caps it at
   1280 once it is. Desktop only: below 768px nothing moves.
--------------------------------------------------------------- */

@media (min-width: 768px) {
  /* Prose panels: the card variant only. The plain variant carries a
     grid or a list, paints nothing, and its text is already on the
     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) .solution-section__inner:not(:has(.card-grid, .accordion, .checklist, ul, ol, table, .solution-cta__actions, .card, .claim-card, .glossary-group, .cost-card)),
  :is(.page-hub) .hub-section__inner:not(:has(.card-grid, .accordion, .checklist, ul, ol, table, .program-steps, .card, .claim-card, .glossary-group, .cost-card)),

  /* The CTA panel paints on these seven page types only. On the blog,
     legal and sitemap pages it is a plain container and must stay put:
     insetting it there pushed its text to x=120. */
  :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,

  /* Always cards. */
  .author-box__inner,
  :is(.page-blog-post) .post-body__inner,
  :is(.page-home) :is(.intro__inner, .depth__inner, .carriers__inner, .home-final-cta__inner, .trust-stats__inner, .why-hcbi__inner, .home-process__inner) {
    width: calc(100% - 2 * var(--container-pad));
    max-width: var(--content-max);
    margin-left: auto;
    margin-right: auto;
  }
}

/* ---------------------------------------------------------------
   PROSE MEASURE

   The panels are 1280px wide now, so the measure has to live on the
   paragraph rather than on the panel. 636px is the width the old
   740px panel gave its text, which measured 85 characters of real
   prose at 16px Inter, inside the 75-90 the design asks for.

   Left-aligned inside the panel, so the first character stays on the
   panel's own text edge and the line simply stops earlier.

   THE SECOND BRANCH OF THE :is() NEVER MATCHED. `A > :is(p, .x > p)`
   expands to `A > p` and `A > .x > p`, and the second needs the panel
   itself to carry .section-head, which it never does. Every section
   intro was therefore running at .section-head's own 760px cap, which
   at 16px is 104 characters. It is a separate selector below now, and
   it lands on the same measure as everything else.
--------------------------------------------------------------- */

@media (min-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) :is(.solution-section__inner, .hub-section__inner, .post-body__inner) > p:not([class]),
  :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__inner, .hub-section__inner, .post-body__inner) > .section-head > p {
    max-width: var(--prose-measure);
  }
}

/* ---------------------------------------------------------------
   PANEL COPY, DESKTOP

   See --prose-measure-lg in tokens.css for why this is a type step and
   not simply a wider cap. In short: at 16px the 85-95 character line
   the design asks for is 636 to 670px whatever the panel does, so the
   only way to give a 1174px panel copy that carries it is to set the
   copy larger. 19px puts the same line at 760px.

   Keyed at 1024px, not 768px. At 768px the panel's content box is
   670px and a 636px measure already fills it; stepping the type there
   would push the line under 80 characters for no gain. Below 768px
   nothing here applies at all.
--------------------------------------------------------------- */

@media (min-width: 1024px) {
  :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__inner, .hub-section__inner) > p:not([class]),
  :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__inner, .hub-section__inner) > .section-head > p {
    font-size: var(--prose-size-lg);
    line-height: 1.72;
    max-width: var(--prose-measure-lg);
  }

  /* The article body takes the wider measure but keeps its own 18px.
     The PROSE MEASURE rule above caps .post-body__inner paragraphs at
     --prose-measure and outranks the 69ch the blog block asks for, so at
     1024px, where the panel is one column, 636px of copy sat in an 814px
     panel: 78% fill, the last single-column panel under the bar. Inert
     above 1081px, where the 543px columns are narrower than the cap. */
  :is(.page-blog-post) .post-body__inner > p:not([class]) {
    max-width: var(--prose-measure-lg);
  }

  /* .section-head's own 760px cap is what the heading above the copy
     reads at. The copy under it now measures the same, so the head
     stops constraining it and the two share one edge and one width. */
  :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: var(--prose-measure-lg);
  }
}

/* ---------------------------------------------------------------
   FORM PANELS ON THE CONTENT LINE

   The form is the card, so its section container is just the column it
   sits in: a plain container, full width, its own padding, content
   starting on the line like any heading. It has to undo the inset the
   content line rule applies to a panel that holds a .quote-form, which
   is why this block sits after that one.

   SHAPE, NOT PAGE. This was scoped to .page-quote, so the contact page
   kept the treatment it undoes: a white card with a hairline and a
   shadow wrapped around .quote-form, which is already exactly that
   card. Measured at 1440px the contact form was a 1174px card at x=133
   inside a 1280px card at x=80 - a card inside an identical card, and
   the only block on the page not starting on the line. Keyed on
   :has(.quote-form) both pages get the same single card at x=80.
--------------------------------------------------------------- */

@media (min-width: 768px) {
  /* The page list matches the CONTENT LINE rule's own selector so this
     outranks it on order rather than on a scope that does not apply.
     Dropping the list would leave it a class short and the inset would
     win silently. */
  :is(.page-quote, .page-resource, .page-contact, .page-state, .page-solution, .page-hub, .page-industry, .page-about, .page-blog, .page-blog-post, .page-sitemap, .page-legal, .page-404) .solution-section__inner:has(.quote-form) {
    width: 100%;
    max-width: var(--container-max);
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  /* THE FORM RUNS THE CONTENT LINE.

     It was capped at 860px, 67% of the 1280px container, which left
     420px of empty section beside the one block on the site a visitor
     has to use. The cap existed because two columns of a 1256px form
     put a first-name field at 571px. The answer to that is a third
     column, below, not a narrower form. Left-aligned: centring it
     would put its edge back off the line. */
  .quote-form {
    max-width: none;
  }
}

/* ---------------------------------------------------------------
   QUOTE FORM, THREE COLUMNS

   1188px of form content over two tracks is a 583px field. Over three
   it is 381px, within a pixel of the 372px the 860px form gave a
   paired field, so the form fills the container without a single field
   growing.

   Spans are set so every row closes: the grid is auto-placed in DOM
   order, which is also tab order, and a span that does not divide the
   row leaves a hole. 1+1+1 for the contact rows, then 1+2 twice for
   the agency rows, which repeats the same rhythm rather than reading
   as a gap.

   Keyed at 1200px. Between 768 and 1199 the container cannot hold
   three 380px tracks, so those widths keep the two-column form.
--------------------------------------------------------------- */

@media (min-width: 1200px) {
  :is(.page-quote) .quote-form {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Full-bleed rows. The pairs above are single tracks by default. */
  :is(.page-quote) .quote-form > .form-group:has(#business_name),
  :is(.page-quote) .quote-form > .form-group:has(.form-fieldset),
  :is(.page-quote) .quote-form > .form-group:has(#notes),
  :is(.page-quote) .quote-form > .form-group:has(.cf-turnstile),
  :is(.page-quote) .quote-form > .form-group:has(#consent),
  :is(.page-quote) .quote-form > .form-group:has(button[type="submit"]),
  :is(.page-quote) .quote-form > .quote-form__privacy {
    grid-column: 1 / -1;
  }

  /* Two tracks: the street address, which needs the room and carries
     the Places dropdown, and the optional agency phone that closes the
     row under it. */
  :is(.page-quote) .quote-form > .form-group:has(#agency_address),
  :is(.page-quote) .quote-form > .form-group:has(#agency_phone) {
    grid-column: span 2;
  }

  /* One track each, undoing the two-column rule above for the three
     that were full-bleed there. */
  :is(.page-quote) .quote-form > .form-group:has(#agency_type) {
    grid-column: auto;
  }

  /* A 1188px button is a slab, not a button. The block button keeps its
     left edge and stops at a width a pointer can read as one target. */
  :is(.page-quote) .quote-form .btn--block {
    max-width: 420px;
  }

  /* 13px legal copy across 1188px is 180 characters. At the prose
     measure it is still 118, because that measure is set for 19px. The
     same 95-character line at 13px is 520px. */
  :is(.page-quote) .quote-form__privacy {
    max-width: 520px;
  }
}

/* ---------------------------------------------------------------
   LIST MEASURE

   A .checklist and an .exclusion-list are full-width cards, and their
   items carried no measure at all: at 1440px the longest ran 170
   characters against 90 in the prose panel beside it, on the same page.

   The card keeps its width, because the row dividers run its full
   width and a max-width on the item would cut them short. The measure
   comes from the right padding instead, the same way the orphaned
   prose panels above take theirs.

   660px is the 95-character line at these items' own 15.4-15.5px,
   plus the 42-44px the mark occupies on the left. 100% resolves
   against the list's content box; max() floors it at zero so the rule
   cannot go negative and drop at a narrow width.
--------------------------------------------------------------- */

@media (min-width: 1024px) {
  :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(.checklist, .exclusion-list) li {
    padding-right: max(0px, calc(100% - 660px));
  }

  /* TWO MEASURES DO NOT COMPOSE. The LEGAL PAGES block caps every li on
     a legal page at 72ch, which is a 726px BOX because box-sizing is
     border-box site-wide. The 562px of right padding above is then
     subtracted from inside that 726px rather than from the list's full
     1224px, and the text column collapses to 122px: measured on
     /privacy-policy/ and /terms-conditions/, every checklist item
     wrapping at eight or nine characters.

     Introduced by the LIST MEASURE rule above, not by the panel work,
     and only above 1024px where that rule applies. The padding is the
     measure now, so the cap comes off for these two list types only,
     and only in the band where the padding is doing the job. */
  :is(.page-legal) :is(.checklist, .exclusion-list) li {
    max-width: none;
  }
}

/* ---------------------------------------------------------------
   CONTACT FORM: THE MESSAGE FIELD SPANS THE FORM

   Five fields, four of them paired. #message was not in the span list
   above, so the textarea sat in the left track and the whole right half
   of the form below the phone row was empty. It is the field the page
   exists to collect.
--------------------------------------------------------------- */

@media (min-width: 768px) {
  .quote-form > .form-group:has(#message) {
    grid-column: 1 / -1;
  }
}


/* ===============================================================
   TWO-COLUMN PROSE SPLIT, 992px AND UP

   The width pass put every prose panel on the content line and capped
   its copy at 85-95 characters. Both are right and neither is undone
   here. What it left is the gap between the two: at 1440px the panel's
   content box is 1174px and the 95-character column is 760px, so 414px
   of every wide prose panel is empty. This is that space.

   WHY MULTICOL AND NOT A GRID. The homepage panels, and the inner-page
   panels before the width pass, placed each paragraph as a whole item
   in a two-column grid. A grid assigns by POSITION: paragraphs 1 and 3
   go left, 2 and 4 right, whatever their length, and a paragraph can
   land beside one three times its height.

   Multicol assigns by FIT. It fills to a balanced height and moves on,
   so it never puts a nine-line paragraph next to a three-line one when
   a better arrangement exists.

   WHAT IT DOES NOT DO IS BALANCE EXACTLY, and the reason is the very
   rule that makes the split safe. `break-inside: avoid` makes the
   paragraph the atom, so a column can only end where a paragraph ends,
   and a 3-paragraph panel has only two places to cut. Measured at
   1440px over 22 multi-paragraph panels on 12 pages:

     break-inside: avoid   0 paragraphs sliced   imbalance p50 32%, max 54%
     break-inside: auto   11 paragraphs sliced   imbalance p50 11%, max 45%

   The brief picks the first: nothing splits mid-block. That is the
   trade being made here, deliberately, and flipping it is one
   declaration. Even at 54% the split is the better of the two layouts,
   because the empty area it leaves is one column's tail rather than a
   414px band down the whole height of the panel.

   TWO PARAGRAPHS, NOT TWO ADJACENT ONES. The gate is `:has(p ~ p)`, the
   general sibling combinator, not `:has(p + p)`. With the adjacent one
   the terms-and-conditions panel, which alternates h3 and p five times
   over, has no two paragraphs touching and never split: it sat at 64%
   fill with five paragraphs in it. `p ~ p` is "this panel has more than
   one paragraph", which is the rule that was meant. A panel with one
   paragraph still never matches.

   WHEN A PANEL SPLITS, EXPRESSED AS ONE NUMBER. The rule is: split a
   panel only where a single column fills less than about 85% of its
   content box. `columns: 424px 2` says exactly that and needs no
   breakpoint to say it. The used column count is
   min(2, floor((A + gap) / (424 + gap))) for a content box A, so:

     A <  896px   ->  1 column   (the 760px measure fills 85%+ of it)
     A >= 896px   ->  2 columns

   896px is 760 / 0.85. On a prose panel that is a 1082px viewport, so
   between 992 and 1081 the panels stay exactly as they are: the same
   rule reaching the same answer, not an exception to it. A narrow panel
   or a sidebar never reaches 896px and is left alone for free, with no
   selector naming it.

   COLUMN MEASURE. 424px at 19px is 50 characters and 555px at 1440px is
   66. The container caps at 1360px, so 66 is the widest a column ever
   gets. The whole range sits inside the 45-70 the brief asks for.

   THE 760px CAP STAYS ON THE PARAGRAPH. It is inert inside a 424-555px
   column and it is the measure again the moment the panel drops back to
   one column, so one declaration covers both states.

   H2 SPANS, H3 DOES NOT. The panel's own h2 is its title and belongs
   above the columns. An h3 is a subhead inside running text, and
   spanning it would be actively worse here: `column-span: all` starts a
   NEW column set after the spanner, so an h3 followed by a single
   paragraph gives a column set of one unbreakable block, which fills
   column one and leaves column two empty. It flows in the column
   instead, with `break-after: avoid` so it can never be stranded at the
   foot of one. Measured across 27 pages by rendering both ways: with h3
   spanning, 9 of 71 column sets used only one of their two columns.
   With it flowing, 0 of 58.

   Blog posts are the exception and their h2s DO span mid-article,
   because there an h2 is a section break in a long body rather than the
   panel's title, and each run between two of them is several
   paragraphs: enough to balance.
   =============================================================== */

@media (min-width: 992px) {
  /* NOTHING INTERACTIVE OR EMBEDDED GOES IN A COLUMN FLOW.

     `:not(:has(form, input, textarea, select, button, iframe, video,
     embed, object, .cf-turnstile, nav, .btn, .solution-hero__actions,
     .solution-cta__actions))` is on every selector in this file that
     applies `columns`, and on the homepage panels in home-redesign.css.

     It is here because the scope leaked. The exclusion list these panels
     already carried - `.card-grid, .accordion, .checklist, ul, ol,
     table, .card, ...` - names the BLOCKS that must not be columnised
     and says nothing about forms, because forms were excluded by
     assumption rather than by selector. A section whose container holds
     a <form> and two paragraphs passed every gate and got two columns,
     and the form flowed in them: on /get-a-quote/ the business name,
     names, email and address fields rendered in column one while the
     coverage checkboxes, the notes field, the consent row and the submit
     button rendered in column two. The contact page did the same thing
     with its Turnstile widget, consent and Send message button.

     Two leaks are fixed by this gate:
       /get-a-quote/    the whole quote form
       contact page     the whole contact form
     Two more were of a different shape and are fixed by spanning rather
     than by exclusion, below:
       50 state pages   .solution-hero__actions, two CTAs at the foot of
                        the "Why {State} agencies choose HCBI" panel
       glossary         nav.glossary-index, the A-Z jump list

     The list deliberately omits img, picture and svg. The blog article
     opens with a <picture> and carries it with `column-span: all`, which
     takes it out of the flow properly and paints it at the panel's full
     width; excluding the panel outright would drop the whole article
     back to one column to fix something that is not broken.

     A second `:not(:has())` rather than an edit to the existing one, so
     the card-and-list gate keeps its meaning and this one keeps its own,
     and neither changes the panel styling that reads the first. */

  /* BOTH GATES, SPELLED OUT, and not the ungated selector they add up
     to. The width pass sets `display: grid` on
     `__inner:not(:has(...)):has(p + p)`, and multicol does not apply to
     a grid container. Dropping `:has(p ~ p)` from this rule to reach
     the one-paragraph panels also dropped a class off its specificity,
     the grid rule started winning, and 451 panels silently fell back to
     one column. Listing `:has()` and `:not(:has())` keeps the weight
     and covers every 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) .solution-section__inner:not(:has(.card-grid, .accordion, .checklist, ul, ol, table, .solution-cta__actions, .card, .claim-card, .glossary-group, .cost-card)):not(:has(form, input, textarea, select, button, iframe, video, embed, object, .cf-turnstile)):has(p ~ 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:not(:has(.card-grid, .accordion, .checklist, ul, ol, table, .solution-cta__actions, .card, .claim-card, .glossary-group, .cost-card)):not(:has(form, input, textarea, select, button, iframe, video, embed, object, .cf-turnstile)):not(:has(p ~ p)),
  :is(.page-hub) .hub-section__inner:not(:has(.card-grid, .accordion, .checklist, ul, ol, table, .program-steps, .card, .claim-card, .glossary-group, .cost-card)):not(:has(form, input, textarea, select, button, iframe, video, embed, object, .cf-turnstile)):has(p ~ p),
  :is(.page-hub) .hub-section__inner:not(:has(.card-grid, .accordion, .checklist, ul, ol, table, .program-steps, .card, .claim-card, .glossary-group, .cost-card)):not(:has(form, input, textarea, select, button, iframe, video, embed, object, .cf-turnstile)):not(:has(p ~ p)),
  :is(.page-blog-post) .post-body__inner:not(:has(form, input, textarea, select, button, iframe, video, embed, object, .cf-turnstile)):has(p ~ p),
  :is(.page-blog-post) .post-body__inner:not(:has(form, input, textarea, select, button, iframe, video, embed, object, .cf-turnstile)):not(:has(p ~ p)) {
    display: block;
    columns: 424px 2;
    column-gap: clamp(48px, 4.4vw, 64px);
    column-rule: 1px solid var(--sk-hairline-soft);
  }

  /* NOTHING SPLITS MID-BLOCK - IN A PANEL THAT HAS MORE THAN ONE BLOCK.

     The gate is what makes this safe to relax. Where a panel holds two
     paragraphs or more, the column can end at a paragraph boundary and
     `break-inside: avoid` keeps every one of them whole. Where it holds
     exactly ONE, there is no boundary to end on: an unbreakable
     paragraph fills column one and leaves column two empty, which is
     the defect the hug was introduced to avoid and the reason the hug
     is gone. A lone paragraph is allowed to break mid-sentence across
     the gap, which is ordinary newspaper setting and the only way a
     single run of text fills a two-column box. */
  :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) > :is(p, li, blockquote, figure, dl),
  :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) > :is(p, li, blockquote, figure, dl),
  :is(.page-blog-post) .post-body__inner:has(p ~ p) > :is(p, li, blockquote, figure) {
    break-inside: avoid;
  }

  /* THE PANEL TITLE SPANS. */
  :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, .eyebrow),
  :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, .eyebrow) {
    column-span: all;
  }

  /* BUTTON ROWS AND JUMP NAVS SPAN, THEY DO NOT FLOW.

     Two leaks were of this shape rather than the form shape: the
     .solution-hero__actions pair of CTAs at the foot of the "Why {State}
     agencies choose HCBI" panel on 50 state pages, and
     nav.glossary-index, the A-Z jump list on the glossary.

     Excluding those panels outright was the first fix and it was wrong:
     it took the four paragraphs above the buttons back to a 760px
     measure in a 1174px panel, and 51 panels went to 64% fill. These are
     blocks with no reading order across a column break, so they take the
     treatment the blog's header image already takes - out of the flow,
     full panel width, below the columns - and the prose above them keeps
     its two columns.

     A <form> cannot be handled this way. It is a single interactive
     block whose fields must stay in one visual and tab order, and a
     panel holding one is excluded from columns entirely by the gate
     above. */
  :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(.solution-hero__actions, .solution-cta__actions, nav),
  :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(.solution-hero__actions, .solution-cta__actions, nav) {
    column-span: all;
  }

  /* SUBHEADS FLOW, BUT NEVER ORPHAN. */
  :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)) > h3,
  :is(.page-hub) .hub-section__inner:not(:has(.card-grid, .accordion, .checklist, ul, ol, table, .program-steps, .card, .claim-card, .glossary-group, .cost-card)) > h3,
  :is(.page-blog-post) .post-body__inner > h3 {
    break-inside: avoid;
    break-after: avoid;
  }

  /* BLOG: the section breaks, the byline, the header image and the
     rules all span. Left in the column, the 16/9 header image would be
     drawn at half the panel width on a text baseline. */
  :is(.page-blog-post) .post-body__inner:has(p ~ p) > :is(h2, hr, picture, figure, table, .post-body__meta) {
    column-span: all;
  }
}


/* ===============================================================
   .prose-panel  -  THE WRAPPED ORPHANED RUN

   A run of two or more orphaned paragraphs used to be drawn as one
   continuous card out of the paragraphs themselves: the first carried
   the top edge, the last the bottom edge and the shadow, the middles
   only the sides. It looked like one panel and it was not one element,
   which is why the two-column split could not reach it - multicol needs
   a container and a run of siblings has none.

   81 runs across 62 page files are now wrapped in this div. It is the
   only markup change in this pass, it was applied by script and the
   rendered text is unchanged: see REPORT.md.

   The card values below are the ones the run painted itself: 26px
   radius, --sk-hairline-soft border, --sk-shadow-panel-soft, 34px of
   padding at the ends and 28px of margin, dropping to 24px of side
   padding on a phone. They are restated rather than inherited because
   the paragraphs are no longer direct children of .container, so none
   of the orphan rules above reach them any more.
   =============================================================== */

.prose-panel {
  background: var(--sk-white);
  border: 1px solid var(--sk-hairline-soft);
  border-radius: 26px;
  box-shadow: var(--sk-shadow-panel-soft);
  padding: 34px 52px;
  margin: 28px 0;
}

.prose-panel > p {
  font-family: var(--sk-body);
  font-size: 16px;
  line-height: 1.75;
  color: var(--sk-prose);
  /* 22px, the bottom padding the middle segments of a run carried. */
  margin: 0 0 22px;
}

.prose-panel > p:last-child {
  margin-bottom: 0;
}

@media (max-width: 560px) {
  /* 52px each side of a 350px panel is 104px of padding around a 246px
     column. The run's own rule dropped to 24px here; so does this. */
  .prose-panel {
    padding-left: 24px;
    padding-right: 24px;
  }
}

@media (min-width: 768px) {
  .prose-panel > p {
    max-width: var(--prose-measure);
  }
}

@media (min-width: 1024px) {
  .prose-panel > p {
    font-size: var(--prose-size-lg);
    line-height: 1.72;
    max-width: var(--prose-measure-lg);
  }
}

/* TWO COLUMNS, on the same terms as every other prose panel. The
   arithmetic is in the TWO-COLUMN PROSE SPLIT block above: `columns:
   424px 2` splits only where a single column would fill under 85% of
   the panel, which for this one is a 1082px viewport. Below that it is
   one column at the measure, like the panel it replaces. */
@media (min-width: 992px) {
  .prose-panel:not(:has(form, input, textarea, select, button, iframe, video, embed, object, .cf-turnstile)) {
    columns: 424px 2;
    column-gap: clamp(48px, 4.4vw, 64px);
    column-rule: 1px solid var(--sk-hairline-soft);
  }

  .prose-panel > p {
    break-inside: avoid;
  }

  /* Every wrapper the script wrote holds two paragraphs or more, so the
     rule below never fires today. It is here because the failure it
     prevents is silent: one unbreakable paragraph in a two-column box
     fills column one and leaves column two empty. A wrapper that loses a
     paragraph in a later edit lets its lone paragraph break instead,
     like every other one-paragraph panel on the site. */
  .prose-panel:not(:has(p ~ p)) > p {
    break-inside: auto;
  }
}


/* ===============================================================
   THE ONE-PARAGRAPH PROSE PANEL

   Three panels on the site are a full-width card holding a single
   paragraph: the intros on the FAQ, the glossary and the contact page.
   They were made to hug in the pass before this one and that is
   reverted: they are full width like every other panel, and their
   paragraph flows across the two columns the block above now gives
   every prose panel rather than only the multi-paragraph ones.

   There is no rule left to write here. The `:has(p ~ p)` gate came off
   the `columns` declaration and stayed on `break-inside: avoid`, which
   is the whole of it: these three get the columns and are the only
   panels allowed to break a paragraph across the gap.
   =============================================================== */

/* Legal pages set their body copy at 1.8 rather than the 1.75 every
   other page uses (see the LEGAL PAGES block above). A wrapped run has
   to carry that too, or privacy-policy renders 0.8px shorter per line:
   measured, 8px over the two runs at 390px. Capped below 1024px so it
   cannot fight the 19px/1.72 desktop step. */
@media (max-width: 1023px) {
  :is(.page-legal) .prose-panel > p {
    line-height: 1.8;
  }
}