/* Pay3 journey layout and controls. Every rule is scoped to a Pay3 host.

   The sheet is served on every page and the journey shares class names with the accounts funnel:
   .field-block, .required-note, .agreement-section and .account-details all appear on id-check,
   affordability and the credit pre-agreement. Unscoped, retuning Pay3's controls moved those pages
   too — affordability lost 24px and the credit pre-agreement gained 106, on all three brands.
   MainLayout stamps data-variant on the shell, so that attribute is the gate. */
/* Geometry is measured off the artboards, not guessed. On every desktop frame (1920 wide, both
   brands, all five screens) the content spans x 246-1674 and the footer's own content spans
   43-1876; on every mobile frame (368) the hero and the benefits band run edge to edge and only
   the form is inset. The numbers below are those, expressed as ratios so a 1920 render reproduces
   the artboard exactly and anything narrower keeps its proportions. */
:root {
    /* 1429 of 1920 = 74.4%, capped at the artboard's own measure so it stops growing on ultrawides. */
    --pay3-measure: min(1436px, 74.4%);

    /* 58 of 1429. Between the hero and the form; the columns either side are 2fr and 1fr, which is
       the 913:458 the artboard draws. */
    --pay3-gutter: 4.06%;

    /* The side inset on a phone, where the page has no outer margin of its own: the mobile
       artboards start the bars, the heading and the fields at x 14 on a 368 frame. */
    --pay3-inset: 0.875rem;
}

/* One column on a phone, in the order the mobile artboards draw it: the image runs edge to edge
   first, then the progress bars, then the form, and the benefits band closes the page above the
   footer. Above 900px the same four blocks become the artboard's two columns, with the bars
   spanning both. */
[data-variant="pay3"] .pay3-columns {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
        "hero"
        "steps"
        "form"
        "benefits";
    row-gap: 0;
    align-items: start;
    width: 100%;
    margin: 0 auto;
}

/* The wrapper dissolves on a phone so its two halves become rows of this grid in their own right;
   above 900px it becomes the left column again and they stack inside it, flush, as drawn. */
[data-variant="pay3"] .pay3-hero {
    display: contents;
}

[data-variant="pay3"] .pay3-columns .pay3-hero-image {
    grid-area: hero;
}

[data-variant="pay3"] .pay3-columns .pay3-stepper {
    grid-area: steps;
    padding-inline: var(--pay3-inset);
}

[data-variant="pay3"] .pay3-columns .pay3-form-panel {
    grid-area: form;
    padding-inline: var(--pay3-inset);
    /* A grid item's automatic minimum is its content, which lets a wide field push the column past
       the viewport on a phone. */
    min-width: 0;
}

[data-variant="pay3"] .pay3-columns .pay3-benefits {
    grid-area: benefits;
    /* 23px between the ID note and the band on the mobile artboards. */
    margin-top: var(--space-lg);
}

@media (min-width: 900px) {
    [data-variant="pay3"] .pay3-columns {
        grid-template-columns: 2fr 1fr;
        grid-template-areas:
            "steps steps"
            "hero  form";
        column-gap: var(--pay3-gutter);
        width: var(--pay3-measure);
    }

    [data-variant="pay3"] .pay3-hero {
        display: block;
        grid-area: hero;
    }

    [data-variant="pay3"] .pay3-columns .pay3-stepper,
[data-variant="pay3"] .pay3-columns .pay3-form-panel {
        padding-inline: 0;
    }

    /* The band is the image's own footing on the artboard, flush against it. */
    [data-variant="pay3"] .pay3-columns .pay3-benefits {
        margin-top: 0;
    }
}

/* The progress bars: 1429 wide split into three 450px segments with 40px between them, sitting
   72px below the logo and 56px above the content. Padding rather than margin so the gap under the
   header cannot collapse into it. */
[data-variant="pay3"] .pay3-stepper {
    padding-block: 3.5rem;
    margin: 0;
}

/* On a phone the bars sit under the hero rather than under the logo, and the artboards give them
   41px above and 47px below. */
@media (max-width: 899px) {
    [data-variant="pay3"] .pay3-stepper {
        padding-block: 2.55rem 2.95rem;
    }
}

/* The artboards draw this image at a fixed 913x682 in a 913 column, with the band's 332 under it,
   which is what carries the left column down to the foot of the form beside it. Held as a ratio so
   whatever the CDN serves is cropped into the artboard's box rather than setting its own height. */
/* <picture> is inline, so it leaves a descender's worth of line box under the image and pushes the
   band off the foot of it. */
[data-variant="pay3"] .pay3-hero-image picture {
    display: block;
}

[data-variant="pay3"] .pay3-hero-image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 913 / 682;
    object-fit: cover;
}

@media (max-width: 899px) {
    [data-variant="pay3"] .pay3-hero-image img {
        /* 360x269 on the mobile frames (tru_ecom_pay3_new_accounts_mobile, node 1901-334), which is
           the phone art's own 1080x807 at 3x — so it fills the box without a crop. */
        aspect-ratio: 360 / 269;
    }
}

/* Band metrics off the step-1 artboards: the band is 332 deep under a 682 image, its content inset
   48 from the left, the heading 52 below the top, the first row 59 under the heading, and 38
   between the two rows. */
