/* Germany Unlocked -- theme + Pathway Finder app styles.
   Every color, type size, spacing value, radius, icon size and interactive
   state below must trace back to DESIGN-SPEC.md at the project root. That
   file is the single source of truth -- if a value here doesn't match it,
   the spec wins and this file is wrong, not the other way around.

   Type scale (fixed, six sizes only): Display 48/32, H1 36/28, H2 28/22,
   H3 20, Body 16, Small 14.
   Spacing scale (fixed, eight values only): 4, 8, 16, 24, 32, 48, 64, 96px.
   Radius: 8px (buttons/inputs/icon-plates/badges) or 16px (cards/panels) --
   pill (999px) is a documented exception for tag/badge-shaped components
   only (category filter tabs, the hero eyebrow, readiness status badges).
   Colors: Charcoal #1C2531, Gold #FFD300, Red #F51B1B, Black, plus their
   fixed tints (tint-95/90/80/60, gold-tint-90, red-tint-90). No other hues. */

/* ------------------------------------------------------ Standalone pages */
.gu-page {
    /* 64px/96px block + 32px inline, matching every static-page mockup's
       `.page-wrap` exactly -- found 2026-09-12: this was 48px/64px block
       with no inline value of its own (falling through to Twenty
       Twenty-Five's inherited fluid gutter, ~50px on desktop). */
    padding-block: 4rem 6rem;
    padding-inline: 2rem;
    /* No max-width here -- `<main>` is full-bleed, same as every
       homepage section (.gu-pathways etc). `.gu-page__inner` (a plain,
       non-WP-managed child, see templates/page*.html) is what actually
       gets constrained: since the block's own layout declares
       `contentSize:1200px`, WordPress's core CSS gives that bare child
       max-width:1200px + margin-inline:auto automatically -- the exact
       same mechanism `.gu-pathway-grid`/`.gu-hero__inner` already rely
       on. That's what makes every static page's content start at the
       identical left edge as the homepage cards. Found 2026-09-12: the
       old approach (max-width directly on `.gu-page` itself, with no
       margin-inline:auto) left the whole page flush against the
       viewport's left edge instead of centered/aligned with the rest
       of the site, and independently let the post-title get its own
       WP-generated centering at a DIFFERENT width, misaligning it from
       the body content beneath it. */
}

.gu-page__inner {
    /* Deliberately no CSS here -- width/centering comes from WordPress's
       own contentSize:1200 treatment (see .gu-page comment above). */
}

.gu-page__inner .wp-block-post-title,
.gu-page__inner .entry-content {
    max-width: 52rem;
}

/* Find Services only -- via templates/page-find-services.html. Its
   category grid and provider cards need the mockup's full 1200px
   width, not the 52rem column every text-only page correctly uses.
   `.gu-page__inner` is already exactly 1200px wide (see above), so its
   content just needs to fill it rather than being capped narrower. */
.gu-page--wide .gu-page__inner .wp-block-post-title,
.gu-page--wide .gu-page__inner .entry-content {
    max-width: none;
}

/* The intro paragraph itself stays narrow and muted, matching the
   mockup's `.page-wrap > p` exactly -- only the grid below it needs
   the full width. */
.gu-page--wide .entry-content > p:first-child {
    max-width: 34rem;
    color: #3a4150;
}

.gu-page--legal .gu-page__inner .wp-block-post-title,
.gu-page--legal .gu-page__inner .entry-content {
    max-width: 44rem;
}

.gu-page-header-img {
    margin: 2rem 0 0.5rem;
}

.gu-page-header-img img {
    width: 100%;
    height: auto;
    border-radius: 16px;
    border: 1px solid var(--wp--preset--color--tint-80);
    display: block;
}

/* 28px flat, matching every static-page mockup's `.page-wrap h1` exactly
   -- a real, significant bug found 2026-09-12: with no font-size of its
   own anywhere in theme.json or app.css, every page title (About, How
   It Works, Privacy Policy, etc.) was inheriting Twenty Twenty-Five's
   own fluid H1 clamp, which computed to 48px on desktop -- Display-
   headline size, not a page-title size, on every single content page. */
.gu-page .wp-block-post-title {
    font-size: 1.75rem;
    /* 12px, matching the editorial-page mockups (About/How It Works/
       Trust & Sources) exactly -- `.gu-page--legal` below overrides
       this to 8px for the 3 legal pages, which use a different value. */
    margin-bottom: 0.75rem;
}

.gu-page h2 {
    font-size: 1.75rem;
    margin: 3rem 0 1rem;
}

.gu-page h3 {
    font-size: 1.25rem;
    margin: 1.5rem 0 0.5rem;
}

.gu-page p,
.gu-page li {
    color: var(--wp--preset--color--text);
}

/* text-align:justify + hyphens:auto matches the mockup's `.page-wrap p`
   exactly -- was missing sitewide on every static content page. */
.gu-page p {
    text-align: justify;
    hyphens: auto;
}

/* Gold-dot divided list rows, matching every static-page mockup's
   `.page-wrap ul` exactly (How It Works' goal/roadmap lists, Trust &
   Sources' bullet lists, etc.) -- was rendering as plain browser-default
   disc bullets sitewide, since this rule never existed. */
.gu-page ul {
    margin: 0 0 1rem;
    padding-left: 0;
    list-style: none;
}

.gu-page ul li {
    padding: 0.5rem 0 0.5rem 1.75rem;
    position: relative;
    border-bottom: 1px solid var(--wp--preset--color--tint-80);
    text-align: left;
}

.gu-page ul li:last-child {
    border-bottom: none;
}

.gu-page ul li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 1.0625rem;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--wp--preset--color--gold);
}

/* Privacy Policy, Terms of Service, and Disclaimer only -- via their own
   templates/page-*.html. Found 2026-09-12: all 3 legal-page mockups
   share ONE distinct, narrower type scale from the editorial pages
   (About/How It Works/Trust & Sources) -- 44rem not 52rem, a smaller
   22px H2 (not the editorial pages' 28px) with tighter 40px/12px
   margins, denser list rows, and NOT justified body text -- previously
   all 3 legal pages wrongly inherited the editorial scale via the
   shared `.gu-page` class alone. Its 44rem max-width is applied further
   down, to `.gu-page__inner .wp-block-post-title`/`.entry-content`
   directly (see the `.gu-page` comment near the top of this file). */
.gu-page--legal .wp-block-post-title {
    margin-bottom: 0.5rem;
}

.gu-page--legal p {
    text-align: left;
    hyphens: none;
}

.gu-page--legal h2 {
    font-size: 1.375rem;
    margin: 2.5rem 0 0.75rem;
}

.gu-page--legal ul li {
    font-size: 0.96875rem;
    padding: 0.625rem 0 0.625rem 1.75rem;
}

.gu-page .gu-pending {
    color: var(--wp--preset--color--red);
    font-style: italic;
}

.gu-lead {
    /* #3a4150, matching the mockup's `.lead` exactly -- Tint-60 was too
       light next to it (same class of fix as .gu-source-meta/.gu-notice). */
    font-size: 1.25rem;
    color: #3a4150;
    max-width: 46rem;
}

/* "Last updated: ..." date line on Privacy Policy/Terms of Service/
   Disclaimer -- a small, quiet timestamp in every one of those mockups
   (`.updated`), not the big lead-paragraph treatment `.gu-lead` gives
   it. All three legal pages were wrongly using `.gu-lead` for this line
   (a copy-paste of the pattern from About/How It Works/Trust & Sources,
   where the first paragraph genuinely is a real lead sentence). */
.gu-updated {
    font-size: 0.875rem;
    color: var(--wp--preset--color--tint-60);
    margin-bottom: 2rem;
}

/* Numbered step layout (How It Works) -- matches the How It Works Page
   Mockup's .step/.step-num/.step-body treatment exactly: a Bitter-numeral
   badge to the left of each step's heading and body, not a plain "1. "
   prefix typed into the heading text itself. */
.gu-step {
    display: flex;
    gap: 1rem;
    margin-top: 3rem;
    align-items: flex-start;
}

.gu-step__num {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: var(--wp--preset--color--tint-90);
    color: var(--wp--preset--color--text);
    font-family: var(--wp--preset--font-family--heading);
    font-weight: 700;
    font-size: 1.125rem;
    display: grid;
    place-items: center;
    margin-top: 0.25rem;
}

.gu-step__body {
    flex: 1;
}

.gu-step__body h2 {
    /* 24px/12px-bottom, matching the How It Works mockup's `.step-body
       h2` exactly -- found 2026-09-12: this only zeroed margin-top,
       leaving font-size and margin-bottom to fall through to the page's
       generic `.gu-page h2` rule (28px/16px), which is sized for
       top-level section headings, not these smaller in-step ones. */
    font-size: 1.5rem;
    margin-top: 0;
    margin-bottom: 0.75rem;
}

@media (max-width: 759px) {
    .gu-page h2 { font-size: 1.375rem; }
}

/* Panels / notices / source lists, shared across static pages and the app.
   Every box-shaped surface on the site (panel, notice, source item, provider
   card, fact card, shortcut card, pathway card, the app's own card shell,
   the result "next step" box, the error banner) shares one card contract:
   24px padding, 16px radius, Tint 90 background, Tint 80 1px border. */
.gu-panel {
    background: var(--wp--preset--color--tint-90);
    border: 1px solid var(--wp--preset--color--tint-80);
    border-radius: 16px;
    padding: 1.5rem;
    margin: 1.5rem 0;
}

/* Quote-panel treatment: a `.gu-panel` box whose text is the About/How It
   Works mockups' distinct large serif quote -- 19px Bitter at weight 600,
   not the page's regular body text. Applied via a paragraph className, not
   baked into `.gu-panel` itself, since that class is shared with plain
   notice boxes (Disclaimer, Providers) that must stay regular body text. */
.gu-panel .gu-quote {
    font-family: var(--wp--preset--font-family--heading);
    font-size: 1.1875rem;
    font-weight: 600;
    line-height: 1.4;
}

.gu-notice {
    /* Matches the mockup's `.notice` exactly -- plain-ink 16px body text,
       was wrongly rendering its entire contents (including the bold
       opening sentence) as small, low-contrast Tint-60 gray. Margin is
       top-only (32px) per the mockup, not the symmetric 24px this had. */
    background: var(--wp--preset--color--tint-90);
    border: 1px solid var(--wp--preset--color--tint-80);
    border-radius: 16px;
    padding: 1.5rem;
    margin-top: 2rem;
}

.gu-notice p strong {
    display: block;
    margin-bottom: 0.375rem;
}

.gu-source-list {
    display: grid;
    gap: 1rem;
    margin: 1.5rem 0;
}

.gu-source-item {
    display: flex;
    gap: 1rem;
    border: 1px solid var(--wp--preset--color--tint-80);
    border-radius: 16px;
    padding: 1.5rem;
    background: var(--wp--preset--color--tint-90);
}

