/*
 * GetPayin landing page — "panel board" direction.
 *
 * Self-contained: the landing layout loads this instead of Bootstrap/AOS/boxicons, so nothing
 * here may lean on the admin theme's classes. Everything is namespaced `gp-` to keep it from
 * colliding with the bikin template stylesheet, which the theme's page view (themes/bikin/page)
 * still loads.
 */

:root {
    /* The same values as identity.css, which the panels load; a test keeps the two equal. */
    --gp-ground: #f2f9f8;
    --gp-panel: #ffffff;
    --gp-sand: #eceeef;
    --gp-ink: #12332f;
    --gp-body: #4c635f;
    --gp-faint: #7c8f8b;
    --gp-line: #d9eae8;
    --gp-teal: #009c95;
    --gp-teal-soft: #e4f2f1;
    --gp-teal-bright: #5fe0d4;
    /* Placeholder text is text: 4.98:1 on white, where #a7ada4 was 2.3:1. */
    --gp-placeholder: #637370;
    --gp-radius: 24px;
    --gp-radius-sm: 14px;
    --gp-gap: 16px;
    --gp-pad: clamp(18px, 3vw, 56px);

    /* Text shades, as in identity.css: small text needs 4.5:1, and the brand shades do not
       reach it (--gp-faint is 3.20:1 on the ground, --gp-teal 3.39:1 on white). They stay
       for icons and borders. */
    --gp-faint-ink: #637370;
    --gp-teal-ink: #00736e;
    --gp-teal-fill: #00857f;
    /* A text field's edge: the middle grey, lighter than 3:1 by choice (28 Oct 2026). A tick
       box's, a round option's and a switch's edge keeps 3:1. --gp-line is 1.24:1 on white. */
    --gp-field-line: #c6d1cf;
    --gp-control-line: #7c8f8b;
}

.gp-page {
    margin: 0;
    background: var(--gp-ground);
    color: var(--gp-ink);
    font-family: Figtree, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

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

.gp-page img {
    display: block;
    max-width: 100%;
}

.gp-page a {
    color: var(--gp-teal-ink);
    text-decoration: none;
}

.gp-page a:hover,
.gp-page a:focus {
    color: var(--gp-ink);
}

.gp-page h1,
.gp-page h2,
.gp-page h3,
.gp-page h4 {
    font-family: "Bricolage Grotesque", Figtree, "Helvetica Neue", Arial, sans-serif;
    font-weight: 700;
    letter-spacing: -0.025em;
    margin: 0;
}

.gp-display {
    font-family: "Bricolage Grotesque", Figtree, "Helvetica Neue", Arial, sans-serif;
    font-weight: 700;
    letter-spacing: -0.025em;
}

/*
 * The fluid gutter sets the margin up to 1320px, Bootstrap 5.3's widest container (PAYL-1974):
 * at 2200px a 1920px screen stretched the forms to 1740px. A 1440px laptop barely changes.
 */
.gp-shell {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 var(--gp-pad);
}

.gp-eyebrow {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gp-faint-ink);
}

/* Keeps a heading reachable from the fixed-free header without a scroll-margin surprise. */
.gp-page [id] {
    scroll-margin-top: 24px;
}

.gp-page :focus-visible {
    outline: 2px solid var(--gp-teal);
    outline-offset: 3px;
}

/* On the teal contact panels the logo teal ring is 1.68:1; a focus ring needs 3:1. */
.gp-page .gp-contact :focus-visible {
    outline-color: #fff;
}

/* ── header ─────────────────────────────────────────────────────────── */

.gp-header {
    padding: 22px 0;
}

.gp-header__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.gp-header__logo img {
    height: 32px;
    width: auto;
}

.gp-nav {
    display: flex;
    align-items: center;
    gap: 28px;
    font-size: 15px;
    font-weight: 500;
}

.gp-nav a {
    color: var(--gp-body);
}

