/* Shared styles for the static pages in public/ (landing pages, about,
   contact, FAQs, partners, pricing): colour tokens, page base, buttons,
   header, menus and footer. The matching markup comes from
   scripts/publicPages/partials/ (see scripts/publicPages/sync.mjs), so a
   change here or there reaches every page. Page-specific styles stay in each
   page's own <style>, which loads after this file and can override it.

   Mobile-first; breakpoints follow the Figma frames: base 375, 48rem 768,
   64rem 1024, 90rem 1440/1920. */

/* Colour tokens. A static page in public/ can't load src/index.css, so the
   Figma tokens from src/assets/styles/tokens/colors.css are mirrored here
   under the same names. Keep them in sync with that generated file. */
:root {
    --color-primary: #343ced;
    --color-white: #ffffff;
    --color-greyscale-950: #1a1a1a;
    --color-greyscale-900: #242424;
    --color-greyscale-850: #282828;
    --color-greyscale-800: #383838;
    --color-greyscale-700: #595959;
    --color-greyscale-600: #707070;
    --color-greyscale-500: #8a8a8a;
    --color-greyscale-400: #a2a2a2;
    --color-greyscale-300: #b2b2b2;
    --color-greyscale-200: #d1d1d1;
    --color-greyscale-100: #e8e8e8;
    --color-greyscale-50: #f5f5f5;

    /* Side margin shared by the header, footer and page sections. */
    --ap-margin: 1rem;
}

@media (min-width: 48rem) {
    :root {
        --ap-margin: 1.5rem;
    }
}

/* 1024 -> 1920: interpolate linearly between the two Figma frames. */
@media (min-width: 64rem) {
    :root {
        --ap-margin: clamp(1.5rem, 6.25vw - 2.5rem, 5rem); /* 24px at 1024 to 80px at 1920, as on the homepage */
    }
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Large screens: the same root font-size bumps as the homepage
   (src/assets/styles/css/responsive.css). Every size here is rem/em, so the
   whole 1920 layout scales up with them. Media queries still resolve against
   the browser's default 16px, so these fire at 2000, 2400 and 3000px. */
@media (min-width: 125rem) {
    html {
        font-size: 1.25rem;
    }
}

@media (min-width: 150rem) {
    html {
        font-size: 1.75rem;
    }
}

@media (min-width: 187.5rem) {
    html {
        font-size: 1.875rem;
    }
}

/* In-page links land below the 64px sticky header instead of under it. */
html {
    scroll-padding-top: 4rem;
}

body {
    margin: 0;
    font-family: "Poppins", sans-serif;
    color: var(--color-greyscale-950);
    background: var(--color-greyscale-50);
    -webkit-font-smoothing: antialiased;
}

/* Resets for the page wrapper and the shared header and footer (pricing has
   no .ap-page wrapper, so the header and footer carry their own). */
/* Element selectors kept explicit (0,1,1): page rules rely on this reset
   beating a lone class. */
.ap-page h1,
.ap-page h2,
.ap-page h3,
.ap-page p,
.ap-header p,
.ap-footer p {
    margin: 0;
}

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

:is(.ap-page, .ap-header, .ap-footer) button {
    font-family: inherit;
}

/* ===== Buttons =====
   The base button and the two the header uses. Pages add their own variants
   (dark, light, large) in their <style>. */
.ap-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    height: 2.5rem;
    padding: 0.5rem 1rem;
    border: 0.0625rem solid transparent;
    border-radius: 100rem;
    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;
}

:is(.ap-page, .ap-header) .ap-btn-primary {
    background: var(--color-primary);
    color: var(--color-white);
}

/* Figma button "type=primary, state=hover" (as on the homepage): the fill
   stays primary and a 3.5px primary glow appears around it. */
:is(.ap-page, .ap-header) .ap-btn-primary:hover {
    background: var(--color-primary);
    box-shadow: 0 0 0.21875rem var(--color-primary);
}

:is(.ap-page, .ap-header) .ap-btn-outline {
    background: var(--color-white);
    border-color: var(--color-greyscale-300);
    color: var(--color-greyscale-700);
}