[data-variant="pay3"] .pay3-benefits {
    /* Pico gives a section a bottom margin, which left a gap between the band and the foot of the
       hero column; the grid's own rows do the spacing here. */
    margin: 0;
    padding: 3rem 3rem 4.9rem;
    background-color: var(--pay3-band, var(--hero-background));
    background-image: var(--pay3-band-image, none);
    background-size: cover;
    background-position: center;
}

[data-variant="pay3"] .pay3-benefits h2 {
    margin: 0 0 2rem;
    /* 32px, a step under the page heading's 33.33 — the artboards draw the two at different
       sizes, so this does not share --font-size-heading. */
    font-size: 2rem;
    line-height: var(--line-height-snug);
    /* The one string in the journey the artboards track out, on both brands. */
    letter-spacing: 0.05em;
    color: var(--heading-color);
    /* Centred over the two-column list on a desktop frame; on a phone the artboards left-align it
       and rule it off from the list below. */
    text-align: center;
}

@media (max-width: 899px) {
    [data-variant="pay3"] .pay3-benefits {
        padding: var(--space-xl);
    }

    [data-variant="pay3"] .pay3-benefits h2 {
        margin-bottom: var(--space-md);
        text-align: left;
        padding-bottom: var(--space-md);
        /* A hairline drawn over artwork, so it is an alpha rather than --pay3-rule: the band is
           blue on Truworths and grey on Identity and one flat colour cannot sit on both. */
        border-bottom: 1px solid rgb(0 0 0 / 0.18);
    }
}

[data-variant="pay3"] .pay3-benefits ul {
    display: grid;
    /* Two by two, as drawn — not auto-fit, which lands on four across at the hero column's width. */
    grid-template-columns: 1fr;
    gap: 2rem var(--space-lg);
    margin: 0;
    padding: 0;
    list-style: none;
}

[data-variant="pay3"] .pay3-benefits li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    /* Pico restates the marker on the item, so clearing it on the list alone leaves a square
       sitting beside the badge — and gives it a bottom margin the grid's row gap already covers. */
    list-style: none;
    margin: 0;
    padding: 0;
    /* 16px on the artboards, not 18 — the same step as the field labels, set apart by weight
       rather than size. */
    font-size: var(--font-size-md);
    line-height: var(--line-height-snug);
    /* The badge's size on this frame, which the brand sets (--brand-pay3-badge); the copy beside it
       reads it too. */
    --benefit-badge: var(--brand-pay3-badge, 1.875rem);
}

@media (min-width: 900px) {
    [data-variant="pay3"] .pay3-benefits li {
        --benefit-badge: var(--brand-pay3-badge-wide, var(--brand-pay3-badge, 1.875rem));
    }
}

/* The badge the artboards put beside each benefit, disc and glyph in one image: blue on black for
   Truworths, white on pink for Identity. */
[data-variant="pay3"] .benefit-icon {
    display: block;
    flex: 0 0 auto;
    width: var(--benefit-badge);
    height: var(--benefit-badge);
}

/* Every frame centres the copy's first line on the badge, rather than hanging it from the badge's
   top edge. Nudged rather than padded, so a row keeps its height and the list its pitch: the
   mobile frames set the discs 68px apart (y1523, 1591, ... 1727) whether the copy beside them
   runs to one line or two. */
[data-variant="pay3"] .benefit-copy {
    position: relative;
    top: max(0px, (var(--benefit-badge) - 1lh) / 2);
}

/* The mobile artboards set the benefit copy two steps down from the desktop frame's 18 — each item
   runs to two lines in a 340px column either way, and at 18 the band ran 100px deep. After the
   base rule above, so it wins on order. */
@media (max-width: 899px) {
    [data-variant="pay3"] .pay3-benefits li {
        font-size: var(--font-size-sm);
    }
}

@media (min-width: 640px) {
    [data-variant="pay3"] .pay3-benefits ul {
        grid-template-columns: repeat(2, 1fr);
        column-gap: var(--space-2xl);
    }

    /* Both brands rule the two columns apart. An alpha rather than --pay3-rule, because the band
       is artwork on Truworths and a flat grey on Identity. */
    [data-variant="pay3"] .pay3-benefits li:nth-child(even) {
        padding-left: var(--space-2xl);
        border-left: 1px solid rgb(0 0 0 / 0.12);
    }
}

[data-variant="pay3"] .pay3-form-panel {
    width: 100%;
}

[data-variant="pay3"] .pay3-form-panel h1 {
    margin: 0;
    font-size: var(--font-size-display);
    line-height: var(--line-height-tight);
    color: var(--heading-color);
}

[data-variant="pay3"] .required-note {
    margin: 0 0 var(--space-md);
    /* Poppins 300 13px #706F6E on the artboard — a lighter grey than the kit's muted text. */
    font-size: var(--font-size-xs);
    font-weight: 300;
    color: #706f6e;
}

/* Label, control and the space under it come to the artboard's 83px pitch: a 43px control with 4
   above it and 16 below. Pico's own control is 50 tall, which walked the whole column down. */
[data-variant="pay3"] .field-block {
    margin-bottom: var(--space-md);
}

[data-variant="pay3"] .pay3-form-panel .textfield,
[data-variant="pay3"] .pay3-form-panel .custom-select-trigger,
[data-variant="pay3"] .agreement-otp .textfield {
    height: 2.6875rem;
    padding-block: 0;
}

