/* Partner With Us (/partner-with-us).
   Self-contained, the arrangement about.css and guides.css follow: site.css
   supplies the tokens, the wrap and the section rhythm, nothing of home.css is
   needed, so home.css is not loaded on this page.

   The one thing this page has that the other static pages do not is a form in
   its hero. That decides the whole opening: a white card needs something dark
   behind it to read as a card, so the hero is the navy band the other pages
   only reach halfway down. */

/* ==================== HERO ==================== */

.gqv2 .gq-pn-hero {
    background: linear-gradient(135deg, var(--gq-navy), var(--gq-blue-dark));
    color: #fff;
    padding: 64px 0 70px;
    position: relative;
    overflow: hidden;
}

/* A single soft light behind the card, so the gradient does not read as a flat
   rectangle at wide widths. Decorative only — it sits under everything. */
.gqv2 .gq-pn-hero::after {
    content: '';
    position: absolute;
    top: -160px;
    right: -120px;
    width: 620px;
    height: 620px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(36, 116, 166, .55), transparent 65%);
    pointer-events: none;
}

.gqv2 .gq-pn-hero-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 56px;
    align-items: center;
}

.gqv2 .gq-pn-pitch .gqv2-script {
    font-size: 26px;
    line-height: 1;
    color: var(--gq-sky);
}

.gqv2 .gq-pn-pitch h1 {
    font-size: clamp(32px, 4.2vw, 48px);
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.08;
    margin: 8px 0 14px;
    color: #fff;
}

.gqv2 .gq-pn-lead {
    font-size: 16.5px;
    line-height: 1.75;
    color: rgba(255, 255, 255, .86);
    max-width: 620px;
    margin: 0;
}

/* ---- the counted figures ---- */

.gqv2 .gq-pn-figures {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    margin: 26px 0 0;
    padding: 0;
}

.gqv2 .gq-pn-figures li {
    display: flex;
    align-items: baseline;
    gap: 9px;
    padding: 11px 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .18);
}

.gqv2 .gq-pn-figures i {
    color: var(--gq-sky);
    font-size: 13px;
    align-self: center;
}

.gqv2 .gq-pn-figures b {
    font-family: var(--gq-head-font);
    font-size: 21px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}

.gqv2 .gq-pn-figures span {
    font-size: 13px;
    color: rgba(255, 255, 255, .78);
}

/* A quiet in-page jump rather than a second button — the card beside it is the
   loud thing in this band, and two competing calls to action would be one too
   many. */
.gqv2 .gq-pn-jump {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 26px;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .4px;
    color: rgba(255, 255, 255, .82);
    border-bottom: 1px solid rgba(255, 255, 255, .3);
    padding-bottom: 4px;
    transition: color .18s ease, border-color .18s ease;
}

.gqv2 .gq-pn-jump:hover {
    color: #fff;
    border-color: #fff;
}

.gqv2 .gq-pn-jump i {
    font-size: 11px;
}

/* ==================== THE SIGN-UP CARD ==================== */

/* Compact on purpose. It is six fields, a strength meter and a button, and at
   the roomier spacing this card started with it ran past the fold on a laptop —
   which put the submit button somewhere nobody scrolled to.

   Signing in is not here: it is a link out to the panel, which owns the only
   sign-in form on the site. See the view for why. */

.gqv2 .gq-pn-card {
    /* The "it worked" palette, named once because two things wear it: the
       success alert and the mark on the card the form turns into. */
    --gq-pn-ok-bg: #eaf5ee;
    --gq-pn-ok-line: #cbe5d5;
    --gq-pn-ok-ink: #2f6b46;

    position: relative;
    background: #fff;
    border-radius: 18px;
    padding: 24px 24px 20px;
    box-shadow: 0 40px 80px -28px rgba(0, 0, 0, .55),
                0 18px 40px -18px rgba(0, 0, 0, .35);

    /* Reached by #gq-pn-join from the closing band and from the panel's own
       sign-in page, both of which would otherwise scroll it under the sticky
       header. */
    scroll-margin-top: calc(var(--gq-header-h) + 20px);
}

/* ---- what came back from the partner host ---- */

.gqv2 .gq-pn-alert {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 11px 13px;
    margin-bottom: 14px;
    border-radius: 12px;
    font-size: 13.5px;
    line-height: 1.55;
}

.gqv2 .gq-pn-alert i {
    font-size: 14px;
    margin-top: 2px;
    flex-shrink: 0;
}

.gqv2 .gq-pn-alert ul {
    margin: 0;
    padding-left: 17px;
}

