/* Shared styles for the Partners Hub pages in public/partners/ (Home, Tiers,
   Calculator, Onboarding, Templates, Apply, Sign in): the hub's type scale,
   buttons, header, nav dropdown, footer and section scaffolding. The header
   and footer markup comes from scripts/publicPages/partials/hub-header.html
   and hub-footer.html (see scripts/publicPages/sync.mjs). Loads after
   site.css, which supplies the --color-* tokens, the box-sizing reset and the
   body defaults. Page-specific styles stay in each page's own <style>.

   Figma: file jd7PNAySbmcAkgkJto5zxP, canvas "Partners page" (16021:75496).
   Mobile-first; breakpoints follow the Figma frames: base 375, 48rem 768,
   64rem 1024 (the 1920 frames use the 1024 values with a 1000px column). */

:root {
    /* Side margin shared by the header, footer and page sections. */
    --ph-margin: 1.25rem;

    /* The hub's own Figma text styles ("Web-Responsive/H0 Title", "H0
       Tablet", "H1 Title"; "H1", "H1 Tablet", "H1 Mobile"). They aren't part
       of the generated --type-* scale (src/assets/styles/tokens/typography.css),
       whose sizes differ, so the hub keeps them here. */
    --ph-h0-size: 2.25rem;
    --ph-h0-line-height: 2.75rem;
    --ph-h1-size: 1.75rem;
    --ph-h1-line-height: 2.125rem;
    --ph-title-tracking: -0.0375rem; /* -0.6px */

    /* Menu scrim: greyscale-950 at 40% (Figma "scrim" 16021:114064). */
    --ph-scrim: rgba(26, 26, 26, 0.4);
}

@media (min-width: 48rem) {
    :root {
        --ph-margin: 2.5rem;
        --ph-h0-size: 3.25rem;
        --ph-h0-line-height: 3.75rem;
        --ph-h1-size: 2rem;
        --ph-h1-line-height: 2.5rem;
    }
}

@media (min-width: 64rem) {
    :root {
        --ph-margin: 3rem;
        --ph-h0-size: 3.875rem;
        --ph-h0-line-height: 4.5rem;
        --ph-h1-size: 2.25rem;
        --ph-h1-line-height: 2.75rem;
    }
}

/* The header is 65px tall (64px bar + 1px). In-page links land below it. */
html {
    scroll-padding-top: 4.0625rem;
}

/* ===== Resets ===== */
.ph-main h1,
.ph-main h2,
.ph-main h3,
.ph-main h4,
.ph-main p,
.ph-main ul,
.ph-main ol,
.ph-header p,
.ph-footer p,
.ph-footer ul {
    margin: 0;
}

.ph-main ul,
.ph-main ol,
.ph-footer ul {
    padding: 0;
    list-style: none;
}

/* :where keeps this at class specificity so component link colours win. */
:is(.ph-main, .ph-header, .ph-footer) :where(a) {
    color: inherit;
    text-decoration: none;
}

:is(.ph-main, .ph-header, .ph-footer) :is(button, input, select, textarea) {
    font-family: inherit;
}

/* ===== Section scaffolding =====
   A section spans the page with the side margin; .ph-container holds its
   content to the 1000px Figma column. */
.ph-section {
    padding-inline: var(--ph-margin);
}

.ph-section-light {
    background: var(--color-greyscale-50);
}

.ph-section-white {
    background: var(--color-white);
}

.ph-section-dark {
    background: var(--color-greyscale-950);
    color: var(--color-white);
}

.ph-container {
    width: 100%;
    max-width: 62.5rem;
    margin-inline: auto;
}

/* ===== Text styles ===== */
/* "Web-Responsive/Label": 13/20 Medium, the line above each page title. */
.ph-eyebrow {
    font-size: 0.8125rem;
    line-height: 1.25rem;
    font-weight: 500;
    color: var(--color-greyscale-700);
}

.ph-section-dark .ph-eyebrow {
    color: var(--color-greyscale-500);
}

/* Page title: H0 Title 62/72, H0 Tablet 52/60, H1 Title 36/44 on mobile. */
.ph-title {
    font-size: var(--ph-h0-size);
    line-height: var(--ph-h0-line-height);
    font-weight: 500;
    letter-spacing: var(--ph-title-tracking);
    color: var(--color-greyscale-950);
}