.gu-source-item strong,
.gu-source-item a {
    color: var(--wp--preset--color--text);
    font-weight: 700;
}

.gu-source-item strong {
    /* Matches the Trust & Sources mockup's `.source-item strong` exactly
       -- was inline with no space before the description paragraph. */
    display: block;
    margin-bottom: 0.25rem;
}

.gu-source-num {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: var(--wp--preset--color--surface);
    color: var(--wp--preset--color--text);
    display: grid;
    place-items: center;
}

.gu-source-num svg {
    width: 22px;
    height: 22px;
}

.gu-source-meta {
    /* #4a5261, matching the mockup's `.source-item p` exactly -- Tint-60
       was too light/washed out next to it. */
    font-size: 0.875rem;
    color: #4a5261;
    margin-top: 0.25rem;
}

@media (max-width: 600px) {
    .gu-source-item {
        flex-direction: column;
    }
}

/* ------------------------------------------------------- Find Services */
/* Icon-card category grid, matching the Find Services Page Mockup's
   .cat-grid/.cat-card treatment exactly -- replaces an earlier pill-tab
   row that never matched the mockup (found 2026-09-11). */
.gu-services-cat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    margin: 2rem 0;
}

@media (min-width: 600px) {
    .gu-services-cat-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.gu-services-cat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.625rem;
    text-align: center;
    background: var(--wp--preset--color--tint-90);
    border: 2px solid var(--wp--preset--color--tint-80);
    border-radius: 16px;
    padding: 1.5rem 0.75rem;
    cursor: pointer;
    font: inherit;
    width: 100%;
    color: var(--wp--preset--color--text);
    transition: border-color 0.15s ease;
}

.gu-services-cat-card:hover {
    border-color: var(--wp--preset--color--tint-60);
}

.gu-services-cat-card__ic {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: var(--wp--preset--color--text);
    color: #fff;
    display: grid;
    place-items: center;
}

.gu-services-cat-card__ic svg {
    width: 20px;
    height: 20px;
}

.gu-services-cat-card strong {
    font-size: 0.875rem;
    line-height: 1.3;
}

/* Active state: solid Gold fill, matching the mockup exactly -- distinct
   from the questionnaire's own Gold-border + Charcoal-Tint-90-fill
   selected state (DESIGN-SPEC's Interactive States section), since this
   is a persistent filter choice, not a transient answer selection. */
.gu-services-cat-card.is-active {
    background: var(--wp--preset--color--gold);
    border-color: var(--wp--preset--color--gold);
}

.gu-services-cat-card.is-active strong {
    color: var(--wp--preset--color--text);
}

/* Matches the mockup's .provider-grid exactly -- cards were previously
   rendered as a plain single-column stack with no grid wrapper at all. */
.gu-provider-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 900px) {
    .gu-provider-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Rebuilt 2026-09-12 to match the Find Services mockup's own
   .provider-card composition -- was plain stacked paragraphs (category
   label, name, description, details), never brought in line when the
   category-filter cards were fixed earlier. The mockup's per-provider
   PNG logo isn't real data this project collects (no logo/image field
   exists anywhere in ProviderForm/Schema) -- rather than fabricate an
   upload feature, the avatar slot reuses the same category icon the
   filter card above already shows, and the mockup's "tag" is exactly
   the `category_label` the API already returns, just rendered as a
   pill instead of plain text. Everything else here is now real,
   already-available provider data, not invented. */
.gu-provider-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    background: var(--wp--preset--color--surface);
    border: 1px solid var(--wp--preset--color--tint-80);
    border-radius: 16px;
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.gu-provider-card__top {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.gu-provider-card__avatar {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: var(--wp--preset--color--tint-90);
    color: var(--wp--preset--color--text);
    display: grid;
    place-items: center;
}

.gu-provider-card__avatar svg {
    width: 22px;
    height: 22px;
}

.gu-provider-card__name {
    font-size: 0.96875rem;
    font-weight: 700;
    margin: 0 0 2px;
    color: var(--wp--preset--color--text);
}

.gu-provider-card__location {
    display: block;
    font-size: 0.78125rem;
    color: var(--wp--preset--color--tint-60);
}

.gu-provider-card__description {
    font-size: 0.84375rem;
    color: #3a4150;
}

.gu-provider-card__tags {
    display: flex;
    gap: 0.375rem;
    flex-wrap: wrap;
}

.gu-provider-card__tag {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    background: var(--wp--preset--color--tint-90);
    color: #3a4150;
    padding: 3px 9px;
    border-radius: 999px;
}

.gu-provider-card__details {
    font-size: 0.875rem;
    color: var(--wp--preset--color--tint-60);
}

.gu-provider-card__details a {
    color: var(--wp--preset--color--text);
}

.gu-provider-card__details a:hover {
    color: var(--wp--preset--color--red);
}

.gu-provider-card .gu-inquire-btn {
    width: 100%;
}

/* Empty / loading / error states -- a deliberate, consistent layout for
   each rather than a plain sentence sitting in blank space. */
.gu-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
    padding: 3rem 1.5rem;
    border-radius: 16px;
}

.gu-state__icon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    color: var(--wp--preset--color--tint-60);
    margin-bottom: 0.5rem;
}

.gu-state__icon svg {
    width: 24px;
    height: 24px;
}

.gu-state h3 {
    font-size: 1.25rem;
    margin: 0;
    color: var(--wp--preset--color--text);
}

.gu-state p {
    font-size: 1rem;
    color: var(--wp--preset--color--tint-60);
    max-width: 32rem;
    margin: 0;
}

.gu-state .gu-btn {
    margin-top: 0.5rem;
}

.gu-state--empty,
.gu-state--loading {
    background: var(--wp--preset--color--tint-95);
    border: 1px solid var(--wp--preset--color--tint-80);
}

.gu-state--loading .gu-state__icon svg {
    animation: gu-spin 0.9s linear infinite;
}

@keyframes gu-spin {
    to { transform: rotate(360deg); }
}

.gu-state--error {
    background: var(--wp--preset--color--red-tint-90);
    border: 1px solid var(--wp--preset--color--red-tint-90);
}

.gu-state--error .gu-state__icon,
.gu-state--error p {
    color: var(--wp--preset--color--red);
}

.gu-submission-toggle {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--wp--preset--color--tint-80);
}

.gu-submission-note {
    font-size: 0.875rem;
    color: var(--wp--preset--color--tint-60);
    margin-bottom: 1rem;
}

.gu-inquire-btn {
    margin-top: 1rem;
}

/* ------------------------------------------------------- Inquire modal */
/* Matches the Find Services Page Mockup's own .modal-overlay/.modal-panel
   treatment exactly -- the one real feature gap found during the
   2026-09-11 mockup sweep: Privacy Policy's live text already describes
   this exact "Inquire" data flow, but find-services.js never had it. */
.gu-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(28, 37, 49, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 1.5rem;
}

/* Real, severe bug found live 2026-09-11: this class's own `display:flex`
   had no [hidden] guard, so the browser's low-specificity UA rule for
   [hidden] lost the cascade to this later-loaded class rule -- the
   overlay rendered visible (a full-page dark scrim + an empty panel)
   on EVERY Find Services page load, before any JS ever called
   openInquireModal(), blocking the whole page. find-services.js was
   never wrong (it correctly toggles the real `hidden` DOM property);
   the CSS just never respected it. */
.gu-modal-overlay[hidden] {
    display: none;
}

.gu-modal-panel {
    background: var(--wp--preset--color--surface);
    border-radius: 16px;
    max-width: 30rem;
    width: 100%;
    padding: 2rem;
    position: relative;
    max-height: 90vh;
    overflow-y: auto;
    box-sizing: border-box;
}

.gu-modal-close {
    position: absolute;
    top: 0.875rem;
    right: 0.875rem;
    background: none;
    border: none;
    font-size: 1.375rem;
    line-height: 1;
    cursor: pointer;
    color: var(--wp--preset--color--tint-60);
    width: 2rem;
    height: 2rem;
    display: grid;
    place-items: center;
    border-radius: 8px;
    font-family: inherit;
}

.gu-modal-close:hover {
    background: var(--wp--preset--color--tint-90);
    color: var(--wp--preset--color--text);
}

.gu-modal-panel h2 {
    font-size: 1.375rem;
    margin-bottom: 0.25rem;
}

.gu-modal-sub {
    font-size: 0.84375rem;
    color: var(--wp--preset--color--tint-60);
    margin-bottom: 1.25rem;
}

.gu-modal-panel label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 700;
    margin-bottom: 0.375rem;
    color: var(--wp--preset--color--text);
}

.gu-modal-panel textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--wp--preset--color--tint-80);
    border-radius: 10px;
    padding: 0.75rem;
    font-family: var(--wp--preset--font-family--body);
    font-size: 0.875rem;
    color: var(--wp--preset--color--text);
    resize: vertical;
    margin-bottom: 1.25rem;
}

.gu-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.875rem;
    margin-bottom: 1.375rem;
}

@media (max-width: 480px) {
    .gu-form-grid {
        grid-template-columns: 1fr;
    }
}

.gu-form-grid input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--wp--preset--color--tint-80);
    border-radius: 10px;
    padding: 0.6875rem 0.75rem;
    font-family: var(--wp--preset--font-family--body);
    font-size: 0.875rem;
    color: var(--wp--preset--color--text);
}

.gu-modal-panel textarea:focus-visible,
.gu-form-grid input:focus-visible {
    outline: 2px solid var(--wp--preset--color--text);
    outline-offset: 1px;
}

.gu-inquire-send {
    width: 100%;
}

.gu-modal-note {
    font-size: 0.78125rem;
    color: var(--wp--preset--color--tint-60);
    margin-top: 0.875rem;
    text-align: center;
    line-height: 1.5;
}

.gu-modal-note a {
    color: inherit;
    text-decoration: underline;
}

.gu-modal-success {
    text-align: center;
    padding: 0.75rem 0;
}

.gu-modal-success__ic {
    display: inline-grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 999px;
    background: var(--wp--preset--color--gold);
    color: var(--wp--preset--color--text);
    margin-bottom: 1rem;
}

.gu-modal-success__ic svg {
    width: 1.75rem;
    height: 1.75rem;
}

.gu-modal-success p {
    color: var(--wp--preset--color--tint-60);
    margin: 0.5rem 0 1.25rem;
}

/* ---------------------------------------------------------------- Header */
/* Found 2026-09-12, sitewide (every page, not just one): WordPress's own
   core default rule `:where(.wp-site-blocks) > * {margin-block: 1.2rem 0}`
   adds 19.2px above every top-level template block, including <main> --
   a real, structural gap between the header and the page content that
   sat there invisibly the whole time, indistinguishable from the header
   itself since both were plain white. It only became visible/confusing
   once the header's own hairline (which had been masking it with a
   clean dividing line regardless of any extra margin below it) was
   removed -- at that point it read as leftover, asymmetric space
   "inside" the header, directly below the logo/nav, even though the
   header's own box (.gu-header__inner) was genuinely centered the whole
   time. Zeroed out here since neither the mockup nor this design has
   ever called for a visible gap between the header and the page. */