[data-variant="pay3"] .field-block label {
    display: block;
    margin-bottom: 0.25rem;
    font-size: var(--font-size-md);
    /* Light, not regular: every field label on the step-1 artboard is Poppins 300. The weight is
       what separates a label from the body around it here — both are 16px. */
    font-weight: 300;
    /* A tight line keeps the label, its control and the space under it on the artboard's 83px
       pitch; on the body line-height the seven fields walked the column 24px down. */
    line-height: var(--line-height-tight);
    color: var(--heading-color);
}

[data-variant="pay3"] .pay3-submit {
    width: 100%;
    /* 53.33 on both brands' artboards. */
    min-height: 3.3125rem;
    margin-top: var(--space-md);
    padding: var(--space-sm) var(--space-2xl);
    border: none;
    background: var(--button-background);
    color: var(--button-text);
    border-radius: var(--radius-button);
    font-family: inherit;
    font-size: var(--font-size-action);
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
}

[data-variant="pay3"] .pay3-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* A button whose request is in flight. Its form disables it until the answer arrives
   (hx-disabled-elt), and htmx marks what it disabled with data-disabled-by-htmx, which is what tells
   this apart from a button disabled for any other reason. It keeps its label and turns a ring beside
   it, so a second press reads as already taken rather than refused. REQUEST NEW OTP raises no
   overlay, so this is the only sign it was pressed. */
[data-variant="pay3"] .pay3-submit[data-disabled-by-htmx],
[data-variant="pay3"] .otp-resend[data-disabled-by-htmx] {
    opacity: 0.6;
    cursor: progress;
}

[data-variant="pay3"] .pay3-submit[data-disabled-by-htmx]::after,
[data-variant="pay3"] .otp-resend[data-disabled-by-htmx]::after {
    content: "";
    display: inline-block;
    box-sizing: border-box;
    width: 1em;
    height: 1em;
    margin-left: 0.625em;
    vertical-align: -0.125em;
    border: 0.125em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: pay3-processing-spin 0.75s linear infinite;
}

/* The artboards set both of these a step up from the label size, on a 21px line — at the 12px this
   used they ran two lines short of the drawn block and pulled the whole column up. */
[data-variant="pay3"] .consent-copy,
[data-variant="pay3"] .id-note {
    margin-top: var(--space-md);
    font-size: var(--font-size-md);
    line-height: var(--line-height-snug);
    color: var(--muted-text);
}

[data-variant="pay3"] .consent-copy {
    font-size: var(--font-size-sm);
}

[data-variant="pay3"] .id-note {
    margin-top: 2.75rem;
    padding: var(--space-md);
    background: var(--pay3-panel, var(--hero-background));
}

[data-variant="pay3"] .id-note p {
    margin: 0 0 var(--space-xs);
}

[data-variant="pay3"] .pay3-result {
    margin-top: var(--space-md);
}

/* A field's message sits under it, set as the credit application sets it (TextInput.module.css):
   #E31D37, 10px below the field, on an 18px line. The slot is empty until a check fills it, so it
   takes no room and the column keeps its pitch. */
[data-variant="pay3"] .field-error-slot .field-error {
    display: block;
    margin: 0;
    padding-top: 0.625rem;
    font-size: var(--font-size-sm);
    line-height: 1.125rem;
    color: #e31d37;
}

/* ── Processing overlay ─────────────────────────────────────────────────── */

/* The credit application's own (BaseStyle.module.css .modalContainer and .modalCard): the page
   dimmed under half-black, a white card 40% wide and 30% tall with a 200px floor, the 100px rolling
   spinner and two lines of 600. Held back until htmx marks it as the request's indicator.

   One departure: React fixes the card's height, and on a phone the two lines wrap to five and the
   column outgrows it. Here 30% is a floor instead, so the card grows to hold them. */
[data-variant="pay3"] .processing-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    align-items: center;
    justify-content: center;
    background-color: rgb(0 0 0 / 50%);
}

/* htmx's own indicator rule fades the element in by opacity; the overlay is shown by display
   instead, so that while it is hidden it cannot catch a click. */
[data-variant="pay3"] .processing-modal.htmx-request {
    display: flex;
    opacity: 1;
}

[data-variant="pay3"] .processing-modal-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 40%;
    min-width: 200px;
    min-height: max(200px, 30%);
    margin: 10px;
    padding: 20px;
    border-radius: 5px;
    background-color: #ffffff;
    text-align: center;
}

/* flex: none, or a card short of room squeezes the spinner rather than its own height growing. */
[data-variant="pay3"] .processing-spinner {
    display: block;
    flex: none;
    width: 100px;
    height: 100px;
    margin-bottom: 20px;
    color: #28292f;
    animation: pay3-processing-spin 1s linear infinite;
}

[data-variant="pay3"] .processing-modal-content p {
    margin: 8px;
    font-size: var(--font-size-md);
    font-weight: 600;
    line-height: var(--line-height-body);
    color: #000000;
}

@keyframes pay3-processing-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* ── Additional information ─────────────────────────────────────────────── */

[data-variant="pay3"] .alternate-number,
[data-variant="pay3"] .consent-block {
    margin: 0 0 var(--space-lg);
    padding: 0;
    border: none;
}

[data-variant="pay3"] .alternate-number legend {
    padding: 0;
    margin-bottom: var(--space-xs);
    font-size: var(--font-size-md);
    color: var(--heading-color);
}

