/**
 * dfm Theme - strict pico, light + dark (light added 2026-09-14)
 *
 * Scope: theme chrome + palette only (header/nav/footer + the Pico
 * variable palette they pull from). The homepage content template is a
 * separate, deliberately out-of-scope rebuild.
 *
 * "Strict pico" means: lean on Pico's own semantic elements (header, nav,
 * ul/li, role="button") and its --pico-* custom properties for anything
 * Pico already has an opinion about, instead of hand-rolled utility
 * classes (no .button.is-primary, no .card, no .tag). This file overrides
 * Pico's variables to match the "Defined.me Home" mockup's palette, then
 * adds a small amount of custom CSS only for the handful of things Pico
 * has no concept of: the brand/logo/wordmark/tagline lockup, and the
 * footer's deliberate light-cream flip.
 *
 * Auto light/dark, same pattern as tpl-theme.css: no data-theme attribute
 * is set in dfm/header.php, so this follows the visitor's
 * prefers-color-scheme automatically. Light values (derived from the same
 * oklch(_, _, 265) hue family as the mockup's dark palette, just
 * relightened/redarkened) live in :root; the mockup's own dark values
 * override them in one @media (prefers-color-scheme: dark) block. The
 * gold accent (hue 85) and the footer's cream flip are shared across both
 * -- gold-on-dark-navy-text reads fine against either background, and the
 * footer was always meant to read as a light panel regardless of theme.
 *
 * Selector note: Pico's own light defaults live under
 * `:root:not([data-theme=dark]), [data-theme=light]` -- a plain `:root`
 * has lower specificity and loses to that even though this file loads
 * after pico.min.css, so the light block below matches that same
 * specificity. Its dark defaults are the mirror image, under
 * `:root:not([data-theme=light])` inside prefers-color-scheme: dark --
 * matched the same way in the @media block further down.
 */

:root {
    --pico-font-family: 'IBM Plex Sans', system-ui, sans-serif;
}

:root:not([data-theme="dark"]) {
    --pico-background-color: oklch(0.97 0.004 265);
    --pico-color: oklch(0.24 0.012 265);
    --pico-muted-color: oklch(0.5 0.014 265);
    --pico-muted-border-color: oklch(0.85 0.01 265);
    --pico-h1-color: oklch(0.2 0.012 265);
    --pico-h2-color: oklch(0.2 0.012 265);

    --pico-primary: oklch(0.72 0.14 85);
    --pico-primary-background: oklch(0.72 0.14 85);
    --pico-primary-border: oklch(0.72 0.14 85);
    --pico-primary-hover: oklch(0.66 0.14 85);
    --pico-primary-hover-background: oklch(0.66 0.14 85);
    --pico-primary-focus: oklch(0.72 0.14 85 / 25%);
    --pico-primary-inverse: oklch(0.16 0.012 265);

    --pico-card-background-color: oklch(0.99 0.002 265);
    --pico-card-border-color: oklch(0.88 0.01 265);

    --dfm-mono: 'IBM Plex Mono', ui-monospace, monospace;
    --dfm-display: 'Archivo Narrow', sans-serif;
    --dfm-footer-bg: oklch(0.96 0.006 85);
    --dfm-footer-color: oklch(0.24 0.012 265);
    --dfm-footer-muted: oklch(0.42 0.012 265);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --pico-background-color: oklch(0.16 0.012 265);
        --pico-color: oklch(0.95 0.005 265);
        --pico-muted-color: oklch(0.64 0.015 265);
        --pico-muted-border-color: oklch(0.3 0.015 265);
        --pico-h1-color: oklch(0.95 0.005 265);
        --pico-h2-color: oklch(0.95 0.005 265);

        --pico-primary: oklch(0.85 0.13 85);
        --pico-primary-background: oklch(0.85 0.13 85);
        --pico-primary-border: oklch(0.85 0.13 85);
        --pico-primary-hover: oklch(0.92 0.1 85);
        --pico-primary-hover-background: oklch(0.92 0.1 85);
        --pico-primary-focus: oklch(0.85 0.13 85 / 25%);
        --pico-primary-inverse: oklch(0.16 0.012 265);

        --pico-card-background-color: oklch(0.19 0.014 265);
        --pico-card-border-color: oklch(0.3 0.015 265);
    }
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* The .final-cta edge-to-edge breakout further down (margin: calc(50%
       - 50vw)) is a hair wider than the viewport on some browsers -- vw
       units are measured against the full viewport including the
       vertical scrollbar's own width, while the matching % half of that
       same calc() is relative to body's actual (scrollbar-subtracted)
       content box, so the two don't quite agree by a few px. Clipping it
       here at the one ancestor that's already full viewport width
       swallows that rounding without touching the breakout itself or any
       other element's overflow. */
    overflow-x: hidden;
}

