/* ========================================================================
   FocalBrief landing — base
   Implemented 1:1 from Figma "SC· FocalBrief News Digest" / landing page
   (file pv1YrKOqaqGQ10EoohoBfM, node 3468:261 — 1440 x 4931)
   ======================================================================== */

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

/* Libre Caslon Text Medium (OFL, google/fonts variable master pinned to
   wght 500, Latin subset). Used for headings only. */
@font-face {
    font-family: 'Libre Caslon Text';
    src: url('assets/fonts/libre-caslon-text-medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Palette */
    --fb-bg: #000000;
    /* Button press feedback (scale while held); reduced motion sets these to 1. */
    --fb-press: 0.97;
    --fb-press-icon: 0.94;
    --fb-blue: #1B9FF7;
    --fb-blue-soon: #49ADF5;
    --fb-white: #FFFFFF;

    --fb-t90: rgba(255, 255, 255, 0.9);
    --fb-t80: rgba(255, 255, 255, 0.8);
    --fb-t70: rgba(255, 255, 255, 0.7);
    --fb-t60: rgba(255, 255, 255, 0.6);
    --fb-t50: rgba(255, 255, 255, 0.5);
    --fb-t40: rgba(255, 255, 255, 0.4);
    --fb-t30: rgba(255, 255, 255, 0.3);
    --fb-t20: rgba(255, 255, 255, 0.2);
    --fb-t10: rgba(255, 255, 255, 0.1);
    --fb-t05: rgba(255, 255, 255, 0.05);

    /* Typography */
    --fb-font: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    /* Headings — Figma: Libre Caslon Text Medium (self-hosted, assets/fonts) */
    --fb-font-display: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;

    /* Responsive layout tokens. Desktop values equal the literal Figma
       measurements already used across the sections (node 3468:261, 1440
       canvas), so the desktop render is unchanged. Sections consume these
       ONLY inside their @media (max-width: 1100px / 767px) blocks; the two
       blocks at the end of this file redefine them for tablet and mobile. */
    --fb-gutter: 80px;          /* page gutter: .fb-container padding */
    --fb-gutter-wide: 60px;     /* 1320-wide frames: .fb-panel, .res-wrap  (calc(100% - 2*gutter-wide)) */
    --fb-gutter-card: 24px;     /* 1392-wide hero card */
    --fb-panel-inset: 19px;     /* .fb-panel padding */
    --fb-section-gap: 120px;    /* reference for section padding-top (sections keep their literal Figma values on desktop) */

    /* Optional type-scale tokens (desktop = Figma sizes). Sections may use
       them instead of literal px in their media blocks. */
    --fb-fs-display: 48px;      /* hero h1 */
    --fb-fs-h2: 40px;           /* big section h2: privacy, trusted, KYB, FAQ */
    --fb-fs-h2-sm: 32px;        /* medium h2: how-it-works, results */
    --fb-fs-h3: 20px;           /* card h3 + FAQ question */
}

html {
    overflow-x: hidden;
    scroll-behavior: smooth;
}

/* In-page links land below the pinned 48px assessment sub-nav. */
section[id] {
    scroll-margin-top: 64px;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    :root {
        --fb-press: 1;
        --fb-press-icon: 1;
    }
}

body {
    font-family: var(--fb-font);
    background: var(--fb-bg);
    color: var(--fb-t70);
    line-height: 1.5;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    cursor: pointer;
}

/* The 1440 canvas: 1280 content column inside an 80px gutter.
   --fb-gutter resolves to 80px on desktop (see :root). */
.fb-container {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 var(--fb-gutter);
}

/* ========================================================================
   Buttons — Figma node 3468:548 (32px) and the hero / banner variants
   ======================================================================== */
.fb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    font-weight: 700;
    font-size: 13px;
    line-height: 19px;
    letter-spacing: -0.13px;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    transition: filter 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, scale 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Press feedback: a button dips while held and springs back on release. The
   standalone `scale` property composes with any transform already applied.
   Pressing is quick; the release uses the springy curve on the base rule. */
.fb-btn:active {
    scale: var(--fb-press);
    transition: filter 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, scale 0.08s ease-out;
}

/* Measured off Figma's 1:1 render of node 3468:1187: top edge (60,179,247)
   over fill (44,173,247) => alpha .15; the bottom edge is byte-identical to
   the row above it => alpha 0. This stroke ramps to nothing, unlike the card
   hairlines which bottom out at .05. */
.fb-btn-primary {
    --fb-hair-bot: 0;
    /* Figma hairline — see .fb-hair ring in the base layer. */
    --fb-hair-w: 0.5px;
    position: relative;
    height: 32px;
    padding: 0 12px;
    border-radius: 6px;
    overflow: hidden;
    color: var(--fb-white);
    /* Figma 3468:1187 / 3468:315 / 3468:548: drop shadow 0 2 8 at black 5% */
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.05);
    background-image:
        linear-gradient(0deg, rgba(23, 7, 82, 0.1) 1.3158%, rgba(90, 255, 250, 0.1) 98.684%),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.05) 100%),
        linear-gradient(90deg, rgb(27, 159, 247) 0%, rgb(27, 159, 247) 100%);
}

.fb-btn-primary:hover {
    filter: brightness(1.08);
}

.fb-btn-ghost {
    height: 32px;
    padding: 0 12px;
    border: 0.5px solid var(--fb-t30);
    border-radius: 6px;
    overflow: hidden;
    color: var(--fb-t70);
}

/* On hover EVERY outline button drops its outline and fills with white at 10%
   (the "Learn more" behaviour). Written as `.fb-btn.fb-btn-ghost` on purpose:
   sections legitimately override the RESTING border colour — the footer Login
   strokes at 0.2 rather than 0.3 per Figma — and a single-class `:hover` ties
   those descendant overrides on specificity and then loses on source order,
   because every section stylesheet is concatenated after this one. The extra
   class makes the hover win without needing !important. */
.fb-btn.fb-btn-ghost:hover,
.fb-btn.fb-btn-ghost:focus-visible {
    border-color: transparent;
    background-color: var(--fb-t20);
    color: var(--fb-white);
}

/* ========================================================================
   Rounded panel behind the "Know yourself better" banner + FAQ
   Figma node 3468:262 — x=60 y=3121 w=1320 h=1068, radius 16
   ======================================================================== */
.fb-panel {
    width: calc(100% - 120px);
    max-width: 1320px;
    margin: 110px auto 0;
    /* 19px inset + the 1px stroke lands the banner at Figma's x=80 / y=3141
       and keeps the panel's own box at exactly 1320 x 1068. */
    padding: 19px 19px 55px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    /* 5% black over rgb(40,42,47) = (38,40,44.65); confirmed against
       Figma's 1:1 render, which samples (38,40,45). */
    background-color: #26282D;
    overflow: hidden;
}

/* ========================================================================
   Figma hairlines
   Figma draws these as thin INSIDE strokes filled with a VERTICAL WHITE
   GRADIENT — measured off Figma's own 1:1 node renders as alpha .15 at the
   top ramping to .05 at the bottom (e.g. node 3468:1125: top edge sampled
   83/255, sides 79, bottom 74, over a 69,70,75 fill).
   `get_design_context` cannot express a gradient stroke, so it flattens every
   one of them to an opaque `border: white`. On a retina display Chrome snaps
   a sub-pixel border to one solid device pixel, so copying that literally
   renders a crisp white line roughly 6x brighter than the design.
   Drawn here as a masked ring: it keeps each element's border-radius, costs
   no layout size, and survives the `overflow: hidden` those elements carry.
   Per-element thickness comes from --fb-hair-w.
   ======================================================================== */
.hero-fp::after,
.hero-fp-expand::after,
.hero-fp-close::after,
.fbnav-panel-close::after,
.how-media--two::after,
.how-media--three::after,
.how-upload::after,
.how-upload-cta::after,
.how-rank::after,
.how-badge::after,
.how-dash-news::after,
.how-dash-digest::after,
.how-dash-cta::after,
.kyb-banner::after,
.fb-btn-primary::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: var(--fb-hair-w, 0.5px);
    background: linear-gradient(180deg,
        rgba(255, 255, 255, var(--fb-hair-top, 0.15)) 0%,
        rgba(255, 255, 255, var(--fb-hair-bot, 0.05)) 100%);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
    z-index: 2;
}

