/* ============================================================================
   GFI site navbar
   Implements the "Navbar redesign" Figma section (Homepage Redesign 375:5107).

   Values are transcribed from the desktop frame 517:2969 and its flyouts
   (517:2647 / 517:2813 / 517:2991 / 517:3164). The navbar palette is a little
   apart from the global --gfi-color-* set — the design uses its own cool-grey
   text ramp and three distinct greens — so those live as navbar-scoped tokens
   below rather than being forced into the global system.

   global.css targets `nav a`, `li` and `button` with !important, so typography
   here is also !important; the class selectors outrank it either way.
   ============================================================================ */

.gfi-nav {
    /* Figma frame is 1440 wide with content running 137 -> 1346, i.e. a
       1209px content band. 1258 - 2*24 gutter reproduces that exactly. */
    --nav-height: 80px;
    --nav-max: 1258px;
    --nav-gutter: 24px;

    --nav-text: #4a5567;          /* resting nav link */
    --nav-text-active: #2f8f7b;   /* active nav link (== --gfi-color-accent-500) */
    --nav-brand-text: #111518;
    --nav-panel-title: #111b29;
    --nav-panel-desc: #677489;
    --nav-panel-label: #97a3b7;
    --nav-panel-plain: #4d4d4d;
    --nav-highlight: #00856f;     /* promoted panel item */
    --nav-cta-bg: #0f7a63;
    --nav-cta-text: #fafbfd;
    --nav-divider: #eaeef3;
    --nav-chip: #dfe5ec;
    --nav-panel-shadow: 0 24px 32px 4px rgba(167, 174, 186, 0.32);

    /* Overlay, not in flow.
     *
     * Blocksy's builder header was transparent site-wide — it renders
     * `<div data-device="desktop" data-transparent>` which the theme styles
     * `position:absolute; top:0; left:0; right:0`, so it consumed zero flow
     * height and page content began at the very top. Every page on this site
     * was laid out against that: the homepage and blog carry Blocksy's 147px
     * `--theme-content-vertical-spacing`, while /jobs/, /courses/ and /about/
     * have no top spacing at all and simply start under the floating header.
     *
     * Rendering this navbar in normal flow therefore pushed every page down by
     * its own height. Matching the old behaviour restores all of them at once,
     * and it matches Figma too: the "Header Navigation" frame has no fill,
     * only the 1px divider.
     *
     * The positioning declarations carry !important because the element
     * renders as <header id="header" class="gfi-nav"> and Blocksy ships an
     * id-based rule setting position relative and z-index 50. An id scores
     * (1,0,0) and outranks .gfi-nav at (0,1,0), so without !important the
     * header silently stays in flow and pushes every page down by its own
     * height. !important is used rather than raising specificity via the id
     * so the rule survives that id ever being changed or dropped.
     *
     * Keep this comment free of braces: a stray brace inside a comment that
     * is accidentally left unopened terminates the whole rule.
     */
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 100 !important;
    background: transparent;
    border-bottom: 1px solid var(--nav-divider);
}

/* The bar overlays page content, so it needs a solid backdrop while the mobile
   drawer is hanging off it. */
.gfi-nav.is-drawer-open {
    background: #fff;
}

.gfi-nav *,
.gfi-nav *::before,
.gfi-nav *::after {
    box-sizing: border-box;
}

/* Elementor's global kit paints EVERY button on the site mint green:
 *
 *   .elementor-kit-1007 button { background-color:#4ECCA3;
 *                                box-shadow:0 0 10px 0 rgba(0,0,0,.5) }
 *
 * It is generated into uploads/elementor/css/post-1007.css, which WordPress
 * enqueues after this file. Its (0,1,1) specificity beats a bare
 * `.gfi-nav__trigger` (0,1,0), and `.gfi-nav button` only ties — a tie goes to
 * whichever loads last, which is Elementor. So this reset has to be
 * !important to hold.
 *
 * Every interactive control in the navbar (panel triggers, drawer triggers,
 * burger) is a <button>; the Sign In CTA is an <a> and keeps its own green.
 */
.gfi-nav button {
    background: none !important;
    box-shadow: none !important;
}

.gfi-nav__inner {
    /* Above the mobile scrim, so the burger stays clickable while the drawer
       is open. */
    position: relative;
    z-index: 40;

    display: flex;
    align-items: center;
    gap: 24px;
    max-width: var(--nav-max);
    min-height: var(--nav-height);
    margin: 0 auto;
    padding: 0 var(--nav-gutter);
}

