/**
 * "Join as Educator" landing page and signup wizard.
 *
 * Figma section 1322-8523. Loaded after job-seeker-portal/js-landing-styles.css,
 * which owns the shared .gfi-lp-* shell (page, hero, form card, input, submit
 * button, notice, success card); this file is only what is specific to the
 * educator flow.
 *
 * Every value here resolves to a --gfi-* token. Figma's off-grid measurements
 * are snapped to the nearest step on the 8px scale, as the design system
 * requires - e.g. the 20px card gap becomes --gfi-space-3 (24px) and the 13px
 * proof-card gap becomes --gfi-space-2 (16px).
 */


/* ========================================================================
   0. Clearing the site header
   ======================================================================== */

/*
 * The site navbar is position:absolute and sits on top of #main, so a page
 * that draws its own hero has to leave room for it or the first heading
 * renders underneath. Same treatment as the employer landing page, which
 * shares this shell.
 */

/*
 * Body-class note: WordPress builds the page-template body class by stripping
 * the directory separator, so a template in a subdirectory becomes
 * `page-template-educator-portaltemplate-educator-landing-php` - the spelling
 * with a hyphen between "portal" and "template" matches nothing. The
 * basename-derived class below is the readable one WordPress also emits. This
 * install adds no `page-<slug>` class at all, so the wrapper's own
 * `.gfi-edu-page` is what everything here actually hangs off.
 */

/*
 * Keep the `hidden` attribute authoritative.
 *
 * The UA sheet's `[hidden] { display: none }` is an author-beatable default:
 * any rule here that gives a block its own `display` silently un-hides it. The
 * wizard leans on `hidden` for every step, the thank-you screen and each
 * collapsed accordion panel, and both `.gfi-edu-done` and
 * `.gfi-edu-accordion__panel` need `display: flex` when they ARE shown - so
 * they were rendering permanently open, stacked under the live step.
 *
 * One guard, rather than remembering this at every call site. Elements the
 * script reveals have the attribute removed, so the rule stops matching them.
 */
.gfi-edu-page [hidden] {
    display: none !important;
}

.gfi-edu-page {
    --gfi-edu-header-offset: var(--gfi-space-10);
}

.gfi-lp-page.gfi-edu-page {
    padding-top: var(--gfi-edu-header-offset, var(--gfi-space-10));
}

/* Blocksy prints the page title above the template's own content, which would
   repeat the hero headline a second time. */
.page-template-template-educator-landing .entry-title,
.page-template-template-educator-landing .entry-header,
.page-template-template-educator-login .entry-title,
.page-template-template-educator-login .entry-header {
    display: none !important;
}

/* Pad the landing wrapper itself rather than #main, so the offset survives
   Blocksy or Elementor overriding #main's padding. */
.page-template-template-educator-landing #main,
.page-template-template-educator-login #main {
    padding-top: 0 !important;
    background: var(--gfi-color-white) !important;
}

.page-template-template-educator-landing .gfi-nav,
.page-template-template-educator-login .gfi-nav {
    background: var(--gfi-color-white);
}


/* ========================================================================
   1. Hero - left column
   ======================================================================== */

.gfi-edu-hero-headline {
    max-width: 38ch;
}

.gfi-edu-headline-accent {
    color: var(--gfi-color-brand-accent);
}

.gfi-edu-benefits {
    list-style: none;
    margin: var(--gfi-space-4) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--gfi-space-1);
}

.gfi-edu-benefit {
    display: flex;
    align-items: flex-start;
    gap: var(--gfi-space-1);
    margin: 0 !important;
}

.gfi-edu-benefit__icon {
    flex: 0 0 auto;
    margin-top: var(--gfi-space-0-5);
}

.gfi-edu-benefit__text {
    font-family: var(--gfi-font-body);
    font-size: var(--gfi-font-body-xl);
    line-height: var(--gfi-lh-body-m);
    font-weight: var(--gfi-fw-medium);
    color: var(--gfi-color-text);
}

/* -- Proof cards ------------------------------------------------------- */

.gfi-edu-proof {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gfi-space-2);
    margin-top: var(--gfi-space-5);
}

.gfi-edu-proof__card {
    flex: 1 1 232px;
    min-height: 126px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gfi-space-2);
    padding: var(--gfi-space-2) var(--gfi-space-3);
    background: var(--gfi-color-surface);
    border: 1px solid var(--gfi-color-border-strong);
    border-radius: var(--gfi-radius-lg);
    box-shadow: var(--gfi-shadow-xs);
}

.gfi-edu-proof__copy {
    display: flex;
    flex-direction: column;
}

.gfi-edu-proof__value {
    margin: 0 !important;
    font-family: var(--gfi-font-body) !important;
    font-size: var(--gfi-font-body-m) !important;
    line-height: var(--gfi-lh-body-m) !important;
    font-weight: var(--gfi-fw-medium) !important;
    color: var(--gfi-color-text) !important;
}