/* header + main, not .gu-header + main -- found 2026-09-12: .gu-header
   is the INNER header (this theme's own group), nested inside an OUTER
   WP-generated <header class="wp-block-template-part"> wrapper. main is
   a sibling of THAT outer header, not of .gu-header, so a selector
   scoped to the inner class never matched at all. */
header + main {
    margin-top: 0;
}

.gu-header__inner {
    /* Converted from a WP-managed "flex" layout block to plain, manually-
       written CSS -- found 2026-09-12: WordPress's own generated layout
       CSS for this block was applying BOTH a generic
       `.is-layout-constrained > :where(...) {max-width: var(--wp--style
       --global--content-size)}` rule (760px, Twenty Twenty-Five's
       narrower default reading width -- never intended for a header row)
       AND flex-wrap:wrap (from `.is-layout-flex{flex-wrap:wrap}`), which
       together forced the logo and nav onto two stacked rows well before
       any width where they should have needed to -- confirmed live from
       760px up through at least 950px. Matches the mockup's own
       `.header-inner` exactly, and the same manual-wrapper pattern
       already used successfully for `.gu-hero__inner`. */
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    max-width: 1200px;
    margin-inline: auto;
    padding-block: 1rem;
    padding-inline: 2rem;
    border-bottom: 1px solid var(--wp--preset--color--tint-80);
}

/* Homepage and Pathway Finder are the 2 pages whose content sits flush
   against the header with no gap (hero photo / light-gray page
   background) -- the hairline reads as a stray seam right above them.
   Every other page's content is plain white directly below the header,
   where the mockup's own hairline is correct and un-exceptioned. */
body.home .gu-header__inner,
header:has(+ .gu-pathway-finder-page) .gu-header__inner {
    border-bottom: none;
}

.gu-header__brand img {
    /* 52px, matching the Full Homepage Mockup's `.brand img` exactly --
       found 2px too short during the 2026-09-12 font-size/spacing sweep. */
    height: 52px;
    width: auto;
    display: block;
}

/* Neither the logo link nor the nav links had ever been given their own
   focus styling, so clicking either left the browser's own default
   outline showing through -- flagged directly 2026-09-12 as an ugly
   black/red box. Replaced with the same on-brand ink outline every
   other interactive element on the site already uses on :focus-visible
   (keyboard focus only -- a plain mouse click no longer shows a ring
   at all, matching every modern browser's own focus-visible heuristic). */
.gu-header__brand:focus {
    outline: none;
}

.gu-header__brand:focus-visible {
    outline: 2px solid var(--wp--preset--color--text);
    outline-offset: 2px;
}

.gu-header__nav a:focus {
    outline: none;
}

.gu-header__nav a:focus-visible {
    outline: 2px solid var(--wp--preset--color--text);
    outline-offset: 4px;
}

.gu-header__nav a {
    /* Real permanent underline that thickens and turns red on hover,
       matching the mockup's `nav a`/`nav a::after` exactly -- found
       2026-09-12: this only ever changed the text color on hover, no
       underline existed at all. */
    /* line-height:1 -- found 2026-09-12: the inherited sitewide 1.5
       body line-height was adding ~7px of invisible space below the
       glyphs before the 2px padding-bottom even started, so the
       underline sat much further from the text than the mockup's
       (which never sets a line-height this generous on nav links). */
    position: relative;
    display: inline-block;
    line-height: 1;
    padding-bottom: 2px;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--wp--preset--color--text);
    margin-inline-start: 1.5rem;
}

.gu-header__nav a:first-child {
    margin-inline-start: 0;
}

.gu-header__nav a::after {
    /* border-bottom, not a background-filled height block -- found
       2026-09-12: a 1px background-color box rendered visibly heavier
       than a genuine 1px border at this display's pixel ratio (the
       footer's own border-bottom-based underline, by contrast, stayed
       crisp), so this now uses the same border technique the footer
       always has, just moved onto an absolutely-positioned pseudo-
       element so the hover thickening below can't shift layout. */
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 0;
    border-bottom: 1px solid var(--wp--preset--color--text);
    transition: border-bottom-width 0.15s, border-bottom-color 0.15s;
}

.gu-header__nav a:hover::after {
    border-bottom-width: 3px;
    border-bottom-color: var(--wp--preset--color--red);
}

/* line-height:1 on the <p> itself -- found 2026-09-12, same strut-
   mismatch class as the panel-item/trust-badge fix: the <a> children
   already have line-height:1, but the <p> wrapping them had none of
   its own, so it inherited the global 16px/1.5 = a 24px line-box strut
   around 16px text -- confirmed live, the nav box centered correctly
   against the logo (both at the header's 42px midpoint) but the actual
   link glyphs sat 2.4px below that center because of the strut. */
.gu-header__nav {
    /* margin:0 -- found 2026-09-12: this <p> still had the browser's
       default paragraph margin (19.2px top, 0 bottom) -- flexbox centers
       an item's MARGIN box, so that asymmetric margin was shifting the
       whole nav element down within the header row regardless of the
       line-height fix below. */
    margin: 0;
    line-height: 1;
}

@media (max-width: 759px) {
    .gu-header__nav {
        display: none;
    }
}

/* ------------------------------------------------------------------ Hero */
/* Rebuilt 2026-09-11 to match the Full Homepage Mockup exactly -- the
   previous version (photo as a full-bleed dimmed background, "Dreaming
   about a life..." as the H1) was an older, pre-refresh treatment that
   had wrongly been claimed as "live-verified" against the mockup for
   two days without ever actually being compared to it. The mockup's
   real hero is a photo on the right (object-position: left 38%) with a
   solid-to-transparent Charcoal gradient fading in from the left,
   carrying the headline/CTA/trust line -- one image element, not two
   separate panels. */
.gu-hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    background: var(--wp--preset--color--text);
}

.gu-hero__bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 45%;
    z-index: 0;
    overflow: hidden;
}

.gu-hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left 38%;
}

.gu-hero__bg::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 45%;
    z-index: 2;
    background: linear-gradient(90deg, var(--wp--preset--color--text) 0%, rgba(28, 37, 49, .85) 30%, rgba(28, 37, 49, .4) 65%, rgba(28, 37, 49, 0) 100%);
}

.gu-hero__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(28, 37, 49, .1) 0%, rgba(28, 37, 49, .2) 55%, rgba(28, 37, 49, .6) 100%);
}

.gu-hero__inner {
    /* Flat 72px/32px/88px at every width, matching the mockup's
       `.hero-inner` exactly -- found 2026-09-12: this used to shrink to
       48px/24px/56px on mobile and grow to 96px/48px/88px on desktop
       (a min-width:900px override below), neither of which the mockup
       actually has -- its own padding never changes by viewport. */
    position: relative;
    z-index: 1;
    max-width: var(--wp--style--global--wide-size, 1200px);
    margin-inline: auto;
    padding: 4.5rem 2rem 5.5rem;
    text-align: left;
}

.gu-hero__headline {
    font-size: 2.125rem;
    line-height: 1.15;
    margin-bottom: 2rem;
}

.gu-hero__headline .gu-hero__headline-white {
    color: #fff;
}

.gu-hero__headline .gu-hero__headline-red {
    color: var(--wp--preset--color--red);
}

.gu-cta .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
    min-height: 48px;
    background-color: var(--wp--preset--color--gold);
    color: var(--wp--preset--color--text);
    font-weight: 700;
    border: 2px solid var(--wp--preset--color--gold);
    border-radius: 8px;
    padding-inline: 1.5rem;
    padding-block: 0;
    font-size: 1rem;
}

.gu-cta .wp-block-button__link:hover {
    filter: brightness(0.94);
}

.gu-cta .wp-block-button__link:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Trailing chevron on a text-then-icon CTA link ("Find my Pathway",
   "List Your Service", "Find services..."): the padding on each side of
   this inline-flex row IS symmetric (confirmed directly), but the
   button still reads as off-center, because equal padding isn't equal
   INK. Lucide's chevron-right path only occupies the middle 25% of its
   24x24 viewBox (x=9 to x=15) -- so the icon's own box carries a real,
   invisible 0.375em margin on each of ITS sides. Appended after text
   with just a flex `gap`, that inset is invisible on the icon's INNER
   (left) side -- it just merges into the gap -- but is genuine, extra,
   uncounted empty space on its OUTER (right) side, pushing the last
   visible pixel further from the button's right edge than the first
   visible text pixel sits from the left. Measured directly (canvas
   text-metrics for the label's real ink bounds + the chevron's own
   viewBox geometry for its ink bounds) on the real hero button: 25.60px
   of real visual gap on the left, 31.60px on the right, before this
   fix -- pulling the icon in by exactly that same 0.375em closes the
   gap to 25.60px on both sides, confirmed by re-measuring live, not
   assumed from the math alone. Scoped to the 3 real text+trailing-
   chevron CTA links this applies to -- NOT a blanket last-child rule,
   since other icon usages (badges, etc.) aren't this same shape. */
.gu-cta .wp-block-button__link svg,
.gu-footer .wp-block-button.is-style-outline .wp-block-button__link svg,
.gu-result-cta svg {
    margin-right: -0.375em;
}

.gu-hero__buttons {
    margin-bottom: 1rem;
}

.gu-hero__caveat {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.84375rem;
    color: rgba(255, 255, 255, .8);
}

.gu-hero__caveat svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

@media (min-width: 900px) {
    .gu-hero__headline {
        font-size: 3.25rem;
    }
}

@media (max-width: 640px) {
    /* The mockup's own mobile fallback keeps the photo full-bleed
       behind the text rather than trying to preserve the 45%-split
       layout at narrow widths. */
    .gu-hero__bg {
        left: 0;
    }

    .gu-hero__bg::before {
        width: 100%;
        background: linear-gradient(180deg, rgba(28, 37, 49, .55) 0%, rgba(28, 37, 49, .78) 100%);
    }
}

/* -------------------------------------------------------------- Intro */
/* Matches the mockup's separate "Dreaming about a life..." section --
   this is NOT the same content as the old hero's "How it works" card,
   which doesn't exist anywhere on the homepage mockup at all; that
   3-step flow belongs only to the How It Works page. */
.gu-intro {
    /* padding-inline: 2rem (32px), matching the mockup's `.intro{padding:
       72px 32px}` -- found 2026-09-12: this section (and the 3 below it)
       relied on Twenty Twenty-Five's own inherited fluid gutter instead
       of a fixed value, which computed to ~50px on desktop -- visibly
       wider-margined than the mockup at every width. */
    padding-block: 4.5rem;
    padding-inline: 2rem;
    background: var(--wp--preset--color--light-gray);
}