/* ---------------------------------------------------------------- brand */

.gfi-nav__brand {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 0 0 auto;
    text-decoration: none;
}

.gfi-nav__brand-mark {
    display: block;
    flex: 0 0 auto;
    width: 62px;
    height: 62px;
}

.gfi-nav__brand-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.gfi-nav__brand-text {
    color: var(--nav-brand-text) !important;
    font-family: var(--gfi-font-body) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 15px !important;
    white-space: nowrap;
}

/* ------------------------------------------------------------ top level */

.gfi-nav__nav {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
}

.gfi-nav__list {
    display: flex;
    align-items: center;
    gap: 40px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gfi-nav__list > li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
    font-size: inherit !important;
}

.gfi-nav__item {
    position: relative;
}

.gfi-nav__trigger {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    color: var(--nav-text) !important;
    font-family: var(--gfi-font-body) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 24px !important;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.15s ease;

    /* Menu triggers are controls, not prose. Without this, dragging across the
       bar selects their labels and Blocksy's `body ::selection` paints them
       with --theme-palette-color-1 (mint #4ECCA3), which reads as a styling
       bug rather than a selection. */
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.gfi-nav__trigger:hover,
.gfi-nav__trigger:focus-visible,
.gfi-nav__item.is-open > .gfi-nav__trigger {
    color: var(--nav-text-active) !important;
}

.gfi-nav__chevron {
    flex: 0 0 auto;
    transition: transform 0.2s ease;
}

.gfi-nav__item.is-open > .gfi-nav__trigger .gfi-nav__chevron {
    transform: rotate(180deg);
}

/* ---------------------------------------------------------------- panel */

/* Panels are centred on their trigger, then nudged back inside the viewport by
   JS when the wide ones (the Resources panel is ~670px) would overhang. The
   shift is applied as a custom property so the notch can be moved by the same
   amount in the opposite direction and keep pointing at the trigger. */
.gfi-nav__panel {
    --nav-panel-shift: 0px;

    position: absolute;
    top: calc(100% + 9px);
    left: 50%;
    transform: translateX(calc(-50% + var(--nav-panel-shift))) translateY(-6px);
    z-index: 20;
    max-width: calc(100vw - 32px);
    background: #fff;
    border-radius: 16px;
    box-shadow: var(--nav-panel-shadow);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.16s ease, transform 0.16s ease;
}

.gfi-nav__panel[hidden] {
    display: none;
}

.gfi-nav__item.is-open > .gfi-nav__panel {
    opacity: 1;
    transform: translateX(calc(-50% + var(--nav-panel-shift))) translateY(0);
    pointer-events: auto;
}

/* The upward notch that points at the trigger. */
.gfi-nav__panel::before {
    content: "";
    position: absolute;
    top: -6px;
    left: calc(50% - var(--nav-panel-shift));
    width: 20px;
    height: 20px;
    margin-left: -10px;
    background: #fff;
    border-radius: 4px;
    transform: rotate(45deg);
}

/* Figma: background 738x379 around 663x318 of content -> 37.5px horizontal,
   ~30px vertical. Column gap is 40 on the For Businesses / For Individuals
   panels but 23 on Resources, where the promoted blog column sits closer. */
.gfi-nav__panel-inner {
    position: relative;
    display: flex;
    gap: 40px;
    padding: 32px 38px;
}

.gfi-nav__panel-inner--feature {
    gap: 23px;
}

.gfi-nav__col {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 246px;
}

.gfi-nav__col--plain {
    min-width: 200px;
}

.gfi-nav__col-title {
    margin: 0 !important;
    color: var(--nav-panel-label) !important;
    font-family: var(--gfi-font-body) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 18px !important;
}

.gfi-nav__col-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gfi-nav__col-list > li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
    font-size: inherit !important;
}

.gfi-nav__link {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    text-decoration: none;
}

.gfi-nav__chip {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    margin-top: 2px;
    background: var(--nav-chip);
    border-radius: 8px;
}

.gfi-nav__link-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.gfi-nav__link-label {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    color: var(--nav-panel-title) !important;
    font-family: var(--gfi-font-body) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 24px !important;
    transition: color 0.15s ease;
}

.gfi-nav__link-desc {
    color: var(--nav-panel-desc) !important;
    font-family: var(--gfi-font-body) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 21px !important;
}

.gfi-nav__link.is-highlight .gfi-nav__link-label,
.gfi-nav__link:hover .gfi-nav__link-label,
.gfi-nav__link:focus-visible .gfi-nav__link-label {
    color: var(--nav-highlight) !important;
}

