/* ==========================================================================
   PropFlo — Agent page
   Mobile first. Base rules are the 390px board; the 1024px media query
   steps up to the 1440px board. Values are taken from the layout boards.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */

:root {
    /* Surfaces */
    --pf-ground: #070A12;
    --pf-panel: #0B1120;

    /* Lines */
    --pf-border: #1B2740;
    --pf-border-strong: #2A3A55;
    --pf-dot: #3A4A66;

    /* Accent */
    --pf-accent: #22D3EE;
    --pf-accent-hover: #67E8F9;
    --pf-accent-ink: #04121A; /* text sitting on an accent fill */

    /* Type colours */
    --pf-heading: #F2F6FB;
    --pf-body: #C3CEDE;
    /* A slightly softer body tone the boards use for answers and captions. */
    --pf-body-soft: #A7B6CC;
    --pf-muted: #8FA3BE;

    /* Hero gradient */
    --pf-glow-near: #123A6B;
    --pf-glow-mid: #0A1730;

    /* Closing band gradient — the deck's back cover treatment */
    --pf-close-near: #1B4C86;
    --pf-close-mid: #0C1D3A;

    /* Families */
    --pf-font-heading: "Space Grotesk", system-ui, sans-serif;
    --pf-font-body: "IBM Plex Sans", system-ui, sans-serif;
    --pf-font-label: "IBM Plex Mono", ui-monospace, monospace;

    /* Layout */
    --pf-gutter: 20px;
    --pf-shell: 1440px;

    /* Minimum touch target (brief: 44px and up) */
    --pf-touch: 44px;
}

@media (min-width: 1024px) {
    :root {
        --pf-gutter: 96px;
    }
}

/* --------------------------------------------------------------------------
   Reset and base
   -------------------------------------------------------------------------- */

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

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--pf-ground);
    color: var(--pf-heading);
    font-family: var(--pf-font-body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
    margin: 0;
    font-family: var(--pf-font-heading);
    font-weight: 700;
    color: var(--pf-heading);
}

p {
    margin: 0;
}

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

a {
    color: var(--pf-accent);
}

a:hover {
    color: var(--pf-accent-hover);
}

:focus-visible {
    outline: 2px solid var(--pf-accent);
    outline-offset: 3px;
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* Visible only to screen readers, until focused (skip link). */
.pf-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: 12px 18px;
    background: var(--pf-accent);
    color: var(--pf-accent-ink);
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 8px 0;
}

.pf-skip:focus {
    left: 0;
    color: var(--pf-accent-ink);
}

/* --------------------------------------------------------------------------
   Shared primitives
   -------------------------------------------------------------------------- */

/* Horizontal shell. The board is 1440px wide with a 96px gutter, which
   leaves 1248px of content; this reproduces that and centres it on wider
   screens. */
.pf-shell {
    width: 100%;
    max-width: var(--pf-shell);
    margin-inline: auto;
    padding-inline: var(--pf-gutter);
}

/* The small monospaced label above a section heading. */
.pf-label {
    margin: 0;
    font-family: var(--pf-font-label);
    font-size: 11px;
    letter-spacing: 2.4px;
    line-height: 1.4;
    color: var(--pf-accent);
    text-transform: uppercase;
}

.pf-label--muted {
    color: var(--pf-muted);
}

@media (min-width: 1024px) {
    .pf-label {
        font-size: 13px;
        letter-spacing: 3.5px;
    }
}

/* Buttons. Both variants clear the 44px touch target at every width. */
.pf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 58px;
    padding: 0 28px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-family: var(--pf-font-body);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.pf-btn--primary {
    background: var(--pf-accent);
    color: var(--pf-accent-ink);
}

.pf-btn--primary:hover {
    background: var(--pf-accent-hover);
    color: var(--pf-accent-ink);
}

.pf-btn--secondary {
    background: transparent;
    border-color: var(--pf-border-strong);
    color: var(--pf-heading);
    font-weight: 500;
}

.pf-btn--secondary:hover {
    border-color: var(--pf-accent);
    color: var(--pf-accent);
}

/* On mobile the two hero buttons stack full width. */
.pf-btn--block {
    display: flex;
    width: 100%;
}