.gqv2 .gq-pn-alert-ok {
    background: var(--gq-pn-ok-bg);
    border: 1px solid var(--gq-pn-ok-line);
    color: var(--gq-pn-ok-ink);
}

.gqv2 .gq-pn-alert-bad {
    background: #fdeeea;
    border: 1px solid #f6d2c8;
    color: #a3402a;
}

/* ---- what the card becomes once the email is away ---- */

/* Centred and given room, because it is the whole card now rather than a strip
   above a form — see the view for why the form is not left underneath it. */

.gqv2 .gq-pn-sent {
    text-align: center;
    padding: 10px 0 2px;
}

.gqv2 .gq-pn-sent-mark {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: var(--gq-pn-ok-bg);
    border: 1px solid var(--gq-pn-ok-line);
    color: var(--gq-pn-ok-ink);
    font-size: 23px;
}

.gqv2 .gq-pn-sent .gq-pn-card-head {
    margin-bottom: 0;
}

/* Wider than the heading it sits under, and measured: the sentence runs to
   three lines in a half-card and is the only thing the reader has to take in. */
.gqv2 .gq-pn-sent .gq-pn-card-head p {
    max-width: 44ch;
    margin: 0 auto;
    font-size: 13.5px;
}

.gqv2 .gq-pn-card-head {
    margin-bottom: 16px;
}

.gqv2 .gq-pn-card-kicker {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--gq-blue);
    margin-bottom: 8px;
}

.gqv2 .gq-pn-card-head h2 {
    font-family: var(--gq-head-font);
    font-size: 21px;
    font-weight: 700;
    color: var(--gq-navy);
    line-height: 1.2;
    margin: 0 0 7px;
}

.gqv2 .gq-pn-card-head p {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--gq-mist);
}

.gqv2 .gq-pn-field + .gq-pn-field,
.gqv2 .gq-pn-row + .gq-pn-field,
.gqv2 .gq-pn-field + .gq-pn-row,
.gqv2 .gq-pn-row + .gq-pn-row {
    margin-top: 11px;
}

/* Fields paired across the card: the names, the two ways of reaching the
   business, and the password with its confirmation. Stacked, seven fields make
   a card tall enough to push its own submit button off a laptop screen. */
.gqv2 .gq-pn-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.gqv2 .gq-pn-row .gq-pn-field + .gq-pn-field {
    margin-top: 0;
}

/* Not an even pair: an address is long and a number is short, and at 1fr each
   the email ran out of box while the phone sat half empty. fr rather than
   percentages so the two shares divide what is left after the gap. */
.gqv2 .gq-pn-row-reach {
    grid-template-columns: 65fr 35fr;
}

/* The strength meter's advice is a sentence, and in half a card it wraps. The
   space is reserved rather than made as it types, so the submit button below
   holds still while somebody is choosing a password. Two lines covers every
   hint but the wordiest, which is the one nobody sees for long. */
.gqv2 .gq-pn-row-pw .gqpw-note {
    min-height: 2.9em;
}

.gqv2 .gq-pn-field label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .3px;
    color: var(--gq-slate);
    margin-bottom: 5px;
}

/* A field with no icon keeps the same box; only the left padding changes. */
.gqv2 .gq-pn-input:not(:has(i)) input {
    padding-left: 14px;
}

/* The icon is positioned rather than floated so the input keeps its own full
   width and the browser's autofill highlight does not spill past the border. */
.gqv2 .gq-pn-input {
    position: relative;
}

.gqv2 .gq-pn-input i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13.5px;
    color: var(--gq-mist);
    pointer-events: none;
    transition: color .18s ease;
}

.gqv2 .gq-pn-input input {
    width: 100%;
    padding: 11px 14px 11px 38px;
    font-family: var(--gq-font);
    font-size: 14px;
    color: var(--gq-charcoal);
    background: var(--gq-cloud);
    border: 1px solid var(--gq-line);
    border-radius: 12px;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.gqv2 .gq-pn-input input::placeholder {
    color: #9aa6b5;
}

.gqv2 .gq-pn-input input:focus {
    outline: none;
    background: #fff;
    border-color: var(--gq-blue);
    box-shadow: 0 0 0 4px rgba(36, 116, 166, .14);
}

/* On the wrapper, not a sibling combinator: the icon is before the input in
   source order, so `input:focus + i` would never match. */
.gqv2 .gq-pn-input:focus-within i {
    color: var(--gq-blue);
}

.gqv2 .gq-pn-submit {
    width: 100%;
    justify-content: center;
    margin-top: 16px;
    padding: 13px 24px;
}

.gqv2 .gq-pn-card-foot {
    margin: 12px 0 0;
    text-align: center;
    font-size: 13.5px;
    color: var(--gq-mist);
}

.gqv2 .gq-pn-card-foot a {
    color: var(--gq-blue);
    font-weight: 700;
}

.gqv2 .gq-pn-card-foot a:hover {
    text-decoration: underline;
}

/* Names the host the form posts to. The form crosses from the bare domain to
   the partner subdomain, and a password field that quietly changes host is
   exactly the thing a careful person wants told to them. */
.gqv2 .gq-pn-card-host {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--gq-line);
    font-size: 12px;
    color: var(--gq-mist);
}