/* ========================================================================
   Interactive icons
   These glyphs are white with their dimming baked into the SVG as
   opacity="0.6"/"0.7"/"0.5" — a value CSS cannot brighten. The attribute has
   been removed from the files and re-applied here, so an icon lifts to full
   white together with its label when its link or button is hovered.
   ======================================================================== */
.fbnav-chevron img,
.hero-subnav-redeem-icon img,
.ft-icon img {
    opacity: 0.6;
    transition: opacity 0.18s ease;
}

.fbnav-globe img,
.ft-icon img[src$="globe-icon.svg"] {
    opacity: 0.7;
}

a:hover .fbnav-chevron img,
a:hover .hero-subnav-redeem-icon img,
a:hover .ft-icon img,
button:hover .fbnav-globe img,
button:hover .ft-icon img {
    opacity: 1;
}

/* The FAQ +/- glyphs are deliberately NOT given an opacity here: they are
   cross-faded by .faq__icon-plus / .faq__icon-minus, and an `.faq__icon img`
   rule (0,1,1) would out-specify those class rules (0,1,0) and pin both
   glyphs visible at once. Only the transition is shared. */
.faq__icon img {
    transition: opacity 0.18s ease;
}

/* Accessibility */
.fb-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

:focus-visible {
    outline: 2px solid var(--fb-blue);
    outline-offset: 2px;
}

/* ========================================================================
   Responsive system — shared breakpoints
   desktop: no media query (>= 1101px) — byte-identical to the Figma build.
   tablet:  @media (max-width: 1100px)
   mobile:  @media (max-width: 767px)
   tiny:    @media (max-width: 419px)  (optional, section-owned)
   Sections append their own blocks with EXACTLY these queries and consume
   the tokens redefined here. Nothing below touches the desktop render.
   ======================================================================== */

/* ---- Tablet (768..1100) ---------------------------------------------- */
@media (max-width: 1100px) {
    :root {
        /* 24px page gutters; every 1320 / 1392 frame collapses to one fluid
           `100% - 48px` column. */
        --fb-gutter: 24px;
        --fb-gutter-wide: 24px;
        --fb-gutter-card: 24px;
        --fb-panel-inset: 16px;
        --fb-section-gap: 96px;

        --fb-fs-display: 40px;
        --fb-fs-h2: 40px;
        --fb-fs-h2-sm: 32px;
        --fb-fs-h3: 20px;
    }

    /* Figma 3468:262 panel: the 120px desktop gutter left it 648px wide at
       768 — follow the page gutter instead. */
    .fb-panel {
        width: calc(100% - 48px);
        margin-top: 80px;
        padding: 16px 16px 40px;
    }

    /* Hide purely decorative art that has no room at this breakpoint
       (class added to markup by the owning section). */
    .fb-hide-tablet {
        display: none !important;
    }
}

/* ---- Mobile (<= 767) ------------------------------------------------- */
@media (max-width: 767px) {
    :root {
        /* 16px page gutters, single column: `100% - 32px`. */
        --fb-gutter: 20px;   /* Figma 3541:19375 insets everything 20px */
        --fb-gutter-wide: 16px;
        --fb-gutter-card: 16px;
        --fb-panel-inset: 12px;
        --fb-section-gap: 72px;

        --fb-fs-display: 40px;
        --fb-fs-h2: 32px;
        --fb-fs-h2-sm: 28px;
        --fb-fs-h3: 18px;
    }

    /* Figma 3541:21773: 20px in, 48px under Trusted, 8px around the banner
       and 32px below the FAQ (padding + the 1px stroke), radius 16. */
    .fb-panel {
        width: calc(100% - 2 * var(--fb-gutter));
        margin-top: 48px;
        padding: 7px 7px 31px;
        border-radius: 16px;
    }

    /* The 32px Figma bars (node 3468:548) sit below the 40px tap minimum.
       Written as min-height, not height: sections re-declare `height: 32px`
       on .fbnav-login / .hero-btn-nav / .how-learn later in the cascade, and
       min-height wins over any `height` without a specificity fight — while
       the 42px hero / KYB / results variants (section-owned) are untouched. */
    .fb-btn-primary,
    .fb-btn-ghost {
        min-height: 40px;
        padding: 0 16px;
    }

    .fb-hide-mobile {
        display: none !important;
    }
}

/* === 01-header === */
/* Figma node 3468:263 — 1440 x 48.5 (48px bar + 0.5px hairline), x=0 y=0 */

.fbnav {
    position: static;
    width: 100%;
    font-family: var(--fb-font);
}

/* Pages without the assessment sub-nav (FAQs, …) keep the site header in
   view: sticky, on the stuck sub-nav's surface (8% black, 20px blur).
   Two classes so it also beats the phone rule that makes the bar relative. */
.fbnav.fbnav--sticky {
    position: sticky;
    top: 0;
    z-index: 60;
    transition: translate 0.36s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s linear 0s;
}

/* Once the footer comes into view the header slides up out of the way
   (01-header.js), and returns as soon as the footer leaves the screen. */
.fbnav.fbnav--sticky.fbnav--away {
    translate: 0 -100%;
    visibility: hidden;
    transition: translate 0.3s cubic-bezier(0.4, 0, 1, 1), visibility 0s linear 0.3s;
}

@media (prefers-reduced-motion: reduce) {
    .fbnav.fbnav--sticky,
    .fbnav.fbnav--sticky.fbnav--away {
        transition: none;
    }
}

/* The blur lives on a layer behind the bar, not on the header: a backdrop
   filter on the header would become the containing block of the phone
   menu's position: fixed panel and trap it inside the 48px bar. */
.fbnav.fbnav--sticky::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: rgba(0, 0, 0, 0.08);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    pointer-events: none;
}

/* Inner bar — node 3468:264 (1280 x 48, inside the 80px page gutter) */
.fbnav-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 48px;
    width: 100%;
}

/* ---------- Left cluster: logo + nav — node 3468:265 ---------- */
.fbnav-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Logo box — node 3468:266 (134 x 32, overflow clipped) */
.fbnav-logo {
    display: flex;
    align-items: center;
    width: 114px;           /* Figma 3795:6465: the re-exported lockup's frame */
    height: 32px;
    overflow: hidden;
    text-decoration: none;
    flex-shrink: 0;
}

/* Lockup — node 3469:1360 (115.81 x 20): mark at x=0, wordmark at x=24.07 */
/* Lockup — node 3533:16948 (113.48 x 28): mark frame at y 3.63, wordmark at
   x 25.35 / y 5.78, so the wordmark sits 0.35px above the mark's centre line. */
.fbnav-logo-lockup {
    display: flex;
    align-items: flex-start;
    gap: 4.259px;           /* Figma 3795:6465: wordmark at x = 25 */
    height: 28px;
}

/* Mark frame — node 3533:16950 (20.74 x 20.74) holding the 17.63 glyph (3533:16952) */
.fbnav-logo-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20.741px;
    height: 20.741px;
    margin-top: 3.63px;
    flex-shrink: 0;
}

.fbnav-logo-mark img {
    display: block;
    width: 17.63px;
    height: 17.63px;
}

/* Wordmark — node 3533:16949 (87.154 x 15.726) */
.fbnav-logo-word {
    display: block;
    width: 89.101px;        /* the re-exported wordmark (3795:6476) */
    height: 15px;
    margin-top: 6.61px;
    flex-shrink: 0;
}

.fbnav-logo-word img {
    display: block;
    width: 100%;
    height: 100%;
}

/* Nav links — node 3468:278 (gap 20px) */
.fbnav-links {
    display: flex;
    align-items: center;
    gap: 20px;
}

.fbnav-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    line-height: 19px;
    font-weight: 600;
    letter-spacing: -0.13px;
    color: var(--fb-t70);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s ease;
}

.fbnav-link:hover,
.fbnav-link:focus-visible {
    color: var(--fb-white);
}