.ph-section-dark .ph-title {
    color: var(--color-white);
}

/* Section heading: H1 36/44, H1 Tablet 32/40, H1 Mobile 28/34. */
.ph-heading {
    font-size: var(--ph-h1-size);
    line-height: var(--ph-h1-line-height);
    font-weight: 500;
    color: var(--color-greyscale-950);
}

.ph-section-dark .ph-heading {
    color: var(--color-white);
}

/* ===== Buttons =====
   Figma "Partners Hub / Button" (16060:62563): 52px pills with 15/20 Medium
   text. The header uses a smaller 42px size. */
.ph-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    height: 3.25rem;
    padding: 0 1.5625rem;
    border: 0.0625rem solid transparent;
    border-radius: 6.25rem;
    background: transparent;
    font-size: 0.9375rem;
    line-height: 1.25rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.ph-btn:focus-visible,
.ph-header-nav a:focus-visible,
.ph-header-portal-toggle:focus-visible,
.ph-header-burger:focus-visible,
.ph-menu-link:focus-visible,
.ph-footer a:focus-visible {
    outline: 0.125rem solid var(--color-primary);
    outline-offset: 0.125rem;
}

/* Hovers follow the homepage (src/assets/styles/css/home.css and Figma
   "Hovers" 13356:55341), the reference for every public page.

   Type=Primary. As .home-btn-primary: the fill stays primary and a 3.5px
   primary glow appears around it. */
:is(.ph-main, .ph-header) .ph-btn-primary {
    background: var(--color-primary);
    color: var(--color-white);
}

:is(.ph-main, .ph-header) .ph-btn-primary:hover {
    box-shadow: 0 0 0.21875rem var(--color-primary);
}

/* Type=Secondary: outlined, for light backgrounds. */
:is(.ph-main, .ph-header) .ph-btn-secondary {
    border-color: var(--color-greyscale-300);
    color: var(--color-greyscale-700);
}

/* As .home-btn-outline: greyscale-50 fill, text darkens to greyscale-950. */
:is(.ph-main, .ph-header) .ph-btn-secondary:hover {
    background: var(--color-greyscale-50);
    color: var(--color-greyscale-950);
}

/* On a greyscale-50 section that fill wouldn't show, so it steps on to
   greyscale-100 (as the static pages' outline buttons on grey sections). */
.ph-section-light .ph-btn-secondary:hover {
    background: var(--color-greyscale-100);
}

/* Type=Secondary Dark: outlined, for dark backgrounds. */
:is(.ph-main, .ph-header) .ph-btn-secondary-dark,
.ph-header-dark .ph-btn-secondary {
    background: transparent;
    border-color: var(--color-greyscale-700);
    color: var(--color-white);
}

/* As .home-btn-dark: the fill steps up to greyscale-800. */
:is(.ph-main, .ph-header) .ph-btn-secondary-dark:hover {
    background: var(--color-greyscale-800);
}

/* Type=Social: white with an icon, e.g. "Continue with Google". */
:is(.ph-main, .ph-header) .ph-btn-social {
    background: var(--color-white);
    border-color: var(--color-greyscale-200);
    color: var(--color-greyscale-950);
}

:is(.ph-main, .ph-header) .ph-btn-social:hover {
    background: var(--color-greyscale-50);
    color: var(--color-greyscale-950);
}

/* ===== Header =====
   Figma "Partners Hub / Header" (16058:63024): Light or Dark, 64px bar plus
   1px, sticky like the rest of the site's headers. */
.ph-header {
    position: sticky;
    top: 0;
    z-index: 30;
    padding: 0 var(--ph-margin) 0.0625rem;
    background: var(--color-white);
}

.ph-header-dark {
    background: var(--color-greyscale-900);
}

.ph-header-inner {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    max-width: 62.5rem;
    height: 4rem;
    margin-inline: auto;
}

.ph-header-left {
    display: flex;
    flex: 1 0 0;
    align-items: center;
    gap: 3rem;
    min-width: 0;
}

.ph-header-logo {
    display: flex;
    flex-shrink: 0;
}

.ph-header-logo img {
    display: block;
    width: 8.125rem;
    height: 1.625rem;
}