.gqv2 .gq-pn-card-host b {
    color: var(--gq-slate);
    font-weight: 700;
}

/* ==================== SHARED SECTION FURNITURE ==================== */

.gqv2 .gq-pn-kicker {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--gq-blue);
    margin-bottom: 10px;
}

.gqv2 .gq-pn-head {
    max-width: 760px;
    margin: 0 auto 40px;
    text-align: center;
}

.gqv2 .gq-pn-head p {
    color: var(--gq-mist);
    font-size: 16px;
    line-height: 1.65;
    margin: 0;
}

/* ==================== WHAT YOU GET ==================== */

.gqv2 .gq-pn-tools {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* Icon beside the words, not above them: two columns, with the icon spanning
   the title and paragraph rows so it sits against the card's left edge. */
.gqv2 .gq-pn-tool {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr;
    column-gap: 16px;
    padding: 28px 26px;
    border-radius: var(--gq-radius);
    background: #fff;
    border: 1px solid var(--gq-line);
    box-shadow: var(--gq-shadow-sm);
    transition: transform .18s ease, border-color .18s ease;
}

.gqv2 .gq-pn-tool:hover {
    transform: translateY(-3px);
    border-color: var(--gq-blue);
}

.gqv2 .gq-pn-tool i {
    display: grid;
    place-items: center;
    grid-row: 1 / span 2;
    align-self: start;
    width: 46px;
    height: 46px;
    border-radius: 16px;
    font-size: 17px;
    color: var(--gq-blue);
    background: var(--gq-blue-tint);
}

.gqv2 .gq-pn-tool b {
    display: block;
    font-family: var(--gq-head-font);
    font-size: 17px;
    color: var(--gq-navy);
    margin-bottom: 8px;
}

.gqv2 .gq-pn-tool p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--gq-mist);
}

/* ==================== HOW IT WORKS ==================== */

.gqv2 .gq-pn-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.gqv2 .gq-pn-steps li {
    position: relative;
    padding: 30px 26px 28px;
    border-radius: var(--gq-radius);
    background: #fff;
    border: 1px solid var(--gq-line);
    box-shadow: var(--gq-shadow-sm);
}

/* Watermarked behind the card's own content, as the About page's steps are —
   the order is readable at a glance without competing with the heading. */
.gqv2 .gq-pn-step-n {
    position: absolute;
    top: 14px;
    right: 18px;
    font-family: var(--gq-head-font);
    font-size: 40px;
    font-weight: 700;
    line-height: 1;
    color: var(--gq-navy);
    opacity: .08;
}

.gqv2 .gq-pn-steps i {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 16px;
    font-size: 17px;
    color: #fff;
    background: linear-gradient(135deg, var(--gq-blue), var(--gq-blue-dark));
    margin-bottom: 16px;
}

.gqv2 .gq-pn-steps b {
    display: block;
    font-family: var(--gq-head-font);
    font-size: 18px;
    color: var(--gq-navy);
    margin-bottom: 8px;
}

.gqv2 .gq-pn-steps p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--gq-mist);
}

/* ==================== WHAT YOU CAN LIST ==================== */

.gqv2 .gq-pn-split {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 56px;
    align-items: center;
}

.gqv2 .gq-pn-split-text p {
    color: var(--gq-mist);
    font-size: 15.5px;
    line-height: 1.75;
    margin: 0 0 14px;
}

.gqv2 .gq-pn-types {
    padding: 28px;
    border-radius: var(--gq-radius);
    background: var(--gq-cloud);
    border: 1px solid var(--gq-line);
}

.gqv2 .gq-pn-types-head {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--gq-slate);
    margin-bottom: 16px;
}

/* --tc is the type's own colour, straight from App\Reference\ListingTypes, so
   these are the same four things the homepage cards and the About page are. */
.gqv2 .gq-pn-type {
    display: grid;
    grid-template-columns: 46px 1fr;
    grid-template-rows: auto auto;
    column-gap: 16px;
    align-items: center;
    padding: 16px 18px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid transparent;
    transition: transform .18s ease, border-color .18s ease;
}