/* The current page's link is white (Figma 3535:17031), the rest stay at 70%:
   Assessment on the assessment page, FAQs on the FAQs page. */
.fbnav-link[aria-current="page"],
.fbnav-panel-link[aria-current="page"] {
    color: var(--fb-white);
}

/* "Soon" — node 3468:283, Geist Light, #49ADF5 */
.fbnav-soon {
    font-weight: 300;
    color: var(--fb-blue-soon);
}

.fbnav-link:hover .fbnav-soon,
.fbnav-link:focus-visible .fbnav-soon {
    color: var(--fb-blue-soon);
}

/* Chevron — node 3468:286 (16 x 16) */
.fbnav-chevron {
    display: block;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.fbnav-chevron img {
    display: block;
    width: 100%;
    height: 100%;
}

/* ---------- Right cluster — node 3468:292 (113 x 32, gap 16px) ---------- */
.fbnav-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Globe + EN — node 3468:293 (gap 4px) */
.fbnav-lang {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    margin: 0;
    border: 0;
    background: none;
    font-family: inherit;
    cursor: pointer;
}

/* Globe icon — node 3468:294 (16 x 16) */
.fbnav-globe {
    display: block;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.fbnav-globe img {
    display: block;
    width: 100%;
    height: 100%;
}

/* "EN" — node 3468:297 */
.fbnav-lang-label {
    font-size: 13px;
    line-height: 19px;
    font-weight: 600;
    letter-spacing: -0.13px;
    color: var(--fb-t70);
    white-space: nowrap;
    transition: color 0.15s ease;
}

.fbnav-lang:hover .fbnav-lang-label,
.fbnav-lang:focus-visible .fbnav-lang-label {
    color: var(--fb-white);
}

/* Login button — node 3468:300 (59 x 32, px 12, radius 6, 0.5px border) */
/* Box only — the stroke, hover fill and transition all come from the shared
   .fb-btn-ghost so this matches "Learn more" and the footer Login exactly.
   (Its own `transition` used to omit background-color, so the hover fill
   snapped in rather than easing.) */
.fbnav-login {
    height: 32px;
    padding: 0 12px;
    border-radius: 6px;
    font-weight: 700;
    overflow: hidden;
}

/* Node 3468:307 "Rectangle 8945" (x=80, y=48, w=1280, h=0.5).
   Verified against Figma: this rectangle has NO fill — it is a 0.5px spacer,
   not a divider. Evidence: get_design_context returns a bare <div> with no
   bg-*; get_screenshot of the node renders fully transparent; and the header
   render shows 0 white in its bottom row, while the identically-sized FAQ
   rules (3468:1136, rgba(255,255,255,0.2)) do export a bg-* and do render.
   The 0.5px is what offsets the hero frame (3468:308) to y=49, so the box
   must stay — it just must not paint a line. */
.fbnav-rule {
    width: 100%;
    height: 0.5px;
}

/* ---------- Mobile-only nodes, parked off-screen on tablet/desktop ----------
   The menu toggle and drawer live in the markup at every width so the
   desktop render stays byte-identical; they only get a display value inside
   the mobile block below. */
.fbnav-menu,
.fbnav-drawer {
    display: none;
}

/* ========================================================================
   Responsive — shared breakpoints from 00-base.css (1100 / 767 / 419).
   Desktop (>= 1101) is untouched: the Figma 1440 bar (node 3468:264).
   ======================================================================== */

/* ---- Tablet (768..1100) ----------------------------------------------
   The full link row still fits: logo 134 + links ~420 @ gap 14 + right
   cluster 115 + 48px gutters ≈ 730 < 768, so keep the real navigation
   instead of dropping to a menu button. */
@media (max-width: 1100px) {
    .fbnav-left {
        gap: 14px;
        min-width: 0;
    }

    .fbnav-links {
        gap: 14px;
    }
}

/* Mobile menu panel: phones only. */
.fbnav-panel {
    display: none;
}

/* ---- Mobile (<= 767) ---------------------------------------------------
   Links cannot fit next to the logo and Login, so the row is replaced by the
   Figma two-bar button (3541:19425) opening a full-screen menu (3545:24873). */
@media (max-width: 767px) {
    /* z-index lifts the bar and its menu over the hero card and sub-nav. */
    .fbnav {
        position: relative;
        z-index: 60;
    }

    .fbnav-links {
        display: none;
    }

    /* 3541:19407: EN and Login 16px apart */
    .fbnav-right {
        gap: 16px;
    }

    /* 40px tap boxes around the logo and EN; the artwork does not move. */
    .fbnav-logo,
    .fbnav-lang {
        min-height: 40px;
    }

    .fbnav-lang {
        min-width: 40px;
        justify-content: center;
    }

    /* Login — Figma 3541:19415: the 32px outline button, 12px padding. */
    .fbnav .fbnav-login {
        min-height: 32px;
        height: 32px;
        padding: 0 12px;
    }

    /* Menu button — 3541:19425: 32px, 6px after Login, two 16px bars at 70%
       sitting half a pixel below centre. */
    .fbnav-menu {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        margin-left: -10px;
        padding: 0;
        border: 0;
        border-radius: 6px;
        background: none;
        flex-shrink: 0;
        opacity: 0.7;
        cursor: pointer;
        transition: opacity 0.18s ease, scale 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .fbnav-menu:hover,
    .fbnav-menu:focus-visible {
        opacity: 1;
    }

    .fbnav-menu:active {
        scale: var(--fb-press-icon);
        transition: opacity 0.18s ease, scale 0.08s ease-out;
    }

    .fbnav-menu-icon {
        display: block;
        width: 16px;
        height: 6.5px;
        margin-top: 1px;
    }

    html.fbnav-lock,
    html.fbnav-lock body {
        overflow: hidden;
    }

    /* ---- Menu — Figma 3545:24873 ---------------------------------------- */
    .fbnav-panel:not([hidden]) {
        display: flex;
    }

    .fbnav-panel {
        position: fixed;
        inset: 0;
        z-index: 200;
        flex-direction: column;
        overflow-y: auto;
        overscroll-behavior: contain;
        border-radius: 12px;
    }

    /* The menu is a layer under the SAME bar: the bar sits exactly over the
       page header and never animates; only this surface fades in behind it
       and the contents rise in below. */
    .fbnav-panel::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: -1;
        border-radius: 12px;
        background-color: #26282D;   /* 5% black over rgb(40,42,47) */
        box-shadow: inset 0 0 0 0.5px var(--fb-t10);
        opacity: 0;
        transition: opacity 0.22s cubic-bezier(0.4, 0, 1, 1);
        will-change: opacity;
    }

    .fbnav-panel.is-open::before {
        opacity: 1;
        transition: opacity 0.34s cubic-bezier(0.22, 0.61, 0.36, 1);
    }

    .fbnav-panel-eyebrow,
    .fbnav-panel-link,
    .fbnav-panel-foot {
        opacity: 0;
        translate: 0 10px;
        transition: opacity 0.16s ease, translate 0.2s ease;
    }

    .fbnav-panel.is-open .fbnav-panel-eyebrow,
    .fbnav-panel.is-open .fbnav-panel-link,
    .fbnav-panel.is-open .fbnav-panel-foot {
        opacity: 1;
        translate: 0 0;
        transition: opacity 0.36s cubic-bezier(0.22, 0.61, 0.36, 1), translate 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .fbnav-panel.is-open .fbnav-panel-eyebrow { transition-delay: 0.05s; }
    .fbnav-panel.is-open .fbnav-panel-link:nth-child(1) { transition-delay: 0.08s; }
    .fbnav-panel.is-open .fbnav-panel-link:nth-child(2) { transition-delay: 0.11s; }
    .fbnav-panel.is-open .fbnav-panel-link:nth-child(3) { transition-delay: 0.14s; }
    .fbnav-panel.is-open .fbnav-panel-link:nth-child(4) { transition-delay: 0.17s; }
    .fbnav-panel.is-open .fbnav-panel-link:nth-child(5) { transition-delay: 0.2s; }
    .fbnav-panel.is-open .fbnav-panel-link:nth-child(6) { transition-delay: 0.23s; }
    .fbnav-panel.is-open .fbnav-panel-foot { transition-delay: 0.26s; }

    /* 3544:23798: 48px bar, 20px in, 0.5px rule at 10% */
    .fbnav-panel-bar {
        flex: none;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 48.5px;
        padding: 0 var(--fb-gutter) 0.5px;
        box-shadow: inset 0 -0.5px 0 0 rgba(255, 255, 255, 0);
        transition: box-shadow 0.22s ease;
    }

    .fbnav-panel.is-open .fbnav-panel-bar {
        box-shadow: inset 0 -0.5px 0 0 var(--fb-t10);
        transition: box-shadow 0.34s ease;
    }

    .fbnav-panel-right {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .fbnav-panel-actions {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    /* The Interests Fingerprint collapse button's surface (02-hero.css
       .hero-fp-close): 32px, rgba(50,52,57,.8) with a 10% white wash, the
       shared 0.5px gradient hairline (00-base.css), +10% wash on hover. */
    .fbnav-panel-close {
        --fb-hair-w: 0.5px;
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: none;
        width: 32px;
        height: 32px;
        padding: 8px;
        box-sizing: border-box;
        border: 0;
        border-radius: 6px;
        overflow: hidden;
        cursor: pointer;
        color: var(--fb-t70);
        background-color: rgba(50, 52, 57, 0.8);
        background-image: linear-gradient(90deg, var(--fb-t10) 0%, var(--fb-t10) 100%);
        opacity: 0;
        transition: opacity 0.18s ease, background-image 0.18s ease, color 0.18s ease, scale 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .fbnav-panel.is-open .fbnav-panel-close {
        opacity: 1;
    }

    .fbnav-panel-close:hover,
    .fbnav-panel-close:focus-visible {
        color: var(--fb-white);
        background-image: linear-gradient(90deg, var(--fb-t20) 0%, var(--fb-t20) 100%);
    }

    .fbnav-panel-close:active {
        scale: var(--fb-press-icon);
        transition: opacity 0.18s ease, background-image 0.18s ease, color 0.18s ease, scale 0.08s ease-out;
    }

    .fbnav-panel-close img {
        display: block;
        width: 12.37px;
        height: 12.38px;
    }

    /* Body: "Explore" 24px under the bar; the link columns and Start Test sit
       at the bottom, 20px up (they scroll with the list on short screens). */
    .fbnav-panel-body {
        flex: 1 0 auto;
        display: flex;
        flex-direction: column;
        padding: 24px var(--fb-gutter) 20.5px;
    }

    /* 3545:24979 */
    .fbnav-panel-eyebrow {
        margin: 0 0 18px;
        font-size: 13px;
        line-height: 19px;
        letter-spacing: 0.13px;
        color: var(--fb-t30);
    }

    /* 3545:24954: 20/28 rows, 18px apart */
    .fbnav-panel-links {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
    }

    .fbnav-panel-link {
        position: relative;
        font-size: 20px;
        line-height: 28px;
        font-weight: 400;
        letter-spacing: -0.2px;
        color: var(--fb-white);
        text-decoration: none;
        white-space: nowrap;
    }

    .fbnav-panel-link:hover {
        color: var(--fb-t70);
    }

    /* 3545:24956: "Soon" 13px Light in blue, raised beside "Platform" */
    .fbnav-panel-soon {
        position: absolute;
        left: calc(100% + 4px);
        top: -2.5px;
        font-size: 13px;
        line-height: 19px;
        font-weight: 300;
        letter-spacing: -0.13px;
        color: #49ADF5;
    }

    .fbnav-panel-foot {
        margin-top: auto;
        padding-top: 40px;
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    /* 3545:24988: Company 177 | Platform, as in the footer */
    .fbnav-panel-cols {
        display: grid;
        grid-template-columns: minmax(0, 177fr) minmax(0, 176fr);
    }

    .fbnav-panel-col {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .fbnav-panel-col-title {
        margin: 0 0 4px;              /* 12px to the first link with the 8px gap */
        font-size: 13px;
        line-height: 19px;
        letter-spacing: 0.13px;
        color: var(--fb-t30);
    }

    .fbnav-panel-sublink {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 13px;
        line-height: 19px;
        font-weight: 600;
        letter-spacing: -0.13px;
        color: var(--fb-t70);
        text-decoration: none;
        white-space: nowrap;
        transition: color 0.15s ease;
    }

    .fbnav-panel-sublink:hover,
    .fbnav-panel-sublink:focus-visible {
        color: var(--fb-white);
    }

    .fbnav-panel-sublink img {
        display: block;
        width: 16px;
        height: 16px;
    }

    /* 3545:24967: full-width 42px primary button */
    .fbnav .fbnav-panel-start {
        width: 100%;
        min-height: 42px;
        height: 42px;
        border-radius: 8px;
    }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
    .fbnav-panel::before,
    .fbnav-panel.is-open::before,
    .fbnav-panel-eyebrow,
    .fbnav-panel-link,
    .fbnav-panel-foot,
    .fbnav-panel.is-open .fbnav-panel-eyebrow,
    .fbnav-panel.is-open .fbnav-panel-link,
    .fbnav-panel.is-open .fbnav-panel-foot {
        translate: none;
        transition: opacity 0.12s ease;
        transition-delay: 0s;
    }
}

/* === faq === */
/* Figma 3468:1115 — x=80 y=3637 w=1280 h=496.
   Lives inside the same rounded panel as section 07, so no page background here. */

.faq {
  width: 100%;
  padding-top: 64px;
}

/* Frame 3468:1115 — flex row, px-[56px], items-start, justify-between */
.faq__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0 56px;
}

/* ---------- Left heading — 3468:1116 (296 x 144) ---------- */

.faq__heading {
  display: flex;
  flex-direction: column;
  margin: 0;
  justify-content: center;
  flex: 0 0 296px;
  width: 296px;
  font-family: var(--fb-font-display);
  font-weight: 500;            /* Libre Caslon Text Medium */
  font-size: 36px;
  line-height: 48px;
  letter-spacing: -1.08px;
  /* Figma 3468:1116 is whitespace-nowrap; "Frequently Asked" is 296px — exactly
     the frame width — so without this the fallback face (or any metric rounding)
     wraps it onto a third line. The <br> supplies the only break. */
  white-space: nowrap;
  text-shadow: 0 0 2px rgba(255, 255, 255, 0.15);
}

.faq__eyebrow {              /* 3468:1117 */
  margin: 0;
  font: inherit;
  color: var(--fb-white);
}

.faq__title {                /* 3468:1118 */
  margin: 0;
  font: inherit;
  color: var(--fb-t60);
}

/* ---------- Question list — 3468:1119 (738 x 496) ---------- */

.faq__list {
  /* motion tokens live on the list, so every FAQ list animates the same way
     wherever it is placed (landing section, FAQs page) */
  --faq-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --faq-dur: 0.32s;
  flex: 0 1 738px;
  width: 738px;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Rows: rounded-[10px]; closed row is 60px tall (3468:1120 etc.) */
.faq__item {
  position: relative;
  border-radius: 10px;
  padding: 0;
  transition: padding var(--faq-dur) var(--faq-ease), margin-top var(--faq-dur) var(--faq-ease);
}

/* Hairline between rows — 3468:1136/1142/1148/1154 (738 x 0.5, rgba(255,255,255,0.2)).
   Figma stacks: row, 2px gap, 0.5px rule, 2px gap, row => 4.5px between rows. */
.faq__item + .faq__item {
  margin-top: 4.5px;
}

.faq__item + .faq__item::before {
  content: "";
  position: absolute;
  top: -2.5px;
  left: 0;
  right: 0;
  height: 0.5px;
  background: var(--fb-t20);
  transition: opacity 0.2s ease;
}

/* An expanded row sits directly against its neighbours (2px gap, no rule) */
.faq__item + .faq__item--open,
.faq__item--open + .faq__item {
  margin-top: 2px;
}

.faq__item--open::before,
.faq__item--open + .faq__item::before {
  opacity: 0;
}

/* Expanded card surface — 3468:1125 */
.faq__item::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 10px;
  /* Figma node 3468:1125 carries a 0.5px GRADIENT stroke, not a flat one. The MCP
     export flattens it to `border-white`. Sampled from Figma's own 1:1 render
     (card fill 69,70,75 on panel 38,40,45): top edge 83 -> alpha .151,
     sides 79 -> .108, bottom 74 -> .054, i.e. a vertical 0.15 -> 0.05 ramp.
     Painted in the border box via background-clip so it keeps the radius and
     adds no layout size. */
  border: 0.5px solid transparent;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.05) 100%),
    linear-gradient(90deg, rgba(50, 52, 57, 0.8) 0%, rgba(50, 52, 57, 0.8) 100%);
  background-origin: border-box, padding-box, padding-box;
  background-clip: border-box, padding-box, padding-box;
  box-shadow: 0 16px 40px -4px rgba(0, 0, 0, 0.1);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s var(--faq-ease);
}

.faq__item--open::after {
  opacity: 1;
}

.faq__item--open {
  padding: 16px 0;
}

/* ---------- Question button ---------- */

.faq__q {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  height: 60px;
  margin: 0;
  padding: 0 20px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--fb-white);
  font-family: var(--fb-font);
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: height var(--faq-dur) var(--faq-ease), background-color 0.18s ease;
}

/* Open: 16px item padding + 28px header = same 60px block, no jump */
.faq__item--open .faq__q {
  height: 28px;
}

/* Hover fills the WHOLE row: the surface is pulled out into the 4.5px gutter
   between rows (inset -2.25px) so there is no dead padding around the
   highlight, and the hairlines either side of the hovered row are hidden —
   the same treatment an expanded row gets. The layer exists on open rows
   too (transparent), so opening a hovered row cross-fades the highlight into
   the card surface instead of dropping it for a frame. */
.faq__q::before {
  content: "";
  position: absolute;
  inset: -2.25px 0;
  z-index: -1;
  border-radius: 10px;
  background-color: transparent;
  transition: background-color 0.18s ease;
}

.faq__item:not(.faq__item--open) .faq__q:hover::before {
  background-color: var(--fb-t05);
}

.faq__item:hover::before,
.faq__item:hover + .faq__item::before {
  opacity: 0;
}

.faq__q:focus-visible {
  outline: 2px solid var(--fb-blue);
  outline-offset: 2px;
}

.faq__q-text {                /* 3468:1122 etc. */
  font-family: var(--fb-font);
  font-weight: 400;           /* Geist Regular */
  font-size: 20px;
  line-height: 28px;
  color: var(--fb-white);
}

/* ---------- +/- icon — 3468:1123 / 3468:1128 (20 x 20) ---------- */

.faq__icon {
  position: relative;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
}

.faq__icon img {
  display: block;
  width: 100%;
  height: 100%;
}

.faq__icon-minus {
  position: absolute;
  top: 0;
  left: 0;
}

/* The glyphs are stacked and cross-faded. Their dimming lives here rather than
   in the SVG files (which now carry no baked opacity), so a collapsed "+" sits
   at 0.5 like Figma and lifts to full white on hover, while the expanded "−"
   is always full strength. */
.faq__icon-plus,
.faq__icon-minus {
  transition: opacity 0.18s ease;
}

.faq__icon-plus {
  opacity: 0.5;
}

.faq__icon-minus {
  opacity: 0;
}

.faq__q:hover .faq__icon-plus {
  opacity: 1;
}

.faq__item--open .faq__icon-plus {
  opacity: 0;
}

.faq__item--open .faq__icon-minus {
  opacity: 1;
}

/* An open row keeps "−" while hovered: `.faq__q:hover .faq__icon-plus`
   (0,3,0) would otherwise out-specify the open state and paint "+" over it. */
.faq__item--open .faq__q:hover .faq__icon-plus {
  opacity: 0;
}

/* ---------- Answer panel — 3468:1130 ---------- */

.faq__answer {
  position: relative;
  z-index: 1;
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--faq-dur) var(--faq-ease);
}

/* No-JS / pre-hydration fallback for the row that is open in the design */
.faq__item--open .faq__answer {
  max-height: 240px;
}

.faq__answer-inner {
  padding: 12px 20px 0;       /* 12px gap below the question row */
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.14s ease, transform var(--faq-dur) var(--faq-ease);
}

/* The answer fades in just behind the growing height and out at once on
   close, so its text is not seen being sliced by the box edge. */
.faq__item--open .faq__answer-inner {
  opacity: 1;
  transform: none;
  transition: opacity 0.24s ease 0.06s, transform var(--faq-dur) var(--faq-ease);
}

.faq__answer--empty .faq__answer-inner {
  padding: 0;
}

.faq__answer-text {
  margin: 0;
  font-family: var(--fb-font);
  font-weight: 300;           /* Geist Light */
  font-size: 15px;
  line-height: 21px;
  letter-spacing: -0.15px;
  color: var(--fb-white);
  opacity: 0.8;
}

@media (prefers-reduced-motion: reduce) {
  .faq__item,
  .faq__item::before,
  .faq__item::after,
  .faq__q,
  .faq__q::before,
  .faq__icon-plus,
  .faq__icon-minus,
  .faq__answer,
  .faq__answer-inner,
  .faq__item--open .faq__answer-inner {
    transition: none;
  }
}

/* ========================================================================
   Responsive — shared breakpoints from 00-base.css (tablet <=1100,
   mobile <=767). Desktop (>=1101) above is untouched: Figma 3468:1115
   is a 1440-only frame, so everything below is a graceful re-flow of it.
   ======================================================================== */

/* ---- Tablet (768..1100) ----------------------------------------------
   3468:1116 (heading, 296 wide) and 3468:1119 (list, 738 wide) no longer
   fit side by side inside the 24px-gutter panel, so they stack. The 56px
   Figma inset (px-[56px]) shrinks to 24px to match the panel's own 16px
   inset + the page gutter rhythm. */
@media (max-width: 1100px) {
  .faq__inner {
    flex-direction: column;
    padding: 0 24px;
  }

  .faq__heading {
    flex: 0 0 auto;
    width: 100%;
    margin-bottom: 24px;
    padding: 0 20px;          /* text lines up with the questions, as on phones */
    white-space: normal;      /* the fixed 296px frame is gone; let it wrap */
  }

  .faq__list {
    flex: 1 1 auto;
    width: 100%;
  }

  /* A closed row keeps its 60px minimum but may grow when the question
     wraps; the vertical padding keeps wrapped text off the row edges. */
  .faq__q {
    height: auto;
    min-height: 60px;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  /* Open row: the 16px item padding (3468:1125) already provides the space,
     so the button collapses to its text height exactly as on desktop. */
  .faq__item--open .faq__q {
    height: auto;
    min-height: 0;
    padding-top: 0;
    padding-bottom: 0;
  }

}

/* ---- Mobile (<=767) — Figma 3541:21644 ---------------------------------
   48px under the banner: heading 28/34 16px in, the list 24px below it.
   Rows 60px with 16px sides and 18/26 questions; the open card has a 16px
   inset, 10px between question and answer. Shared with the FAQs page. */
@media (max-width: 767px) {
  .faq {
    padding-top: 48px;
  }

  .faq__inner {
    padding: 0;
  }

  .faq__heading {
    margin-bottom: 24px;
    padding: 0 16px;
    font-size: 28px;
    line-height: 34px;
    letter-spacing: -0.84px;
  }

  .faq__item--open {
    padding: 0 0 16px;
  }

  .faq__q {
    gap: 8px;
    min-height: 60px;
    padding: 12px 16px;
  }

  /* Open: the card's 16px top inset and the 10px gap live on the button, so
     they count as tap area (16 + 28 + 10 = 54px). */
  .faq__item--open .faq__q {
    min-height: 54px;
    padding-top: 16px;
    padding-bottom: 10px;
  }

  .faq__q-text {
    font-size: 18px;
    line-height: 26px;
  }

  .faq__answer-inner {
    padding: 0 16px;
  }
}

/* === faq page === Figma node 3535:16997 (1440 wide).
   The heading, rows, open card, icons and their motion are the landing page
   FAQ's (08-faq.css); this file only lays out the page around them and adds
   the category nav. */

/* The base layer hides horizontal overflow with overflow-x: hidden, which
   makes a scroll container of the page and stops the category nav from
   sticking. clip hides the same overflow without creating one. */
html,
body {
    overflow-x: clip;
}

/* Content frame 3535:17845: 80px gutters, 90.5px under the 48.5px header,
   117px above the footer body (the footer adds 74px of its own). */
.faqp {
    width: 100%;
    padding: 90.5px 0 43px;
    font-family: var(--fb-font);
    color: var(--fb-white);
}

.faqp-inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 var(--fb-gutter);
}

/* ---- Left column — 3535:18266: title, 40px gap, category nav ---- */
.faqp-side {
    flex: 0 0 296px;
    display: flex;
    flex-direction: column;
    gap: 40px;
    /* the nav stays in reach through the long question list */
    position: sticky;
    top: 88.5px;          /* 40px under the sticky 48.5px site header */
}

/* The landing heading block sizes itself as a row item (flex: 0 0 296px);
   here it sits in a column, where that basis would become a height. */
.faqp-side .faq__heading {
    flex: none;
    width: auto;
}

/* Category nav — 3535:18270: 16/20, -0.32px, 8px apart; the current category
   is white behind a 6px dot (3535:18277), the others sit at 30%. */
.faqp-nav {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.faqp-nav-link {
    display: inline-flex;
    align-items: center;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: -0.32px;
    color: rgba(255, 255, 255, 0.3);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.18s ease, padding-left 0.36s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.faqp-nav-link:hover,
.faqp-nav-link:focus-visible {
    color: var(--fb-t60);
}

/* the current category makes room for the dot: 6px dot + 8px gap */
.faqp-nav-link.is-active {
    color: var(--fb-white);
    padding-left: 14px;
}

/* One dot for the whole nav. faq-page.js slides it onto the current
   category; it appears only once placed, so it never flies in on load. */
.faqp-nav-dot {
    position: absolute;
    left: 0;
    top: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--fb-white);
    pointer-events: none;
    opacity: 0;
}

.faqp-nav.is-ready .faqp-nav-dot {
    opacity: 1;
    transition: transform 0.36s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---- Right column — 3535:18080: 738 wide, blocks 64px apart ---- */
.faqp-groups {
    flex: 0 1 738px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 64px;
}

/* Block — 3535:17849: 16px top padding, title 16px above its list. Anchor
   jumps land clear of the viewport top (the sticky nav sits at 40px). */
.faqp .faqp-group {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 16px;
    scroll-margin-top: 72.5px;   /* clear of the sticky 48.5px header */
}

/* 3535:18210: Geist Regular 24/30, -0.48px, 20px inset; count at 40% */
.faqp-group-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0 20px;
    font-weight: 400;
    font-size: 24px;
    line-height: 30px;
    letter-spacing: -0.48px;
    color: var(--fb-white);
}

.faqp-group-count {
    opacity: 0.4;
}

/* The landing FAQ list is a 738px flex item in a row; here it is a full-width
   item in a column, where that flex-basis would become a height. */
.faqp-group .faq__list {
    flex: none;
    width: 100%;
}

/* ========================================================================
   Responsive — shared breakpoints from 00-base.css. The heading and the
   rows follow the landing FAQ's own tablet/mobile rules.
   ======================================================================== */
@media (max-width: 1100px) {
    .faqp {
        padding: 64px 0 40px;
    }

    /* Title and nav above the questions; the nav becomes a row. */
    .faqp-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 40px;
    }

    .faqp-side {
        position: static;
        flex: none;
        gap: 24px;
    }

    .faqp-side .faq__heading {
        margin-bottom: 0;
    }

    .faqp-nav {
        flex-direction: row;
        flex-wrap: wrap;
        column-gap: 24px;
        row-gap: 0;
        padding: 0 20px;          /* on the heading and questions' inset */
    }

    /* Touch widths: 40px tap targets, and every link keeps room for the dot
       so the row never shifts as the dot slides along it. */
    .faqp-nav-link,
    .faqp-nav-link.is-active {
        min-height: 40px;
        padding-left: 14px;
    }

    .faqp-groups {
        flex: none;
        gap: 48px;
    }
}

/* Phones — follows the landing FAQ on Figma 3541:19375: heading, nav and
   category titles share the rows' 16px inset. */
@media (max-width: 767px) {
    .faqp {
        padding-top: 40px;
    }

    .faqp-nav {
        column-gap: 20px;
        padding: 0 16px;
    }

    .faqp-group-title {
        padding: 0 16px;
        font-size: 20px;
        line-height: 28px;
        letter-spacing: -0.2px;
    }

    .faqp-groups {
        gap: 40px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .faqp-nav-link {
        transition: color 0.18s ease;
    }

    .faqp-nav.is-ready .faqp-nav-dot {
        transition: none;
    }
}

/* === 09-footer === */
/* Figma node 3468:1189 — x=0 y=4263 w=1440 h=668
   3468:1190  content block   x=80  y=0    1280 x 431
   3474:247   giant wordmark  x=80  y=446  1279 x 222 (art sits at x=79 y=459, 1280 x 196) */

.ft {
    position: relative;
    width: 100%;
    padding-top: 74px;
    padding-bottom: 0;
    font-family: var(--fb-font);
}

/* ------------------------------------------------------------------
   Body — node 3468:1190 (1280 x 431)
   left rail 154 at x=0, right block 847 at x=433
   ------------------------------------------------------------------ */
.ft-body {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 40px;
    width: 100%;
}

/* ---------- Left rail — node 3468:1191 (154 x 431) ---------- */
.ft-brand {
    flex: 0 0 154px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 154px;
}

/* Logo box — node 3471:1373 (117.6 x 28); lockup 3471:1377 is 115.81 x 20 at y=4 */
.ft-logo {
    display: flex;
    align-items: center;
    width: 117.6px;
    height: 28px;
    text-decoration: none;
}

/* Lockup — node 3533:16948 (113.48 x 28): mark frame at y 3.63, wordmark at
   x 25.35 / y 5.78, so the wordmark sits 0.35px above the mark's centre line. */
.ft-logo-lockup {
    display: flex;
    align-items: flex-start;
    gap: 4.259px;           /* Figma 3795:6465: wordmark at x = 25 */
    height: 28px;
}

/* Mark frame — node 3533:16950 (20.74 x 20.74) holding the 17.63 glyph (3533:16952) */
.ft-logo-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20.741px;
    height: 20.741px;
    margin-top: 3.63px;
    flex-shrink: 0;
}

.ft-logo-mark img {
    display: block;
    width: 17.63px;
    height: 17.63px;
}

/* Wordmark — node 3533:16936 (87.154 x 15.726) */
.ft-logo-word {
    display: block;
    width: 89.101px;        /* the re-exported wordmark (3795:6476) */
    height: 15px;
    margin-top: 6.61px;
    flex-shrink: 0;
}

.ft-logo-word img {
    display: block;
    width: 100%;
    height: 100%;
}

/* Company / copyright — node 3468:1203 (154 x 38 at y=393) */
.ft-legalname {
    display: flex;
    flex-direction: column;
}

.ft-company,
.ft-copyright {
    font-size: 13px;
    line-height: 19px;
    font-weight: 300;
    letter-spacing: -0.13px;
    white-space: nowrap;
    text-shadow:
        0 0 36px rgba(0, 0, 0, 0.75),
        0 0 60px rgba(0, 0, 0, 0.75);
}

.ft-company {
    color: var(--fb-t80);
    text-decoration: none;
    transition: color 0.18s ease;
}

.ft-company:hover {
    color: var(--fb-white);
}

.ft-copyright {
    color: var(--fb-t30);
}

/* ---------- Right block — node 3468:1206 (847 x 431) ---------- */
.ft-main {
    flex: 0 1 847px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    /* 3468:1207 ends at y=185, 3468:1257 starts at y=225 */
    gap: 40px;
}

/* ------------------------------------------------------------------
   Link columns + buttons — node 3468:1207 (847 x 185)
   ------------------------------------------------------------------ */
.ft-top {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 59px;
    width: 100%;
}

/* node 3468:1208 (632 x 185) — columns at x=0 / 217 / 434, widths 197 / 197 / 198 */
.ft-cols {
    display: grid;
    grid-template-columns: 197px 197px 198px;
    column-gap: 20px;
    flex: 0 1 632px;
    min-width: 0;
}

.ft-col {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Dimmed column heading — 13/19, +0.13px tracking */
.ft-col-title {
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 19px;
    font-weight: 400;
    letter-spacing: 0.13px;
    color: var(--fb-t30);
}

/* Link list starts at y=31 (19px heading + 12px), rows 19px with an 8px gap */
.ft-col-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Each row is exactly one 19px line — no inherited line-box padding */
.ft-col-list li {
    display: flex;
    min-width: 0;
    height: 19px;
}

.ft-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    line-height: 19px;
    font-weight: 600;
    letter-spacing: -0.13px;
    color: var(--fb-t70);
    text-decoration: none;
    transition: color 0.15s ease;
}

.ft-link:hover,
.ft-link:focus-visible {
    color: var(--fb-white);
}

.ft-link-label {
    white-space: nowrap;
}

/* 16 x 16 trailing icons — nodes 3468:1228 and 3468:1244 */
.ft-icon {
    display: block;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.ft-icon img {
    display: block;
    width: 100%;
    height: 100%;
}

/* Login + Start Test — node 3468:1252 (153 x 32, 8px gap) */
.ft-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

/* The footer's Login (node 3468:1253) strokes at 0.2 alpha and centres its
   label, unlike the header's 0.3-alpha ghost button (node 3468:300).
   VERIFIED, do not change: get_design_context reports the real paint
   (`border-[0.5px] border-[rgba(255,255,255,0.2)]`), and Figma's 1:1 render
   (59 x 32 PNG) agrees — every edge pixel is 26 over a 0 (black) fill, so
   alpha = 26 / (0.5 * 255) = 0.204 -> 0.2, flat on all four edges. */
.ft-actions .fb-btn-ghost {
    justify-content: center;
    border-color: var(--fb-t20);
}

/* ------------------------------------------------------------------
   Newsletter + legal — node 3468:1257 (847 x 206)
   ------------------------------------------------------------------ */
.ft-bottom {
    display: flex;
    flex-direction: column;
    /* 3468:1258 ends at y=155, 3468:1268 starts at y=187 */
    gap: 32px;
    width: 100%;
}

/* node 3468:1258 (847 x 155) — 24px padding between the two hairlines.
   Drawn as inset shadows so the strokes add no layout height (Figma: 24 + 107 + 24).
   Figma paints them flat at 30% (`border-[rgba(255,255,255,0.3)]`, confirmed
   against its 1:1 render); the site deliberately uses 20% so they sit back
   like the page's other hairlines. */
.ft-news {
    position: relative;
    width: 100%;
    padding: 24px 0;
    box-shadow:
        inset 0 0.5px 0 0 var(--fb-t20),
        inset 0 -0.5px 0 0 var(--fb-t20);
}

/* node 3468:1259 (414 x 107) */
.ft-news-inner {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 414px;
    max-width: 100%;
}

/* node 3468:1260 (414 x 55) */
.ft-news-copy {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ft-news-title {
    margin: 0;
    font-size: 20px;
    line-height: 28px;
    font-weight: 400;
    letter-spacing: normal;
    color: var(--fb-white);
}

.ft-news-note {
    margin: 0;
    font-size: 13px;
    line-height: 19px;
    font-weight: 300;
    letter-spacing: -0.13px;
    color: var(--fb-t60);
}

/* ---------- Email control — node 3468:1264 (414 x 36) ----------
   Input fills x=0..318, Subscribe button (3468:1266) is 96 x 35 flush to the right. */
.ft-subscribe {
    position: relative;
    display: flex;
    align-items: center;
    width: 414px;
    max-width: 100%;
    height: 36px;
    border-radius: 6px;
    overflow: hidden;
    background-image:
        linear-gradient(180deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.1) 100%),
        linear-gradient(90deg, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 100%);
}

/* 0.5px inside hairline, drawn as a masked ring so it adds no layout size.
   MEASURED from Figma's own 1:1 render of node 3468:1264 (414 x 36 PNG) — do NOT
   restore the flattened `border-solid border-white` that get_design_context exports.
   Edge pixel medians vs the fill directly beneath (fill = the 0.09 -> 0.10 white ramp
   over black, i.e. 23.0 at the top, 25.5 at the bottom), solved with
   alpha = (obs - fill) / (0.5 * (255 - fill)) for the 0.5px inside stroke:
       top    obs 35  fill 23.0  -> alpha 0.104
       bottom obs 28  fill 25.5  -> alpha 0.022
       left   obs 31  fill 24.2  -> alpha 0.059  (= the mean of the two, so it is a
                                                  VERTICAL GRADIENT, not a flat stroke)
   Least-squares fit down the left edge (y=5..30): alpha(0) = 0.100, alpha(36) = 0.020.
   => 0.5px vertical gradient, rgba(255,255,255,0.10) -> rgba(255,255,255,0.02).
   (Was 0.15 -> 0.05, which was inferred from the FAQ card, not measured here.) */
.ft-subscribe::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: 6px;
    padding: 0.5px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.02) 100%);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
}

.ft-subscribe-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    margin: 0;
    padding: 0 16px;
    border: 0;
    background: transparent;
    outline: none;
    font-family: inherit;
    font-size: 13px;
    line-height: 19px;
    font-weight: 500;
    letter-spacing: -0.13px;
    color: var(--fb-white);
    -webkit-appearance: none;
    appearance: none;
}