.gu-intro__card {
    /* box-sizing:border-box -- found 2026-09-12: this card is a direct
       child of the section's WP-generated constrained-layout rule
       (max-width:1200px), but without border-box its own padding/border
       were added ON TOP of that 1200px, rendering ~82px wider than
       .gu-pathway-grid below (which has no padding/border of its own) --
       a real left/right misalignment against the cards below it. */
    box-sizing: border-box;
    background: var(--wp--preset--color--surface);
    border: 1px solid var(--wp--preset--color--tint-80);
    border-radius: 16px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.gu-intro__text {
    /* flex:1 -- found 2026-09-12, missing entirely: without it this
       column defaults to flex:0 1 auto (sized to its own content, not
       the row's remaining space), so it rendered far narrower than the
       card actually had room for -- the real reason the headline and
       body copy wrapped/measured narrower than the mockup, matching
       the mockup's own `.intro-text{flex:1}`. */
    flex: 1;
}

.gu-intro__card h2 {
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
}

.gu-intro__sub {
    font-family: var(--wp--preset--font-family--heading);
    font-weight: 600;
    font-size: 1.1875rem;
    color: var(--wp--preset--color--red);
    margin-bottom: 1.5rem;
}

.gu-intro__card h3 {
    font-size: 1.25rem;
    margin: 0 0 0.875rem;
}

.gu-intro__card p.gu-intro__body {
    font-size: 1rem;
    color: var(--wp--preset--color--text);
    margin-bottom: 1.25rem;
    text-align: justify;
    hyphens: auto;
}

/* Mockup gives only the FIRST body paragraph (right after the first h3)
   an extra 16px top margin via inline style -- matching that exactly
   rather than adding it to every h3, which would double it for the
   second h3/paragraph pair below. */
.gu-intro__card h3:first-of-type + p.gu-intro__body {
    margin-top: 1rem;
}

.gu-intro__tagline {
    font-weight: 700;
    font-size: 1rem;
    margin-top: 0.25rem;
}

.gu-intro__panel {
    /* box-sizing:border-box -- same content-box bug as .gu-intro__card:
       the fixed 230px width (set at 900px+ below) was rendering as
       230+44(padding)=274px, stealing ~44px from .gu-intro__text's
       share of the row. */
    box-sizing: border-box;
    background: var(--wp--preset--color--tint-90);
    border-radius: 16px;
    padding: 1.375rem;
    display: flex;
    flex-direction: column;
    gap: 1.375rem;
}

.gu-panel-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.gu-panel-item__ic {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: var(--wp--preset--color--gold);
    display: grid;
    place-items: center;
}

.gu-panel-item__ic svg {
    width: 20px;
    height: 20px;
    color: var(--wp--preset--color--text);
}

.gu-panel-item strong {
    /* line-height:normal -- found 2026-09-12: no rule here overrode the
       inherited global 1.5 (same leaking-line-height class already
       fixed for nav/footer links), inflating the gap to the "span"
       description below it beyond what the mockup renders (it never
       sets a line-height here either, so it uses the browser default). */
    display: block;
    font-size: 0.90625rem;
    font-weight: 700;
    line-height: normal;
    color: var(--wp--preset--color--text);
    margin-bottom: 2px;
}

.gu-panel-item span {
    font-size: 0.8125rem;
    color: #3a4150;
    line-height: 1.4;
}

/* Fixes a real, confirmed-live line-spacing bug: the plain <div> wrapping
   strong+span in each panel-item/trust-badge has no font-size/line-height
   of its own, so it inherits the global 16px/1.5 -- giving every line box
   inside it a minimum "strut" height of 24px. Since that's LARGER than
   the span's own declared line-height (1.4 x 13px = 18.2px), the strut
   wins: measured live, the span's wrapped lines sat 24px apart, not
   18.2px, even though line-height:1.4 was correctly applied all along.
   Setting the div's own font-size/line-height to match the span's
   eliminates the mismatched strut. */
.gu-panel-item > div,
.gu-trust-badge > div {
    font-size: 0.8125rem;
    line-height: 1.4;
}

@media (min-width: 900px) {
    .gu-intro__card {
        flex-direction: row;
        align-items: center;
        padding: 2.5rem;
        gap: 2.5rem;
    }

    .gu-intro__panel {
        width: 230px;
        flex-shrink: 0;
    }
}

/* ---------------------------------------------------------- Pathway cards */
.gu-pathways {
    padding-block: 4rem;
    padding-inline: 2rem;
}

/* Flat 30px, matching the mockup's `.section-inner h2` exactly -- these
   are bare core-heading blocks with no className of their own, so
   without this they fall through to Twenty Twenty-Five's own inherited
   clamp() size (~30-32px depending on viewport) instead of a fixed
   value. Scoped to just these 3 homepage sections, not global -- other
   pages' `.gu-page h2` already correctly implements DESIGN-SPEC's own
   28px H2 figure, which is a real, separate, intentional value for
   those pages, not a mismatch to reconcile with this one. */
.gu-pathways h2,
.gu-why-germany h2,
.gu-services-shortcut h2 {
    /* margin-top:0 matches the mockup's global `h1,h2,h3{margin:0}`
       reset -- without it, these inherit Twenty Twenty-Five's own
       ~24.9px default heading margin-top, which (via margin-collapse)
       dominates over .gu-section-kicker's own margin-bottom, leaving
       the kicker much further from the heading than intended. */
    font-size: 1.875rem;
    margin-top: 0;
    margin-bottom: 0.75rem;
}

/* Groups kicker+h2+lead into ONE shared block -- found 2026-09-12: these
   3 elements used to be separate direct children of the section's own
   WP "constrained" layout group, which independently max-widths and
   auto-centers EACH child. That's harmless when every child shares the
   same 1200px cap (kicker/h2 coincidentally lined up), but broke the
   moment .gu-section-lead got its own narrower 34rem cap -- its
   independent centering point differs from h2's, so no margin override
   could make their left edges coincide (confirmed live at a 1920px
   viewport: h2 centered at x=352, the paragraph pinned to x=32). Wrapping
   them in one plain, non-WP-managed div (matching the .gu-hero__inner
   pattern already used for the hero) makes WP center this ONE box
   instead, with the lead paragraph's narrower width now just ordinary
   left-aligned block flow inside it. */
.gu-section-header {
    display: block;
}

.gu-section-kicker {
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--wp--preset--color--red);
    display: block;
    margin-bottom: 10px;
}

/* Matches the mockup's `.section-inner > p.lead` exactly -- found
   2026-09-12: these 3 section-lead paragraphs (pathways/why-germany/
   services-shortcut) were plain, unstyled core paragraph blocks with
   no className at all, so they had none of this: full section width
   instead of the mockup's narrower reading measure, default ink color
   instead of the slightly muted #4a5261, and no justify/hyphens. Also
   not documented in DESIGN-SPEC.md -- lives only as this mockup value. */
.gu-section-lead {
    max-width: 34rem;
    font-size: 1rem;
    color: #4a5261;
    text-align: justify;
    hyphens: auto;
}

.gu-pathway-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin-top: 2rem;
}

/* Photo-card treatment, matching the mockup exactly -- real photography
   on top, white body below, not the earlier icon-only card. */
.gu-pathway-card {
    background: var(--wp--preset--color--surface);
    border: 2px solid var(--wp--preset--color--tint-80);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    transition: border-color 0.15s ease;
}

.gu-pathway-card:hover {
    /* Matches .gu-services-cat-card:hover exactly (Find Services) --
       tint-60, not gold; border-width matched to 2px (was 1px) so the
       card's base state also matches the cat-card's own weight. */
    border-color: var(--wp--preset--color--tint-60);
}

.gu-pathway-card:focus {
    outline: none;
}

.gu-pathway-card:focus-visible {
    outline: 2px solid var(--wp--preset--color--text);
    outline-offset: 2px;
}

.gu-pathway-card__photo {
    height: 140px;
    overflow: hidden;
}

.gu-pathway-card__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gu-pathway-card__body {
    /* Row layout with the arrow inline, matching the Find Services
       shortcut cards exactly -- found 2026-09-12: this used to be a
       flex-column stacking h3/p/arrow, with the arrow pushed to the
       bottom via margin-top:auto, landing far from the text whenever a
       card's description left unused vertical space above it.
       align-items:flex-end (not center) -- found 2026-09-12: centering
       put the arrow at the midpoint between the h3 and the description,
       matching neither line; flex-end lines it up with the description
       text specifically, per direct feedback. */
    padding: 1.25rem;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.5rem;
    flex: 1;
}