.gp-nav a:hover,
.gp-nav a:focus {
    color: var(--gp-ink);
}

.gp-page .gp-nav__login {
    color: var(--gp-ink);
    font-weight: 600;
}

.gp-nav__icons {
    display: flex;
    align-items: center;
    gap: 14px;
}

.gp-nav__icons img {
    height: 22px;
    width: auto;
}

.gp-btn {
    display: inline-block;
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    padding: 15px 28px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.gp-btn--sm {
    font-size: 15px;
    padding: 11px 20px;
}

.gp-page .gp-btn--dark {
    background: var(--gp-ink);
    color: #fff;
}

.gp-page .gp-btn--dark:hover,
.gp-page .gp-btn--dark:focus {
    background: var(--gp-teal-fill);
    color: #fff;
}

.gp-page .gp-btn--teal {
    background: var(--gp-teal-fill);
    color: #fff;
}

.gp-page .gp-btn--teal:hover,
.gp-page .gp-btn--teal:focus {
    background: var(--gp-ink);
    color: #fff;
}

.gp-page .gp-btn--ghost {
    border-color: #b9d9d5;
    color: var(--gp-ink);
}

.gp-page .gp-btn--ghost:hover,
.gp-page .gp-btn--ghost:focus {
    border-color: var(--gp-ink);
    color: var(--gp-ink);
}

.gp-nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: #fff;
    border: 1px solid var(--gp-line);
    border-radius: 999px;
    padding: 0;
    color: var(--gp-ink);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.gp-nav-toggle:hover {
    border-color: var(--gp-ink);
}

.gp-nav-toggle[aria-expanded="true"] {
    background: var(--gp-ink);
    border-color: var(--gp-ink);
}

/* Three bars that fold into a cross: the outer two meet in the middle and rotate. */
.gp-nav-toggle__bars {
    position: relative;
    display: block;
    width: 18px;
    height: 12px;
}

.gp-nav-toggle__bars i {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.25, 1), opacity 0.16s ease;
}

.gp-nav-toggle__bars i:nth-child(1) { top: 0; }
.gp-nav-toggle__bars i:nth-child(2) { top: 5px; }
.gp-nav-toggle__bars i:nth-child(3) { top: 10px; }

.gp-nav-toggle[aria-expanded="true"] {
    color: #fff;
}

.gp-nav-toggle[aria-expanded="true"] .gp-nav-toggle__bars i:nth-child(1) {
    transform: translateY(5px) rotate(45deg);
}

.gp-nav-toggle[aria-expanded="true"] .gp-nav-toggle__bars i:nth-child(2) {
    opacity: 0;
    transform: scaleX(0.4);
}

.gp-nav-toggle[aria-expanded="true"] .gp-nav-toggle__bars i:nth-child(3) {
    transform: translateY(-5px) rotate(-45deg);
}

.gp-nav-scrim {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 25;
    background: rgba(18, 51, 47, 0.28);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.24s ease, visibility 0s linear 0.24s;
}

.gp-nav-scrim.is-open {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s, 0s;
}

@media (prefers-reduced-motion: reduce) {
    .gp-nav,
    .gp-nav > *,
    .gp-nav-scrim,
    .gp-nav-toggle__bars i {
        transition-duration: 0.01ms;
        transition-delay: 0s;
    }
}

/* ── bento hero ─────────────────────────────────────────────────────── */

/* Two equal halves: the hero and the payment-link mock are a pair, so they get a pair's grid. */
.gp-bento {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: min-content;
    gap: var(--gp-gap);
    padding-top: 20px;
    padding-bottom: var(--gp-pad);
}

.gp-card {
    background: var(--gp-panel);
    border-radius: var(--gp-radius);
    padding: clamp(22px, 1.7vw, 32px);
}

.gp-card--sand {
    background: var(--gp-sand);
}