.ft-subscribe-input::placeholder {
    color: var(--fb-white);
    opacity: 0.2;
}

/* node 3468:1266 (96 x 35, inset 0.5px from the top/bottom, flush right) */
.ft-subscribe-btn {
    position: relative;
    flex: 0 0 96px;
    width: 96px;
    height: 35px;
    margin: 0;
    padding: 0 16px;
    border: 0;
    border-radius: 0 6px 6px 0;
    background-image:
        linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 100%),
        linear-gradient(90deg, rgba(50, 52, 57, 0.8) 0%, rgba(50, 52, 57, 0.8) 100%);
    font-family: inherit;
    font-size: 13px;
    line-height: 19px;
    font-weight: 700;
    letter-spacing: -0.13px;
    color: var(--fb-t70);
    white-space: nowrap;
    cursor: pointer;
    /* shrinks toward the email field it is joined to */
    transform-origin: 0 50%;
    transition: background-color 0.15s ease, color 0.15s ease, scale 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Subscribe button hairline — MEASURED from Figma's 1:1 render of node 3468:1266
   (96 x 35 PNG). get_design_context flattens this to `border-[0.5px] border-white`;
   it is really a 0.5px VERTICAL GRADIENT that fades to nothing at the bottom.
   Fill under the stroke = 66.5 (0.1 white over rgba(50,52,57,0.8) over black).
   alpha = (obs - fill) / (0.5 * (255 - fill)):
       top    row y=0  obs 85 (uniform across x) -> alpha 0.196
       bottom row y=34 obs 67 == fill            -> alpha 0.005  (no stroke at all)
       left   col x=0  obs 84 at y=1 .. 67 at y=33, a clean linear ramp;
              median 76 -> alpha 0.106 == the mean of top and bottom  ✔
   Least-squares fit down the left edge: alpha(0) = 0.193, alpha(35) = 0.004.
   => 0.5px vertical gradient rgba(255,255,255,0.2) -> rgba(255,255,255,0).
   Drawn as a masked ring rather than a real border: the button's own fills are
   translucent, so a border-box background layer would bleed through them and
   brighten the interior, and a real border would eat 1px of the 96 x 35 box.
   (The right edge measures brighter than the left in both renders because the
   parent control's own ring — .ft-subscribe::before — overlaps it there; the CSS
   reproduces that doubling for free since the button is flush right.) */