.gqv2 .gq-pn-type + .gq-pn-type {
    margin-top: 10px;
}

.gqv2 .gq-pn-type:hover {
    transform: translateX(3px);
    border-color: var(--tc, var(--gq-blue));
}

.gqv2 .gq-pn-type i {
    grid-row: 1 / span 2;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    font-size: 16px;
    color: #fff;
    background: var(--tc, var(--gq-blue));
}

.gqv2 .gq-pn-type b {
    font-family: var(--gq-head-font);
    font-size: 15.5px;
    color: var(--gq-navy);
}

.gqv2 .gq-pn-type span {
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--gq-mist);
}

/* ==================== WHY IT WORKS ==================== */

.gqv2 .gq-pn-why {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.gqv2 .gq-pn-why-item {
    text-align: center;
    padding: 34px 24px;
    border-radius: var(--gq-radius);
    background: rgba(255, 255, 255, .72);
    border: 1px solid rgba(255, 255, 255, .9);
}

.gqv2 .gq-pn-why-item i {
    font-size: 30px;
    color: var(--gq-blue);
    margin-bottom: 18px;
}

.gqv2 .gq-pn-why-item b {
    display: block;
    font-family: var(--gq-head-font);
    font-size: 17px;
    color: var(--gq-navy);
    margin-bottom: 9px;
}

.gqv2 .gq-pn-why-item p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--gq-slate);
}

/* ==================== CLOSING BAND ====================
   The shape of the shared .gqv2-band, in sand with a gold button rather than
   sky with a navy one — this page's ask is not the traveller's ask, and it
   should not be mistaken for it on a page a traveller may also wander onto. */

.gqv2 .gq-pn-band {
    background: var(--gq-sand);
    border-top: 1px solid var(--gq-line);
}

.gqv2 .gq-pn-band .gqv2-wrap {
    display: flex;
    align-items: center;
    gap: 26px;
    padding-top: 52px;
    padding-bottom: 52px;
    flex-wrap: wrap;
}

.gqv2 .gq-pn-band-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #fff;
    color: var(--gq-gold);
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--gq-shadow-sm);
    flex-shrink: 0;
}

.gqv2 .gq-pn-band-copy {
    flex: 1;
    min-width: 260px;
}

.gqv2 .gq-pn-band-copy h2 {
    font-family: var(--gq-font);
    font-size: clamp(20px, 2.4vw, 26px);
    font-weight: 800;
    margin: 0 0 6px;
    color: var(--gq-navy);
}

.gqv2 .gq-pn-band-copy p {
    margin: 0;
    color: var(--gq-mist);
    font-size: 15px;
    font-weight: 600;
}

/* ==================== RESPONSIVE ==================== */

@media (max-width: 1080px) {
    /* The card goes under the pitch rather than beside it, and stops being
       full-bleed — a sign-in box the width of a tablet reads as a page. */
    .gqv2 .gq-pn-hero-inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .gqv2 .gq-pn-card {
        max-width: 460px;
        width: 100%;
    }

    .gqv2 .gq-pn-tools,
    .gqv2 .gq-pn-steps,
    .gqv2 .gq-pn-why {
        grid-template-columns: 1fr 1fr;
    }

    .gqv2 .gq-pn-split {
        grid-template-columns: 1fr;
        gap: 36px;
    }
}

@media (max-width: 720px) {
    .gqv2 .gq-pn-hero {
        padding: 44px 0 50px;
    }

    .gqv2 .gq-pn-hero::after {
        display: none;
    }

    .gqv2 .gq-pn-figures li {
        padding: 9px 15px;
    }

    .gqv2 .gq-pn-card {
        padding: 20px 18px 16px;
    }

    .gqv2 .gq-pn-tools,
    .gqv2 .gq-pn-steps,
    .gqv2 .gq-pn-why {
        grid-template-columns: 1fr;
    }

    .gqv2 .gq-pn-band .gqv2-wrap {
        padding-top: 40px;
        padding-bottom: 40px;
    }
}

/* The injected strength meter sits inside a compact field, so it takes the
   card's tighter rhythm rather than the shared stylesheet's default gap. Was
   scoped to .gq-pn-panel, which went with the card's tabs and left these two
   matching nothing. */
.gqv2 .gq-pn-card .gqpw {
    margin-top: 6px;
}

.gqv2 .gq-pn-card .gqpw-note {
    font-size: 11.5px;
}

/* The way to the panel's sign-in page, under the sign-up form. Separated by a
   rule because it is a different destination, not another field — and quiet,
   because the page's job is to get new partners signed up, not to be a second
   front door for the ones who already are. */