.gu-pathway-card__text {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.gu-pathway-card h3 {
    font-size: 1.1875rem;
    margin: 0;
    color: var(--wp--preset--color--text);
}

.gu-pathway-card p {
    font-size: 0.875rem;
    color: var(--wp--preset--color--tint-60);
    margin: 0;
}

.gu-pathway-card__go {
    color: var(--wp--preset--color--red);
    font-size: 1.1875rem;
    line-height: 1;
    flex-shrink: 0;
}

@media (min-width: 900px) {
    .gu-pathway-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ---------------------------------------------------------- Why Germany */
.gu-why-germany {
    padding-block: 4rem;
    padding-inline: 2rem;
    border-top: 1px solid var(--wp--preset--color--tint-80);
    /* Alternating white/light-gray section backgrounds, per
       DESIGN-SPEC.md's Background rule -- Light Gray is a dedicated flat
       neutral for full-width SECTION backgrounds, distinct from the
       Charcoal tints (which stay reserved for cards/panels within a
       section). */
    background: var(--wp--preset--color--light-gray);
}

.gu-facts {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-block: 1.5rem;
}

.gu-fact {
    background: var(--wp--preset--color--surface);
    border: 1px solid var(--wp--preset--color--tint-80);
    border-radius: 16px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
}

/* Solid Gold icon badge, matching the mockup exactly -- was the
   lighter Gold-Tint-90 badge used elsewhere on the site; Why Germany's
   own fact cards use the stronger solid fill. */
.gu-fact__ic {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: var(--wp--preset--color--gold);
    color: var(--wp--preset--color--text);
    display: grid;
    place-items: center;
    margin-bottom: 1rem;
}

.gu-fact__ic svg {
    width: 24px;
    height: 24px;
}

.gu-fact h3 {
    font-size: 1.1875rem;
    margin: 0 0 0.5rem;
}

.gu-fact p {
    /* text-align:justify + hyphens:auto matches the mockup's `.fact p`
       exactly. */
    margin: 0;
    color: #4a5261;
    font-size: 0.875rem;
    text-align: justify;
    hyphens: auto;
}

@media (min-width: 900px) {
    .gu-facts {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* -------------------------------------------------------- Services shortcut */
.gu-services-shortcut {
    padding-block: 4rem;
    padding-inline: 2rem;
}

.gu-shortcut-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin-top: 2rem;
}

/* Reuses the pathway card's exact shape (photo + white body), just a
   shorter body (title + arrow, no description) and a smaller photo,
   matching the mockup's own reuse of .pathway-card for these. */
.gu-shortcut-card {
    background: var(--wp--preset--color--surface);
    border: 2px solid var(--wp--preset--color--tint-80);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    transition: border-color 0.15s ease;
}

.gu-shortcut-card:hover {
    /* Matches .gu-services-cat-card:hover exactly (Find Services) --
       tint-60, not gold; border-width matched to 2px (was 1px). */
    border-color: var(--wp--preset--color--tint-60);
}

.gu-shortcut-card:focus {
    outline: none;
}

.gu-shortcut-card:focus-visible {
    outline: 2px solid var(--wp--preset--color--text);
    outline-offset: 2px;
}

.gu-shortcut-card__photo {
    height: 100px;
    overflow: hidden;
    background: var(--wp--preset--color--text);
}

.gu-shortcut-card__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gu-shortcut-card__body {
    padding: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.gu-shortcut-card h3 {
    font-size: 1.1875rem;
    margin: 0;
    color: var(--wp--preset--color--text);
}

.gu-shortcut-card__go {
    color: var(--wp--preset--color--red);
    font-size: 1.1875rem;
    line-height: 1;
    flex-shrink: 0;
}

@media (min-width: 900px) {
    .gu-shortcut-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* -------------------------------------------------------- Trust badges */
/* The repeated trust-badge strip between Find Services and Find My
   Path -- didn't exist on the real homepage at all before this fix. */
.gu-trust-badges {
    background: var(--wp--preset--color--light-gray);
    padding: 3.125rem 2rem;
}

.gu-trust-badges__row {
    max-width: var(--wp--style--global--wide-size, 1200px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

.gu-trust-badge {
    /* center, not flex-start -- per direct feedback, the icon should be
       vertically centered against the heading, not top-aligned with it. */
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
}

/* Matches the mockup's own `.badge-row-light .badge-row .badge:nth-
   child(2){padding-top:10px}` exactly -- "Trusted Information" is the
   only badge with a 2-line description, so centering its icon against
   its own (taller) text column pulls its heading ~9px above the other
   3 badges' headings. This nudges it back down to match them. */
.gu-trust-badges__row .gu-trust-badge:nth-child(2) {
    padding-top: 10px;
}

.gu-trust-badge__ic {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: var(--wp--preset--color--gold);
    display: grid;
    place-items: center;
}

.gu-trust-badge__ic svg {
    /* color set here directly, not inherited from .gu-trust-badge__ic's
       own `color` -- found 2026-09-12: .gu-trust-badge__ic is itself a
       <span>, so the generic `.gu-trust-badge span{color:tint-60}` rule
       (higher specificity: class+element vs this selector's class-only)
       was winning and overriding the icon's own intended ink color,
       rendering it a washed-out gray instead of matching the mockup.
       .gu-panel-item__ic already avoided this exact conflict by setting
       color on its own svg directly -- matching that pattern here. */
    width: 20px;
    height: 20px;
    color: var(--wp--preset--color--text);
}

.gu-trust-badge strong {
    /* Same fix as .gu-panel-item strong above -- identical component
       reused here, same missing-line-height leak from the inherited
       global 1.5. */
    display: block;
    font-size: 0.90625rem;
    font-weight: 700;
    line-height: normal;
    color: var(--wp--preset--color--text);
    margin-bottom: 2px;
}

.gu-trust-badge span {
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--wp--preset--color--tint-60);
}

@media (min-width: 900px) {
    .gu-trust-badges__row {
        grid-template-columns: repeat(4, 1fr);
        align-items: center;
    }
}

/* -------------------------------------------------------- Pathway Finder */
/* The Pathway Finder is its own dedicated page (`/pathway-finder/`), not
   an inline homepage section -- found 2026-09-11: the Full Homepage
   Mockup has no embedded questionnaire section anywhere in it; every
   "Find my Pathway" entry point on it opens the separate Pathway Finder
   Questionnaire Mockup as its own page, the same one-mockup-file-per-
   real-page pattern every other page in this project already follows.
   This class is this page's own <main> wrapper (see templates/
   page-pathway-finder.html) -- light-gray, full-bleed, matching the
   mockup's own page-wide `body{background:var(--light-gray)}`, unlike
   every other page's plain-white background. */
.gu-pathway-finder-page {
    /* 28px/24px/80px, matching the mockup's `main{padding:28px 24px 80px}`
       exactly -- found 2026-09-12: horizontal padding was relying on
       Twenty Twenty-Five's inherited fluid gutter (~50px on desktop),
       the same systemic issue already fixed on every other page's
       sections, and the vertical values had never actually been
       checked against the mockup's own. */
    min-height: 70vh;
    padding: 1.75rem 1.5rem 5rem;
    background: var(--wp--preset--color--light-gray);
}

#gu-app {
    /* 760px, matching the Pathway Finder Questionnaire mockup's own
       `main{max-width:760px}` exactly -- was 40rem/640px, visibly
       narrower/tighter than the mockup's actual card width. */
    max-width: 47.5rem;
    margin: 2rem auto 0;
}

.gu-card {
    /* White card on the section's Light Gray background, matching the
       Pathway Finder Questionnaire mockup's own .card treatment exactly
       (body: Light Gray, card: white) -- was Tint 90 before the section
       itself had a Light Gray background of its own to contrast against.
       min-height + flex-column matches the mockup's own `.card` exactly
       (36px/40px padding, 360px min-height, column flex so `.gu-actions`
       can sit pinned to the bottom via margin-top:auto below) -- was a
       plain 24px-padding box with no min-height, visibly shorter/denser
       than every mockup screen. */
    background: var(--wp--preset--color--surface);
    border: 1px solid var(--wp--preset--color--tint-80);
    border-radius: 16px;
    padding: 2.25rem 2.5rem;
    min-height: 22.5rem;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.gu-lead-form-card {
    margin-top: 1.5rem;
}

.gu-progress {
    /* Restyled as the mockup's `.q-eyebrow` (small Tint-60 kicker above
       the real title) -- was plain small gray text with no defined
       relationship to the heading below it. margin-top:0 matches the
       mockup's global `p{margin:0}` reset -- without it, this <p> (the
       card's first child) inherited a 13px default top margin, pushing
       it well below the card's own 36px padding and leaving a visibly
       larger gap at the top of the card than the Next button has at
       the bottom. */
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--wp--preset--color--tint-60);
    margin-top: 0;
    margin-bottom: 0.5rem;
}

/* Real top progress bar, added 2026-09-11 -- matches the Pathway Finder
   Questionnaire mockup's `.progress-wrap`/`.progress-label`/
   `.progress-track`/`.progress-fill` exactly. Sits above `.gu-card`,
   inside `#gu-app`'s own 47.5rem-max-width column, so it lines up with
   the card below it without needing its own width rule. */
.gu-progress-bar-wrap {
    /* Inset to match .gu-card's own 40px padding + 1px border, so the
       bar's left/right edges line up with the option cards' own edges
       inside the card, not the outer card's own border -- direct owner
       instruction (2026-09-13). */
    padding-inline: calc(2.5rem + 1px);
    margin-bottom: 0.875rem;
}

.gu-progress-bar-label {
    font-size: 0.78125rem;
    font-weight: 600;
    color: var(--wp--preset--color--tint-60);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.5rem;
    display: flex;
    justify-content: space-between;
}

.gu-progress-bar-track {
    height: 0.375rem;
    border-radius: 999px;
    background: var(--wp--preset--color--tint-90);
    overflow: hidden;
}

.gu-progress-bar-fill {
    height: 100%;
    background: var(--wp--preset--color--gold);
    border-radius: 999px;
    transition: width 0.35s ease;
}

.gu-question__label {
    /* Matches the mockup's `.q-title` exactly -- a real Bitter-serif
       heading, not a small bold UI label. This class is shared by every
       screen's main heading (question label, pre-lead's "Your starting
       point looks promising!", the lead form's "Almost there!"), so this
       one fix raises all of them to the mockup's actual heading weight
       at once. margin-top:0 matches the mockup's global `p{margin:0}`
       reset -- without it, this <p> inherited a ~26px default top
       margin that (since flex children never collapse margins) ADDED to
       .gu-progress's own margin-bottom instead of the two collapsing,
       leaving 34px between the eyebrow and the title instead of the
       intended 8px. */
    font-family: var(--wp--preset--font-family--heading);
    font-size: 1.625rem;
    font-weight: 700;
    line-height: 1.2;
    margin-top: 0;
    margin-bottom: 0.375rem;
    color: var(--wp--preset--color--text);
}

/* Matches the mockup's `.q-sub` exactly -- found missing sitewide
   2026-09-11: the real questionnaire showed every question's bare label
   with zero explanatory context, while the mockup gives every single
   question a short reassuring/contextual subtitle ("No pressure to have
   a specific plan yet...", "Exactly where you are today...", etc.).
   `question.sub` is optional -- omitted entirely (not an empty
   paragraph) when a question has none. */
.gu-question__sub {
    font-size: 0.9375rem;
    color: #3a4150;
    margin-bottom: 1.75rem;
}

/* Secondary in-card section labels (e.g. "Where you stand", "Next steps"
   inside the unlocked result) -- Body-size bold, never an inline one-off
   font-size like the earlier version used. */
.gu-subheading {
    font-size: 1rem;
    font-weight: 700;
    margin: 1.5rem 0 0.5rem;
    color: var(--wp--preset--color--text);
}

.gu-options {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

/* 2-column icon-card grid -- goal/field questions only, matching the
   mockup's own opt-grid (no `.single` modifier) exactly; every other
   question keeps the plain single-column `.gu-options` above, matching
   the mockup's `.opt-grid.single`. */
.gu-options--grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

@media (max-width: 640px) {
    .gu-options--grid {
        grid-template-columns: 1fr;
    }
}

/* Idle state sits on white/surface with a 2px border, matching the
   mockup's `.opt` exactly (was 1px on the page background token, a
   visibly lighter/thinner card). Hover is a subtle same-hue change only
   (never a color swap). Selected is the one state allowed to swap to
   Gold, per the spec's interactive-states rule -- this must look
   identical everywhere an option is selected on the site. */
.gu-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-align: left;
    width: 100%;
    box-sizing: border-box;
    min-height: 3.5rem;
    padding: 1rem 1.125rem;
    border: 2px solid var(--wp--preset--color--tint-80);
    border-radius: 12px;
    background: var(--wp--preset--color--surface);
    color: var(--wp--preset--color--text);
    font-size: 0.96875rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.gu-option__icon {
    flex-shrink: 0;
    width: 2.125rem;
    height: 2.125rem;
    border-radius: 8px;
    background: var(--wp--preset--color--tint-90);
    display: grid;
    place-items: center;
    color: var(--wp--preset--color--text);
    transition: background 0.15s ease;
}

.gu-option__icon svg {
    width: 1.125rem;
    height: 1.125rem;
}

.gu-option__label {
    flex: 1;
}

.gu-option:hover {
    border-color: var(--wp--preset--color--tint-60);
}

.gu-option:focus {
    outline: none;
}

.gu-option:focus-visible {
    outline: 2px solid var(--wp--preset--color--text);
    outline-offset: 2px;
}

.gu-option.is-selected {
    /* Charcoal Tint 90 fill only -- direct owner instruction (2026-09-13),
       overriding the prior gold-border decision documented below: the
       background tint change alone is enough to signal selection, and
       swapping the border to gold ON TOP of the click-triggered
       :focus-visible outline (2px solid ink) was rendering as a
       distracting "black and yellow border" combination. Border color
       intentionally left unset here so it keeps whatever .gu-option/
       :hover already set (tint-80 idle, tint-60 hover).
       Prior reasoning, kept for history: Gold border + Tint 90 fill was
       chosen after Gold Tint-90 fill was tried and rejected (invisible
       on white, "pink" on light backgrounds) -- see DESIGN-SPEC.md's
       Interactive States section. */
    background: var(--wp--preset--color--tint-90);
}

.gu-option.is-selected .gu-option__icon {
    background: var(--wp--preset--color--tint-80);
}

/* margin-left: auto (not justify-content:space-between on the parent) so
   this positions correctly whether the option has an icon span before
   the label or not -- space-between would otherwise spread an icon,
   label, and checkmark apart incorrectly instead of grouping icon+label
   together on the left. */
.gu-option.is-selected::after {
    content: "";
    flex-shrink: 0;
    margin-left: auto;
    width: 20px;
    height: 20px;
    background-color: var(--wp--preset--color--text);
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3"><path d="M20 6 9 17l-5-5"/></svg>') center / 70% no-repeat;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3"><path d="M20 6 9 17l-5-5"/></svg>') center / 70% no-repeat;
}

.gu-other-input,
.gu-text-input,
.gu-select-input {
    /* White/surface + 2px border, matching the mockup's `.other-input`
       exactly -- was a Tint-90 gray fill, which nothing in either mockup
       uses for a text field. */
    width: 100%;
    box-sizing: border-box;
    padding: 0.8125rem 1rem;
    border: 2px solid var(--wp--preset--color--tint-80);
    border-radius: 0.625rem;
    background: var(--wp--preset--color--surface);
    font-size: 0.96875rem;
    margin-top: 0.5rem;
}

.gu-other-input:focus-visible,
.gu-text-input:focus-visible,
.gu-select-input:focus-visible {
    /* Border-only feedback, not a separate outline ring outside it --
       an offset outline next to an already-visible 2px border read as
       a distracting double border. */
    outline: none;
    border-color: var(--wp--preset--color--text);
}

.gu-other-input[hidden] {
    display: none;
}

/* Real native <select> for province/city (2026-09-14) -- appearance:none
   plus a hand-drawn chevron background-image so it matches the rest of
   the theme's flat, borderless-control look instead of each browser's
   own default dropdown chrome; font-family inherited explicitly since
   form controls don't inherit it by default in most browsers. The
   disabled placeholder option ("Select…") renders in Tint-60 the same
   way an empty text input's placeholder attribute would. */
.gu-select-input {
    appearance: none;
    -webkit-appearance: none;
    font-family: inherit;
    color: var(--wp--preset--color--text);
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C2531' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 18px;
    padding-right: 2.75rem;
}

.gu-select-input option[value=""] {
    color: var(--wp--preset--color--tint-60);
}

.gu-actions {
    /* margin-top: auto pins this to the bottom of the now flex-column
       `.gu-card`, matching the mockup's `.nav-row{margin-top:auto}`
       exactly -- so Back/Next always sits at the card's bottom edge
       regardless of how much content is above it. */
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 1.75rem;
}

/* Buttons: one shared box for primary and secondary -- 48px min-height,
   24px horizontal padding, 8px radius, bold text. Only fill/border color
   differs between them. Both carry a 2px border (primary's matches its
   own fill so it's invisible) so their rendered size is pixel-identical. */
.gu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    box-sizing: border-box;
    min-height: 48px;
    padding-inline: 1.5rem;
    padding-block: 0;
    border-radius: 8px;
    border: 2px solid transparent;
    /* Real root cause, found live 2026-09-13: with no baseline here,
       a browser whose focus-visible heuristic doesn't suppress the
       ring on a plain mouse click (this varies by browser/engine --
       confirmed happening even in this project's own testing browser
       once checked directly) falls back to ITS OWN native outline,
       which resolves `outline-color` to `currentColor` -- charcoal,
       since that's every one of these buttons' own text color. The
       `:focus-visible` rule below only ever ADDS a ring on top of
       this; it never suppressed the native one underneath, which is
       what was actually rendering as an unwanted black ring on click. */
    outline: none;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    text-decoration: none;
}

/* Real bug, found live 2026-09-13, same root cause already fixed for
   the consent checkbox: reusing a solid charcoal outline for focus
   rendered as a heavy black ring on click -- not in the mockup, and
   not needed for accessibility either (a real focus indicator just
   needs to be visible, not this dark). A gold offset outline is its
   own distinct layer instead, consistent with the checkbox's own
   fix. */
.gu-btn:focus-visible {
    outline: 2px solid var(--wp--preset--color--gold);
    outline-offset: 2px;
}

/* Back/Next specifically get a consistent minimum width -- direct
   project-owner feedback that their icon+text content (which centers
   as one group, not the bare word alone) read as visually off-center
   when the button hugged its content tightly. A little extra breathing
   room on both sides of the group makes the centering unambiguous. */
.gu-actions .gu-btn {
    min-width: 130px;
}

.gu-btn-primary {
    background: var(--wp--preset--color--gold);
    border-color: var(--wp--preset--color--gold);
    color: var(--wp--preset--color--text);
}

.gu-btn-primary:hover:not(:disabled) {
    filter: brightness(0.94);
}

.gu-btn-primary:disabled {
    background: var(--wp--preset--color--tint-90);
    border-color: var(--wp--preset--color--tint-90);
    color: var(--wp--preset--color--tint-60);
    cursor: not-allowed;
}

.gu-btn-secondary {
    /* Tint-60, not full charcoal -- direct project-owner feedback that
       the solid-ink border read as too dominant/heavy. Text/icon stay
       charcoal for readability; only the border lightens. */
    background: transparent;
    border-color: var(--wp--preset--color--tint-60);
    color: var(--wp--preset--color--text);
}

.gu-btn-secondary:hover {
    background: var(--wp--preset--color--tint-95);
}

/* Icon + label nav buttons (Back/Next/Get my roadmap/Print/Save link):
   REVERTED 2026-09-14 from a 3-column grid (icon-slot / label /
   icon-slot, with an empty equal-width phantom slot on whichever side
   has no icon) back to plain group-centering. That grid design made the
   LABEL text itself geometrically dead-center in the button -- verified
   directly: 51.6px from each edge -- but a live screenshot plus a direct
   bounding-box measurement showed the actual VISIBLE content (icon +
   label together, which is what a reader actually looks at) was badly
   asymmetric: on a 340px-wide button, something visible started 25.6px
   from the icon-side edge but 51.6px from the empty-phantom-slot side --
   the icon visually hugs the text while the "matching" empty slot on the
   other side is a total, uninterrupted void with nothing to balance it,
   since an icon only ever exists on ONE side of these buttons. Centering
   the label alone and centering the icon+label cluster are mutually
   exclusive whenever the icon is one-sided -- they can't both be exactly
   centered. Measured plain group-centering as the actual fix: with
   `justify-content:center` on the whole row, the icon+label CLUSTER
   lands centered to within 0.02px (93.86px vs 93.875px from each edge on
   the same 340px test button) -- the label itself sits ~13px off center
   as a result, but that's what every ordinary icon+label button (Next →,
   Back ←, etc. across the web) already does, and it does not read as
   "off" the way the phantom-void version visibly did. No markup change
   needed: `.gu-btn__side`'s empty span (whichever side has no icon,
   built by navButtonHtml() in pathway-finder.js) naturally collapses to
   0 width once it's a flex item instead of a fixed 20px grid column. */
.gu-btn--nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
}

.gu-btn__side {
    display: flex;
    align-items: center;
    height: 20px;
}

.gu-btn__side .gu-ic {
    width: 20px;
    height: 20px;
}

.gu-btn__label {
    /* No white-space:nowrap -- reused by the wider print/save-link
       toolbar buttons too, whose longer labels need to wrap onto a
       second line rather than overflow. */
    text-align: center;
}

/* Readiness / result rendering */
.gu-readiness-intro {
    /* Justified, matching the same text-align:justify;hyphens:auto
       treatment already used for static-page body copy (.gu-page p)
       -- direct project-owner feedback that this paragraph's ragged
       right edge stood out against it. */
    font-size: 1rem;
    margin-bottom: 1.5rem;
    text-align: justify;
    hyphens: auto;
}

.gu-readiness-item {
    display: flex;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--wp--preset--color--tint-80);
}

.gu-readiness-item:last-child {
    border-bottom: none;
}

/* Pill shape is a deliberate, documented exception -- these are status
   badges, not buttons or cards. Status is never color-only: every badge
   carries its own text label (e.g. "On track", "Gap to close"). */
.gu-readiness-badge {
    flex-shrink: 0;
    font-size: 0.875rem;
    font-weight: 700;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    height: fit-content;
}

.gu-readiness-badge--satisfied { background: var(--wp--preset--color--tint-95); color: var(--wp--preset--color--text); }
.gu-readiness-badge--unmet_requirement { background: var(--wp--preset--color--red-tint-90); color: var(--wp--preset--color--red); }
.gu-readiness-badge--known_gap { background: var(--wp--preset--color--red-tint-90); color: var(--wp--preset--color--red); }
.gu-readiness-badge--unknown { background: var(--wp--preset--color--tint-90); color: var(--wp--preset--color--tint-60); }

.gu-readiness-text p {
    /* Matches the mockup's `.r-desc` exactly -- was unset, defaulting to
       body's 16px instead of the smaller description size. */
    font-size: 0.875rem;
    margin: 0 0 0.25rem;
}

.gu-readiness-action {
    font-size: 0.875rem;
    color: var(--wp--preset--color--tint-60);
}

.gu-ic {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
}

.gu-lock-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background: var(--wp--preset--color--tint-90);
    color: var(--wp--preset--color--text);
    font-size: 0.8125rem;
    font-weight: 700;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    margin-bottom: 1rem;
}

.gu-encourage-title {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 0.375rem;
}

.gu-encourage-title .gu-ic-badge {
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: var(--wp--preset--color--gold);
    color: var(--wp--preset--color--text);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.gu-encourage-title .gu-ic-badge svg {
    width: 1.125rem;
    height: 1.125rem;
}

.gu-encourage-title .gu-question__label {
    margin-bottom: 0;
}

/* Icon-circle readiness item (pre-lead highlight + post-lead result list).
   Status is never color-only: the circle's color pairs with the r-tag
   text label sitting right below it. */
.gu-status-ic {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    background: var(--wp--preset--color--tint-90);
}

.gu-status-ic svg {
    width: 15px;
    height: 15px;
}

.gu-readiness-item.status-satisfied .gu-status-ic { color: var(--wp--preset--color--text); }
.gu-readiness-item.status-unmet_requirement .gu-status-ic { color: var(--wp--preset--color--red); }
.gu-readiness-item.status-known_gap .gu-status-ic { color: var(--wp--preset--color--text); }
.gu-readiness-item.status-unknown .gu-status-ic { color: var(--wp--preset--color--tint-60); }

.gu-readiness-item--icon .gu-readiness-text strong {
    display: block;
    font-size: 0.96875rem;
    margin-bottom: 0.125rem;
}

.gu-r-tag {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--wp--preset--color--tint-60);
    margin-top: 0.25rem;
}

/* Status is never color-only elsewhere on this screen (every tag still
   carries its own text label), but tinting the tag itself replaces the
   status-differentiated icon variety the old flat readiness-item list
   used -- the roadmap step node now shows a checkmark or a step number
   instead. */
.gu-r-tag--unmet_requirement,
.gu-r-tag--known_gap {
    color: var(--wp--preset--color--red);
}

.gu-r-tag--satisfied {
    color: var(--wp--preset--color--text);
}

/* Roadmap stepper (post-lead result screen + comparison panels, both via
   the shared renderPathwayDetailHtml()): every readiness item as one
   step in a single ordered sequence -- a solid charcoal node with a
   white checkmark for what's already done, a charcoal-outlined,
   light-tint-filled node with a charcoal number for what's still
   outstanding (in the order the server already computed, the same
   order this project has repeatedly hand-tuned for logical sequencing),
   all connected by one continuous charcoal rail. Direct project-owner
   request 2026-09-13. A green "done" treatment was tried first, then
   reverted the same day by direct project-owner instruction back to
   this neutral charcoal scheme -- matching this file's own earlier
   "Readiness satisfied color: neutral Charcoal tint, not green"
   decision, which turns out to have been correct all along; no
   `--gu-success`/green color remains anywhere in this treatment.

   Classes are `.gu-roadmap-*`, not the shorter `.gu-step*` this used at
   first -- `.gu-step`/`.gu-step__num` is already a real, different
   component (the How It Works page's numbered-step layout, further up
   this file), and reusing that name meant this roadmap silently
   inherited ITS rules too (`align-items:flex-start`, `margin-top:3rem`)
   with no scoping to stop it -- concretely, that inherited
   `align-items:flex-start` is what broke the connecting line (it
   stopped the node column from stretching to the row's real height),
   reported live as "the line is too short." Distinct names remove the
   collision outright instead of layering more specific overrides on
   top of an accidental dependency. */

/* One continuous rail behind every circle, from the first circle's
   center to the last circle's center, instead of a separate per-step
   line that has to be measured to reach the next one -- this is what
   actually guarantees the connection reaches every number below it,
   regardless of how tall any individual step's text runs. z-index
   keeps it behind the circles, which paint over it. */
.gu-roadmap {
    position: relative;
    margin: 1.25rem 0;
}

.gu-roadmap::before {
    content: "";
    position: absolute;
    top: 1.125rem;
    bottom: 1.125rem;
    left: 1.125rem;
    width: 2px;
    background: var(--wp--preset--color--text);
}

.gu-roadmap-step {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 1rem;
    padding-bottom: 1.5rem;
}

.gu-roadmap-step:last-child {
    padding-bottom: 0;
}

.gu-roadmap-node {
    flex-shrink: 0;
    width: 2.25rem;
    display: flex;
    justify-content: center;
}

.gu-roadmap-circle {
    box-sizing: border-box;
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    aspect-ratio: 1 / 1;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-family: var(--wp--preset--font-family--body);
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    background: var(--wp--preset--color--tint-90);
    border: 2px solid var(--wp--preset--color--text);
    color: var(--wp--preset--color--text);
}

.gu-roadmap-step.is-done .gu-roadmap-circle {
    background: var(--wp--preset--color--text);
    border-color: var(--wp--preset--color--text);
    color: #fff;
}

.gu-roadmap-step.is-done .gu-roadmap-circle svg {
    width: 14px;
    height: 14px;
}

.gu-roadmap-body {
    flex: 1;
    padding-top: 0.125rem;
}

.gu-roadmap-body strong {
    display: block;
    font-size: 0.96875rem;
    margin-bottom: 0.125rem;
}

.gu-roadmap-body p {
    font-size: 0.875rem;
    margin: 0 0 0.25rem;
}

/* Roadmap progress summary -- "X of N requirements met" with the same
   gold-filled track the questionnaire's own progress bar uses
   (.gu-progress-bar-track/.gu-progress-bar-fill), so the visual
   language matches; the wrapper/label are their own classes (not
   .gu-progress-bar-wrap) because that one carries padding tuned for
   sitting above .gu-card, outside it -- this bar renders inside a
   card/panel instead. */
.gu-roadmap-progress {
    margin-bottom: 1.25rem;
}

.gu-roadmap-progress-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--wp--preset--color--text);
    margin-bottom: 0.5rem;
}