.ft-subscribe-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 0.5px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
}

.ft-subscribe-btn:hover,
.ft-subscribe-btn:focus-visible {
    background-image:
        linear-gradient(90deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.18) 100%),
        linear-gradient(90deg, rgba(50, 52, 57, 0.8) 0%, rgba(50, 52, 57, 0.8) 100%);
    color: var(--fb-white);
}

.ft-subscribe-btn:active {
    scale: var(--fb-press);
    transition: background-color 0.15s ease, color 0.15s ease, scale 0.08s ease-out;
}

/* ---------- Legal row — node 3468:1268 (847 x 19) ---------- */
.ft-legal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
}

/* node 3468:1269 (276 x 19) — text, 20px, 1px rule, 20px, text … */
.ft-legal-links {
    display: flex;
    align-items: center;
    gap: 20px;
}

.ft-legal-link {
    font-size: 13px;
    line-height: 19px;
    font-weight: 300;
    letter-spacing: -0.13px;
    color: var(--fb-t50);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s ease;
}

.ft-legal-link:hover,
.ft-legal-link:focus-visible {
    color: var(--fb-white);
}

/* nodes 3468:1271 / 3468:1273 — 1 x 19 hairline.
   VERIFIED, do not add an opacity/filter here: the stroke lives in the SVG asset
   (divider-vertical.svg: `stroke="white" stroke-opacity="0.1"`, a 1px line), and
   Figma's 1:1 render of 3468:1271 (1 x 19 PNG) is a uniform 26 over a 0 (black)
   fill — alpha = 26 / (1 * 255) = 0.102 -> 0.1. Asset and Figma already agree. */
