/**
 * Trust, guarantee, pricing and terms band CSS.
 *
 * Covers the band families that the earlier visual-fidelity waves never
 * reached: `trust-about` (`.ab-*`), `trust-faq` (`.trust-intro`, `.fq-*`),
 * `trust-guarantee` (`.g-*`), `trust-guarantee-terms` (`.terms-*`), the Home
 * guarantee band (`.h-gtee*`) and the Service price band (`.lt-price*`).
 *
 * LAYOUT SPECIFICITY CONVENTION
 * ----------------------------
 * Identical to `components/content-bands-grids.css`: WordPress prints
 * `body .is-layout-flex{display:flex}` / `body .is-layout-grid{display:grid}`
 * into `core-block-supports-inline-css` at (0,1,1) AFTER every theme sheet, and
 * every band root here is a Core Group/Columns block carrying `is-layout-*`.
 * So every rule that declares a layout property (`display`,
 * `grid-template-columns`, `grid-template-rows`, `grid-auto-flow`,
 * `flex-direction`, `flex-wrap`) is written with
 * `:is(.entry-content, .editor-styles-wrapper)` and its subject OUTSIDE any
 * `:where()`, reaching (0,2,0). Non-layout defaults keep `:where()`.
 *
 * AUTHORITY vs CONVENTION
 * -----------------------
 * Every rule below is tagged in a comment as one of:
 *
 *   AUTHORITY  - the value is quoted from `docs/luke-port/gutenberg-mapping.md`
 *                or `docs/luke-port/component-map.md`. Column ratios, column
 *                counts, breakpoints, max-widths, the sage top border, the
 *                42px record badge, the sticky rail geometry and the two
 *                stated backgrounds are all in this class.
 *   CONVENTION - the value is NOT derivable from anything in this repository.
 *                The `.dc.html` source archive is not vendored here (verified:
 *                `git ls-files | grep dc.html` returns nothing), so block
 *                padding, gaps, radii, borders and the type scale have no
 *                source. These values are copied from the conventions already
 *                established by the neighbouring styled bands in
 *                `components/content-bands-grids.css` and `design-hero-proof.css`
 *                (band padding `100px var(--sq-gutter)`, grid `gap: 18px`,
 *                split `gap: 56px`, card `1px solid var(--sq-line2)` on
 *                `var(--sq-white)` at `padding: 24px`). A later pass holding
 *                the archive must re-check every CONVENTION rule.
 *
 * No colour is hardcoded where a token exists. `--sq-*` are defined in
 * `components/content-bands-grids.css`, which is enqueued before this sheet.
 */

/* =========================================================================
   TRUST / ABOUT  --  `trust-about.dc.html`, gutenberg-mapping.md:173
   ========================================================================= */

/* CONVENTION: band chrome. The About hero is the first band under the fixed
   shell header, so it takes the same top offset as `.h-hero`/`.lt-hero`
   (`design-hero-proof.css:16-22`), and the same white surface + hairline rule. */
:where(.entry-content, .editor-styles-wrapper) .ab-hero {
  background: var(--sq-white);
  border-bottom: 1px solid var(--sq-line3, #e6e2d6);
  box-sizing: border-box;
  padding: 168px var(--sq-gutter) 80px;
}

/* CONVENTION: inner measure mirrors `.h-hero-inner`. */
:where(.entry-content, .editor-styles-wrapper) .ab-hero-inner {
  box-sizing: border-box;
  margin-inline: auto;
  max-width: var(--sq-wide);
  width: 100%;
}

/* AUTHORITY: gutenberg-mapping.md:173 and component-map.md `.ab-hero` --
   "copy column 1.08fr and media column .92fr, 56px gap".
   The grid lives on `.ab-hero-layout` (the Columns block), not on the `.ab-hero`
   band root, which is a plain full-bleed Group. */
:is(.entry-content, .editor-styles-wrapper) .ab-hero-layout {
  align-items: center;
  display: grid;
  gap: 56px;
  grid-template-columns: 1.08fr .92fr;
}

:where(.entry-content, .editor-styles-wrapper) .ab-hero-layout > .wp-block-column {
  margin: 0;
  min-width: 0;
}

/* CONVENTION: matches `.h-hero-copy > .wp-block-heading` (`design-hero-proof.css:78-93`)
   one step down, since the About H1 is not one of the three sized source H1s. */
:where(.entry-content, .editor-styles-wrapper) .ab-hero-copy > .wp-block-heading {
  font-size: 54px;
  letter-spacing: -.024em;
  line-height: 1.04;
  margin: 0;
  max-width: 18ch;
}

/* CONVENTION: mirrors `.h-hero-copy > .wp-block-paragraph`. */
:where(.entry-content, .editor-styles-wrapper) .ab-hero-copy > .wp-block-paragraph,
:where(.entry-content, .editor-styles-wrapper) .ab-hero-copy > p {
  font-size: 19px;
  margin: 24px 0 0;
  max-width: 540px;
}

/* CONVENTION: mirrors `.h-hero-copy > .wp-block-buttons`. */
:is(.entry-content, .editor-styles-wrapper) .ab-hero-copy > .wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}

:where(.entry-content, .editor-styles-wrapper) .ab-hero-media {
  min-width: 0;
}

/* AUTHORITY: gutenberg-mapping.md:173 -- `image-slot#about-hero` in a "4:3
   bordered panel". The 4:3 ratio and the border are stated; the fill colour is
   CONVENTION (the same placeholder cream `.h-hero-media` uses). */