.gfi-edu-proof__label {
    margin: 0 !important;
    max-width: 14ch;
    font-family: var(--gfi-font-body) !important;
    font-size: var(--gfi-font-body-m) !important;
    line-height: var(--gfi-lh-body-m) !important;
    font-weight: var(--gfi-fw-regular) !important;
    color: var(--gfi-color-text-muted) !important;
}

.gfi-edu-proof__art--wide {
    flex: 0 0 auto;
    width: 121px;
    height: 47px;
    object-fit: contain;
}

.gfi-edu-proof__art--pair {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

.gfi-edu-avatar {
    width: 33px;
    height: 33px;
    border-radius: var(--gfi-radius-pill);
    border: 1px solid var(--gfi-color-mid-01);
    background: var(--gfi-color-surface);
    object-fit: cover;
}

/* Figma overlaps the cluster by a third of a face (11px). Snapped to the
   grid's 8px step, as the employer portal's identical cluster already is. */
.gfi-edu-proof__art--pair > * + * {
    margin-left: calc(var(--gfi-space-1) * -1);
}

.gfi-edu-avatar--more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-color: transparent;
    background: var(--gfi-color-surface-subtle);
    color: var(--gfi-color-base-04);
    font-family: var(--gfi-font-body);
    font-size: var(--gfi-font-caption);
    line-height: var(--gfi-lh-caption);
}

/* -- Partner logo strip ------------------------------------------------ */

/* The shared shell sets `margin: 0 0 … !important` on `p.gfi-lp-section-label`.
   Between two !important declarations the more specific selector wins, and
   theirs is (0,1,1) - so a plain `.gfi-edu-partners__label` (0,1,0) loses even
   with !important and even loading later. Three classes clears it outright
   rather than relying on source order to break a tie. */
.gfi-lp-page .gfi-edu-hero-left .gfi-edu-partners__label {
    margin: var(--gfi-space-5) 0 var(--gfi-space-2) !important;
}

.gfi-edu-partners {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--gfi-space-3);
    margin-top: var(--gfi-space-2);
    max-width: 533px;
}

.gfi-edu-partners__logo {
    width: 80px;
    height: 80px;
    object-fit: contain;
}


/* ========================================================================
   2. Hero - right column: testimonial and signup card
   ======================================================================== */

.gfi-edu-quote {
    margin: 0;
    padding: var(--gfi-space-3);
    background: var(--gfi-color-surface);
    border: 1px solid var(--gfi-color-border-strong);
    border-radius: var(--gfi-radius-md);
    box-shadow: var(--gfi-shadow-md);
}

.gfi-edu-quote__text {
    margin: 0 !important;
    font-family: var(--gfi-font-body) !important;
    font-size: var(--gfi-font-body-m) !important;
    line-height: var(--gfi-lh-body-m) !important;
    font-weight: var(--gfi-fw-regular) !important;
    color: var(--gfi-color-contrast-02) !important;
    border: 0;
    padding: 0;
    quotes: none;
}

.gfi-edu-quote__author {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gfi-space-1);
    margin-top: var(--gfi-space-2);
}

.gfi-edu-quote__avatar {
    width: 39px;
    height: 37px;
    border-radius: var(--gfi-radius-pill);
    object-fit: cover;
    background: var(--gfi-color-base-03);
}

.gfi-edu-quote__meta {
    display: flex;
    flex-direction: column;
    gap: var(--gfi-space-0-5);
    font-family: var(--gfi-font-body);
    font-size: var(--gfi-font-body-m);
    line-height: var(--gfi-lh-body-m);
    color: var(--gfi-color-contrast-02);
}

.gfi-edu-quote__role {
    opacity: 0.8;
}

.gfi-edu-quote-dots {
    display: flex;
    align-items: center;
    gap: var(--gfi-space-1);
    margin: var(--gfi-space-2) 0 var(--gfi-space-3);
}

.gfi-edu-quote-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--gfi-radius-pill);
    background: var(--gfi-color-base-03);
    opacity: 0.6;
}

.gfi-edu-quote-dot.is-active {
    width: 10px;
    height: 10px;
    background: var(--gfi-color-border);
    opacity: 1;
}

/* -- The signup card --------------------------------------------------- */

.gfi-edu-form-card {
    display: flex;
    flex-direction: column;
    gap: var(--gfi-space-2);
    padding: var(--gfi-space-3) var(--gfi-space-4);
    border: 1px solid var(--gfi-color-border-strong);
    border-radius: var(--gfi-radius-lg);
    box-shadow: var(--gfi-shadow-md);
}

