/**
 * Domovita - Agent landing foundation
 * ===================================
 * Shared design layer for the four estate-agent-facing landing pages:
 *   listwithus, valuationpanel, agentregister, crawlerselfcheck.
 *
 * This file implements DESIGN-DIRECTION.md (2026-07-14) for that page family.
 * It is a primitive layer only - it ships no page-specific copy or layout, so
 * four builders working in parallel produce one visual language rather than
 * four. Every class is prefixed `dv-pg-` and every rule is scoped under
 * `.dv-pg-page`, so nothing here can leak onto any other view.
 *
 * House rules baked in:
 *   - Two font weights only: 400 and 500. Never 600/700.
 *   - Hairline borders, never drop shadows. The only shadow is a focus ring.
 *   - Gold is rationed: at most one gold element per viewport.
 *   - Sentence case. British English.
 *   - Motion is opted INTO under prefers-reduced-motion: no-preference, so the
 *     reduced-motion path is the default and can never strand content.
 *   - Only `transform` and `opacity` are ever animated - no CLS, no reflow.
 *
 * Tokens come from domovita.css section 1. Register `com_domovita.frontend`
 * BEFORE this bundle so the custom properties exist and the cascade is right.
 *
 * 1.2.0 (Round 2) adds the shape primitives - section 11. Alternating band
 * colour turned out not to be rhythm: four independent critics measured the
 * same identical opener molecule repeated across seven or eight bands. Section
 * 11 gives a band a way to differ in SILHOUETTE (artefact frame, stepper rail,
 * full-bleed data surface, statement rows, cluster card, mono register,
 * five-step band-padding scale, eyebrow-free openers) - still on two weights.
 * It also rebalances the type scale: h3 was measured SMALLER than the lede it
 * introduced (16.06px vs 17.25px), and the mobile h1 was 32.13px.
 *
 * 1.3.0 (Round 3) is a shared-layer-only change - three fixes, no new page
 * vocabulary. All three were measured, not asserted:
 *
 *   1. A THIRD HEADING TIER (section 4, `.dv-pg-title-lg`). Measured across the
 *      four pages there were exactly two display sizes: the hero and one size
 *      for every other section heading (390px: 40 / 26; 1440px: 52 / 34), so no
 *      band could be typographically more important than another. The new tier
 *      sits between them at 32 -> 42px, giving a near-constant 1.24 ratio
 *      between the three steps at both widths.
 *
 *   2. A PROSE MEASURE CAP (section 1 tokens + section 4). Worst measured lines
 *      at 1440px: a 13px mono caption running 1106px / ~155 characters, and
 *      20px ledes at ~91 characters. Both are far past the 45-75 band.
 *
 *   3. A METRIC-MATCHED FONT FALLBACK (section 0). Inter is fetched
 *      cross-origin with `display=swap`, so the page first paints in a fallback
 *      and re-metrics when Inter lands. Measured with fonts.gstatic.com blocked
 *      vs allowed, the H1 gained a WHOLE EXTRA LINE on 4 of 8 page/width
 *      combinations (agentregister @390 129.66 -> 172.88px; valuationpanel and
 *      agentregister @1440 112.31 -> 168.47px), displacing everything below it
 *      by up to 299px. That is the font race behind the intermittent desktop
 *      CLS, and section 0 removes it.
 *
 * Still two weights. 400 and 500 only - see DESIGN-DIRECTION.md. Independently
 * re-confirmed on 2026-08-08 by reading `document.fonts`: of the Inter faces the
 * page is served, only 400, 500 and 700 ever reach `loaded` - all seven 600
 * faces stay `unloaded`, so `font-weight: 600` renders a synthesised fake bold.
 *
 * 1.4.0 (2026-08-22) was the sitewide token/contrast pass - see PROJECT-STATUS
 * session 2026-08-22i/j; it left no entry in this docblock.
 *
 * 1.5.0 (2026-09-11) adds section 13 - an element-level SKIN for pages that
 * keep their own layout (`.dv-pg-page.dv-pg-skin`), plus `dv-pg-table` and
 * `dv-pg-faq`. Rollout spec: docs/superpowers/specs/2026-09-11-page-system-rollout-design.md
 *
 * 1.5.1 (2026-09-12) primary button rank goes GOLD (Anthony's call) - see section 8.
 *
 * 1.5.2 (2026-09-12, Round 2) skin: neutralises the inner white-card wrappers
 *   domovita.css paints (.dv-feedback-page etc.), adds the `dv-pg-native` opt-out
 *   (element or whole subtree), and hardens the link colour with !important
 *   against Helix's ID-selector link rules.
 *
 * 1.6.0 (2026-09-15) articles. Two shared-layer additions, no page-local CSS:
   (a) section 0b declares the 17 base tokens this sheet had been reading from
       domovita.css :root (--dv-ink, --dv-on-navy, --dv-surface, --dv-serif ...)
       on .dv-pg-page itself, same values - a no-op on com_domovita views, and
       the difference between a styled page and unset colours on com_content,
       which never loads domovita.css; (b) section 14 `dv-pg-prose`, the
       long-form prose flow the system never had because no page before the
       87 Joomla articles was long-form; (c) the section 13 skin now lets a
       type class (dv-pg-display, -title, -sub ...) outrank the element rule
       on the same tag - latent since 1.5.0. Spec: docs/superpowers/specs/
       2026-09-15-articles-page-system-design.md
 *
 * @version  1.8.0
 * @since    0.29.0
 */

/* ==========================================================================
   0. METRIC-MATCHED FALLBACK FACE - the font-swap CLS fix
   ==========================================================================
   THE MECHANISM. plg_system_domovita emits Inter as a normal cross-origin
   stylesheet from fonts.googleapis.com with `display=swap`. Swap means: paint
   immediately in whatever local font the stack resolves to, then re-render in
   Inter when it arrives. Inter is ~7% wider than Arial at the same px, so the
   first paint fits MORE words per line than the final paint does. When Inter
   lands the heading re-wraps, gains a line, and shoves the rest of the document
   down. On mobile the H1 is the LCP element, so this lands on the exact
   viewport carrying 74% of this audience.

   Measured before this section existed (blocked vs allowed, same page, same
   width, `.dv-pg-display` bounding box):

       agentregister    @390    129.66 -> 172.88px   (+43.22 = one whole line)
       valuationpanel   @1440   112.31 -> 168.47px   (+56.16 = one whole line)
       agentregister    @1440   112.31 -> 168.47px   (+56.16 = one whole line)
       worst downstream band displacement: 299px

   THE FIX. Declare a fallback FACE whose metrics are corrected to match Inter,
   and put it immediately after Inter in the stack. During the swap window the
   browser uses this face instead of raw Arial; because its adjusted advance
   widths match Inter's, the text wraps at the same points before and after the
   swap, so there is nothing left to shift.

   The numbers below were MEASURED in-engine on 2026-08-08, not copied from a
   library. Canvas `measureText` at 1000px against a frequency-weighted English
   corpus plus the four real hero strings:

       Inter   ascent 0.9690 em   descent 0.2410 em   (= hhea 1984/2048 and
                                                        494/2048 exactly)
       Arial   ascent 0.9050 em   descent 0.2120 em   (= hhea 1854/2048, 434/2048)
       width ratio Inter:Arial    1.0761 at w400, 1.0890 at w500

   size-adjust is that width ratio; the ascent/descent overrides are Inter's
   per-em metrics DIVIDED by size-adjust, because size-adjust scales the whole
   face including the overridden metrics. Inter's hhea line gap is 0.

   TWO FACES, ONE PER WEIGHT. Inter 500 is ~1.2% wider than Inter 400, but the
   Arial fallback is Regular at both weights, so a single size-adjust cannot
   serve both. The design system has exactly two weights, so the fallback has
   exactly two faces - and declaring the face AS weight 500 also stops the
   browser synthesising a fake bold for it.

   COST: zero. `src: local()` issues no network request; a fallback face is
   never downloaded. If Arial is absent the face simply fails to match and the
   stack carries on to the next family, which is exactly today's behaviour - so
   this cannot be worse anywhere. It is optimal on Windows and macOS (identical
   Arial metrics) and a partial improvement where `local('Arial')` resolves to a
   substitute such as Roboto on Android.

   NOT DONE HERE, deliberately: no self-hosting, no new font file, and
   `display=swap` is left alone. Blocking is worse, and `display=optional` would
   cost first-time visitors the brand font - a design call, not a perf one.
   ========================================================================== */

/* REMOVED 2026-08-22 - the two 'Inter Fallback' faces that lived here.
   They were Arial re-metricked (size-adjust 107.04%/108.31% plus ascent and
   descent overrides) to match INTER, so that the swap when Inter landed did not
   re-wrap headings. Inter is no longer fetched at all (see the note in
   plg_system_domovita/domovita.php), so there is no swap left to absorb - and
   leaving these in would have been actively harmful: the stack below would have
   resolved to distorted Arial permanently, metric-matched to a font that never
   arrives. The whole mechanism described in section 0 above is now moot; it is
   left in place as the record of why, and as the recipe if a webfont ever
   returns. */

/* ==========================================================================
   0b. BASE TOKEN FALLBACKS - 1.6.0 (2026-09-15)
   ==========================================================================
   Every value below is a verbatim copy of the :root declaration in
   domovita.css (checked 2026-09-15: all 17 are :root-only there, nothing
   re-points them on an intermediate ancestor). Declaring them on .dv-pg-page
   therefore changes nothing on a com_domovita view - same token, same value -
   and gives a com_content page (the Joomla articles, which never load
   domovita.css) the same palette instead of unset custom properties falling
   through to whatever inline fallback a rule happened to carry.

   If a value changes in domovita.css it must change here too. The check is
   mechanical: tools/ops/page_system_report.py is not it - grep both files.
   ========================================================================== */

.dv-pg-page {
    --dv-deep-navy:       #1F3A5F;
    --dv-navy:            #1F3A5F;
    --dv-navy-raised:     #26456E;
    --dv-navy-ink:        #1F3A5F;
    --dv-blue:            #2F6FCC;
    --dv-blue-tint:       #E6F1FB;
    --dv-btn-primary:     #2F6FCC;
    --dv-gold:            #F5B041;
    --dv-gold-hover:      #E0992E;
    --dv-gold-ink:        #412402;
    --dv-ink:             #1B1B1A;
    --dv-ink-2:           #5F5E5A;
    --dv-ink-3:           #6B6A64;
    --dv-on-navy:         #FFFFFF;
    --dv-on-navy-mute:    #B5D4F4;
    --dv-on-navy-faint:   #85B7EB;
    --dv-surface:         #FFFFFF;
    --dv-surface-1:       #F7F6F3;
    --dv-hairline:        rgba(31, 58, 95, 0.10);
    --dv-hairline-strong: rgba(0, 0, 0, 0.18);
    --dv-radius:          16px;
    --dv-radius-card:     16px;
    --dv-radius-sm:       4px;
    --dv-serif:           Georgia, 'Iowan Old Style', 'Palatino Linotype', Palatino, 'URW Palladio L', P052, serif;
    --dv-mono:            'SF Mono', 'JetBrains Mono', Menlo, Consolas, 'Courier New', monospace;
}

/* ==========================================================================
   1. LOCAL TOKENS - type scale, rhythm, measure
   ========================================================================== */

