/* 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 {
    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: #eaf5ee;
    border: 1px solid #cbe5d5;
    color: #2f6b46;
}

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

.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 {
    margin-top: 11px;
}

/* First and last name side by side — six stacked 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;
}

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

.gqv2 .gq-pn-field label span {
    font-weight: 500;
    color: var(--gq-mist);
    text-transform: none;
    letter-spacing: 0;
}

/* 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;
}

.gqv2 .gq-pn-tool {
    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;
    width: 46px;
    height: 46px;
    border-radius: 16px;
    font-size: 17px;
    color: var(--gq-blue);
    background: var(--gq-blue-tint);
    margin-bottom: 16px;
}

.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. */
.gqv2 .gq-pn-panel .gqpw {
    margin-top: 6px;
}

.gqv2 .gq-pn-panel .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;
}