/* Debt Digest: the revamp display layer (T-1460).
   Lifted verbatim out of the inline <style> in landing/index.html, where 182
   .revamp-* rules were unreachable by every other page. That is why the revamp
   stopped after one page.

   Scope contract, and the reason this file is safe to load site-wide: every
   selector below is either the :root alias layer (custom properties, inert
   until a .revamp-* class consumes them) or is .revamp-* prefixed. It paints
   nothing on a page that carries no .revamp-* markup.

   The un-namespaced globals that shared this block (*, html, body, a, button)
   deliberately did NOT move. They would have restyled all 35 other pages:
   overflow-x, line-height and font-variant-numeric all leak.

   Depends only on /assets/css/dd-design-system.css for tokens. Load AFTER
   system.css: that reproduces the cascade position the inline block held. */

        /* T-1272: combined public front door. Layout uses the existing Debt
   Digest token system; the page-local layer only composes the new
   role, record, lifecycle, and trust surfaces. */
:root {
    --revamp-paper: var(--cream);
    --revamp-paper-deep: var(--cream-tint);
    --revamp-line: var(--border-cool);
    --revamp-ink: var(--navy);
    --revamp-muted: var(--ink-muted);
    /* T-10176/T-10401: one on-dark secondary-text color instead of the same
       rgba(255,255,255,.78) hand-typed at every dark section. */
    --revamp-on-dark-label: rgba(255,255,255,.78);
    --revamp-on-dark-border: rgba(255,255,255,.22);
    /* Flat editorial ramp. The design system's --fs-* ramp is DENSE (11/12/13/14/15px)
     and correct for labels, captions and UI. Above it there was nothing, so this
     file had grown seven ad-hoc sizes between 15.7px and 34px. These four are flat
     on purpose: --fs-body and --fs-lead are FLUID clamps that grow to 18px+ at
     wide viewports, so reusing them here would silently rescale the page. */
  --revamp-fs-prose: 1rem;         /* 16px: section and lifecycle body copy      */
  --revamp-fs-lead: 1.0625rem;     /* 17px: hero lead, role-card titles          */
  --revamp-fs-sub: 1.375rem;       /* 22px: section sub-headings                 */
  --revamp-fs-figure: 2.125rem;    /* 34px: the price figure                     */
  --revamp-shadow: 0 24px 60px rgba(11,42,31,0.12), 0 2px 5px rgba(11,42,31,0.08);
}
.revamp-container { width: min(1380px, calc(100% - 48px)); margin: 0 auto; }
.revamp-hero { padding: clamp(2rem, 4.1vw, 4.4rem) 0 2.4rem; }
.revamp-hero + .revamp-section { padding-top: clamp(3rem, 4.6vw, 4.6rem); }
.revamp-hero-grid { display: grid; grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr); gap: clamp(1.8rem, 3.6vw, 4.25rem); align-items: center; }
/* ACCENT MEANS ACTION (T-10168 trial, rolled out site-wide by the founder).
   Green marks what a visitor can do: buttons, text links, the eyebrow dot,
   headline accent words. Labels, chips, informational icons and step counters
   take ink or muted ink on light surfaces and soft white on dark ones. */
/* A label inherits its surface's text colour: ink on paper, white where a
   page-local dark block sets white on its container. The fixed ink value that
   preceded this went invisible on nine dark blocks that are not page heroes
   (measured 1.01 to 1.18:1 on demo, for-banks, for-creditors, for-firms and
   how-it-works). */
.revamp-eyebrow, .revamp-pricing-kicker { display: inline-flex; align-items: center; gap: .6rem; color: inherit; font-size: var(--fs-2xs); font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.revamp-eyebrow::before, .revamp-pricing-kicker::before { content: ""; width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px var(--green-glow); }
.revamp-hero h1, .revamp-section-title, .revamp-cta h2 { margin: 0; font-family: var(--font-display); font-weight: 700; letter-spacing: -.032em; line-height: 1.04; }
.revamp-section-title, .revamp-cta h2 { font-size: clamp(1.9rem, 3.1vw, 2.9rem); }
.revamp-hero h1 { max-width: 620px; margin-top: .95rem; font-size: clamp(2.5rem, 4.1vw, 4rem); }
/* Balanced heading lines and no single stranded word at the end of a paragraph.
   Both properties are ignored by browsers without them and never add a line. */
.revamp-hero h1, .revamp-section-title, .revamp-pricing h2, .revamp-cta h2, .revamp-role-card h3, .revamp-timeline-title { text-wrap: balance; }
.revamp-lead, .revamp-section-copy, .revamp-role-card p, .revamp-principle p, .revamp-timeline-body, .revamp-cta p, .revamp-proof-item span { text-wrap: pretty; }
/* The one Instrument Serif italic pivot line the ratified brief allows per page. */
.revamp-hero h1 em { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -.012em; }
.revamp-lead { max-width: 550px; margin: 1.25rem 0 0; color: var(--revamp-muted); font-size: var(--revamp-fs-lead); line-height: 1.72; }
.revamp-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.55rem; }
.revamp-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; padding: .82rem 1.25rem; border-radius: 999px; font-size: var(--fs-base); font-weight: 800; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease; }
.revamp-btn svg { width: 16px; height: 16px; }
.revamp-btn--primary { color: var(--white); background: var(--green); border: 1px solid var(--green-dark); box-shadow: 0 8px 18px var(--green-glow); }
.revamp-btn--primary:hover { background: var(--green-dark); transform: translateY(-1px); }
.revamp-btn--secondary { color: var(--revamp-ink); background: transparent; border: 1px solid var(--revamp-line); }
.revamp-btn--secondary:hover { background: var(--white); transform: translateY(-1px); }
.revamp-btn:focus-visible, .revamp-footer a:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
/* 1.25rem below is a GLYPH dimension, not prose type: it sizes an arrow
   character, so it belongs to no text ramp. Left raw deliberately. */
.revamp-trust-note { display: flex; align-items: center; gap: .5rem; max-width: 560px; margin-top: .65rem; color: var(--revamp-ink); font-size: var(--fs-xs); font-weight: 700; }
.revamp-trust-note svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--revamp-ink); }
/* The hero uses the existing product screenshot asset so the front
   door shows the real visual language of the signed-in workspace. */
.revamp-workspace-wrap { min-width: 0; }
.revamp-workspace { overflow: hidden; border: 1px solid rgba(11,42,31,.12); border-radius: 18px; background: var(--white); box-shadow: var(--revamp-shadow), 0 0 0 7px rgba(255,255,255,.42); }
.revamp-workspace img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; }
.revamp-illustrative { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem .85rem .8rem; color: var(--revamp-muted); background: var(--white); font-size: var(--fs-2xs); font-weight: 700; }
.revamp-illustrative span:last-child { color: var(--revamp-muted); font-size: var(--fs-2xs); letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }
.revamp-section { padding: clamp(3.9rem, 6.5vw, 6.4rem) 0; }
.revamp-section--paper { background: var(--revamp-paper); }
.revamp-section--deep { background: var(--navy); color: var(--white); }
/* Was style="padding-top:0" inline on index.html, the page's only inline
   style, patching the gap left by two adjacent trust surfaces. */
.revamp-section--tight { padding-top: 0; }
.revamp-section-intro { max-width: 720px; margin-bottom: 2.2rem; }
.revamp-section-intro > .revamp-eyebrow { width: 100%; }
.revamp-section-intro > .revamp-eyebrow::after, .revamp-pricing-kicker::after { content: ""; flex: 0 0 clamp(28px, 5vw, 64px); height: 1px; background: var(--revamp-line); }
/* Display size lives in the shared ramp near .revamp-hero h1: the three
   section headings previously carried three near-identical 5vw ramps that
   rendered LARGER than the h1. */
.revamp-section-intro .revamp-section-title { margin-top: .8rem; }
.revamp-section-copy { max-width: 620px; margin: 1rem 0 0; color: var(--revamp-muted); font-size: var(--revamp-fs-prose); line-height: 1.7; }
.revamp-role-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .85rem; }
.revamp-role-card { display: flex; flex-direction: column; min-height: 245px; padding: 1.35rem; border: 1px solid var(--revamp-line); border-radius: 15px; background: rgba(255,255,255,.58); text-decoration: none; transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease, border-color .18s ease; }
.revamp-role-card:hover { background: var(--white); border-color: rgba(30,132,73,.28); box-shadow: var(--revamp-shadow); transform: translateY(-3px); }

/* .revamp-role-card is used on a <div> AND on an <a> (the whole card is the
   link, on /trust and /security). It set text-decoration but never colour, so
   in the anchor form the card inherited the UA link colour and twelve card
   TITLES rendered in rgb(0,0,238) browser blue on the two pages a credit union
   diligence team reads. A contrast checker passes that at 8:1; a ratio cannot
   see "unstyled". Same shape as .revamp-faq-q on a <button>. */
a.revamp-role-card { color: var(--revamp-ink); }
/* Those cards title with <h4>; the rule below styled only h3, so the heading
   had no rule of its own to override the inherited colour. */
.revamp-role-card h4 { margin: .75rem 0 .5rem; font-family: var(--font-display); font-size: var(--revamp-fs-lead); font-weight: 700; letter-spacing: -.02em; color: var(--revamp-ink); }

/* Restores the jump-links row on /pricing. Its rule was scoped
   `.pricing-hero .hero-anchor-row` and was dropped when the migration replaced
   that wrapper, leaving five links with no layout (display:block, no gap) in
   default browser blue and underlined, inside the hero. Re-scoped to the class
   itself and retuned for the paper hero it now sits on. */
.hero-anchor-row { display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem 1.4rem; margin-top: 1.15rem; font-size: var(--fs-sm); }
.hero-anchor-row a { color: var(--green-deep); text-decoration: none; font-weight: 600; border-bottom: 1px dashed rgba(21,92,50,.45); padding-bottom: 1px; }
.hero-anchor-row a:hover { color: var(--revamp-ink); border-bottom-color: var(--revamp-ink); }
.revamp-role-card h3 { margin: .75rem 0 .5rem; font-family: var(--font-display); font-size: var(--revamp-fs-lead); letter-spacing: -.02em; }
.revamp-role-card p { margin: 0; max-width: 72ch; color: var(--revamp-muted); font-size: var(--fs-sm); line-height: 1.6; }
.revamp-card-link { display: flex; align-items: center; gap: .4rem; margin-top: auto; padding-top: 1.15rem; color: var(--green-deep); font-size: var(--fs-2xs); font-weight: 800; }
.revamp-card-link svg { width: 15px; transition: transform .18s ease; }
.revamp-role-card:hover .revamp-card-link svg { transform: translateX(4px); }
.revamp-principle { padding: 1.2rem 1.3rem; border: 1px solid var(--revamp-line); border-radius: 13px; background: rgba(255,255,255,.62); }
.revamp-principle strong { display: block; font-family: var(--font-display); font-size: var(--fs-base); }
.revamp-principle p { margin: .4rem 0 0; color: var(--revamp-muted); font-size: var(--fs-sm); line-height: 1.6; }
.revamp-proof { padding: 3.3rem 0; background: var(--revamp-paper-deep); border-top: 1px solid var(--revamp-line); border-bottom: 1px solid var(--revamp-line); }
.revamp-proof-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; }
/* /security, /trust and /status are among the strongest pages on the
   site, including an honest "no SOC 2 attestation yet". They were
   reachable only through a single nav item, so a diligence reader had
   to go looking. */