[data-variant="pay3"] .consent-block legend {
    padding: 0;
    margin-bottom: var(--space-xs);
    font-size: var(--font-size-md);
    color: var(--button-background);
}

[data-variant="pay3"] .phone-pair {
    display: grid;
    grid-template-columns: minmax(5rem, 1fr) 2fr;
    gap: var(--space-sm);
}

/* Each half is a column of its field and its message. A grid item's automatic minimum is its
   content, so without this a field could push the pair past a phone's width. */
[data-variant="pay3"] .phone-pair > div {
    min-width: 0;
}

/* Over the email field step 2 shows only to an application picked back up without one. No
   artboard draws it; set as the copy beside the forms is, so it reads as an instruction rather
   than a heading. */
[data-variant="pay3"] .email-prompt {
    margin: 0 0 var(--space-sm);
    font-size: var(--font-size-md);
    line-height: var(--line-height-snug);
    color: var(--muted-text);
}

/* Step 2's two section headings and its tick marks are drawn in the brand's own colour, not the
   heading black: pink on Identity, black on Truworths — which is why scanning the Truworths
   artboards for accent-coloured text finds none. */
/* A section label, not a page heading: the artboards set it at the same size as "You may
   communicate with me via" below it, in the brand's colour. It was rendering at the 34px display
   size, which made it read as a second page title. */
[data-variant="pay3"] .address-heading {
    margin: var(--space-xl) 0 var(--space-md);
    font-size: var(--font-size-md);
    color: var(--button-background);
}

/* The circled-i beside a label. Sized to the label's own line so it rides with the text. */
[data-variant="pay3"] .field-info {
    display: inline-flex;
    align-items: center;
    margin-left: 0.3rem;
    color: var(--muted-text);
    vertical-align: middle;
}

[data-variant="pay3"] .field-info svg {
    width: 0.95em;
    height: 0.95em;
}

[data-variant="pay3"] .consent-block label {
    display: block;
    margin-bottom: var(--space-xs);
    font-size: var(--font-size-md);
}

/* The rule sits 20px under the last box, which the row's own margin already gives, and 21px over the
   next one: both brands' step-2 frames, measured box edge to rule. */
[data-variant="pay3"] .consent-block .other-offers {
    margin-top: var(--space-md);
    padding-top: 1.3125rem;
    border-top: 1px solid var(--pay3-rule, var(--hero-background));
}

/* ── Pre-agreement ──────────────────────────────────────────────────────── */

/* The artboard puts the agreement itself on the tinted panel in the wide column and leaves the
   applicant's details on the page ground beside it — the opposite way round from the accounts
   funnel, where the side panel is the tinted one. */
[data-variant="pay3"] .agreement-layout {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
        "steps"
        "main"
        "side";
    row-gap: var(--space-2xl);
    width: 100%;
    margin: 0 auto;
    align-items: start;
}

[data-variant="pay3"] .agreement-layout > .pay3-stepper {
    grid-area: steps;
    padding-inline: var(--pay3-inset);
}

[data-variant="pay3"] .agreement-main {
    grid-area: main;
    min-width: 0;
    padding: var(--space-2xl) var(--pay3-inset);
    background: var(--pay3-panel, var(--hero-background));
}

[data-variant="pay3"] .agreement-side {
    grid-area: side;
    min-width: 0;
    padding: 0 var(--pay3-inset);
    background: none;
}

@media (min-width: 900px) {
    [data-variant="pay3"] .agreement-layout {
        grid-template-columns: 2fr 1fr;
        grid-template-areas:
            "steps steps"
            "main  side";
        column-gap: var(--pay3-gutter);
        row-gap: 0;
        width: var(--pay3-measure);
    }

    [data-variant="pay3"] .agreement-layout > .pay3-stepper {
        padding-inline: 0;
    }

    [data-variant="pay3"] .agreement-main {
        padding: var(--space-2xl);
    }

    [data-variant="pay3"] .agreement-side {
        padding: 0;
    }
}

[data-variant="pay3"] .agreement-main h1 {
    margin: 0 0 var(--space-2xs);
    font-size: var(--font-size-display);
    color: var(--heading-color);
}

[data-variant="pay3"] .agreement-subtitle {
    margin: 0;
    font-size: var(--font-size-2xl);
    color: var(--heading-color);
}

[data-variant="pay3"] .agreement-act {
    margin: 0 0 var(--space-lg);
    font-size: var(--font-size-xs);
    color: var(--muted-text);
}

/* The clauses read as the React funnel lays them out (PreAgreementInfoPay3): every paragraph in
   full, under the artboard's bold headings. The copy is the artboards' solid black 16/24, ragged
   right — the React cross-sell measured the same agreement card at that (f7, g6), where this page
   had been setting it in the brand's grey. */
[data-variant="pay3"] .agreement-section {
    padding: var(--space-md) 0 0;
}

[data-variant="pay3"] .agreement-section h2 {
    margin: 0 0 var(--space-2xs);
    font-size: var(--font-size-lg);
    color: var(--heading-color);
}

[data-variant="pay3"] .agreement-section p,
[data-variant="pay3"] .marketing-options,
[data-variant="pay3"] .agreement-signature p {
    margin: 0 0 var(--space-xs);
    font-size: var(--font-size-md);
    font-weight: 400;
    line-height: var(--line-height-relaxed);
    color: var(--heading-color);
}