.gu-r-source {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.78125rem;
    color: var(--wp--preset--color--text);
    margin-top: 0.375rem;
}

.gu-r-source svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

.gu-r-source a {
    color: var(--wp--preset--color--text);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.gu-r-source a:hover {
    color: var(--wp--preset--color--red);
}

.gu-result-next-step__more {
    margin-top: 0.5rem;
    font-size: 0.8125rem;
    color: var(--wp--preset--color--tint-60);
}

/* Matches this file's own documented "shared card contract" (24px
   padding, 16px radius, Tint 90 background, Tint 80 1px solid border --
   see the .gu-panel comment above) -- this box had drifted to a dashed
   border and centered text, the only centered content anywhere on the
   site, direct project-owner feedback 2026-09-13 that it stood out as
   inconsistent against every other box. */
.gu-teaser {
    background: var(--wp--preset--color--tint-90);
    border: 1px solid var(--wp--preset--color--tint-80);
    border-radius: 16px;
    padding: 1.5rem;
    margin-top: 1.5rem;
}

.gu-teaser-free {
    /* Real bug, found live 2026-09-13: a bare <p> carries the
       browser's own default top margin, which this rule never reset
       -- so the gap above this heading was the box's 24px padding
       PLUS that default margin (measured 39.8px), while the bottom
       gap (last <li> to the box's own bottom edge) was a clean 24px.
       margin:0 here removes the asymmetry at its actual source rather
       than compensating with mismatched padding numbers. */
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--wp--preset--color--text);
    margin: 0 0 0.75rem;
}