/*
 * The hero card stretches to the height of the aside column beside it, which is the bento
 * look. What it must not do is hand that slack to the content: `space-between` spread the
 * three numbered steps down the whole card. Content stacks from the top and the actions are
 * pushed to the bottom instead, so any leftover height becomes one clean gap above the CTAs.
 */
.gp-hero {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 24px;
    padding: clamp(26px, 2.4vw, 44px);
}

/*
 * Plainly stacked. The two-ended split belongs to the bands underneath; giving the hero one
 * too made the card read as two bands of its own, on top of the sequence's rules.
 */
.gp-hero__title {
    margin: 0;
    font-size: clamp(30px, 2.6vw, 50px);
    line-height: 1.05;
    letter-spacing: -0.03em;
    text-wrap: pretty;
}

.gp-hero__lead {
    margin: 18px 0 0;
    max-width: 30em;
    font-size: 17px;
    line-height: 1.6;
    color: var(--gp-body);
}

/*
 * Back inside the hero card, under the lead. They fit there now that each step is one short
 * line of its own rather than the old features paragraphs. `flex: 0 0 auto` keeps them at
 * their natural height when the card stretches — the slack belongs above the CTAs, not here.
 */
.gp-steps {
    border-top: 1px solid var(--gp-line);
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: gp-step;
}

.gp-steps li {
    display: flex;
    gap: 16px;
    padding: 13px 0;
    border-bottom: 1px solid var(--gp-line);
    font-size: 15px;
    line-height: 1.5;
}

.gp-steps li:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.gp-steps li::before {
    counter-increment: gp-step;
    content: "0" counter(gp-step);
    font-family: "Bricolage Grotesque", Figtree, sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--gp-teal-ink);
    flex: 0 0 22px;
}

.gp-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: auto;
    padding-top: 4px;
}

/* ── payment link mock ──────────────────────────────────────────────── */

.gp-link-card {
    background: var(--gp-panel);
    border-radius: var(--gp-radius);
    overflow: hidden;
}

.gp-link-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 28px;
    border-bottom: 1px solid var(--gp-line);
}

.gp-link-card__label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gp-faint-ink);
}

.gp-pill {
    font-size: 12px;
    font-weight: 600;
    color: var(--gp-teal-ink);
    background: var(--gp-teal-soft);
    padding: 5px 11px;
    border-radius: 999px;
}

.gp-link-card__body {
    padding: 26px 28px 0;
}

.gp-link-card__meta {
    font-size: 13px;
    color: var(--gp-faint-ink);
}

.gp-link-card__amount {
    display: flex;
    align-items: baseline;
    gap: 9px;
    margin-top: 8px;
}

.gp-link-card__amount b {
    font-family: "Bricolage Grotesque", Figtree, sans-serif;
    font-size: clamp(32px, 2.6vw, 46px);
    font-weight: 700;
    letter-spacing: -0.03em;
}

.gp-link-card__amount span {
    font-size: 17px;
    font-weight: 600;
    color: var(--gp-teal-ink);
}

/*
 * The wallet buttons, in their own brand's black. The marks are lockups only — no background
 * of their own — so the button below is what carries the shape, at the same 46px as a field.
 */
.gp-wallets {
    padding: 20px 28px 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.gp-wallet {
    height: 46px;
    border-radius: 12px;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gp-wallet img {
    height: 21px;
    width: auto;
}

.gp-or {
    padding: 16px 28px 0;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gp-faint-ink);
}

.gp-or::before,
.gp-or::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--gp-line);
}

.gp-fields {
    padding: 16px 28px 0;
    display: grid;
    gap: 10px;
}

.gp-fields__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.gp-field {
    height: 46px;
    border: 1px solid var(--gp-line);
    border-radius: 12px;
    display: flex;
    align-items: center;
    padding: 0 14px;
    font-size: 14px;
    color: var(--gp-placeholder);
}

.gp-link-card__foot {
    padding: 20px 28px 26px;
}

.gp-fake-btn {
    background: var(--gp-teal-fill);
    color: #fff;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    padding: 15px;
    border-radius: 12px;
}