main {
    flex: 1;
}

/* ---- header / nav ------------------------------------------------- */

.dfm-header {
    border-bottom: 1px solid var(--pico-muted-border-color);
    padding-block: 0.9rem;
    margin-bottom: 0;
}

.dfm-header nav {
    align-items: center;
}

.brand-link {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    color: var(--pico-color);
    text-decoration: none;
}

.brand-link:hover {
    color: var(--pico-color);
}

.brand-mark {
    /* Real mark's viewBox is 172x128 (~1.34:1), not square like the old
       placeholder grid -- fix height, let width follow the ratio. */
    width: auto;
    height: 28px;
    flex-shrink: 0;
    display: block;
}

.wordmark {
    font-family: var(--dfm-display);
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.tagline {
    font-family: var(--dfm-mono);
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pico-primary);
    padding-left: 0.85rem;
    border-left: 1px solid var(--pico-muted-border-color);
}

.dfm-header nav > ul:last-child {
    gap: 1.6rem;
}

.dfm-header nav > ul:last-child a:not(.dfm-cta) {
    font-family: var(--dfm-mono);
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pico-muted-color);
}

.dfm-header nav > ul:last-child a:not(.dfm-cta):hover,
.dfm-header nav > ul:last-child a[aria-current="page"] {
    color: var(--pico-color);
}

a.dfm-cta[role="button"] {
    font-family: var(--dfm-mono);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.6rem 1.2rem;
}

/* ---- footer --------------------------------------------------------
 * Deliberate flip to a light cream panel per the mockup -- the mark uses
 * stroke="currentColor" so it just follows --dfm-footer-color here, no
 * dark/light filter swap the way the tpl/original logo needs.
 */

.dfm-footer {
    margin-top: auto;
    background-color: var(--dfm-footer-bg);
    color: var(--dfm-footer-color);
    padding-block: 1.75rem;
}

.dfm-footer .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.dfm-footer .brand-link {
    color: var(--dfm-footer-color);
    gap: 0.6rem;
}

.dfm-footer .brand-mark {
    width: auto;
    height: 20px;
}

.dfm-footer .wordmark {
    font-size: 1rem;
}

.dfm-footer p {
    margin: 0;
    font-family: var(--dfm-mono);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--dfm-footer-muted);
}

/* ---- notifications --------------------------------------------------
 * Structurally untouched (article[role="alert"]); just brought onto the
 * Pico variable palette instead of the old flat colors.
 */

article[role="alert"] {
    border: 1px solid var(--pico-muted-border-color);
    border-radius: var(--pico-border-radius);
    background-color: var(--pico-card-background-color);
    padding: 0.85rem 1.1rem;
    margin-bottom: 0.85rem;
}

article[role="alert"].success { border-color: oklch(0.64 0.13 145); }
article[role="alert"].danger  { border-color: oklch(0.64 0.18 20); }
article[role="alert"].warning { border-color: var(--pico-primary); }
article[role="alert"].info    { border-color: oklch(0.64 0.15 265); }

/* Framework's own .flash-* classes (framework-base.css) -- used by
 * Framework/Presentation/Auth templates like login-success.php's
 * timezone-change notice. framework-base.css hardcodes a fixed light
 * background + dark text for all four tones, correct for a plain light
 * page but unreadable in dfm's dark mode (light-on-light-in-a-lighter-box
 * isn't the bug; the bug is a *fixed light box* regardless of theme, and
 * Pico's own direct `small{color:...}` rule -- same "direct beats
 * inherited" gotcha as the domain-card <li> bullets above -- then
 * overrides whatever text color the box sets anyway). Redeclared here on
 * the same var(--pico-card-*) + accent-hue pattern as article[role=alert]
 * immediately above so the box itself follows the page's current theme
 * instead of carrying its own, and text color is forced with !important
 * on every descendant since framework-base.css's specificity (plain
 * class selector) ties Pico's plain-element `small` rule, and cascade
 * order (this file loads after framework-base.css but Pico's `small`
 * rule still comes first) doesn't resolve that on its own.
 */
.flash-error,
.flash-warning,
.flash-success,
.flash-info {
    background-color: var(--pico-card-background-color) !important;
    border: 1px solid;
    border-radius: var(--pico-border-radius);
    padding: 0.85rem 1.1rem;
    margin-bottom: 1rem;
}