:is(.ap-page, .ap-header) .ap-btn-outline:hover {
    background: var(--color-greyscale-50);
    color: var(--color-greyscale-950);
}

.ap-btn:focus-visible,
.ap-header-nav-link:focus-visible,
.ap-header-burger:focus-visible {
    outline: 0.125rem solid var(--color-primary);
    outline-offset: 0.125rem;
}

/* ===== Header ===== */
/* Sticks to the top on a solid bar, like the homepage header
   (src/assets/styles/css/home.css, .home-header). */
/* Matches the homepage header (src/assets/styles/css/home.css, .home-header)
   on every screen size. The 14/22 text matches the homepage page text, so the
   nav row lines up with it to the pixel. */
.ap-header {
    font-size: 0.875rem;
    line-height: 1.375rem;
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--color-white);
    padding: 0.75rem var(--ap-margin);
}

.ap-header-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    max-width: 62.5rem; /* Figma header-homepage container: max-width 1000px */
    margin-inline: auto;
}

/* Figma "logo-container": the 122.4x28 wordmark, then the 96.1x15.48
   tagline 141.27px from its left edge and 9.3px from its top. */
.ap-header-brand {
    display: flex;
    align-items: flex-start;
    gap: 1.1794rem;
    flex-shrink: 0;
}

.ap-header-logo-link {
    display: flex;
}

.ap-header-logo {
    display: block;
    width: auto;
    height: 1.25rem;
}

.ap-header-tagline {
    display: none;
    width: 5.7903rem; /* 92.65px "Simply done", as on the homepage */
    height: 0.9675rem;
    margin-top: 0.5813rem;
}

.ap-header-nav {
    display: none;
    align-items: center;
    gap: 2.5rem;
    padding-top: 0.25rem;
}

/* Figma "menu-item-web" (13354:57360): Web-Responsive/Body, 14/18 Regular in
   text-secondary. On desktop, hover (Figma "Menu" hover frame 13356:54716)
   darkens the text to text-primary. */
.ap-header-nav-link {
    padding: 0;
    border: none;
    background: none;
    font-size: 0.875rem;
    line-height: 1.125rem;
    font-weight: 400;
    color: var(--color-greyscale-700);
    cursor: pointer;
    transition: color 0.15s ease;
}

.ap-header-nav-link:hover,
.ap-header-nav-link[aria-expanded="true"] {
    color: var(--color-greyscale-950);
}

.ap-header-solutions {
    position: relative;
}

.ap-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

.ap-header-auth {
    display: none;
    align-items: center;
    gap: 0.5rem;
}

/* Header Sign in (desktop and mobile menu), as on the homepage: outline-2
   (greyscale-100) border. The dark header sets its own colours below. */
.ap-header .ap-btn-outline {
    border-color: var(--color-greyscale-100);
}

/* Figma "Menu" hover frame (as on the homepage): Sign in and Try it now turn
   greyscale-950 with white text, in the desktop header and the mobile menu
   alike. The dark header keeps its own Sign in hover (below). */
.ap-header .ap-header-auth .ap-btn:hover,
.ap-header .ap-menu-auth .ap-btn:hover {
    background: var(--color-greyscale-950);
    border-color: var(--color-greyscale-950);
    color: var(--color-white);
    box-shadow: none;
}

.ap-header-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 0.0625rem solid var(--color-greyscale-300);
    border-radius: 100rem;
    background: var(--color-white);
    cursor: pointer;
}

.ap-header-burger:hover {
    background: var(--color-greyscale-50);
}

.ap-header-burger img {
    width: 1.5rem;
    height: 1.5rem;
}

.ap-menu-panel {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--color-white);
    border: 0.0625rem solid var(--color-greyscale-100);
    border-radius: 0.9375rem;
    box-shadow: 0 0.1875rem 0.475rem rgba(0, 0, 0, 0.1);
    text-align: left;
}

.ap-menu-panel[hidden] {
    display: none;
}

/* Open / close motion for the Solutions dropdown and the mobile menu: a short
   fade and drop from the toggle. The enter animation replays each time the
   panel is shown; site-header.js adds .is-closing to play the exit before it
   hides the panel. */