.ft-legal-sep {
    display: block;
    width: 1px;
    height: 19px;
    flex-shrink: 0;
}

.ft-legal-sep img {
    display: block;
    width: 1px;
    height: 19px;
}

/* node 3468:1275 (65 x 19) — "English" + globe, 4px gap */
.ft-lang {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    cursor: pointer;
    flex-shrink: 0;
}

.ft-lang-label {
    font-size: 13px;
    line-height: 19px;
    font-weight: 600;
    letter-spacing: -0.13px;
    color: var(--fb-t70);
    white-space: nowrap;
    transition: color 0.15s ease;
}

.ft-lang:hover .ft-lang-label,
.ft-lang:focus-visible .ft-lang-label {
    color: var(--fb-white);
}

/* ------------------------------------------------------------------
   Oversized dim wordmark — node 3535:18262 (new logotype, 11% white)
   1280 x 231 in the 80px gutters, 48px below the body (the footer
   frame's column gap) and flush to the bottom of the page
   ------------------------------------------------------------------ */
.ft-wordmark {
    width: 100%;
    max-width: 1440px;
    margin: 48px auto 0;
    padding: 0 80px;
}

.ft-wordmark img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1280 / 230.963;
}

/* 09-footer.js swaps the image for a full-width dot field that reveals the
   logo on hover. The image stays in the flow (invisible) to hold its space;
   the canvas spans the whole footer width from the wordmark's top margin to
   the page bottom (the script sets its height) and never takes clicks. */
