/* Pay3 variant tokens. Layered after the brand stylesheet, so this file carries only what Pay3
   changes about a brand — not a copy of the brand. Anything brand-specific is read back out of the
   brand's own tokens rather than restated here, which is what the React app got wrong:
   pay3Truworths.module.css is truworths.module.css plus deltas, copied, and pay3Yde.module.css is
   a byte-identical copy of pay3Truworths.module.css.

   Values below are measured off the Pay3 artboards in
   4495_new_accounts_journey_redesign_for_occ, not inferred from the React stylesheets — the node
   each one came from is named beside it. */
:root {
    /* Pico scales the root font size with the viewport — 118.75% past 1280px and 125% past 1536px —
       so on a 1920 screen every rem in this kit came out 25% larger than the artboards, which are
       drawn on a 16px base. Everything here is measured against those artboards, so Pay3 pins the
       base and lets the layout be the thing that responds. */
    font-size: 100%;

    /* The button colour is the brand's, not the variant's: Truworths Pay3 is black, Identity Pay3
       is pink. Earlier this read the brand's logo accent (orange for Truworths), which is the hue
       in the PAY3 mark rather than the one its buttons use. The literal is reached only if a brand
       with no Pay3 deployment is somehow rendered as one. */
    --button-background: var(--brand-pay3-button, #000000);
    --button-text: #ffffff;

    /* Headings on the Pay3 artboards are pure black, not the brand's near-black
       (node 1441-1794: Poppins Bold 22/130%, #000000). */
    --heading-color: #000000;

    /* Both brands' Pay3 artboards are set in Poppins — measured node by node, not inferred.
       site.css self-hosts it at 300/400/700, the three weights the screens actually use. */
    --font-family-base: var(--brand-pay3-font, "Poppins", Arial, Helvetica, sans-serif);

    /* Pay3 buttons are pills: both brands draw the radius larger than half the button's height
       (64px and 34px against 53.33px), which is a pill drawn two ways, so it is expressed as one
       here rather than carried as two brand values. */
    --radius-button: 999px;

    /* Fields stay softened rather than pilled — the artboards round the inputs slightly and the
       buttons fully, which is why these are two tokens. */
    --radius-control: 4px;

    /* ── Type scale ──────────────────────────────────────────────────────────
       Measured off the artboards rather than inherited: for each string the artboard's ink width
       was divided by the same string's advance width in this build, which gives the drawn size
       exactly because both sides set Arial. Step 1 comes out 34 / 18 / 16 / 14 / 13, against the
       12-to-16 the accounts scale was rendering — which is why every text block sat short of its
       drawn box. The steps are the kit's own tokens retuned for Pay3, not new names. */
    --font-size-xs: 0.8125rem;
    --font-size-sm: 0.875rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.125rem;

    /* 34px, read off the type panel of the artboard this build draws: the step-1 heading "Sign up"
       is Poppins Bold 34/130%. The file is not quite consistent here — "AGREEMENT" and the older
       "TRUWORTHS pay3 application" board both read 33.33 — but 34 is the screen we render, and the
       two are a third of a pixel apart. */
    --font-size-display: 2.125rem;
    --font-size-heading: 2.125rem;

    /* The button label, off the white-on-black ink inside the pill. */
    --font-size-action: 0.9375rem;

    /* Two line heights carry the whole journey: the artboards set 130% on headings, field
       labels and list copy, and 150% on running paragraphs. The kit's four steps collapse
       onto those two here rather than approximating them. */
    --line-height-tight: 1.3;
    --line-height-snug: 1.3;
    --line-height-body: 1.5;
    --line-height-relaxed: 1.5;

    /* Panel fills, sampled off both brands' step-1 artboards. Pay3 does NOT tint these with the
       brand's hero colour the way the accounts funnel does — the ID note, the agreement's details
       panel and the confirmation's lower section are a neutral #f5f5f7 on Truworths and Identity
       alike. Using --hero-background here is what made them read beige and lilac. */
    --pay3-panel: #f5f5f7;

    /* The wider tinted bands — the benefits block, the decline benefits and the confirmation
       greeting. Identity draws these as this flat grey; Truworths draws them as painted artwork
       ("benefits background image to be supplied separately" in the brief), which drops in over
       this fill as a background-image once it lands. */
    --pay3-band: #f5f5f5;

    /* Layered over --pay3-band. The brand supplies it, because only Truworths has artwork here. */
    --pay3-band-image: var(--brand-pay3-band-image, none);

    /* Hairlines and the stepper's unreached rules (the reached one is --button-background). */
    --pay3-rule: #eaeaea;

    /* Both brands' artboards close every screen on the same tinted band. Truworths leaves this
       unset on the accounts funnel, where the footer sits on the page ground. */
    --footer-background: #f5f5f7;
}

/* The mobile artboards drop the headings to 24: the band heading sets two lines of 45px ink on a
   368 frame, and SIGN UP measures 17px of cap where the desktop one measures 24. */
@media (max-width: 899px) {
    :root {
        --font-size-display: 1.5rem;
        --font-size-heading: 1.5rem;
    }
}

/* ── Footer chrome ──────────────────────────────────────────────────────────

   Pay3 draws the footer differently from the accounts funnel, and this file is only loaded on a
   Pay3 host, so the rules can sit here unqualified. Measured off every desktop artboard (both
   brands, all five screens): the band is 182px tall, its content spans x 43-1876 — full width with
   a small inset rather than centred on the page measure — the contact line sits 47px below the top
   of the band, a hairline crosses at 85px, and the legal line and the terms link share the row at
   107px, left and right. */

/* Pico sets its own font-family on h1-h6, which outranks the family inherited from body. Every
   heading on these pages was therefore drawn in the browser's system stack while the labels and
   buttons under it were in the brand's face — measured on both brands, the h1 computed to
   system-ui, "Segoe UI", Roboto, … rather than Poppins. The artboards draw all headings at 700. */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-base);
    font-weight: 700;
    line-height: var(--line-height-tight);
}