/* 14/21 on both phone frames (f6, g4). */
@media (max-width: 899px) {
    [data-variant="pay3"] .agreement-section p,
    [data-variant="pay3"] .marketing-options,
    [data-variant="pay3"] .agreement-signature p {
        font-size: var(--font-size-sm);
    }
}

/* React rules the marketing choices off from the clause above them. */
[data-variant="pay3"] .agreement-marketing {
    margin-top: var(--space-md);
    border-top: 1px solid var(--pay3-rule);
}

/* Each choice and its Yes or No on one row, the answer at the end as React's table sets it. */
[data-variant="pay3"] .marketing-options > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-md);
    max-width: 24rem;
}

[data-variant="pay3"] .marketing-options dt,
[data-variant="pay3"] .marketing-options dd {
    margin: 0;
    font-weight: 400;
}

/* The signature hangs off its label, as on the signed document. */
[data-variant="pay3"] .agreement-signature {
    margin-top: var(--space-lg);
}

[data-variant="pay3"] .agreement-signature .agreement-signature-line {
    display: flex;
    align-items: flex-end;
    gap: var(--space-xs);
    margin-bottom: 0;
}

[data-variant="pay3"] .agreement-signature img {
    width: 7.8125rem;
    height: auto;
    margin-bottom: -1.25rem;
}

[data-variant="pay3"] .agreement-download {
    margin-top: var(--space-lg);
}

/* The arrow and the uppercase label the React funnel's pay3 deployment draws, in the brand's own
   colour: black on Truworths, the pink every action link wears on Identity. */
[data-variant="pay3"] .agreement-download a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--button-background);
    text-decoration: none;
}

[data-variant="pay3"] .agreement-side h2 {
    margin: 0 0 var(--space-md);
    font-size: var(--font-size-heading);
    color: var(--heading-color);
}

[data-variant="pay3"] .account-details {
    margin: 0 0 var(--space-lg);
    font-size: var(--font-size-md);
}

[data-variant="pay3"] .account-details > div {
    display: grid;
    grid-template-columns: 8rem 1fr;
    gap: var(--space-sm);
    padding: 0;
}

[data-variant="pay3"] .account-details dt,
[data-variant="pay3"] .account-details dd {
    padding-block: var(--space-2xs);
}

[data-variant="pay3"] .account-details dt {
    color: var(--heading-color);
    font-weight: 700;
}

[data-variant="pay3"] .account-details dd {
    margin: 0;
    color: var(--heading-color);
}

/* The mobile artboard rules the two columns apart down the whole list; the desktop one does not. */
@media (max-width: 899px) {
    [data-variant="pay3"] .account-details dd {
        padding-left: var(--space-md);
        border-left: 1px solid var(--pay3-rule, var(--hero-background));
    }
}

[data-variant="pay3"] .account-limits {
    margin: 0 0 var(--space-xl);
    padding: var(--space-lg) 0 0;
    border-top: 1px solid var(--pay3-rule, var(--hero-background));
    font-size: var(--font-size-md);
}

[data-variant="pay3"] .account-limits > div {
    display: grid;
    grid-template-columns: 8rem 1fr;
    gap: var(--space-sm);
    padding-block: var(--space-xs);
}

[data-variant="pay3"] .account-limits dt {
    color: var(--heading-color);
    font-weight: 700;
}

[data-variant="pay3"] .account-limits dt span {
    display: block;
    font-weight: 400;
    font-style: italic;
    font-size: var(--font-size-xs);
    color: var(--muted-text);
}

[data-variant="pay3"] .account-limits dd {
    margin: 0;
    color: var(--heading-color);
}

/* The OTP call to action is the one square control in the journey: a bordered box carrying the
   prompt with a solid bar under it, both hard-cornered where every other button is a pill. */
/* The prompt box is outlined in the brand's own colour — near-black on Truworths, pink on Identity
   (#ff60aa at the artboard's antialiased edge) — not the heading black, and its prompt is centred
   over the field the way the artboard centres "Request an OTP to accept agreement". */
[data-variant="pay3"] .agreement-otp {
    border: 1px solid var(--button-background);
    padding: var(--space-md);
}

[data-variant="pay3"] .agreement-otp .field-block label {
    text-align: center;
}

[data-variant="pay3"] .agreement-otp .field-block {
    margin-bottom: var(--space-sm);
}

/* The artboard hangs the accept bar under the prompt box rather than inside it, so it spans the
   whole column; inside the box it was inset twice and read as a small button on a phone. Both are
   square, the one place in the journey that is not a pill. */
[data-variant="pay3"] .otp-accept,
[data-variant="pay3"] .otp-resend {
    border-radius: 0;
}

[data-variant="pay3"] .otp-accept {
    margin-top: 0;
}

[data-variant="pay3"] .otp-resend {
    width: 100%;
    margin-top: var(--space-sm);
    padding: var(--space-xs);
    border: 1px solid var(--button-background);
    background: transparent;
    color: var(--heading-color);
    font-family: inherit;
    font-size: var(--font-size-xs);
    cursor: pointer;
}

/* ── Confirmation ───────────────────────────────────────────────────────── */

/* The artboards open this screen on a tinted band carrying the greeting and the download, then
   return to the page ground for the rest. The tint is the brand's, so it changes with the theme. */