.gfi-edu-card-title {
    margin: 0 !important;
    text-align: center;
    font-family: var(--gfi-font-heading) !important;
    font-size: var(--gfi-font-h2) !important;
    line-height: var(--gfi-lh-h2) !important;
    letter-spacing: var(--gfi-ls-heading) !important;
    font-weight: var(--gfi-fw-bold) !important;
    color: var(--gfi-color-text) !important;
}

.gfi-edu-upload-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gfi-space-1);
    width: 100%;
    padding: var(--gfi-space-2) var(--gfi-space-3);
    border: 1px solid var(--gfi-color-border-strong);
    border-radius: var(--gfi-radius-md);
    background: var(--gfi-color-cta-bg);
    color: var(--gfi-color-cta-fg);
    font-family: var(--gfi-font-body);
    font-size: var(--gfi-font-button-l);
    line-height: var(--gfi-lh-button);
    font-weight: var(--gfi-fw-medium);
    cursor: pointer;
    transition: background var(--gfi-duration-fast) var(--gfi-ease);
}

.gfi-edu-upload-btn:hover,
.gfi-edu-upload-btn:focus-visible {
    background: var(--gfi-color-cta-bg-hover);
}

.gfi-edu-upload-btn__icon {
    flex: 0 0 auto;
}

.gfi-edu-upload-name {
    margin: 0 !important;
    font-family: var(--gfi-font-body) !important;
    font-size: var(--gfi-font-body-s) !important;
    line-height: var(--gfi-lh-body-s) !important;
    color: var(--gfi-color-text-soft) !important;
}

.gfi-edu-divider {
    display: flex;
    align-items: center;
    gap: var(--gfi-space-3);
    color: var(--gfi-color-text-soft);
}

.gfi-edu-divider::before,
.gfi-edu-divider::after {
    content: '';
    flex: 1 1 0;
    height: 1px;
    background: var(--gfi-color-border-strong);
    opacity: 0.8;
}

.gfi-edu-divider__label {
    font-family: var(--gfi-font-body);
    font-size: var(--gfi-font-body-m);
    line-height: var(--gfi-lh-body-m);
}

.gfi-edu-field__label {
    display: block;
    margin-bottom: var(--gfi-space-1);
    font-family: var(--gfi-font-body);
    font-size: var(--gfi-font-body-m);
    line-height: var(--gfi-lh-body-m);
    font-weight: var(--gfi-fw-bold);
    color: var(--gfi-color-contrast-02);
}

.gfi-edu-field__required {
    color: var(--gfi-color-brand);
}

.gfi-edu-field__optional {
    font-weight: var(--gfi-fw-regular);
    color: var(--gfi-color-text-soft);
}

.gfi-edu-card-submit {
    border-radius: var(--gfi-radius-pill);
}

.gfi-edu-login-row {
    margin: 0 !important;
    text-align: center;
    font-family: var(--gfi-font-body) !important;
    font-size: var(--gfi-font-body-m) !important;
    line-height: var(--gfi-lh-body-m) !important;
    color: var(--gfi-color-text-muted) !important;
}

.gfi-edu-login-row a,
.gfi-edu-sent__accent {
    color: var(--gfi-color-brand-accent);
}

.gfi-edu-sent__resend {
    margin-top: var(--gfi-space-1);
    background: none;
    border: 0;
    padding: 0;
    color: var(--gfi-color-brand-accent);
    font-family: var(--gfi-font-body);
    font-size: var(--gfi-font-body-s);
    line-height: var(--gfi-lh-body-s);
    text-decoration: underline;
    cursor: pointer;
}


/* ========================================================================
   3. "Looking for something else?" band
   ======================================================================== */

.gfi-edu-explore {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gfi-space-4);
    /* The hero above is 1180px, not --gfi-container-max (1200px). The band has
       to sit on the same measure or its edges miss the hero's by 10px a side. */
    max-width: 1180px;
    /* Bottom margin as well as top: the footer follows immediately, and with
       none the band's border sits straight on the footer's hairline. */
    margin: var(--gfi-space-8) auto var(--gfi-space-8);
    padding: var(--gfi-space-5) var(--gfi-space-6);
    background: var(--gfi-color-surface-accent);
    border: 2px solid var(--gfi-color-brand-accent);
    border-radius: var(--gfi-radius-lg);
    box-shadow: var(--gfi-shadow-md);
}

.gfi-edu-explore__copy {
    flex: 1 1 auto;
    min-width: 0;
}

.gfi-edu-explore__title {
    margin: 0 !important;
    font-family: var(--gfi-font-body) !important;
    font-size: var(--gfi-font-h4) !important;
    line-height: var(--gfi-lh-h4) !important;
    letter-spacing: var(--gfi-ls-heading) !important;
    font-weight: var(--gfi-fw-bold) !important;
    color: var(--gfi-color-text) !important;
}