.gfi-nav__link-arrow {
    flex: 0 0 auto;
}

/* Plain link column ("Industry Solutions"): no chip, no description. */
.gfi-nav__col--plain .gfi-nav__link {
    gap: 0;
}

.gfi-nav__col--plain .gfi-nav__link-label {
    color: var(--nav-panel-plain) !important;
}

.gfi-nav__col--plain .gfi-nav__link:hover .gfi-nav__link-label,
.gfi-nav__col--plain .gfi-nav__link:focus-visible .gfi-nav__link-label {
    color: var(--nav-highlight) !important;
}

/* ------------------------------------------------- feature (blog) column */

.gfi-nav__feature {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 303px;
    flex: 0 0 auto;
}

.gfi-nav__feature-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 24px;
}

.gfi-nav__see-all {
    display: inline-flex;
    align-items: center;
    gap: 0;
    color: #333 !important;
    font-family: var(--gfi-font-body) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 18px !important;
    text-decoration: none;
    white-space: nowrap;
}

.gfi-nav__feature-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-decoration: none;
}

.gfi-nav__feature-media {
    display: block;
    margin: 12px 24px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--nav-chip);
    aspect-ratio: 243 / 112;
}

.gfi-nav__feature-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gfi-nav__feature-title {
    display: block;
    padding: 0 24px;
    color: var(--nav-panel-title) !important;
    font-family: var(--gfi-font-body) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 24px !important;
}

.gfi-nav__feature-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
}

.gfi-nav__feature-list > li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
    font-size: inherit !important;
}

.gfi-nav__feature-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 6px 24px;
    color: var(--nav-panel-desc) !important;
    font-family: var(--gfi-font-body) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 21px !important;
    text-decoration: none;
}

.gfi-nav__feature-item .gfi-nav__chip {
    width: 28px;
    height: 28px;
    margin-top: 0;
}

.gfi-nav__feature-item:hover,
.gfi-nav__feature-item:focus-visible,
.gfi-nav__feature-card:hover .gfi-nav__feature-title {
    color: var(--nav-highlight) !important;
}

/* ------------------------------------------------------------------ cta */

.gfi-nav__actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

.gfi-nav__signup {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 20px;
    border: 1.5px solid #0f7a63;
    border-radius: 100px;
    background: transparent;
    color: #0f7a63 !important;
    font-family: var(--gfi-font-body) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 18px !important;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.gfi-nav__signup:hover,
.gfi-nav__signup:focus-visible {
    background: #effaf6;
    color: #0c6350 !important;
}

/* A logged-in job seeker gets the account avatar instead of "Sign In". The
   `has-account` class is added by the avatar injector in functions.php at the
   moment it mounts into .gfi-nav__actions, so the button can never be hidden
   on a visitor who has no avatar to replace it. Covers the drawer copy too. */
.gfi-nav.has-account .gfi-nav__cta,
.gfi-nav.has-account .gfi-nav__signup {
    display: none;
}

/* Figma 375:4705 - "Button - Request Demo" is a fixed 176x42 frame, padding
   12/24, holding a 60x18 "Sign In" label in Inter 700 18/18. Left to size
   itself the button collapses to about 108px, which reads as a smaller
   control than the design even though the type is identical. min-width rather
   than width so a longer or translated label can still grow. */
.gfi-nav__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 176px;
    padding: 12px 24px;
    border: 0;
    border-radius: 100px;
    background: var(--nav-cta-bg) !important;
    color: var(--nav-cta-text) !important;
    font-family: var(--gfi-font-body) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 18px !important;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s ease;
}

.gfi-nav__cta:hover,
.gfi-nav__cta:focus-visible {
    background: #0c6350 !important;
    color: var(--nav-cta-text) !important;
}

/* -------------------------------------------------------------- burger */

.gfi-nav__burger {
    display: none;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--nav-text);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.gfi-nav__burger-bars,