@keyframes ap-menu-in {
    from {
        opacity: 0;
        transform: translateY(-0.5rem) scale(0.98);
    }

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

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

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

.ap-menu-panel {
    transform-origin: top left;
    animation: ap-menu-in 0.2s cubic-bezier(0.2, 0, 0, 1);
}

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

.ap-header-mobile-menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    width: min(18.5rem, 100%);
    transform-origin: top right;
}

.ap-header-solutions-panel {
    position: absolute;
    top: calc(100% + 0.75rem);
    left: 0;
    width: 18.5rem;
    gap: 1.5rem;
}

/* Figma mobile "dropdown" (15394:12129): Button 1, 18/28 Medium. */
.ap-menu-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0 0 0.75rem;
    border: none;
    border-bottom: 0.0625rem solid var(--color-greyscale-100);
    background: none;
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 500;
    color: var(--color-greyscale-950);
    text-align: left;
    cursor: pointer;
}

/* The last item in the mobile menu has no divider under it. */
.ap-menu-link-last {
    border-bottom: none;
    padding-bottom: 0;
}

.ap-menu-toggle[aria-expanded="true"],
.ap-menu-toggle.is-closing {
    border-bottom: none;
    padding-bottom: 0;
}

/* On small screens (the mobile menu) hover fills the row behind the text, as
   on the Solutions items, rather than recolouring it. The fill is a
   pseudo-element so the divider and spacing don't move: 6px above the text and
   6px below it, 8px either side. --ap-menu-fill-bottom is measured from the
   bottom of the padding box, so rows with the 12px padding under them stop
   6px into it, and rows without it reach 6px past their edge. */
.ap-menu-link {
    position: relative;
    isolation: isolate;
    --ap-menu-fill-bottom: 0.375rem;
}

.ap-menu-link-last,
.ap-menu-toggle[aria-expanded="true"],
.ap-menu-toggle.is-closing {
    --ap-menu-fill-bottom: -0.375rem;
}

.ap-menu-link::before {
    content: "";
    position: absolute;
    inset: -0.375rem -0.5rem var(--ap-menu-fill-bottom);
    z-index: -1;
    border-radius: 0.5rem;
    background: transparent;
    transition: background-color 0.15s ease;
}

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

.ap-menu-chevron {
    width: 1rem;
    height: 1rem;
    transform: rotate(180deg);
    transition: transform 0.15s ease;
}

.ap-menu-toggle[aria-expanded="true"] .ap-menu-chevron {
    transform: none;
}

.ap-menu-group {
    box-sizing: border-box; /* site-header.js slides its height down to the 1px divider */
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 0.0625rem solid var(--color-greyscale-100);
}

.ap-menu-group[hidden] {
    display: none;
}

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

/* Mobile items sit 12px apart, so their hover fill reaches 6px above and
   below (half the gap) rather than 8px, and neighbouring fills never meet. */
.ap-menu-group .ap-menu-sublink.has-icon {
    margin: -0.375rem -0.5rem;
    padding: 0.375rem 0.5rem;
}