.revamp-proof-links { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem 1.1rem; margin-top: 1.6rem; padding-top: 1.3rem; border-top: 1px solid var(--revamp-line); font-size: var(--fs-sm); }
.revamp-proof-links span { color: var(--revamp-muted); font-weight: 700; }
.revamp-proof-links a { color: var(--revamp-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.revamp-proof-links a:hover { color: var(--green-deep); }
.revamp-proof-item { padding-right: 1.15rem; border-right: 1px solid var(--revamp-line); }
.revamp-proof-item:last-child { border-right: 0; }
.revamp-proof-item svg { width: 21px; height: 21px; color: var(--revamp-ink); }
.revamp-proof-item strong { display: block; margin-top: .8rem; font-family: var(--font-display); font-size: var(--fs-sm); }
.revamp-proof-item span { display: block; margin-top: .3rem; color: var(--revamp-muted); font-size: var(--fs-xs); line-height: 1.55; }
.revamp-pricing { padding: 3.1rem 0; background: var(--revamp-paper); border-top: 1px solid var(--revamp-line); border-bottom: 1px solid var(--revamp-line); }
.revamp-pricing-head { display: flex; align-items: end; justify-content: space-between; gap: 2rem; }
/* The pricing head is the one section head that skipped the eyebrow mark and
   the section-title weight; it read as a footnote to the page it closes. The
   kicker shares the eyebrow rules above (one mark, not three copies). The h2
   caps at 2rem, under the 2.125rem price figure, so the prices stay the
   loudest thing in the band at every width. */
.revamp-pricing h2 { max-width: 640px; margin: .7rem 0 0; font-family: var(--font-display); font-size: clamp(1.6rem, 2.4vw, 2rem); letter-spacing: -.028em; line-height: 1.1; }
/* The price used to be five separate facts in one 59-word run at 12.5px, the
   smallest body type on the page, while being the most commercially loaded
   content on it. Same numbered, labelled treatment the role cards and the
   lifecycle rail already use. Figures are CM #256; terms are CM #262. */
.revamp-price-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 1.9rem; background: var(--revamp-line); border: 1px solid var(--revamp-line); border-radius: 12px; overflow: hidden; }
.revamp-price { display: flex; flex-direction: column; padding: 1.15rem 1.25rem 1.3rem; background: var(--white); }
.revamp-price-idx { display: inline-flex; align-items: center; justify-content: center; width: 25px; height: 25px; margin-bottom: .55rem; border: 1px solid var(--revamp-line); border-radius: 50%; color: var(--revamp-ink); background: var(--white); font-size: var(--fs-2xs); font-weight: 800; }
.revamp-price-role { margin-top: .15rem; font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.revamp-price-figure { margin-top: .85rem; font-family: var(--font-display); font-size: var(--revamp-fs-figure); font-weight: 700; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums lining-nums; }
.revamp-price-unit { margin-top: .3rem; color: var(--revamp-muted); font-size: var(--fs-sm); line-height: 1.45; }
.revamp-price-floor { margin-top: .7rem; padding-top: .7rem; border-top: 1px solid var(--revamp-line); color: var(--revamp-ink); font-size: var(--fs-sm); font-weight: 700; }
.revamp-price-terms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; margin: 1.5rem 0 0; }
.revamp-price-terms dt { color: var(--revamp-ink); font-size: var(--fs-2xs); font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.revamp-price-terms dd { margin: .3rem 0 0; color: var(--revamp-muted); font-size: var(--fs-sm); line-height: 1.5; }
.revamp-cta { padding: clamp(4.25rem, 7vw, 6.4rem) 0; color: var(--white); background: var(--navy); border-top: 1px solid rgba(255,255,255,.1); }
.revamp-cta-inner { display: flex; align-items: end; justify-content: space-between; gap: 2.5rem; }
.revamp-cta h2 { max-width: 700px; }
.revamp-cta p { max-width: 570px; margin: 1rem 0 0; color: rgba(255,255,255,.66); font-size: var(--fs-md); line-height: 1.7; }
.revamp-cta-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: .7rem; }
/* T-10401: a dark container setting color: white on itself does NOT rescue
   .revamp-btn--secondary, because that class sets its OWN explicit
   color: var(--revamp-ink), and an element's own explicit rule always wins
   over an inherited one regardless of where it sits in the cascade. Every
   dark container needs this override named explicitly; a grep across
   landing/*.html for .revamp-btn--secondary sitting on a gradient found
   FOUR live instances (.revamp-cta already had one; .demo-hero,
   .demo-cta-band, .hiw-hero and .packet-head did not) before this pass.
   Any new dark section needs the same override added here AND to the
   print dark-surface list further down this file (search "known dark
   surfaces"). */
.revamp-cta .revamp-btn--secondary,
.demo-hero .revamp-btn--secondary,
.demo-cta-band .revamp-btn--secondary,
.hiw-hero .revamp-btn--secondary,
.packet-head .revamp-btn--secondary { color: var(--white); border-color: var(--revamp-on-dark-border); }
.revamp-cta .revamp-btn--secondary:hover,
.demo-hero .revamp-btn--secondary:hover,
.demo-cta-band .revamp-btn--secondary:hover,
.hiw-hero .revamp-btn--secondary:hover,
.packet-head .revamp-btn--secondary:hover { color: var(--revamp-ink); }
.revamp-footer { padding: 2.8rem 0 1.5rem; background: var(--revamp-paper); border-top: 1px solid var(--revamp-line); }
/* Brand + FOUR columns. Was repeat(3,...) from when the homepage footer had
   three; the generated footer has four, and the fifth child silently wrapped
   onto its own row. */
.revamp-footer-grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 2rem; }
.revamp-footer-brand { max-width: 320px; }
.revamp-footer-brand a { display: inline-flex; align-items: center; min-height: 44px; gap: .5rem; color: var(--revamp-ink); font-family: var(--font-display); font-size: var(--revamp-fs-prose); font-weight: 800; text-decoration: none; }
.revamp-footer-brand svg { width: 28px; height: 28px; }
.revamp-footer-brand p { margin: .9rem 0 0; color: var(--revamp-muted); font-size: var(--fs-2xs); line-height: 1.6; }
.revamp-footer-col-title { display: block; margin: 0 0 .65rem; color: var(--revamp-ink); font-family: var(--font-display); font-size: var(--fs-2xs); letter-spacing: .04em; text-transform: uppercase; }
.revamp-footer-col ul { display: grid; gap: .38rem; padding: 0; margin: 0; list-style: none; }
.revamp-footer-col a { color: var(--revamp-muted); font-size: var(--fs-2xs); text-decoration: none; }
.revamp-footer-col a:hover { color: var(--revamp-ink); }
.revamp-footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-top: 1.5rem; margin-top: 2.2rem; border-top: 1px solid var(--revamp-line); color: var(--revamp-muted); font-size: var(--fs-2xs); }
/* THE LEGAL DISCLAIMER WAS INVISIBLE. .footer-disclaimer is styled
   rgba(255,255,255,.6) for the legacy NAVY footer; on this paper footer it
   measured 1.07, i.e. white on cream, on 30 pages. Same defect class as the
   diligence links that opened this task: an element designed for a dark band,
   moved onto a light one. The class name is pinned by
   legal-page-mini-miranda.test.js, so it is recoloured rather than renamed. */
.revamp-footer .footer-disclaimer { color: var(--revamp-muted); }
/* The consumer legal line carries an inline link to the portal. It arrived with a
   hardcoded `color: var(--navy-light)` baked into the markup; on the paper footer
   that is the same invisible-text failure the disclaimer itself had, so the colour
   lives here and is checked. */
.revamp-footer .footer-disclaimer a { color: var(--revamp-ink); text-decoration: underline; }
.revamp-footer .footer-disclaimer a:hover { color: var(--green-deep); }
.revamp-footer-bottom .dd-employees-footer { color: var(--revamp-muted); white-space: nowrap; }
.revamp-footer-bottom .dd-employees-footer:hover { color: var(--revamp-ink); }
/* The 901 to 1080 band (small laptops, iPad landscape): the hero copy column
   is .82fr here, narrow enough that "Past-due accounts," breaks after its
   first word and the italic line lands third; and two role-card kickers run
   to two lines so the four titles no longer share a top edge. #paths is home
   page only; .revamp-hero is now shared with for-creditors, whose headline
   carries an explicit <br> and so cannot rewrap under the smaller size. */
@media (max-width: 1080px) and (min-width: 901px) {
    /* Measured across 901 to 1080: this is the steepest curve that keeps the
       headline on two lines at every width in the band; the base rule's own
       slope wraps it to three from 1024 up. Step at the 1080 edge: 3.3px. */
    .revamp-hero h1 { font-size: clamp(2.25rem, 3.8vw, 2.7rem); }
}
@media (max-width: 1080px) {
    .revamp-container { width: min(100% - 36px, 920px); }
    .revamp-hero-grid { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 1.8rem; }
    .revamp-workspace { border-radius: 15px; }
}
@media (max-width: 900px) {
    .revamp-hero { padding-top: 3.1rem; }
    .revamp-hero-grid { grid-template-columns: 1fr; }
    .revamp-hero h1 { max-width: 700px; }
    .revamp-lead { max-width: 680px; }
    .revamp-role-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .revamp-cta-inner { display: block; }
    .revamp-cta-actions { margin-top: 1.5rem; }
}
@media (max-width: 640px) {
    .revamp-container { width: min(100% - 32px, 560px); }
    .revamp-hero { padding: 2.25rem 0 1.6rem; }
    .revamp-hero + .revamp-section { padding-top: 3.2rem; }
    .revamp-lead { font-size: var(--revamp-fs-prose); line-height: 1.65; }
    .revamp-role-grid, .revamp-proof-grid { grid-template-columns: 1fr; }
    .revamp-workspace { border-radius: 12px; }
    .revamp-illustrative { align-items: flex-start; flex-direction: column; gap: .2rem; padding: .65rem .7rem .7rem; font-size: var(--fs-2xs); }
    .revamp-illustrative span:last-child { font-size: var(--fs-2xs); }
    .revamp-proof-item { padding: 0 0 1.1rem; border-right: 0; border-bottom: 1px solid var(--revamp-line); }
    .revamp-proof-item:last-child { padding-bottom: 0; border-bottom: 0; }
    .revamp-pricing-head { display: block; }
    .revamp-pricing .revamp-btn { margin-top: 1.1rem; }
    .revamp-price-grid, .revamp-price-terms { grid-template-columns: 1fr; }
    .revamp-footer-grid { grid-template-columns: repeat(2, 1fr); gap: 1.7rem 1rem; }
    .revamp-footer-brand { grid-column: 1 / -1; max-width: none; }
    .revamp-footer-bottom { display: block; }
    .revamp-footer-bottom span + span { display: block; margin-top: .5rem; }
}

/* ═════════════════════════════════════════════════════════════════════════
   WAVE 0: the vocabulary the other 34 pages need.

   Everything above this line was extracted from index.html and serves the
   homepage. Nothing below it is used by any page yet: it exists so that
   migrating a page becomes a class swap instead of a rewrite, which is the
   whole reason the revamp stalled after one page.

   Derived from a six-surveyor map of all 34 remaining public pages. 28
   proposed components collapsed to 15 once synonyms were merged and false
   gaps deleted; the ranks built here are the ones that unlock the most pages
   per line of CSS. Ordering is deliberate: ranks 1 to 7 put every diligence
   page and every blog post within reach of a class swap.

   Rules these obey, from the ratified Website Redesign Brief v1.0:
     paper ground, hairline rules, no decorative shadow;
     Geist for display, Instrument Serif for ONE italic pivot line per page;
     every enumerable unit carries an explicit index;
     one idea per band, one dark band per page.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── 0. The ground ───────────────────────────────────────────────────────
   The design layer needs a page ground: warm paper, navy ink, tabular
   numerals. index.html carries this as a page-local body rule, and the
   extraction deliberately LEFT it there so shipping revamp.css could not
   restyle a page that had not opted in.

   That was right, and it is also why the first migrated page rendered with a
   transparent body and plain black text: the ground never travelled with the
   vocabulary. Note --bg is deliberately undefined in the shared sheets and
   each page has always declared its own, so there was nothing to inherit.

   An explicit opt-in CLASS rather than a bare body selector: a page that links
   revamp.css but has not been migrated yet keeps its own ground until someone
   puts this class on it, and adoption stays greppable. */