/* "Web-Responsive/Body" 14/18; the current page is Medium and darker. */
.ph-header-nav {
    display: none;
    align-items: center;
    gap: 1.25rem;
    padding-top: 0.375rem;
    white-space: nowrap;
}

.ph-header-nav a {
    font-size: 0.875rem;
    line-height: 1.125rem;
    color: var(--color-greyscale-700);
    transition: color 0.15s ease;
}

.ph-header-nav a:hover,
.ph-header-nav a[aria-current="page"] {
    color: var(--color-greyscale-950);
}

.ph-header-nav a[aria-current="page"] {
    font-weight: 500;
}

.ph-header-dark .ph-header-nav a {
    color: var(--color-greyscale-300);
}

.ph-header-dark .ph-header-nav a:hover,
.ph-header-dark .ph-header-nav a[aria-current="page"] {
    color: var(--color-white);
}

/* Portal: the portal views for signed-in visitors (partners-hub.js shows it),
   as the React partners header's dropdown (PartnersHeader.css). A hub page is
   never the current portal view, so the toggle reads like the other links. */
.ph-header-portal {
    position: relative;
}

.ph-header-portal[hidden],
.ph-header-portal-menu[hidden],
.ph-menu-portal[hidden] {
    display: none;
}

.ph-header-portal-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0;
    border: 0;
    background: none;
    font-size: 0.875rem;
    line-height: 1.125rem;
    color: var(--color-greyscale-700);
    cursor: pointer;
    transition: color 0.15s ease;
}

.ph-header-portal-toggle svg {
    width: 1rem;
    height: 1rem;
}

.ph-header-portal-toggle:hover,
.ph-header-portal-toggle[aria-expanded="true"] {
    color: var(--color-greyscale-950);
}

.ph-header-dark .ph-header-portal-toggle {
    color: var(--color-greyscale-300);
}

.ph-header-dark .ph-header-portal-toggle:hover,
.ph-header-dark .ph-header-portal-toggle[aria-expanded="true"] {
    color: var(--color-white);
}

/* White on both header modes, as the React header's menu. */
.ph-header-portal-menu {
    position: absolute;
    top: calc(100% + 1.25rem);
    left: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    width: 12.5rem;
    padding: 0.5rem;
    border: 0.0625rem solid var(--color-greyscale-100);
    border-radius: 1rem;
    background: var(--color-white);
    box-shadow: 0 1rem 2rem color-mix(in srgb, var(--color-greyscale-950) 12%, transparent);
}

/* The leading .ph-header outranks the dark header's grey nav link colour. */
.ph-header .ph-header-nav .ph-header-portal-item {
    padding: 0.625rem 0.75rem;
    border-radius: 0.625rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--color-greyscale-700);
}

.ph-header .ph-header-nav .ph-header-portal-item:hover {
    background: var(--color-greyscale-50);
    color: var(--color-greyscale-950);
    font-weight: 500;
}

.ph-header-actions {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.5rem;
}

.ph-btn-header {
    height: 2.625rem;
    padding: 0 1.25rem;
    border-radius: 1.25rem;
}

/* Partner sign in sits on white in the light header; its outline is
   greyscale-100 on tablet and greyscale-300 from 1024 up. Below 768 it moves
   into the nav dropdown. */
.ph-header-sign-in {
    display: none;
}

.ph-header:not(.ph-header-dark) .ph-header-sign-in {
    background: var(--color-white);
    border-color: var(--color-greyscale-100);
}

/* Light header, as the homepage's Sign in and Try it now: both buttons turn
   greyscale-950 with white text, in the bar and the dropdown alike. */
.ph-header:not(.ph-header-dark) .ph-header-actions .ph-btn:hover,
.ph-header:not(.ph-header-dark) .ph-menu-sign-in:hover {
    background: var(--color-greyscale-950);
    border-color: var(--color-greyscale-950);
    color: var(--color-white);
    box-shadow: none;
}

/* Dark header, as the static pages' dark header (site.css): Partner sign in
   fills primary and drops its outline; Apply Now keeps the primary glow. */
.ph-header-dark .ph-header-sign-in:hover,
.ph-header-dark .ph-menu-sign-in:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