.ap-menu-sublink {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.ap-menu-sublink-title {
    font-size: 0.9375rem;
    line-height: 1.25rem;
    font-weight: 500;
    color: var(--color-greyscale-950);
    transition: color 0.15s ease;
}

.ap-menu-sublink-desc {
    font-size: 0.75rem;
    line-height: 1rem;
    color: var(--color-greyscale-500);
}

/* Solutions items (desktop dropdown and mobile menu): an icon tile beside
   each entry, as on the homepage (src/assets/styles/css/home.css,
   .home-menu-sublink.has-icon). The icons are single-colour, so they're
   painted as a mask filled with the tile's text colour.

   Hover follows the panel's background: the row fills one step darker than
   a light panel (or lighter than a dark one, see .ap-header-dark below) and
   the text keeps its colour. The padding is cancelled by a matching negative
   margin, so the fill reaches 8px around the item without moving the layout. */
.ap-menu-sublink.has-icon {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    margin: -0.5rem;
    padding: 0.5rem;
    border-radius: 0.5rem;
    transition: background-color 0.15s ease;
}

.ap-menu-sublink.has-icon:hover,
.ap-menu-sublink.has-icon:focus-visible {
    background: var(--color-greyscale-50);
}

/* The icon tile inverts (Figma "Menu" hover frame 13356:54716): a
   greyscale-950 tile with a white icon. The icon is a mask painted in the
   tile's text colour, so `color` recolours it. */
.ap-menu-sublink.has-icon:hover .ap-menu-sublink-icon,
.ap-menu-sublink.has-icon:focus-visible .ap-menu-sublink-icon {
    background: var(--color-greyscale-950);
    color: var(--color-white);
}

.ap-menu-sublink-text {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.ap-menu-sublink-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    background: var(--color-greyscale-50);
    color: var(--color-greyscale-950);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.ap-menu-icon {
    display: inline-block;
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
    background-color: currentColor;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
}

.ap-menu-icon-inbox {
    mask-image: url("/assets/images/site/icon-inbox.svg");
    -webkit-mask-image: url("/assets/images/site/icon-inbox.svg");
}

.ap-menu-icon-ai-plan {
    mask-image: url("/assets/images/site/icon-plansom.svg");
    -webkit-mask-image: url("/assets/images/site/icon-plansom.svg");
}

.ap-menu-auth {
    display: flex;
    gap: 0.5rem;
    padding-top: 0.25rem;
}

.ap-menu-auth .ap-btn {
    flex: 1;
    height: 3rem;
}

@media (min-width: 48rem) {
    .ap-header-logo {
        height: 1.75rem;
    }

    .ap-header-tagline {
        display: block;
    }

    .ap-header-auth {
        display: flex;
    }

    .ap-menu-auth {
        display: none;
    }
}

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

    .ap-header-burger,
    .ap-header-mobile-menu {
        display: none;
    }

    .ap-header-brand,
    .ap-header-actions {
        flex: 1 0 0;
    }
}

/* ===== Dark header variant =====
   Figma "header-homepage" on a dark first fold (about, contact, FAQs,
   pricing). Only colours change. */
.ap-header-dark {
    background: var(--color-greyscale-900);
}

/* The links rest in Figma's text-secondary (#f5f5f5) and, as on the
   homepage's light header, hover darkens the text. */
.ap-header-dark .ap-header-nav-link {
    color: var(--color-greyscale-50);
}

.ap-header-dark .ap-header-nav-link:hover,
.ap-header-dark .ap-header-nav-link[aria-expanded="true"] {
    color: var(--color-greyscale-400);
}

/* Figma dark header: Surface-1 fill with the dark-mode Outline-2 (#595959). */
.ap-header-dark .ap-header-auth .ap-btn-outline,
.ap-header-dark .ap-header-burger {
    background: var(--color-greyscale-900);
    border-color: var(--color-greyscale-700);
    color: var(--color-greyscale-50);
}

.ap-header-dark .ap-header-burger:hover {
    background: var(--color-greyscale-800);
    color: var(--color-white);
}

/* Figma button "type=secondary, color theme=dark, state=hover" (11296:33476):
   Sign in fills primary and drops its outline; the text stays greyscale-50. */
.ap-header-dark .ap-header-auth .ap-btn-outline:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-greyscale-50);
    box-shadow: none;
}

/* Try it now keeps the primary hover (fill stays primary, primary glow)
   instead of the light header's greyscale-950 hover. */
.ap-header-dark .ap-header-auth .ap-btn-primary:hover {
    background: var(--color-primary);
    border-color: transparent;
    color: var(--color-white);
    box-shadow: 0 0 0.21875rem var(--color-primary);
}

/* The desktop Solutions panel matches the dark header. */
.ap-header-dark .ap-header-solutions-panel {
    border-color: var(--color-greyscale-800);
    background: var(--color-greyscale-900);
}

.ap-header-dark .ap-header-solutions-panel .ap-menu-sublink-icon {
    background: var(--color-greyscale-800);
    color: var(--color-greyscale-50);
}

.ap-header-dark .ap-header-solutions-panel .ap-menu-sublink-title {
    color: var(--color-greyscale-50);
}