.flash-error   { border-color: oklch(0.64 0.18 20); }
.flash-warning { border-color: var(--pico-primary); }
.flash-success { border-color: oklch(0.64 0.13 145); }
.flash-info    { border-color: oklch(0.64 0.15 265); }

.flash-error *,
.flash-warning *,
.flash-success *,
.flash-info * {
    color: var(--pico-color) !important;
}

/* ---- responsive ----------------------------------------------------- */

@media (max-width: 768px) {
    .tagline {
        display: none;
    }

    .dfm-header nav {
        flex-wrap: wrap;
        row-gap: 0.75rem;
    }

    .dfm-footer .container {
        flex-direction: column;
        text-align: center;
    }
}

/* ======================================================================
 * Homepage content (App/Pages/home.html), rewritten 2026-09-14 to
 * match the "Defined.me Home" mockup. Scoped under .dfm-page so nothing
 * here leaks onto other pages that reuse <section>/<article> elsewhere
 * in the app -- this file is a dfm-only concern (home.html is shared
 * verbatim across every theme; other themes get default browser styling
 * on this page for now).
 * ====================================================================== */

:root {
    --dfm-c-body-1: oklch(0.79 0.09 20);
    --dfm-c-body-2: oklch(0.64 0.18 20);
    --dfm-c-body-3: oklch(0.44 0.13 20);
    --dfm-c-soul-1: oklch(0.79 0.09 145);
    --dfm-c-soul-2: oklch(0.64 0.18 145);
    --dfm-c-soul-3: oklch(0.44 0.13 145);
    --dfm-c-spirit-1: oklch(0.79 0.09 265);
    --dfm-c-spirit-2: oklch(0.64 0.18 265);
    --dfm-c-spirit-3: oklch(0.44 0.13 265);
}

.dfm-page section {
    padding-block: 3rem;
    border-top: 1px solid var(--pico-muted-border-color);
}

.dfm-page .eyebrow {
    font-family: var(--dfm-mono);
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pico-muted-color);
    margin: 0 0 1rem;
}

.dfm-page .dim-dot {
    width: 8px;
    height: 8px;
    border-radius: 1px;
    display: inline-block;
}

.dfm-page .c-body-1 { background: var(--dfm-c-body-1); }
.dfm-page .c-body-2 { background: var(--dfm-c-body-2); }
.dfm-page .c-body-3 { background: var(--dfm-c-body-3); }
.dfm-page .c-soul-1 { background: var(--dfm-c-soul-1); }
.dfm-page .c-soul-2 { background: var(--dfm-c-soul-2); }
.dfm-page .c-soul-3 { background: var(--dfm-c-soul-3); }
.dfm-page .c-spirit-1 { background: var(--dfm-c-spirit-1); }
.dfm-page .c-spirit-2 { background: var(--dfm-c-spirit-2); }
.dfm-page .c-spirit-3 { background: var(--dfm-c-spirit-3); }

/* ---- meta strip ------------------------------------------------- */

.dfm-page .meta-strip {
    border-top: none;
    border-bottom: 1px solid var(--pico-muted-border-color);
    padding-block: 0.6rem;
}

.dfm-page .meta-strip .container {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    font-family: var(--dfm-mono);
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pico-muted-color);
}

/* ---- hero --------------------------------------------------------- */

.dfm-page .hero-section {
    border-top: none;
    padding-top: 4rem;
}

.dfm-page .hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 3rem;
    align-items: start;
}

.dfm-page .hero-copy h1 {
    font-family: var(--dfm-display);
    font-size: clamp(2.2rem, 5vw, 3.6rem);
    line-height: 0.95;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    margin: 0 0 1rem;
}

.dfm-page .hero-copy .lead {
    font-family: 'Newsreader', serif;
    font-style: italic;
    font-weight: 300;
    font-size: 1.3rem;
    color: var(--pico-muted-color);
    margin: 0 0 1.4rem;
    max-width: 26em;
}

.dfm-page .hero-copy p:not(.lead) {
    font-weight: 300;
    line-height: 1.7;
    max-width: 34em;
}

.dfm-page .hero-actions {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

.dfm-page .hero-actions [role="button"] {
    font-family: var(--dfm-mono);
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 1rem 1.8rem;
}

.dfm-page .hero-meta {
    font-family: var(--dfm-mono);
    font-size: 0.68rem;
    line-height: 1.8;
    color: var(--pico-muted-color);
    margin: 0;
}

/* ---- sample reading card ------------------------------------------ */

.dfm-page .reading-card {
    border: 1px solid var(--pico-card-border-color);
    background: var(--pico-card-background-color);
}

.dfm-page .reading-card-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.8rem 1.1rem;
    border-bottom: 1px solid var(--pico-muted-border-color);
    font-family: var(--dfm-mono);
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pico-muted-color);
}