.gp-note {
    margin-top: 16px;
    font-size: 13px;
    color: var(--gp-faint-ink);
    text-align: center;
}

/*
 * Paired with the wallets band beside it rather than stacked as a second full-width row, so
 * the board is two panels over two panels instead of a hero and a run of stripes.
 */
.gp-payout__title {
    font-size: clamp(24px, 2.1vw, 36px);
    line-height: 1.1;
    letter-spacing: -0.025em;
}

.gp-payout p {
    margin: 14px 0 0;
    max-width: 40em;
    font-size: 15px;
    line-height: 1.6;
    color: var(--gp-body);
}

/* Sized to the payout statement beside it, so the pair reads as one row of two panels. */
.gp-methods__label {
    font-family: "Bricolage Grotesque", Figtree, sans-serif;
    font-size: clamp(18px, 1.5vw, 24px);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--gp-ink);
    margin: 0;
}

/* Nine marks in tiles of one size (PAYL-1974): five, then four centred under them, so the second
   row ends on no gap. Each mark fits its tile by width or by height, so the wide Visa no longer
   reads three times the size of Mastercard. One row of nine left a 54px tile in the 600px panel.
   A tile grows no larger than on a laptop: a tablet's full-width panel drew 140px tiles. */
.gp-methods__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 22px;
}

.gp-methods__tile {
    flex: 0 0 calc((100% - 40px) / 5);
    max-width: 105px;
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.8% 2.1%;
    background: var(--gp-panel);
    border: 1px solid var(--gp-line);
    border-radius: 12px;
}

.gp-methods__tile img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Etisalat and Orange draw their mark on black: the black is the tile, not a box inside one. */
.gp-methods__tile--dark {
    background: #000;
    border-color: #000;
    padding: 1.1% 1.4%;
}

/* ── value row ──────────────────────────────────────────────────────── */

.gp-values {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gp-gap);
}

.gp-values h3 {
    margin-bottom: 10px;
    font-size: 21px;
    letter-spacing: -0.015em;
}

.gp-values p {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--gp-body);
}

/* ── sections ─────────────────────────────────────────────────────── */

.gp-section {
    padding-bottom: var(--gp-pad);
}

/* A standalone page has no hero above it, so it opens on the same gutter the bento does. */
.gp-section--top {
    padding-top: 20px;
}

/* ── logo panels ────────────────────────────────────────────────────── */

.gp-duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gp-gap);
    align-items: start;
}

/* FAQ beside contact: the two cards share one height. */
.gp-duo--even {
    align-items: stretch;
}

.gp-panel-title {
    font-size: 24px;
    letter-spacing: -0.02em;
    margin-top: 8px;
}

.gp-panel-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}