[data-variant="pay3"] .confirmation-band {
    width: var(--pay3-measure);
    margin: 0 auto;
    background-color: var(--pay3-band, var(--hero-background));
    background-image: var(--pay3-band-image, none);
    background-size: cover;
    background-position: center;
    padding-block: var(--space-3xl);
}

/* Edge to edge on a phone, where the artboards give the band no margin of its own. */
@media (max-width: 899px) {
    [data-variant="pay3"] .confirmation-band {
        width: 100%;
    }
}

[data-variant="pay3"] .confirmation-band .terminal-page {
    padding-top: 0;
}

/* Black, not grey: the React cross-sell measured the same line black on f5 and g7. */
[data-variant="pay3"] .confirmation-band .terminal-lead {
    color: var(--heading-color);
}

/* The same 51px tick the retained benefits wear (Group 17552), disc included. */
[data-variant="pay3"] .confirmation-tick {
    display: block;
    width: 3.1875rem;
    height: 3.1875rem;
    margin: 0 auto var(--space-lg);
}

/* The panel the Secure Citizen block sits in. The fraud check (/fr-check) draws the same panel, so
   each rule for the panel names both; :is() keeps every selector's specificity as it was when it
   named the confirmation's alone. Where the fraud check's own frames measure differently, its
   section below says so. */
[data-variant="pay3"] :is(.start-shopping, .fraud-check) {
    width: var(--pay3-measure);
    margin: 0 auto var(--space-3xl);
    padding: var(--space-3xl) var(--pay3-inset);
    background: var(--pay3-panel, transparent);
    text-align: center;
}

@media (max-width: 899px) {
    [data-variant="pay3"] :is(.start-shopping, .fraud-check) {
        width: 100%;
    }
}

[data-variant="pay3"] :is(.start-shopping, .fraud-check) > * {
    max-width: 44rem;
    margin-inline: auto;
}

[data-variant="pay3"] :is(.start-shopping, .fraud-check) h2 {
    /* margin-block, not the margin shorthand: this selector outranks the `.start-shopping > *`
       rule above, and the shorthand would reset that rule's `margin-inline: auto` to 0 — which
       left the heading flush against the left of its 44rem box while its text stayed centred
       inside it, so it sat a third of the page left of everything under it. */
    margin-block: 0 var(--space-md);
    font-size: var(--font-size-heading);
    color: var(--heading-color);
}

/* Black on the artboard, as every line in this panel is. */
[data-variant="pay3"] :is(.start-shopping, .fraud-check) p {
    font-size: var(--font-size-md);
    line-height: var(--line-height-relaxed);
    color: var(--heading-color);
}

/* Both pills are 312x51 on the artboard, as the React cross-sell measured them (f5, g7). */
[data-variant="pay3"] .agreement-download-button,
[data-variant="pay3"] .find-store-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: min(19.5rem, 100%);
    min-height: 3.1875rem;
    padding: var(--space-sm) var(--space-2xl);
    border-radius: var(--radius-button);
    font-size: var(--font-size-action);
    text-decoration: none;
}

[data-variant="pay3"] .agreement-download-button {
    background: var(--app-background);
    color: var(--heading-color);
}

[data-variant="pay3"] .find-store-button {
    border: 1px solid var(--button-background);
    color: var(--heading-color);
}

/* ── Secure Citizen ─────────────────────────────────────────────────────── */

/* The artboard's activation block, between the heading and FIND A STORE. Its proportions are read
   off the client's capture of the desktop frame, which runs at half the 1429 measure. */
[data-variant="pay3"] .read-consent {
    width: auto;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    color: var(--heading-color);
    font-family: inherit;
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 0.2em;
    cursor: pointer;
}

[data-variant="pay3"] .authenticate-form {
    max-width: 19.5rem;
    margin-top: var(--space-xl);
}

[data-variant="pay3"] .authenticate-button {
    margin-top: 0;
}

[data-variant="pay3"] :is(.start-shopping, .fraud-check) .secure-citizen-partner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    margin-top: var(--space-xl);
    font-size: 0.625rem;
    line-height: 1.3;
}

[data-variant="pay3"] .secure-citizen-partner img {
    width: 7.5rem;
    height: auto;
}

/* Two notes either side of a hairline, between two rules that run wider than the copy. */
[data-variant="pay3"] :is(.start-shopping, .fraud-check) > .secure-citizen-notes {
    display: grid;
    grid-template-columns: 1fr;
    max-width: none;
    margin-block: var(--space-2xl);
    padding-block: var(--space-2xl);
    border-block: 1px solid var(--pay3-rule);
}

[data-variant="pay3"] .secure-citizen-notes > div {
    padding: var(--space-md) var(--space-lg);
}

[data-variant="pay3"] .secure-citizen-notes img {
    display: block;
    width: 3.1875rem;
    height: 3.1875rem;
    margin: 0 auto var(--space-lg);
}

[data-variant="pay3"] .secure-citizen-notes p {
    max-width: 24rem;
    margin-inline: auto;
}

@media (min-width: 900px) {
    [data-variant="pay3"] :is(.start-shopping, .fraud-check) > .secure-citizen-notes {
        grid-template-columns: 1fr 1fr;
    }

    [data-variant="pay3"] .secure-citizen-notes > div + div {
        border-left: 1px solid var(--pay3-rule);
    }
}