.dfm-page .reading-domains {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-bottom: 1px solid var(--pico-muted-border-color);
}

.dfm-page .reading-domains span {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.7rem 1rem;
    font-family: var(--dfm-mono);
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-right: 1px solid var(--pico-muted-border-color);
}

.dfm-page .reading-domains span:last-child {
    border-right: none;
}

.dfm-page .dim-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--pico-muted-border-color);
}

.dfm-page .dim-item {
    all: unset;
    cursor: pointer;
    background: var(--pico-card-background-color);
    padding: 0.9rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.dfm-page .dim-item:hover,
.dfm-page .dim-item.is-selected {
    /* Not var(--pico-background-color) -- Pico's own base `button{}` rule
       locally redefines that exact custom property, on every <button>,
       to mean var(--pico-primary-background) (the gold accent). Reading
       it back here would just echo Pico's button-gold, not the page
       background, so use --pico-card-border-color instead for a subtle
       highlight that isn't shadowed like this. */
    background: var(--pico-card-border-color);
}

.dfm-page .dim-label {
    font-family: 'Newsreader', serif;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.dfm-page .flag-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--pico-primary);
    display: inline-block;
}

.dfm-page .dim-score {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    font-family: var(--dfm-display);
    font-size: 1.5rem;
    font-weight: 700;
}

.dfm-page .dim-score small {
    font-family: var(--dfm-mono);
    font-size: 0.6rem;
    color: var(--pico-muted-color);
    font-weight: 400;
}

.dfm-page .dim-bar {
    display: block;
    height: 4px;
    border-radius: 2px;
    background: var(--pico-muted-border-color);
    overflow: hidden;
}

.dfm-page .dim-bar-fill {
    display: block;
    height: 100%;
}

.dfm-page .reading-detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: start;
    padding: 1.1rem 1.1rem 1.2rem;
    border-top: 1px solid var(--pico-muted-border-color);
    min-height: 7rem;
}

.dfm-page .detail-domain {
    font-family: var(--dfm-mono);
    font-size: 0.58rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pico-primary);
    margin: 0 0 0.5rem;
}

.dfm-page .detail-label {
    font-family: 'Newsreader', serif;
    font-size: 1.25rem;
    margin: 0 0 0.4rem;
}

.dfm-page .detail-note {
    font-size: 0.8rem;
    line-height: 1.6;
    color: var(--pico-muted-color);
    margin: 0;
    font-weight: 300;
}

.dfm-page .detail-value {
    font-family: var(--dfm-display);
    font-size: 2.6rem;
    font-weight: 700;
    color: var(--pico-primary);
    line-height: 1;
}

/* ---- method section ------------------------------------------------ */

.dfm-page .method-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 3rem;
    align-items: start;
}

.dfm-page .method-intro h2 {
    font-family: 'Newsreader', serif;
    font-weight: 300;
    font-size: clamp(1.8rem, 3.2vw, 2.8rem);
    line-height: 1;
    letter-spacing: -0.01em;
    margin: 0 0 1rem;
}

.dfm-page .method-tag {
    font-family: var(--dfm-mono);
    font-size: 0.62rem;
    line-height: 2;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pico-primary);
}

.dfm-page .method-body p {
    font-weight: 300;
    line-height: 1.7;
    font-size: 1.05rem;
    color: var(--pico-color);
    max-width: 44em;
}

.dfm-page .method-body em {
    font-family: 'Newsreader', serif;
}

.dfm-page .scale-card {
    border: 1px solid var(--pico-card-border-color);
    background: var(--pico-card-background-color);
    padding: 1.6rem;
    margin-top: 1rem;
}

.dfm-page .scale-card-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    font-family: var(--dfm-mono);
    font-size: 0.58rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pico-muted-color);
    margin-bottom: 1.6rem;
}

.dfm-page .scale-caption {
    font-family: var(--dfm-mono);
    font-size: 0.58rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pico-color);
    margin: 0 0 0.7rem;
}

.dfm-page .scale-track {
    position: relative;
    height: 1.6rem;
    margin-bottom: 2rem;
}

.dfm-page .scale-fill {
    position: absolute;
    left: 0;
    top: 0.7rem;
    height: 2px;
    background: var(--pico-primary);
}