.gfi-edu-explore__sub {
    margin: var(--gfi-space-2) 0 0 !important;
    font-family: var(--gfi-font-body) !important;
    font-size: var(--gfi-font-body-xl) !important;
    line-height: var(--gfi-lh-body-xl) !important;
    color: var(--gfi-color-text-soft) !important;
}

.gfi-edu-explore__cta {
    flex: 0 0 auto;
    width: auto;
    min-width: 222px;
    border-radius: var(--gfi-radius-sm);
}


/* ========================================================================
   4. The wizard shell
   ======================================================================== */

.gfi-edu-wizard {
    position: relative;
    overflow: hidden;
    padding: var(--gfi-space-8) var(--gfi-container-pad);
    background: var(--gfi-color-surface);
}

.gfi-edu-wizard__backdrop {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.gfi-edu-wizard__backdrop-img {
    position: absolute;
    width: 893px;
    height: auto;
    opacity: 0.68;
}

.gfi-edu-wizard__backdrop-img--left {
    top: -39px;
    left: -447px;
    transform: scaleX(-1);
}

.gfi-edu-wizard__backdrop-img--right {
    top: 82px;
    right: -310px;
    width: 757px;
}

.gfi-edu-wizard__inner {
    position: relative;
    max-width: 728px;
    margin: 0 auto;
}

.gfi-edu-step--card {
    padding: var(--gfi-space-5);
    background: var(--gfi-color-surface);
    border: 1px solid var(--gfi-color-border-strong);
    border-radius: var(--gfi-radius-lg);
    box-shadow: var(--gfi-shadow-lg);
}

.gfi-edu-step--wide {
    max-width: none;
}

.gfi-edu-step__head {
    margin-bottom: var(--gfi-space-4);
}

.gfi-edu-step__eyebrow {
    margin: 0 0 var(--gfi-space-3) !important;
    text-align: center;
    text-transform: uppercase;
    font-family: var(--gfi-font-body) !important;
    font-size: var(--gfi-font-eyebrow-m) !important;
    line-height: var(--gfi-lh-eyebrow-m) !important;
    letter-spacing: var(--gfi-ls-eyebrow-m) !important;
    font-weight: var(--gfi-fw-bold) !important;
    color: var(--gfi-color-brand) !important;
}

/* Step 4's "Finish" pill (Figma node 1322-8922). */
.gfi-edu-step__badge {
    display: inline-block;
    margin: 0 0 var(--gfi-space-2) !important;
    padding: var(--gfi-space-0-5) var(--gfi-space-2);
    text-transform: uppercase;
    background: var(--gfi-color-surface-accent);
    border: 1px solid var(--gfi-color-brand);
    border-radius: var(--gfi-radius-pill);
    font-family: var(--gfi-font-body) !important;
    font-size: var(--gfi-font-caption) !important;
    line-height: var(--gfi-lh-caption) !important;
    letter-spacing: var(--gfi-ls-eyebrow-m) !important;
    font-weight: var(--gfi-fw-bold) !important;
    color: var(--gfi-color-brand-accent) !important;
}

.gfi-edu-step__title {
    margin: 0 !important;
    font-family: var(--gfi-font-heading) !important;
    font-size: var(--gfi-font-h2) !important;
    line-height: var(--gfi-lh-h2) !important;
    letter-spacing: var(--gfi-ls-heading) !important;
    font-weight: var(--gfi-fw-bold) !important;
    color: var(--gfi-color-text) !important;
}

.gfi-edu-step__title:focus {
    outline: none;
}

.gfi-edu-step__sub {
    margin: var(--gfi-space-2) 0 0 !important;
    font-family: var(--gfi-font-body) !important;
    font-size: var(--gfi-font-body-m) !important;
    line-height: var(--gfi-lh-body-m) !important;
    color: var(--gfi-color-text-soft) !important;
}

.gfi-edu-step__body {
    display: flex;
    flex-direction: column;
    gap: var(--gfi-space-3);
}

/* -- Step navigation --------------------------------------------------- */

.gfi-edu-step__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gfi-space-2);
    margin-top: var(--gfi-space-3);
    padding-top: var(--gfi-space-3);
}

.gfi-edu-back {
    display: inline-flex;
    align-items: center;
    gap: var(--gfi-space-1);
    padding: var(--gfi-space-2);
    background: none;
    border: 0;
    border-radius: var(--gfi-radius-pill);
    color: var(--gfi-color-mid-02);
    font-family: var(--gfi-font-body);
    font-size: var(--gfi-font-button-l);
    line-height: var(--gfi-lh-button);
    font-weight: var(--gfi-fw-medium);
    cursor: pointer;
}

.gfi-edu-back:hover,
.gfi-edu-back:focus-visible {
    color: var(--gfi-color-text);
}

.gfi-edu-next {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--gfi-space-1);
    width: auto;
    min-width: 220px;
    min-height: 56px;
    border-radius: var(--gfi-radius-pill);
}