:where(.entry-content, .editor-styles-wrapper) .ab-hero-image {
  aspect-ratio: 4 / 3;
  background: var(--sq-mapbg, #e9e6dd);
  border: 1px solid var(--sq-line2);
  margin: 0;
  overflow: hidden;
  width: 100%;
}

/* CONVENTION: band chrome. Cream proof strip between two white bands, using the
   tighter `80px/100px` band rhythm `.hs-catalogue` already uses. */
:where(.entry-content, .editor-styles-wrapper) .ab-stats {
  background: var(--sq-cream);
  border-bottom: 1px solid var(--sq-line);
  box-sizing: border-box;
  padding: 56px var(--sq-gutter);
}

/* AUTHORITY: gutenberg-mapping.md:173 / component-map.md `.ab-stats` --
   "Group > 4 stat cells", 4 columns default.
   CONVENTION: `gap: 18px` and `align-items: stretch` are the house grid values. */
:is(.entry-content, .editor-styles-wrapper) .ab-stats-inner {
  align-items: stretch;
  box-sizing: border-box;
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-inline: auto;
  max-width: var(--sq-wide);
}

/* CONVENTION: stat cells are unboxed in the source description (no card is
   stated), so only the internal rhythm is declared. */
:where(.entry-content, .editor-styles-wrapper) .ab-stat {
  min-width: 0;
}

/* CONVENTION: value line follows the display-face scale used by `.snapshot-title`
   one step up; the source gives no size. */
:where(.entry-content, .editor-styles-wrapper) .ab-stat > .wp-block-heading {
  font-size: 30px;
  line-height: 1.1;
  margin: 0;
}

/* AUTHORITY: component-map.md `.ab-stats` -- "each value line plus IBM Plex Mono
   label". The family is stated; the 11px/.08em treatment is the CONVENTION
   already shared by `.eyebrow-label` and `.hs-group-tag`. */
:where(.entry-content, .editor-styles-wrapper) .ab-stat > p {
  color: var(--sq-muted);
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: .08em;
  margin: 10px 0 0;
  text-transform: uppercase;
}

/* CONVENTION: band chrome only. `.ab-intro-inner`'s AUTHORITY max-width of 900
   (gutenberg-mapping.md:173, "Group(max 900)") is already declared in
   `components/content-bands-grids.css:650` and is deliberately not repeated. */
:where(.entry-content, .editor-styles-wrapper) .ab-intro {
  background: var(--sq-white);
  box-sizing: border-box;
  padding: 100px var(--sq-gutter) 40px;
}

/* CONVENTION: band chrome. */
:where(.entry-content, .editor-styles-wrapper) .ab-vals {
  background: var(--sq-white);
  box-sizing: border-box;
  padding: 0 var(--sq-gutter) 100px;
}

/* AUTHORITY: component-map.md:94 -- `.ab-vals` (values) is "Group > 3 cards",
   3 columns default.
   CONVENTION: gap. */
:is(.entry-content, .editor-styles-wrapper) .ab-vals-inner {
  align-items: stretch;
  box-sizing: border-box;
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-inline: auto;
  max-width: var(--sq-wide);
}

/* AUTHORITY: component-map.md:94 -- "cards with 2px sage top border, H3 and
   paragraph". The border width, side and colour are all stated.
   CONVENTION: the 22px padding-block-start, copied from `.process-card`
   (`content-bands-grids.css:514-517`), which is the other 2px-sage-top form. */
:where(.entry-content, .editor-styles-wrapper) .ab-value {
  border-top: 2px solid var(--sq-sage);
  box-sizing: border-box;
  height: 100%;
  min-width: 0;
  padding: 22px 0 0;
}

/* CONVENTION: card type scale, matching `.h-serv-card h3` / `.faq-item summary`. */
:where(.entry-content, .editor-styles-wrapper) .ab-value > .wp-block-heading {
  font-size: 18px;
  margin: 0 0 10px;
}

:where(.entry-content, .editor-styles-wrapper) .ab-value > p {
  font-size: 15.5px;
  line-height: 1.65;
  margin: 0;
}

/* CONVENTION: band chrome. */
:where(.entry-content, .editor-styles-wrapper) .ab-team {
  background: var(--sq-cream);
  border-top: 1px solid var(--sq-line);
  box-sizing: border-box;
  padding: 100px var(--sq-gutter);
}

/* AUTHORITY: gutenberg-mapping.md:173 / component-map.md `.ab-team` -- "Group > 4
   cards; each card is 1:1 image-slot above role H3 and copy panel", 4 columns
   default.
   IMPLEMENTATION NOTE: `.ab-team-inner` is a FLAT Core grid with no per-card
   wrapper element, so the four columns are produced by a column-flow grid that
   puts each card's parts down one column and keeps the four cards' medias,
   headings and copy baseline-aligned across the row.
   AMENDED 2026-08-19 (three rows, was four): each card contributed a fourth
   child, `p.ab-team-fallback` ("Team or approved project image unavailable."),
   which was a neutral substitution with no counterpart element in the source
   record. `patterns/route-trust.php` no longer emits it, so a card is now
   (figure.ab-team-media, h3, p) and the row count must match or the grid spills
   card 2's media into card 1's fourth row. The band's own intro and closing
   note are siblings of this grid, not members of it -- see `.ab-team-intro` and
   `.ab-team-note` below.
   CONVENTION: gap. */
:is(.entry-content, .editor-styles-wrapper) .ab-team-inner {
  box-sizing: border-box;
  display: grid;
  gap: 12px 18px;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: auto auto 1fr;
  margin-inline: auto;
  max-width: var(--sq-wide);
}

/* CONVENTION: the band intro and the closing note are plain measured blocks
   above and below the card grid; both carry `alignwide`, so the 1180 measure
   comes from `content-bands-grids.css`'s `.alignwide` descendant rule and only
   the rhythm is declared here. Added 2026-08-19 with the source copy: the
   archive's team band has an eyebrow/H2/standfirst and a closing note about
   names and photos, and the previous body had no slot for either. */
:where(.entry-content, .editor-styles-wrapper) .ab-team-intro {
  box-sizing: border-box;
  margin-bottom: 34px;
}

:where(.entry-content, .editor-styles-wrapper) .ab-team-note {
  box-sizing: border-box;
  color: var(--sq-muted);
  font-size: 14px;
  line-height: 1.65;
  margin-top: 26px;
}

:where(.entry-content, .editor-styles-wrapper) .ab-team-inner > * {
  margin: 0;
  min-width: 0;
}

/* AUTHORITY: component-map.md `.ab-team` -- "1:1 image-slot".
   CONVENTION: border and placeholder fill, matching `.ab-hero-image`. */
:where(.entry-content, .editor-styles-wrapper) .ab-team-media {
  aspect-ratio: 1 / 1;
  background: var(--sq-mapbg, #e9e6dd);
  border: 1px solid var(--sq-line2);
  overflow: hidden;
  width: 100%;
}

/* ADDED 2026-08-25 with config/content-packages/about-us-media.json.
   Both about-us image slots were authored EMPTY by the handover migration, so
   until now neither had ever held an <img> and neither had a fill rule -- unlike
   the paver flagship, which has shipped `.r-hero-image img` and
   `.r-surface-media img { object-fit: cover }` all along. Without these rules the
   slot keeps its aspect-ratio box but the image renders at natural size and is
   clipped top-left by `overflow: hidden` instead of filling the box.
   SPECIFICITY: `:is()` not `:where()`. `:where()` contributes zero, which would
   leave Core's own `.wp-block-image` margin rule winning on equal footing and the
   figure carrying a stray bottom margin inside the grid. */
:is(.entry-content, .editor-styles-wrapper) .ab-hero-image,
:is(.entry-content, .editor-styles-wrapper) .ab-team-media {
  margin: 0;
}

:is(.entry-content, .editor-styles-wrapper) .ab-hero-image img,
:is(.entry-content, .editor-styles-wrapper) .ab-team-media img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

/* CONVENTION: card type scale. */
:where(.entry-content, .editor-styles-wrapper) .ab-team-inner > .wp-block-heading {
  font-size: 18px;
  margin-top: 6px;
}

:where(.entry-content, .editor-styles-wrapper) .ab-team-inner > p {
  font-size: 15.5px;
  line-height: 1.65;
}

/* CONVENTION: the media-unavailable note is a fallback caption, not body copy. */
:where(.entry-content, .editor-styles-wrapper) .ab-team-fallback {
  color: var(--sq-muted);
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* CONVENTION: band chrome. */
:where(.entry-content, .editor-styles-wrapper) .ab-records {
  background: var(--sq-white);
  box-sizing: border-box;
  padding: 100px var(--sq-gutter);
}

/* AUTHORITY: component-map.md:95 -- `.ab-vals` (records) is "Group > 3
   horizontal records", 3 columns default. The port names this band
   `.ab-records`/`.ab-record`; it is the same source variant.
   CONVENTION: gap. */
:is(.entry-content, .editor-styles-wrapper) .ab-records-inner {
  align-items: start;
  box-sizing: border-box;
  display: grid;
  gap: 28px 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-inline: auto;
  max-width: var(--sq-wide);
}

/* AUTHORITY: component-map.md:95 -- "42px circular icon/badge plus heading and
   paragraph", laid out horizontally. The 42px diameter and the circle are
   stated, and the record is a two-track row because of it.
   CONVENTION: the badge is realised as a generated box because the bundle emits
   no icon element inside `.ab-record`; the sage fill and the 18px gap are
   house values. */
:is(.entry-content, .editor-styles-wrapper) .ab-record {
  align-items: start;
  column-gap: 18px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  min-width: 0;
}

:where(.entry-content, .editor-styles-wrapper) .ab-record::before {
  background: var(--sq-sage);
  border-radius: 50%;
  content: "";
  display: block;
  grid-column: 1;
  grid-row: 1 / span 2;
  height: 42px;
  width: 42px;
}

:where(.entry-content, .editor-styles-wrapper) .ab-record > .wp-block-heading {
  font-size: 18px;
  grid-column: 2;
  margin: 0 0 8px;
}

:where(.entry-content, .editor-styles-wrapper) .ab-record > p {
  font-size: 15.5px;
  grid-column: 2;
  line-height: 1.65;
  margin: 0;
}

/* =========================================================================
   TRUST / FAQ INDEX  --  `trust-faq.dc.html`, gutenberg-mapping.md:174
   ========================================================================= */

/* AUTHORITY: trust-faq.dc.html -- the intro BLOCK is centred (max-width 900,
   margin 0 auto); its text is left-aligned. gutenberg-mapping.md:174's "centered
   H1 intro" describes the container, not text-align.
   CONVENTION: band chrome and measure. */
:where(.entry-content, .editor-styles-wrapper) .trust-intro {
  background: var(--sq-white);
  box-sizing: border-box;
  padding: 160px var(--sq-gutter) 60px;
}

:where(.entry-content, .editor-styles-wrapper) .trust-intro-inner {
  box-sizing: border-box;
  margin-inline: auto;
  max-width: min(900px, 100%);
}

/* AUTHORITY (centring): the eyebrow rule/label pair is a flex row, so the band's
   centred alignment has to be restated on the flex axis or the eyebrow stays
   left while the H1 centres. */
:is(.entry-content, .editor-styles-wrapper) .trust-intro .eyebrow-wrap {
  justify-content: flex-start;
}

:where(.entry-content, .editor-styles-wrapper) .trust-intro > * > .wp-block-heading {
  font-size: 54px;
  letter-spacing: -.024em;
  line-height: 1.04;
  margin: 0;
  max-width: min(760px, 100%);
}

:where(.entry-content, .editor-styles-wrapper) .trust-intro p:not(.eyebrow-label) {
  font-size: 19px;
  line-height: 1.55;
  margin: 22px 0 0;
  max-width: min(600px, 100%);
}

/* CONVENTION: the `.fq-2col` band root itself is owned by
   `components/process-faq-related-cta.css:262` (grid, 230px rail, 44px gap, all
   AUTHORITY). Only the missing vertical band padding is added here; no layout
   property this sheet's owner declares is touched. */
:where(.entry-content, .editor-styles-wrapper) .fq-2col {
  box-sizing: border-box;
  padding: 0 var(--sq-gutter) 100px;
}

/* AUTHORITY: gutenberg-mapping.md:174 -- "230px sticky top:120px anchor rail
   with exactly 4 anchors". The 120px offset and the sticky behaviour are stated.
   The port names this column `.fq-anchors`; the rule that already exists in
   `process-faq-related-cta.css` targets `.faq-index-rail`, a class the shipping
   bundle never emits, so the rail was static.
   CONVENTION: 4px inter-anchor gap (copied from that same never-matched rule). */
:is(.entry-content, .editor-styles-wrapper) .fq-anchors {
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  min-width: 0;
  position: sticky;
  top: 120px;
}

/* CONVENTION: anchor buttons read as a rail of quiet text links, matching the
   `.faq-index-anchor` treatment the same sheet already describes. */
/* Colour (background / border-colour / text) is owned by
   `assets/css/components/cta-authority.css` -- at (0,2,0) this rule lost the
   anchors to the vendored legacy `style.css` button block. */
:where(.entry-content, .editor-styles-wrapper) .fq-anchors .wp-block-button__link {
  border-width: 0 0 0 2px;
  border-style: solid;
  border-radius: 0;
  display: block;
  font-family: Montserrat, Arial, sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  padding: 10px 14px;
  text-align: left;
}

:where(.entry-content, .editor-styles-wrapper) .fq-content {
  margin: 0;
  min-width: 0;
}

/* AUTHORITY: gutenberg-mapping.md:174 -- "exactly 4 grouped sections".
   CONVENTION: the 56px inter-section rhythm and the section heading scale. */
:where(.entry-content, .editor-styles-wrapper) .fq-section + .fq-section {
  margin-top: 56px;
}

:where(.entry-content, .editor-styles-wrapper) .fq-section > .wp-block-heading {
  border-bottom: 1px solid var(--sq-line2);
  font-size: 24px;
  margin: 0 0 8px;
  padding-bottom: 16px;
  scroll-margin-top: 120px;
}

/* AUTHORITY: the 4 anchors target `#faq-1`..`#faq-4` on the section roots, so the
   fixed shell header offset has to be restated there too. */
:where(.entry-content, .editor-styles-wrapper) .fq-section {
  scroll-margin-top: 120px;
}

/* =========================================================================
   TRUST / GUARANTEE  --  `trust-guarantee.dc.html`, gutenberg-mapping.md:175
   ========================================================================= */

/* CONVENTION: band chrome. */
:where(.entry-content, .editor-styles-wrapper) .g-hero {
  background: var(--sq-white);
  border-bottom: 1px solid var(--sq-line3, #e6e2d6);
  box-sizing: border-box;
  padding: 168px var(--sq-gutter) 80px;
}

:where(.entry-content, .editor-styles-wrapper) :is(.g-hero-inner, .g-process-inner, .g-terms-inner, .g-warranty-inner) {
  box-sizing: border-box;
  margin-inline: auto;
  max-width: var(--sq-wide);
  width: 100%;
}

/* AUTHORITY: gutenberg-mapping.md:175 / component-map.md `.g-2col` (hero) --
   "1.1fr/.9fr, left eyebrow/H1/actions, right four-item clause panel".
   CONVENTION: 56px gap (the house split gap).
   The two `.g-2col` variants are distinguished by their band-inner parent,
   which is the only thing separating them in the bundle DOM. */
:is(.entry-content, .editor-styles-wrapper) .g-hero-inner > .g-2col {
  align-items: center;
  display: grid;
  gap: 56px;
  grid-template-columns: 1.1fr .9fr;
}

/* AUTHORITY: gutenberg-mapping.md:175 / component-map.md `.g-2col` (warranty) --
   "1fr/1fr, left heading/paragraph and right bordered two-row scope list". */
:is(.entry-content, .editor-styles-wrapper) .g-warranty-inner > .g-2col {
  align-items: start;
  display: grid;
  gap: 56px;
  grid-template-columns: 1fr 1fr;
}

:where(.entry-content, .editor-styles-wrapper) .g-2col > .wp-block-column {
  margin: 0;
  min-width: 0;
}

/* CONVENTION: hero type scale, one step below `.lt-hero-copy`. */
:where(.entry-content, .editor-styles-wrapper) .g-hero-copy > .wp-block-heading {
  font-size: 50px;
  letter-spacing: -.024em;
  line-height: 1.05;
  margin: 0;
  max-width: 18ch;
}

/* AUTHORITY: `trust-guarantee.dc.html` schedule-credit band -- its h2 is
   `margin:0` and the lede below it is `margin:20px 0 0`. Same defect as the
   hero lede below, in a different band and with a different reference value:
   ours measured a 0px gap because nothing set either side. Scoped with the
   adjacent-sibling combinator so it can only ever match the paragraph directly
   after the heading, never `.g-terms-foot` (which has its own rule at :1230)
   or the tier-card paragraphs. Found by the D3 measurement pass, not
   owner-reported. */
:is(.entry-content, .editor-styles-wrapper) .g-terms-inner > .wp-block-heading + .wp-block-paragraph {
  margin: 20px 0 0;
}

/* AUTHORITY: `trust-guarantee.dc.html` hero lede -- `margin:24px 0 0;
   max-width:560px`. The h1 above it correctly carries `margin: 0` (the
   reference sets that too), so with no rule of its own the lede had NO
   spacing on either side and sat flush against the heading: a measured 0px
   gap where every sibling hero variant gets 16-24px. `.h-hero-copy`,
   `.lt-hero-copy` and `.cs-hero-copy` all state this on the PARAGRAPH
   (`design-hero-proof.css:106-115`); `.g-hero-copy` was the one variant that
   never did. Owner design review D3. */
:where(.entry-content, .editor-styles-wrapper) .g-hero-copy > .wp-block-paragraph {
  margin: 24px 0 0;
  max-width: 560px;
}

/* AUTHORITY: `trust-guarantee.dc.html` hero action row --
   `display:flex;flex-wrap:wrap;gap:14px;margin-top:32px`. No `justify-content`,
   so flex-start.

   This rule states no `justify-content`, and that is only safe because a
   hero-family rule now restores flex-start. The shared `.r-cta` utility sets
   `center`:
   `:is(.entry-content, .editor-styles-wrapper) .r-cta`
   (`components/process-faq-related-cta.css:423-430`), which is written for the
   `.dark-cta` closing band -- every other rule in that block is `.dark-cta`
   scoped, that one is not -- and so leaks into every `.r-cta` row site-wide.
   It loads 15th of 19 and this rule declared no `justify-content` at all, so
   there was nothing to override it: the hero buttons rendered centred, indented
   102.6px from the x=130 text edge that the h1 and lede share. Owner design
   review D2.

   Fixed for ALL hero columns, not just this one, in
   `design-hero-proof.css` beside the other hero action-row rules -- see the
   census note there for why the shared utility was not rescoped instead. This
   rule therefore states no `justify-content` of its own. */
:is(.entry-content, .editor-styles-wrapper) .g-hero-copy > .wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}

/* AUTHORITY: gutenberg-mapping.md:175 -- the hero's right column is a "four-bullet
   clause panel"; the panel and its four bullets are fixed.
   CONVENTION: the panel's border/padding, copied from `.snapshot-card`
   (`content-bands-grids.css:297-300`), which is the same bordered side panel form. */
:where(.entry-content, .editor-styles-wrapper) .g-hero-terms {
  background: var(--sq-cream);
  border: 1px solid var(--sq-line2);
  box-sizing: border-box;
  padding: 28px;
}

:where(.entry-content, .editor-styles-wrapper) .g-bullet {
  border-top: 1px solid var(--sq-line2);
  padding-block: 16px;
}

:where(.entry-content, .editor-styles-wrapper) .g-bullet:first-child {
  border-top: 0;
  padding-top: 0;
}

:where(.entry-content, .editor-styles-wrapper) .g-bullet:last-child {
  padding-bottom: 0;
}

:where(.entry-content, .editor-styles-wrapper) .g-bullet > .wp-block-heading {
  font-size: 16px;
  margin: 0 0 6px;
}

:where(.entry-content, .editor-styles-wrapper) .g-bullet > p {
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}

/* CONVENTION: band chrome. */
:where(.entry-content, .editor-styles-wrapper) .g-process {
  background: var(--sq-cream);
  box-sizing: border-box;
  padding: 100px var(--sq-gutter);
}

/* AUTHORITY: gutenberg-mapping.md:175 / component-map.md `.g-2col` (process) --
   "Group > 3 equal cards, each number/H3/paragraph", 3 columns default.
   CONVENTION: gap and the 24px margin above the grid. */
:is(.entry-content, .editor-styles-wrapper) .g-process-grid {
  align-items: stretch;
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 34px;
}

/* CONVENTION: card form, copied from `.h-serv-card`. */
:where(.entry-content, .editor-styles-wrapper) .g-process-card {
  background: var(--sq-white);
  border: 1px solid var(--sq-line2);
  box-sizing: border-box;
  height: 100%;
  min-width: 0;
  padding: 24px;
}

:where(.entry-content, .editor-styles-wrapper) .g-process-card > .wp-block-heading {
  font-size: 18px;
  margin: 0 0 10px;
}

:where(.entry-content, .editor-styles-wrapper) .g-process-card > p {
  font-size: 15.5px;
  line-height: 1.65;
  margin: 0;
}

/* CONVENTION: band chrome. */
:where(.entry-content, .editor-styles-wrapper) .g-terms {
  background: var(--sq-white);
  box-sizing: border-box;
  padding: 100px var(--sq-gutter);
}

/* AUTHORITY: gutenberg-mapping.md:175 / component-map.md `.g-tiers` -- "Group > 3
   tier cards with large value and late-day label", 3 columns default.
   The three cards are DELIBERATELY empty of tier values, caps and legal terms
   pending a signed legal addendum (`content-policy-map.md:528`). Only the
   container footprint is styled here; a `min-height` keeps the empty
   three-card footprint legible instead of collapsing to a hairline.
   CONVENTION: gap, min-height, card form. */
:is(.entry-content, .editor-styles-wrapper) .g-tiers {
  align-items: stretch;
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 34px;
}

:where(.entry-content, .editor-styles-wrapper) .g-tier {
  background: var(--sq-cream);
  border: 1px solid var(--sq-line2);
  box-sizing: border-box;
  height: 100%;
  min-height: 132px;
  min-width: 0;
  padding: 24px;
}

/* AUTHORITY: component-map.md `.g-tiers` -- "large value" line. */
:where(.entry-content, .editor-styles-wrapper) .g-tier > .wp-block-heading {
  font-size: 26px;
  line-height: 1.15;
  margin: 0 0 8px;
}

:where(.entry-content, .editor-styles-wrapper) .g-tier > p {
  color: var(--sq-muted);
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: .08em;
  margin: 0;
  text-transform: uppercase;
}

/* CONVENTION: band chrome. */
:where(.entry-content, .editor-styles-wrapper) .g-warranty {
  background: var(--sq-cream);
  border-top: 1px solid var(--sq-line);
  box-sizing: border-box;
  padding: 100px var(--sq-gutter);
}

:where(.entry-content, .editor-styles-wrapper) .g-warranty-copy > .wp-block-heading {
  font-size: 34px;
  line-height: 1.12;
  margin: 0 0 16px;
}

:where(.entry-content, .editor-styles-wrapper) .g-warranty-copy > p {
  font-size: 17px;
  margin: 0;
  max-width: 46ch;
}

/* AUTHORITY: component-map.md `.g-2col` (warranty) -- the right column is a
   "bordered two-row scope list".
   CONVENTION: the border/padding values. */
:where(.entry-content, .editor-styles-wrapper) .g-warranty-rows {
  background: var(--sq-white);
  border: 1px solid var(--sq-line2);
  box-sizing: border-box;
  padding: 8px 24px;
}

:where(.entry-content, .editor-styles-wrapper) .g-warranty-row {
  border-top: 1px solid var(--sq-line2);
  padding-block: 20px;
}

:where(.entry-content, .editor-styles-wrapper) .g-warranty-row:first-child {
  border-top: 0;
}

:where(.entry-content, .editor-styles-wrapper) .g-warranty-row > .wp-block-heading {
  font-size: 17px;
  margin: 0 0 6px;
}

:where(.entry-content, .editor-styles-wrapper) .g-warranty-row > p {
  font-size: 15.5px;
  line-height: 1.65;
  margin: 0;
}

/* =========================================================================
   TRUST / GUARANTEE TERMS  --  gutenberg-mapping.md:176
   ========================================================================= */

/* AUTHORITY: gutenberg-mapping.md:176 -- "cream intro Group(max 820)" followed by
   a "white Group(max 820)". Both backgrounds and both measures are already
   declared in `components/content-bands-grids.css:656-668` and are deliberately
   NOT repeated here.
   CONVENTION: the two bands' padding only. */
:where(.entry-content, .editor-styles-wrapper) .terms-intro {
  box-sizing: border-box;
  padding: 168px var(--sq-gutter) 64px;
}

:where(.entry-content, .editor-styles-wrapper) .terms-list {
  box-sizing: border-box;
  padding: 72px var(--sq-gutter) 110px;
}

:where(.entry-content, .editor-styles-wrapper) .terms-intro-inner > .wp-block-heading {
  font-size: 42px;
  line-height: 1.08;
  margin: 0;
}

:where(.entry-content, .editor-styles-wrapper) .terms-intro-inner > p:not(.eyebrow-label) {
  font-size: 17px;
  margin: 20px 0 0;
}

/* AUTHORITY: gutenberg-mapping.md:176 -- "exactly 7 H2/paragraph legal records".
   CONVENTION: the hairline separator and the 40px record rhythm; legal-record
   spacing is not stated anywhere in this repo. */
:where(.entry-content, .editor-styles-wrapper) .terms-record + .terms-record {
  border-top: 1px solid var(--sq-line2);
  margin-top: 40px;
  padding-top: 40px;
}

:where(.entry-content, .editor-styles-wrapper) .terms-record > .wp-block-heading {
  font-size: 22px;
  line-height: 1.2;
  margin: 0 0 12px;
}

:where(.entry-content, .editor-styles-wrapper) .terms-record > p {
  font-size: 16px;
  line-height: 1.7;
  margin: 0 0 12px;
}

:where(.entry-content, .editor-styles-wrapper) .terms-record > p:last-child {
  margin-bottom: 0;
}

/* AUTHORITY: gutenberg-mapping.md:176 -- "record 3 contains 3-row tier list", and
   its values are owner-held pending the legal addendum
   (`content-policy-map.md:528`). The three-row footprint is intentional; only
   the container is styled.
   CONVENTION: the boxed list form and its padding. */
:where(.entry-content, .editor-styles-wrapper) .terms-tier-list {
  background: var(--sq-cream);
  border: 1px solid var(--sq-line2);
  box-sizing: border-box;
  margin-top: 18px;
  padding: 8px 22px;
}

:where(.entry-content, .editor-styles-wrapper) .terms-tier-list > p {
  border-top: 1px solid var(--sq-line2);
  font-size: 15.5px;
  line-height: 1.6;
  margin: 0;
  padding-block: 14px;
}

:where(.entry-content, .editor-styles-wrapper) .terms-tier-list > p:first-child {
  border-top: 0;
}

/* =========================================================================
   HOME GUARANTEE BAND  --  gutenberg-mapping.md:162, component-map.md:65
   ========================================================================= */

/* AUTHORITY: gutenberg-mapping.md:162 gives `.h-gtee` as "1fr/1fr copy + 3 cards"
   stacking <=900.
   DEVIATION, recorded not papered over: the shipping bundle composes `.h-gtee`
   as a SINGLE-column band -- eyebrow/H2/paragraph stacked above a
   `.h-gtee-grid` of 3 `.h-gtee-card`s -- with no Columns block to carry the
   1fr/1fr split. The copy/cards split therefore cannot be produced from CSS
   alone; it needs a composer change. What IS implementable and is implemented:
   the 3-card grid and its <=900 collapse.
   CONVENTION: band chrome and gap. */
:where(.entry-content, .editor-styles-wrapper) .h-gtee {
  background: var(--sq-cream);
  border-top: 1px solid var(--sq-line);
  box-sizing: border-box;
  padding: 100px var(--sq-gutter);
}

:where(.entry-content, .editor-styles-wrapper) .h-gtee-inner {
  box-sizing: border-box;
  margin-inline: auto;
  max-width: var(--sq-wide);
}

:where(.entry-content, .editor-styles-wrapper) .h-gtee-inner > p:not(.eyebrow-label) {
  font-size: 18px;
  margin: 16px 0 0;
  max-width: 62ch;
}

/* AUTHORITY: "3 cards". CONVENTION: gap and the 34px offset from the copy. */
:is(.entry-content, .editor-styles-wrapper) .h-gtee-grid {
  align-items: stretch;
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 34px;
}

/* CONVENTION: card form, copied from `.h-serv-card`. */
:where(.entry-content, .editor-styles-wrapper) .h-gtee-card {
  background: var(--sq-cream);
  border: 1px solid var(--sq-line2);
  box-sizing: border-box;
  height: 100%;
  min-width: 0;
  padding: 24px;
}

:where(.entry-content, .editor-styles-wrapper) .h-gtee-card > .wp-block-heading {
  font: 800 30px/1 Montserrat, Arial, sans-serif;
  letter-spacing: -.02em;
  margin: 0;
}

:where(.entry-content, .editor-styles-wrapper) .h-gtee-card > p {
  margin: 10px 0 0;
  color: var(--sq-green);
  font: 600 11px/1.3 "IBM Plex Mono", monospace;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* =========================================================================
   SERVICE PRICE BAND  --  gutenberg-mapping.md:163/:174, component-map.md:66
   ========================================================================= */

/* CONVENTION: band chrome. */
:where(.entry-content, .editor-styles-wrapper) .lt-price {
  background: var(--sq-cream);
  border-top: 1px solid var(--sq-line);
  box-sizing: border-box;
  padding: 100px var(--sq-gutter);
}

:where(.entry-content, .editor-styles-wrapper) .lt-price-inner {
  box-sizing: border-box;
  margin-inline: auto;
  max-width: var(--sq-wide);
}

:where(.entry-content, .editor-styles-wrapper) .lt-price-inner > p:not(.eyebrow-label) {
  font-size: 18px;
  margin: 16px 0 0;
  max-width: 62ch;
}

/* AUTHORITY: gutenberg-mapping.md:163 and component-map.md:66 -- `.lt-price` is
   "1.1fr/.9fr" and stacks <=900.
   CONVENTION: gap and the 34px offset from the copy. */
:is(.entry-content, .editor-styles-wrapper) .lt-price-layout {
  align-items: stretch;
  display: grid;
  gap: 18px;
  grid-template-columns: 1.1fr .9fr;
  margin-top: 34px;
}

/* AUTHORITY: gutenberg-mapping.md:163 -- the two columns are the "included" and
   "add-on" cards.
   CONVENTION: card form, copied from `.h-serv-card`; the add-on card takes the
   cream fill so the pair reads as primary/secondary. */
:where(.entry-content, .editor-styles-wrapper) :is(.lt-price-included, .lt-price-addon) {
  background: var(--sq-white);
  border: 1px solid var(--sq-line2);
  box-sizing: border-box;
  height: 100%;
  margin: 0;
  min-width: 0;
  padding: 28px;
}

:where(.entry-content, .editor-styles-wrapper) .lt-price-addon {
  background: transparent;
}

:where(.entry-content, .editor-styles-wrapper) :is(.lt-price-included, .lt-price-addon) > .wp-block-heading {
  font-size: 18px;
  margin: 0 0 6px;
}

/* CONVENTION: the price line items read as a hairline-separated list, the same
   form `.snapshot-row` and `.faq-item` use. */
:where(.entry-content, .editor-styles-wrapper) .lt-price-item {
  border-top: 1px solid var(--sq-line2);
  font-size: 15.5px;
  line-height: 1.6;
  margin: 0;
  padding-block: 14px;
}

:where(.entry-content, .editor-styles-wrapper) .lt-price-item:last-child {
  padding-bottom: 0;
}

/* -------------------------------------------------------------------------
   SERVICE PRICE BAND -- the source tier stack.

   AUTHORITY: the source corpus, `reference-output/pages/svc-*.html` inside
   `sequoia-source-handover.zip` (SHA-256 5b26a745...e952d83). Every value below
   is transcribed from that page's inline style on the tier row:

     row   background #fff; border 1px solid var(--sq-line); padding 20px 22px;
           display flex; justify-content space-between; align-items baseline;
           gap 16px
     name  700 16px/1.25 Montserrat, var(--sq-ink)
     note  400 13px/1.4 "Nunito Sans", var(--sq-mute); margin-top 4px
     value 800 22px/1 Montserrat; letter-spacing -.01em; var(--sq-green);
           white-space nowrap

   The wrapping stack is the corpus's `display:flex; flex-direction:column;
   gap:12px` left cell of the band's 1.1fr/.9fr grid -- which `.lt-price-layout`
   above already is, so the two new columns only supply the flow inside it.

   These classes are NEW because the pre-migration body had no tier stack: the
   neutral copy it published was two flat lists, so nothing in the port had ever
   needed a priced row. Without these rules the tier copy renders as unstyled
   paragraphs.
   ------------------------------------------------------------------------- */
:where(.entry-content, .editor-styles-wrapper) :is(.lt-price-tiers, .lt-price-lists) {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  min-width: 0;
}

:where(.entry-content, .editor-styles-wrapper) .lt-price-tier {
  align-items: baseline;
  background: var(--sq-white);
  border: 1px solid var(--sq-line);
  box-sizing: border-box;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  padding: 20px 22px;
}

:where(.entry-content, .editor-styles-wrapper) .lt-price-tier-copy {
  min-width: 0;
}

:where(.entry-content, .editor-styles-wrapper) .lt-price-tier-name {
  color: var(--sq-ink);
  font-family: Montserrat, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
}

:where(.entry-content, .editor-styles-wrapper) .lt-price-tier-note {
  color: var(--sq-mute);
  font-family: "Nunito Sans", sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  margin: 4px 0 0;
}

:where(.entry-content, .editor-styles-wrapper) .lt-price-tier-value {
  color: var(--sq-green);
  font-family: Montserrat, sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1;
  margin: 0;
  white-space: nowrap;
}

/* AUTHORITY: the corpus footnote under the stack -- 400 13px/1.5 "Nunito Sans",
   var(--sq-mute). */
:where(.entry-content, .editor-styles-wrapper) .lt-price-tier-foot {
  color: var(--sq-mute);
  font-family: "Nunito Sans", sans-serif;
  font-size: 13px;
  line-height: 1.5;
  margin: 4px 0 0;
}

/* The two itemised lists stack inside the narrow cell rather than sitting side
   by side, so each keeps its own card chrome from the rule above. */
:where(.entry-content, .editor-styles-wrapper) .lt-price-lists > :is(.lt-price-included, .lt-price-addon) {
  height: auto;
}

/* AUTHORITY: the corpus marks every "What's included" item with a green check
   glyph. That glyph reaches `manifest.routeCopy` as a decorative `parts[0]`
   segment, and the composer drops it there on purpose -- printing it as copy
   would put a literal character in the text layer, where a screen reader reads
   it out and the byte-exact gates would have to carry it. It belongs to the
   list's presentation, so it is drawn here instead. */
:where(.entry-content, .editor-styles-wrapper) .lt-price-included > .lt-price-item::before {
  color: var(--sq-green);
  content: "\2713";
  font-weight: 700;
  margin-right: 10px;
}

/* =========================================================================
   RESPONSIVE LADDER
   Every threshold below is AUTHORITY, quoted from the per-component breakpoint
   ledger at `docs/luke-port/gutenberg-mapping.md:186-215`.
   ========================================================================= */

/* AUTHORITY (:186 ledger): `.ab-hero` <=940 one column; `.ab-vals` values variant
   <=940 three cards to one; `.ab-vals` records variant <=940 three to one;
   `.ab-team` <=940 four cards to two. */
@media (max-width: 940px) {
  :is(.entry-content, .editor-styles-wrapper) .ab-hero-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  :is(.entry-content, .editor-styles-wrapper) .ab-vals-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  :is(.entry-content, .editor-styles-wrapper) .ab-records-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Eight rows keeps two cards per column, i.e. the authored two-column step.
     See the flat-DOM implementation note on `.ab-team-inner` above. */
  :is(.entry-content, .editor-styles-wrapper) .ab-team-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(8, auto);
  }

  /* CONVENTION: the stacked About hero no longer clears a two-column measure. */
  :where(.entry-content, .editor-styles-wrapper) .ab-hero-copy > .wp-block-heading {
    font-size: 44px;
  }
}

/* The `.g-2col` collapse in `components/content-bands-grids.css:809-813` fires at
   <=940, but the ledger (:186) puts every `.g-2col` variant at <=900. The two
   variant rules in this sheet are (0,3,0) and so hold their columns through that
   earlier rule; this sheet's own collapse below restores the authored 900. */

/* AUTHORITY (:186 ledger): `.g-2col` hero/process/warranty variants <=900 each
   stacks to one column; `.g-tiers` <=900 three tier cards to one; `.lt-price`
   <=900 stacks; `.h-gtee` <=900 stacks; `.fq-2col` <=900 one column and the
   anchor rail loses sticky positioning. */
@media (max-width: 900px) {
  :is(.entry-content, .editor-styles-wrapper) .g-hero-inner > .g-2col,
  :is(.entry-content, .editor-styles-wrapper) .g-warranty-inner > .g-2col {
    grid-template-columns: minmax(0, 1fr);
  }

  :is(.entry-content, .editor-styles-wrapper) .g-process-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  :is(.entry-content, .editor-styles-wrapper) .g-tiers {
    grid-template-columns: minmax(0, 1fr);
  }

  /* `.h-gtee-grid` deliberately NOT collapsed here. The ":174 -- `.h-gtee` <=900
     stacks" authority is about the BAND (copy beside cards), which the shipping
     bundle already renders single-column; it was misapplied to the three credit
     tiles. The reference keeps them a 3-up row at every width -- measured 3
     columns and a 132.9px tile at 390px -- while this rule stacked them
     full-width for a 348.9px block, ~3x the reference height and the single
     largest mobile divergence in the band. The <=520 block at the end of this
     file tightens the tile so 3-up fits a 390px viewport without overflow. */

  :is(.entry-content, .editor-styles-wrapper) .lt-price-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  /* AUTHORITY: ":174 -- the anchor rail returns to normal flow." */
  :is(.entry-content, .editor-styles-wrapper) .fq-anchors {
    flex-direction: row;
    flex-wrap: wrap;
    position: static;
  }

  /* CONVENTION: the stacked bands drop the desktop top offset, matching the
     <=900 `padding-top: 132px` step `content-bands-grids.css:837-839` already
     applies to `.h-hero`/`.lt-hero`/`.cs-hero`. */
  :where(.entry-content, .editor-styles-wrapper) :is(.ab-hero, .g-hero, .terms-intro, .trust-intro) {
    padding-top: 132px;
  }

  :where(.entry-content, .editor-styles-wrapper) .g-hero-copy > .wp-block-heading {
    font-size: 40px;
  }
}

/* AUTHORITY (:186 ledger): `.ab-stats` <=560 four stat cells to two; `.ab-team`
   <=560 to one. */
@media (max-width: 560px) {
  :is(.entry-content, .editor-styles-wrapper) .ab-stats-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  :is(.entry-content, .editor-styles-wrapper) .ab-team-inner {
    grid-auto-flow: row;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
  }

  /* CONVENTION: single-column stacking restores source order, so each card's
     media needs its own separation from the previous card's copy. */
  :where(.entry-content, .editor-styles-wrapper) .ab-team-media {
    margin-top: 20px;
  }

  :where(.entry-content, .editor-styles-wrapper) .ab-team-inner > :first-child {
    margin-top: 0;
  }

  /* CONVENTION: the 42px badge and its copy stop sharing a row on a phone. */
  :is(.entry-content, .editor-styles-wrapper) .ab-record {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 14px;
  }

  :where(.entry-content, .editor-styles-wrapper) .ab-record::before {
    grid-column: 1;
    grid-row: 1;
  }

  :where(.entry-content, .editor-styles-wrapper) .ab-record > .wp-block-heading,
  :where(.entry-content, .editor-styles-wrapper) .ab-record > p {
    grid-column: 1;
  }
}

/* =========================================================================
   SOURCE COPY SLOTS  --  added 2026-08-19
   Nodes the source record carries that the neutral bodies had no slot for.
   Each is a caption-weight variant of a rule this sheet already declares; no
   new colour, measure or breakpoint is introduced.
   ========================================================================= */

/* The clause panel's caption above the four `.g-bullet` rows
   (`routeCopy['page.trust.completion-time-guarantee'].sections[0]`, block
   `0.1.1.0`). Same mono caption treatment as `.eyebrow-label` and
   `.hs-group-tag`. */
:where(.entry-content, .editor-styles-wrapper) .g-terms-label {
  color: var(--sq-muted);
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .06em;
  line-height: 1.5;
  margin: 0 0 14px;
  text-transform: uppercase;
}

/* The excusable-delay footnote under the tier cards (same record, section 2
   block `0.2`). It is legal small print, not band body copy. */
:where(.entry-content, .editor-styles-wrapper) .g-terms-foot {
  color: var(--sq-muted);
  font-size: 14px;
  line-height: 1.7;
  margin: 26px 0 0;
  max-width: 78ch;
}

/* The guarantee process cards now carry the record's step numeral. Without
   this the generic `.g-process-card > p` rule would render `01` at body size;
   `.process-number` already describes the mono numeral elsewhere in the port
   and both rules sit at zero specificity, so the numeral is restated here
   rather than left to sheet order. */
:where(.entry-content, .editor-styles-wrapper) .g-process-card > .process-number {
  color: var(--sq-muted);
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .06em;
  line-height: 1;
  margin: 0 0 10px;
  text-transform: uppercase;
}

/* =========================================================================
   TRUST / REVIEWS, CONTACT, GET-ESTIMATE  --  added 2026-08-24
   The three trust routes the route manifest carries as `write: false`
   (page.native.reviews / page.native.contact / page.native.estimate) and
   therefore never composed. Built by scripts/apply-trust-native-pages.php.

   AUTHORITY here is stronger than for the four bands above: the composed
   reference pages ARE vendored, at
   .work/loc-src/reference-output/pages/{reviews,contact,get-estimate}.html,
   and every value below is transcribed from their inline styles. Tokens are
   substituted where a token exists with the same value (`--sq-cream` for
   #f6f4ee, `--sq-line` for #e3dfd3, `--sq-gutter` for the 48px band inline
   padding, `--sq-wide` for the 1180px measure). Values with no token are
   quoted verbatim and marked REFERENCE.

   LAYOUT SPECIFICITY: same convention as the rest of this sheet -- any rule
   declaring display / grid-template-columns / flex-* is written with
   `:is(.entry-content, .editor-styles-wrapper)` so it reaches (0,2,0) and
   beats Core's `body .is-layout-*` inline sheet.

   `.rv-plat` is deliberately NOT redeclared: components/content-bands-grids.css
   already gives it `display:grid; gap:18px; grid-template-columns:repeat(4,...)`
   with the 560px collapse and the ::before/::after neutralisation, which is
   exactly the reference value (`repeat(4, 1fr)`, `gap: 18px`).
   ========================================================================= */

/* -------------------------------------------------------------------------
   Shared band chrome for the three routes.
   ---------------------------------------------------------------------- */

/* REFERENCE reviews.html:`padding: 168px 48px 72px` on the hero section, and
   the same 168px top offset the rest of the port uses under the fixed shell
   header. */
:where(.entry-content, .editor-styles-wrapper) :is(.rv-hero, .c-hero) {
  background: var(--sq-white);
  border-bottom: 1px solid var(--sq-line3, #e6e2d6);
  box-sizing: border-box;
}

:where(.entry-content, .editor-styles-wrapper) .rv-hero {
  padding: 168px var(--sq-gutter) 72px;
}

/* REFERENCE contact.html `padding: 160px 48px 60px`. */
:where(.entry-content, .editor-styles-wrapper) .c-hero {
  padding: 160px var(--sq-gutter) 60px;
}

:where(.entry-content, .editor-styles-wrapper) :is(
  .rv-hero-inner,
  .rv-plat-inner,
  .rv-quotes-inner,
  .rv-cred-inner,
  .c-hero-inner
) {
  box-sizing: border-box;
  margin-inline: auto;
  max-width: var(--sq-wide);
  width: 100%;
}

/* Section heads: eyebrow + h2, capped at the reference 680px measure with a
   36px gap to the grid below. REFERENCE reviews.html:`max-width: 680px;
   margin-bottom: 36px`. */
:where(.entry-content, .editor-styles-wrapper) .rv-band-head {
  margin: 0 0 36px;
  max-width: 680px;
}

/* -------------------------------------------------------------------------
   REVIEWS  --  reference-output/pages/reviews.html
   ---------------------------------------------------------------------- */

/* REFERENCE `grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items:
   center`. */
:is(.entry-content, .editor-styles-wrapper) .rv-hero-layout {
  align-items: center;
  display: grid;
  gap: 56px;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
}

:where(.entry-content, .editor-styles-wrapper) .rv-hero-layout > .wp-block-column {
  margin: 0;
  min-width: 0;
}

/* REFERENCE `font: 700 56px/1.03 Montserrat; letter-spacing: -.024em`. */
:where(.entry-content, .editor-styles-wrapper) .rv-hero-copy > .wp-block-heading {
  font-size: 56px;
  letter-spacing: -.024em;
  line-height: 1.03;
  margin: 0;
  text-wrap: balance;
}

/* REFERENCE `margin: 24px 0 0; max-width: 560px; font: 400 19px/1.55`. */
:where(.entry-content, .editor-styles-wrapper) .rv-hero-copy > p:not(.eyebrow-label):not(.rv-hero-phone) {
  font-size: 19px;
  line-height: 1.55;
  margin: 24px 0 0;
  max-width: 560px;
}

/* REFERENCE `gap: 14px; margin-top: 32px` on the hero action row. */
:is(.entry-content, .editor-styles-wrapper) .rv-hero-copy > .wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}

/* The reference's second hero action is an outline `tel:` button. The port
   never authors a `tel:` CTA button (see facts-registry.md section M2: a
   standalone phone slot is prose with an inline anchor), so it is a paragraph
   sitting on the same baseline as the button. */
:where(.entry-content, .editor-styles-wrapper) .rv-hero-phone {
  font-family: Montserrat, Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .01em;
  margin: 14px 0 0;
}

/* REFERENCE hero panel: `border: 1px solid #e3dfd3; background: #f6f4ee;
   padding: 34px 36px`. */
:where(.entry-content, .editor-styles-wrapper) .rv-hero-panel {
  background: var(--sq-cream);
  border: 1px solid var(--sq-line);
  box-sizing: border-box;
  min-width: 0;
  padding: 34px 36px;
}

/* REFERENCE `gap: 22px; padding-bottom: 22px; border-bottom: 1px solid
   #e6dfcf`; the hairline maps onto `--sq-line2`. */
:is(.entry-content, .editor-styles-wrapper) .rv-score {
  align-items: center;
  border-bottom: 1px solid var(--sq-line2);
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  padding-bottom: 22px;
}

/* REFERENCE `font: 800 64px/.85 Montserrat; letter-spacing: -.03em`. */
:where(.entry-content, .editor-styles-wrapper) .rv-score-value {
  color: var(--sq-ink);
  font-family: Montserrat, Arial, sans-serif;
  font-size: 64px;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: .85;
  margin: 0;
}

:is(.entry-content, .editor-styles-wrapper) .rv-score-meta {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

/* REFERENCE five `★` spans at `color: #cf9a34; font-size: 20px`. The port
   emits one aria-hidden run instead of five spans; the tracking restores the
   3px inter-star gap the reference produced with a flex gap. */
:where(.entry-content, .editor-styles-wrapper) .rv-stars {
  color: #cf9a34;
  font-size: 20px;
  letter-spacing: 3px;
  line-height: 1;
  margin: 0;
}

:where(.entry-content, .editor-styles-wrapper) .rv-score-label {
  margin: 0;
}

/* REFERENCE `margin-top: 20px; gap: 14px` on the platform summary stack. */
:is(.entry-content, .editor-styles-wrapper) .rv-where {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 20px;
}

/* REFERENCE `font: 500 10px/1 "IBM Plex Mono"; letter-spacing: .14em`. */
:where(.entry-content, .editor-styles-wrapper) :is(.rv-where-label, .c-block-label) {
  color: var(--sq-green);
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .14em;
  line-height: 1;
  margin: 0;
  text-transform: uppercase;
}

:is(.entry-content, .editor-styles-wrapper) .rv-where-row {
  align-items: baseline;
  display: flex;
  gap: 14px;
  justify-content: space-between;
}

/* REFERENCE `font: 600 15px/1.3 "Nunito Sans"`. */
:where(.entry-content, .editor-styles-wrapper) .rv-where-name {
  color: var(--sq-ink);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
}

/* REFERENCE `font: 600 12px/1.3 "IBM Plex Mono"; text-align: right`. */
:where(.entry-content, .editor-styles-wrapper) .rv-where-count {
  color: var(--sq-muted);
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
  text-align: right;
}

/* REFERENCE `padding: 88px 48px; background: #f6f4ee`. */
:where(.entry-content, .editor-styles-wrapper) .rv-plat-band {
  background: var(--sq-cream);
  box-sizing: border-box;
  padding: 88px var(--sq-gutter);
}

/* REFERENCE `padding: 26px 24px; border: 1px solid #e3dfd3; background: #fff;
   flex-direction: column; gap: 10px`. The reference card root is an `<a>`;
   Gutenberg cannot make a Group an anchor, so the card is a Group and the
   final line carries the link. */
:is(.entry-content, .editor-styles-wrapper) .rv-plat-card {
  background: var(--sq-white);
  border: 1px solid var(--sq-line);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 26px 24px;
}

/* REFERENCE `font: 700 20px/1.1 Montserrat`. */
:where(.entry-content, .editor-styles-wrapper) .rv-plat-name {
  color: var(--sq-ink);
  font-size: 20px;
  line-height: 1.1;
  margin: 0;
}

/* REFERENCE `font: 800 30px/1 Montserrat; letter-spacing: -.02em; colour green`. */
:where(.entry-content, .editor-styles-wrapper) .rv-plat-count {
  color: var(--sq-green);
  font-family: Montserrat, Arial, sans-serif;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1;
  margin: 0;
}

/* REFERENCE `font: 400 13.5px/1.5 "Nunito Sans"`. */
:where(.entry-content, .editor-styles-wrapper) .rv-plat-desc {
  font-size: 13.5px;
  line-height: 1.5;
  margin: 0;
}

/* REFERENCE `margin-top: 4px; font: 600 12px/1 "IBM Plex Mono";
   letter-spacing: .04em`. */
:where(.entry-content, .editor-styles-wrapper) .rv-plat-link {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1;
  margin: 4px 0 0;
}

:where(.entry-content, .editor-styles-wrapper) .rv-plat-link > a {
  color: var(--sq-green);
  text-decoration: none;
}

:where(.entry-content, .editor-styles-wrapper) .rv-plat-link > a:hover,
:where(.entry-content, .editor-styles-wrapper) .rv-plat-link > a:focus-visible {
  text-decoration: underline;
}

/* REFERENCE `margin: 22px 0 0; font: 400 12.5px/1.5; colour #8a877d`. There is
   no `--sq-mute2` token in this port; `--sq-muted` is the nearest and is the
   token the rest of the sheet uses for de-emphasised captions. */
:where(.entry-content, .editor-styles-wrapper) .rv-note {
  color: var(--sq-muted);
  font-size: 12.5px;
  line-height: 1.5;
  margin: 22px 0 0;
}

/* Provider band. NOT in the reference page -- the route's manifest entry names
   `provider.native_reviews` as its `native-owner` provider slot, and a page
   called Reviews that shows no review is not a defensible outcome. The band is
   chrome only; the block owns everything inside it. */
:where(.entry-content, .editor-styles-wrapper) .rv-quotes {
  background: var(--sq-white);
  border-top: 1px solid var(--sq-line3, #e6e2d6);
  box-sizing: border-box;
  padding: 88px var(--sq-gutter);
}

/* REFERENCE `padding: 88px 48px; background: #fff; border-top: 1px solid
   #e6e2d6`. */
:where(.entry-content, .editor-styles-wrapper) .rv-cred-band {
  background: var(--sq-white);
  border-top: 1px solid var(--sq-line3, #e6e2d6);
  box-sizing: border-box;
  padding: 88px var(--sq-gutter);
}

/* REFERENCE `grid-template-columns: 1fr 1fr; gap: 26px`. */
:is(.entry-content, .editor-styles-wrapper) .rv-cred {
  display: grid;
  gap: 26px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* REFERENCE `display: flex; gap: 15px; align-items: flex-start`. */
:is(.entry-content, .editor-styles-wrapper) .rv-cred-item {
  align-items: flex-start;
  display: flex;
  gap: 15px;
  min-width: 0;
}

/* REFERENCE 42px circle, `border: 2px solid` sage, mono-free Montserrat 700
   15px, centred. The circle is one of the few round things left on the site
   (owner directive: everything square except circles). */
:is(.entry-content, .editor-styles-wrapper) .rv-cred-badge {
  align-items: center;
  border: 2px solid var(--sq-sage);
  border-radius: 50%;
  color: var(--sq-green);
  display: flex;
  flex: 0 0 auto;
  font-family: Montserrat, Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  height: 42px;
  justify-content: center;
  line-height: 1;
  margin: 0;
  width: 42px;
}

:where(.entry-content, .editor-styles-wrapper) .rv-cred-body {
  min-width: 0;
}

/* REFERENCE `font: 700 16px/1.25 Montserrat`. */
:where(.entry-content, .editor-styles-wrapper) .rv-cred-name {
  color: var(--sq-ink);
  font-size: 16px;
  line-height: 1.25;
  margin: 0;
}

/* REFERENCE `font: 500 10px/1.3 mono; letter-spacing: .1em; margin-top: 4px`. */
:where(.entry-content, .editor-styles-wrapper) .rv-cred-org {
  font-size: 10px;
  letter-spacing: .1em;
  line-height: 1.3;
  margin: 4px 0 0;
}

/* REFERENCE `margin: 9px 0 0; font: 400 14px/1.55`. */
:where(.entry-content, .editor-styles-wrapper) .rv-cred-body > p:not(.rv-cred-org) {
  font-size: 14px;
  line-height: 1.55;
  margin: 9px 0 0;
}

/* -------------------------------------------------------------------------
   CONTACT  --  reference-output/pages/contact.html
   ---------------------------------------------------------------------- */

/* REFERENCE h1 `max-width: 760px; font: 700 54px/1.04; letter-spacing:
   -.024em`. */
:where(.entry-content, .editor-styles-wrapper) .c-hero-inner > .wp-block-heading {
  font-size: 54px;
  letter-spacing: -.024em;
  line-height: 1.04;
  margin: 0;
  max-width: 760px;
  text-wrap: balance;
}

/* REFERENCE `margin: 22px 0 0; max-width: 600px; font: 400 19px/1.55`. */
:where(.entry-content, .editor-styles-wrapper) .c-hero-inner > p:not(.eyebrow-label) {
  font-size: 19px;
  line-height: 1.55;
  margin: 22px 0 0;
  max-width: 600px;
}

/* REFERENCE `padding: 64px 48px 90px; background: #f6f4ee`. */
:where(.entry-content, .editor-styles-wrapper) .c-band {
  background: var(--sq-cream);
  box-sizing: border-box;
  padding: 64px var(--sq-gutter) 90px;
}

/* REFERENCE `grid-template-columns: 1fr 1fr; gap: 44px; align-items: start`.
   The 940/900 collapse below matches the frozen-native rule already in
   design-components.css so both renderings of this route break at one point. */
:is(.entry-content, .editor-styles-wrapper) .c-2col {
  align-items: start;
  display: grid;
  gap: 44px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-inline: auto;
  max-width: var(--sq-wide);
}

:where(.entry-content, .editor-styles-wrapper) .c-2col > .wp-block-column {
  margin: 0;
  min-width: 0;
}

/* REFERENCE left rail `display: flex; flex-direction: column; gap: 28px`. */
:is(.entry-content, .editor-styles-wrapper) .c-details {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

:where(.entry-content, .editor-styles-wrapper) .c-block-label {
  margin-bottom: 14px;
}

/* REFERENCE `grid-template-columns: 1fr 1fr; gap: 2px; background: #e3dfd3;
   border: 1px solid #e3dfd3` -- the 2px gap IS the hairline between cells. */
:is(.entry-content, .editor-styles-wrapper) .c-lines {
  background: var(--sq-line);
  border: 1px solid var(--sq-line);
  display: grid;
  gap: 2px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 0;
}

/* REFERENCE `background: #fff; padding: 18px 20px`. */
:where(.entry-content, .editor-styles-wrapper) .c-line {
  background: var(--sq-white);
  box-sizing: border-box;
  min-width: 0;
  padding: 18px 20px;
}

/* REFERENCE `font: 500 9.5px/1 mono; letter-spacing: .1em; margin-bottom: 6px`. */
:where(.entry-content, .editor-styles-wrapper) .c-line-label {
  color: var(--sq-muted);
  font-family: "IBM Plex Mono", monospace;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .1em;
  line-height: 1;
  margin: 0 0 6px;
  text-transform: uppercase;
}

/* REFERENCE `font: 700 19px/1.1 Montserrat`, ink, undecorated. */
:where(.entry-content, .editor-styles-wrapper) .c-line-value {
  font-family: Montserrat, Arial, sans-serif;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.1;
  margin: 0;
}

:where(.entry-content, .editor-styles-wrapper) .c-line-value > a {
  color: var(--sq-ink);
  text-decoration: none;
}

:where(.entry-content, .editor-styles-wrapper) .c-line-value > a:hover,
:where(.entry-content, .editor-styles-wrapper) .c-line-value > a:focus-visible {
  text-decoration: underline;
}

/* REFERENCE `background: #fff; border: 1px solid #e3dfd3; padding: 22px 24px;
   gap: 14px`. The service-area card is the same card at `20px 24px`. */
:is(.entry-content, .editor-styles-wrapper) .c-card {
  background: var(--sq-white);
  border: 1px solid var(--sq-line);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 24px;
}

:where(.entry-content, .editor-styles-wrapper) .c-area {
  padding: 20px 24px;
}

:where(.entry-content, .editor-styles-wrapper) .c-area > .c-line-label {
  margin-bottom: 8px;
}

/* REFERENCE `font: 400 14.5px/1.55` on the service-area prose. */
:where(.entry-content, .editor-styles-wrapper) .c-area > p:not(.c-line-label) {
  font-size: 14.5px;
  line-height: 1.55;
  margin: 0;
}

:where(.entry-content, .editor-styles-wrapper) .c-row > .c-line-label {
  margin-bottom: 5px;
}

/* REFERENCE `font: 400 15px/1.5`; the email row is `600 16px` in green. */
:where(.entry-content, .editor-styles-wrapper) .c-row-value {
  color: var(--sq-ink);
  font-size: 15px;
  line-height: 1.5;
  margin: 0;
}

:where(.entry-content, .editor-styles-wrapper) .c-row-email {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
}

:where(.entry-content, .editor-styles-wrapper) .c-row-email > a {
  color: var(--sq-green);
  text-decoration: none;
}

:where(.entry-content, .editor-styles-wrapper) .c-row-email > a:hover,
:where(.entry-content, .editor-styles-wrapper) .c-row-email > a:focus-visible {
  text-decoration: underline;
}

/* REFERENCE right card `background: #fff; border: 1px solid #e3dfd3;
   padding: 34px 34px 30px`. */
:where(.entry-content, .editor-styles-wrapper) .c-formcol {
  background: var(--sq-white);
  border: 1px solid var(--sq-line);
  box-sizing: border-box;
  min-width: 0;
  padding: 34px 34px 30px;
}

/* REFERENCE `margin: 0 0 6px; font: 700 24px/1.2 Montserrat`. */
:where(.entry-content, .editor-styles-wrapper) .c-formcol > .wp-block-heading {
  font-size: 24px;
  letter-spacing: -.01em;
  line-height: 1.2;
  margin: 0 0 6px;
}

/* REFERENCE `margin: 0 0 22px; font: 400 14.5px/1.55`, muted. */
:where(.entry-content, .editor-styles-wrapper) .c-form-intro {
  color: var(--sq-muted);
  font-size: 14.5px;
  line-height: 1.55;
  margin: 0 0 22px;
}

/* The Gravity Forms slot. The block inside is owned by the forms provider and
   styled by gf-controls.css; this rule only gives it the band's rhythm. */
:where(.entry-content, .editor-styles-wrapper) .c-form-slot {
  margin: 0 0 22px;
}

/* REFERENCE alternate-route stack `display: flex; flex-direction: column;
   gap: 18px`. */
:is(.entry-content, .editor-styles-wrapper) .c-alt {
  border-top: 1px solid var(--sq-line);
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-top: 22px;
}

/* REFERENCE `font: 400 15.5px/1.6`. */
:where(.entry-content, .editor-styles-wrapper) .c-alt > p:first-child {
  font-size: 15.5px;
  line-height: 1.6;
  margin: 0;
}

/* REFERENCE the two actions are full-bleed inside the card. */
:is(.entry-content, .editor-styles-wrapper) .c-alt-cta {
  display: flex;
  margin: 0;
}

:where(.entry-content, .editor-styles-wrapper) .c-alt-cta > .wp-block-button {
  width: 100%;
}

:where(.entry-content, .editor-styles-wrapper) .c-alt-cta .wp-block-button__link {
  display: block;
  text-align: center;
  width: 100%;
}

:where(.entry-content, .editor-styles-wrapper) .c-alt-phone {
  font-family: Montserrat, Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .01em;
  margin: 0;
  text-align: center;
}

/* REFERENCE `margin: 2px 0 0; font: 400 12px/1.5`, de-emphasised. */
:where(.entry-content, .editor-styles-wrapper) .c-alt-note {
  color: var(--sq-muted);
  font-size: 12px;
  line-height: 1.5;
  margin: 2px 0 0;
}

/* -------------------------------------------------------------------------
   GET A FREE ESTIMATE  --  intentionally EMPTY.

   An earlier revision of this section authored a full `.ge-*` band set here.
   It has been removed rather than kept: `assets/css/native-pages.css` already
   holds a value-accurate port of the same reference page under the
   `.native-estimate-*` hooks, and `/get-a-free-estimate/` is now authored in
   THAT vocabulary. Keeping both would have been exactly the duplicate-rule
   pathology this project already has three documented instances of -- correct
   CSS made unreachable by a second, later sheet saying the same thing.

   Verified equivalent before deleting: hero `160px gutter 64px` + title
   `700 56px/1.03` `-.024em` max-width 820px; process grid `repeat(4,1fr)`
   gap 20 with a 2px sage top border and `500 11px/1` mono numeral; form band
   `40px gutter 100px` with a `1fr 1.15fr` gap-44 grid; info `700 32px/1.1`
   `-.02em` with 9px sage `li::before` markers; callout `22px 24px` white card
   with an `800 26px/1` phone. Every one of those values is in
   `native-pages.css` already.

   `.ge-2col`, `.ge-form-2` and `#ge-form` remain referenced by
   `design-components.css`, `providers.css` and `responsive.css` as the LEGACY
   vocabulary. Those are marked superseded, not dead, and are not mine to
   delete -- confirm no emitter and no in-flight work, with evidence, in a
   later pass.
   ------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
   Responsive. Breakpoints transcribed from the reference media queries; the
   940 / 900 / 560 ladder matches the frozen-native rules already in
   design-components.css so both renderings collapse at the same widths.
   ---------------------------------------------------------------------- */

@media (max-width: 940px) {
  :is(.entry-content, .editor-styles-wrapper) .rv-hero-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  :is(.entry-content, .editor-styles-wrapper) .rv-cred {
    grid-template-columns: minmax(0, 1fr);
  }

  :where(.entry-content, .editor-styles-wrapper) .rv-hero-copy > .wp-block-heading {
    font-size: 44px;
  }

  :where(.entry-content, .editor-styles-wrapper) .c-hero-inner > .wp-block-heading {
    font-size: 42px;
  }
}

@media (max-width: 900px) {
  :is(.entry-content, .editor-styles-wrapper) .c-2col {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
}

@media (max-width: 560px) {
  :where(.entry-content, .editor-styles-wrapper) .rv-hero {
    padding-top: 132px;
  }

  :where(.entry-content, .editor-styles-wrapper) .c-hero {
    padding-top: 128px;
  }

  :where(.entry-content, .editor-styles-wrapper) .rv-hero-panel,
  :where(.entry-content, .editor-styles-wrapper) .c-formcol {
    padding: 24px 22px;
  }
}

@media (max-width: 520px) {
  :is(.entry-content, .editor-styles-wrapper) .c-lines {
    grid-template-columns: minmax(0, 1fr);
  }

  :where(.entry-content, .editor-styles-wrapper) .rv-score-value {
    font-size: 52px;
  }
}


/* =========================================================================
   HOME GUARANTEE BAND -- 390px corrections
   Measured against the reference at 390x844: 3-up tile row, auto-width CTA,
   48px band gutter. The reference is a non-responsive inline-styled page, so
   these are its desktop values holding through; matching them is the fidelity
   target the visual audit set.
   ========================================================================= */
@media (max-width: 520px) {
  /* The canvas drops `--sq-gutter` to 24px at this width
     (content-bands-grids.css:1126). The reference band keeps 48px, and the
     narrower box is what let the tile row read as full-bleed. Set the token on
     the band rather than overriding `padding`, so the band's own padding rule
     stays the single owner of that value.
     SCOPE NOTE: the 24px/48px split is site-wide on mobile, not specific to
     this band; only `.h-gtee` is corrected here because only this band is in
     scope. See CHANGES-shell-polish.md. */
  :is(.entry-content, .editor-styles-wrapper) .h-gtee {
    --sq-gutter: 48px;
  }

  /* 294px of inner width, 12px gaps -> 90px tiles. The base 24px card padding
     and 30px numeral overflow that box, so both step down; the reference tile
     is 90.2px wide at this viewport for the same reason. */
  :is(.entry-content, .editor-styles-wrapper) .h-gtee-grid {
    gap: 12px;
  }

  :is(.entry-content, .editor-styles-wrapper) .h-gtee-card {
    padding: 20px 12px;
  }

  :is(.entry-content, .editor-styles-wrapper) .h-gtee-card > .wp-block-heading {
    font-size: 30px;
  }

  /* The CTA's intrinsic width at this viewport is handled with the other copy
     bands in process-faq-related-cta.css, which loads after this sheet -- a
     duplicate here would be a dead override. */
}