.dfm-page .scale-dot {
    position: absolute;
    top: 0.35rem;
    width: 12px;
    height: 12px;
    margin-left: -6px;
    border-radius: 50%;
    background: var(--pico-primary);
}

.dfm-page .scale-mark {
    position: absolute;
    top: 0.35rem;
    width: 1px;
    height: 0.8rem;
    background: var(--pico-muted-color);
}

.dfm-page .scale-footnote {
    margin-top: 1.2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--pico-muted-border-color);
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--pico-muted-color);
    font-weight: 300;
    max-width: 40em;
}

/* ---- domains grid --------------------------------------------------- */

.dfm-page .domains-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding-bottom: 2rem;
}

.dfm-page .domains-heading h2 {
    font-family: var(--dfm-display);
    font-size: clamp(1.8rem, 3.4vw, 2.6rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.005em;
    margin: 0;
}

.dfm-page .domains-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1px;
    background: var(--pico-muted-border-color);
    border-top: 1px solid var(--pico-muted-border-color);
    border-bottom: 1px solid var(--pico-muted-border-color);
}

.dfm-page .domain-card {
    background: var(--pico-background-color);
    padding: 2.2rem 1.9rem 2.4rem;
}

.dfm-page .domain-tag {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--dfm-mono);
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pico-muted-color);
    margin: 0 0 1rem;
}

.dfm-page .domain-tag .dim-dot {
    width: 10px;
    height: 10px;
}

.dfm-page .domain-card h3 {
    font-family: var(--dfm-display);
    font-size: 1.9rem;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0 0 0.2rem;
}

.dfm-page .domain-sub {
    font-family: 'Newsreader', serif;
    font-style: italic;
    font-weight: 300;
    font-size: 1.05rem;
    color: var(--pico-muted-color);
    margin: 0 0 1.4rem;
}

.dfm-page .domain-card ul {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    font-weight: 300;
    line-height: 1.5;
}

.dfm-page .domain-card ul li {
    /* Pico sets `ul li{list-style:square}` as a direct rule on li itself
       (not just inherited from ul), so list-style:none on the ul alone
       doesn't reach it -- has to be overridden on li directly too. */
    list-style: none;
    margin-bottom: 0;
}

.dfm-page .domain-card li strong {
    font-weight: 500;
}

/* ---- features grid --------------------------------------------------- */

.dfm-page .features-grid {
    display: grid;
    /* 280px (up from the original 240px, sized for home.html's fixed set
       of 4 cards) so the Features page's 7 cards wrap 4-then-3 instead
       of 5-then-2 -- the 5/2 split left the second row mostly empty at
       common desktop widths. Still one comfortable row of 4 for home's
       own card count, just with a bit more breathing room per card. */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2.5rem;
}

.dfm-page .feature h3 {
    font-family: 'Newsreader', serif;
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 1.2;
    margin: 0 0 0.6rem;
}

.dfm-page .feature p {
    font-size: 0.9rem;
    line-height: 1.65;
    font-weight: 300;
    color: var(--pico-muted-color);
    margin: 0;
}

/* ---- final cta --------------------------------------------------- */

.dfm-page .final-cta {
    background: var(--pico-card-background-color);
    /* Break out of the page's centered, max-width .container ancestor so
       this band's background runs edge-to-edge instead of stopping at
       the same gutters as the rest of the page. The inner
       .final-cta-grid is its own .container (max-width + auto margins),
       so the text/button still line up with everything else -- only the
       background actually reaches the viewport edges. */
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.dfm-page .final-cta-grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
}

.dfm-page .final-cta h2 {
    font-family: var(--dfm-display);
    font-size: clamp(2rem, 4vw, 3.2rem);
    line-height: 0.95;
    text-transform: uppercase;
    font-weight: 700;
    margin: 0 0 0.8rem;
}

.dfm-page .final-cta p {
    font-weight: 300;
    line-height: 1.6;
    max-width: 38em;
    margin: 0;
    color: var(--pico-color);
}

.dfm-page .final-cta [role="button"] {
    flex-shrink: 0;
    font-family: var(--dfm-mono);
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 1.1rem 2.2rem;
}

/* ---- responsive ------------------------------------------------------ */

@media (max-width: 900px) {
    .dfm-page .hero-grid,
    .dfm-page .method-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
}

@media (max-width: 560px) {
    .dfm-page .dim-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .dfm-page .reading-domains {
        grid-template-columns: repeat(3, 1fr);
        font-size: 0.55rem;
    }

    .dfm-page .final-cta-grid {
        flex-direction: column;
        align-items: flex-start;
    }
}