/* ========================================================================
   5. Fields
   ======================================================================== */

.gfi-edu-field {
    display: flex;
    flex-direction: column;
}

.gfi-edu-textarea {
    min-height: 110px;
    resize: vertical;
}

.gfi-edu-field__error {
    margin: var(--gfi-space-0-5) 0 0 !important;
    font-family: var(--gfi-font-body) !important;
    font-size: var(--gfi-font-body-s) !important;
    line-height: var(--gfi-lh-body-s) !important;
    color: var(--gfi-color-error) !important;
}

.gfi-lp-input.is-invalid {
    border-color: var(--gfi-color-error);
}

.gfi-edu-phone {
    display: flex;
    gap: var(--gfi-space-1);
}

/* Same specificity trap as the label above: the shell's
   `.gfi-lp-page .gfi-lp-input` is (0,2,0) and carries `width: 100% !important`,
   so a one-class override loses and the dial-code select stretches, pushing the
   number field onto its own row. */
.gfi-lp-page .gfi-edu-phone .gfi-edu-phone__code {
    flex: 0 0 148px;
    width: 148px !important;
}

.gfi-edu-phone__number {
    flex: 1 1 auto;
    min-width: 0;
}

/* -- The profile-picture dropzone -------------------------------------- */

.gfi-edu-dropzone {
    display: flex;
    align-items: center;
    gap: var(--gfi-space-2);
    width: 100%;
    padding: var(--gfi-space-2) var(--gfi-space-3);
    text-align: left;
    background: var(--gfi-color-surface-accent);
    border: 1px dashed var(--gfi-color-brand);
    border-radius: var(--gfi-radius-md);
    cursor: pointer;
}

.gfi-edu-dropzone:hover,
.gfi-edu-dropzone:focus-visible {
    border-color: var(--gfi-color-brand-accent);
}

.gfi-edu-dropzone__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border: 1px solid var(--gfi-color-accent-700);
    border-radius: var(--gfi-radius-sm);
}

.gfi-edu-dropzone__copy {
    display: flex;
    flex-direction: column;
    gap: var(--gfi-space-0-5);
}

.gfi-edu-dropzone__title {
    font-family: var(--gfi-font-body);
    font-size: var(--gfi-font-button-m);
    line-height: var(--gfi-lh-body-s);
    font-weight: var(--gfi-fw-medium);
    color: var(--gfi-color-contrast-02);
}

.gfi-edu-dropzone__hint {
    font-family: var(--gfi-font-body);
    font-size: var(--gfi-font-body-s);
    line-height: var(--gfi-lh-body-s);
    color: var(--gfi-color-mid-01);
}

/* -- Radios ------------------------------------------------------------ */

.gfi-edu-fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

.gfi-edu-fieldset__legend {
    padding: 0;
    font-family: var(--gfi-font-body);
    font-size: var(--gfi-font-h6);
    line-height: var(--gfi-lh-h6);
    letter-spacing: var(--gfi-ls-heading-sm);
    font-weight: var(--gfi-fw-bold);
    color: var(--gfi-color-contrast-02);
}

.gfi-edu-fieldset__hint {
    margin: var(--gfi-space-0-5) 0 var(--gfi-space-2) !important;
    font-family: var(--gfi-font-body) !important;
    font-size: var(--gfi-font-body-m) !important;
    line-height: var(--gfi-lh-body-m) !important;
    color: var(--gfi-color-text-soft) !important;
}

.gfi-edu-fieldset__status {
    margin: var(--gfi-space-1) 0 0 !important;
    font-family: var(--gfi-font-body) !important;
    font-size: var(--gfi-font-body-s) !important;
    line-height: var(--gfi-lh-body-s) !important;
    color: var(--gfi-color-text-soft) !important;
}

.gfi-edu-radios {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gfi-space-3);
    margin-top: var(--gfi-space-1);
}

.gfi-edu-radio {
    display: inline-flex;
    align-items: center;
    gap: var(--gfi-space-1);
    cursor: pointer;
}

.gfi-edu-radio__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.gfi-edu-radio__mark {
    display: inline-block;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border: 2px solid var(--gfi-color-border-strong);
    border-radius: var(--gfi-radius-pill);
    background: var(--gfi-color-surface);
}

.gfi-edu-radio__input:checked + .gfi-edu-radio__mark {
    border-color: var(--gfi-color-brand-accent);
    /* The inner dot, drawn with a ring rather than a pseudo-element so the
       mark stays a single box for layout. */
    box-shadow: inset 0 0 0 4px var(--gfi-color-surface),
                inset 0 0 0 24px var(--gfi-color-brand-accent);
}

.gfi-edu-radio__input:focus-visible + .gfi-edu-radio__mark {
    outline: 2px solid var(--gfi-color-focus-ring);
    outline-offset: 2px;
}