.gfi-nav__burger-bars::before,
.gfi-nav__burger-bars::after {
    display: block;
    width: 22px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.gfi-nav__burger-bars {
    position: relative;
    margin: 0 auto;
}

.gfi-nav__burger-bars::before,
.gfi-nav__burger-bars::after {
    content: "";
    position: absolute;
    left: 0;
}

.gfi-nav__burger-bars::before { top: -7px; }
.gfi-nav__burger-bars::after  { top: 7px; }

.gfi-nav__burger[aria-expanded="true"] .gfi-nav__burger-bars {
    background: transparent;
}

.gfi-nav__burger[aria-expanded="true"] .gfi-nav__burger-bars::before {
    transform: translateY(7px) rotate(45deg);
}

.gfi-nav__burger[aria-expanded="true"] .gfi-nav__burger-bars::after {
    transform: translateY(-7px) rotate(-45deg);
}

/* -------------------------------------------------------------- drawer */

.gfi-nav__drawer {
    display: none;
}

.gfi-nav__scrim {
    display: none;
}

/* --------------------------------------------------------- breakpoints */

/* Panels are up to 738px wide and the row needs room for logo + CTA; below
   this the top-level row no longer fits, so switch to the drawer. */
@media (max-width: 1023px) {
    .gfi-nav__nav,
    .gfi-nav__actions {
        display: none;
    }

    /* ...but a signed-in visitor still needs their account menu on mobile.
       The CTA inside is already hidden by the .has-account rule above, so
       this shows the avatar alone. */
    .gfi-nav.has-account .gfi-nav__actions {
        display: flex;
        margin-left: auto;
    }

    .gfi-nav__burger {
        display: block;
        margin-left: auto;
    }

    .gfi-nav.has-account .gfi-nav__burger {
        margin-left: 4px;
    }

    .gfi-nav__inner {
        gap: 12px;
        min-height: 64px;
    }

    .gfi-nav__brand-mark {
        width: 44px;
        height: 44px;
    }

    .gfi-nav__drawer {
        display: block;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 30;
        max-height: calc(100vh - 64px);
        overflow-y: auto;
        padding: 8px var(--nav-gutter) 24px;
        background: #fff;
        border-top: 1px solid var(--nav-divider);
        box-shadow: var(--nav-panel-shadow);
    }

    .gfi-nav__drawer[hidden] {
        display: none;
    }

    .gfi-nav__scrim {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 10;
        background: rgba(17, 27, 41, 0.35);
    }

    .gfi-nav__scrim[hidden] {
        display: none;
    }

    .gfi-nav__drawer-list {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .gfi-nav__drawer-list > li {
        margin: 0 !important;
        padding: 0 !important;
        list-style: none;
        font-size: inherit !important;
        border-bottom: 1px solid var(--nav-divider);
    }

    .gfi-nav__drawer-trigger {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        width: 100%;
        padding: 16px 0;
        border: 0;
        background: none;
        color: var(--nav-text) !important;
        font-family: var(--gfi-font-body) !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        line-height: 24px !important;
        text-align: left;
        text-decoration: none;
        cursor: pointer;
        -webkit-user-select: none;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
    }

    .gfi-nav__drawer-trigger[aria-expanded="true"] {
        color: var(--nav-text-active) !important;
    }

    .gfi-nav__drawer-trigger[aria-expanded="true"] .gfi-nav__chevron {
        transform: rotate(180deg);
    }

    .gfi-nav__drawer-sub {
        padding: 0 0 16px;
    }

    .gfi-nav__drawer-sub[hidden] {
        display: none;
    }

    .gfi-nav__drawer-sub .gfi-nav__col-title {
        margin: 8px 0 12px !important;
    }

    .gfi-nav__drawer-sub-list {
        display: flex;
        flex-direction: column;
        gap: 16px;
        margin: 0 0 8px;
        padding: 0;
        list-style: none;
    }

    .gfi-nav__drawer-sub-list > li {
        margin: 0 !important;
        padding: 0 !important;
        list-style: none;
        border: 0;
        font-size: inherit !important;
    }

    .gfi-nav__drawer-sub-list a {
        display: flex;
        flex-direction: column;
        gap: 2px;
        text-decoration: none;
    }

    .gfi-nav__signup--drawer,
    .gfi-nav__cta--drawer {
        display: flex;
        width: 100%;
        min-width: 0;
        margin-top: 12px;
    }

    .gfi-nav__cta--drawer {
        margin-top: 8px;
    }
}

@media (min-width: 1024px) {
    .gfi-nav__signup--drawer,
    .gfi-nav__cta--drawer {
        display: none;
    }
}

/* Panels are anchored to their trigger, but the widest one (738px) would
   overflow a narrow desktop viewport — pin those to the container instead. */
@media (min-width: 1024px) and (max-width: 1279px) {
    .gfi-nav__panel-inner {
        gap: 24px;
        padding: 24px 28px;
    }

    .gfi-nav__col {
        min-width: 220px;
    }

    .gfi-nav__feature {
        width: 260px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gfi-nav__panel,
    .gfi-nav__chevron,
    .gfi-nav__burger-bars,
    .gfi-nav__burger-bars::before,
    .gfi-nav__burger-bars::after {
        transition: none;
    }
}

/* ------------------------------------------------------------------ signup modal
   Figma Homepage Redesign 472:1918 — "What is your primary goal?"
   Presented as a dialog from the navbar Sign up control.
   ------------------------------------------------------------------ */

.gfi-signup-modal {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.gfi-signup-modal[hidden] {
    display: none;
}

.gfi-signup-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(11, 44, 36, 0.42);
}

.gfi-signup-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(1040px, 100%);
    max-height: calc(100vh - 48px);
    overflow: auto;
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(11, 44, 36, 0.18);
    outline: none;
}

.gfi-signup-modal__deco {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    opacity: 0.72;
    user-select: none;
}

.gfi-signup-modal__deco--left {
    left: -220px;
    top: -70px;
    width: 520px;
    height: auto;
    transform: scaleX(-1);
}

.gfi-signup-modal__deco--right {
    right: -200px;
    top: 8px;
    width: 480px;
    height: auto;
}

.gfi-signup-modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #4b5563;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

.gfi-signup-modal__close:hover,
.gfi-signup-modal__close:focus-visible {
    background: #f3f4f6;
    color: #0b2c24;
}

.gfi-signup-modal__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 48px 40px 40px;
    max-height: calc(100vh - 48px);
    overflow: auto;
}

.gfi-signup-modal__title {
    margin: 0 0 16px !important;
    font-family: 'Louize', var(--gfi-font-heading, serif) !important;
    font-size: clamp(32px, 4.2vw, 56px) !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: -0.02em !important;
    color: #181818 !important;
    text-align: center !important;
}

.gfi-signup-modal__title span {
    color: #2f8f7b;
}

.gfi-signup-modal__sub {
    margin: 0 0 32px !important;
    font-family: var(--gfi-font-body, Inter, sans-serif) !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 1.625 !important;
    color: #4b5563 !important;
    text-align: center !important;
}

.gfi-signup-modal__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 142px));
    gap: 14px;
    justify-content: center;
    width: 100%;
    max-width: 610px;
    margin-bottom: 32px;
}