.revamp-page {
    margin: 0;
    background: var(--revamp-paper);
    color: var(--revamp-ink);
    font-family: var(--font);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    font-variant-numeric: tabular-nums;
    overflow-x: hidden;
}
/* NO blanket `a { color: inherit }` here, deliberately. index.html carries one
   page-locally and gets away with it because it uses the LIGHT nav variant. On
   a page with the default dark nav that rule loads after system.css at equal
   specificity, wins the cascade, and paints the nav links navy on a navy bar:
   measured at contrast 1.00 on the first migrated page. Components that want
   inheritance ask for it themselves. */
.revamp-page button { font: inherit; }
/* Shared components whose muted greys were tuned for the cooler #F6FAF6 ground
   sit a hair below AA on this warmer paper. Re-pointed at the design layer's own
   muted token, which is darker, so they clear 4.5 on the ground they now sit on.
   Scoped to .revamp-page so no page that has not adopted the layer is repainted. */
.revamp-page .dd-meta__label, .revamp-page .dd-reviewed { color: var(--revamp-muted); }
/* ...but NOT inside the dark hero. The rule above is the fix for the warmer
   paper ground; applied to a navy band it does the opposite, painting a muted
   INK grey on navy at 2.63. Found on /legal, whose meta block sits in the hero
   rather than in the body like /trust's does. A context-blind override is only
   half a fix. */
.revamp-page-hero:not(.revamp-page-hero--paper) .dd-meta__label { color: rgba(255,255,255,.72); }
.revamp-page-hero:not(.revamp-page-hero--paper) .dd-meta__value { color: var(--white); }
/* The legal table-of-contents clipped 12 of its own links at 390px, so a mobile
   reader could not reach half the document. PRE-EXISTING: the unmodified page
   clips the same 12. The links simply had nowhere to wrap. Scoped to the design
   layer so pages that have not adopted it are unaffected. */
.revamp-page .dd-toc a { white-space: normal; overflow-wrap: anywhere; }

/* ── 1. Page hero (14 to 17 pages) ────────────────────────────────────────
   Every non-homepage page opens with a header that had no home in the
   vocabulary. .revamp-hero cannot serve it: that is a fixed .84fr/1.16fr
   paper grid built around .revamp-workspace. This is single-column and
   works on the dark band or on paper. */
/* position + overflow are load-bearing, not decoration. The .hero this replaces
   carried both, and several audience pages host product mockups that bleed past
   the band ON PURPOSE. Without the clip, for-firms' phone mockup pushed the
   whole document sideways: the original does not overflow, the migration did,
   and this is the line that was missing. */
.revamp-page-hero { position: relative; overflow: hidden; padding: clamp(3.4rem, 6vw, 5.6rem) 0 clamp(2.8rem, 5vw, 4.4rem); background: var(--navy); color: var(--white); }
.revamp-page-hero--paper { color: var(--revamp-ink); background: var(--revamp-paper); border-bottom: 1px solid var(--revamp-line); }
.revamp-page-hero h1 { max-width: 18ch; margin: .9rem 0 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(2.1rem, 3.9vw, 3.4rem); letter-spacing: -.03em; line-height: 1.06; }
.revamp-page-hero:not(.revamp-page-hero--paper) .revamp-eyebrow { color: var(--revamp-on-dark-label); }
/* Deliberate headline line breaks. system.css scopes these to .hero, which the
   migration renames, so they are reproduced here WITHOUT the fade-up: the
   ratified brief bans decorative motion. Dropping it also removes a latent
   risk, because that rule pairs opacity:0 with an animation, so a headline
   that never animates never appears at all. */
.revamp-page-hero h1 .h1-line { display: block; }
.revamp-page-hero h1 .h1-line.accent { color: var(--green-300); }
.revamp-page-hero--paper h1 .h1-line.accent { color: var(--green-deep); }
.revamp-page-hero-lead { max-width: 62ch; margin: 1.05rem 0 0; color: var(--revamp-muted); font-size: var(--revamp-fs-lead); line-height: 1.65; }
/* Opt IN to the on-dark colour: a lead used outside a hero (as /sla and /404 do)
   must not inherit a colour that only works on the dark band. */
.revamp-page-hero:not(.revamp-page-hero--paper) .revamp-page-hero-lead { color: rgba(255,255,255,.72); }
/* Dense fact row: effective date, version, audience, read time. */
.revamp-page-hero-meta { display: flex; flex-wrap: wrap; gap: .5rem 2.1rem; margin-top: 1.75rem; padding-top: 1.15rem; border-top: 1px solid rgba(255,255,255,.16); }
.revamp-page-hero--paper .revamp-page-hero-meta { border-top-color: var(--revamp-line); }
.revamp-page-hero-meta > div { display: flex; flex-direction: column; gap: .2rem; }
.revamp-page-hero-meta dt, .revamp-page-hero-meta .revamp-meta-label { color: rgba(255,255,255,.58); font-size: var(--fs-2xs); font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.revamp-page-hero--paper .revamp-page-hero-meta dt, .revamp-page-hero--paper .revamp-page-hero-meta .revamp-meta-label { color: var(--revamp-muted); }
.revamp-page-hero-meta dd, .revamp-page-hero-meta .revamp-meta-value { margin: 0; font-size: var(--fs-sm); font-weight: 700; font-variant-numeric: tabular-nums lining-nums; }
.revamp-page-hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.6rem; }
/* Opt IN to the on-dark treatment: on a --paper hero this rendered a white
   button on cream. Same shape as the hero lead. */
.revamp-page-hero:not(.revamp-page-hero--paper) .revamp-btn--secondary { color: var(--white); border-color: var(--revamp-on-dark-border); }
.revamp-page-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .38fr); gap: clamp(1.6rem, 3vw, 3.4rem); align-items: start; }
.revamp-page-hero-aside { padding-left: 1.4rem; border-left: 1px solid rgba(255,255,255,.16); }
.revamp-page-hero--paper .revamp-page-hero-aside { border-left-color: var(--revamp-line); }

/* ── 2. Long-form prose (14 pages) ────────────────────────────────────────
   Paint, not layout. The existing legal-shell / toc grid stays; this only
   restyles what reads inside it. Measure is capped in ch so the column stays
   readable regardless of the container it lands in. */