.gfi-edu-radio__text {
    font-family: var(--gfi-font-body);
    font-size: var(--gfi-font-body-m);
    line-height: var(--gfi-lh-body-m);
    color: var(--gfi-color-text);
}

/* -- Chips ------------------------------------------------------------- */

.gfi-edu-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gfi-space-1);
}

.gfi-edu-chip {
    display: inline-flex;
    cursor: pointer;
}

.gfi-edu-chip__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.gfi-edu-chip__text {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: var(--gfi-space-1) var(--gfi-space-2);
    border: 1px solid var(--gfi-color-border);
    border-radius: var(--gfi-radius-pill);
    background: var(--gfi-color-surface);
    font-family: var(--gfi-font-body);
    font-size: var(--gfi-font-body-m);
    line-height: var(--gfi-lh-body-m);
    color: var(--gfi-color-contrast-02);
    transition: border-color var(--gfi-duration-fast) var(--gfi-ease),
                background var(--gfi-duration-fast) var(--gfi-ease);
}

.gfi-edu-chip__input:checked + .gfi-edu-chip__text {
    border-color: var(--gfi-color-brand-accent);
    background: var(--gfi-color-surface-accent);
    color: var(--gfi-color-brand-accent);
}

.gfi-edu-chip__input:focus-visible + .gfi-edu-chip__text {
    outline: 2px solid var(--gfi-color-focus-ring);
    outline-offset: 2px;
}

.gfi-edu-chip.is-disabled .gfi-edu-chip__text {
    opacity: 0.5;
    cursor: not-allowed;
}


/* ========================================================================
   6. The course repeater
   ======================================================================== */

.gfi-edu-courses {
    display: flex;
    flex-direction: column;
    gap: var(--gfi-space-2);
}

.gfi-edu-courses__legend {
    margin: 0 !important;
    font-family: var(--gfi-font-body) !important;
    font-size: var(--gfi-font-body-m) !important;
    line-height: var(--gfi-lh-body-m) !important;
    font-weight: var(--gfi-fw-bold) !important;
    color: var(--gfi-color-contrast-02) !important;
}

.gfi-edu-courses__list {
    display: flex;
    flex-direction: column;
    gap: var(--gfi-space-3);
}

.gfi-edu-course {
    display: flex;
    flex-direction: column;
    gap: var(--gfi-space-2);
}

.gfi-edu-course__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gfi-space-2);
}

.gfi-edu-course__name {
    font-family: var(--gfi-font-body);
    font-size: var(--gfi-font-body-m);
    line-height: var(--gfi-lh-body-m);
    font-weight: var(--gfi-fw-medium);
    color: var(--gfi-color-contrast-02);
}

.gfi-edu-course__remove {
    background: none;
    border: 0;
    padding: 0;
    color: var(--gfi-color-error);
    font-family: var(--gfi-font-body);
    font-size: var(--gfi-font-button-m);
    line-height: var(--gfi-lh-button);
    font-weight: var(--gfi-fw-medium);
    cursor: pointer;
}

.gfi-edu-courses__add {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    background: var(--gfi-color-surface);
    border: 1px solid var(--gfi-color-border-strong);
    border-radius: var(--gfi-radius-md);
    color: var(--gfi-color-brand-accent);
    font-family: var(--gfi-font-body);
    font-size: var(--gfi-font-button-m);
    line-height: var(--gfi-lh-button);
    font-weight: var(--gfi-fw-medium);
    cursor: pointer;
}

.gfi-edu-courses__add:hover,
.gfi-edu-courses__add:focus-visible {
    border-color: var(--gfi-color-brand-accent);
}

.gfi-edu-topics {
    display: flex;
    flex-direction: column;
    gap: var(--gfi-space-1);
}

.gfi-edu-topic {
    display: flex;
    align-items: center;
    gap: var(--gfi-space-2);
}

.gfi-edu-topic__input {
    flex: 1 1 auto;
    min-width: 0;
}

.gfi-edu-topic__remove {
    flex: 0 0 auto;
    display: inline-flex;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
}

.gfi-edu-topic-add {
    display: inline-flex;
    align-items: center;
    gap: var(--gfi-space-1);
    align-self: flex-start;
    margin-top: var(--gfi-space-1);
    padding: 0;
    background: none;
    border: 0;
    color: var(--gfi-color-brand-accent);
    font-family: var(--gfi-font-body);
    font-size: var(--gfi-font-button-m);
    line-height: var(--gfi-lh-button);
    font-weight: var(--gfi-fw-bold);
    cursor: pointer;
}


/* ========================================================================
   7. Step 3 - course accordions
   ======================================================================== */

.gfi-edu-accordions {
    display: flex;
    flex-direction: column;
}