.ap-header-dark .ap-header-solutions-panel .ap-menu-sublink-desc {
    color: var(--color-greyscale-400);
}

/* Hover on the dark panel: the same row fill, a step lighter than it. */
.ap-header-dark .ap-header-solutions-panel .ap-menu-sublink:hover,
.ap-header-dark .ap-header-solutions-panel .ap-menu-sublink:focus-visible {
    background: var(--color-greyscale-800);
}

/* On the dark panel the tile inverts the other way: light tile, dark icon. */
.ap-header-dark .ap-header-solutions-panel .ap-menu-sublink:hover .ap-menu-sublink-icon,
.ap-header-dark .ap-header-solutions-panel .ap-menu-sublink:focus-visible .ap-menu-sublink-icon {
    background: var(--color-greyscale-50);
    color: var(--color-greyscale-950);
}

/* ===== FAQ list =====
   Shared by the landing pages' FAQ sections (lp/ai-priorities, lp/ai-plan,
   partners). Figma "faq-item" (13356:53677), mirroring the homepage's
   .home-faq-* (src/assets/styles/css/home.css): greyscale-100 rules, 16px
   padding, the question in H4-Regular and the answer 8px under it in Body. */
.ap-faq {
    background: var(--color-white);
}

.ap-faq-title {
    text-align: center;
}

/* Figma container 13356:61170: a 720px column, the link 32px under it. */
.ap-faq-list {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2rem;
    width: 100%;
    max-width: 45rem;
}

.ap-faq-items {
    width: 100%;
    border-top: 0.0625rem solid var(--color-greyscale-100);
}

.ap-faq-item {
    border-bottom: 0.0625rem solid var(--color-greyscale-100);
}

/* H4-Regular: 16/20 at 375, 16/22 at 768, 18/24 from 1024. */
.ap-faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: 1rem;
    font-size: 1rem;
    line-height: 1.25rem;
    font-weight: 400;
    color: var(--color-greyscale-900);
    list-style: none;
    cursor: pointer;
}

.ap-faq-question::-webkit-details-marker {
    display: none;
}

.ap-faq-chevron {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    transition: transform 0.2s ease;
}

.ap-faq-item[open] .ap-faq-chevron {
    transform: rotate(180deg);
}

/* faq-accordion.js keeps a closing item [open] while it slides shut; the
   chevron turns back as soon as it starts. */
.ap-faq-item[open].is-closing .ap-faq-chevron {
    transform: none;
}

/* Question -> answer is 8px in Figma. */
.ap-faq-item[open] .ap-faq-question {
    padding-bottom: 0.5rem;
}

.ap-faq-item .ap-faq-answer {
    margin: 0;
    padding-bottom: 1rem;
    font-size: 0.875rem;
    line-height: 1.125rem;
    color: var(--color-greyscale-600);
}

/* An opened answer fades in under its question. */
@keyframes ap-fade-in {
    from {
        opacity: 0;
        transform: translateY(-0.25rem);
    }

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

.ap-faq-item[open] .ap-faq-answer {
    animation: ap-fade-in 0.2s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .ap-faq-item[open] .ap-faq-answer {
        animation: none;
    }
}

/* "View all FAQs": the arrow link in text-secondary, as on the homepage. */
.ap-page .ap-faq-view-all {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    color: var(--color-greyscale-700);
    transition: color 0.15s ease;
}

.ap-faq-view-all-text {
    border-bottom: 0.0625rem solid var(--color-greyscale-300);
    font-size: 0.875rem;
    line-height: 1.125rem;
}

.ap-faq-view-all-icon {
    display: block;
    width: 0.75rem;
    height: 0.75rem;
}

.ap-page .ap-faq-view-all:hover {
    color: var(--color-greyscale-950);
}

@media (min-width: 48rem) {
    .ap-faq-question {
        line-height: 1.375rem;
    }
}

@media (min-width: 64rem) {
    .ap-faq-question {
        font-size: 1.125rem;
        line-height: 1.5rem;
    }
}

/* ===== Footer =====
   Figma "footer-homepage" (13356:61199), mirroring the homepage's
   .home-footer (src/assets/styles/css/home.css) value for value. */
.ap-footer {
    padding: 3rem var(--ap-margin) 1.75rem;
    background: var(--color-greyscale-50);
    border-top: 0.0625rem solid var(--color-greyscale-100);
}

/* Figma Size/container-max-width: 1000px. */
.ap-footer-inner {
    display: flex;
    flex-direction: column;
    max-width: 62.5rem;
    margin-inline: auto;
}

/* 375: logo left and address right on one row, 48px above the links. */
.ap-footer-menu {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    margin-bottom: 3rem;
}

.ap-footer-brand {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
    flex-shrink: 0;
    width: 100%;
}

.ap-footer-brand > a {
    align-self: flex-start;
}

.ap-footer-mark {
    display: block;
    width: 1.4375rem;
    height: 2rem;
}

.ap-footer-address {
    flex: 1 0 0;
    min-width: 0;
    font-size: 0.75rem;
    line-height: 1rem;
    font-style: normal;
    text-align: right;
    color: var(--color-greyscale-700);
}

.ap-footer-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem 1rem;
}