.gqv2 .gq-pn-card-alt {
    margin: 12px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--gq-line);
    text-align: center;
    font-size: 13px;
    color: var(--gq-mist);
}

.gqv2 .gq-pn-card-alt a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    color: var(--gq-blue);
}

.gqv2 .gq-pn-card-alt a:hover {
    text-decoration: underline;
}

.gqv2 .gq-pn-card-alt i {
    font-size: 10px;
}

/* ==========================================================================
   THE REDESIGN — Trello wXo8rdII (the sign-up band) and dwsWzOEE (the rest).

   These arrived as partners-new.css beside a /partner-with-us-new, so the two
   versions could be looked at side by side. They are folded in here now that
   the redesign IS the page; the gq-pn2- prefix is all that is left of the
   split and means nothing beyond "added with the redesign".
   ========================================================================== */

/* ==================== HERO ====================
   Three named benefits where the counted figures used to be. Divided rather
   than boxed: boxes would read as the type tiles further down, which they are
   not. */
.gqv2 .gq-pn2-benefits {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 30px 0 26px;
}

.gqv2 .gq-pn2-benefit {
    padding: 0 20px;
    border-left: 1px solid rgba(255, 255, 255, .16);
}

.gqv2 .gq-pn2-benefit:first-child { padding-left: 0; border-left: 0; }

.gqv2 .gq-pn2-benefit i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 15px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    color: var(--gq-sky);
    font-size: 22px;
}

.gqv2 .gq-pn2-benefit b {
    display: block;
    margin-bottom: 8px;
    font-family: var(--gq-head-font);
    font-size: 17.5px;
    font-weight: 800;
    color: #fff;
}

.gqv2 .gq-pn2-benefit p {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .78);
}

/* The jump link, underscored rather than chevroned — it is a promise about what
   is below, not a button. */
.gqv2 .gq-pn2-jump {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding-bottom: 3px;
    border-bottom: 2px solid var(--gq-gold);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
}

.gqv2 .gq-pn2-jump:hover { border-bottom-color: #fff; }

/* ==================== WHAT YOU CAN LIST ====================
   Two points under the lead, opposite the four type tiles. */
.gqv2 .gq-pn2-points {
    margin-top: 26px;
    padding-top: 24px;
    border-top: 1px solid #ddd5c4;
    display: grid;
    gap: 20px;
}

.gqv2 .gq-pn2-point { display: flex; gap: 14px; }

.gqv2 .gq-pn2-point > i {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(36, 116, 166, .1);
    color: var(--gq-blue);
    font-size: 16px;
}

.gqv2 .gq-pn2-point b {
    display: block;
    margin-bottom: 5px;
    font-family: var(--gq-head-font);
    font-size: 15.5px;
    color: var(--gq-navy);
}

.gqv2 .gq-pn2-point p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--gq-slate); }

/* The tile name, set as a label rather than a heading — it names a category,
   and the sentence under it is what does the talking. Matches the mockup. */
.gqv2 .gq-pn2-type b {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 1.1px;
    text-transform: uppercase;
}

/* ==================== WHY IT WORKS ====================
   The promise under the four reasons. One line, not a fifth card. */
.gqv2 .gq-pn2-promise {
    margin-top: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    text-align: left;
}

.gqv2 .gq-pn2-promise > i { color: var(--gq-blue); font-size: 30px; }

.gqv2 .gq-pn2-promise b {
    display: block;
    font-family: var(--gq-head-font);
    font-size: 16px;
    color: var(--gq-navy);
}

.gqv2 .gq-pn2-promise span { font-size: 14px; color: var(--gq-slate); }

/* ==================== CLOSING BAND ====================
   The figures, moved down off the hero. */
.gqv2 .gq-pn2-figures {
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* The closing band is sand, not navy — these read dark, unlike the hero. */
.gqv2 .gq-pn2-figures li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 15px 9px 12px;
    border: 1px solid var(--gq-line);
    border-radius: 999px;
    background: #fff;
}

.gqv2 .gq-pn2-figures i { color: var(--gq-gold); font-size: 14px; }
.gqv2 .gq-pn2-figures b { font-size: 18px; font-weight: 800; color: var(--gq-navy); }

.gqv2 .gq-pn2-figures span {
    max-width: 16ch;
    font-size: 12px;
    line-height: 1.35;
    color: var(--gq-slate);
}

@media (max-width: 900px) {
    .gqv2 .gq-pn2-benefits { grid-template-columns: minmax(0, 1fr); gap: 22px; }
    .gqv2 .gq-pn2-benefit { padding: 0; border-left: 0; }
}

@media (max-width: 620px) {
    .gqv2 .gq-pn2-promise { flex-direction: column; text-align: center; }
}