.gfi-edu-accordion {
    border-bottom: 1px solid var(--gfi-color-black);
}

.gfi-edu-accordion__heading {
    margin: 0 !important;
}

.gfi-edu-accordion__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: var(--gfi-space-2);
    padding: var(--gfi-space-2) 0;
    background: none;
    border: 0;
    text-align: left;
    font-family: var(--gfi-font-body);
    font-size: var(--gfi-font-h6);
    line-height: var(--gfi-lh-h6);
    letter-spacing: var(--gfi-ls-heading-sm);
    font-weight: var(--gfi-fw-bold);
    color: var(--gfi-color-black);
    cursor: pointer;
}

.gfi-edu-accordion__chevron {
    flex: 0 0 auto;
    transition: transform var(--gfi-duration-fast) var(--gfi-ease);
}

.gfi-edu-accordion.is-open .gfi-edu-accordion__chevron {
    transform: rotate(180deg);
}

.gfi-edu-accordion__panel {
    display: flex;
    flex-direction: column;
    gap: var(--gfi-space-2);
    padding-bottom: var(--gfi-space-3);
}


/* ========================================================================
   8. Step 4 - review cards
   ======================================================================== */

.gfi-edu-review {
    padding: var(--gfi-space-3);
    border: 1px solid var(--gfi-color-border);
    border-radius: var(--gfi-radius-md);
    box-shadow: var(--gfi-shadow-xs);
}

.gfi-edu-review__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gfi-space-2);
    margin-bottom: var(--gfi-space-2);
}

.gfi-edu-review__title {
    margin: 0 !important;
    font-family: var(--gfi-font-body) !important;
    font-size: var(--gfi-font-body-m) !important;
    line-height: var(--gfi-lh-body-m) !important;
    letter-spacing: var(--gfi-ls-heading-sm) !important;
    font-weight: var(--gfi-fw-bold) !important;
    color: var(--gfi-color-contrast-02) !important;
}

.gfi-edu-review__edit {
    display: inline-flex;
    align-items: center;
    gap: var(--gfi-space-1);
    padding: var(--gfi-space-0-5) var(--gfi-space-2);
    background: var(--gfi-color-primary-100);
    border: 1px solid var(--gfi-color-brand);
    border-radius: var(--gfi-radius-sm);
    color: var(--gfi-color-brand-accent);
    font-family: var(--gfi-font-body);
    font-size: var(--gfi-font-button-m);
    line-height: var(--gfi-lh-body-m);
    font-weight: var(--gfi-fw-medium);
    cursor: pointer;
}

/* The pencil, composed from Figma's two shapes inside its 20x20 box. The
   percentages are the insets the design gives each one. */
.gfi-edu-icon-edit {
    position: relative;
    flex: 0 0 auto;
    display: inline-block;
    width: 20px;
    height: 20px;
}

.gfi-edu-icon-edit__body {
    position: absolute;
    left: 12.5%;
    top: 25.79%;
    width: 61.71%;
    height: 61.71%;
}

.gfi-edu-icon-edit__tip {
    position: absolute;
    left: 12.5%;
    top: 12.49%;
    width: 24.47%;
    height: 24.47%;
}

.gfi-edu-review__body {
    display: flex;
    align-items: flex-start;
    gap: var(--gfi-space-4);
}

.gfi-edu-review__body--stack {
    flex-direction: column;
    gap: var(--gfi-space-2);
}

.gfi-edu-review__avatar {
    position: relative;
    flex: 0 0 auto;
    width: 80px;
    height: 80px;
}

.gfi-edu-review__avatar img {
    width: 80px;
    height: 80px;
    border-radius: var(--gfi-radius-pill);
    object-fit: cover;
}

.gfi-edu-review__avatar-edit {
    position: absolute;
    right: -12px;
    bottom: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: var(--gfi-color-brand);
    border: 1px solid var(--gfi-color-white);
    border-radius: var(--gfi-radius-pill);
    cursor: pointer;
}

.gfi-edu-review__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gfi-space-1) var(--gfi-space-4);
    margin: 0;
    flex: 1 1 auto;
}

.gfi-edu-review__pair--wide {
    grid-column: 1 / -1;
}

.gfi-edu-review__grid dt {
    margin: 0;
    font-family: var(--gfi-font-body);
    font-size: var(--gfi-font-button-m);
    line-height: var(--gfi-lh-body-m);
    font-weight: var(--gfi-fw-bold);
    color: var(--gfi-color-black);
}

.gfi-edu-review__grid dd {
    margin: 0;
    font-family: var(--gfi-font-body);
    font-size: var(--gfi-font-button-m);
    line-height: var(--gfi-lh-body-m);
    color: var(--gfi-color-contrast-01);
    overflow-wrap: anywhere;
}