.gfi-signup-modal__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 187px;
    padding: 21px 16px 18px !important;
    border: 0.86px solid #e5e7eb !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    cursor: pointer;
    text-align: center;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.gfi-signup-modal__card:hover,
.gfi-signup-modal__card:focus-visible {
    border-color: #c9eee5;
}

.gfi-signup-modal__card[aria-pressed="true"] {
    border-color: #2f8f7b !important;
    background: #f6fbf9 !important;
    box-shadow: 0 0 0 1px #2f8f7b !important;
}

.gfi-signup-modal__icon {
    display: block;
    width: 41px;
    height: 41px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: #e6f4ed;
}

.gfi-signup-modal__card-title {
    display: block;
    width: 100%;
    padding-bottom: 11px;
    margin-bottom: 4px;
    border-bottom: 0.86px solid #f3f4f6;
    font-family: var(--gfi-font-body, Inter, sans-serif) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    color: #0b2c24 !important;
}

.gfi-signup-modal__card-desc {
    display: block;
    font-family: var(--gfi-font-body, Inter, sans-serif) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1.43 !important;
    color: #6b7280 !important;
}

.gfi-signup-modal__next {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 14px 36px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: #2f8f7b !important;
    color: #ffffff !important;
    font-family: var(--gfi-font-body, Inter, sans-serif) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    cursor: pointer;
}

.gfi-signup-modal__next img {
    display: block;
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.gfi-signup-modal__next:hover,
.gfi-signup-modal__next:focus-visible {
    background: #267463 !important;
}

.gfi-signup-modal__next:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

body.gfi-signup-modal-open {
    overflow: hidden;
}

@media (max-width: 720px) {
    .gfi-signup-modal {
        padding: 12px;
    }

    .gfi-signup-modal__dialog {
        max-height: calc(100vh - 24px);
        border-radius: 12px;
    }

    .gfi-signup-modal__inner {
        padding: 40px 20px 28px;
    }

    .gfi-signup-modal__deco {
        display: none;
    }

    .gfi-signup-modal__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: none;
    }

    .gfi-signup-modal__card {
        min-height: 168px;
    }
}