@media (min-width: 1024px) {
    .pf-btn {
        min-height: 60px;
        padding: 0 34px;
    }

    .pf-btn--block {
        display: inline-flex;
        width: auto;
    }
}

/* --------------------------------------------------------------------------
   Site header
   -------------------------------------------------------------------------- */

.pf-header {
    height: 64px;
    display: flex;
    align-items: center;
}

.pf-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

/* The logo is a single image containing both the arrow and the wordmark.
   Sized by height so the proportions hold; width follows automatically.
   The img carries its natural 600x113 in the markup, which reserves the
   right space while it loads and stops the header jumping. */
.pf-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.pf-logo__img {
    height: 28px;
    width: auto;
}

/* The desktop board shows text links; the mobile board shows a menu button.
   Only one of the two is visible at a time. */
.pf-nav {
    display: none;
}

.pf-nav__toggle {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--pf-border-strong);
    border-radius: 8px;
    color: var(--pf-heading);
    cursor: pointer;
}

@media (min-width: 1024px) {
    .pf-header {
        height: 88px;
    }

    .pf-logo__img {
        height: 36px;
    }

    .pf-nav {
        display: flex;
        align-items: center;
        gap: 32px;
    }

    .pf-nav__link {
        font-size: 15px;
        color: var(--pf-body);
        text-decoration: none;
    }

    .pf-nav__link:hover {
        color: var(--pf-accent);
    }

    /* The header's own call to action is smaller than the hero buttons. */
    .pf-nav__cta {
        display: inline-flex;
        align-items: center;
        min-height: 46px;
        padding: 0 22px;
        border: 1px solid var(--pf-accent);
        border-radius: 6px;
        color: var(--pf-accent);
        font-size: 15px;
        font-weight: 500;
        text-decoration: none;
    }

    .pf-nav__cta:hover {
        background: var(--pf-accent);
        color: var(--pf-accent-ink);
    }

    .pf-nav__toggle {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   Section 1 — Hero
   -------------------------------------------------------------------------- */

.pf-hero {
    padding-block: 40px 52px;
    background: radial-gradient(130% 70% at 80% 100%,
            var(--pf-glow-near) 0%,
            var(--pf-glow-mid) 42%,
            var(--pf-ground) 78%);
}

.pf-hero__headline {
    /* 40px on the mobile board, 78px on the desktop board. */
    margin-block: 22px 0;
    font-size: clamp(40px, 5.42vw, 78px);
    line-height: 1.08;
    letter-spacing: -1.2px;
    text-wrap: balance;
}

/* Both boards break the headline into three lines. At 40px that would
   overflow a 390px screen, so the lines run together and wrap naturally on
   mobile, and only become hard breaks once there is room for them. */
.pf-hero__line {
    display: inline;
}

.pf-hero__accent {
    color: var(--pf-accent);
}

.pf-hero__subhead {
    margin-block: 22px 0;
    font-size: 17px;
    line-height: 1.6;
    color: var(--pf-body);
}

.pf-hero__actions {
    margin-block: 28px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pf-hero__note {
    margin-block: 22px 0;
    font-family: var(--pf-font-label);
    font-size: 12px;
    line-height: 1.6;
    letter-spacing: 0.6px;
    color: var(--pf-muted);
}

@media (min-width: 1024px) {
    .pf-hero {
        /* The board is a fixed 812px tall. Using min-height instead keeps the
           section from clipping if the copy grows in the back office. */
        min-height: 812px;
        padding-block: 104px 0;
    }

    .pf-hero__headline {
        margin-block: 34px 0;
        line-height: 1.04;
        letter-spacing: -2px;
        max-width: 880px;
        text-wrap: normal;
    }

    .pf-hero__line {
        display: block;
    }

    .pf-hero__subhead {
        margin-block: 36px 0;
        font-size: 21px;
        max-width: 620px;
    }

    .pf-hero__actions {
        margin-block: 44px 0;
        flex-direction: row;
        align-items: center;
        gap: 16px;
    }

    .pf-hero__note {
        margin-block: 26px 0;
        font-size: 14px;
        letter-spacing: 1px;
    }
}

/* --------------------------------------------------------------------------
   Section 8 — Closing band

   Lives in the master template, so every page gets the same close and the
   same contact details. The contact strip sits inside the gradient, which is
   how the boards draw it, and still has colour in it at that point.
   -------------------------------------------------------------------------- */

.pf-close {
    padding-block: 64px 48px;
    background: radial-gradient(120% 100% at 50% 120%,
            var(--pf-close-near) 0%,
            var(--pf-close-mid) 42%,
            var(--pf-ground) 78%);
}

.pf-close__headline {
    font-size: 34px;
    line-height: 1.12;
    letter-spacing: -0.9px;
    text-wrap: balance;
}

.pf-close__accent {
    color: var(--pf-accent);
}

.pf-close__cta {
    margin-block: 28px 0;
}

.pf-close__note {
    margin-block: 16px 0;
    font-size: 15px;
    color: var(--pf-body-soft);
}

@media (min-width: 1024px) {
    .pf-close {
        padding-block: 120px 96px;
        text-align: center;
    }

    .pf-close__headline {
        margin-inline: auto;
        max-width: 900px;
        font-size: 60px;
        line-height: 1.1;
        letter-spacing: -1.6px;
    }

    .pf-close__cta {
        margin-block: 42px 0;
        min-height: 64px;
        padding: 0 40px;
        font-size: 18px;
    }

    .pf-close__note {
        margin-block: 22px 0;
        font-size: 16px;
    }
}

/* Contact details at the foot of the closing band. */

.pf-contacts {
    margin-block: 40px 0;
    padding-block: 28px 0;
    border-top: 1px solid var(--pf-border);
}

/* The mobile board drops the logo here; the desktop board shows it. */
.pf-contacts__logo {
    display: none;
}

.pf-contacts__people {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.pf-contacts__name {
    font-size: 15px;
    font-weight: 600;
    color: var(--pf-heading);
}

.pf-contacts__detail {
    margin-block: 6px 0;
    font-family: var(--pf-font-label);
    font-size: 13px;
    line-height: 1.6;
    color: var(--pf-muted);
}

.pf-contacts__tel {
    color: var(--pf-muted);
    text-decoration: none;
}

.pf-contacts__tel:hover {
    color: var(--pf-accent);
}

.pf-contacts__email {
    text-decoration: none;
}

.pf-contacts__sep {
    margin-inline: 4px;
}

@media (min-width: 1024px) {
    .pf-contacts {
        margin-block: 76px 0;
        padding-block: 40px 0;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 32px;
        text-align: left;
    }

    .pf-contacts__logo {
        display: inline-flex;
    }

    .pf-contacts__logo .pf-logo__img {
        height: 32px;
    }

    .pf-contacts__people {
        flex-direction: row;
        gap: 64px;
    }

    .pf-contacts__name {
        font-size: 16px;
    }

    .pf-contacts__detail {
        margin-block: 8px 0;
        font-size: 14px;
    }

    /* Desktop puts the number and the address on their own lines. */
    .pf-contacts__tel,
    .pf-contacts__email {
        display: block;
    }

    .pf-contacts__email {
        margin-block: 4px 0;
    }

    .pf-contacts__sep {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   Shared section furniture
   -------------------------------------------------------------------------- */

.pf-section {
    padding-block: 52px;
}

/* A section on the slightly lifted background, ruled top and bottom. */
.pf-band {
    background: #090D18;
    border-top: 1px solid #141D30;
    border-bottom: 1px solid #141D30;
}

.pf-section__heading {
    margin-block: 18px 0;
    font-size: 30px;
    line-height: 1.16;
    letter-spacing: -0.7px;
    text-wrap: balance;
}

.pf-prose {
    font-size: 16px;
    line-height: 1.72;
    color: var(--pf-body);
}

.pf-accent {
    color: var(--pf-accent);
}

.pf-muted {
    color: var(--pf-muted);
}

.pf-label--tight {
    font-size: 11px;
    letter-spacing: 2.4px;
}

/* A bordered panel on the panel background. */
.pf-panel {
    padding: 26px 22px;
    border: 1px solid var(--pf-border);
    border-radius: 14px;
    background: var(--pf-panel);
}

.pf-panel--accent {
    border-color: var(--pf-accent);
    background: linear-gradient(160deg, #0D1B26 0%, var(--pf-panel) 70%);
}

@media (min-width: 1024px) {
    .pf-section {
        padding-block: 96px;
    }

    .pf-section__heading {
        margin-block: 28px 0;
        font-size: 50px;
        line-height: 1.12;
        letter-spacing: -1.2px;
        max-width: 900px;
    }

    .pf-prose {
        font-size: 18px;
        line-height: 1.75;
    }

    .pf-label--tight {
        font-size: 12px;
        letter-spacing: 2.6px;
    }

    .pf-panel {
        padding: 40px;
        border-radius: 16px;
    }
}

/* --------------------------------------------------------------------------
   Section 2 — The wait, and the two timelines
   -------------------------------------------------------------------------- */

.pf-wait__columns {
    margin-block: 20px 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pf-timelines {
    margin-block: 40px 0;
}

.pf-timelines__heading {
    margin-block: 18px 0;
    font-size: 26px;
    line-height: 1.16;
    letter-spacing: -0.7px;
    text-wrap: balance;
}

.pf-timelines__grid {
    margin-block: 26px 0;
    display: grid;
    gap: 12px;
}

.pf-timelines__caption {
    margin-block: 20px 0;
    font-size: 14px;
    line-height: 1.6;
    color: #6E7F98;
}

.pf-timeline {
    padding: 24px 20px;
    border: 1px solid var(--pf-border);
    border-radius: 12px;
    background: var(--pf-panel);
}

.pf-timeline--accent {
    border-color: var(--pf-accent);
    background: linear-gradient(170deg, #0D1B26 0%, var(--pf-panel) 64%);
}

.pf-timeline__figure {
    margin-block: 14px 0;
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}

.pf-timeline__number {
    font-family: var(--pf-font-heading);
    font-size: 48px;
    font-weight: 700;
    letter-spacing: -1.4px;
    color: var(--pf-accent);
}

.pf-timeline__number--muted {
    color: var(--pf-muted);
}

.pf-timeline__unit {
    font-size: 17px;
    color: var(--pf-muted);
}

.pf-timeline__unit--bright {
    color: var(--pf-body);
}

.pf-timeline__note {
    margin-block: 20px 0;
    font-size: 15px;
    line-height: 1.65;
    color: var(--pf-muted);
}

.pf-timeline__note--bright {
    color: var(--pf-body);
}

/* The milestone list. The connector is drawn on the item itself, so the
   markup stays a plain list. */
.pf-steps {
    margin: 24px 0 0;
    padding: 0 0 0 8px;
    list-style: none;
}

.pf-steps__item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 40px;
    font-family: var(--pf-font-label);
    font-size: 12px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--pf-body);
}

.pf-steps__item:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 50%;
    width: 1px;
    height: 40px;
    background: var(--pf-border-strong);
}

.pf-steps--accent .pf-steps__item:not(:last-child)::after {
    background: var(--pf-accent);
}

/* Once the agent is paid, the rest is no longer theirs to wait on, so the
   connector and the labels drop back. */
.pf-steps__item--after::after {
    background: var(--pf-border-strong);
}

.pf-steps--accent .pf-steps__item--paid::after {
    background: rgba(34, 211, 238, 0.33);
}

.pf-steps__item--after {
    color: var(--pf-muted);
}

.pf-steps__dot {
    position: relative;
    z-index: 1;
    flex: none;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 2px solid var(--pf-dot);
    background: var(--pf-panel);
}

.pf-steps__item--after .pf-steps__dot {
    border-color: var(--pf-border-strong);
}

.pf-steps__dot--ring {
    border-color: var(--pf-accent);
}

.pf-steps__dot--solid {
    width: 13px;
    height: 13px;
    border: 0;
    background: var(--pf-heading);
}

/* The moment the money lands. */
.pf-steps__dot--paid {
    width: 15px;
    height: 15px;
    border: 0;
    background: var(--pf-accent);
    box-shadow: 0 0 0 6px rgba(34, 211, 238, 0.18), 0 0 26px 8px rgba(34, 211, 238, 0.45);
}

.pf-steps__item--paid {
    font-family: var(--pf-font-heading);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--pf-accent);
}

.pf-steps__item--end {
    color: var(--pf-heading);
}

@media (min-width: 1024px) {
    .pf-wait__columns {
        margin-block: 40px 0;
        flex-direction: row;
        gap: 72px;
    }

    .pf-wait__columns .pf-prose {
        flex: 1 1 0;
    }

    .pf-timelines {
        margin-block: 86px 0;
        text-align: center;
    }

    .pf-timelines__heading {
        margin-block: 22px 0;
        font-size: 46px;
        line-height: 1.12;
        letter-spacing: -1.2px;
    }

    .pf-timelines__grid {
        margin-block: 56px 0;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 40px;
        text-align: left;
    }

    .pf-timelines__caption {
        margin-block: 30px 0;
    }

    .pf-timeline {
        padding: 36px 34px 32px;
        border-radius: 16px;
    }

    .pf-timeline__number {
        font-size: 70px;
        letter-spacing: -2px;
    }

    .pf-timeline__unit {
        font-size: 21px;
    }

    .pf-steps {
        margin-top: 34px;
    }

    .pf-steps__item {
        min-height: 48px;
        font-size: 13px;
        letter-spacing: 1.6px;
    }

    .pf-steps__item:not(:last-child)::after {
        height: 48px;
    }

    .pf-steps__item--paid {
        font-size: 18px;
    }

    .pf-timeline__note {
        margin-block: 28px 0;
        font-size: 16px;
    }
}

/* --------------------------------------------------------------------------
   Section 3 — What changes
   -------------------------------------------------------------------------- */

.pf-changes__intro {
    margin-block: 20px 0;
    max-width: 780px;
}

.pf-cards {
    margin: 26px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 12px;
}

.pf-card {
    padding: 24px 22px;
    border: 1px solid var(--pf-border);
    border-radius: 12px;
    background: var(--pf-panel);
}

.pf-card__figure {
    font-family: var(--pf-font-heading);
    font-size: 34px;
    font-weight: 700;
    letter-spacing: -0.8px;
    color: var(--pf-accent);
}

.pf-card__text {
    margin-block: 10px 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--pf-body);
}

@media (min-width: 1024px) {
    .pf-changes__intro {
        margin-block: 34px 0;
    }

    .pf-cards {
        margin-top: 52px;
        gap: 24px;
    }

    .pf-cards--three {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .pf-card {
        padding: 36px 32px 34px;
        border-radius: 14px;
    }

    .pf-card__figure {
        font-size: 46px;
        letter-spacing: -1px;
    }

    .pf-card__text {
        margin-block: 14px 0;
        font-size: 17px;
    }
}

/* --------------------------------------------------------------------------
   Section 4 — How it works
   -------------------------------------------------------------------------- */

.pf-how__heading {
    font-size: 34px;
    line-height: 1.1;
    letter-spacing: -0.9px;
}

.pf-how__columns {
    margin-block: 20px 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pf-journey {
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
}

.pf-journey__step {
    padding: 20px;
    border: 1px solid var(--pf-border);
    border-radius: 12px;
    background: var(--pf-panel);
}

/* The last step is the one that pays, so it carries the accent. */
.pf-journey__step--last {
    border-color: var(--pf-accent);
    background: #0D1B26;
}

.pf-journey__number {
    font-family: var(--pf-font-label);
    font-size: 12px;
    letter-spacing: 1.4px;
    color: var(--pf-accent);
}

.pf-journey__title {
    margin-block: 10px 0;
    font-family: var(--pf-font-heading);
    font-size: 18px;
    font-weight: 700;
    color: var(--pf-heading);
}

.pf-journey__text {
    margin-block: 10px 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--pf-body-soft);
}

.pf-how__note {
    margin-block: 24px 0;
    font-size: 15px;
    line-height: 1.7;
    color: var(--pf-muted);
}

@media (min-width: 1024px) {
    .pf-how__heading {
        font-size: 56px;
        line-height: 1.08;
        letter-spacing: -1.4px;
    }

    .pf-how__columns {
        margin-block: 38px 0;
        flex-direction: row;
        gap: 72px;
    }

    .pf-how__columns .pf-prose {
        flex: 1 1 0;
    }

    .pf-journey {
        margin-top: 64px;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 20px;
    }

    .pf-journey__step {
        padding: 30px 26px;
    }

    .pf-journey__number {
        font-size: 13px;
        letter-spacing: 1.5px;
    }

    .pf-journey__title {
        margin-block: 18px 0;
        font-size: 20px;
    }

    .pf-journey__text {
        margin-block: 12px 0;
    }

    .pf-how__note {
        margin-block: 34px 0;
        font-size: 17px;
        max-width: 900px;
    }
}

/* --------------------------------------------------------------------------
   Section 5 — Work out your saving
   -------------------------------------------------------------------------- */

.pf-quote__grid {
    margin-block: 26px 0;
    display: grid;
    gap: 12px;
}

/* 5a — the worked example */

.pf-example {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.pf-example__figures {
    margin: 22px 0 0;
}

.pf-example__row--ruled {
    margin-block: 20px 0;
    padding-block: 20px 0;
    border-top: 1px solid var(--pf-border);
}

.pf-example__label {
    font-size: 14px;
    line-height: 1.5;
    color: var(--pf-muted);
}

.pf-example__value {
    margin: 4px 0 0;
    font-family: var(--pf-font-heading);
    font-size: 28px;
    font-weight: 500;
    color: var(--pf-body);
}

.pf-example__value--hero {
    margin-top: 6px;
    font-size: 40px;
    font-weight: 700;
    letter-spacing: -1px;
    color: var(--pf-accent);
}

.pf-example__note {
    margin-block: 22px 0;
    font-size: 15px;
    line-height: 1.7;
    color: var(--pf-body-soft);
}

/* 5b — the gate */

.pf-gate__heading {
    font-size: 24px;
    letter-spacing: -0.6px;
}

.pf-gate__intro {
    margin-block: 12px 0;
    font-size: 16px;
    line-height: 1.65;
    color: var(--pf-body);
}

.pf-gate__fields {
    margin-block: 22px 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.pf-field-pair {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pf-field__label {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--pf-heading);
}

.pf-field__help {
    margin-block: 8px 0;
    font-size: 13px;
    color: var(--pf-muted);
}

/* 56px tall, comfortably over the 44px minimum. */
.pf-input {
    margin-block: 10px 0;
    width: 100%;
    height: 56px;
    padding-inline: 16px;
    background: var(--pf-ground);
    border: 1px solid var(--pf-border-strong);
    border-radius: 8px;
    color: var(--pf-heading);
    font-family: var(--pf-font-body);
    font-size: 17px;
}

.pf-input::placeholder {
    color: #5A6B85;
}

.pf-input:focus {
    border-color: var(--pf-accent);
    outline: none;
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.25);
}

.pf-input--code {
    font-family: var(--pf-font-label);
    font-size: 19px;
    letter-spacing: 3px;
}

.pf-input--pin {
    font-family: var(--pf-font-label);
    font-size: 18px;
    letter-spacing: 6px;
}

.pf-gate__why {
    margin-block: 18px 0;
    font-size: 13px;
    line-height: 1.65;
    color: var(--pf-muted);
}

.pf-gate__submit {
    margin-block: 22px 0;
}

.pf-gate__note {
    margin-block: 14px 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--pf-muted);
}

@media (min-width: 1024px) {
    .pf-quote__grid {
        margin-block: 44px 0;
        grid-template-columns: 560px minmax(0, 1fr);
        gap: 28px;
        align-items: stretch;
    }

    .pf-example__figures {
        margin-top: 30px;
    }

    .pf-example__row--ruled {
        margin-block: 26px 0;
        padding-block: 26px 0;
    }

    .pf-example__label {
        font-size: 15px;
    }

    .pf-example__value {
        margin-top: 6px;
        font-size: 36px;
    }

    .pf-example__value--hero {
        font-size: 52px;
        letter-spacing: -1.4px;
    }

    .pf-example__note {
        margin-block: 34px 0;
        font-size: 16px;
    }

    .pf-gate__heading {
        font-size: 32px;
        letter-spacing: -0.8px;
    }

    .pf-gate__intro {
        margin-block: 14px 0;
        font-size: 17px;
    }

    .pf-gate__fields {
        margin-block: 28px 0;
    }

    /* The code sits beside the channel it was sent to. */
    .pf-field-pair {
        flex-direction: row;
        gap: 16px;
    }

    .pf-field-pair .pf-field {
        flex: 1 1 auto;
    }

    .pf-field-pair .pf-field--pin {
        flex: 0 0 170px;
    }

    .pf-gate__why {
        margin-block: 20px 0;
        font-size: 14px;
    }

    .pf-gate__submit {
        margin-block: 26px 0;
        display: flex;
        width: 100%;
    }

    .pf-gate__note {
        margin-block: 16px 0;
        font-size: 14px;
    }
}

/* --------------------------------------------------------------------------
   Section 6 — What you need, and the principal
   -------------------------------------------------------------------------- */

.pf-need__grid {
    display: grid;
    gap: 30px;
}

.pf-need__heading {
    font-size: 30px;
}

.pf-requirements {
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.pf-requirements__item {
    padding-block: 20px 0;
    border-top: 1px solid var(--pf-border);
    font-size: 16px;
    line-height: 1.68;
    color: var(--pf-body);
}

.pf-requirements__lead {
    font-weight: 600;
    color: var(--pf-heading);
}

.pf-principal__heading {
    margin-block: 16px 0;
    font-size: 24px;
    line-height: 1.2;
}

.pf-principal__text {
    margin-block: 16px 0;
    font-size: 16px;
    line-height: 1.7;
    color: var(--pf-body);
}

.pf-principal__cta {
    margin-block: 20px 0;
    min-height: 52px;
    font-size: 16px;
}

@media (min-width: 1024px) {
    .pf-need__grid {
        grid-template-columns: 620px minmax(0, 1fr);
        gap: 96px;
        align-items: start;
    }

    .pf-need__heading {
        margin-block: 26px 0;
        font-size: 42px;
        line-height: 1.14;
        letter-spacing: -1px;
    }

    .pf-requirements {
        margin-top: 34px;
        gap: 26px;
    }

    .pf-requirements__item {
        padding-block: 24px 0;
        font-size: 17px;
    }

    .pf-principal {
        padding: 44px 40px;
    }

    .pf-principal__heading {
        margin-block: 24px 0;
        font-size: 30px;
    }

    .pf-principal__text {
        margin-block: 22px 0;
        font-size: 17px;
    }

    .pf-principal__cta {
        margin-block: 26px 0;
        display: inline-flex;
        width: auto;
        padding-inline: 26px;
    }
}

/* --------------------------------------------------------------------------
   Section 7 — Questions
   -------------------------------------------------------------------------- */

.pf-faq__list {
    margin-block: 26px 0;
}

.pf-faq__item {
    border-top: 1px solid var(--pf-border);
}

.pf-faq__item:last-child {
    border-bottom: 1px solid var(--pf-border);
}

.pf-faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    /* Well past the 44px minimum, since this is the main thing being tapped
       in this section. */
    min-height: 48px;
    padding-block: 22px;
    font-family: var(--pf-font-heading);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--pf-heading);
    cursor: pointer;
    list-style: none;
}

/* Hide the browser's own arrow; the +/- below replaces it. */
.pf-faq__question::-webkit-details-marker {
    display: none;
}

.pf-faq__question::after {
    content: "+";
    flex: none;
    color: var(--pf-accent);
    font-family: var(--pf-font-body);
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
}

.pf-faq__item[open] .pf-faq__question::after {
    content: "−";
}

.pf-faq__answer {
    margin-block: 0 22px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--pf-body-soft);
}

.pf-faq__answer + .pf-faq__answer {
    margin-top: 14px;
}

@media (min-width: 1024px) {
    .pf-faq__list {
        margin-block: 48px 0;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 56px;
        align-content: start;
    }

    .pf-faq__item:last-child {
        border-bottom: 0;
    }

    .pf-faq__question {
        padding-block: 28px;
        font-size: 22px;
    }

    .pf-faq__answer {
        margin-bottom: 28px;
        font-size: 16px;
    }
}

/* --------------------------------------------------------------------------
   Your numbers — the screen a verified agent sees after the gate

   A focused screen rather than a page of the site. The board is 900px wide;
   this keeps that as a maximum and stacks below it.
   -------------------------------------------------------------------------- */

.pf-numbers {
    width: 100%;
    max-width: 900px;
    margin-inline: auto;
    padding: 24px 20px 40px;
}

.pf-numbers__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

/* The verified badge. Not a claim about the agent's standing — it only says
   this browser has been through the gate. */
.pf-verified {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid var(--pf-accent);
    border-radius: 999px;
    font-family: var(--pf-font-label);
    font-size: 11px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--pf-accent);
}

.pf-verified__tick {
    flex: none;
    width: 14px;
    height: 14px;
}

.pf-numbers__heading {
    margin-block: 30px 0;
    font-size: 32px;
    line-height: 1.1;
    letter-spacing: -0.9px;
    text-wrap: balance;
}

.pf-numbers__intro {
    margin-block: 14px 0;
    max-width: 620px;
    font-size: 16px;
    line-height: 1.65;
    color: var(--pf-body);
}

.pf-numbers__grid {
    margin-block: 26px 0;
    display: grid;
    gap: 12px;
}

/* The agent's two inputs */

.pf-numbers__inputs {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.pf-input--figure {
    height: 54px;
    font-family: var(--pf-font-heading);
    font-size: 22px;
    font-weight: 500;
}

.pf-numbers__identity {
    padding-block: 18px 0;
    border-top: 1px solid var(--pf-border);
    font-size: 14px;
    line-height: 1.6;
    color: var(--pf-muted);
}

.pf-numbers__ppra {
    color: var(--pf-body);
}

/* The three figures */

.pf-numbers__result {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 26px;
}

.pf-numbers__hero {
    margin-block: 8px 0;
    font-family: var(--pf-font-heading);
    font-size: 44px;
    font-weight: 700;
    letter-spacing: -1.2px;
    color: var(--pf-accent);
}

.pf-numbers__pair {
    margin: 26px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 24px 48px;
}

.pf-numbers__figure {
    margin: 8px 0 0;
    font-family: var(--pf-font-heading);
    font-size: 28px;
    font-weight: 500;
    color: var(--pf-heading);
}

.pf-numbers__qualifier {
    font-size: 13px;
    line-height: 1.6;
    color: var(--pf-muted);
}

.pf-numbers__cta {
    margin-block: 14px 0;
}

/* The pale button the board uses for "Start the deal", so it reads as the
   next step rather than competing with the cyan figures above it. */
.pf-btn--plain {
    background: var(--pf-heading);
    color: var(--pf-accent-ink);
}

.pf-btn--plain:hover {
    background: #FFFFFF;
    color: var(--pf-accent-ink);
}

/* What happens after this screen */

.pf-next {
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 12px;
}

.pf-next__item {
    padding: 18px 20px;
    border: 1px solid var(--pf-border);
    border-radius: 12px;
    background: var(--pf-panel);
}

.pf-next__title {
    font-size: 15px;
    font-weight: 600;
    color: var(--pf-heading);
}

.pf-next__text {
    margin-block: 8px 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--pf-body-soft);
}

@media (min-width: 768px) {
    .pf-numbers {
        padding: 44px 48px;
    }

    .pf-numbers__heading {
        margin-block: 38px 0;
        font-size: 42px;
        letter-spacing: -1.1px;
    }

    .pf-numbers__intro {
        font-size: 17px;
    }

    .pf-numbers__grid {
        margin-block: 30px 0;
        grid-template-columns: 330px minmax(0, 1fr);
        gap: 22px;
        align-items: stretch;
    }

    .pf-numbers__inputs {
        padding: 28px 26px;
    }

    .pf-numbers__result {
        padding: 32px 30px;
    }

    .pf-numbers__hero {
        font-size: 60px;
        letter-spacing: -1.6px;
    }

    .pf-numbers__figure {
        font-size: 32px;
    }

    .pf-next {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
    }
}