.ft-wordmark canvas {
    display: none;
}

.ft-wordmark--dots img {
    visibility: hidden;
}

/* A click on the field sends the reveal wave (09-footer.js). */
.ft-wordmark--dots {
    cursor: pointer;
}

.ft-wordmark--dots canvas {
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    pointer-events: none;
}

/* ------------------------------------------------------------------
   Graceful narrowing (not the Figma mobile design)
   ------------------------------------------------------------------ */
@media (max-width: 1280px) {
    .ft-cols {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        flex: 1 1 auto;
    }

    .ft-top {
        gap: 24px;
    }
}

/* ------------------------------------------------------------------
   Tablet (<= 1100) — shared breakpoint from 00-base.css.
   The 154 + 847 side-by-side body (node 3468:1190) needs ~1000px of
   width; below that the brand rail becomes a full-width row above the
   link block, logo left / company + copyright right.
   ------------------------------------------------------------------ */
@media (max-width: 1100px) {
    .ft {
        padding-top: 56px;
    }

    .ft-body {
        flex-direction: column;
        gap: 48px;
    }

    .ft-brand {
        flex: 0 0 auto;
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        width: 100%;
    }

    .ft-main {
        flex: 0 0 auto;
        width: 100%;
    }

    /* The giant wordmark (node 3474:247) follows the page gutter instead
       of the hard-coded 80px so it stays aligned with .fb-container. */
    .ft-wordmark {
        padding: 0 var(--fb-gutter);
    }
}