.revamp-doc-prose { color: var(--revamp-ink); font-size: var(--revamp-fs-prose); line-height: 1.72; }
.revamp-doc-prose > * + * { margin-top: 1.05rem; }
.revamp-doc-prose h2 { margin: 2.6rem 0 0; font-family: var(--font-display); font-weight: 700; font-size: var(--revamp-fs-sub); letter-spacing: -.022em; line-height: 1.2; }
.revamp-doc-prose h3 { margin: 1.9rem 0 0; font-family: var(--font-display); font-weight: 700; font-size: var(--revamp-fs-lead); letter-spacing: -.015em; }
.revamp-doc-prose p, .revamp-doc-prose li { max-width: 70ch; color: var(--revamp-muted); }
.revamp-doc-prose strong { color: var(--revamp-ink); font-weight: 700; }
.revamp-doc-prose ul, .revamp-doc-prose ol { margin-left: 0; padding-left: 1.15rem; }
.revamp-doc-prose li + li { margin-top: .45rem; }
.revamp-doc-prose a { color: var(--green-deep); text-decoration: underline; text-underline-offset: 3px; }
.revamp-doc-prose a:hover { color: var(--revamp-ink); }
.revamp-doc-prose hr { height: 1px; margin: 2.4rem 0; border: 0; background: var(--revamp-line); }
.revamp-doc-prose dl { display: grid; grid-template-columns: minmax(0, .32fr) minmax(0, 1fr); gap: .55rem 1.4rem; }
.revamp-doc-prose dt { color: var(--revamp-ink); font-size: var(--fs-2xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.revamp-doc-prose dd { margin: 0; color: var(--revamp-muted); }

/* ── 3. Chip (13 pages) ───────────────────────────────────────────────────
   Statute and compliance markers. Smallest build in the set, widest reach.
   Replaces dd-statute-chip. */
/* NO white-space:nowrap on the chip. security.html carries statute chips whose
   text runs long, and nowrap made them 404px wide spans that pushed the page
   94px past the viewport. A chip that cannot wrap is a horizontal scrollbar
   waiting for a longer citation. */
.revamp-chip-row { display: flex; flex-wrap: wrap; gap: .45rem; }
.revamp-chip { display: inline-flex; align-items: center; gap: .38rem; padding: .3rem .6rem; color: var(--revamp-ink); font-size: var(--fs-2xs); font-weight: 700; line-height: 1.3; letter-spacing: .01em; max-width: 100%; background: var(--white); border: 1px solid var(--revamp-line); border-radius: 999px; }
.revamp-chip--quiet { color: var(--revamp-muted); background: transparent; }
/* Chips and eyebrows carry inline icons on the audience pages. Without these
   the icon has no intrinsic size and paints full-screen; the QC gate catches
   it, which is how these were found. */
.revamp-chip svg { width: 12px; height: 12px; flex: 0 0 auto; }
.revamp-eyebrow svg { width: 14px; height: 14px; flex: 0 0 auto; }
.revamp-card-cite svg, .revamp-timeline-body svg { width: 13px; height: 13px; }
.revamp-section--deep .revamp-chip { color: var(--white); background: transparent; border-color: var(--revamp-on-dark-border); }

/* ── 4. Table (10 pages) ──────────────────────────────────────────────────
   Two pages independently hand-rolled the same visual shape. Hairline rules,
   small-caps head, no shadow. The scroll container is REQUIRED: a wide table
   must scroll inside itself rather than making the page scroll sideways. */
.revamp-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.revamp-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.revamp-table caption { margin-bottom: .7rem; color: var(--revamp-muted); font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .08em; text-align: left; text-transform: uppercase; }
.revamp-table th, .revamp-table td { padding: .72rem .9rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--revamp-line); }
.revamp-table thead th { color: var(--revamp-muted); font-size: var(--fs-2xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; border-bottom-color: var(--revamp-ink); }
.revamp-table tbody th { color: var(--revamp-ink); font-weight: 700; }
.revamp-table td { color: var(--revamp-muted); font-variant-numeric: tabular-nums lining-nums; }
.revamp-table tbody tr:last-child th, .revamp-table tbody tr:last-child td { border-bottom: 0; }
/* One highlighted column, for a comparison whose answer is the product. */
.revamp-table .revamp-table--win { color: var(--revamp-ink); font-weight: 700; background: var(--green-light); }

/* ── 5. FAQ (10 pages) ────────────────────────────────────────────────────
   Collapses dd-honesty-card and dd-card-list into one family. The accordion
   variant keeps whatever JS already drives it: only the paint is here. */
.revamp-faq { border-top: 1px solid var(--revamp-line); }
.revamp-faq-item { padding: 1.15rem 0; border-bottom: 1px solid var(--revamp-line); }
.revamp-faq-item > h3, .revamp-faq-q { margin: 0; color: var(--revamp-ink); font-family: var(--font-display); font-size: var(--revamp-fs-prose); font-weight: 700; letter-spacing: -.012em; }
.revamp-faq-a { max-width: 78ch; margin: .5rem 0 0; color: var(--revamp-muted); font-size: var(--fs-sm); line-height: 1.65; }
.revamp-faq--accordion summary { cursor: pointer; list-style: none; }
.revamp-faq--accordion summary::-webkit-details-marker { display: none; }
.revamp-faq--accordion summary::after { content: "+"; float: right; color: var(--green-deep); font-weight: 700; }
.revamp-faq--accordion details[open] summary::after { content: "\2013"; }

/* ── 6. Document index (8 pages) ──────────────────────────────────────────
   THE measured deficiency. The homepage carries 11 explicit indices; every
   audience and diligence page carries zero, and that is the thing that makes
   one readable and the other a wall. Every existing index class only works
   inside a bordered card or the dark rail, so ordered prose had no marker. */
.revamp-doc-index { display: inline-block; margin-right: .6rem; color: var(--revamp-muted); font-size: var(--fs-2xs); font-weight: 800; letter-spacing: .07em; font-variant-numeric: tabular-nums lining-nums; }
.revamp-doc-index--rule { color: var(--green-deep); }
.revamp-doc-heading { display: flex; align-items: baseline; gap: .1rem; }

/* ── 7. Callout (9 to 10 pages) ───────────────────────────────────────────
   An accent-bordered note inline in body copy. Two independent surveyors
   found the same gap. */
.revamp-callout { max-width: 78ch; padding: .95rem 1.1rem; color: var(--revamp-muted); font-size: var(--fs-sm); line-height: 1.65; background: var(--white); border: 1px solid var(--revamp-line); border-left: 3px solid var(--green-deep); border-radius: 0 8px 8px 0; }
.revamp-callout strong { color: var(--revamp-ink); }
.revamp-callout--warning { border-left-color: var(--amber); }

/* ── 9. Checklist (8 pages) ───────────────────────────────────────────────
   CSS-drawn marks, so no icon font and no inline svg per item. */
.revamp-checklist { margin: 0; padding: 0; list-style: none; }
.revamp-checklist li { position: relative; padding-left: 1.5rem; color: var(--revamp-muted); font-size: var(--fs-sm); line-height: 1.6; }
.revamp-checklist li + li { margin-top: .55rem; }
.revamp-checklist li::before { position: absolute; top: .48em; left: .12rem; width: .42rem; height: .74rem; border: solid var(--green-deep); border-width: 0 2px 2px 0; content: ""; transform: rotate(45deg); }
.revamp-checklist--muted li::before { border-color: var(--revamp-muted); }

/* ── 10. Stat band (7 pages) ──────────────────────────────────────────────
   Big numeral plus small-caps label. Distinct from .revamp-price, which
   carries role/unit/floor pricing chrome. Legible on paper and on --deep. */
.revamp-stat-band { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 1.4rem 2rem; }
.revamp-stat { display: flex; flex-direction: column; gap: .2rem; }
.revamp-stat-figure { font-family: var(--font-display); font-size: var(--revamp-fs-figure); font-weight: 700; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums lining-nums; }
.revamp-stat-label { color: var(--revamp-muted); font-size: var(--fs-2xs); font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.revamp-stat-note { color: var(--revamp-muted); font-size: var(--fs-2xs); line-height: 1.5; }
.revamp-section--deep .revamp-stat-label, .revamp-section--deep .revamp-stat-note, .revamp-page-hero .revamp-stat-label, .revamp-page-hero .revamp-stat-note { color: rgba(255,255,255,.62); }

/* ── Blocking extensions to existing components ───────────────────────────
   These are not new components, but a page cannot migrate without them. */

/* .revamp-footer-brand has NO social slot. Ten pages carry LinkedIn/X icons
   in their current footer, so migrating any of them before this existed
   would have silently DELETED those links. Build before the first swap. */
.revamp-footer-social { display: flex; gap: .6rem; margin-top: 1rem; }
.revamp-footer-social a { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 32px; height: 32px; color: var(--revamp-muted); border: 1px solid var(--revamp-line); border-radius: 999px; transition: color .18s ease, border-color .18s ease; }
.revamp-footer-social a:hover { color: var(--revamp-ink); border-color: var(--revamp-ink); }
.revamp-footer-social svg { width: 15px; height: 15px; }

/* .revamp-role-grid is hard-coded repeat(4,...). Nine surveyor proposals for
   "feature grid / bento / capability tiles / scenario cards / doc tiles"
   were all THIS component at a different column count. */
.revamp-role-grid--3up { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.revamp-role-grid--2up { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.revamp-role-grid--6up { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* The card title and body arrived as DIVs during the audience-page migration, so
   .revamp-role-card h3 and p never matched them and 88 elements across four pages
   rendered as plain 16px body text: a card title indistinguishable from its own
   body copy. These mirror the h3/p rules exactly rather than inventing values, and
   like them they inherit colour instead of pinning it, so a card in a dark section
   is not stranded on a light-only literal. */
.revamp-role-card-title { margin: .75rem 0 .5rem; font-family: var(--font-display); font-size: var(--revamp-fs-lead); font-weight: 700; letter-spacing: -.02em; }
.revamp-role-card-body { margin: 0; color: var(--revamp-muted); font-size: var(--fs-sm); line-height: 1.6; }
.revamp-section--deep .revamp-role-card-body { color: rgba(255,255,255,.72); }
/* Lost when .hero-copy was renamed; without it hero copy runs the full grid width. */
.revamp-hero-copy { max-width: 640px; }
.revamp-role-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-bottom: .15rem; color: var(--revamp-ink); background: var(--green-light); border-radius: 8px; }
.revamp-role-card-icon svg { width: 16px; height: 16px; }

/* State badge that drops into a role card. Deliberately NOT applied to
   security.html, whose pill totals are recounted by a test. */
.revamp-status-pill { display: inline-flex; align-items: center; gap: .35rem; padding: .22rem .5rem; font-size: var(--fs-2xs); font-weight: 800; letter-spacing: .05em; text-transform: uppercase; border-radius: 999px; }
.revamp-status-pill::before { width: 6px; height: 6px; border-radius: 50%; background: currentColor; content: ""; }
.revamp-status-pill--live { color: var(--green-deep); background: var(--green-light); }
.revamp-status-pill--planned { color: var(--revamp-muted); background: var(--off-white); }
.revamp-status-pill--gated { color: var(--amber); background: var(--white); border: 1px solid var(--revamp-line); }

/* Ratified rule 2 made auditable: ONE Instrument Serif italic pivot line per
   page. Four pages each hand-rolled a local .epigraph, and demo-borrowers
   inverts the rule entirely by setting its whole h1 in serif italic. */
.revamp-epigraph { max-width: 40ch; color: var(--revamp-ink); font-family: var(--font-serif); font-size: var(--revamp-fs-sub); font-style: italic; font-weight: 400; line-height: 1.35; letter-spacing: -.01em; }

/* ── 14. Pricing tiers ────────────────────────────────────────────────────
   .revamp-price-grid on the homepage is a FLAT role/figure/unit/floor fact
   grid: no checklist, no per-card CTA, no featured state. A tier card is a
   different shape and cannot be expressed by adding modifiers to it. Built
   here because pricing.html needs it and the creditor trio then inherits it. */
/* T-10401: 4 columns for the 3 paid tiers plus the consumer "always free"
   card; was 3 with no bottom margin, so the grid ran straight into the
   Managed Services callout below it with no visual gap. */
.revamp-tiers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: var(--sp-8); }
.revamp-tier { display: flex; flex-direction: column; padding: 1.5rem 1.4rem 1.6rem; background: var(--white); border: 1px solid var(--revamp-line); border-radius: 14px; }
.revamp-tier--featured { border-color: var(--green-deep); box-shadow: var(--revamp-shadow); }
/* T-10401: must come AFTER .revamp-tier (equal specificity, later wins) or
   its background/border-style are silently overridden by the base rule
   above and the "not a plan you buy" distinction disappears. */
.revamp-tier--consumer { background: var(--revamp-paper); border-style: dashed; }
/* T-10176: was var(--green-deep), the CTA-only accent color, on a label that
   is not an action. Realigned to the same --revamp-muted the sibling
   .revamp-card-kicker label already uses. */
.revamp-tier-who { color: var(--revamp-muted); font-size: var(--fs-2xs); font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.revamp-tier h3 { margin: .5rem 0 0; font-family: var(--font-display); font-size: var(--revamp-fs-lead); font-weight: 700; letter-spacing: -.015em; line-height: 1.25; }
.revamp-tier-value { margin: .55rem 0 0; color: var(--revamp-muted); font-size: var(--fs-sm); line-height: 1.6; }
.revamp-tier-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: .4rem; margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--revamp-line); }
.revamp-tier-amt { font-family: var(--font-display); font-size: var(--revamp-fs-figure); font-weight: 700; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums lining-nums; }
.revamp-tier-unit { color: var(--revamp-muted); font-size: var(--fs-sm); }
.revamp-tier-floor { margin-top: .55rem; color: var(--revamp-muted); font-size: var(--fs-2xs); line-height: 1.5; }
.revamp-tier .revamp-checklist { margin-top: 1.2rem; }
.revamp-tier-cta { margin-top: auto; padding-top: 1.4rem; }
/* A tier whose CTA is a direct child (no wrapper) still pins to the foot, so
   cards with different list lengths line their actions up. */
.revamp-tier > .revamp-btn { margin-top: auto; }
.revamp-tier-cta .revamp-btn { width: 100%; }
/* Invisible alignment spacer: keeps a tier whose row has no link the same
   height as its siblings. aria-hidden in the markup. */
.revamp-card-link--spacer { visibility: hidden; }
.revamp-accent { color: var(--green-deep); }
.revamp-section--deep .revamp-accent, .revamp-cta .revamp-accent, .revamp-page-hero:not(.revamp-page-hero--paper) .revamp-accent { color: var(--green-300); }
.revamp-inline-link { color: var(--green-deep); text-decoration: underline; text-underline-offset: 3px; }
.revamp-stack { display: grid; gap: 1rem; max-width: 760px; margin: 0 auto; }
.revamp-hero-actions--center { justify-content: center; }
/* The CTA band is navy, so its eyebrow needs the on-dark green like --deep. */
.revamp-cta .revamp-eyebrow, .product-showcase .revamp-eyebrow { color: var(--revamp-on-dark-label); }
/* T-10401: system.css:1994-1995 already covers this section's OLD class
   names (.section-title/.section-sub); the markup here uses the current
   .revamp-section-title/.revamp-section-copy names and that override was
   never updated to match, so the heading and body fell through to their
   light-mode ink color on this section's dark gradient and were unreadable.
   Colors match the values already used for the old class names. */
.product-showcase .revamp-section-title { color: var(--white); }
.product-showcase .revamp-section-copy { color: var(--revamp-on-dark-label); }
/* A bare link in the CTA band, with no .revamp-btn class, still carries an
   arrow icon. .cta-band a svg sized it before the rename; without this the
   icon has no intrinsic size and paints full-screen. Caught by the QC gate on
   four blog posts at once. */
.revamp-cta a:not(.revamp-btn) svg { width: 18px; height: 18px; }

/* In-article CTA card. NOT .revamp-cta: that is a full-bleed page band, and the
   blog template used its own .cta-band as a rounded navy CARD sitting inside the
   article body. Mapping one to the other changed the layout AND broke the text,
   because .revamp-doc-prose paints its paragraphs muted ink and this card is
   navy. Its own colours are declared here so prose rules cannot reach in. */
.revamp-cta-card { display: flex; flex-direction: column; gap: 1rem; margin: 3rem 0 0; padding: 2rem 1.75rem; color: var(--white); background: var(--navy); border-radius: 16px; }
.revamp-cta-card h3 { margin: 0; color: var(--white); font-family: var(--font-display); font-size: var(--revamp-fs-sub); font-weight: 700; letter-spacing: -.02em; }
.revamp-doc-prose .revamp-cta-card p { max-width: none; margin: 0; color: rgba(255,255,255,.72); font-size: var(--fs-sm); line-height: 1.65; }
.revamp-doc-prose .revamp-cta-card a { display: inline-flex; align-items: center; gap: .4rem; color: var(--green-300); font-weight: 700; }
.revamp-cta-card a svg { width: 18px; height: 18px; }

/* ── 7b. Timeline (9 pages) ───────────────────────────────────────────────
   The light-ground indexed process rail. .revamp-lifecycle-step cannot serve
   this: it is hard-coded for the dark band (white-alpha borders and text, and
   a dot drawn with a navy ring), so it disappears on paper. Vertical by
   default with an optional aside slot; the --rail modifier runs it across. */
.revamp-timeline { display: grid; gap: 0; }
.revamp-timeline-node { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: 0 1rem; padding-bottom: 1.6rem; }
.revamp-timeline-node:last-child { padding-bottom: 0; }
.revamp-timeline-marker { position: relative; display: flex; align-items: flex-start; justify-content: center; color: var(--revamp-muted); font-size: var(--fs-2xs); font-weight: 800; letter-spacing: .06em; font-variant-numeric: tabular-nums lining-nums; }
.revamp-timeline-marker::before { position: absolute; top: 1.55rem; bottom: -1.6rem; left: 50%; width: 1px; background: var(--revamp-line); content: ""; }
.revamp-timeline-node:last-child .revamp-timeline-marker::before { display: none; }
.revamp-timeline-title { margin: 0; font-family: var(--font-display); font-size: var(--revamp-fs-prose); font-weight: 700; letter-spacing: -.012em; }
.revamp-timeline-body { color: var(--revamp-muted); font-size: var(--fs-sm); line-height: 1.65;
    grid-column: 2;
}
.revamp-timeline-body > * + * { margin-top: .4rem; }
.revamp-timeline--rail { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 1.4rem; }
.revamp-timeline--rail .revamp-timeline-node { grid-template-columns: minmax(0, 1fr); padding: 1.1rem 0 0; border-top: 1px solid var(--revamp-line); }
.revamp-timeline--rail .revamp-timeline-marker { justify-content: flex-start; margin-bottom: .5rem; }
.revamp-timeline--rail .revamp-timeline-marker::before { display: none; }
.revamp-section--deep .revamp-timeline-marker { color: rgba(255,255,255,.72); }
.revamp-section--deep .revamp-timeline-marker::before, .revamp-section--deep .revamp-timeline--rail .revamp-timeline-node { border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.16); }
.revamp-section--deep .revamp-timeline-body { color: rgba(255,255,255,.66); }

/* ── 13. Compare (4 pages) ────────────────────────────────────────────────
   Two or three contrast CARDS sharing an axis, with an optional VS divider.
   This is the card form of the argument revamp-table makes tabularly: use the
   table when the reader is scanning rows, this when the reader is weighing
   two whole positions against each other. */
.revamp-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: stretch; }
.revamp-compare--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.revamp-compare-col { display: flex; flex-direction: column; padding: 1.35rem 1.4rem 1.5rem; background: var(--white); border: 1px solid var(--revamp-line); border-radius: 14px; }
.revamp-compare-col--win { border-color: var(--green-deep); background: var(--green-light); }
.revamp-compare-label { color: var(--revamp-muted); font-size: var(--fs-2xs); font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.revamp-compare-col--win .revamp-compare-label { color: var(--green-deep); }
.revamp-compare-col h3 { margin: .45rem 0 0; font-family: var(--font-display); font-size: var(--revamp-fs-lead); font-weight: 700; letter-spacing: -.015em; }
.revamp-compare-col p { margin: .55rem 0 0; color: var(--revamp-muted); font-size: var(--fs-sm); line-height: 1.6; }
.revamp-compare-vs { display: flex; align-items: center; justify-content: center; color: var(--revamp-muted); font-size: var(--fs-2xs); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }

/* ── 15. Quote (4 pages) ──────────────────────────────────────────────────
   Pull-quote with attribution and a REQUIRED illustrative-composite caption:
   the site carries no real testimonials and the caption is what keeps that
   honest, so it is part of the component rather than a per-page decision. */
.revamp-quote-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.revamp-quote { display: flex; flex-direction: column; padding: 1.4rem 1.5rem 1.5rem; background: var(--white); border: 1px solid var(--revamp-line); border-radius: 14px; }
.revamp-quote-mark { color: var(--green-deep); font-family: var(--font-serif); font-size: 2.2rem; line-height: 1; }
.revamp-quote-text { margin: .3rem 0 0; color: var(--revamp-ink); font-size: var(--revamp-fs-prose); line-height: 1.6; }
.revamp-quote-attr { margin: .9rem 0 0; color: var(--revamp-ink); font-size: var(--fs-sm); font-weight: 700; }
/* Card subtitle: the line under a card title, above its body. Several card
   families on the audience pages carry one and each had hand-rolled it. */
/* A quieter band than --paper: off-white between hairlines. Three sections on
   the audience pages hand-rolled this with an inline style attribute. */
.revamp-section--tint { background: var(--revamp-paper-deep); border-top: 1px solid var(--revamp-line); border-bottom: 1px solid var(--revamp-line); }
.revamp-container--narrow { width: min(760px, calc(100% - 48px)); }
.revamp-section-intro--flush { text-align: left; margin-bottom: 2rem; }
.revamp-section-intro--spaced { margin-top: 3.5rem; }
/* The inline link inverts on the dark band, where --green-deep is unreadable. */
.revamp-cta .revamp-inline-link, .revamp-section--deep .revamp-inline-link,
.revamp-page-hero:not(.revamp-page-hero--paper) .revamp-inline-link { color: var(--green-300); }
/* T-10176: same accent-misuse fix as .revamp-tier-who above. */
.revamp-card-sub { margin: .3rem 0 0; color: var(--revamp-muted); font-size: var(--fs-2xs); font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.revamp-card-cite { margin: .7rem 0 0; padding-top: .6rem; border-top: 1px solid var(--revamp-line); color: var(--revamp-muted); font-size: var(--fs-2xs); line-height: 1.5; }
.revamp-quote-disclaimer { margin: .45rem 0 0; padding-top: .45rem; border-top: 1px solid var(--revamp-line); color: var(--revamp-muted); font-size: var(--fs-2xs); line-height: 1.5; }

/* ── 12. Form panel (6 pages) ─────────────────────────────────────────────
   The vocabulary styled ZERO form controls. These must read on paper AND on
   the navy CTA band, because the pilot-request form lives on the dark band on
   three audience pages. Field IDS ARE JS CONTRACTS on those pages: this styles
   containers and controls only and renames nothing. */
.revamp-form { display: grid; gap: .8rem; }
.revamp-form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.revamp-form-field { display: flex; flex-direction: column; gap: .3rem; }
.revamp-form label { color: var(--revamp-ink); font-size: var(--fs-2xs); font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.revamp-form input, .revamp-form select, .revamp-form textarea { width: 100%; min-height: 44px; padding: .6rem .75rem; color: var(--revamp-ink); font: inherit; font-size: var(--fs-sm); background: var(--white); border: 1px solid var(--revamp-line); border-radius: 9px; }
.revamp-form input:focus-visible, .revamp-form select:focus-visible, .revamp-form textarea:focus-visible { outline: none; border-color: var(--green-deep); box-shadow: var(--focus-ring); }
.revamp-form-error { color: var(--danger); font-size: var(--fs-sm); }
.revamp-form-success { color: var(--green-deep); font-size: var(--fs-sm); font-weight: 700; }
/* The success and error panels start [hidden] and are revealed by script. The
   UA stylesheet already does this, so the explicit rule is DEFENCE: give either
   class a display value later and the UA rule loses, and the page starts
   claiming a request succeeded before anyone sent one. request-demo carried this
   rule for that reason and the migration must not drop it. */
.revamp-form-success[hidden], .revamp-form-error[hidden] { display: none; }
/* On the navy band: labels and helper text go light, controls stay legible. */
.revamp-cta .revamp-form label, .revamp-section--deep .revamp-form label { color: rgba(255,255,255,.72); }
.revamp-cta .revamp-form-success, .revamp-section--deep .revamp-form-success { color: var(--green-300); }
.revamp-cta .revamp-form-error, .revamp-section--deep .revamp-form-error { color: var(--amber-tint); }

/* T-10401: 4 cards at the full-width 1fr-each rule below ran 296px at 1440
   down to 204px at 901, no intermediate step; 2-up keeps each card wide
   enough for its checklist to stay readable through the laptop range. */
@media (max-width: 1180px) and (min-width: 901px) {
    .revamp-tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .revamp-page-hero-grid { grid-template-columns: 1fr; }
    .revamp-page-hero-aside { padding-left: 0; padding-top: 1.2rem; border-left: 0; border-top: 1px solid var(--revamp-line); }
    .revamp-role-grid--3up, .revamp-role-grid--6up { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .revamp-tiers { grid-template-columns: 1fr; }
    .revamp-footer-grid { grid-template-columns: repeat(2, 1fr); }
    .revamp-quote-grid { grid-template-columns: 1fr; }
    .revamp-compare, .revamp-compare--3 { grid-template-columns: 1fr; }
    .revamp-timeline--rail { grid-auto-flow: row; }
    .revamp-doc-prose dl { grid-template-columns: 1fr; gap: .2rem .0rem; }
    .revamp-doc-prose dd + dt { margin-top: .8rem; }
}
/* WCAG 2.5.8 target size. for-creditors.html had hand-rolled a 44px block that
   its two near-identical siblings lacked: it was the fork that drifted FORWARD,
   so this promotes that work rather than levelling it down. Its .dd-trust-pill
   rule went inert the moment the migration renamed that class to .revamp-chip,
   which is exactly the kind of silent loss a rename causes: 12 chip LINKS across
   the three creditor pages lost their touch target. Every INTERACTIVE revamp
   element now clears 44px on touch, on every page that adopts the layer. */
@media (max-width: 768px) {
    a.revamp-chip, .revamp-chip-row a { min-height: 44px; }
    a.revamp-card-link, .revamp-card-link[href] { min-height: 44px; }
    .revamp-footer-social a { width: 44px; height: 44px; }
    /* The 44px box IS the row: the old .38rem list gap on top of it ran the
       phone footer two screens deep. A negative margin would compress further
       but makes adjacent targets overlap (measured: a tap on the bottom sixth
       of one link opened the next), so the gap is the only thing removed. */
    .revamp-footer-col ul { gap: 0; }
    .revamp-footer-col a { display: inline-flex; align-items: center; min-height: 44px; }
    .revamp-faq--accordion summary { min-height: 44px; }
    /* Two more links the allowlist had missed (measured 20px tall at 390px). */
    a.revamp-consumer-link, .revamp-proof-links a { display: inline-flex; align-items: center; min-height: 44px; }
}

@media (max-width: 640px) {
    .revamp-role-grid--3up, .revamp-role-grid--2up, .revamp-role-grid--6up { grid-template-columns: 1fr; }
    .revamp-form-row { grid-template-columns: 1fr; }
    .revamp-tiers { grid-template-columns: 1fr; }
    .revamp-stat-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .revamp-page-hero-meta { gap: .8rem 1.4rem; }
}

/* ── MEASURE ──────────────────────────────────────────────────────────
   Long lines are the most recognisable mark of an unfinished layout, and this
   site had body copy running past 1,300px: 200+ characters on a line where 60
   to 75 is comfortable. The components that already got this right are the
   precedent, not an invention: .revamp-doc-prose p caps at 70ch and
   .revamp-faq-a at 78ch. These are simply the ones that were missed.

   Scoped so it cannot reach a centred band: .revamp-cta is not a
   .revamp-section, and grid/table children are unaffected because a max-width
   below their column width is a no-op. */
.revamp-timeline-body,
.firm-note,
.firm-econ-body,
.dd-card-list-body,
.illustrative-disclaimer,
.dd-honesty-card-a,
.revamp-role-card-body,
.dd-compliance-callout > p,
.dd-changelog-entry,
.lane-note,
:where(.revamp-section) > :where(.revamp-container) > p { max-width: 72ch; }

/* The measure caps above were verified against a HAND-TYPED route list which
   silently 404'd on five names and contained no blog article at all, so it
   reported 0 over-85ch while six articles served up to 159ch. Derived from the
   generator's own PAGES map, the real population is 35 reachable routes and 893
   text blocks. These are the containers that list missed. */
.legal-hero-sub,                       /* 118ch on /privacy /terms /dpa; /legal had a page-local cap and the other three did not */
.letter-example,                       /* 159ch, the widest block on the site */
.back-row,                             /* 97ch on /sign-in */
:where(article) > p,                   /* 145ch of blog body copy */
:where(article) > ul > li,
:where(article) > ol > li,
:where(article) > .warning { max-width: 72ch; }   /* 123ch callout beside 70ch prose */
.revamp-tier-floor { max-width: 72ch; }   /* 85ch of 11px fine print in a tier card at tablet width */
/* The footer legal line is the TSP posture statement, and on consumer pages the
   FDCPA 1692c(c) lift. It ran 128ch on six consumer routes and 85ch on 29 more:
   the most compliance-critical sentence on the site and the hardest to read. A
   measure sweep that queried only p/li/div/dd/td could not see it, because it is
   a <span> that the footer sets to display:block. */
.footer-disclaimer { max-width: 72ch; }
/* .revamp-illustrative is NOT capped in ch: a ch is the font's zero width, so
   the cap was 469px in the metric-matched fallback and 561px once Plus Jakarta
   Sans arrived, and the caption re-wrapped on the swap (0.039 CLS at 1440px).
   The figure now bounds it, which is wider than the cap was (768px against
   about 580px at 1440); the text measure is unchanged because the row is
   flex with space-between, so only the right-hand label moves to the edge. */
/* NOT capped here: .revamp-doc-prose .revamp-cta-card p carries an explicit
   `max-width: none` at (0,2,1). That is a deliberate opt-out by the component
   author and this layer defers to it, which is the whole point of :where(). */

/* A capped block that centres its OWN text must centre its BOX too, or the text
   centres inside a box still pinned to the left edge. Only these three cases are
   actually centred: everything else capped above is left-aligned prose, which
   margin-inline:auto would INDENT by half the leftover width. Verified by
   measuring computed text-align rather than by reading the markup: the earlier
   version of this guard targeted .revamp-section-intro--center and
   .revamp-section-intro[style*="center"], and both match zero elements. */
.illustrative-disclaimer,
.price-footnote,
.back-row,
:where(.revamp-section) > :where(.revamp-container) > p[style*="text-align:center"],
:where(.revamp-section) > :where(.revamp-container) > p[style*="text-align: center"] { margin-inline: auto; }

/* ── The closing lead-capture form ────────────────────────────────────
   .beta-form / .form-dark carried NO rules in any shared sheet: for-agencies
   defined them locally and for-firms, which uses the same two classes, styled
   its inputs with inline attributes instead. Shared, so both pages agree and
   neither has to carry a local copy. */
.beta-form { display: grid; gap: 0.75rem; max-width: 480px; margin-top: 1.75rem; }
.form-dark input {
    width: 100%;
    min-height: 44px;
    padding: 0.7rem 1rem;
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 8px;
    background: rgba(255,255,255,0.07);
    color: var(--white);
    font: inherit;
    font-size: var(--fs-sm);
}
.form-dark input::placeholder { color: rgba(255,255,255,0.55); }
.form-dark input:focus-visible { outline: 3px solid var(--green-on-dark); outline-offset: 2px; }
.beta-form button { min-height: 44px; justify-content: center; }

/* ── Small parts that were named in markup and defined nowhere ────────
   Each of these rendered as unstyled inherited text on a live page. */
.hero-stat-per { font-size: 0.55em; font-weight: 600; color: rgba(255,255,255,0.6); }
.revamp-page-hero--paper .hero-stat-per { color: var(--revamp-muted); }
.revamp-cta-note { margin-top: 1.5rem; color: rgba(255,255,255,0.66); font-size: var(--fs-sm); max-width: 72ch; }
.revamp-chip-dot { color: var(--revamp-muted); }
.revamp-trust-strip-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; }

/* ── Home page: the two-sided product stage and the consumer band (T-10146) ──
   The hero pairs the creditor workspace with the consumer portal on a phone:
   the brief's signature visual, both sides of one record. On narrow screens the
   copy column dissolves (display: contents) so the stage can sit between the
   CTAs and the segment chips, putting the product on the first screen. */
.revamp-hero-stage { position: relative; }
.revamp-hero-stage .revamp-workspace { margin: 0; }
.revamp-consumer-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(1.8rem, 4vw, 4rem); align-items: start; }
.revamp-consumer-shot { margin: .35rem 0 0; }
/* The consumer shot is a centred column on a wide page. A plain object-fit crop
   scales instead of clipping, so the demo tenant's banner rows stayed in frame.
   This zooms into the column and slides the top 24% out of the box. */
.revamp-consumer-crop { aspect-ratio: 1 / .69; overflow: hidden; background: var(--white); }
/* COUPLED to assets/img/product/consumer-portal-home.png: these offsets are tuned
   to that capture's pixel layout. A recapture that adds or removes rows above
   the offer column (2026-09-12: the in-product demo strip was stripped, moving
   everything up 114 px) shifts the frame; retune margin-top and eyeball it.
   Geometry: img is 150% wide at 16:10, so its height is 93.75% of the box width,
   and the box is 69% tall; margin-top -11% gives a window from 11.7% to 85.3% of
   the image, opening under the header and ending in the gap above the progress
   card rather than through its figures. */
.revamp-consumer-crop img { display: block; width: 150%; height: auto; margin: -11% 0 0 -25%; aspect-ratio: auto; object-fit: unset; }
.revamp-consumer-grid .revamp-section-intro { margin-bottom: 1.4rem; }
.revamp-consumer-link { display: inline-flex; align-items: center; gap: .4rem; margin-top: 1.2rem; color: var(--green-deep); font-size: var(--fs-sm); font-weight: 800; text-decoration: none; }
.revamp-consumer-link svg { width: 15px; height: 15px; transition: transform .18s ease; }
.revamp-consumer-link:hover svg { transform: translateX(4px); }
.revamp-consumer-link:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
/* The rail variant is single-column; the vertical body's grid-column: 2 would
   otherwise open an implicit second column and push the body off the node. */
.revamp-timeline--rail .revamp-timeline-body { grid-column: auto; }
.revamp-proof .revamp-section-intro { margin-bottom: 1.6rem; }
/* Scoped through .revamp-hero, which the home page and for-creditors carry: six audience
   pages share .revamp-hero-grid and must keep their one-column grid. align-items is reset because the grid's
   centre alignment becomes horizontal centring in a column flex box and would
   indent every child by a different amount. Visual order (image between the
   CTAs and the chips) deliberately differs from DOM order; the stage holds
   nothing focusable, so focus order is unaffected. */
@media (max-width: 900px) {
    .revamp-hero .revamp-hero-grid { display: flex; flex-direction: column; align-items: stretch; }
    .revamp-hero-copy-col { display: contents; }
    .revamp-hero-copy-col > * { order: 1; }
    .revamp-hero-stage { order: 2; margin: 1.7rem 0 2.6rem; }
    .revamp-consumer-grid { grid-template-columns: 1fr; }
    .revamp-consumer-shot { order: 2; }
}


/* Print (T-10185). The only print block before this one, in system.css, names
   the retired band classes, so on paper the revamp's dark bands came out as
   solid navy pages and the cards split across sheets. */
@media print {
    /* T-10401: this is the codebase's canonical "known dark surfaces" list.
       .demo-hero, .demo-cta-band, .hiw-hero and .packet-head were all
       missing from it (as they were missing from the on-dark
       .revamp-btn--secondary/.revamp-section-title/.revamp-section-copy
       overrides above), which is exactly how they shipped invisible text
       and invisible buttons. Add any new dark section HERE and to those
       on-dark overrides, not just one or the other. */
    .nav, .mobile-menu, .skip-link, .revamp-hero-actions, .revamp-cta, .revamp-footer-social,
    .revamp-consumer-link, .revamp-card-link, .dd-sticky-cta { display: none !important; }
    .revamp-section--deep, .revamp-page-hero, .revamp-cta-card, .product-showcase, .revamp-footer,
    .demo-hero, .demo-cta-band, .hiw-hero, .packet-head {
        background: var(--white) !important; color: var(--revamp-ink) !important;
    }
    .revamp-section--deep *, .revamp-page-hero *, .revamp-cta-card *, .product-showcase *, .revamp-footer *,
    .demo-hero *, .demo-cta-band *, .hiw-hero *, .packet-head * {
        color: var(--revamp-ink) !important;
    }
    .revamp-role-card, .revamp-price, .revamp-proof-item, .revamp-timeline-node,
    .revamp-workspace, .revamp-consumer-crop, .revamp-cta-card { break-inside: avoid; page-break-inside: avoid; }
    .revamp-section, .revamp-hero { padding: 1.2rem 0; }
    .revamp-workspace, .revamp-role-card, .revamp-price { box-shadow: none !important; }
    .revamp-footer-grid { display: none; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: var(--fs-xs); color: var(--revamp-muted); }
}

/* ── Home page revamp v2 (T-10400) ────────────────────────────────────────
   Founder-directed 2026-09-12. Four lenses drove this block: the page needed
   a tension before its promise (the compare band), evidence a reader can
   actually read (tiles cropped to one legible line each, never overlapping),
   a different form for each consecutive section, and the single dark band on
   the differentiator rather than on the closing ask. Everything reuses the
   vocabulary above; no new hex. */

/* Ecosystem stage: creditor anchor + consumer phone + agency + firm, tiled.
   Each tile is an aspect box that zooms into ONE readable region of a real
   capture with width and margin percentages (same technique as
   .revamp-consumer-crop), so no tile covers another. */
.revamp-stage .revamp-workspace { background: var(--revamp-paper-deep); }
.revamp-stage-grid { display: grid; grid-template-rows: auto auto; gap: 8px; padding: 8px; background: var(--revamp-paper-deep); }
.revamp-tile { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid rgba(27,42,74,.12); border-radius: 10px; background: var(--white); }
/* The label sits in its own row ABOVE the crop, never on it: a chip over the
   examiner strip covered the line the tile exists to show (diff review). */
.revamp-tile-crop { position: relative; flex: 0 0 auto; overflow: hidden; }
/* Only the phone tile fills its column; the three desktop-capture tiles keep
   their aspect boxes, so a taller grid row can never reveal more of the capture
   than the crop comment promises (the recovery-rate card sits just below). */
.revamp-tile--consumer { min-height: 0; }
.revamp-tile--consumer .revamp-tile-crop { flex: 1 1 0; min-height: 0; }
.revamp-tile-crop img { display: block; max-width: none; height: auto; aspect-ratio: auto; object-fit: unset; }
.revamp-tile-label { flex: 0 0 auto; padding: .3rem .6rem; color: var(--revamp-muted); font-size: var(--fs-2xs); font-weight: 800; letter-spacing: .07em; text-transform: uppercase; border-bottom: 1px solid var(--revamp-line); background: var(--white); }
.revamp-tile--creditor .revamp-tile-crop { aspect-ratio: 2.9 / 1; }
.revamp-tile--consumer { grid-column: 2; grid-row: 1 / span 2; }
.revamp-tile--agency, .revamp-tile--firm { grid-row: 2; }
.revamp-tile--agency .revamp-tile-crop, .revamp-tile--firm .revamp-tile-crop { aspect-ratio: 2.8 / 1; }
/* Two small tiles share row 2 under the anchor. */
.revamp-stage-grid { grid-template-columns: minmax(0, 1.075fr) minmax(0, 1.075fr) minmax(0, 1fr); }
.revamp-tile--creditor { grid-column: 1 / span 2; }
.revamp-tile--consumer { grid-column: 3; }
.revamp-tile--agency { grid-column: 1; }
.revamp-tile--firm { grid-column: 2; }
/* Crops. Fractions of the 2880x1800 (16:10) desktop captures and the 780x1688
   phone capture. width = 100 / crop-width; margins = crop offsets in % of the
   tile width (CSS percentage margins resolve against width). */
.revamp-tile--creditor .revamp-tile-crop img { width: 200%; margin: -33.5% 0 0 -37%; }      /* x .185 to .685, y .268 to .56: examiner strip and portfolio health. Stops ABOVE the cash and recovery-rate cards: the demo's recovery card carries a "vs. 10% industry baseline" line, which is a comparative performance claim, not sample data (compliance review, T-10400) */
.revamp-tile--consumer .revamp-tile-crop img { width: 100%; margin: -44.6% 0 0 0; }           /* y from .206: greeting, offers heading and both cards; at 1440 the bottom edge lands in the second card's bottom padding */
.revamp-tile--agency .revamp-tile-crop img { width: 305%; margin: -51.5% 0 0 -38.7%; }      /* x .127 to .455, y .27 to .457 of the banner-free recapture: examiner-ready and cease-comm cells and the assigned and contacted counts; ends before the queue card */
.revamp-stage .revamp-illustrative { justify-content: space-between; padding-right: .85rem; }

/* Compare band: a minus mark for the "usual" column so the two lists read as
   opposites at a glance, not as two lists of ticks. */
.revamp-handoff .revamp-section-intro { margin-bottom: 1.8rem; }
.revamp-handoff .revamp-section-title { max-width: 18ch; }
.revamp-checklist--minus li::before { top: .72em; left: 0; width: .55rem; height: 0; border-width: 0 0 2px 0; transform: none; }
.revamp-compare-col .revamp-checklist { margin-top: 1rem; }
.revamp-compare-col .revamp-checklist li { font-size: var(--fs-base); line-height: 1.55; }
.revamp-compare-col--win .revamp-checklist li { color: var(--revamp-ink); }

/* Workflow rail with one product crop per step. */
.revamp-timeline--shots .revamp-timeline-node { padding-top: 0; border-top: 0; }
.revamp-step-crop { position: relative; overflow: hidden; aspect-ratio: 2.9 / 1; margin-bottom: 1rem; border: 1px solid var(--revamp-line); border-radius: 10px; background: var(--white); }
.revamp-step-crop img { display: block; max-width: none; height: auto; }
.revamp-step-crop--placed img { width: 222%; margin: -22.2% 0 0 -41.1%; }   /* x .185 to .635, y .16 to .408: workspace title + examiner strip, ends above the health card's figures */
.revamp-step-crop--assigned img { width: 305%; margin: -51.5% 0 0 -38.7%; }  /* x .127 to .455, y .27 to .451 of the banner-free recapture: examiner-ready and cease-comm cells, the assigned and contacted counts */
.revamp-step-crop--worked img { width: 213%; margin: -33.5% 0 0 -56.4%; }    /* x .265 to .735, y .252 to .505 of the banner-free recapture: the first offer card, whole, ending at the second card's top edge */
.revamp-step-crop--resolved img { width: 200%; margin: -82.5% 0 0 -43%; }    /* x .215 to .715, y .66 to .936 of the banner-free recapture: table header and three whole rows, one marked settled */
.revamp-timeline--shots .revamp-timeline-marker { padding-top: .9rem; border-top: 1px solid var(--revamp-line); }
/* Visible sample-data disclosure for the four rail crops (alt text alone is not visible). */
.revamp-illustrative--rail { margin: 1.2rem 0 0; padding: .6rem 0 0; background: transparent; justify-content: flex-start; border-top: 1px solid var(--revamp-line); }

/* Role strip: the four-card grid demoted to one line under the workflow. The
   class name stays because a compliance test pins it and its mobile collapse. */
.revamp-role-grid[data-variant="strip"] { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-top: 2.4rem; padding-top: 1.2rem; border-top: 1px solid var(--revamp-line); }
.revamp-role-strip-label { color: var(--revamp-muted); font-size: var(--fs-sm); font-weight: 700; }
.revamp-role-link { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; padding: .35rem .9rem; color: var(--revamp-ink); font-size: var(--fs-sm); font-weight: 800; text-decoration: none; border: 1px solid var(--revamp-line); border-radius: 999px; background: rgba(255,255,255,.62); transition: border-color .18s ease, background-color .18s ease; }
.revamp-role-link svg { width: 14px; height: 14px; color: var(--green-deep); }
.revamp-role-link:hover { border-color: var(--green); background: var(--white); }
.revamp-role-link:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }

/* Consumer section: principles as a plain numbered list (the boxed cards were
   the fourth card grid in a row). Crop now shows the heading and BOTH full
   offer cards; the earlier crop sliced a dollar figure in half. */
.revamp-principle-list { display: grid; gap: 1.1rem; margin: 0; padding: 0; list-style: none; }
.revamp-principle-list li { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); gap: 0 .4rem; padding-top: 1rem; border-top: 1px solid var(--revamp-line); }
.revamp-principle-list strong { display: block; font-family: var(--font-display); font-size: var(--revamp-fs-lead); letter-spacing: -.015em; }
.revamp-principle-list p { margin: .35rem 0 0; max-width: 52ch; color: var(--revamp-muted); font-size: var(--fs-sm); line-height: 1.6; }
.revamp-consumer-grid { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); }
.revamp-consumer-crop { aspect-ratio: 1 / .78; }
.revamp-consumer-crop img { width: 200%; margin: -25% 0 0 -50%; }   /* x .25 to .75, y .20 to .824 of the banner-free recapture: heading, both full offer cards and the attention banner */