@media (max-width: 899px) {
    [data-variant="pay3"] .secure-citizen-notes > div + div {
        border-top: 1px solid var(--pay3-rule);
    }
}

[data-variant="pay3"] :is(.start-shopping, .fraud-check) > .secure-citizen-fallback {
    max-width: 40rem;
}

/* The consent, over the page. A popover, so the browser handles opening, light dismiss and focus. */
[data-variant="pay3"] .consent-popover {
    width: min(40rem, calc(100% - 2rem));
    max-height: 85vh;
    margin: auto;
    padding: var(--space-3xl) var(--space-2xl) var(--space-2xl);
    overflow: auto;
    border: none;
    border-radius: var(--radius-control);
    background: var(--app-background, #ffffff);
    color: var(--heading-color);
    text-align: left;
}

[data-variant="pay3"] .consent-popover::backdrop {
    background: rgb(0 0 0 / 50%);
}

[data-variant="pay3"] .consent-popover h3 {
    margin: var(--space-xl) 0 var(--space-xs);
    font-size: 0.9375rem;
    color: var(--heading-color);
}

[data-variant="pay3"] :is(.start-shopping, .fraud-check) .consent-popover p {
    font-size: var(--font-size-sm);
}

[data-variant="pay3"] .consent-popover a {
    color: inherit;
}

[data-variant="pay3"] .consent-logo {
    display: block;
    width: 9rem;
    height: auto;
    margin: 0 auto;
}

[data-variant="pay3"] .consent-close {
    position: absolute;
    top: var(--space-sm);
    right: var(--space-sm);
    width: auto;
    margin: 0;
    padding: 0 var(--space-xs);
    border: none;
    background: none;
    color: var(--heading-color);
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
}

/* ── Fraud check ────────────────────────────────────────────────────────── */

/* /fr-check, drawn as Flow 6 of the redesign (file 4495, both brands' 6. Pay3 page): the panel
   opens straight under the logo with the heading inside it. Measured off the frames the client
   sent on 12 Oct 2026, taking Truworths' where the two brands' frames disagree by a few pixels.
   On a 1920 render the panel's top edge is 59px under the logo, the heading's cap height starts
   60px into it, the rules are 1221 wide and darker than the welcome page's, and the panel ends 82px
   under FIND A STORE. */
[data-variant="pay3"] .fraud-check {
    --fraud-check-rule: #d9d9d9;

    margin: 3.6875rem auto 0.8125rem;
    padding: 3.1875rem var(--pay3-inset) 5.125rem;
}

[data-variant="pay3"] .fraud-check h1 {
    margin-block: 0 1.3125rem;
    font-size: var(--font-size-heading);
    line-height: var(--line-height-tight);
    /* The words stay as React writes them, so the e2e copy assertions read what they expect. */
    text-transform: uppercase;
    color: var(--heading-color);
}

/* The copy over READ CONSENT wraps at 640, narrower than the welcome page's. */
[data-variant="pay3"] .fraud-check > p {
    max-width: 40rem;
    margin-block: 0 0.9375rem;
}

[data-variant="pay3"] .fraud-check > p:last-child {
    margin-bottom: 0;
}

[data-variant="pay3"] .fraud-check .read-consent {
    font-size: var(--font-size-md);
}

[data-variant="pay3"] .fraud-check .authenticate-form {
    margin-top: 3.25rem;
}

/* 312x51, as FIND A STORE is. */
[data-variant="pay3"] .fraud-check .authenticate-button {
    display: block;
    min-height: 3.1875rem;
    margin-bottom: 0;
    padding-block: 0;
}

[data-variant="pay3"] .fraud-check .secure-citizen-partner {
    margin-top: 1.9375rem;
}

/* The two notes run the panel's width, so each sits over its half of it; the rules above and below
   them stop short at 1221, centred, and the hairline between them runs from the icons' tops. */
[data-variant="pay3"] .fraud-check > .secure-citizen-notes {
    margin-block: 3rem 2.8125rem;
    padding-block: 3.25rem 3.125rem;
    border-block: none;
    background:
        linear-gradient(var(--fraud-check-rule), var(--fraud-check-rule)) top / min(76.3125rem, 100%) 1px no-repeat,
        linear-gradient(var(--fraud-check-rule), var(--fraud-check-rule)) bottom / min(76.3125rem, 100%) 1px no-repeat;
}

[data-variant="pay3"] .fraud-check .secure-citizen-notes > div {
    padding-block: 0;
}

[data-variant="pay3"] .fraud-check .secure-citizen-notes img {
    margin-bottom: 1.5625rem;
}

[data-variant="pay3"] .fraud-check .secure-citizen-notes p {
    margin-block: 0 0.9375rem;
}

@media (min-width: 900px) {
    [data-variant="pay3"] .fraud-check .secure-citizen-notes > div + div {
        border-left-color: var(--fraud-check-rule);
    }
}

/* One line of the sentence runs to "nearest" on the Truworths frame and to "store" on Identity's;
   784 gives Truworths' break. */
[data-variant="pay3"] .fraud-check > .secure-citizen-fallback {
    max-width: 49rem;
    margin-bottom: 3rem;
}

/* Both brands' frames outline it 2px in black, pink Identity's included, with a bold label. */
[data-variant="pay3"] .fraud-check .find-store-button {
    border: 2px solid var(--heading-color);
    font-weight: 700;
}

/* On a phone the frames set the copy at 14px in narrower measures, wrap the partner line under its
   logo, run the first rule edge to edge and inset the other two, and pin AUTHENTICATE NOW across
   the foot of the screen: both brands' phone frames draw it as a square bar over the copy, at the
   same height whatever is under it, as the welcome page's phone frame does. */
@media (max-width: 899px) {
    [data-variant="pay3"] .fraud-check {
        margin: 2.3125rem 0 1.5625rem;
        padding: 2.6875rem var(--pay3-inset) 3.3125rem;
    }

    [data-variant="pay3"] .fraud-check h1 {
        margin-bottom: 0.875rem;
    }

    [data-variant="pay3"] .fraud-check p,
    [data-variant="pay3"] .fraud-check .read-consent {
        font-size: var(--font-size-sm);
    }

    [data-variant="pay3"] .fraud-check > p {
        max-width: 19.5rem;
        margin-bottom: 0.875rem;
    }

    [data-variant="pay3"] .fraud-check .authenticate-form {
        position: fixed;
        inset: auto 0 0;
        /* Under the processing overlay (1000), which has to cover it while a request is out. */
        z-index: 100;
        max-width: none;
        margin: 0;
    }

    [data-variant="pay3"] .fraud-check .authenticate-button {
        border-radius: 0;
    }

    [data-variant="pay3"] .fraud-check .secure-citizen-partner {
        margin-top: 2.5625rem;
        gap: 1.0625rem;
        text-align: left;
    }

    [data-variant="pay3"] .fraud-check .secure-citizen-partner span {
        max-width: 8.75rem;
    }

    [data-variant="pay3"] .fraud-check > .secure-citizen-notes {
        margin: 2.9375rem calc(-1 * var(--pay3-inset)) 2.8125rem;
        padding: 0;
        border-top: 1px solid var(--fraud-check-rule);
        background: none;
    }

    [data-variant="pay3"] .fraud-check .secure-citizen-notes > div,
    [data-variant="pay3"] .fraud-check .secure-citizen-notes > div + div {
        margin-inline: 1.125rem;
        padding: 3.125rem 0 2.4375rem;
        border-top: none;
        border-bottom: 1px solid var(--fraud-check-rule);
    }

    /* The inset column's width on a 360 phone, so the 24-hour note keeps to two lines. */
    [data-variant="pay3"] .fraud-check .secure-citizen-notes p {
        max-width: 20.25rem;
    }

    [data-variant="pay3"] .fraud-check > .secure-citizen-fallback {
        max-width: 20rem;
    }

    /* The bar would otherwise sit over the foot of the footer once the page is scrolled to its end. */
    [data-variant="pay3"]:has(.fraud-check .authenticate-form) .app-footer {
        padding-bottom: calc(3.5rem + 3.1875rem);
    }
}

/* ── Consent copy and checkboxes ────────────────────────────────────────── */

/* Italic on both brands' artboards, with the two links underlined in the same colour as the
   sentence rather than picked out. */
[data-variant="pay3"] .consent-copy {
    font-style: italic;
}

[data-variant="pay3"] .consent-copy a {
    color: inherit;
    text-decoration: underline;
}

[data-variant="pay3"] .consent-block legend {
    font-weight: 700;
}

/* Both brands' step-2 frames set the consent rows on a 48px pitch: a 28px box with 20px under it,
   and 20px of air between the box and its label — the same as the Flow 5 frames React's cross-sell
   was measured off (CheckBox.module.css). */
[data-variant="pay3"] .consent-block label {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
    line-height: 1.3125rem;
    cursor: pointer;
}

/* An outlined square with the tick inside it, in the same hairline as the text fields — a box that
   reads as something to click. This used to mask the checked box down to its tick, which took the
   outline with it; every box starts checked, so the rows read as a bulleted list.

   The tick is a background image because a checked input has no room for a pseudo element in every
   engine. The brand can swap the image (--brand-pay3-tick): Identity ticks in its pink. The ink is
   the frames' 14x10 in the 28px box.

   The width is a literal because Pico doubles --pico-border-width on a checkbox, which drew the box
   twice as heavy as the fields beside it. */
[data-variant="pay3"] .consent-block input[type="checkbox"] {
    appearance: none;
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1.75rem;
    margin: 0;
    border: 1px solid var(--pico-form-element-border-color, #bbb);
    border-radius: 0;
    background-color: var(--pico-form-element-background-color, #fff);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 50%;
    box-shadow: none;
    cursor: pointer;
}

[data-variant="pay3"] .consent-block input[type="checkbox"]:checked {
    background-image: var(--brand-pay3-tick, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 187 119.4'%3E%3Cpolygon fill='%23000000' points='68.3,119.4 0,73 8.6,60.4 66.9,100.1 176.5,0.3 186.8,11.5'/%3E%3C/svg%3E"));
}

/* The fields' own focus ring, so a keyboard user can see which box they are on. */
[data-variant="pay3"] .consent-block input[type="checkbox"]:focus-visible {
    outline: none;
    border-color: var(--pico-primary, #333);
    box-shadow: 0 0 0 2px rgb(0 0 0 / 8%);
}

/* The benefit lines are the one place the artboards use Poppins Light; everything else on these
   screens is 400, with headings at 700 from the variant sheet. */
[data-variant="pay3"] .pay3-benefits li {
    font-weight: 300;
}