.gp-panel-head a {
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

.gp-logo-grid {
    display: grid;
    gap: 20px;
    margin-top: 26px;
}

.gp-logo-grid--2 {
    grid-template-columns: repeat(2, 1fr);
}

.gp-logo-grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

.gp-logo-grid--4 {
    grid-template-columns: repeat(4, 1fr);
}

.gp-logo-grid > * {
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gp-logo-grid img {
    max-height: 42px;
    max-width: 100%;
    width: auto;
    object-fit: contain;
    mix-blend-mode: multiply;
}

/* One box for every partner: the wide wordmarks (NBE 4:1, Paymob 4.3:1, AAIB 5:1) stop at the
   width and the squarer Fawry (1.9:1) at the height, so no logo draws twice the size of another. */
.gp-logo-grid--partners img {
    max-width: min(130px, 100%);
    max-height: 44px;
}

/* ── customer wall (the dedicated /customers page) ──────────────────── */

.gp-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.gp-page-head__title {
    font-size: clamp(26px, 2.2vw, 40px);
    line-height: 1.08;
    letter-spacing: -0.03em;
    margin-top: 8px;
}

/*
 * One tile per logo, sized by the grid rather than a column count, so the wall reflows from
 * six across on a board down to two on a phone without a breakpoint per step.
 */
.gp-logo-wall {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 12px;
}

.gp-logo-wall__tile {
    background: var(--gp-panel);
    border-radius: var(--gp-radius-sm);
    height: 118px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.gp-logo-wall__tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px -18px rgba(18, 51, 47, 0.18);
}

.gp-logo-wall__tile a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.gp-logo-wall img {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    object-fit: contain;
    mix-blend-mode: multiply;
}

/* ── support, privacy policy and delete account ─────────────────────── */

.gp-page-head__lead {
    margin: 10px 0 0;
    max-width: 62ch;
    font-size: 16px;
    line-height: 1.6;
    color: var(--gp-body);
}

/* Reading text: body ink at a measure a line can be read across, headings in the display face. */
.gp-legal {
    max-width: 76ch;
    font-size: 16px;
    line-height: 1.7;
    color: var(--gp-body);
}

.gp-legal h2 {
    margin: 32px 0 10px;
    font-size: 22px;
    line-height: 1.25;
    color: var(--gp-ink);
}

.gp-legal h3 {
    margin: 20px 0 8px;
    font-size: 17px;
    line-height: 1.3;
    color: var(--gp-ink);
}

.gp-legal > :first-child {
    margin-top: 0;
}

.gp-legal p,
.gp-legal ul,
.gp-legal ol {
    margin: 0 0 14px;
}

.gp-legal ul,
.gp-legal ol {
    padding-left: 22px;
}

.gp-legal li {
    margin-bottom: 6px;
}

.gp-legal strong {
    color: var(--gp-ink);
}

/* Inside a paragraph a link is told apart by more than its colour. */
.gp-page .gp-legal a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.gp-legal__note {
    margin: 20px 0;
    padding: 16px 20px;
    border-radius: var(--gp-radius-sm);
    background: var(--gp-teal-soft);
    color: var(--gp-ink);
}

.gp-legal__note > :last-child {
    margin-bottom: 0;
}

/* Under .gp-legal, so it outranks the list indent above: the numbers sit on the text's edge. */
.gp-legal .gp-legal__steps {
    list-style: none;
    padding: 0;
    display: grid;
    gap: 18px;
}

.gp-legal .gp-legal__steps > li {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 12px;
    margin: 0;
}

.gp-legal__step-number {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--gp-teal-fill);
    color: #fff;
    font-weight: 600;
    line-height: 1;
}

.gp-legal__steps ul {
    margin: 8px 0 0;
}

/* The support form sits on the contact panel the home page uses. */
.gp-support__info {
    margin-top: 28px;
}

.gp-support__info .gp-contact__title {
    margin-bottom: 14px;
}

/* ── faq + contact ──────────────────────────────────────────────────── */

.gp-faq {
    padding: clamp(22px, 1.9vw, 34px);
}

.gp-faq__title {
    font-size: 26px;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
}

.gp-faq__list {
    border-top: 1px solid var(--gp-line);
}

.gp-faq__item {
    border-bottom: 1px solid var(--gp-line);
}

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

.gp-faq__q {
    width: 100%;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 0;
    background: none;
    border: 0;
    text-align: left;
    font: 600 17px/1.35 Figtree, sans-serif;
    color: var(--gp-ink);
    cursor: pointer;
}

.gp-faq__sign {
    font-size: 18px;
    font-weight: 600;
    color: var(--gp-teal);
    flex: 0 0 auto;
}

.gp-faq__a {
    margin: 0;
    padding: 0 0 20px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--gp-body);
}

.gp-faq__a[hidden] {
    display: none;
}

/*
 * The contact panel is the teal ink shade with solid white text: on the logo teal, white was
 * 3.39:1 and the paler text 2.1–2.9:1. Rows and fields darken the panel (#005e5a) instead of
 * washing it white, so white text on them is 7.61:1 and a placeholder 5.98:1.
 */