/* Reviewable by design: the page's ONE dark band. */
.revamp-proof.revamp-section--deep { padding: clamp(3.6rem, 6vw, 5.4rem) 0; color: var(--white); background: var(--navy); border-color: rgba(255,255,255,.12); }  /* .revamp-proof paints paper later in the cascade, so the band names its ground here */
.revamp-proof.revamp-section--deep .revamp-eyebrow { color: rgba(255,255,255,.78); }
.revamp-proof.revamp-section--deep .revamp-section-intro > .revamp-eyebrow::after { background: rgba(255,255,255,.18); }
.revamp-proof.revamp-section--deep .revamp-section-copy { color: rgba(255,255,255,.7); }
.revamp-proof.revamp-section--deep .revamp-proof-item { border-right-color: rgba(255,255,255,.14); }
.revamp-proof.revamp-section--deep .revamp-proof-item svg { color: var(--green-300); width: 24px; height: 24px; }
.revamp-proof.revamp-section--deep .revamp-proof-item strong { font-size: var(--revamp-fs-lead); }
.revamp-proof.revamp-section--deep .revamp-proof-item span { color: rgba(255,255,255,.7); font-size: var(--fs-sm); line-height: 1.6; }
.revamp-proof.revamp-section--deep .revamp-proof-links { margin-top: 2.2rem; padding-top: 1.6rem; border-top-color: rgba(255,255,255,.14); gap: .6rem .7rem; }
.revamp-proof.revamp-section--deep .revamp-proof-links span { flex-basis: 100%; color: rgba(255,255,255,.6); }
.revamp-proof.revamp-section--deep .revamp-proof-links a { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: .45rem 1rem; color: var(--white); text-decoration: none; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; }
.revamp-proof.revamp-section--deep .revamp-proof-links a svg { width: 14px; height: 14px; color: var(--green-300); }
.revamp-proof.revamp-section--deep .revamp-proof-links a:hover { color: var(--white); border-color: var(--green-300); }
.revamp-proof.revamp-section--deep .revamp-proof-links a:focus-visible { outline: 3px solid var(--green-300); outline-offset: 3px; }