/* 42px round menu button; tinted while the menu is open. */
.ph-header-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.625rem;
    height: 2.625rem;
    padding: 0;
    border: 0.0625rem solid var(--color-greyscale-200);
    border-radius: 1.3125rem;
    background: transparent;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.ph-header-burger img {
    display: block;
    width: 1.25rem;
    height: 1.25rem;
}

/* As .home-header-burger: a greyscale-50 fill. */
.ph-header-burger:hover,
.ph-header-burger[aria-expanded="true"] {
    background: var(--color-greyscale-50);
    border-color: var(--color-greyscale-200);
}

.ph-header-dark .ph-header-burger {
    border-color: var(--color-greyscale-700);
}

.ph-header-dark .ph-header-burger:hover,
.ph-header-dark .ph-header-burger[aria-expanded="true"] {
    background: var(--color-greyscale-800);
    border-color: var(--color-greyscale-700);
}

@media (min-width: 48rem) {
    .ph-header-sign-in {
        display: inline-flex;
    }
}

@media (min-width: 64rem) {
    .ph-header-nav {
        display: flex;
    }

    .ph-header-burger {
        display: none;
    }

    .ph-header:not(.ph-header-dark) .ph-header-sign-in {
        border-color: var(--color-greyscale-300);
    }
}

/* ===== Nav dropdown =====
   Figma "Partners Hub / Nav dropdown" (16021:113185): a full-width panel
   under the header bar, with the page dimmed behind it. */
.ph-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-height: calc(100vh - 4.0625rem);
    max-height: calc(100dvh - 4.0625rem);
    overflow-y: auto;
    padding: 0.5rem var(--ph-margin) 1.5rem;
    border-bottom: 0.0625rem solid var(--color-greyscale-100);
    background: var(--color-white);
    animation: ph-menu-in 0.2s cubic-bezier(0.2, 0, 0, 1);
}

.ph-header-dark .ph-menu {
    border-bottom-color: var(--color-greyscale-800);
    background: var(--color-greyscale-900);
}

.ph-menu[hidden],
.ph-menu-scrim[hidden] {
    display: none;
}

.ph-menu-links {
    display: flex;
    flex-direction: column;
}

/* "Web-Responsive/H4" 18/24 Medium rows with a chevron. */
.ph-menu-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
    border-bottom: 0.0625rem solid var(--color-greyscale-50);
    font-size: 1.125rem;
    line-height: 1.5rem;
    font-weight: 500;
    color: var(--color-greyscale-600);
    transition: color 0.15s ease;
}

.ph-menu-link:last-child {
    border-bottom: none;
}

/* Signed out, the hidden portal links follow Templates, so it's the last row shown. */
.ph-menu-link:has(+ .ph-menu-portal[hidden]) {
    border-bottom: none;
}

.ph-menu-link img {
    width: 1.25rem;
    height: 1.25rem;
}

.ph-menu-link:hover,
.ph-menu-link[aria-current="page"] {
    color: var(--color-greyscale-950);
}

/* As .home-menu-link: hover also fills the row behind the text. The fill is a
   pseudo-element so the divider and spacing don't move: 6px above and below
   the text (inside the 16px row padding), 8px either side. */
.ph-menu-link {
    position: relative;
    isolation: isolate;
}

.ph-menu-link::before {
    content: "";
    position: absolute;
    inset: 0.625rem -0.5rem;
    z-index: -1;
    border-radius: 0.5rem;
    background: transparent;
    transition: background-color 0.15s ease;
}

.ph-menu-link:focus-visible::before {
    background: var(--color-greyscale-50);
}

.ph-header-dark .ph-menu-link:focus-visible::before {
    background: var(--color-greyscale-800);
}

/* Only on devices that really hover: a tap would otherwise leave the row
   filled after the menu reacts to it. */
@media (hover: hover) {
    .ph-menu-link:hover::before {
        background: var(--color-greyscale-50);
    }

    /* A step lighter than the greyscale-900 panel. */
    .ph-header-dark .ph-menu-link:hover::before {
        background: var(--color-greyscale-800);
    }
}

.ph-header-dark .ph-menu-link {
    border-bottom-color: var(--color-greyscale-800);
    color: var(--color-greyscale-300);
}

.ph-header-dark .ph-menu-link:hover,
.ph-header-dark .ph-menu-link[aria-current="page"] {
    color: var(--color-white);
}