.gp-contact {
    background: var(--gp-teal-ink);
    color: #fff;
    border-radius: var(--gp-radius);
    padding: clamp(22px, 1.9vw, 34px);
}

.gp-contact__title {
    font-size: 26px;
    letter-spacing: -0.02em;
}

.gp-contact__lead {
    margin: 12px 0 26px;
    font-size: 16px;
    line-height: 1.6;
    color: #fff;
}

.gp-contact__links {
    display: grid;
    gap: 12px;
}

.gp-page .gp-contact__link {
    background: rgba(0, 0, 0, 0.18);
    border-radius: 14px;
    padding: 18px 20px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    color: #fff;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.gp-page .gp-contact__link:hover,
.gp-page .gp-contact__link:focus {
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
}

.gp-page .gp-contact__link--solid {
    background: #fff;
    color: var(--gp-ink);
}

.gp-page .gp-contact__link--solid:hover,
.gp-page .gp-contact__link--solid:focus {
    background: var(--gp-ink);
    color: #fff;
}

.gp-contact__link-label {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fff;
    margin: 0;
}

.gp-contact__link--solid .gp-contact__link-label {
    color: inherit;
}

.gp-contact__link-value {
    font-size: 17px;
    font-weight: 600;
    margin: 0;
}

/*
 * The inquiry form the old page carried, in its own panel below FAQ and contact, so neither
 * of those two cards towers over the other. Two fields to a row; the message and the button
 * take the full width.
 */
.gp-inquiry {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.gp-inquiry__legend,
.gp-inquiry__field--wide,
.gp-inquiry__submit {
    grid-column: 1 / -1;
}

/* align-content: a reason under one field makes its row taller; without it, the field beside it
   stretched its own box 14px to fill the row. */
.gp-inquiry__field {
    display: grid;
    align-content: start;
    gap: 6px;
}

.gp-inquiry__field label {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}

.gp-inquiry__legend {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fff;
}

.gp-inquiry input,
.gp-inquiry textarea {
    width: 100%;
    background: rgba(0, 0, 0, 0.18);
    /* A field's edge needs 3:1: this is 3.45:1 against the panel, 4.62:1 against the field. */
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 14px;
    padding: 14px 18px;
    font: 400 16px/1.4 Figtree, sans-serif;
    color: #fff;
}

.gp-inquiry input:focus,
.gp-inquiry textarea:focus {
    outline: 2px solid #fff;
    outline-offset: 1px;
}

.gp-inquiry textarea {
    resize: vertical;
    min-height: 96px;
}

/* A field the server turned down: a solid white edge, and the reason under it in words. Red
   would not read on the teal panel. */
.gp-inquiry [aria-invalid="true"] {
    border-color: #fff;
    box-shadow: inset 0 0 0 1px #fff;
}

.gp-inquiry__error {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}

.gp-inquiry .gp-alert {
    grid-column: 1 / -1;
    margin: 0;
}

.gp-inquiry__submit {
    background: #fff;
    color: var(--gp-ink);
    border: 0;
    border-radius: 14px;
    padding: 15px;
    font: 600 16px/1 Figtree, sans-serif;
    cursor: pointer;
}

.gp-inquiry__submit:hover {
    background: var(--gp-ink);
    color: #fff;
}

.gp-alert {
    background: rgba(255, 255, 255, 0.9);
    color: var(--gp-ink);
    border-radius: 14px;
    padding: 14px 18px;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 16px;
}

/* landing.js moves focus here so the message is read out. It is not a control, and the focus
   ring made it look like a text field. */
.gp-page .gp-alert:focus {
    outline: none;
}

/* ── footer ─────────────────────────────────────────────────────────── */

.gp-footer {
    border-top: 1px solid var(--gp-line);
    padding: 28px 0;
    font-size: 14px;
    color: var(--gp-faint-ink);
}

.gp-footer__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.gp-footer__social {
    display: flex;
    gap: 24px;
}

.gp-footer__social a {
    color: var(--gp-body);
}

/* ── responsive ─────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
    .gp-values {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 900px) {
    /*
     * The menu stays in flow and hides with visibility rather than `display: none`, because a
     * display swap cannot be transitioned. Hiding is delayed by the length of the fade so the
     * panel is still painted while it animates out.
     */
    .gp-nav {
        position: absolute;
        left: var(--gp-pad);
        right: var(--gp-pad);
        top: 76px;
        z-index: 30;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        background: #fff;
        border: 1px solid var(--gp-line);
        border-radius: 22px;
        padding: 14px;
        box-shadow: 0 24px 60px rgba(18, 51, 47, 0.16);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px) scale(0.98);
        transform-origin: top right;
        transition:
            opacity 0.2s ease,
            transform 0.32s cubic-bezier(0.2, 0.9, 0.25, 1),
            visibility 0s linear 0.32s;
    }

    .gp-nav.is-open {
        opacity: 1;
        visibility: visible;
        transform: none;
        transition-delay: 0s, 0s, 0s;
    }

    /* Each row arrives just after the panel, in order, so the menu unfolds instead of blinking. */
    .gp-nav > * {
        opacity: 0;
        transform: translateY(-8px);
        transition: opacity 0.24s ease, transform 0.24s ease;
    }

    .gp-nav.is-open > * {
        opacity: 1;
        transform: none;
    }

    .gp-nav.is-open > *:nth-child(1) { transition-delay: 0.05s; }
    .gp-nav.is-open > *:nth-child(2) { transition-delay: 0.09s; }
    .gp-nav.is-open > *:nth-child(3) { transition-delay: 0.13s; }
    .gp-nav.is-open > *:nth-child(4) { transition-delay: 0.17s; }
    .gp-nav.is-open > *:nth-child(5) { transition-delay: 0.21s; }
    .gp-nav.is-open > *:nth-child(6) { transition-delay: 0.25s; }

    /* The CTA keeps its pill in the stacked menu; only the plain links become rows. */
    .gp-nav > a:not(.gp-btn) {
        padding: 12px 14px;
        border-radius: 14px;
        font-size: 16px;
        transition: background-color 0.15s ease, color 0.15s ease, opacity 0.24s ease, transform 0.24s ease;
    }

    .gp-nav > a:not(.gp-btn):hover,
    .gp-nav > a:not(.gp-btn):focus {
        background: var(--gp-ground);
    }

    .gp-nav > .gp-btn {
        margin-top: 8px;
    }

    .gp-nav__icons {
        padding: 8px 14px 2px;
        gap: 18px;
        border-top: 1px solid var(--gp-line);
        margin-top: 6px;
    }

    .gp-nav-toggle {
        display: inline-flex;
    }

    .gp-nav-scrim {
        display: block;
    }

    .gp-header {
        position: relative;
    }

    body.gp-nav-locked {
        overflow: hidden;
    }

    .gp-bento,
    .gp-duo {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    :root {
        --gp-radius: 20px;
    }

    .gp-hero__lead {
        font-size: 16px;
    }

    .gp-hero__actions .gp-btn {
        flex: 1 1 100%;
    }

    .gp-logo-grid--3,
    .gp-logo-grid--4 {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Two value cards side by side left about 160px each, so a line held two or three words. */
    .gp-values,
    .gp-inquiry {
        grid-template-columns: 1fr;
    }

    .gp-logo-wall {
        grid-template-columns: repeat(auto-fill, minmax(126px, 1fr));
    }

    .gp-logo-wall__tile {
        height: 92px;
        padding: 12px;
    }

    /* A phone takes the card logos in three rows of three. By the screen, not the panel: a
       browser on half a computer screen draws the panel as narrow as a large phone's. */
    .gp-methods__tile {
        flex-basis: calc((100% - 20px) / 3);
    }

    .gp-footer__bar {
        justify-content: center;
        text-align: center;
    }
}