.dv-pg-page {
    /* --- Typeface ------------------------------------------------------- */
    /* Named once, applied per-class in section 4. See the note there for why
       inheriting it from this element is not enough.

       `--dv-font` is re-pointed HERE rather than on :root so the metric-matched
       fallback (section 0) sits directly behind Inter for this page family only.
       Scoping it to `.dv-pg-page` means the change cannot reach the sold-price
       street pages, which carry ~93% of organic traffic and have not been
       measured for this. Promoting it to domovita.css :root is the obvious next
       move once they have been - the same swap-reflow exists there, and it is
       named as the proper fix in plg_system_domovita/domovita.php.

       Anything inside this page that reads `var(--dv-font)` directly - a few
       domovita.css rules do - picks this up automatically.

       2026-08-22: 'Inter' and 'Inter Fallback' both removed from the head of
       this stack. With no webfont fetched there is nothing to swap in and
       nothing to metric-match, so this now resolves straight to the platform
       sans - which is what the :root definition in domovita.css does too. This
       re-point is consequently a no-op today and is kept only so the local
       --dv-pg-font alias below still has something to read. */
    --dv-font: -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --dv-pg-font: var(--dv-font);

    /* --- Second typographic register (Round 2) -------------------------- */
    /* With weight locked to 400/500, family is the only other axis we have.
       `--dv-mono` is declared on :root by domovita.css; the literal stack is
       the fallback for the case where this bundle loads without it. */
    --dv-pg-mono: var(--dv-mono, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, 'Courier New', monospace);

    /* --- Type scale (DESIGN-DIRECTION §3, fluid via clamp) ---------------
       Round 2 rebalance. Two measured defects drove it:
         a) `.dv-pg-h3` computed 16.06px against `.dv-pg-sub` at 17.25px, i.e.
            a subheading SMALLER than the body copy it introduces.
         b) the mobile h1 was 32.13px, modest next to the ~40px references.
       Both are fixed by SIZE, never by weight - 600/700 stay banned
       (DESIGN-DIRECTION.md), and `Inter 600` is not even fetched, so setting
       it would synthesise a fake bold. Measured after: display 40.04/52,
       title 26/34, sub 17.25/20, h3 19/22, body 16. */
    --dv-pg-t-display:   clamp(2.5rem, 2.10rem + 1.65vw, 3.25rem);  /* 40 -> 52 */
    /* Round 3: the third tier. Measured, there were only ever TWO display sizes
       on any of these pages - the hero and one size for every other section
       heading (390px: 40 / 26. 1440px: 52 / 34) - so no band could be
       typographically more important than another, and a page had no way to
       mark two or three bands as major.

       Sized to sit genuinely between the two at BOTH widths, which the obvious
       "~34px at 1440" does not: `--dv-pg-t-title` ALREADY computes 34px at
       1440, so a 34px tier would be invisible there and only exist on mobile.
       32 -> 42 gives three steps at a near-constant ratio:
           390px   26 / 32 / 40   (x1.23, x1.25)
           1440px  34 / 42 / 52   (x1.24, x1.24)
       Weight stays 500 - the tier is earned by size and leading, as everything
       in this system is. */
    --dv-pg-t-title-lg:  clamp(2rem, 1.768rem + 0.95vw, 2.625rem);  /* 32 -> 42 */
    --dv-pg-t-title:     clamp(1.625rem, 1.40rem + 0.92vw, 2.125rem); /* 26 -> 34 */
    --dv-pg-t-sub:       clamp(1.0625rem, 1.01rem + 0.28vw, 1.25rem); /* 17 -> 20 */
    --dv-pg-t-h3:        clamp(1.1875rem, 1.09rem + 0.38vw, 1.375rem); /* 19 -> 22 */
    --dv-pg-t-body:      1rem;                                       /* 16 */
    --dv-pg-t-meta:      0.875rem;                                   /* 14 */
    --dv-pg-t-caption:   0.8125rem;                                  /* 13 */
    --dv-pg-t-eyebrow:   0.75rem;                                    /* 12 */
    --dv-pg-t-data:      clamp(1.75rem, 1.45rem + 1.30vw, 2.25rem); /* 28 -> 36 */
    --dv-pg-t-data-md:   1.25rem;                                    /* 20 */

    /* --- Vertical rhythm ------------------------------------------------
       Five band paddings, not two. A page whose every band uses the same air
       reads as one component repainted; letting the argument band breathe
       twice as hard as the housekeeping band is half of what "rhythm" means. */
    --dv-pg-band-y-xs:   clamp(1.25rem, 1.05rem + 0.85vw, 2rem);    /* 20 -> 32 */
    --dv-pg-band-y-sm:   clamp(1.75rem, 1.40rem + 1.5vw, 3rem);     /* 28 -> 48 */
    --dv-pg-band-y:      clamp(2.5rem, 1.80rem + 3.0vw, 5rem);      /* 40 -> 80 */
    --dv-pg-band-y-lg:   clamp(3.5rem, 2.40rem + 4.5vw, 7rem);      /* 56 -> 112 */
    --dv-pg-band-y-xl:   clamp(4.5rem, 2.60rem + 7.4vw, 9.5rem);    /* 72 -> 148 */
    --dv-pg-gap:         clamp(1rem, 0.70rem + 1.2vw, 1.75rem);     /* 16 -> 28 */
    --dv-pg-gap-sm:      0.75rem;
    --dv-pg-pad-card:    clamp(1.25rem, 1.00rem + 0.9vw, 1.75rem);  /* 20 -> 28 */

    /* --- Measure + gutters ---------------------------------------------- */
    --dv-pg-measure:     1200px;   /* inner content width inside a band - 1200 to match the 2026-09-19 design handoff (was 1120) */
    --dv-pg-measure-n:   680px;    /* narrow prose measure                   */

    /* --- Prose measure (Round 3) -----------------------------------------
       LAYOUT width is not READING width. `--dv-pg-measure` is how wide a band's
       content may be; these three are how wide a LINE OF TEXT may be, and until
       now several primitives had no cap at all and simply ran the full 1120px.
       Measured at 1440px before this existed:
           13px mono canvas caption   1106px   ~155 characters
           13px mono key                881px   ~124 characters
           20px lede                    909px    ~91 characters
           14px meta                    673px    ~101 characters
       The comfortable band is 45-75 characters; 155 is roughly double the top
       of it.

       WHY THESE LOOK SMALLER THAN 68ch: `ch` is the advance of "0", which in
       Inter is 1.267x the average advance of real English prose - so a literal
       `max-width: 68ch` admits ~86 characters, not 68. Measured: Inter 16px has
       ch = 10.094px against a 7.97px average glyph. 54ch is what actually
       produces a ~68-character line. Verified by counting characters per
       rendered line box with a Range walk, not by dividing pixels by a guess.

       Monospace needs no such correction - every glyph is one ch - so
       `--dv-pg-prose-mono` is a literal character count, and it is set tighter
       than the prose cap because a mono line is physically longer and harder to
       track back from at the same character count. */
    --dv-pg-prose:       54ch;     /* body / notes / captions  -> ~68 chars   */
    --dv-pg-prose-lede:  48ch;     /* 17-20px decks            -> ~61 chars   */
    --dv-pg-prose-mono:  62ch;     /* mono: exactly 62 characters             */
    /* Minimum edge gutter. Helix's own container padding only yields ~15px at
       390px, which is too tight for a landing page, so the max() in the band
       rule floors it at 24px. On desktop the calc() always wins. */
    --dv-pg-gutter:      24px;

    /* --- Surface-aware ink (re-pointed inside navy bands) ---------------- */
    --dv-pg-ink:         var(--dv-ink, #1B1B1A);
    --dv-pg-ink-2:       var(--dv-ink-2, #5F5E5A);
    /* Deliberately NOT `var(--dv-ink-3)`. The global token is #888780, which
       measures 3.61:1 on white, 3.34:1 on --dv-surface-1 and 3.15:1 on the
       blue tint - i.e. it fails WCAG AA (4.5:1) on every light band surface
       this family uses, at the 13-14px sizes it is used at. Round 2 adds three
       more ink-3 primitives (`.dv-pg-key`, `.dv-pg-kicker`, the statement-row
       key), so the ratio was going to get worse, not better. #6B6A64 is the
       same warm neutral one step darker: 5.43 / 5.02 / 4.74:1 on those three
       surfaces. Inside a navy band the token is re-pointed to
       --dv-on-navy-faint (5.3:1) by section 3 and is unaffected. */
    --dv-pg-ink-3:       #6B6A64;
    --dv-pg-rule:        var(--dv-hairline, rgba(0, 0, 0, 0.10));
    --dv-pg-rule-strong: var(--dv-hairline-strong, rgba(0, 0, 0, 0.18));
    --dv-pg-tile:        var(--dv-surface, #FFFFFF);
    --dv-pg-accent:      var(--dv-blue, #2F6FCC);
}

/* ==========================================================================
   2. PAGE SHELL - neutralise the narrow white card
   ==========================================================================
   `.domovita-container` is a 1200px centred white card with 32px padding and a
   hairline ring. That single card running the whole length of the page is the
   root cause of "an article with a button on it". `.dv-pg-page` strips the
   chrome and hands the surface decision to the bands instead.

   Put `dv-pg-page` ON the `.domovita-container` element. The `:has()` rule is
   a fallback for the case where it lands on an inner wrapper instead.
   ========================================================================== */

.dv-pg-page,
.domovita-container:has(> .dv-pg-page) {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

.dv-pg-page {
    font-family: var(--dv-pg-font);
    font-weight: 400;
    font-size: var(--dv-pg-t-body);
    line-height: 1.65;
    color: var(--dv-pg-ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.dv-pg-page *,
.dv-pg-page *::before,
.dv-pg-page *::after {
    box-sizing: border-box;
}

/* ==========================================================================
   3. BAND SYSTEM - full-bleed surfaces
   ==========================================================================
   The breakout: negative inline margin pulls the band out to the viewport
   edges, and a matching inline padding pushes the content back to where the
   container edge was. Only margin/padding change, so there is no transform,
   no repaint cost and no layout shift.

   `max()` guarantees a minimum gutter if an ancestor ever becomes full-bleed
   itself. `100vw` includes the classic desktop scrollbar, which is why the
   band can be a few px wider than the client area - the site body already
   carries `overflow-x: hidden` (Helix `.offcanvas-init` / `.body-innerwrapper`),
   so the surplus is clipped rather than producing a horizontal scrollbar.

   BANDS MUST BE DIRECT CHILDREN of the element carrying `dv-pg-page` - the
   50% in the calc resolves against the parent's width.
   ========================================================================== */

.dv-pg-page > .dv-pg-band,
.dv-pg-page .dv-pg-band {
    position: relative;
    display: block;
    margin-inline: calc(50% - 50vw);
    padding-inline: max(var(--dv-pg-gutter), calc(50vw - 50%));
    padding-block: var(--dv-pg-band-y);
    background-color: var(--dv-surface, #FFFFFF);
    color: var(--dv-pg-ink);
}

/* Padding variants - the rhythm scale. Pick deliberately: one or two bands per
   page get `-xl`, most get the default, housekeeping gets `-tight` / `-xs`. */
.dv-pg-page .dv-pg-band-xl    { padding-block: var(--dv-pg-band-y-xl); }
.dv-pg-page .dv-pg-band-hero  { padding-block: var(--dv-pg-band-y-lg); }
.dv-pg-page .dv-pg-band-tight { padding-block: var(--dv-pg-band-y-sm); }
.dv-pg-page .dv-pg-band-xs    { padding-block: var(--dv-pg-band-y-xs); }
.dv-pg-page .dv-pg-band-flush { padding-block: 0; }

/* Asymmetric ends - lets a full-bleed artefact finish a band flush against the
   next surface, or a band butt straight onto the one above it. */
.dv-pg-page .dv-pg-band-flush-top    { padding-top: 0; }
.dv-pg-page .dv-pg-band-flush-bottom { padding-bottom: 0; }

/* --- Surfaces ------------------------------------------------------------ */

.dv-pg-page .dv-pg-band-white {
    background-color: var(--dv-surface, #FFFFFF);
}

.dv-pg-page .dv-pg-band-light {
    background-color: var(--dv-surface-1, #F7F6F3);
}

.dv-pg-page .dv-pg-band-tint {
    background-color: var(--dv-blue-tint, #E6F1FB);
}

/* `-navy` and `-data` are both dark surfaces and share the whole ink re-point.
   `-data` differs only in its texture and in what it is FOR (see section 12);
   listing it here means every on-navy primitive works inside it unchanged, so a
   builder cannot half-apply it. */
.dv-pg-page .dv-pg-band-navy,
.dv-pg-page .dv-pg-band-data {
    background-color: var(--dv-navy, #1F3A5F);
    /* Free depth - a CSS gradient, not an image request. */
    background-image: radial-gradient(120% 100% at 50% 0%,
                      rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 62%);
    color: var(--dv-on-navy, #FFFFFF);

    /* Re-point the surface-aware tokens so every primitive inside this band
       flips to its on-navy treatment automatically. Never plain white for
       secondary text - #B5D4F4 is 7.2:1 on navy, #85B7EB is 5.3:1. */
    --dv-pg-ink:         var(--dv-on-navy, #FFFFFF);
    --dv-pg-ink-2:       var(--dv-on-navy-mute, #B5D4F4);
    --dv-pg-ink-3:       var(--dv-on-navy-faint, #85B7EB);
    --dv-pg-rule:        rgba(255, 255, 255, 0.16);
    --dv-pg-rule-strong: rgba(255, 255, 255, 0.32);
    --dv-pg-tile:        var(--dv-navy-raised, #26456E);
    --dv-pg-accent:      var(--dv-on-navy-mute, #B5D4F4);
}

/* Two same-coloured bands in a row need a hairline so the join reads. */
.dv-pg-page .dv-pg-band-white + .dv-pg-band-white,
.dv-pg-page .dv-pg-band-light + .dv-pg-band-light,
.dv-pg-page .dv-pg-band-tint  + .dv-pg-band-tint {
    border-top: 1px solid var(--dv-hairline, rgba(0, 0, 0, 0.10));
}

/* --- Inner measure ------------------------------------------------------- */

.dv-pg-page .dv-pg-inner {
    max-width: var(--dv-pg-measure);
    margin-inline: auto;
}

.dv-pg-page .dv-pg-inner-narrow {
    max-width: var(--dv-pg-measure-n);
    margin-inline: auto;
}

/* ==========================================================================
   4. TYPE SCALE
   ==========================================================================
   Two weights only. The eyebrow is the single uppercase element in the system.

   TYPEFACE LOCK - read before removing any font-family below.
   domovita.css section 10 sets, sitewide:

       body.com_domovita h1, h2, h3, .dv-display { font-family: var(--dv-serif) }

   That declares the family DIRECTLY on the heading element, and a direct
   declaration always beats an inherited value - so `font-family` on
   `.dv-pg-page` never reaches an h1/h2/h3 no matter how the cascade is
   ordered. Left alone, every heading in this system renders Georgia at
   weight 500, a weight Georgia does not ship, so the browser synthesises it.

   The fix is specificity, not force. `body.com_domovita h1` is (0,1,2); the
   two-class rules here are (0,2,0) and the heading backstop is (0,2,1), so
   both clear it without `!important` and without a `body.` prefix. This
   matches the house direction set on the homepage hero - keep the text, drop
   the serif.
   ========================================================================== */

.dv-pg-page .dv-pg-eyebrow,
.dv-pg-page .dv-pg-display,
.dv-pg-page .dv-pg-title,
.dv-pg-page .dv-pg-h3,
.dv-pg-page .dv-pg-sub,
.dv-pg-page .dv-pg-data,
.dv-pg-page .dv-pg-data-md,
.dv-pg-page .dv-pg-metric-value {
    font-family: var(--dv-pg-font);
}

/* Backstop for a heading a page styles with its own class and no dv-al type
   class (e.g. `.dv-agr-sec-t` on the agent register). The repeated class is a
   specificity bump only - it changes nothing about what the selector matches.
   h4-h6 are not in the sitewide rule and inherit correctly already. */
.dv-pg-page.dv-pg-page h1,
.dv-pg-page.dv-pg-page h2,
.dv-pg-page.dv-pg-page h3 {
    font-family: var(--dv-pg-font);
}

.dv-pg-page .dv-pg-eyebrow {
    display: block;
    margin: 0 0 0.75rem;
    font-size: var(--dv-pg-t-eyebrow);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--dv-pg-accent);
}

/* Gold eyebrow. Using this SPENDS the page's one gold element - do not also
   use .dv-pg-btn-gold in the same viewport. */
.dv-pg-page .dv-pg-eyebrow-gold {
    color: var(--dv-gold, #F5B041);
}

/* Line-height tightens as size grows - that is what makes a large heading read
   as one object rather than a stack of lines, and it is the substitute for the
   weight bump we are not allowed to make. 40px x 1.08 = 43.2px per line. */
/* Weight 600 on the two top tiers only.
   Anthony retired the two-weight rule in chat on 2026-08-08, after three
   successive critic rounds named "nothing announces itself" as the typographic
   gap. Inter 600 is a REAL weight here, not synthesised: Google serves Inter as
   a variable font and the stylesheet already requests wght@400;500;600;700, so
   this costs zero extra bytes and zero extra requests. Measured glyph advance
   at 64px: 400=754.75 / 500=764.58 / 600=774.14 / 700=783.95 - even ~9.6px
   steps, i.e. genuine interpolation, not fake bold.
   Deliberately NOT applied below title-lg: the retired rule's reasoning (bold
   at large sizes reads as shouting) still holds for card titles and body copy,
   and reserving 600 for two tiers gives more hierarchy than spending it
   everywhere. See DESIGN-DIRECTION.md section 3. */
.dv-pg-page .dv-pg-display {
    margin: 0 0 1rem;
    font-size: var(--dv-pg-t-display);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.022em;
    color: var(--dv-pg-ink);
    text-wrap: balance;
}

/* The third tier. Use it to mark the two or three bands that carry the page's
   actual argument; leave the housekeeping bands on `.dv-pg-title`. A page that
   makes every band `-lg` has simply moved the problem, not fixed it.

   Leading and tracking interpolate between the two neighbouring tiers
   (1.08/-0.022em display, 1.2/-0.014em title) for the same reason they do
   there: as a heading grows, tightening the leading is what makes it read as
   one object, and it is the substitute for the weight bump we do not take. */
.dv-pg-page .dv-pg-title-lg {
    margin: 0 0 0.85rem;
    font-size: var(--dv-pg-t-title-lg);
    font-weight: 600;   /* see the note above .dv-pg-display */
    line-height: 1.14;
    letter-spacing: -0.018em;
    color: var(--dv-pg-ink);
    text-wrap: balance;
}

.dv-pg-page .dv-pg-title {
    margin: 0 0 0.75rem;
    font-size: var(--dv-pg-t-title);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.014em;
    color: var(--dv-pg-ink);
    text-wrap: balance;
}

.dv-pg-page .dv-pg-h3 {
    margin: 0 0 0.5rem;
    font-size: var(--dv-pg-t-h3);
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: -0.006em;
    color: var(--dv-pg-ink);
}

.dv-pg-page .dv-pg-sub {
    margin: 0 0 1.5rem;
    font-size: var(--dv-pg-t-sub);
    font-weight: 400;
    line-height: 1.55;
    color: var(--dv-pg-ink-2);
    max-width: var(--dv-pg-prose-lede);
}

.dv-pg-page .dv-pg-body {
    margin: 0 0 1rem;
    font-size: var(--dv-pg-t-body);
    font-weight: 400;
    line-height: 1.65;
    color: var(--dv-pg-ink-2);
    max-width: var(--dv-pg-prose);
}

.dv-pg-page .dv-pg-meta {
    font-size: var(--dv-pg-t-meta);
    font-weight: 400;
    line-height: 1.5;
    color: var(--dv-pg-ink-2);
    max-width: var(--dv-pg-prose);
}

.dv-pg-page .dv-pg-caption {
    font-size: var(--dv-pg-t-caption);
    font-weight: 400;
    line-height: 1.45;
    color: var(--dv-pg-ink-3);
    max-width: var(--dv-pg-prose);
}

/* Default cap for any paragraph a page writes without reaching for a class.
   One class less specific than every primitive above, so `p.dv-pg-sub` still
   gets the lede measure. `.dv-pg-measure-full` (section 10) is the escape
   hatch for the rare block that genuinely wants the whole band. */
.dv-pg-page p {
    max-width: var(--dv-pg-prose);
}

/* Capped prose inside a centred composition would otherwise sit hard left in
   its own narrower box while its text stayed centred - the cap has to be
   re-centred, not just applied. */
.dv-pg-page .dv-pg-head-centre :is(p, .dv-pg-sub, .dv-pg-body, .dv-pg-meta,
                                   .dv-pg-caption, .dv-pg-note, .dv-pg-key,
                                   .dv-pg-kicker, .dv-pg-figcap, .dv-pg-canvas-cap),
.dv-pg-page .dv-pg-centre :is(p, .dv-pg-sub, .dv-pg-body, .dv-pg-meta,
                              .dv-pg-caption, .dv-pg-note, .dv-pg-key,
                              .dv-pg-kicker, .dv-pg-figcap, .dv-pg-canvas-cap) {
    margin-inline: auto;
}

/* Numerals are always tabular here - columns of figures line up, and a value
   that ticks over does not reflow its neighbours. */
.dv-pg-page .dv-pg-data    { font-size: var(--dv-pg-t-data); font-weight: 500; line-height: 1.1; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; }
.dv-pg-page .dv-pg-data-md { font-size: var(--dv-pg-t-data-md); font-weight: 500; line-height: 1.2; font-variant-numeric: tabular-nums; }

/* A band opener: eyebrow + title + deck, with rhythm below it. */
.dv-pg-page .dv-pg-head {
    margin: 0 0 var(--dv-pg-gap);
    max-width: 46em;
}
.dv-pg-page .dv-pg-head > :last-child { margin-bottom: 0; }

.dv-pg-page .dv-pg-head-centre {
    margin-inline: auto;
    text-align: center;
}
.dv-pg-page .dv-pg-head-centre .dv-pg-sub { margin-inline: auto; }

/* Quiet footnote / promise line, e.g. "No subscription, no fees, no contract." */
.dv-pg-page .dv-pg-note {
    margin: 0.75rem 0 0;
    font-size: var(--dv-pg-t-caption);
    line-height: 1.5;
    color: var(--dv-pg-ink-3);
    max-width: var(--dv-pg-prose);
}

/* ==========================================================================
   5. STACK + GRID - vertical rhythm and column layout without breakpoints
   ========================================================================== */

.dv-pg-page .dv-pg-stack > * + *    { margin-top: 1rem; }
.dv-pg-page .dv-pg-stack-sm > * + * { margin-top: 0.5rem; }
.dv-pg-page .dv-pg-stack-lg > * + * { margin-top: 2rem; }

/* auto-fit + min() means one set of rules covers 390px through 1440px with no
   media queries and no risk of an overflowing track. */
.dv-pg-page .dv-pg-grid {
    display: grid;
    gap: var(--dv-pg-gap);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--dv-pg-col, 260px)), 1fr));
}
.dv-pg-page .dv-pg-grid-2 { --dv-pg-col: 400px; }
.dv-pg-page .dv-pg-grid-3 { --dv-pg-col: 290px; }
.dv-pg-page .dv-pg-grid-4 { --dv-pg-col: 210px; }

/* Text beside a figure. Collapses to one column below ~700px. */
.dv-pg-page .dv-pg-split {
    display: grid;
    gap: clamp(1.5rem, 1rem + 2.5vw, 3.5rem);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    align-items: center;
}
.dv-pg-page .dv-pg-split > * { min-width: 0; }

/* ==========================================================================
   6. CARDS, LISTS, ROWS, STEPS, METRICS
   ========================================================================== */

.dv-pg-page .dv-pg-card {
    padding: var(--dv-pg-pad-card);
    background: var(--dv-pg-tile);
    border: 1px solid var(--dv-pg-rule);
    border-radius: var(--dv-radius-card, 12px);
    box-shadow: none;
    color: var(--dv-pg-ink);
}
.dv-pg-page .dv-pg-card > :last-child { margin-bottom: 0; }

/* A card that is itself the primary action target. */
.dv-pg-page .dv-pg-card-lift {
    border-color: var(--dv-pg-rule-strong);
}

/* --- Ticked feature list ------------------------------------------------- */

.dv-pg-page .dv-pg-list {
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
}
.dv-pg-page .dv-pg-list > li {
    position: relative;
    padding: 0 0 0 1.75rem;
    margin: 0 0 0.6rem;
    font-size: var(--dv-pg-t-body);
    line-height: 1.55;
    color: var(--dv-pg-ink-2);
}
.dv-pg-page .dv-pg-list > li:last-child { margin-bottom: 0; }
/* Tick drawn with two borders - crisp at every DPR, zero requests. */
.dv-pg-page .dv-pg-list > li::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 0.42em;
    width: 0.40em;
    height: 0.72em;
    border: solid var(--dv-pg-accent);
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
}

/* --- Hairline rows ------------------------------------------------------- */

.dv-pg-page .dv-pg-rows {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--dv-pg-rule);
}
.dv-pg-page .dv-pg-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem var(--dv-pg-gap-sm);
    align-items: baseline;
    justify-content: space-between;
    padding: var(--dv-pg-row-y, 0.85rem) 0;
    border-bottom: 1px solid var(--dv-pg-rule);
}
.dv-pg-page .dv-pg-row-label { color: var(--dv-pg-ink-2); font-size: var(--dv-pg-t-meta); }
.dv-pg-page .dv-pg-row-value { color: var(--dv-pg-ink); font-weight: 500; font-variant-numeric: tabular-nums; }

/* Row density. `-airy` is what turns a data table into a statement list. */
.dv-pg-page .dv-pg-rows-tight { --dv-pg-row-y: 0.6rem; }
.dv-pg-page .dv-pg-rows-airy  { --dv-pg-row-y: clamp(1rem, 0.75rem + 1vw, 1.5rem); }

/* --- Numbered steps ------------------------------------------------------ */

.dv-pg-page .dv-pg-steps {
    counter-reset: dv-pg-step;
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--dv-pg-gap);
}
.dv-pg-page .dv-pg-step {
    counter-increment: dv-pg-step;
    position: relative;
    padding-left: 3.25rem;
    min-height: 2.25rem;
}
.dv-pg-page .dv-pg-step::before {
    content: counter(dv-pg-step);
    position: absolute;
    left: 0;
    top: 0;
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--dv-pg-rule-strong);
    border-radius: 50%;
    font-size: var(--dv-pg-t-meta);
    font-weight: 500;
    line-height: 1;
    color: var(--dv-pg-ink);
}
.dv-pg-page .dv-pg-step > :last-child { margin-bottom: 0; }

/* --- Metric tiles -------------------------------------------------------- */

.dv-pg-page .dv-pg-metrics {
    display: grid;
    gap: 1px;                                   /* the gap IS the hairline */
    background: var(--dv-pg-rule);
    border: 1px solid var(--dv-pg-rule);
    border-radius: var(--dv-radius-card, 12px);
    overflow: hidden;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
}
.dv-pg-page .dv-pg-metric {
    padding: var(--dv-pg-pad-card);
    background: var(--dv-pg-tile);
}
.dv-pg-page .dv-pg-metric-value {
    display: block;
    font-size: var(--dv-pg-t-data);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.025em;
    font-variant-numeric: tabular-nums;
    color: var(--dv-pg-ink);
}
.dv-pg-page .dv-pg-metric-label {
    display: block;
    margin-top: 0.35rem;
    font-size: var(--dv-pg-t-caption);
    line-height: 1.4;
    color: var(--dv-pg-ink-3);
}

/* --- Pill ---------------------------------------------------------------- */

.dv-pg-page .dv-pg-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--dv-pg-rule);
    border-radius: var(--dv-radius-pill, 20px);
    font-size: var(--dv-pg-t-caption);
    font-weight: 400;
    line-height: 1.4;
    color: var(--dv-pg-ink-2);
    background: transparent;
}
.dv-pg-page .dv-pg-band-navy .dv-pg-pill,
.dv-pg-page .dv-pg-band-data .dv-pg-pill { color: var(--dv-pg-ink-2); }

/* ==========================================================================
   7. FIGURES, ICONS, DATA BARS
   ==========================================================================
   Every media box declares an aspect-ratio so the space is reserved before the
   contents paint - no CLS. Prefer inline SVG; a large raster here would become
   the LCP element and blow the budget.
   ========================================================================== */

.dv-pg-page .dv-pg-figure {
    display: block;
    width: 100%;
    aspect-ratio: var(--dv-pg-ratio, 16 / 10);
    overflow: hidden;
    margin: 0;
    background: var(--dv-pg-tile);
    border: 1px solid var(--dv-pg-rule);
    border-radius: var(--dv-radius-card, 12px);
}
.dv-pg-page .dv-pg-figure > img,
.dv-pg-page .dv-pg-figure > svg,
.dv-pg-page .dv-pg-figure > .dv-pg-figure-body {
    display: block;
    width: 100%;
    height: 100%;
}
.dv-pg-page .dv-pg-figure > img { object-fit: cover; }
.dv-pg-page .dv-pg-figure-square { --dv-pg-ratio: 1 / 1; }
.dv-pg-page .dv-pg-figure-wide   { --dv-pg-ratio: 21 / 9; }

/* A framed "product surface" - use on navy to sit an inline SVG diagram on. */
.dv-pg-page .dv-pg-panel {
    padding: var(--dv-pg-pad-card);
    background: var(--dv-pg-tile);
    border: 1px solid var(--dv-pg-rule);
    border-radius: var(--dv-radius-card, 12px);
}

.dv-pg-page .dv-pg-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    margin-bottom: 1rem;
    border: 1px solid var(--dv-pg-rule);
    border-radius: var(--dv-radius, 8px);
    color: var(--dv-pg-accent);
}
.dv-pg-page .dv-pg-icon > svg { display: block; width: 22px; height: 22px; }

/* Horizontal data bar. Set --dv-pg-pct inline, e.g. style="--dv-pg-pct:64%". */
.dv-pg-page .dv-pg-bar {
    position: relative;
    height: 6px;
    width: 100%;
    border-radius: 3px;
    background: var(--dv-pg-rule);
    overflow: hidden;
}
.dv-pg-page .dv-pg-bar-fill {
    display: block;
    height: 100%;
    width: var(--dv-pg-pct, 0%);
    border-radius: 3px;
    background: var(--dv-pg-accent);
}

/* ==========================================================================
   8. BUTTONS
   ==========================================================================
   48px min height everywhere - comfortably over the 44px touch target, and
   74% of this traffic is mobile. Colour only ever transitions under
   no-preference (section 11), so nothing is mid-animation under reduce.

   LABEL COLOUR goes through `--dv-pg-btn-ink` rather than being set directly
   on each variant. domovita.css line ~9943 carries

       body.com-domovita #sp-component > .sp-column a:not(.btn):not(.dv-back-link)
           { color: #1F3A5F }

   which is (1,4,2). An id beats any number of classes, so a `color` on
   `.dv-pg-page .dv-pg-btn-secondary` (0,2,0) could never reach an
   `<a class="dv-pg-btn">` - it painted the label #1F3A5F, and inside a navy
   band the surface is also #1F3A5F, i.e. a 1:1 contrast ratio and an
   invisible call to action (measured on /join-valuation-panel: "See how it
   works"). A `<button>` with the same classes was unaffected, which is why
   this only showed on some pages.

   The variants set the token; one reclaim rule at the bottom of this section
   maps it onto `color` for anchors. Routing it through a custom property
   means hover, focus and the on-navy re-pointing all keep working from the
   normal low-specificity rules, and there is no `!important` anywhere.
   ========================================================================== */

.dv-pg-page .dv-pg-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    margin-top: 1.5rem;
}

.dv-pg-page .dv-pg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 48px;
    padding: 0.75rem 1.5rem;
    border: 1px solid transparent;
    border-radius: var(--dv-radius, 8px);
    color: var(--dv-pg-btn-ink, var(--dv-pg-ink));
    font-family: inherit;
    font-size: var(--dv-pg-t-body);
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
}

/* 2026-09-12 (Anthony's call): the primary rank is GOLD, matching the sitewide
   `.dv-btn-primary` layer at the end of domovita.css - the same #F5B041 fill,
   navy ink and pill. Before this it was blue (#2F6FCC, white ink), which left
   the page-system pages with a different money button from every other page
   on the site. The 'gold at most once per viewport' rule in this file and in
   PAGE-DESIGN-SYSTEM.md is amended accordingly: it governs the gold MARK and
   eyebrow, not the primary button. Navy ink on gold: 8.86:1. */
.dv-pg-page .dv-pg-btn-primary {
    background: var(--dv-gold, #F5B041);
    border-color: var(--dv-gold, #F5B041);
    --dv-pg-btn-ink: var(--dv-navy-ink, #1F3A5F);
}
.dv-pg-page .dv-pg-btn-primary:hover,
.dv-pg-page .dv-pg-btn-primary:focus {
    background: var(--dv-gold-hover, #E0992E);
    border-color: var(--dv-gold-hover, #E0992E);
    --dv-pg-btn-ink: var(--dv-navy-ink, #1F3A5F);
}

.dv-pg-page .dv-pg-btn-secondary {
    background: transparent;
    border-color: var(--dv-pg-rule-strong);
    --dv-pg-btn-ink: var(--dv-pg-ink);
}
.dv-pg-page .dv-pg-btn-secondary:hover,
.dv-pg-page .dv-pg-btn-secondary:focus {
    border-color: var(--dv-pg-ink);
    --dv-pg-btn-ink: var(--dv-pg-ink);
}
/* On navy a transparent secondary needs a readable rule and label. */
.dv-pg-page .dv-pg-band-navy .dv-pg-btn-secondary,
.dv-pg-page .dv-pg-band-data .dv-pg-btn-secondary {
    border-color: rgba(255, 255, 255, 0.38);
    --dv-pg-btn-ink: var(--dv-on-navy, #FFFFFF);
}
.dv-pg-page .dv-pg-band-navy .dv-pg-btn-secondary:hover,
.dv-pg-page .dv-pg-band-navy .dv-pg-btn-secondary:focus,
.dv-pg-page .dv-pg-band-data .dv-pg-btn-secondary:hover,
.dv-pg-page .dv-pg-band-data .dv-pg-btn-secondary:focus {
    border-color: var(--dv-on-navy, #FFFFFF);
    background: rgba(255, 255, 255, 0.08);
}

/* Quiet / text button. Still a 48px target. */
.dv-pg-page .dv-pg-btn-quiet {
    background: transparent;
    border-color: transparent;
    padding-inline: 0.25rem;
    --dv-pg-btn-ink: var(--dv-pg-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}
.dv-pg-page .dv-pg-btn-quiet:hover,
.dv-pg-page .dv-pg-btn-quiet:focus {
    --dv-pg-btn-ink: var(--dv-pg-ink);
}
.dv-pg-page .dv-pg-band-navy .dv-pg-btn-quiet:hover,
.dv-pg-page .dv-pg-band-navy .dv-pg-btn-quiet:focus,
.dv-pg-page .dv-pg-band-data .dv-pg-btn-quiet:hover,
.dv-pg-page .dv-pg-band-data .dv-pg-btn-quiet:focus {
    --dv-pg-btn-ink: var(--dv-on-navy, #FFFFFF);
}

/* GOLD - at most ONE per viewport, and only on the thing that matters.
   Do not pair with .dv-pg-eyebrow-gold in the same screenful. */
.dv-pg-page .dv-pg-btn-gold {
    background: var(--dv-gold, #F5B041);
    border-color: var(--dv-gold, #F5B041);
    --dv-pg-btn-ink: var(--dv-gold-ink, #412402);
}
.dv-pg-page .dv-pg-btn-gold:hover,
.dv-pg-page .dv-pg-btn-gold:focus {
    background: #E9A32F;
    border-color: #E9A32F;
    --dv-pg-btn-ink: var(--dv-gold-ink, #412402);
}

.dv-pg-page .dv-pg-btn-block { display: flex; width: 100%; }

/* Anchor colour reclaim - see the note at the head of this section.
   `.dv-pg-page` is repeated purely as a specificity bump, taking this to
   (1,5,2) so it clears the sitewide (1,4,2) link rule outright rather than
   winning on source order, which an asset-registration reshuffle could
   silently flip. It declares nothing but the colour the variants already
   chose, so a button and a link styled as one stay identical. */
body.com-domovita #sp-component > .sp-column .dv-pg-page.dv-pg-page a.dv-pg-btn {
    color: var(--dv-pg-btn-ink, var(--dv-pg-ink));
}

.dv-pg-page .dv-pg-btn:focus-visible,
.dv-pg-page .dv-pg-input:focus-visible,
.dv-pg-page .dv-pg-check input:focus-visible {
    outline: 2px solid var(--dv-btn-primary, #2F6FCC);
    outline-offset: 2px;
}
.dv-pg-page .dv-pg-band-navy .dv-pg-btn:focus-visible,
.dv-pg-page .dv-pg-band-navy .dv-pg-input:focus-visible,
.dv-pg-page .dv-pg-band-data .dv-pg-btn:focus-visible,
.dv-pg-page .dv-pg-band-data .dv-pg-input:focus-visible {
    outline-color: var(--dv-on-navy, #FFFFFF);
}

/* ==========================================================================
   9. FORM PRIMITIVES
   ==========================================================================
   Presentation only. Field names, ids, honeypots (website_url / _ft) and CSRF
   inputs are untouched by anything in this file.
   ========================================================================== */

.dv-pg-page .dv-pg-form-grid {
    display: grid;
    gap: var(--dv-pg-gap-sm) var(--dv-pg-gap);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.dv-pg-page .dv-pg-field-wide { grid-column: 1 / -1; }

.dv-pg-page .dv-pg-field { display: block; margin-bottom: 1rem; }

.dv-pg-page .dv-pg-label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: var(--dv-pg-t-meta);
    font-weight: 500;
    line-height: 1.4;
    color: var(--dv-pg-ink);
}

.dv-pg-page .dv-pg-input {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: 0.7rem 0.85rem;
    font-family: inherit;
    font-size: var(--dv-pg-t-body);
    font-weight: 400;
    line-height: 1.5;
    color: var(--dv-ink, #1B1B1A);
    background: var(--dv-surface, #FFFFFF);
    border: 1px solid var(--dv-hairline-strong, rgba(0, 0, 0, 0.18));
    border-radius: var(--dv-radius, 8px);
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
}
.dv-pg-page textarea.dv-pg-input { min-height: 120px; resize: vertical; }
.dv-pg-page .dv-pg-input::placeholder { color: var(--dv-ink-3, #888780); }

.dv-pg-page .dv-pg-hint {
    display: block;
    margin-top: 0.3rem;
    font-size: var(--dv-pg-t-caption);
    line-height: 1.45;
    color: var(--dv-pg-ink-3);
}

/* The box stays 20px because that is the right visual weight next to 14px
   text - but a 20px box is a 20px target. The row is a <label>, so the whole
   row toggles the control: give the ROW the 44px minimum instead of inflating
   the box. `align-items: flex-start` is kept so the box still sits on the
   first line of a consent paragraph that wraps to three. */
.dv-pg-page .dv-pg-check {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    min-height: 44px;
    padding-block: 0.5rem;
    margin-bottom: 0.25rem;
    font-size: var(--dv-pg-t-meta);
    line-height: 1.5;
    color: var(--dv-pg-ink-2);
}
.dv-pg-page label.dv-pg-check { cursor: pointer; }
.dv-pg-page .dv-pg-check input[type="checkbox"],
.dv-pg-page .dv-pg-check input[type="radio"] {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 2px 0 0;
    cursor: pointer;
}

/* ==========================================================================
   10. UTILITIES
   ========================================================================== */

.dv-pg-page .dv-pg-centre  { text-align: center; }
.dv-pg-page .dv-pg-mt-0    { margin-top: 0; }
.dv-pg-page .dv-pg-mb-0    { margin-bottom: 0; }

/* Opt a block out of the Round 3 reading cap. For the genuine exceptions - a
   line that IS the full-bleed artefact, a single-line strip that must span a
   canvas. Not for ordinary prose: if a paragraph needs 120 characters a line to
   fit, the paragraph is the problem. Doubled class so it beats the primitives,
   which are all two-class rules. */
.dv-pg-page .dv-pg-measure-full.dv-pg-measure-full { max-width: none; }
/* Narrower still, for a caption that must sit under a small artefact. */
.dv-pg-page .dv-pg-measure-tight.dv-pg-measure-tight { max-width: 34ch; }
.dv-pg-page .dv-pg-rule-top    { border-top: 1px solid var(--dv-pg-rule); padding-top: var(--dv-pg-gap); }
.dv-pg-page .dv-pg-rule-bottom { border-bottom: 1px solid var(--dv-pg-rule); padding-bottom: var(--dv-pg-gap); }

.dv-pg-page .dv-pg-sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   11. ROUND 2 - SHAPE PRIMITIVES
   ==========================================================================
   Round 1 gave every band its own SURFACE. Four independent critics then said
   the same thing: alternating colour is not rhythm, because every band still
   opened with the identical molecule - uppercase eyebrow, heading, grey lede,
   rounded card - seven or eight times over. Measured: nine mobile scroll frames
   on /list-with-us produced frame-to-frame deltas of [119,125,136,21,13,12,
   119,71]; the small numbers are three consecutive screens where the page does
   not change shape at all. "One component and seven paint jobs."

   Everything below exists so a band can differ in SILHOUETTE - what it looks
   like as a 60px thumbnail with the text blurred out. None of it touches font
   weight: 400 and 500 remain the only two weights in the system, per
   DESIGN-DIRECTION.md. The extra axes are size, colour, measure, family
   (a mono register), air (a five-step band scale) and composition.

   Cost discipline is unchanged: no raster images, no web fonts, inline SVG and
   CSS only, every artefact in a box whose size is known before it paints.
   ========================================================================== */

/* --------------------------------------------------------------------------
   11.1 SECOND TYPOGRAPHIC REGISTER - mono + tabular figures
   --------------------------------------------------------------------------
   With weight locked at 400/500 and only one family, every line of text on the
   page had the same texture. A monospace register for numerals, step indices,
   check names, keys and units is the cheapest available contrast: it changes
   the colour of the text block without changing its size, weight or hue.
   `--dv-mono` is already declared on :root by domovita.css.

   House rule preserved: the eyebrow stays the ONLY uppercase element. Mono
   labels are sentence case with a hair of tracking, never caps.
   -------------------------------------------------------------------------- */

.dv-pg-page .dv-pg-mono {
    font-family: var(--dv-pg-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}

/* Tabular figures on a sans run - for a number that updates in place, or a
   column of prices that must align. No family change. */
.dv-pg-page .dv-pg-num { font-variant-numeric: tabular-nums; }

/* A quiet mono key: field label, check name, unit, "01 of 04", a domain. */
.dv-pg-page .dv-pg-key {
    display: block;
    font-family: var(--dv-pg-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--dv-pg-t-caption);
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0.015em;
    color: var(--dv-pg-ink-3);
    max-width: var(--dv-pg-prose-mono);
}
.dv-pg-page .dv-pg-key-ink { color: var(--dv-pg-ink-2); }

/* Inline mono chip - a domain, a header name, a status token. Not a button. */
.dv-pg-page .dv-pg-token {
    display: inline-block;
    padding: 0.1rem 0.45rem;
    border: 1px solid var(--dv-pg-rule);
    border-radius: var(--dv-radius-sm, 4px);
    font-family: var(--dv-pg-mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--dv-pg-ink-2);
    word-break: break-word;
}

/* --------------------------------------------------------------------------
   11.2 ARTEFACT FRAME - a box whose size is known before its contents exist
   --------------------------------------------------------------------------
   `.dv-pg-figure` (section 7) is a FRAMED media box - it paints a tile, a
   hairline and a radius. `.dv-pg-art` is the bare structural wrapper for an
   inline SVG or CSS-composed artefact: no chrome unless you ask for it, and a
   hard guarantee that the box cannot move.

   Why `contain: size layout paint` and not just `aspect-ratio`:
     - `size` means the contents CANNOT contribute to the box, so a diagram
       that renders late, wrong, or not at all still occupies exactly the same
       rectangle. That is the CLS guarantee, and it is why
       `contain-intrinsic-size` has any effect here at all (it is inert without
       `contain: size` or `content-visibility`).
     - `paint` clips overflow, so an SVG with a stray coordinate cannot push
       the document wider and produce a horizontal scrollbar.
     - `layout` isolates it from the surrounding flow.
   The trade: the box will never grow to fit text, so do not put prose in one.

   `-desk` is the mobile budget lever. Below 1024px the element is
   `display:none`: never laid out, never painted, never a candidate for LCP.
   Put the artefact your desktop composition needs there and mobile pays
   nothing for it beyond the bytes of markup.
   -------------------------------------------------------------------------- */

.dv-pg-page .dv-pg-art {
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    aspect-ratio: var(--dv-pg-art-ratio, 4 / 3);
    overflow: hidden;
    contain: size layout paint;
    contain-intrinsic-size: auto 640px auto 480px;
}
.dv-pg-page .dv-pg-art > svg,
.dv-pg-page .dv-pg-art > .dv-pg-art-body {
    display: block;
    width: 100%;
    height: 100%;
}
/* Container for a CSS-composed artefact (absolutely-positioned parts). */
.dv-pg-page .dv-pg-art-body { position: relative; }

.dv-pg-page .dv-pg-art-wide   { --dv-pg-art-ratio: 16 / 9; }
.dv-pg-page .dv-pg-art-square { --dv-pg-art-ratio: 1 / 1; }
.dv-pg-page .dv-pg-art-tall   { --dv-pg-art-ratio: 3 / 4; }
.dv-pg-page .dv-pg-art-strip  { --dv-pg-art-ratio: 24 / 7; }

/* Optional chrome, for when the artefact should read as a surface. */
.dv-pg-page .dv-pg-art-framed {
    background: var(--dv-pg-tile);
    border: 1px solid var(--dv-pg-rule);
    border-radius: var(--dv-radius-card, 12px);
}

/* Desktop-only artefact. See the note above - this is the LCP guard. */
.dv-pg-page .dv-pg-art-desk { display: none; }
@media (min-width: 1024px) {
    .dv-pg-page .dv-pg-art-desk { display: block; }
}

/* Mono caption under an artefact. */
.dv-pg-page .dv-pg-figcap {
    margin: 0.7rem 0 0;
    font-family: var(--dv-pg-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--dv-pg-t-caption);
    line-height: 1.5;
    letter-spacing: 0.01em;
    color: var(--dv-pg-ink-3);
    max-width: var(--dv-pg-prose-mono);
}

/* --------------------------------------------------------------------------
   11.3 STEPPER RAIL - numerals hanging outside the text column
   --------------------------------------------------------------------------
   `.dv-pg-steps` (section 6) is a stack of circled numbers: at thumbnail size
   it is indistinguishable from a card list. The rail hangs two-digit mono
   numerals in their own left gutter against a continuous vertical hairline,
   with a node on the rule at each step. Blurred out it reads as a vertical
   line with beads - a silhouette nothing else on the page produces.

   `::before` is the numeral and `::after` is the rule (not the other way
   round) so the numeral can be re-flowed independently if a page ever needs a
   stacked variant; a `::after` cannot move above its element's content.

   At 390px the gutter narrows to 40px and the text column keeps ~288px, which
   is wider than the same copy gets inside a card. Nothing is hidden, nothing
   overflows, and the rail silhouette survives - which is the point of it.

   Markup is an `<ol>`. `list-style: none` drops list semantics in Safari, so
   put `role="list"` on the `<ol>`; the CSS numerals are the visible numbering.
   -------------------------------------------------------------------------- */

.dv-pg-page .dv-pg-rail {
    --dv-pg-rail-w:   clamp(2.5rem, 1.60rem + 3.2vw, 4rem);      /* 40 -> 64 */
    --dv-pg-rail-gap: clamp(0.85rem, 0.60rem + 1vw, 1.5rem);     /* 14 -> 24 */
    --dv-pg-rail-y:   clamp(1.5rem, 1.05rem + 1.9vw, 2.75rem);   /* 24 -> 44 */
    counter-reset: dv-pg-rail;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dv-pg-page .dv-pg-rail-step {
    counter-increment: dv-pg-rail;
    position: relative;
    padding-left: calc(var(--dv-pg-rail-w) + var(--dv-pg-rail-gap));
    padding-bottom: var(--dv-pg-rail-y);
}
.dv-pg-page .dv-pg-rail-step:last-child { padding-bottom: 0; }
.dv-pg-page .dv-pg-rail-step > :last-child { margin-bottom: 0; }

/* The numeral. decimal-leading-zero gives a constant two-glyph block, so the
   column stays optically straight from 01 to 09 without a hard-coded width. */
.dv-pg-page .dv-pg-rail-step::before {
    content: counter(dv-pg-rail, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 0;
    width: var(--dv-pg-rail-w);
    padding-right: 0.6rem;
    text-align: right;
    font-family: var(--dv-pg-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--dv-pg-rail-num, var(--dv-pg-t-h3));
    font-weight: 400;
    line-height: 1.35;         /* matches .dv-pg-h3, so the numeral and the
                                  step title share a baseline with no magic
                                  offset */
    letter-spacing: -0.01em;
    color: var(--dv-pg-ink-3);
}

/* The connector rule, with the node drawn as a second background layer. Two
   gradients, no extra element, no request. */
.dv-pg-page .dv-pg-rail-step::after {
    content: "";
    position: absolute;
    left: var(--dv-pg-rail-w);
    top: 0;
    bottom: 0;
    width: 9px;
    margin-left: -4px;
    background-image:
        radial-gradient(circle at 4px 0.8em, var(--dv-pg-accent) 0 3px, rgba(0, 0, 0, 0) 3.5px),
        linear-gradient(var(--dv-pg-rule-strong), var(--dv-pg-rule-strong));
    background-size: 9px 100%, 1px 100%;
    background-position: 0 0, 4px 0;
    background-repeat: no-repeat, no-repeat;
}
/* Terminate the rule at the last node rather than dangling past the list. */
.dv-pg-page .dv-pg-rail-step:last-child::after {
    bottom: auto;
    height: calc(0.8em + 4px);
}

/* Optional mono kicker inside a step ("2-3 working days", "no reply needed"). */
.dv-pg-page .dv-pg-rail-step .dv-pg-key { margin-top: 0.35rem; }

/* --------------------------------------------------------------------------
   11.4 DATA SURFACE - a diagram that IS the band, not a card on a tint
   --------------------------------------------------------------------------
   `.dv-pg-band-data` is a dark band with a faint blueprint grid. Pair it with
   `.dv-pg-canvas`, which cancels the band's own inline padding and runs the
   artefact from viewport edge to viewport edge inside a pair of hairlines.
   That edge-to-edge treatment is the difference between a diagram reading as
   product and reading as decoration.

   `-data` re-points every ink token exactly like `-navy` (see section 3), so
   buttons, pills, lists and focus rings all work inside it unchanged.

   The bleed maths: `margin-inline: calc(50% - 50vw)` resolves the 50% against
   the canvas's own containing block. That works from ANY horizontally-centred
   ancestor - `.dv-pg-inner` at 1120px, or the band's content box - so the
   canvas lands on the viewport edges either way. Requirement: the ancestor
   chain must be centred (all the band primitives are). Same 100vw caveat as
   the bands: the site body already carries overflow-x: hidden.
   -------------------------------------------------------------------------- */

.dv-pg-page .dv-pg-band-data {
    /* Blueprint grid + the shared navy top-light. Three gradients, zero bytes.
       Declared after section 3 so it replaces that rule's background-image. */
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, rgba(0, 0, 0, 0) 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, rgba(0, 0, 0, 0) 1px),
        radial-gradient(120% 100% at 50% 0%, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 62%);
    background-size: 56px 56px, 56px 56px, auto auto;
    background-position: center top, center top, center top;
}

.dv-pg-page .dv-pg-canvas {
    position: relative;
    margin-inline: calc(50% - 50vw);
    margin-block: clamp(1.5rem, 1.10rem + 1.6vw, 2.75rem) 0;
    padding-block: clamp(1.25rem, 0.95rem + 1.3vw, 2.25rem);
    padding-inline: max(var(--dv-pg-gutter), calc(50vw - 50%));
    border-top: 1px solid var(--dv-pg-rule);
    border-bottom: 1px solid var(--dv-pg-rule);
    background: rgba(8, 20, 38, 0.32);
}
.dv-pg-page .dv-pg-canvas > :last-child { margin-bottom: 0; }

/* True edge-to-edge: the artefact touches the viewport. Do not put text in a
   `-bleed` canvas - it would run under the screen edge. */
.dv-pg-page .dv-pg-canvas-bleed { padding-inline: 0; }

/* A canvas that ends the band. Pair with `.dv-pg-band-flush-bottom`. */
.dv-pg-page .dv-pg-canvas-end { border-bottom: 0; }

/* Mono caption strip under a canvas. Keep it OUTSIDE a `-bleed` canvas. */
.dv-pg-page .dv-pg-canvas-cap {
    margin: 0.85rem 0 0;
    font-family: var(--dv-pg-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--dv-pg-t-caption);
    line-height: 1.5;
    letter-spacing: 0.01em;
    color: var(--dv-pg-ink-3);
    /* This one was the worst offender on the whole family: 1106px / ~155
       characters of 13px mono under the valuationpanel data surface. */
    max-width: var(--dv-pg-prose-mono);
}

/* Generic full-bleed child - same maths, no styling. For a row of anything
   that should run the full width inside a band. */
.dv-pg-page .dv-pg-bleed { margin-inline: calc(50% - 50vw); }

/* --------------------------------------------------------------------------
   11.5 STATEMENT ROWS - left key, hairline, right statement
   --------------------------------------------------------------------------
   `.dv-pg-rows` already existed and was close: hairline-separated rows with a
   label and a value. It was built as a spec table though - 14px label, 16px
   medium value, space-between - so a page reaching for "an alternative to
   another card grid" got something that read as data, not as argument.

   `-stmt` keeps the same markup and class names and re-composes them: the key
   drops to a quiet mono caption in a fixed left column, the statement rises to
   deck size at normal weight and takes the rest of the row. Below 720px it
   stacks key-over-statement, which is the only sane form at 390px.

   The base `.dv-pg-rows` is unchanged apart from a `--dv-pg-row-y` density
   hook and tabular figures on the value, so the ~35 existing rows across
   agentregister / valuationpanel / listwithus are untouched.
   -------------------------------------------------------------------------- */

.dv-pg-page .dv-pg-rows-stmt { border-top-color: var(--dv-pg-rule-strong); }

.dv-pg-page .dv-pg-rows-stmt .dv-pg-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.3rem;
    align-items: baseline;
    justify-content: initial;
    padding-block: clamp(1rem, 0.78rem + 0.9vw, 1.5rem);
}
@media (min-width: 720px) {
    .dv-pg-page .dv-pg-rows-stmt .dv-pg-row {
        grid-template-columns: var(--dv-pg-row-key, 15rem) minmax(0, 1fr);
        gap: var(--dv-pg-gap);
    }
}
.dv-pg-page .dv-pg-rows-stmt .dv-pg-row-label {
    font-family: var(--dv-pg-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--dv-pg-t-caption);
    line-height: 1.6;
    letter-spacing: 0.015em;
    color: var(--dv-pg-ink-3);
}
.dv-pg-page .dv-pg-rows-stmt .dv-pg-row-value {
    font-size: var(--dv-pg-t-sub);
    font-weight: 400;
    line-height: 1.5;
    color: var(--dv-pg-ink);
    max-width: var(--dv-pg-prose-lede);
}
.dv-pg-page .dv-pg-rows-stmt .dv-pg-row-value > :last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   11.6 CLUSTER CARD - a glyph, a title and a short list
   --------------------------------------------------------------------------
   For turning a long flat list (11 compliance checks, 9 things we never do)
   into 3-4 grouped units. Deliberately lighter than `.dv-pg-card`: a 32px
   glyph on the same line as the title rather than a 44px icon stacked above
   it, and a dash-marked list rather than ticks - so a band of clusters does
   not read as the same object as a band of cards.
   -------------------------------------------------------------------------- */

.dv-pg-page .dv-pg-cluster {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding: var(--dv-pg-pad-card);
    background: var(--dv-pg-tile);
    border: 1px solid var(--dv-pg-rule);
    border-radius: var(--dv-radius-card, 12px);
    color: var(--dv-pg-ink);
}
.dv-pg-page .dv-pg-cluster > :last-child { margin-bottom: 0; }

.dv-pg-page .dv-pg-cluster-head {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
}

.dv-pg-page .dv-pg-cluster-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border: 1px solid var(--dv-pg-rule-strong);
    border-radius: var(--dv-radius-sm, 4px);
    color: var(--dv-pg-accent);
}
.dv-pg-page .dv-pg-cluster-glyph > svg { display: block; width: 17px; height: 17px; }

.dv-pg-page .dv-pg-cluster-title {
    margin: 0;
    min-width: 0;
    font-size: var(--dv-pg-t-h3);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.006em;
    color: var(--dv-pg-ink);
}

.dv-pg-page .dv-pg-cluster-list {
    display: grid;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.dv-pg-page .dv-pg-cluster-list > li {
    position: relative;
    padding-left: 0.95rem;
    font-size: var(--dv-pg-t-meta);
    line-height: 1.5;
    color: var(--dv-pg-ink-2);
}
/* An en-rule marker, not a tick - the ticked list already means "included". */
.dv-pg-page .dv-pg-cluster-list > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.68em;
    width: 7px;
    height: 1px;
    background: var(--dv-pg-rule-strong);
}

/* Bare variant - a rule down the left instead of a box. Three of these in a
   row on a light band read as a different object from three cards. */
.dv-pg-page .dv-pg-cluster-bare {
    padding: 0.15rem 0 0.15rem var(--dv-pg-gap);
    background: transparent;
    border: 0;
    border-left: 1px solid var(--dv-pg-rule-strong);
    border-radius: 0;
}

/* --------------------------------------------------------------------------
   11.7 OPENER VARIANTS - the eyebrow becomes optional
   --------------------------------------------------------------------------
   The eyebrow is the single loudest cause of the "one component, seven paint
   jobs" reading: it is uppercase, tracked, coloured, and it sits above every
   heading on the page. Keep it where it genuinely categorises the band. Use
   one of these everywhere else - a page should not carry more than two or
   three eyebrows in total.
   -------------------------------------------------------------------------- */

/* A short accent rule instead of an eyebrow - the same "something above the
   heading" beat, with no second voice and no uppercase. */
.dv-pg-page .dv-pg-mark {
    display: block;
    width: 2.75rem;
    height: 2px;
    margin: 0 0 1.15rem;
    border-radius: 1px;
    background: var(--dv-pg-accent);
}
/* Spends the page's one gold element - do not also use a gold button or a
   gold eyebrow in the same viewport. */
.dv-pg-page .dv-pg-mark-gold { background: var(--dv-gold, #F5B041); }
.dv-pg-page .dv-pg-head-centre .dv-pg-mark { margin-inline: auto; }

/* A mono line UNDER the heading. Opposite shape to an eyebrow: the eye lands
   on the heading first and picks up the qualifier second. */
.dv-pg-page .dv-pg-kicker {
    margin: -0.25rem 0 1.25rem;
    font-family: var(--dv-pg-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--dv-pg-t-caption);
    line-height: 1.6;
    letter-spacing: 0.015em;
    color: var(--dv-pg-ink-3);
    max-width: var(--dv-pg-prose-mono);
}

/* Artefact leads, heading sits under it. Put the `.dv-pg-art` first and the
   `.dv-pg-head` second inside this wrapper. */
.dv-pg-page .dv-pg-head-lead {
    display: flex;
    flex-direction: column;
    gap: clamp(1.25rem, 0.95rem + 1.2vw, 2rem);
    margin-bottom: var(--dv-pg-gap);
}
.dv-pg-page .dv-pg-head-lead > .dv-pg-head { margin-bottom: 0; }

/* Head fills the measure instead of stopping at 46em. The DECK inside it still
   gets the reading cap - a full-width head is a composition decision about the
   heading, not a licence to run prose to 1120px. */
.dv-pg-page .dv-pg-head-full { max-width: none; }
.dv-pg-page .dv-pg-head-full .dv-pg-sub { max-width: var(--dv-pg-prose-lede); }

/* Heading set in a deliberately narrow column, so it breaks into a tall block
   and reads as a statement. Only bites where the viewport is wider than the
   column, i.e. desktop - mobile is unaffected. */
.dv-pg-page .dv-pg-head-short .dv-pg-display,
.dv-pg-page .dv-pg-head-short .dv-pg-title { max-width: var(--dv-pg-head-w, 16ch); }

/* Hairline above a band - for two bands of the same tone with different air. */
.dv-pg-page .dv-pg-band-rule-top { border-top: 1px solid var(--dv-pg-rule); }

/* ==========================================================================
   12. MOTION - opt IN only
   ==========================================================================
   Everything above this point is a static, fully-readable page. Motion exists
   only inside `prefers-reduced-motion: no-preference`, so the reduced-motion
   render is the default rather than an override, and it can never strand
   content off-screen or at low opacity.

   The reveal is additionally gated on `.dv-pg-armed`, which only dv-pages.js
   adds - and it only arms elements that are BELOW the fold at run time. So:
     - JS disabled          -> nothing armed -> everything visible.
     - Reduced motion       -> script exits early AND the CSS is inside the
                               no-preference query -> everything visible.
     - Above-the-fold content is never armed, so the LCP element never flashes.

   Only `opacity` and `transform` animate. Nothing here can shift layout.
   ========================================================================== */

.dv-pg-reveal { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {

    .dv-pg-page .dv-pg-reveal.dv-pg-armed {
        opacity: 0;
        transform: translateY(12px);
        transition: opacity 0.5s ease, transform 0.5s ease;
    }
    .dv-pg-page .dv-pg-reveal.dv-pg-armed.is-in {
        opacity: 1;
        transform: none;
    }

    /* Stagger for grids of cards. */
    .dv-pg-page .dv-pg-reveal-d1.dv-pg-armed { transition-delay: 0.08s; }
    .dv-pg-page .dv-pg-reveal-d2.dv-pg-armed { transition-delay: 0.16s; }
    .dv-pg-page .dv-pg-reveal-d3.dv-pg-armed { transition-delay: 0.24s; }

    /* Interaction feedback - colour only, never geometry. */
    .dv-pg-page .dv-pg-btn {
        transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
    }
    .dv-pg-page .dv-pg-card,
    .dv-pg-page .dv-pg-input {
        transition: border-color 0.18s ease;
    }
}

/* Belt and braces: if any downstream page adds its own transition or
   animation to a landing primitive, kill it under reduce. */
@media (prefers-reduced-motion: reduce) {
    .dv-pg-page *,
    .dv-pg-page *::before,
    .dv-pg-page *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .dv-pg-page .dv-pg-reveal {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ==========================================================================
   13. SKIN - 1.5.0 (2026-09-11) - the system on pages that keep their layout
   ==========================================================================
   Family B of the 2026-09-11 rollout: forms, calculators, directories and
   tools that are NOT prose-shaped. They keep their own layout and get the
   type scale, spacing, hairlines, button ranks and form controls from here,
   by ELEMENT selector under one scope. This is deliberately not a per-page
   prefix layer - the 67 card classes and 33 card paddings measured on
   2026-08-22 ARE the per-page prefix layer, and this is its replacement.

   Rules:
     - scoped under `.dv-pg-page.dv-pg-skin` only; never leaks
     - element selectors + the legacy `.dv-btn*` / `.btn-primary` classes
       that the page templates already carry, so no markup has to change
     - never sets font-weight above 500
     - a page-local rule with higher specificity still wins - trim it there

   Spec: docs/superpowers/specs/2026-09-11-page-system-rollout-design.md
   ========================================================================== */

.dv-pg-page.dv-pg-skin h2 {
    font-family: var(--dv-pg-font);
    font-size: var(--dv-pg-t-title);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--dv-pg-ink);
    max-width: var(--dv-pg-measure);
    margin: 0 0 var(--dv-pg-gap-sm);
}
.dv-pg-page.dv-pg-skin h3 {
    font-family: var(--dv-pg-font);
    font-size: var(--dv-pg-t-h3);
    font-weight: 500;
    line-height: 1.3;
    color: var(--dv-pg-ink);
    margin: 0 0 0.5rem;
}
.dv-pg-page.dv-pg-skin h4,
.dv-pg-page.dv-pg-skin h5 {
    font-family: var(--dv-pg-font);
    font-size: var(--dv-pg-t-body);
    font-weight: 500;
    color: var(--dv-pg-ink);
    margin: 0 0 0.35rem;
}
.dv-pg-page.dv-pg-skin p,
.dv-pg-page.dv-pg-skin li {
    font-size: var(--dv-pg-t-body);
    line-height: 1.65;
    color: var(--dv-pg-ink-2);
}
.dv-pg-page.dv-pg-skin p {
    max-width: var(--dv-pg-measure);
    margin: 0 0 var(--dv-pg-gap-sm);
}
.dv-pg-page.dv-pg-skin strong,
.dv-pg-page.dv-pg-skin b {
    font-weight: 500;
    color: var(--dv-pg-ink);
}
.dv-pg-page.dv-pg-skin small,
.dv-pg-page.dv-pg-skin .small,
.dv-pg-page.dv-pg-skin figcaption {
    font-size: var(--dv-pg-t-caption);
    color: var(--dv-pg-ink-3);
}
/* !important because Helix's Custom CSS colours links from ID selectors
   (`#sp-main-body a:not(.btn)` paints them the dark template's pale blue -
   1.9:1 on a light band) and nothing below an ID can win otherwise. Inside a
   navy band the accent is re-pointed to the on-navy value. Painted cards that
   set their own link colour opt out with dv-pg-native. */
.dv-pg-page.dv-pg-skin a:not([class*="btn"]):not(.dv-pg-native):not(.dv-pg-native *) {
    color: var(--dv-pg-accent) !important;
    text-decoration: underline;
    text-underline-offset: 0.15em;
    text-decoration-thickness: 1px;
}
.dv-pg-page.dv-pg-skin .dv-pg-band-navy a:not([class*="btn"]):not(.dv-pg-native):not(.dv-pg-native *) {
    color: var(--dv-on-navy, #FFFFFF) !important;
}
.dv-pg-page.dv-pg-skin hr {
    border: 0;
    border-top: 1px solid var(--dv-pg-rule);
    margin: var(--dv-pg-gap) 0;
}

/* --- Inner page wrappers that domovita.css paints as a white card -------- */
/* domovita.css section 1 gives .dv-feedback-page, .dv-ysdw-page, .dv-tools-page
   and .dv-container the same 1200px white card as .domovita-container. The
   shell (section 2) strips that from the OUTER container only; when one of
   these sits inside a band it would paint a second card. Neutralised here so
   the band is the surface and the wrapper is just a measure. */
.dv-pg-page.dv-pg-skin .dv-feedback-page,
.dv-pg-page.dv-pg-skin .dv-ysdw-page,
.dv-pg-page.dv-pg-skin .dv-tools-page,
.dv-pg-page.dv-pg-skin .dv-container {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    margin: 0 auto;
}

/* --- Sections and cards: hairlines, tokenised radius, no shadows --------- */
.dv-pg-page.dv-pg-skin section,
.dv-pg-page.dv-pg-skin article,
.dv-pg-page.dv-pg-skin aside,
.dv-pg-page.dv-pg-skin fieldset {
    box-shadow: none;
}
.dv-pg-page.dv-pg-skin [class*="card"],
.dv-pg-page.dv-pg-skin [class*="panel"],
.dv-pg-page.dv-pg-skin [class*="-box"],
.dv-pg-page.dv-pg-skin fieldset {
    box-shadow: none;
    border-color: var(--dv-pg-rule);
    border-radius: 12px;
}

/* --- Buttons: collapse every legacy rank onto the system's two ------------ */
.dv-pg-page.dv-pg-skin .dv-btn:not(.dv-pg-native):not(.dv-pg-native *),
.dv-pg-page.dv-pg-skin .btn:not(.dv-pg-native):not(.dv-pg-native *),
.dv-pg-page.dv-pg-skin button[type="submit"]:not(.dv-pg-native):not(.dv-pg-native *),
.dv-pg-page.dv-pg-skin input[type="submit"]:not(.dv-pg-native):not(.dv-pg-native *) {
    font-family: var(--dv-pg-font);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.2;
    min-height: 48px;
    padding: 0.75rem 1.5rem;
    border-radius: 999px;
    border: 1px solid transparent;
    box-shadow: none;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.dv-pg-page.dv-pg-skin .dv-btn-primary:not(.dv-pg-native):not(.dv-pg-native *),
.dv-pg-page.dv-pg-skin .btn-primary:not(.dv-pg-native):not(.dv-pg-native *),
.dv-pg-page.dv-pg-skin button[type="submit"]:not(.dv-pg-native):not(.dv-pg-native *),
.dv-pg-page.dv-pg-skin input[type="submit"]:not(.dv-pg-native):not(.dv-pg-native *) {
    background: var(--dv-gold, #F5B041);
    color: var(--dv-navy-ink, #1F3A5F);
    border-color: var(--dv-gold, #F5B041);
}
.dv-pg-page.dv-pg-skin .dv-btn-primary:hover,
.dv-pg-page.dv-pg-skin .btn-primary:hover,
.dv-pg-page.dv-pg-skin button[type="submit"]:hover {
    background: var(--dv-gold-hover, #E0992E);
    border-color: var(--dv-gold-hover, #E0992E);
    color: var(--dv-navy-ink, #1F3A5F);
}
.dv-pg-page.dv-pg-skin .dv-btn-secondary,
.dv-pg-page.dv-pg-skin .dv-btn-outline,
.dv-pg-page.dv-pg-skin .btn-secondary,
.dv-pg-page.dv-pg-skin .btn-outline-primary,
.dv-pg-page.dv-pg-skin button:not([type="submit"]):not([class*="close"]):not(.dv-pg-native):not(.dv-pg-native *) {
    background: transparent;
    color: var(--dv-pg-ink);
    border-color: var(--dv-pg-rule-strong);
}
.dv-pg-page.dv-pg-skin .dv-btn-secondary:hover,
.dv-pg-page.dv-pg-skin .dv-btn-outline:hover,
.dv-pg-page.dv-pg-skin .btn-secondary:hover {
    border-color: var(--dv-pg-ink);
    color: var(--dv-pg-ink);
}
.dv-pg-page.dv-pg-skin .dv-btn-link,
.dv-pg-page.dv-pg-skin .btn-link {
    background: transparent;
    border-color: transparent;
    color: var(--dv-pg-accent);
    padding-inline: 0.5rem;
}
.dv-pg-page.dv-pg-skin .dv-btn:focus-visible,
.dv-pg-page.dv-pg-skin .btn:focus-visible,
.dv-pg-page.dv-pg-skin button:focus-visible {
    outline: 2px solid var(--dv-pg-accent);
    outline-offset: 2px;
}

/* --- Form controls -------------------------------------------------------- */
.dv-pg-page.dv-pg-skin label {
    font-size: var(--dv-pg-t-meta);
    font-weight: 500;
    color: var(--dv-pg-ink);
}
/* `dv-pg-native` is the opt-out: a control that already has its own considered
   styling (a pill search box, a calculator slider row) keeps it - on the control
   itself, or on any ancestor (a whole calculator widget). Needed because the
   :not() chain below out-specifies any page-local rule. */
.dv-pg-page.dv-pg-skin input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="range"]):not([type="hidden"]):not(.dv-pg-native):not(.dv-pg-native *),
.dv-pg-page.dv-pg-skin select:not(.dv-pg-native):not(.dv-pg-native *),
.dv-pg-page.dv-pg-skin textarea:not(.dv-pg-native):not(.dv-pg-native *) {
    font-family: var(--dv-pg-font);
    font-size: 1rem;
    color: var(--dv-pg-ink);
    background: #fff;
    border: 1px solid var(--dv-pg-rule-strong);
    border-radius: 10px;
    min-height: 48px;
    padding: 0.6rem 0.9rem;
    box-shadow: none;
    width: 100%;
    max-width: 100%;
}
.dv-pg-page.dv-pg-skin textarea {
    min-height: 120px;
}
.dv-pg-page.dv-pg-skin input:focus-visible,
.dv-pg-page.dv-pg-skin select:focus-visible,
.dv-pg-page.dv-pg-skin textarea:focus-visible {
    outline: 2px solid var(--dv-pg-accent);
    outline-offset: 1px;
    border-color: var(--dv-pg-accent);
}
.dv-pg-page.dv-pg-skin input[type="checkbox"],
.dv-pg-page.dv-pg-skin input[type="radio"] {
    accent-color: var(--dv-pg-accent);
    width: 1.1rem;
    height: 1.1rem;
}

/* --- Tables: hairline rows, tabular figures ------------------------------- */
.dv-pg-page.dv-pg-skin table,
.dv-pg-page .dv-pg-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--dv-pg-t-meta);
    font-variant-numeric: tabular-nums;
    border: 0;
    box-shadow: none;
}
.dv-pg-page.dv-pg-skin th,
.dv-pg-page .dv-pg-table th {
    font-family: var(--dv-pg-mono);
    font-size: var(--dv-pg-t-caption);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--dv-pg-ink-3);
    text-align: left;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--dv-pg-rule-strong);
    background: transparent;
}
.dv-pg-page.dv-pg-skin td,
.dv-pg-page .dv-pg-table td {
    padding: 0.7rem 0.75rem;
    border-bottom: 1px solid var(--dv-pg-rule);
    color: var(--dv-pg-ink-2);
    vertical-align: top;
    background: transparent;
}
.dv-pg-page.dv-pg-skin tbody tr:last-child td,
.dv-pg-page .dv-pg-table tbody tr:last-child td {
    border-bottom: 0;
}

/* --- FAQ / disclosure ----------------------------------------------------- */
/* FigureNoteHelper's methodology <details class="dv-fmethod"> carries its own
   chevron and hairlines (figurenote.css); it is excluded so the two do not stack. */
/* The close glyph is U+2212 MINUS SIGN via a CSS escape - a glyph in a
   ::after, never prose, and never a long dash. */
.dv-pg-page .dv-pg-faq,
.dv-pg-page.dv-pg-skin details:not(.dv-fmethod) {
    border-top: 1px solid var(--dv-pg-rule);
    padding: 0.9rem 0;
    margin: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}
.dv-pg-page .dv-pg-faq:last-of-type,
.dv-pg-page.dv-pg-skin details:not(.dv-fmethod):last-of-type {
    border-bottom: 1px solid var(--dv-pg-rule);
}
.dv-pg-page .dv-pg-faq > summary,
.dv-pg-page.dv-pg-skin details:not(.dv-fmethod) > summary {
    font-size: var(--dv-pg-t-h3);
    font-weight: 500;
    color: var(--dv-pg-ink);
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: baseline;
}
.dv-pg-page .dv-pg-faq > summary::-webkit-details-marker,
.dv-pg-page.dv-pg-skin details:not(.dv-fmethod) > summary::-webkit-details-marker {
    display: none;
}
.dv-pg-page .dv-pg-faq > summary::after,
.dv-pg-page.dv-pg-skin details:not(.dv-fmethod) > summary::after {
    content: "+";
    font-family: var(--dv-pg-mono);
    color: var(--dv-pg-ink-3);
    flex: 0 0 auto;
}
.dv-pg-page .dv-pg-faq[open] > summary::after,
.dv-pg-page.dv-pg-skin details:not(.dv-fmethod)[open] > summary::after {
    content: "\2212";
}
.dv-pg-page .dv-pg-faq > :not(summary),
.dv-pg-page.dv-pg-skin details:not(.dv-fmethod) > :not(summary) {
    margin-top: 0.6rem;
}

/* --- Centred actions ------------------------------------------------------ */
/* A close band that centres its text should centre its buttons too; listwithus
   solved this with a page-local class, which is the pattern the system forbids.
   Shared here instead (1.5.0). */
.dv-pg-page .dv-pg-centre .dv-pg-actions {
    justify-content: center;
}

/* --- Type classes outrank the element skin (1.6.0) ------------------------
   Latent since 1.5.0, first hit by the articles: `.dv-pg-page.dv-pg-skin h2`
   is 0-2-1 and `.dv-pg-page .dv-pg-display` is 0-2-0, so an h2 that carries
   the display class rendered at title size - and a `p.dv-pg-sub` at body
   size. No Family B page combined a type class with a skinned element (they
   use h1 for the display line, which the skin never touches), which is why
   the capture never showed it. The article title is an h2 on every
   category-routed guide (the menu's page heading is the h1), so it matters
   here. These mirror the section 4 primitives at 0-3-1. */
.dv-pg-page.dv-pg-skin :is(h1, h2, h3, h4).dv-pg-display {
    font-size: var(--dv-pg-t-display);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.022em;
    max-width: none;
    margin: 0 0 1rem;
    text-wrap: balance;
}
.dv-pg-page.dv-pg-skin :is(h1, h2, h3, h4).dv-pg-title-lg {
    font-size: var(--dv-pg-t-title-lg);
    font-weight: 600;
    line-height: 1.14;
    letter-spacing: -0.018em;
    max-width: none;
    margin: 0 0 0.85rem;
}
.dv-pg-page.dv-pg-skin :is(h1, h2, h3, h4).dv-pg-title {
    font-size: var(--dv-pg-t-title);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.014em;
    margin: 0 0 0.75rem;
}
.dv-pg-page.dv-pg-skin :is(h2, h3, h4, h5).dv-pg-h3 {
    font-size: var(--dv-pg-t-h3);
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: -0.006em;
    margin: 0 0 0.5rem;
}
.dv-pg-page.dv-pg-skin :is(h1, h2, h3, h4, h5).dv-pg-eyebrow {
    font-size: var(--dv-pg-t-eyebrow);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--dv-pg-accent);
    max-width: none;
    margin: 0 0 0.75rem;
}
.dv-pg-page.dv-pg-skin p.dv-pg-sub {
    font-size: var(--dv-pg-t-sub);
    line-height: 1.55;
    max-width: var(--dv-pg-prose-lede);
    margin: 0 0 1.5rem;
}
.dv-pg-page.dv-pg-skin :is(p, div, span).dv-pg-note {
    font-size: var(--dv-pg-t-caption);
    line-height: 1.5;
    color: var(--dv-pg-ink-3);
    max-width: var(--dv-pg-prose);
    margin: 0.75rem 0 0;
}
.dv-pg-page.dv-pg-skin :is(p, div, span).dv-pg-caption {
    font-size: var(--dv-pg-t-caption);
    line-height: 1.45;
    color: var(--dv-pg-ink-3);
    max-width: var(--dv-pg-prose);
}
.dv-pg-page.dv-pg-skin p.dv-pg-meta {
    font-size: var(--dv-pg-t-meta);
    line-height: 1.5;
    max-width: var(--dv-pg-prose);
}

/* ==========================================================================
   14. PROSE FLOW - 1.6.0 (2026-09-15) - `dv-pg-prose`
   ==========================================================================
   Long-form editorial prose: the 87 Joomla articles (guides, EA articles,
   research, the legal documents). The body is DB HTML written in the editor,
   so nothing in it carries a dv-pg-* class and nothing can be re-composed
   into bands - this is the skin's element-by-element idea applied to a
   FLOW, with the one thing the skin deliberately lacks: vertical rhythm
   between headings and the copy around them.

   Put `dv-pg-prose` on the body wrapper, inside `dv-pg-inner-narrow`, on a
   page that already carries `dv-pg-page dv-pg-skin`. Ties with section 13
   on specificity (0-2-1) are won here by document order, on purpose.

   Measure: the column is `--dv-pg-measure-n` (680px) so headings, tables and
   figures have room; running text is capped at `--dv-pg-prose` (54ch, ~68
   characters at this size - see the Round 3 note in section 1) so a line
   stays inside the 45-75 character band. Body size is one step up from the
   landing pages (17px) because a reader is here for 5-15 minutes, not 30
   seconds. Weight never exceeds 500.
   ========================================================================== */

.dv-pg-page .dv-pg-prose {
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--dv-pg-ink-2);
}
.dv-pg-page .dv-pg-prose > :first-child { margin-top: 0; }
.dv-pg-page .dv-pg-prose > :last-child  { margin-bottom: 0; }

.dv-pg-page .dv-pg-prose p,
.dv-pg-page .dv-pg-prose li {
    font-size: inherit;
    line-height: inherit;
    color: var(--dv-pg-ink-2);
    max-width: var(--dv-pg-prose);
}
.dv-pg-page .dv-pg-prose p { margin: 0 0 1.1em; }

/* Bootstrap's `.lead` is what the editor gives an opening paragraph. */
.dv-pg-page .dv-pg-prose .lead {
    font-size: var(--dv-pg-t-sub);
    font-weight: 400;
    line-height: 1.55;
    color: var(--dv-pg-ink-2);
    max-width: var(--dv-pg-prose-lede);
    margin: 0 0 1.4em;
}

/* Headings: room above, less below, so each one belongs to what follows. */
.dv-pg-page .dv-pg-prose h2 {
    margin: 2.2em 0 0.6em;
    max-width: none;
}
.dv-pg-page .dv-pg-prose h3 {
    margin: 1.8em 0 0.5em;
}
.dv-pg-page .dv-pg-prose h4,
.dv-pg-page .dv-pg-prose h5 {
    margin: 1.5em 0 0.4em;
}
.dv-pg-page .dv-pg-prose h2 + h3,
.dv-pg-page .dv-pg-prose h3 + h4 { margin-top: 0.8em; }

/* Lists: real markers, a modest indent, breathing room between items. */
.dv-pg-page .dv-pg-prose ul,
.dv-pg-page .dv-pg-prose ol {
    margin: 0 0 1.25em;
    padding-left: 1.5em;
}
.dv-pg-page .dv-pg-prose ul { list-style: disc; }
.dv-pg-page .dv-pg-prose ol { list-style: decimal; }
.dv-pg-page .dv-pg-prose li { margin: 0 0 0.45em; }
.dv-pg-page .dv-pg-prose li > ul,
.dv-pg-page .dv-pg-prose li > ol { margin: 0.45em 0 0; }
.dv-pg-page .dv-pg-prose li::marker { color: var(--dv-pg-ink-3); }

/* Quotes, rules, media. */
.dv-pg-page .dv-pg-prose blockquote {
    margin: 1.5em 0;
    padding: 0.2em 0 0.2em 1.25rem;
    border-left: 2px solid var(--dv-pg-rule-strong);
    font-size: var(--dv-pg-t-sub);
    line-height: 1.55;
    color: var(--dv-pg-ink-2);
    max-width: var(--dv-pg-prose-lede);
}
.dv-pg-page .dv-pg-prose blockquote > :last-child { margin-bottom: 0; }
.dv-pg-page .dv-pg-prose img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 1.5em 0;
    border-radius: var(--dv-radius-sm, 4px);
}
.dv-pg-page .dv-pg-prose figure { margin: 1.5em 0; }
.dv-pg-page .dv-pg-prose figure > img { margin: 0 0 0.5rem; }

/* Code: the mono register, on the light surface, never a shadow. */
.dv-pg-page .dv-pg-prose code {
    font-family: var(--dv-pg-mono);
    font-size: 0.88em;
    padding: 0.1em 0.4em;
    background: var(--dv-surface-1, #F7F6F3);
    border: 1px solid var(--dv-pg-rule);
    border-radius: var(--dv-radius-sm, 4px);
    color: var(--dv-pg-ink);
}
.dv-pg-page .dv-pg-prose pre {
    margin: 1.5em 0;
    padding: 1rem 1.25rem;
    font-family: var(--dv-pg-mono);
    font-size: var(--dv-pg-t-caption);
    line-height: 1.55;
    background: var(--dv-surface-1, #F7F6F3);
    border: 1px solid var(--dv-pg-rule);
    border-radius: var(--dv-radius-sm, 4px);
    overflow-x: auto;
    color: var(--dv-pg-ink);
}
.dv-pg-page .dv-pg-prose pre code {
    padding: 0;
    border: 0;
    background: transparent;
    font-size: inherit;
}

/* Tables: section 13 already gives them the hairline treatment; the prose
   flow adds rhythm and lets a wide one scroll instead of breaking the column.
   `display: block` on the table with the row group re-declared as a table is
   the standard responsive trick - it costs nothing when the table fits. */
.dv-pg-page .dv-pg-prose table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    margin: 1.5em 0;
    -webkit-overflow-scrolling: touch;
}
.dv-pg-page .dv-pg-prose table > thead,
.dv-pg-page .dv-pg-prose table > tbody,
.dv-pg-page .dv-pg-prose table > tfoot {
    display: table;
    width: 100%;
    border-collapse: collapse;
}
.dv-pg-page .dv-pg-prose table > caption {
    display: block;
    text-align: left;
    caption-side: top;
    font-size: var(--dv-pg-t-caption);
    color: var(--dv-pg-ink-3);
    padding: 0 0 0.5rem;
}
.dv-pg-page .dv-pg-prose td,
.dv-pg-page .dv-pg-prose th {
    font-size: var(--dv-pg-t-meta);
    line-height: 1.5;
}
.dv-pg-page .dv-pg-prose hr { margin: 2em 0; }

/* ==========================================================================
   1.7.0 additions (2026-09-19) - the briefing layout, slice 1
   Spec: docs/superpowers/specs/2026-09-19-briefing-layout-slice-1-design.md
   Six primitives + one surface. Nothing above this line changed.
   ========================================================================== */

/* --- Surface: paper ------------------------------------------------------- */
.dv-pg-page .dv-pg-band-paper {
    background-color: var(--dv-paper, #F4EDE0);
    --dv-pg-rule: var(--dv-paper-rule, #D6CCB8);
}

/* --- Breadcrumb row (mono caps) ------------------------------------------- */
.dv-pg-page .dv-pg-crumb {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
    font-family: var(--dv-pg-mono);
    font-size: var(--dv-pg-t-caption);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--dv-pg-ink-3);
}
.dv-pg-page .dv-pg-crumb li + li::before { content: "\00B7"; margin-right: 0.4rem; }
.dv-pg-page .dv-pg-crumb a { color: inherit; text-decoration: none; }
.dv-pg-page .dv-pg-crumb a:hover { color: var(--dv-pg-ink); text-decoration: underline; }
.dv-pg-page .dv-pg-crumb [aria-current] { color: var(--dv-pg-ink); font-weight: 500; }

/* --- Two-column shell with a sticky rail ----------------------------------- */
.dv-pg-page .dv-pg-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
    align-items: start;
}
.dv-pg-page .dv-pg-shell-wide { grid-template-columns: minmax(0, 1fr) 372px; }
.dv-pg-page .dv-pg-shell > * { min-width: 0; }
.dv-pg-page .dv-pg-shell-rail {
    position: sticky;
    top: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
@media (max-width: 1023.98px) {
    .dv-pg-page .dv-pg-shell,
    .dv-pg-page .dv-pg-shell-wide { grid-template-columns: minmax(0, 1fr); }
    .dv-pg-page .dv-pg-shell-rail { position: static; }
    /* Phone order: main sections marked -rail-first come before the rail,
       everything else after. The main column is display: contents on phone so
       its children and the rail share one flow. */
    .dv-pg-page .dv-pg-shell-main { display: contents; }
    .dv-pg-page .dv-pg-shell-main > * { order: 2; }
    .dv-pg-page .dv-pg-shell-main > .dv-pg-rail-first { order: 0; }
    .dv-pg-page .dv-pg-shell-rail { order: 1; }
}

/* --- Metric additions ------------------------------------------------------ */
.dv-pg-page .dv-pg-metric-serif .dv-pg-metric-value {
    font-family: var(--dv-serif);
    font-weight: 400;
    font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem);
    letter-spacing: -0.01em;
}
.dv-pg-page .dv-pg-metric-note {
    display: block;
    margin-top: 0.3rem;
    font-size: var(--dv-pg-t-caption);
    line-height: 1.4;
    color: var(--dv-pg-ink-3);
}
.dv-pg-page .dv-pg-up   { color: var(--dv-good, #3B6D11); }
.dv-pg-page .dv-pg-down { color: var(--dv-bad,  #A32D2D); }

/* --- Briefing grid --------------------------------------------------------- */
.dv-pg-page .dv-pg-brief {
    display: grid;
    border-top: 1px solid var(--dv-pg-rule);
    border-left: 1px solid var(--dv-pg-rule);
    margin: 0;
    padding: 0;
    list-style: none;
}
.dv-pg-page .dv-pg-brief-3x3,
.dv-pg-page .dv-pg-brief-3x2 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dv-pg-page .dv-pg-brief-strip { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.dv-pg-page .dv-pg-brief-cell {
    padding: 0.9rem 1rem;
    border-right: 1px solid var(--dv-pg-rule);
    border-bottom: 1px solid var(--dv-pg-rule);
    background: var(--dv-pg-tile);
}
.dv-pg-page .dv-pg-brief-label {
    display: block;
    font-size: 11px;
    line-height: 1.4;
    color: var(--dv-pg-ink-3);
}
.dv-pg-page .dv-pg-brief-value {
    display: block;
    margin-top: 0.2rem;
    font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
    font-weight: 500;
    line-height: 1.3;
    color: var(--dv-pg-ink);
}
.dv-pg-page .dv-pg-brief-src {
    display: block;
    margin-top: 0.2rem;
    font-size: var(--dv-pg-t-caption);
    line-height: 1.4;
    color: var(--dv-pg-ink-3);
}
@media (max-width: 767.98px) {
    .dv-pg-page .dv-pg-brief-3x3,
    .dv-pg-page .dv-pg-brief-3x2,
    .dv-pg-page .dv-pg-brief-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Text-first lead card -------------------------------------------------- */
.dv-pg-page .dv-pg-lead {
    padding: 1.25rem;
    border: 1px solid var(--dv-pg-rule);
    border-radius: 6px;
    background: var(--dv-pg-tile);
}
.dv-pg-page .dv-pg-lead textarea,
.dv-pg-page .dv-pg-lead input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.dv-pg-page .dv-pg-lead select {
    width: 100%;
    min-height: 44px;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--dv-pg-rule);
    border-radius: 4px;
    font: inherit;
    font-size: var(--dv-pg-t-meta);
    background: #fff;
    color: var(--dv-pg-ink);
}
.dv-pg-page .dv-pg-lead textarea { min-height: 96px; resize: vertical; }
.dv-pg-page .dv-pg-lead-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
    gap: 0.6rem;
    margin-top: 0.6rem;
}
.dv-pg-page .dv-pg-lead .dv-pg-btn-gold { width: 100%; margin-top: 0.75rem; min-height: 46px; }
.dv-pg-page .dv-pg-lead-assure {
    margin: 0.6rem 0 0;
    font-size: var(--dv-pg-t-caption);
    line-height: 1.45;
    color: var(--dv-pg-ink-3);
}
.dv-pg-page .dv-pg-lead-navy {
    background: var(--dv-navy, #1F3A5F);
    border-color: transparent;
    color: var(--dv-on-navy, #D8E1ED);
}
.dv-pg-page .dv-pg-lead-navy h2,
.dv-pg-page .dv-pg-lead-navy h3,
.dv-pg-page .dv-pg-lead-navy h4 { color: #fff; }
.dv-pg-page .dv-pg-lead-navy .dv-pg-eyebrow { color: var(--dv-on-navy-mute, #9FC4EC); }
.dv-pg-page .dv-pg-lead-navy textarea,
.dv-pg-page .dv-pg-lead-navy input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.dv-pg-page .dv-pg-lead-navy select {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.22);
    color: #fff;
}
.dv-pg-page .dv-pg-lead-navy ::placeholder { color: rgba(255, 255, 255, 0.55); }
.dv-pg-page .dv-pg-lead-navy .dv-pg-lead-assure { color: var(--dv-on-navy-mute, #B5C5DB); }
.dv-pg-page .dv-pg-lead-navy a { color: var(--dv-on-navy-mute, #9FC4EC); }

/* --- Disclose band (native <details>) -------------------------------------- */
.dv-pg-page details.dv-pg-disclose { margin: 1.5rem 0; }
.dv-pg-page details.dv-pg-disclose > summary.dv-pg-disclose-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.5rem 1.1rem;
    border: 1px solid var(--dv-pg-rule-strong);
    border-radius: 999px;
    cursor: pointer;
    list-style: none;
    font-size: var(--dv-pg-t-meta);
    font-weight: 500;
    color: var(--dv-pg-ink);
    background: var(--dv-pg-tile);
}
.dv-pg-page details.dv-pg-disclose > summary::-webkit-details-marker { display: none; }
.dv-pg-page details.dv-pg-disclose > summary.dv-pg-disclose-trigger::after {
    content: "";
    width: 0.55em;
    height: 0.55em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform 150ms ease-out;
}
.dv-pg-page details.dv-pg-disclose[open] > summary.dv-pg-disclose-trigger::after { transform: rotate(-135deg) translateY(-1px); }
.dv-pg-page details.dv-pg-disclose > summary.dv-pg-disclose-trigger:hover,
.dv-pg-page details.dv-pg-disclose > summary.dv-pg-disclose-trigger:focus-visible { background: var(--dv-soft-sky, #EEF4FB); }
.dv-pg-page .dv-pg-disclose-panel { padding-top: 1.5rem; }
.dv-pg-page .dv-pg-disclose-panel > * + * { margin-top: 2rem; }

/* --- Photo tag ------------------------------------------------------------- */
.dv-pg-page .dv-pg-tag {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 0.2rem 0.55rem;
    border-radius: 4px;
    background: #fff;
    font-family: var(--dv-pg-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--dv-pg-ink);
}

/* ---------------------------------------------------------------------------
   Slice 1b Task 3 (2026-09-21). Navy header strip removed on the street and
   valuation pages only.

   Found via getComputedStyle on staging (both pages, 1280px): Helix's own
   `#sp-main-body { padding-top: 100px; background: rgb(31, 58, 95) }` -  a
   template-style rule (no inline style attribute on the element, so it comes
   from Helix's generated stylesheet, not from `#__template_styles.params` -
   RULE-001 is not implicated and nothing was touched via SQL/bridge). The
   header itself is exactly 60px (getBoundingClientRect: top 0, height 60),
   #sp-main-body starts immediately under it, and the 100px padding + navy
   fill is the ~80-100px strip between the header and the paper band the mock
   does not have. `<body>` carries `view-soldstreet` and `view-valuation`
   respectively (confirmed via document.body.className on both pages - both
   also carry `com_domovita`, `helix-ultimate`, `hu`, `sticky-header` etc.,
   none of which are page-specific enough to scope on safely).

   Specificity: `body.view-soldstreet #sp-main-body` is (1,1,1) - element +
   class, then an ID - which beats Helix's own `#sp-main-body` at (1,0,0)
   regardless of load order, so this wins without `!important`.

   Zeroing padding-top only (not the background) is deliberate: the first
   child is always `.dv-pg-band` (paper, #F4EDE0), which already carries its
   own 96px top padding (domovita-pages.css section 13) - that padding is
   what now sits directly under the header, matching the mock, and nothing
   else on either page moved (confirmed against the pre-change screenshots -
   every section below keeps its own background, so #sp-main-body's now-
   invisible navy fill is never exposed between them). */
body.view-soldstreet #sp-main-body,
body.view-valuation #sp-main-body { padding-top: 0; }