/*
 * Reference component compatibility: Package E (gallery/media and Paver static
 * visualizations).  This file is intentionally component-scoped.  It is
 * loaded by the frontend and editor surfaces by the integrator; it does not
 * alter route, shell, provider, or legacy selectors.
 */

.cs-gal,
.ci-grid,
.hi-grid {
	box-sizing: border-box;
	color: #3f3d34;
	font-family: "Nunito Sans", sans-serif;
	margin-left: auto;
	margin-right: auto;
	max-width: 1180px;
	padding-left: 48px;
	padding-right: 48px;
}

/* `.r-paver-inspiration` was in the measure group above until it was split into
   the two nodes amendment 5 describes. It is band 05 of the Paver flagship and
   `4daac2e9` missed it, so it stayed a single `align:wide` node while its six
   sibling bands were corrected. The split is the same one those six got: the
   gutter and the type inheritance belong to the full-bleed section, the 1180
   belongs to the inner node. `max-width` is deliberately absent from the root
   for the reason given at `:31` -- `design-components.css` already resolves this
   root to `max-width:none`, and putting 1180 back on it would measure 1084
   against the source's 1180 once the 48px gutter is subtracted. */
.r-paver-inspiration {
	box-sizing: border-box;
	color: #3f3d34;
	font-family: "Nunito Sans", sans-serif;
	padding-left: 48px;
	padding-right: 48px;
}

.r-paver-inspiration-inner {
	box-sizing: border-box;
	margin-inline: auto;
	max-width: 1180px;
}

/* The six Paver band roots ARE the source's `<section>`: full-bleed, carrying
   the section's own chrome. The reference builds every one of them as two nodes --
   `<section style="padding:104px 48px;background:…">` wrapping
   `<div style="max-width:1180px;margin:0 auto">` -- and the port had merged the
   pair into one element trying to be both. `Sequoia Paver Hub - Page.dc.html`
   `:125/:126` `#surface`, `:185/:186` `#services`, `:305/:306` `#tracker`,
   `:383/:384` `#pricing`, `:482/:483` `#roi`, `:517/:518` `#diligence`.

   `max-width` is deliberately absent here. `design-components.css:51` already
   resolves these roots to `max-width:none`, which is the CORRECT value for a
   full-bleed section -- it simply reached it by an accidental route. Putting
   1180 back on this node measures 1084 against the source's 1180 and destroys
   the full bleed; the measure belongs on the `-inner` node below.

   The gutter is written literally rather than as `var(--sq-gutter)`: that token
   is 48px falling to 24px at <=520, which is neither of this route's authored
   values. Paver collapses to 22px at <=860 (`paver-flagship.html:69-70`). */
.r-surface-band,
.r-cutaway,
.r-tracker,
.r-pricing,
.r-value-context,
.r-diligence {
	background: #fff;
	border-top: 1px solid #e6e2d6;
	box-sizing: border-box;
	color: #3f3d34;
	font-family: "Nunito Sans", sans-serif;
	padding: 104px 48px;
	scroll-margin-top: 88px;
}

/* `:125` is the one cream section of the six, and the only one the reference gives no
   top rule. */
.r-cutaway {
	background: #f6f4ee;
	border-top: 0;
}

/* The source's second node: the 1180px measure, centred inside the full-bleed
   section. `.r-tracker` has no `-inner` because its source inner div IS the
   grid (`:306` carries `max-width:1180px;margin:0 auto` on `.r-2col` itself);
   adding a wrapper there would introduce a node the source does not have, so
   `.r-tracker-layout` takes the measure directly. */
.r-surface-band-inner,
.r-cutaway-inner,
.r-pricing-inner,
.r-value-context-inner,
.r-diligence-inner,
.r-tracker-layout {
	box-sizing: border-box;
	margin-inline: auto;
	max-width: 1180px;
}

.cs-gal *,
.ci-grid *,
.hi-grid *,
.r-surface-band *,
.r-cutaway *,
.r-tracker *,
.r-pricing *,
.r-value-context *,
.r-diligence *,
.r-paver-inspiration * {
	box-sizing: border-box;
}

.cs-gal > .cs-gal-heading,
.ci-grid > .ci-grid-heading,
.hi-grid > .hi-grid-heading {
	color: #17160f;
	font-family: "Montserrat", sans-serif;
	margin: 0 0 28px;
}