/* Pricing sub-line under the head. */
.revamp-pricing-sub { max-width: 56ch; margin: .8rem 0 0; color: var(--revamp-muted); font-size: var(--revamp-fs-prose); line-height: 1.6; }

/* Closing ask on paper, as a bordered card, so the page carries one dark band. */
.revamp-cta--paper { color: var(--revamp-ink); background: var(--revamp-paper); border-top: 0; padding: clamp(3rem, 5vw, 4.6rem) 0 clamp(3.4rem, 6vw, 5.4rem); }
.revamp-cta-card-paper { padding: clamp(1.8rem, 3.5vw, 3rem); background: var(--white); border: 1px solid var(--revamp-line); border-radius: 18px; }
.revamp-cta--paper p { color: var(--revamp-muted); }
.revamp-cta--paper .revamp-btn--secondary { color: var(--revamp-ink); border-color: var(--revamp-line); }
.revamp-cta--paper .revamp-btn--secondary:hover { color: var(--revamp-ink); background: var(--revamp-paper); }

@media (max-width: 900px) {
    /* On a phone the stage is two stacked full-width tiles: a 200px column cannot
       show the examiner cell both whole and readable (measured 8px at 488% zoom,
       and 12px with the word "messaging" clipped at 640%). Full width fits the
       whole cell at about 15px. */
    .revamp-stage-grid { grid-template-columns: 1fr; }
    .revamp-tile--creditor { grid-column: 1; grid-row: 1; }
    .revamp-tile--creditor .revamp-tile-crop { aspect-ratio: 2.8 / 1; }
    .revamp-tile--consumer { grid-column: 1; grid-row: 2; }
    .revamp-tile--consumer .revamp-tile-crop { flex: 0 0 auto; aspect-ratio: 1.9 / 1; }
    .revamp-tile--agency, .revamp-tile--firm { display: none; }
    .revamp-tile--creditor .revamp-tile-crop img { width: 476%; margin: -84.8% 0 0 -88.1%; }   /* x .185 to .395, y .285 to .405: the examiner-ready cell, whole. Nothing below the strip is in frame */
    .revamp-tile--consumer .revamp-tile-crop img { margin-top: -76.8%; }                     /* y from .355: the first offer card, whole */
    .revamp-consumer-grid { grid-template-columns: 1fr; }   /* the two-column rule above outranks the older 900px collapse by source order */
    .revamp-consumer-shot { order: 2; }
    .revamp-timeline--shots .revamp-timeline-node { padding-bottom: 1.8rem; }
    .revamp-timeline--shots .revamp-step-crop { margin-bottom: .8rem; }
    .revamp-timeline--shots .revamp-timeline-marker { padding-top: 0; border-top: 0; }
    .revamp-proof.revamp-section--deep .revamp-proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem 1.2rem; }   /* scoped: the bare class also lays out /trust */
    .revamp-proof.revamp-section--deep .revamp-proof-item { padding-right: 0; border-right: 0; }
}
@media (max-width: 640px) {
    /* On a phone the rail keeps its four steps but drops the crops: the hero
       stage already showed the product on the first screen, and four more
       frames added roughly 900px before the consumer section. */
    .revamp-step-crop, .revamp-illustrative--rail { display: none; }   /* the disclosure goes with the crops it labels */
    .revamp-timeline--shots .revamp-timeline-node { padding-bottom: 1.2rem; }
    .revamp-compare-col { padding: 1.15rem 1.1rem 1.25rem; }
    .revamp-compare-col .revamp-checklist li { font-size: var(--fs-sm); }
    .revamp-principle-list { gap: .8rem; }
    .revamp-pricing { padding: 2.6rem 0; }
    .revamp-price { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0 .6rem; padding: .95rem 1.05rem; }
    .revamp-price-idx { display: none; }
    .revamp-price-role { flex-basis: 100%; margin: 0; }
    .revamp-price-figure { margin-top: .35rem; font-size: var(--revamp-fs-sub); }
    .revamp-price-unit { margin: 0; }
    .revamp-price-floor { flex-basis: 100%; margin-top: .5rem; padding-top: .5rem; }
    .revamp-price-terms { gap: .8rem; margin-top: 1.1rem; }
    .revamp-proof.revamp-section--deep { padding: 2.8rem 0; }
    .revamp-proof.revamp-section--deep .revamp-proof-links { margin-top: 1.4rem; padding-top: 1.2rem; }

    .revamp-role-grid[data-variant="strip"] { flex-direction: column; align-items: stretch; }
    .revamp-role-link { justify-content: space-between; min-height: 44px; }
    .revamp-compare-col--win { order: -1; }
    .revamp-proof.revamp-section--deep .revamp-proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .revamp-proof.revamp-section--deep .revamp-proof-item { padding: 0; border-bottom: 0; }
    .revamp-proof.revamp-section--deep .revamp-proof-links a { width: 100%; justify-content: space-between; }
    .revamp-cta-card-paper { padding: 1.5rem 1.2rem 1.7rem; }
}