/* The artboards leave a deep run of page ground under the last block before the band starts. */
.app-main {
    padding-bottom: 5.5rem;
}

.app-footer {
    margin-top: 0;
    border-top: none;
    padding: 2.7rem 2.7rem 3.3rem;
}

.brand-footer-pay3 {
    width: 100%;
    max-width: none;
    margin: 0;
    font-size: var(--font-size-md);
}

/* Two classes deep because site.css sets the margin through `.brand-footer-content p`, which
   outranks a single class however late this file loads. */
.brand-footer-pay3 .brand-footer-contact {
    margin: 0 0 1.2rem;
    font-size: var(--font-size-lg);
    line-height: var(--line-height-snug);
    color: var(--heading-color);
}

/* The number and the address are printed, not picked out as links — the artboards give them the
   same weight as the text around them, so only the affordance survives. */
.brand-footer-contact a {
    color: inherit;
    text-decoration: none;
}

.brand-footer-sep {
    /* The artboard sets the pipe off from both sides rather than running the two labels together. */
    padding-inline: 0.55rem;
}

.brand-footer-legal {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-lg);
    padding-top: 1.35rem;
    /* Sampled off the artboard. The near-white hairline this had before was invisible against the
       band, which is why the rule read as missing. */
    border-top: 1px solid #636264;
}

.brand-footer-legal .brand-terms,
.brand-footer-legal a {
    margin: 0;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-body);
    color: #8b8b8b;
}

/* The mobile artboards break the contact line in two and drop the terms link below the legal
   sentence, in a band half again as deep. They also run the benefits band straight into the footer
   with no page ground between, and close the gap under the logo. */
@media (max-width: 899px) {
    /* The mobile artboards give the lockup 20px above and 19px below, both brands; the accounts
       header's 30/16 left it sitting high and squashed against the hero. */
    .app-header {
        margin: 1.25rem 0 1.1875rem;
    }

    .app-main {
        padding-bottom: 0;
    }

    .app-footer {
        padding: 2.25rem 1.75rem 3.5rem;
    }

    .brand-footer-contact {
        font-size: var(--font-size-md);
    }

    .brand-footer-sep {
        display: none;
    }

    .brand-footer-email {
        display: block;
    }

    .brand-footer-legal {
        flex-direction: column;
        gap: var(--space-lg);
    }
}