.gu-teaser-list {
    margin: 0;
    padding-left: 1.25rem;
    font-size: 0.875rem;
    color: var(--wp--preset--color--text);
    line-height: 1.7;
}

.gu-pathway-banner {
    background: var(--wp--preset--color--text);
    color: #fff;
    border-radius: 14px;
    padding: 1.375rem 1.625rem;
    margin-bottom: 1.5rem;
}

.gu-pathway-banner .gu-pathway-tag {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--wp--preset--color--gold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.375rem;
    display: block;
}

.gu-pathway-banner h2 {
    color: #fff;
    font-size: 1.5rem;
    margin: 0;
}

.gu-source-footer {
    font-size: 0.8125rem;
    color: var(--wp--preset--color--tint-60);
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--wp--preset--color--tint-80);
}

.gu-result-cta {
    display: inline-flex;
    margin-top: 1rem;
    text-decoration: none;
}

/* Multi-pathway comparison result (Explore/Career and any other goal
   where PathwayRouter genuinely returns more than one suitable pathway).
   One panel per pathway, each holding that pathway's own full readiness
   detail -- distinct from `.gu-compare-card` naming in the standalone
   mockup, which never held this much real per-pathway content. */
.gu-compare-panel {
    background: var(--wp--preset--color--tint-95);
    border: 1px solid var(--wp--preset--color--tint-80);
    border-radius: 16px;
    padding: 1.5rem 1.75rem;
    margin-top: 1.25rem;
}

/* Divider between comparison panels -- each panel is already its own
   bordered card, but a plain hairline between them makes the "these are
   separate directions" boundary explicit at a glance, direct
   project-owner request 2026-09-13. */
.gu-compare-divider {
    border: none;
    border-top: 1px solid var(--wp--preset--color--tint-80);
    margin: 1.5rem 0 0;
}

.gu-compare-panel__tag {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #fff;
    background: var(--wp--preset--color--text);
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
    margin-bottom: 0.625rem;
}

.gu-compare-panel h3 {
    font-size: 1.1875rem;
    margin-bottom: 0.75rem;
}

.gu-compare-panel .gu-readiness-item {
    border-bottom-color: var(--wp--preset--color--tint-80);
}

.gu-lead-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

@media (max-width: 480px) {
    .gu-lead-form-row {
        grid-template-columns: 1fr;
    }
}

.gu-lead-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.gu-lead-form label {
    font-weight: 700;
    font-size: 0.875rem;
    display: block;
    margin-bottom: 0.25rem;
}

.gu-lead-form input[type="text"],
.gu-lead-form input[type="email"] {
    /* White/surface + 2px border, matching the mockup's `.field-row
       input` exactly -- was a 1px-border Tint-90 gray fill, the same
       "gray fill where the mockup uses white" mismatch already fixed on
       the question screens' text inputs. */
    width: 100%;
    box-sizing: border-box;
    padding: 0.8125rem 1rem;
    border: 2px solid var(--wp--preset--color--tint-80);
    border-radius: 0.625rem;
    background: var(--wp--preset--color--surface);
    font-size: 0.96875rem;
}

.gu-lead-form input:focus-visible {
    /* Border-only feedback, not a separate outline ring outside it --
       an offset outline next to an already-visible 2px border read as
       a distracting double border. */
    outline: none;
    border-color: var(--wp--preset--color--text);
}

/* Submit-time validation state, matching the mockup's `.field-row
   input.err` / `.consent-row.err` exactly. */
.gu-lead-form input.gu-err {
    border-color: var(--wp--preset--color--red);
}

.gu-lead-form .gu-consent {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-weight: 400;
    font-size: 0.875rem;
}

.gu-lead-form .gu-consent.gu-err {
    color: var(--wp--preset--color--red);
}