/* ── Home page pass 3 (T-10408): visual weight, measure, a dominant hero ─────
   Everything here is scoped to body.revamp-home, which only index.html carries,
   so no other page changes. Three moves: a real middle tier in the type ramp
   (the page had a loud headline and a whisper for everything else), a narrower
   sheet so grids stop stretching small print across 1380px, and a hero stage
   that breaks out to the right edge over a soft green backdrop so the product
   has dominance and depth. Phone sizes are untouched: the pass is desktop-only
   from 901px up, so the 7,980px phone height does not grow. */
:root {
  --revamp-fs-lead-lg: 1.2rem;      /* 19px: hero lead, section copy on wide screens */
  --revamp-fs-copy-lg: 1.125rem;    /* 18px: section intro copy */
  --revamp-fs-title-lg: 1.5rem;     /* 24px: compare column titles */
  --revamp-fs-strong-lg: 1.1875rem; /* 19px: proof and principle titles */
  --revamp-fs-figure-lg: 2.75rem;   /* 44px: the price figure */
}
@media (min-width: 901px) {
  .revamp-home .revamp-container { width: min(1200px, calc(100% - 48px)); }
  /* Middle tier: ink, not muted, and one step larger. */
  .revamp-home .revamp-lead { max-width: 30ch; color: var(--ink-mid); font-size: var(--revamp-fs-lead-lg); line-height: 1.6; }
  .revamp-home .revamp-section-copy { max-width: 56ch; color: var(--ink-mid); font-size: var(--revamp-fs-copy-lg); line-height: 1.6; }
  .revamp-home .revamp-section-intro { max-width: 760px; margin-bottom: 2.8rem; }
  .revamp-home .revamp-section { padding: clamp(4.5rem, 7vw, 7rem) 0; }
  /* Hero: copy column a touch narrower, stage breaks out to the viewport edge. */
  .revamp-home .revamp-hero { padding-top: clamp(2.5rem, 5vw, 5rem); padding-bottom: 3.5rem; overflow: visible; }
  .revamp-home .revamp-hero-grid { grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); gap: clamp(2rem, 4vw, 4.5rem); }
  /* The headline keeps its two deliberate lines in the narrower column. */
  .revamp-home .revamp-hero h1 { max-width: none; font-size: clamp(2.4rem, 3.7vw, 3.55rem); }
  .revamp-home .revamp-hero-actions { margin-top: 1.9rem; }
  .revamp-home .revamp-hero-stage { position: relative; margin-right: min(0px, calc((1200px - 100vw) / 2 + 24px)); }
  /* The backdrop is brand green at low alpha over a LARGE area: --green-light on
     cream differs by two levels per channel and the card hides the gradient's
     core, so a reviewer measured the first version as invisible (max delta 7). */
  .revamp-home .revamp-hero-stage::before { content: ""; position: absolute; z-index: -1; inset: -26% 0 -30% -6%; border-radius: 42% 34% 46% 38%; background: radial-gradient(closest-side, rgba(30,132,73,.16) 0%, rgba(30,132,73,.10) 45%, rgba(30,132,73,0) 100%); pointer-events: none; }
  .revamp-home .revamp-stage .revamp-workspace { border-radius: 22px; }
  .revamp-home .revamp-stage-grid { gap: 10px; padding: 10px; }
  .revamp-home .revamp-tile { border-radius: 12px; }
  .revamp-home .revamp-tile-label { padding: .4rem .7rem; font-size: var(--fs-xs); }
  .revamp-home .revamp-illustrative { padding: .85rem 1rem .95rem; font-size: var(--fs-xs); }
  /* Compare: a versus mark between the columns, bigger titles, readable measure. */
  .revamp-home .revamp-compare { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 1.25rem; align-items: stretch; }
  .revamp-home .revamp-compare-vs { align-self: center; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--revamp-line); border-radius: 50%; background: var(--white); color: var(--revamp-muted); font-size: var(--fs-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
  .revamp-home .revamp-compare-col { padding: 1.9rem 2rem 2.1rem; }
  .revamp-home .revamp-compare-col h3 { font-size: var(--revamp-fs-title-lg); line-height: 1.2; max-width: 22ch; text-wrap: balance; }
  .revamp-home .revamp-compare-col .revamp-checklist { margin-top: 1.3rem; }
  .revamp-home .revamp-compare-col .revamp-checklist li { color: var(--ink-mid); font-size: var(--revamp-fs-lead); line-height: 1.55; }
  .revamp-home .revamp-compare-col .revamp-checklist li + li { margin-top: .75rem; }
  .revamp-home .revamp-compare-col--win .revamp-checklist li { color: var(--revamp-ink); }
  /* Workflow rail: a continuous rail behind the markers, bigger step type. */
  .revamp-home .revamp-timeline--shots { position: relative; }
  /* The rail stretches its four nodes to one height; without this each node's
     grid spreads the leftover across its rows and the markers land 7px apart. */
  .revamp-home .revamp-timeline--shots .revamp-timeline-node { align-content: start; }
  .revamp-home .revamp-timeline--shots .revamp-timeline-marker { padding-top: 1.1rem; color: var(--green-deep); }
  .revamp-home .revamp-timeline--shots .revamp-timeline-marker::before { display: block; position: absolute; top: -1px; left: 0; width: 44px; height: 3px; background: var(--green); }
  .revamp-home .revamp-timeline-title { font-size: var(--revamp-fs-sub); }
  .revamp-home .revamp-timeline-body { color: var(--ink-mid); font-size: var(--revamp-fs-lead); }
  .revamp-home .revamp-step-crop { margin-bottom: 1.3rem; border-radius: 12px; line-height: 0; }
  .revamp-home .revamp-step-crop picture { display: block; }
  /* Consumer principles: bigger, ink. */
  .revamp-home .revamp-principle-list strong { font-size: var(--revamp-fs-strong-lg); }
  .revamp-home .revamp-principle-list p { color: var(--ink-mid); font-size: var(--revamp-fs-lead); }
  .revamp-home .revamp-principle-list li { padding-top: 1.3rem; }
  .revamp-home .revamp-consumer-link { font-size: var(--revamp-fs-lead); }
  /* Proof band: the differentiator gets the biggest supporting type on the page. */
  .revamp-home .revamp-proof.revamp-section--deep .revamp-proof-item svg { width: 30px; height: 30px; }
  .revamp-home .revamp-proof.revamp-section--deep .revamp-proof-item strong { margin-top: 1rem; font-size: var(--revamp-fs-strong-lg); }
  .revamp-home .revamp-proof.revamp-section--deep .revamp-proof-item span { margin-top: .45rem; font-size: var(--revamp-fs-lead); color: rgba(255,255,255,.76); }
  .revamp-home .revamp-proof-grid { gap: 1.6rem; }
  /* Pricing: the figures are the loudest thing in the band. */
  .revamp-home .revamp-pricing { padding: 4.5rem 0; }
  .revamp-home .revamp-pricing-sub { color: var(--ink-mid); font-size: var(--revamp-fs-lead); }
  .revamp-home .revamp-price { padding: 1.5rem 1.6rem 1.7rem; }
  .revamp-home .revamp-price-figure { font-size: var(--revamp-fs-figure-lg); }
  .revamp-home .revamp-price-unit, .revamp-home .revamp-price-floor, .revamp-home .revamp-price-terms dd { font-size: var(--revamp-fs-prose); }
  /* Closing card breathes. */
  .revamp-home .revamp-cta-card-paper { padding: clamp(2.4rem, 4vw, 3.6rem); }
  .revamp-home .revamp-cta p { color: var(--ink-mid); font-size: var(--revamp-fs-lead-lg); }
}
@media (max-width: 900px) {
  .revamp-home .revamp-compare-vs { display: none; }   /* the mark has no phone layout; the columns stack */
}