.gfi-edu-review__block {
    display: flex;
    flex-direction: column;
    gap: var(--gfi-space-1);
    width: 100%;
}

.gfi-edu-review__label {
    margin: 0 !important;
    font-family: var(--gfi-font-body) !important;
    font-size: var(--gfi-font-button-m) !important;
    line-height: var(--gfi-lh-body-m) !important;
    font-weight: var(--gfi-fw-bold) !important;
    color: var(--gfi-color-black) !important;
}

.gfi-edu-review__value {
    margin: 0 !important;
    font-family: var(--gfi-font-body) !important;
    font-size: var(--gfi-font-button-m) !important;
    line-height: var(--gfi-lh-body-m) !important;
    color: var(--gfi-color-contrast-01) !important;
    overflow-wrap: anywhere;
}

.gfi-edu-review__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gfi-space-1);
}

.gfi-edu-review__chip {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: var(--gfi-space-1) var(--gfi-space-2);
    border: 1px solid var(--gfi-color-border);
    border-radius: var(--gfi-radius-pill);
    font-family: var(--gfi-font-body);
    font-size: var(--gfi-font-body-m);
    line-height: var(--gfi-lh-body-m);
    color: var(--gfi-color-contrast-02);
}


/* ========================================================================
   9. Step 5 - the booking embed
   ======================================================================== */

.gfi-edu-booking {
    max-width: 920px;
    margin: 0 auto;
    background: var(--gfi-color-surface);
    border: 1px solid var(--gfi-color-border-strong);
    border-radius: var(--gfi-radius-lg);
    box-shadow: var(--gfi-shadow-lg);
    overflow: hidden;
}

.gfi-edu-booking iframe {
    display: block;
    width: 100%;
    /* A sane starting height; the Cal.com embed posts its own and the script
       grows the frame from there. */
    height: 680px;
    border: 0;
}

.gfi-edu-booking--empty,
.gfi-edu-booking__fallback {
    padding: var(--gfi-space-4);
    text-align: center;
}

.gfi-edu-booking__fallback {
    margin: 0 !important;
    font-family: var(--gfi-font-body) !important;
    font-size: var(--gfi-font-body-m) !important;
    line-height: var(--gfi-lh-body-m) !important;
    color: var(--gfi-color-text-soft) !important;
}


/* ========================================================================
   10. Completion screen
   ======================================================================== */

.gfi-edu-done {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--gfi-space-2);
}

.gfi-edu-done__art {
    width: 385px;
    max-width: 100%;
    height: auto;
}

.gfi-edu-done__title {
    margin: var(--gfi-space-3) 0 0 !important;
    font-family: var(--gfi-font-body) !important;
    font-size: var(--gfi-font-display-l) !important;
    line-height: var(--gfi-lh-display-l) !important;
    letter-spacing: var(--gfi-ls-heading) !important;
    font-weight: var(--gfi-fw-bold) !important;
    color: var(--gfi-color-text) !important;
}

.gfi-edu-done__sub {
    margin: 0 !important;
    font-family: var(--gfi-font-body) !important;
    font-size: var(--gfi-font-body-m) !important;
    line-height: var(--gfi-lh-body-l) !important;
    color: var(--gfi-color-text-muted) !important;
}

.gfi-edu-done__cta {
    width: auto;
    min-width: 217px;
    margin-top: var(--gfi-space-3);
    border-radius: var(--gfi-radius-sm);
}


/* ========================================================================
   11. Responsive
   ======================================================================== */

@media (max-width: 1024px) {
    .gfi-edu-explore {
        flex-direction: column;
        align-items: flex-start;
        padding: var(--gfi-space-4);
    }

    .gfi-edu-explore__cta {
        width: 100%;
    }

    .gfi-edu-wizard__backdrop-img {
        display: none;
    }

    .gfi-edu-step--card {
        padding: var(--gfi-space-4);
    }
}

@media (max-width: 767px) {
    .gfi-edu-wizard {
        padding: var(--gfi-space-5) var(--gfi-container-pad);
    }

    .gfi-edu-step--card {
        padding: var(--gfi-space-3);
    }

    .gfi-edu-form-card {
        padding: var(--gfi-space-3);
    }

    .gfi-edu-proof__card {
        flex-basis: 100%;
    }

    .gfi-edu-partners {
        justify-content: flex-start;
        gap: var(--gfi-space-2);
    }

    .gfi-edu-phone {
        flex-direction: column;
    }

    .gfi-lp-page .gfi-edu-phone .gfi-edu-phone__code {
        flex: 0 0 auto;
        width: 100% !important;
    }

    .gfi-edu-review__body {
        flex-direction: column;
    }

    .gfi-edu-review__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .gfi-edu-step__nav {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .gfi-edu-next {
        width: 100%;
        min-width: 0;
    }

    .gfi-edu-done__art {
        width: 100%;
    }
}