/* Tablet only (768..1100): logo on its own row, the link columns beside
   Login / Start Test with the legal name under the buttons, then the
   newsletter block. */
@media (min-width: 768px) and (max-width: 1100px) {
    .ft-body {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto auto auto minmax(0, 1fr) auto;
        column-gap: 40px;
        row-gap: 0;
    }

    .ft-brand,
    .ft-main,
    .ft-top {
        display: contents;
    }

    .ft-logo {
        grid-column: 1 / -1;
        grid-row: 1;
        margin-bottom: 48px;
    }

    .ft-cols {
        grid-column: 1;
        grid-row: 2 / 5;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: 20px;
    }

    .ft-actions {
        grid-column: 2;
        grid-row: 2;
        align-self: start;
    }

    .ft-legalname {
        grid-column: 2;
        grid-row: 3;
        align-self: start;
        margin-top: 24px;
    }

    .ft-bottom {
        grid-column: 1 / -1;
        grid-row: 5;
        margin-top: 40px;
    }
}

/* ------------------------------------------------------------------
   Mobile (<= 767) — Figma 3541:21771, every row 32px apart:
   logo + Login / Start Test, the link columns (Company over Platform on
   the left, Assessment on the right), newsletter, legal links, company
   + language, and the wordmark flush to the page bottom. The wrappers
   step aside (display: contents) so one grid orders the rows.
   ------------------------------------------------------------------ */
@media (max-width: 767px) {
    .ft {
        padding-top: 55px;
    }

    .ft-body {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 16px;
        row-gap: 32px;
    }

    .ft-brand,
    .ft-main,
    .ft-top,
    .ft-bottom,
    .ft-legal {
        display: contents;
    }

    .ft-logo {
        grid-column: 1;
        grid-row: 1;
        align-self: center;
    }

    .ft-actions {
        grid-column: 2;
        grid-row: 1;
        gap: 8px;
    }

    .ft-actions .fb-btn {
        flex: none;
        min-height: 32px;
        height: 32px;
        padding: 0 12px;
    }

    .ft-cols {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
        grid-template-columns: minmax(0, 177fr) minmax(0, 176.5fr);
        column-gap: 0;
        row-gap: 35px;
    }

    .ft-col:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
    }

    .ft-col:nth-child(2) {
        grid-column: 2;
        grid-row: 1 / span 2;
    }

    .ft-col:nth-child(3) {
        grid-column: 1;
        grid-row: 2;
    }

    .ft-col-list li {
        height: auto;
        min-height: 19px;
    }

    .ft-link-label {
        white-space: normal;
    }

    /* Taller hit boxes without moving the 19px lines. */
    .ft-link,
    .ft-lang,
    .ft-company {
        padding: 4px 0;
        margin: -4px 0;
    }

    .ft-legal-link {
        padding: 4px 8px;
        margin: -4px -8px;
    }

    .ft-news {
        grid-column: 1 / -1;
        grid-row: 3;
    }

    .ft-news-inner,
    .ft-subscribe {
        width: 100%;
    }

    .ft-legal-links {
        grid-column: 1 / -1;
        grid-row: 4;
        flex-wrap: wrap;
        row-gap: 8px;
    }

    .ft-legalname {
        grid-column: 1;
        grid-row: 5;
    }

    .ft-lang {
        grid-column: 2;
        grid-row: 5;
        align-self: start;
        justify-self: end;
    }

    .ft-wordmark {
        margin-top: 32px;
        padding: 0 var(--fb-gutter);
    }

    /* Figma draws it 358px wide, 5px past the 353px column. */
    .ft-wordmark img {
        width: calc(100% + 5px);
        max-width: none;
    }
}