.cs-gal-grid {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cs-gal-grid .wp-block-image,
.cs-gal-grid figure {
	background: #f6f4ee;
	border: 1px solid #e3dfd3;
	margin: 0;
	min-height: 220px;
}

/* An empty Gallery stays a silent media slot: no placeholder wording. */

.ci-grid > .wp-block-sequoia-projects,
.hi-grid > .wp-block-sequoia-inspirations,
.r-paver-inspiration .r-work > .wp-block-sequoia-inspirations {
	display: block;
	min-width: 0;
	width: 100%;
}

/* Canvas-scoped, not band-scoped. `.r-eyebrow` is one authored component that
   the paver source repeats in every band; listing seven band roots left the
   flagship's own bands -- hero, proof, process, guarantee, near-you -- with NO
   rule at all, so their eyebrows printed as plain body text with no sage rule.
   Same (0,2,0) weight as the list it replaces; the values are unchanged. */
:is(.entry-content, .editor-styles-wrapper) .r-eyebrow {
	align-items: center;
	color: #3f6d3f;
	display: flex;
	font: 500 11px/1 "IBM Plex Mono", monospace;
	letter-spacing: .16em;
	margin: 0 0 16px;
	text-transform: uppercase;
}

:is(.entry-content, .editor-styles-wrapper) .r-eyebrow-rule {
	background: #82b479;
	display: inline-block;
	height: 2px;
	margin-right: 12px;
	width: 36px;
}

.r-surface-band-inner > .r-surface-header {
	margin-bottom: 44px;
	max-width: 720px;
}

.r-paver-inspiration-header {
	margin-bottom: 36px;
	max-width: 720px;
}

.r-paver-inspiration h2 {
	color: #17160f;
	font: 700 42px/1.05 "Montserrat", sans-serif;
	letter-spacing: -.022em;
	margin: 0 0 18px;
}

.r-paver-inspiration-header > p:last-child {
	font-size: 17px;
	line-height: 1.55;
}

/* The reference carries `.r-work` twice -- the INSPIRATION band and `#work` SELECTED
   WORK -- and puts no wrapper class on either section, so `.r-paver-inspiration`
   is a port invention that covers one instance and leaves the other to Core.
   Canvas-scoped instead: same (0,2,0), both instances, no dependence on a
   wrapper the reference does not have. Source `:223` and `:563` both
   `repeat(3,1fr)` gap 20px; `:57` `<=860` two columns; `:63` `<=520` one. */
:is(.entry-content, .editor-styles-wrapper) .r-work {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.r-surface-band h2,
.r-cutaway h2,
.r-tracker h2,
.r-pricing h2,
.r-value-context h2,
.r-diligence h2 {
	color: #17160f;
	font: 700 42px/1.05 "Montserrat", sans-serif;
	letter-spacing: -.022em;
	margin: 0 0 18px;
}

.r-surface-intro,
.r-cutaway-inner > p,
.r-tracker-copy > p,
.r-pricing-inner > p,
.r-value-context-inner > p,
.r-diligence-intro > p {
	font-size: 17px;
	line-height: 1.55;
}

/* Canvas-scoped with `:is()`, not `:where()`. `.r-services` is a Core Group, so
   Core's late block-support rule
   `.wp-container-core-group-is-layout-*{grid-template-columns:repeat(auto-fill,minmax(12rem,1fr))}`
   is in the document at (0,1,1). A bare `.r-services` and a `:where()`-scoped
   one both score (0,1,0) and lose to it, so the band was laid out by neither
   sheet that defines it. `:is()` contributes its argument's specificity, taking
   these to (0,2,0) -- the minimum that clears Core. The three rules move
   together: raising only the base rule would let Core's single unbreakpointed
   declaration win back inside the media queries. */
:is(.entry-content, .editor-styles-wrapper) .r-services {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	/* The source header already carries `margin-bottom:44px` at
	   `Sequoia Paver Hub - Page.dc.html:187`. The Core flow layout also adds
	   `--wp--preset--spacing--50` to this sibling, which produced an unwanted
	   24px margin at every viewport. Keep the authored header gap and suppress
	   the duplicate Core gap on the card grid. */
	margin-top: 0;
}

.r-image-card {
	background: #fff;
	border: 1px solid #e3dfd3;
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding-bottom: 20px;
}

.r-image-card > h3,
.r-image-card > p {
	margin-left: 20px;
	margin-right: 20px;
}

.r-image-card > h3 {
	color: #17160f;
	font: 700 19px/1.2 "Montserrat", sans-serif;
	margin-bottom: 8px;
	margin-top: 20px;
}

.r-image-card > p {
	font-size: 14px;
	line-height: 1.5;
	margin-bottom: 0;
}

.r-surface-media {
	background: #f6f4ee;
	border: 0;
	height: 160px;
	margin: 0;
	min-height: 160px;
	position: relative;
}

.r-cutaway-inner > p {
	max-width: 760px;
}

.r-cutaway-prompt {
	color: #3f6d3f;
	font: 600 13px/1.4 "Nunito Sans", sans-serif;
	margin-top: 18px;
}

:is(.entry-content, .editor-styles-wrapper) .r-cutaway-layout,
:is(.entry-content, .editor-styles-wrapper) .r-tracker-layout,
:is(.entry-content, .editor-styles-wrapper) .r-value-layout,
:is(.entry-content, .editor-styles-wrapper) .r-diligence-lower {
	display: grid;
}

:is(.entry-content, .editor-styles-wrapper) .r-cutaway-layout {
	background: #fff;
	border: 1px solid #e3dfd3;
	gap: 44px;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	margin-top: 44px;
	padding: 36px;
}

.r-cutaway-stack {
	min-width: 0;
}

.r-cutaway-structure-label,
.r-cutaway-detail-eyebrow,
.r-cutaway-detail-label,
.r-tracker-row-label {
	color: #3f6d3f;
	font: 500 10px/1.3 "IBM Plex Mono", monospace;
	letter-spacing: .15em;
	text-transform: uppercase;
}

.r-cutaway-structure-label {
	border-left: 1px solid #c3bdae;
	margin: 0 0 16px;
	padding: 12px 0 12px 12px;
	writing-mode: vertical-rl;
}

.r-cutaway-layer {
	display: block;
	min-height: 46px;
}

.r-cutaway-layer:hover,
.r-cutaway-layer:focus-within,
.r-cutaway-layer.is-active {
	box-shadow: inset 4px 0 0 #82b479;
}

.r-cutaway-layer-trigger {
	align-items: stretch;
	background: transparent;
	border: 0;
	color: inherit;
	cursor: pointer;
	display: grid;
	font: inherit;
	grid-template-columns: minmax(0, 1fr) 215px;
	min-height: 46px;
	padding: 0;
	text-align: left;
	width: 100%;
}

.r-cutaway-layer-trigger:hover,
.r-cutaway-layer-trigger.is-active {
	background: rgba(130, 180, 121, .08);
}

.r-cutaway-layer-trigger:focus-visible {
	box-shadow: inset 0 0 0 2px #3f6d3f;
	outline: 2px solid #fff;
	outline-offset: -4px;
}

.r-cutaway-swatch {
	align-items: flex-start;
	display: flex;
	min-height: 44px;
	padding: 8px 12px;
}

.r-cutaway-layer--01 .r-cutaway-swatch { background: #cbbda4; min-height: 60px; }
.r-cutaway-layer--02 .r-cutaway-swatch { background: #e2d7c0; }
.r-cutaway-layer--03 .r-cutaway-swatch { background: #b8b3a7; min-height: 96px; }
.r-cutaway-layer--04 .r-cutaway-swatch { background: #b0ac9f; }
.r-cutaway-layer--05 .r-cutaway-swatch { background: #aea89b; min-height: 24px; }
.r-cutaway-layer--06 .r-cutaway-swatch { background: #806f58; min-height: 80px; }

.r-cutaway-number {
	color: #5c503a;
	font: 500 10px/1 "IBM Plex Mono", monospace;
}

.r-cutaway-layer-label {
	align-items: center;
	display: flex;
	gap: 10px;
	padding: 8px 0 8px 14px;
}

.r-cutaway-layer-leader {
	background: #c3bdae;
	height: 1px;
	width: 16px;
}

.r-cutaway-layer-copy {
	display: block;
}

.r-cutaway-layer-label strong,
.r-cutaway-layer-label small {
	display: block;
}

.r-cutaway-layer-label strong {
	color: #17160f;
	font: 600 13px/1.25 "Nunito Sans", sans-serif;
}

.r-cutaway-layer-label small {
	color: #6b6860;
	font: 500 9.5px/1.3 "IBM Plex Mono", monospace;
	margin-top: 3px;
}

.r-cutaway-detail {
	border-left: 1px solid #e6e2d6;
	min-width: 0;
	padding-left: 36px;
}

.r-cutaway-detail-state[hidden] {
	display: none;
}

.r-cutaway-detail-state:not(.is-active) {
	visibility: hidden;
}

.r-cutaway-detail-states {
	min-width: 0;
}

.r-cutaway-detail h3 {
	color: #17160f;
	font: 700 26px/1.15 "Montserrat", sans-serif;
	margin: 0 0 16px;
}

.r-cutaway-active-name {
	color: #17160f;
	font: 600 15px/1.35 "Nunito Sans", sans-serif;
	margin: -6px 0 0;
}

/* Canvas-scoped with `:is()`, exactly as package G scoped the layout family and
   for the same reason one property family over. Core's block-gap support prints
   `:root :where(.is-layout-flow) > *{margin-block-start:var(--wp--preset--spacing--50);
   margin-block-end:0}` into `global-styles-inline-css`, which scores (0,1,0)
   (`:root` is the only contributor; `:where()` adds nothing) and lands ~78KB
   AFTER the last theme sheet in the rendered document. A bare `.r-cutaway-detail-label`
   also scores (0,1,0), ties, and loses on source order -- so this rule's
   `26px 0 10px` was authored and never applied: measured `24px / 0px`, which is
   Core's own block gap and Core's own zero. `:is()` takes it to (0,2,0), the
   minimum that clears Core.
   Source: `Sequoia Paver Hub - Page.dc.html:169` -- the detail panel's
   `Why it matters` label div carries `margin:26px 0 10px` verbatim. */
:is(.entry-content, .editor-styles-wrapper) .r-cutaway-detail-label {
	margin: 26px 0 10px;
}

.r-cutaway-detail-state > p:not(.r-cutaway-detail-eyebrow):not(.r-cutaway-detail-label):not(.r-cutaway-depth) {
	font-size: 16px;
	line-height: 1.55;
}

.r-cutaway-depth {
	align-items: center;
	background: #eaf1e6;
	display: inline-flex;
	gap: 12px;
	margin: 22px 0 0;
	padding: 9px 14px;
}

.r-cutaway-depth span {
	color: #3f6d3f;
	font: 500 10px/1 "IBM Plex Mono", monospace;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.r-cutaway-depth strong {
	color: #17160f;
	font: 600 14px/1 "Nunito Sans", sans-serif;
}

.r-cutaway-callout,
.r-tracker-callout {
	border: 1px solid #e3dfd3;
	border-left: 4px solid #82b479;
	margin-top: 26px;
	padding: 14px 16px;
}

.r-cutaway-callout p,
.r-tracker-callout p {
	font-size: 13.5px;
	line-height: 1.5;
	margin: 0;
}

:is(.entry-content, .editor-styles-wrapper) .r-cutaway-cards {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-top: 24px;
}

.r-cutaway-card {
	border-top: 2px solid #82b479;
	padding-top: 16px;
}

.r-cutaway-card h4 {
	color: #17160f;
	font: 700 15px/1.3 "Montserrat", sans-serif;
	margin: 0 0 9px;
}

.r-cutaway-card p {
	font-size: 14.5px;
	line-height: 1.5;
	margin: 0;
}

:is(.entry-content, .editor-styles-wrapper) .r-tracker-layout {
	gap: 52px;
	grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
}

.r-tracker-copy,
.r-tracker-visual {
	min-width: 0;
}

.r-tracker-copy > h2 {
	max-width: 620px;
}

.r-tracker-checks {
	list-style: none;
	margin: 28px 0 0;
	padding: 0;
}

.r-tracker-checks li {
	border-top: 1px solid #e6e2d6;
	font-size: 15px;
	line-height: 1.45;
	padding: 13px 0 13px 28px;
	position: relative;
}

.r-tracker-checks li::before {
	color: #3f6d3f;
	content: "✓";
	font-weight: 700;
	left: 2px;
	position: absolute;
}

.r-tracker-visual {
	background: #fff;
	border: 1px solid #e3dfd3;
	padding: 24px;
}

.r-tracker-visual-header,
.r-tracker-context,
.r-tracker-status,
.r-tracker-message {
	align-items: center;
	display: flex;
	justify-content: space-between;
}

.r-tracker-visual-header {
	border-bottom: 1px solid #e6e2d6;
	gap: 12px;
	padding-bottom: 14px;
}

.r-tracker-logo-slot {
	background: #f6f4ee;
	border: 1px solid #e3dfd3;
	height: 34px;
	margin: 0;
	position: relative;
	width: 34px;
}

.r-tracker-logo-slot:empty::after {
	color: #6b6860;
	content: "Logo";
	display: block;
	font: 500 7px/34px "IBM Plex Mono", monospace;
	text-align: center;
	text-transform: uppercase;
}

.r-tracker-visual-title {
	align-items: center;
	display: flex;
	flex: 1;
	justify-content: space-between;
}

.r-tracker-visual-header p,
.r-tracker-status p,
.r-tracker-record p,
.r-tracker-message p {
	color: #17160f;
	font: 600 13px/1.3 "Nunito Sans", sans-serif;
	margin: 0;
}

.r-tracker-context {
	color: #6b6860;
	font: 500 9px/1.35 "IBM Plex Mono", monospace;
	gap: 12px;
	justify-content: flex-start;
	padding: 12px 0 0;
	text-transform: uppercase;
}

.r-tracker-status > span:not(.r-tracker-status-dot) {
	color: #6b6860;
	font: 500 9px/1.35 "IBM Plex Mono", monospace;
	text-transform: uppercase;
}

.r-tracker-visual-badge,
.r-tracker-status,
.r-tracker-message-state {
	color: #6b6860;
	font: 500 9px/1.3 "IBM Plex Mono", monospace;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.r-tracker-status {
	border-bottom: 1px solid #e6e2d6;
	padding: 16px 0;
}

.r-tracker-status-dot {
	background: #82b479;
	border-radius: 50%;
	height: 9px;
	width: 9px;
}

/* `margin: 24px 0` was removed rather than raised. It was dead under Core's
   block-gap rule (see the note on `.r-cutaway-detail-label`), and the source has
   no such value to raise it to: the node this rail stands for is
   `Sequoia Paver Hub - Page.dc.html:334`, the four-cell stage label strip, whose
   only authored spacing is `margin-bottom:10px` and which has no top margin at
   all -- it sits at the top of a `padding:20px 20px` panel. The authored `24px`
   is identical to `--wp--preset--spacing--50`, i.e. to the Core default that was
   already in force, so it never expressed an author intent that the rendering
   lacked (fidelity directive 5.9). The rail's separation from the note below it
   is carried by `.r-tracker-stage-note`'s source `margin-top:10px`. */
/* Raised for the same reason package G raised the outer bands, on a root G did
   not reach. This is a Core Group, so Core prints
   `.wp-container-core-group-is-layout-*{grid-template-columns:repeat(auto-fill,
   minmax(min(12rem,100%),1fr))}` at (0,1,1) plus a `gap` from the block-gap
   support; a bare `.r-tracker-stage-rail` scores (0,1,0) and lost BOTH. Measured
   as authored: ONE track at 1440/900/861 -- the four stages stacked vertically,
   with the `::before` connector line spanning nothing -- and `gap: 24px` against
   an authored `0`. It then *widened* to three tracks at 860, which is auto-fill
   responding to the parent `.r-tracker-layout` collapsing to one column, not any
   rule in this sheet.
   Source: `Sequoia Paver Hub - Page.dc.html:334`, `display:grid;
   grid-template-columns:repeat(4,1fr)` with no gap declared, i.e. 0.
   The clearfix roots in `design-components.css` are extended in the same commit:
   raising alone gives four tracks but rows of [3,1], because the legacy
   `.wp-block-group::before` becomes a grid item and steals the fourth cell. */
:is(.entry-content, .editor-styles-wrapper) .r-tracker-stage-rail {
	display: grid;
	gap: 0;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.r-tracker-stage {
	position: relative;
	text-align: center;
}

.r-tracker-stage::before {
	background: #dcd8cc;
	content: "";
	height: 2px;
	left: 0;
	position: absolute;
	right: 0;
	top: 11px;
}

.r-tracker-stage:first-child::before { left: 50%; }
.r-tracker-stage:last-child::before { right: 50%; }

.r-tracker-stage span,
.r-tracker-stage strong {
	display: block;
	position: relative;
}

.r-tracker-stage-note,
.r-tracker-actor {
	color: #6b6860;
	font: 500 9px/1.35 "IBM Plex Mono", monospace;
}

/* Source: `Sequoia Paver Hub - Page.dc.html:344` -- the stage-rail caption
   (`Prep underway, on track...`) carries `margin-top:10px` and no bottom margin.
   The port had `-10px 0 14px`: the negative top was a correction for the rail's
   own invented `24px` bottom margin, and `14px` appears nowhere in the Paver
   source. Both were dead anyway (measured `24px / 0px`). Raised to (0,2,0) so
   the one real source value applies. */
:is(.entry-content, .editor-styles-wrapper) .r-tracker-stage-note {
	margin: 10px 0 0;
	text-align: center;
}

/* `margin-bottom: 14px` was removed, not raised: the node this stands for is the
   message-row header at `Sequoia Paver Hub - Page.dc.html:350`
   (`display:flex;justify-content:space-between;gap:8px`), which carries no
   margin, and `margin-bottom:14px` occurs zero times in the Paver source. It was
   dead under Core's block-gap rule and had no source value to be raised to. */
.r-tracker-actor {
	display: flex;
	gap: 12px;
	justify-content: space-between;
}

.r-tracker-stage span {
	background: #fff;
	border: 2px solid #dcd8cc;
	border-radius: 50%;
	color: #6b6860;
	height: 24px;
	margin: 0 auto 8px;
	padding-top: 4px;
	width: 24px;
}

.r-tracker-stage.is-current span {
	background: #82b479;
	border-color: #82b479;
	color: #17160f;
}

.r-tracker-stage strong {
	color: #17160f;
	font: 600 11px/1.2 "Nunito Sans", sans-serif;
}

.r-tracker-update {
	background: #f6f4ee;
	display: grid;
	gap: 16px;
	grid-template-columns: 120px minmax(0, 1fr);
	padding: 14px;
}

.r-tracker-media-slot {
	align-items: center;
	background: #e9e6dd;
	display: flex;
	min-height: 92px;
	padding: 10px;
	text-align: center;
}

.r-tracker-media-slot span {
	color: #6b6860;
	font: 500 8px/1.35 "IBM Plex Mono", monospace;
	text-transform: uppercase;
}

.r-tracker-update-copy p {
	font-size: 12px;
	line-height: 1.4;
	margin: 6px 0 0;
}

.r-tracker-update-copy .r-tracker-update-time {
	color: #6b6860;
	font: 500 9px/1.35 "IBM Plex Mono", monospace;
	margin-top: 7px;
	text-transform: uppercase;
}

.r-tracker-media-slot {
	border: 0;
	position: relative;
}

.r-tracker-media-fallback {
	align-items: center;
	color: #6b6860;
	display: flex;
	font: 500 8px/1.35 "IBM Plex Mono", monospace;
	justify-content: center;
	text-align: center;
	text-transform: uppercase;
}

.r-tracker-media-fallback {
	background: #e9e6dd;
	min-height: 64px;
	padding: 10px;
}

.r-tracker-update-secondary {
	margin-top: 1px;
}

.r-tracker-records-heading {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin-top: 14px;
	padding: 11px 13px;
}

.r-tracker-records-heading p {
	color: #17160f;
	font: 600 13px/1.3 "Nunito Sans", sans-serif;
	margin: 0;
}

.r-tracker-records-heading span,
.r-tracker-record small {
	color: #6b6860;
	font: 500 8px/1.35 "IBM Plex Mono", monospace;
	text-transform: uppercase;
}

/* Same cascade as `.r-tracker-stage-rail` above, different symptom. The
   authored `gap: 1px` -- the hairline between records -- rendered at Core's
   24px, and `grid-template-columns: 1fr` was dead too. At 1440 that was
   invisible, because Core's auto-fill happens to fit exactly one track in this
   ~325px container and produces the same single column (a resolution hole,
   fidelity directive 5.3). It is NOT invisible once the parent collapses:
   measured as authored, three tracks at 860 laying the four records out [2,2],
   and two tracks at 520 laying them out [1,2,1]. Raised, and its clearfix roots
   added alongside the rail's. */
:is(.entry-content, .editor-styles-wrapper) .r-tracker-records {
	border-bottom: 1px solid #e6e2d6;
	border-left: 1px solid #e6e2d6;
	border-right: 1px solid #e6e2d6;
	gap: 1px;
	display: grid;
	grid-template-columns: 1fr;
}

.r-tracker-record {
	align-items: center;
	display: flex;
	gap: 8px;
	justify-content: space-between;
	padding: 13px;
}

.r-tracker-record + .r-tracker-record { border-top: 1px solid #e6e2d6; }
.r-tracker-record > span { color: #3f6d3f; font-size: 14px; }

.r-tracker-message {
	border: 1px solid #e6e2d6;
	gap: 10px;
	margin-top: 14px;
	padding: 13px;
}

.r-tracker-message-icon { color: #3f6d3f; }

/* Source: `Sequoia Paver Hub - Page.dc.html:391` --
   `border:1px solid #e3dfd3;padding:30px 36px 34px`. The border matched; the
   padding did not, and the box had no bottom padding at all. The label's
   `padding-top:26px` below was a partial stand-in for the missing 30px top and
   is removed with this change rather than left to double-count.
   `margin-top` was 32px, a value the source does not have anywhere in this
   band, and it was dead in any case (measured 24px -- Core's block gap). The
   source's authored gap here is the preceding header block's
   `margin-bottom:44px` at `:385`; the port has no wrapper node for that header,
   so the gap is carried on this box instead. Raised to (0,2,0) so both the
   padding and the margin actually apply. */
:is(.entry-content, .editor-styles-wrapper) .r-price-framework {
	border: 1px solid #e3dfd3;
	margin-top: 44px;
	padding: 30px 36px 34px;
}

/* content-policy-map.md `paver.pricing.bars-label`: the one label node
   immediately preceding the three `.r-pricebar` rows. Mirrors the source
   node's own type treatment. The source's first bar carries its top border;
   a prior `.r-pricebar:first-child` rule was dead because the label, not a
   bar, is the wrapper's first child, so it is intentionally absent. */
/* Source `:392` gives this label `margin-bottom:18px`. It was dead (measured
   `0px`), and raising it alone would still have been invisible: the 18px would
   have collapsed against the 24px Core injects on the following `.r-pricebar`,
   which the source's continuous, hairline-separated bar list does not have. The
   label raise and the `.r-pricebar` `margin-block: 0` below are one fix. */
:is(.entry-content, .editor-styles-wrapper) .r-price-framework-label {
	color: #17160f;
	font: 700 13px/1 "IBM Plex Mono", monospace;
	letter-spacing: 0.14em;
	margin: 0 0 18px;
	text-transform: uppercase;
}

:is(.entry-content, .editor-styles-wrapper) .r-pricebar {
	align-items: center;
	border-top: 1px solid #e6e2d6;
	display: grid;
	gap: 24px;
	grid-template-columns: 230px minmax(0, 1fr);
	/* Source `:393`-`:395` declare no margin on any bar: the three rows are a
	   continuous list separated only by the 1px `#e6e2d6` rule. Core's block gap
	   was injecting 24px between them. Declared here because the rule is already
	   at (0,2,0); `margin-block` and not `margin` so the constrained-layout
	   centring on any ancestor path is untouched. */
	margin-block: 0;
	padding: 18px 0;
}

.r-pricebar-label strong,
.r-pricebar-label small { display: block; }
.r-pricebar-label strong { color: #17160f; font: 600 16px/1.2 "Nunito Sans", sans-serif; }
.r-pricebar-label small { color: #6b6860; font: 500 10px/1.3 "IBM Plex Mono", monospace; margin-top: 4px; }
.r-pricebar-track { background: #efece3; height: 40px; }
.r-pricebar-fill { align-items: center; background: #82b479; color: #17160f; display: flex; font: 700 12px/1 "Montserrat", sans-serif; height: 100%; justify-content: center; width: 58%; }
/* Source `:395`, the axis row, in full:
   `display:grid;grid-template-columns:230px 1fr;gap:24px;margin-top:10px`.
   It is NOT the same node as the two labelled bars at `:393`/`:394`: it is the
   one bar that carries a margin, and the only one with neither `padding:18px 0`
   nor `border-top`. The port applied the shared `.r-pricebar` rule to all three,
   so the axis row was drawing a hairline the source does not have and padding
   18px above and below its labels. Raised to (0,2,0) so it survives Core AND
   outranks the `margin-block: 0` above, which it must follow in source order. */
:is(.entry-content, .editor-styles-wrapper) .r-pricebar-axis {
	border-top: 0;
	margin-top: 10px;
	padding: 0;
}
.r-pricebar-axis-labels { color: #6b6860; display: flex; font: 500 10px/1 "IBM Plex Mono", monospace; justify-content: space-between; }

.r-pricing-callout,
.r-value-callout {
	border: 1px solid #e3dfd3;
	margin-top: 28px;
	padding: 20px 24px;
}

.r-pricing-callout h3,
.r-value-callout h3,
.r-scope-section h3,
.r-value-chart h3 {
	color: #17160f;
	font: 700 18px/1.25 "Montserrat", sans-serif;
	margin: 0 0 8px;
}

.r-pricing-callout p,
.r-value-callout p,
.r-scope-section > p {
	font-size: 14px;
	line-height: 1.55;
	margin: 0;
}

.r-scope-section { margin-top: 34px; }
.r-scope-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.r-scope-chip { background: #eef3ec; color: #3f3d34; display: inline-block; font: 500 11px/1.3 "IBM Plex Mono", monospace; padding: 8px 10px; }
/* Re-anchored to the inner wrapper, which is now the parent these paragraphs
   actually have. `:last-child` is POSITIONAL, so this is not a rename: the
   node it selects had to be re-established, not assumed. Verified against the
   rendered tree -- `.r-pricing-inner`'s last element child is the same closing
   paragraph that was `.r-pricing`'s last element child before the wrapper. */
.r-pricing-inner > p:last-child { margin-top: 28px; }
.r-pricing a { color: #3f6d3f; }

:is(.entry-content, .editor-styles-wrapper) .r-value-layout {
	gap: 32px;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr);
	margin-top: 34px;
}

.r-value-chart {
	border: 1px solid #e3dfd3;
	padding: 24px;
}

.r-value-chart > p { font-size: 14px; line-height: 1.5; margin: 0 0 18px; }
:is(.entry-content, .editor-styles-wrapper) .r-value-row { align-items: center; border-top: 1px solid #e6e2d6; display: grid; gap: 18px; grid-template-columns: minmax(0, 210px) 1fr; padding: 13px 0; }
.r-value-row span { color: #3f3d34; font-size: 13px; }
.r-value-row strong { color: #3f6d3f; font: 500 10px/1.3 "IBM Plex Mono", monospace; text-transform: uppercase; }
.r-value-stats { display: grid; gap: 12px; }
.r-value-stat { border: 1px solid #e3dfd3; padding: 20px; }
.r-value-stat h4 { color: #17160f; font: 700 16px/1.25 "Montserrat", sans-serif; margin: 0 0 8px; }
.r-value-stat p { font-size: 14px; line-height: 1.5; margin: 0; }
.r-value-source-note { color: #6b6860; font-size: 12px; line-height: 1.5; margin-top: 16px; }

/* Source: `Sequoia Paver Hub - Page.dc.html:519` --
   `<div data-reveal style="max-width:780px;margin-bottom:44px">`. The port had
   `32px / 760px`, neither of which is the source value, and both were dead:
   `margin-bottom` lost to Core's block-gap rule and `max-width` lost to Core's
   constrained-layout content-size rule (measured `0px` and `750px`). Raised to
   (0,2,0) and corrected to the source values. */
:is(.entry-content, .editor-styles-wrapper) .r-diligence-intro { margin-bottom: 44px; max-width: 780px; }
.r-tablewrap { border: 1px solid #e3dfd3; overflow-x: visible; }
.r-diligence-table { min-width: 0; }
:is(.entry-content, .editor-styles-wrapper) .r-diligence-row { display: grid; grid-template-columns: 1.15fr 1.5fr .95fr .85fr; min-width: 0; }
.r-diligence-row > * { border-left: 1px solid #e6e2d6; margin: 0; padding: 14px 16px; }
.r-diligence-row > :first-child { border-left: 0; }
.r-diligence-header { background: #17160f; color: #fff; }
.r-diligence-header > * { border-color: #3f3d34; font: 600 11px/1.3 "Montserrat", sans-serif; }
.r-diligence-row:not(.r-diligence-header) { border-top: 1px solid #e6e2d6; }
.r-diligence-row:not(.r-diligence-header) > * { font-size: 13px; line-height: 1.4; }
.r-diligence-marker { color: #3f6d3f; font-style: normal; margin-right: 5px; }
:is(.entry-content, .editor-styles-wrapper) .r-diligence-lower { gap: 24px; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); margin-top: 28px; }
.r-diligence-card { border: 1px solid #e3dfd3; padding: 24px; }
.r-diligence-card h3 { color: #17160f; font: 700 18px/1.25 "Montserrat", sans-serif; margin: 0 0 10px; }
.r-diligence-card p { font-size: 14px; line-height: 1.5; margin: 0; }
.r-diligence-card-action { margin-top: 18px !important; }
.r-diligence-card a { color: #3f6d3f; font-weight: 700; }

/* The gallery variants keep 900: `component-map.md:69` gives TPL-CASE-STUDY
   "stack/two columns <=900px". Only the Paver roots moved out of this query --
   see the 860 block below. */
@media (max-width: 900px) {
	.cs-gal,
	.ci-grid,
	.hi-grid {
		padding-left: 22px;
		padding-right: 22px;
	}

	.cs-gal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
	/* The Paver bands' gutter collapses at 860, not 900. The source's own
	   override is `@media (max-width:860px){section{padding-left:22px
	   !important;padding-right:22px !important}}` at `paver-flagship.html:69-70`,
	   and `gutenberg-mapping.md:88` records the Paver source breakpoints as
	   "exactly 860/520". At 900 the collapse fired 40px of viewport early, over
	   which the band rendered WIDER as the viewport narrowed: content measure
	   went 805 -> 856 across 901 -> 900. Only paver-flagship carries this
	   override -- it is absent from the other 63 reference pages -- so it must
	   not be applied to the `.cs-gal`/`.ci-grid`/`.hi-grid` variants above. */
	.r-surface-band,
	.r-cutaway,
	.r-tracker,
	.r-pricing,
	.r-value-context,
	.r-diligence,
	.r-paver-inspiration {
		padding-left: 22px;
		padding-right: 22px;
	}

	:is(.entry-content, .editor-styles-wrapper) .r-services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	:is(.entry-content, .editor-styles-wrapper) .r-work { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	:is(.entry-content, .editor-styles-wrapper) .r-cutaway-layout,
	:is(.entry-content, .editor-styles-wrapper) .r-tracker-layout,
	:is(.entry-content, .editor-styles-wrapper) .r-value-layout,
	:is(.entry-content, .editor-styles-wrapper) .r-diligence-lower { grid-template-columns: 1fr; }
	:is(.entry-content, .editor-styles-wrapper) .r-cutaway-cards { grid-template-columns: 1fr; }
	:is(.entry-content, .editor-styles-wrapper) .r-pricebar { gap: 8px; grid-template-columns: 1fr; }
	.r-tablewrap { overflow-x: auto; }
	.r-diligence-table { min-width: 660px; }
	/* Bare-span diligence cells (hub.pavers) hit their min-width:auto floor
	   above the fr tracks at narrow widths and pushed the last column past
	   the viewport. Let cells shrink and wrap instead of overflowing. */
	.r-diligence-row > * { min-width: 0; overflow-wrap: break-word; }
}

@media (max-width: 560px) {
	.cs-gal-grid { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
	:is(.entry-content, .editor-styles-wrapper) .r-services { grid-template-columns: 1fr; }
	:is(.entry-content, .editor-styles-wrapper) .r-work { grid-template-columns: 1fr; }
	.r-cutaway-layer-trigger { grid-template-columns: 1fr; }
	.r-cutaway-layer-label { padding-left: 12px; }
	.r-cutaway-detail { border-left: 0; border-top: 1px solid #e6e2d6; margin-top: 24px; padding-left: 0; padding-top: 24px; }
	.r-tracker-visual { padding: 16px; }
	.r-tracker-update { grid-template-columns: 1fr; }
	/* The `<=520` two-column state for `.r-tracker-stage-rail` was deleted, not
	   raised. The source has no responsive rule for the stage strip at all --
	   `Sequoia Paver Hub - Page.dc.html:334` is `repeat(4,1fr)` unconditionally,
	   and the `<=860`/`<=520` blocks at `:48`-`:63` do not name it -- so the
	   two-column state was a port invention. It was also newly dead: raising the
	   base rule to (0,2,0) left this one bare at (0,1,0), where it beats neither
	   the base rule nor Core. Measured by deleting it from the CSSOM at 520 on
	   the rendered document: 4 tracks and row-gap 0px both before and after, so
	   removal is a no-op and the rail keeps the source's four-column state. */
	.r-tracker-stage::before { display: none; }
	.r-pricebar-axis-labels { flex-wrap: wrap; gap: 8px 16px; }
	.r-value-chart { padding: 16px; }
}