.ap-footer-column {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

/* Button 2 (15/20) in text-primary. */
.ap-footer-heading {
    font-size: 0.9375rem;
    line-height: 1.25rem;
    font-weight: 500;
    color: var(--color-greyscale-950);
}

.ap-footer-links {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Block, not inline: an inline link's own line-height can't shrink its
   <li>'s inherited line box. Body (14/18) in text-secondary. */
.ap-footer-links a {
    display: block;
    width: fit-content;
    font-size: 0.875rem;
    line-height: 1.125rem;
    color: var(--color-greyscale-700);
    transition: color 0.2s;
}

/* Live site's footer: grey links darken to text-primary on hover, no underline. */
.ap-footer .ap-footer-links a:hover {
    color: var(--color-greyscale-950);
}

/* The rule above the bottom row: Figma draws it as that row's top border. */
.ap-footer-divider {
    width: 100%;
    margin: 0;
    border: none;
    border-top: 0.0625rem solid var(--color-greyscale-100);
}

.ap-footer-bottom {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-top: 1.75rem;
}

.ap-footer-bottom-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 0.75rem;
    line-height: 1rem;
    color: var(--color-greyscale-600);
}

/* The 375 frame drops the tagline from the bottom row. */
.ap-footer-tagline {
    display: none;
}

.ap-footer-compliance {
    min-width: 11.9024rem; /* Figma's 190.44px text box */
    color: var(--color-greyscale-700);
}

.ap-footer-social {
    display: inline-flex;
}

.ap-footer-social img {
    width: 1.125rem;
    height: 1.125rem;
}

@media (min-width: 48rem) {
    .ap-footer {
        padding-top: 4rem;
        padding-bottom: 2rem;
    }

    .ap-footer-menu {
        gap: 4rem;
        margin-bottom: 4rem;
    }

    .ap-footer-brand {
        flex-direction: column;
    }

    .ap-footer-address {
        text-align: left;
    }

    .ap-footer-columns {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 0.75rem;
    }

    .ap-footer-column {
        gap: 1.5rem;
    }

    .ap-footer-links {
        gap: 1rem;
    }

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

    .ap-footer-bottom-group {
        flex-direction: row;
        align-items: center;
        gap: 2rem;
    }

    .ap-footer-tagline {
        display: block;
    }
}

/* 1024+: a 200px brand column, then five equal link columns 12px apart. */
@media (min-width: 64rem) {
    .ap-footer-menu {
        flex-direction: row;
        gap: 1.5rem;
    }

    .ap-footer-brand {
        width: 12.5rem;
        min-width: 12.5rem;
    }

    .ap-footer-columns {
        display: flex;
        flex: 1 1 0;
        min-width: 0;
    }

    .ap-footer-column {
        flex: 1 0 0;
    }
}

/* Past the 1920 frame the 1024->1920 interpolations above are done:
   pin them to their 1920 values so they scale with the root font-size
   bumps instead of drifting with vw. Side margins and section padding
   are left fluid, as on the homepage, so shared sections line up. */