/* ── Home page pass 5 (T-10410): hero furniture and stage legibility ────────
   The Built for chip row is gone from the markup (the eyebrow and the Who it's
   for menu already carry it). The creditor tile now shows the examiner strip and
   the health row at a larger zoom, so its heading reads on a 1280 laptop. */
@media (min-width: 901px) {
  .revamp-home .revamp-trust-note { margin-top: 1.6rem; }
  .revamp-home .revamp-tile--creditor .revamp-tile-crop { aspect-ratio: 2.1 / 1; }
  .revamp-home .revamp-tile--creditor .revamp-tile-crop img { width: 278%; margin: -46.6% 0 0 -51.4%; }   /* x .185 to .545, y .268 to .543: examiner-ready and audit-log cells, whole health row */
  .revamp-home .revamp-tile--agency .revamp-tile-crop, .revamp-home .revamp-tile--firm .revamp-tile-crop { aspect-ratio: 2.4 / 1; }
  .revamp-home .revamp-tile--firm .revamp-tile-crop img { width: 430%; margin: -74.3% 0 0 -91.9%; }   /* x .214 to .446, y .276 to .431: the counts and the queue header, about nine image px clear of the examiner banner above and of the first queue row below (the only firm rule that ships: the tile is hidden below 901px) */
  .revamp-home .revamp-tile--agency .revamp-tile-crop img { margin-top: -49.6%; }   /* y .26 to .479: examiner strip and counts, ending above the queue card */
  .revamp-home .revamp-tile--consumer .revamp-tile-crop img { width: 110%; margin: -49% 0 0 -5%; }   /* y .206 onward at 110%: the crop window is 1.81x its width at 901px, so the image must be at least 2.3x with a few px to spare; measured inside the capture from 901 to 1920 */
  /* Comparison cards size to their content instead of stretching to a hollow. */
  .revamp-home .revamp-compare { align-items: start; }
  .revamp-home .revamp-compare-vs { margin-top: 3.4rem; }
  /* The rail footnote spans the rail and reads as a footnote, not a caption of step one. */
  .revamp-home .revamp-illustrative--rail { max-width: none; padding-right: 0; justify-content: flex-end; }   /* the measure cap made it half the rail; without it, and without the caption padding, the text ends at the rail's right edge */
}

/* ── Home page pass 6 (T-10411): Safari blank tiles, wide screens, fixed phone window ──
   The founder's Safari screenshot at about 2000px showed two empty tiles (lazy
   images inside clipped crops that WebKit never fetched: the markup is now
   eager), a three-line headline (no floor on the copy column, no cap on the
   breakout) and the phone tile cutting into the next card (its window height
   was grid-driven). */
@media (min-width: 901px) {
  .revamp-home .revamp-hero-grid { grid-template-columns: minmax(520px, .86fr) minmax(0, 1.14fr); }
  .revamp-home .revamp-hero h1 { font-size: clamp(2.4rem, 3.7vw, 3.4rem); }
  .revamp-home .revamp-hero-stage { margin-right: max(-200px, min(0px, calc((1200px - 100vw) / 2 + 24px))); }
  /* Fixed window: y .206 to .83 of the phone capture (greeting, heading and
     both offer cards, ending in the gap above the attention banner, which the
     capture holds at rows .851 to .889) at every width. Image is 110% wide, so
     its height is 2.38 x the crop width and the window is 0.624 of that. */
  .revamp-home .revamp-tile--consumer .revamp-tile-crop { flex: 0 0 auto; aspect-ratio: 1000 / 1485; }
  .revamp-home .revamp-tile-note { display: block; flex: 1 1 auto; padding: .6rem .7rem; color: var(--revamp-muted); font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; text-align: center; align-content: end; }
}
@media (max-width: 900px) {
  .revamp-tile-note { display: none; }
}