/* Custom checkbox -- the native control renders with the browser's
   own blue accent color (and a white checkmark it never lets us
   recolor), which doesn't match the site's 4-color palette at all.
   Same mask-based checkmark technique already used for
   .gu-option.is-selected::after, so the "check" glyph stays visually
   consistent sitewide. */
.gu-lead-form .gu-consent input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    min-width: 16px;
    margin: 0.1875rem 0 0;
    border: 2px solid var(--wp--preset--color--tint-80);
    border-radius: 3px;
    background: var(--wp--preset--color--surface);
    position: relative;
    flex-shrink: 0;
    cursor: pointer;
    /* Same real root cause as .gu-btn above: with no baseline here, a
       browser that doesn't suppress the ring on a plain mouse click
       falls back to its own native outline, defaulting to currentColor
       (charcoal) -- the actual source of the "stuck black outline"
       bug, not the gold :focus-visible rule below (which only adds a
       ring, never suppresses the native one on its own). */
    outline: none;
}

.gu-lead-form .gu-consent input[type="checkbox"]:checked {
    background: var(--wp--preset--color--gold);
    border-color: var(--wp--preset--color--gold);
}

/* Checkmark kept at roughly the same absolute size as before -- only
   the box around it shrank -- so the mask covers a larger share
   (90%) of this now-smaller element instead of the previous 70%. */
.gu-lead-form .gu-consent input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--wp--preset--color--text);
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3"><path d="M20 6 9 17l-5-5"/></svg>') center / 90% no-repeat;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3"><path d="M20 6 9 17l-5-5"/></svg>') center / 90% no-repeat;
}

/* Real bug, found live 2026-09-13: reusing border-color for focus (the
   pattern used elsewhere on this page for plain text inputs) conflates
   two different signals on a checkbox specifically -- the border's OWN
   color already carries the checked/unchecked state (gold vs Tint-80),
   so swapping it to charcoal on focus reads as a heavy black ring stuck
   on the box regardless of whether it's actually checked, and stays
   there for as long as the box has focus after a click. A real, offset
   outline is its own visual layer instead, so the border keeps
   communicating checked state cleanly while focus gets its own
   indicator. */
.gu-lead-form .gu-consent input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--wp--preset--color--gold);
    outline-offset: 2px;
}

.gu-field-error {
    color: var(--wp--preset--color--red);
    font-size: 0.875rem;
    font-weight: 600;
    margin-top: 0.375rem;
}

.gu-result-pathway-name {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--wp--preset--color--text);
    margin-bottom: 0.5rem;
}

.gu-result-next-step {
    /* Gold-TINT FILL removed 2026-09-13, direct project-owner feedback
       ("the gold tint fill we discarded long time ago already has to
       go") -- a neutral Tint-90 fill with a gold accent stripe reads as
       highlighted without a colored-fill box, matching this project's
       standing preference for neutral surfaces (see CLAUDE.md's Design
       System section on keeping colored fills off box surfaces). Still
       used only by the pre-lead teaser highlight now that the post-lead
       result screen's own "next step" callout was removed in favor of
       the roadmap stepper's own numbering. */
    background: var(--wp--preset--color--tint-90);
    border: 1px solid var(--wp--preset--color--tint-80);
    border-left: 4px solid var(--wp--preset--color--gold);
    border-radius: 16px;
    padding: 1.125rem 1.25rem;
    margin-top: 1.25rem;
}

.gu-result-next-step__label {
    /* Charcoal, not Tint-60 -- direct project-owner feedback that the
       muted gray was hard to read against this box's own light-gray
       fill (low contrast on low contrast). */
    font-size: 0.875rem;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--wp--preset--color--text);
    letter-spacing: 0.03em;
    margin-bottom: 0.25rem;
}

.gu-result-sources {
    font-size: 0.875rem;
    color: var(--wp--preset--color--tint-60);
}

.gu-result-sources a {
    color: var(--wp--preset--color--text);
}

.gu-result-sources a:hover {
    color: var(--wp--preset--color--red);
}

.gu-error-banner {
    background: var(--wp--preset--color--red-tint-90);
    border: 1px solid var(--wp--preset--color--red-tint-90);
    color: var(--wp--preset--color--red);
    border-radius: 16px;
    padding: 1rem 1.5rem;
    margin-bottom: 1rem;
    font-size: 1rem;
}

/* --------------------------------------------------------------- Footer */
.gu-footer {
    background: var(--wp--preset--color--text);
    color: rgba(255, 255, 255, .82);
    margin-top: 0;
    padding: 0;
}

.gu-footer__top {
    padding-block: 3rem 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

/* WordPress's default-layout block-gap CSS (`.is-layout-flow > * + *
   { margin-block-start: ... }`) adds a top margin to every child after
   the first -- meant for stacked flow content, but here it fights the
   grid's own `gap` and shifts the Explore/About & Trust/Service
   Providers columns down relative to the tagline column. The grid gap
   already provides spacing, so this is reset to 0. */
.gu-footer__top > * {
    margin-top: 0;
}

.gu-footer__tagline {
    font-size: 0.84375rem;
    color: rgba(255, 255, 255, .55);
    max-width: 24rem;
    text-align: justify;
}

.gu-footer__col h4 {
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: rgba(255, 255, 255, .5);
    margin: 0 0 1rem;
}

.gu-footer__col a {
    display: block;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, .85);
    text-decoration: none;
    margin-bottom: 10px;
}

.gu-footer__col a:hover {
    color: #fff;
}

.gu-footer__col a:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.gu-footer__provider-panel {
    background: rgba(255, 255, 255, .06);
    border-radius: 16px;
    padding: 20px;
}

.gu-footer__provider-panel p {
    margin: 8px 0 14px;
    font-size: 0.84375rem;
    color: rgba(255, 255, 255, .68);
    text-align: justify;
    hyphens: auto;
}

.gu-footer__provider-panel .wp-block-buttons,
.gu-footer__provider-panel .wp-block-button {
    width: 100%;
}

.gu-footer .wp-block-button.is-style-outline .wp-block-button__link {
    box-sizing: border-box;
    min-height: 48px;
    display: inline-flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding-inline: 1.5rem;
    color: #fff;
    border-color: rgba(255, 255, 255, .5);
    border-radius: 8px;
}

.gu-footer .wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.gu-footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, .14);
    padding-block: 1rem;
    margin-top: 2rem;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.gu-footer__bottom-left {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.gu-footer__legal-links {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.gu-footer__legal-links a {
    /* Matches the mockup's `.footer-legal-links a`/`::after` exactly --
       found 2026-09-12: line-height was still the inherited sitewide
       1.5 (pushing the underline ~7px further from the text than
       intended), and hover only ever swapped the border color, never
       the width the mockup also animates to 3px on hover. */
    position: relative;
    display: inline-block;
    line-height: 1;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, .5);
    text-decoration: none;
    padding-bottom: 2px;
}

.gu-footer__legal-links a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .35);
    transition: border-bottom-width 0.15s, border-bottom-color 0.15s;
}

.gu-footer__legal-links a:hover {
    color: rgba(255, 255, 255, .85);
}

.gu-footer__legal-links a:hover::after {
    border-bottom-width: 3px;
    border-bottom-color: var(--wp--preset--color--red);
}

.gu-footer__note {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, .5);
    margin: 14px 0 0;
}

.gu-footer__social {
    display: flex;
    gap: 28px;
}

.gu-footer__social a {
    color: rgba(255, 255, 255, .5);
    display: inline-flex;
    text-decoration: none;
}

.gu-footer__social a:hover {
    color: #fff;
}

.gu-footer__social a:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.gu-footer__social svg {
    width: 24px;
    height: 24px;
}

@media (min-width: 900px) {
    .gu-footer__top {
        /* 2fr, matching the mockup's `.footer-inner` grid ratio exactly --
           was 1.3fr, which rendered the tagline column noticeably
           narrower than intended relative to the 3 link columns. */
        grid-template-columns: 2fr 0.8fr 0.8fr 0.9fr;
    }
}

/* Result-screen print/save-link toolbar, added 2026-09-13 -- direct
   project-owner request: the roadmap should be downloadable, printable,
   and saveable so a visitor can come back to it later. */
/* Equal-width, edge-to-edge with the paragraph text above -- direct
   project-owner feedback that two different-width buttons (sized to
   their own text) looked ugly and unbalanced. A 2-column grid gives
   both buttons the same width and makes the row's own left/right
   edges match the surrounding text's measure, instead of each button
   hugging its own content. Stacks to one column on narrow viewports,
   where two equal columns would otherwise cramp "Save link to come
   back later" onto multiple lines inside a too-narrow button. */
.gu-result-tools {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.gu-result-tools .gu-tool-btn {
    width: 100%;
    /* Light tint fill instead of plain transparent/white -- direct
       project-owner feedback, scoped to just these 2 buttons (not
       every .gu-btn-secondary sitewide, e.g. Back/Unlock, which
       weren't flagged and already match their own established
       contexts). */
    background: var(--wp--preset--color--tint-95);
}

.gu-result-tools .gu-tool-btn:hover {
    background: var(--wp--preset--color--tint-90);
}

@media (max-width: 480px) {
    .gu-result-tools {
        grid-template-columns: 1fr;
    }
}

.gu-tool-btn svg {
    width: 18px;
    height: 18px;
}

.gu-result-tools__copied {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--wp--preset--color--text);
}

/* Print stylesheet -- covers both "Print" and "Save as PDF" (every
   modern browser's print dialog offers PDF as a destination, so one
   `window.print()` button and this stylesheet handle both, no separate
   PDF-generation library needed). Hides the site chrome and the tool
   buttons themselves (not useful on paper), and -- since a printed page
   has no clickable links -- prints each source link's actual URL in
   parentheses right after its text, so a reader working from a
   printout can still see and manually visit/copy every source, per the
   project owner's own question about this. */
@media print {
    .gu-header,
    .gu-footer,
    .gu-result-tools,
    .gu-actions,
    .gu-result-cta {
        display: none !important;
    }

    body,
    .gu-pathway-finder-page,
    #gu-app {
        background: #fff !important;
    }

    .gu-card {
        border: none;
        padding: 0;
        min-height: 0;
    }

    /* A solid dark banner wastes ink and can print as a near-black
       block depending on the browser's background-graphics setting --
       a plain bordered box with dark text reads the same information
       without relying on a filled background surviving to paper. */
    .gu-pathway-banner {
        background: #fff !important;
        border: 1px solid #000;
        color: #000 !important;
    }

    .gu-pathway-banner .gu-pathway-tag,
    .gu-pathway-banner h2 {
        color: #000 !important;
    }

    .gu-roadmap-step,
    .gu-compare-panel {
        break-inside: avoid;
    }

    .gu-r-source a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #555;
        word-break: break-all;
    }
}

@media (max-width: 600px) {
    .gu-header__inner {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }

    .gu-card {
        padding: 1rem;
    }
}