.ph-header-dark .ph-menu-link:last-child {
    border-bottom: none;
}

.ph-menu-sign-in {
    width: 100%;
}

/* Sits after the header in the markup, one layer under it. */
.ph-menu-scrim {
    position: fixed;
    inset: 0;
    z-index: 29;
    background: var(--ph-scrim);
    animation: ph-fade-in 0.2s ease;
}

.ph-menu.is-closing {
    pointer-events: none;
    animation: ph-menu-out 0.15s ease-in forwards;
}

.ph-menu-scrim.is-closing {
    animation: ph-fade-out 0.15s ease-in forwards;
}

@media (min-width: 48rem) {
    .ph-menu {
        padding-bottom: 2rem;
    }

    .ph-menu-sign-in {
        display: none;
    }
}

@media (min-width: 64rem) {
    .ph-menu,
    .ph-menu-scrim {
        display: none;
    }
}

@keyframes ph-menu-in {
    from {
        opacity: 0;
        transform: translateY(-0.5rem);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes ph-menu-out {
    from {
        opacity: 1;
        transform: none;
    }

    to {
        opacity: 0;
        transform: translateY(-0.5rem);
    }
}

@keyframes ph-fade-in {
    from {
        opacity: 0;
    }
}

@keyframes ph-fade-out {
    to {
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ph-menu,
    .ph-menu.is-closing,
    .ph-menu-scrim,
    .ph-menu-scrim.is-closing {
        animation: none;
    }
}

/* ===== Sign out confirmation =====
   The app's LogOutModal (src/components/rebrand/assets/styling/logOutModal.css,
   Figma 15672:82616) in its "header" placement: hung under the header with its
   right edge on the header's content column, the page below dimmed. Static
   pages only have the primitive tokens, so the modal's semantic ones are
   written as the primitives they resolve to in light mode. */
.ph-logout {
    --ph-logout-gutter: 1rem;
    --ph-logout-gap: 0.5rem;
}

.ph-logout[hidden] {
    display: none;
}

.ph-logout-mask {
    position: fixed;
    inset: 4.0625rem 0 0;
    z-index: 31;
    background: color-mix(in srgb, var(--color-greyscale-950) 20%, transparent);
    animation: ph-fade-in 0.2s ease;
}

.ph-logout-dialog {
    position: fixed;
    top: calc(4.0625rem + var(--ph-logout-gap));
    right: max(var(--ph-logout-gutter), calc((100% - 62.5rem) / 2));
    z-index: 32;
    width: 26.25rem;
    max-width: calc(100% - 2 * var(--ph-logout-gutter));
    border: 0.03125rem solid var(--color-greyscale-300);
    border-radius: 0.9375rem;
    background: var(--color-white);
    box-shadow:
        0 2.375rem 0.34375rem 0 rgba(0, 0, 0, 0),
        0 1.5rem 0.3125rem 0 rgba(0, 0, 0, 0.01),
        0 0.875rem 0.25rem 0 rgba(0, 0, 0, 0.05),
        0 0.375rem 0.1875rem 0 rgba(0, 0, 0, 0.09),
        0 0.125rem 0.09375rem 0 rgba(0, 0, 0, 0.1);
    animation: ph-menu-in 0.2s cubic-bezier(0.2, 0, 0, 1);
}

.ph-logout-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1.25rem 1.75rem 2rem;
}

.ph-logout-heading {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}

/* The modal's H2 (22/28, then 26/32 from 768) isn't in the generated type scale. */
.ph-logout-title {
    margin: 0;
    font-size: 1.375rem;
    line-height: 1.75rem;
    font-weight: 500;
    color: var(--color-greyscale-950);
    overflow-wrap: anywhere;
}

.ph-logout-text {
    margin: 0;
    font-size: 1.0625rem;
    line-height: 1.25rem;
    color: var(--color-greyscale-700);
}

.ph-logout-close {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    height: 2rem;
    padding: 0;
    border: none;
    border-radius: 0.25rem;
    background: transparent;
    color: var(--color-greyscale-600);
    cursor: pointer;
}

.ph-logout-close svg {
    width: 1.5rem;
    height: 1.5rem;
}

.ph-logout-close:focus-visible {
    outline: none;
    background: var(--color-greyscale-50);
}

.ph-logout-actions {
    display: flex;
    gap: 0.25rem;
    padding: 0 1.75rem 1.25rem;
}

.ph-logout-button {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: 3.25rem;
    padding: 0.5rem 1.25rem;
    border: 0.0625rem solid var(--color-greyscale-300);
    border-radius: 6.25rem;
    background: var(--color-white);
    font-family: inherit;
    font-size: 0.9375rem;
    line-height: 1.25rem;
    font-weight: 500;
    color: var(--color-greyscale-700);
    cursor: pointer;
}

.ph-logout-button-primary {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: var(--color-white);
}

.ph-logout-button:focus-visible {
    outline: 0.125rem solid var(--color-primary);
    outline-offset: 0.125rem;
}

.ph-logout-button:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

@media (min-width: 48rem) {
    .ph-logout {
        --ph-logout-gutter: 1.5rem;
        --ph-logout-gap: 0.375rem;
    }

    .ph-logout-title {
        font-size: 1.625rem;
        line-height: 2rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ph-logout-mask,
    .ph-logout-dialog {
        animation: none;
    }
}

/* ===== Footer =====
   Figma "Partners Hub / Footer" (16021:113115). */
.ph-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
    padding: 3rem var(--ph-margin) 2rem;
    border-top: 0.0625rem solid var(--color-greyscale-100);
    background: var(--color-greyscale-50);
    font-size: 0.75rem;
    color: var(--color-greyscale-700);
}

.ph-footer-menu {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    width: 100%;
    max-width: 62.5rem;
}

.ph-footer-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
}

.ph-footer-mark,
.ph-footer-mark img {
    display: block;
    width: 1.4375rem;
    height: 2rem;
}

/* "Web-Responsive/Footer" 12/18. */
.ph-footer-about {
    max-width: 19.8125rem;
    line-height: 1.125rem;
}

.ph-footer-site {
    margin-top: 0.75rem;
    line-height: 1.125rem;
    font-weight: 500;
    color: var(--color-primary);
}

.ph-footer :where(.ph-footer-site):hover {
    text-decoration: underline;
}

.ph-footer-program {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    white-space: nowrap;
}

/* The Dashboard column shows once partners-hub.js finds a signed-in visitor. */
.ph-footer-program[hidden] {
    display: none;
}

/* "Web-Responsive/Footer Heading" 12/20 Medium. */
.ph-footer-heading {
    line-height: 1.25rem;
    font-weight: 500;
    color: var(--color-greyscale-950);
}

.ph-footer-links {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    line-height: 1.125rem;
}

.ph-footer-links a {
    transition: color 0.15s ease;
}

.ph-footer-links a:hover,
.ph-footer-links a[aria-current="page"] {
    color: var(--color-greyscale-950);
}

/* The current page's link is also bolder, as in the header nav. */
.ph-footer-links a[aria-current="page"] {
    font-weight: 500;
}

/* "Web-Responsive/Caption" 12/16. */
.ph-footer-bottom {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
    width: 100%;
    max-width: 62.5rem;
    padding-top: 1.5rem;
    border-top: 0.0625rem solid var(--color-greyscale-100);
    line-height: 1rem;
    white-space: nowrap;
}

.ph-footer-bottom-left {
    display: flex;
    gap: 2rem;
}

.ph-footer-tagline {
    display: none;
}

.ph-footer-bottom-right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
}

.ph-footer-social,
.ph-footer-social img {
    display: block;
    width: 1.125rem;
    height: 1.125rem;
}

@media (min-width: 48rem) {
    .ph-footer {
        gap: 4rem;
        padding-top: 4rem;
    }

    .ph-footer-menu {
        flex-direction: row;
        align-items: flex-start;
        gap: 3.75rem;
    }

    .ph-footer-brand {
        flex: 1 0 0;
        min-width: 0;
    }

    .ph-footer-program {
        width: 7.6875rem;
    }

    .ph-footer-links {
        gap: 1.125rem;
    }

    .ph-footer-bottom {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding-top: 2rem;
    }

    .ph-footer-tagline {
        display: inline;
    }

    .ph-footer-bottom-right {
        flex-direction: row;
        align-items: center;
        gap: 2.5rem;
    }
}