/*
 * Soofos Teach on Soofos page — v3.
 *
 * Page-scoped stylesheet for the Gutenberg rebuild of
 * `/teach-on-soofos/`. All visual values use the existing
 * `--*` / `--soofos-*` token set. Selectors are namespaced under
 * `.sf-teach-page` so the rules cannot bleed into the rest of the site.
 *
 * STRUCTURAL CONVENTION (v3 fix): the classic `soofos` theme renders
 * every core `wp:group` block as
 *   <div class="wp-block-group {className}">
 *     <div class="wp-block-group__inner-container">…children…</div>
 *   </div>
 * so every grid/flex layout rule is applied to
 * `.{className} > .wp-block-group__inner-container` — the element whose
 * direct children are the actual grid/flex items. The outer classed div
 * keeps the box styling (background, border, radius, padding, shadow,
 * position). Same convention as css/plus.css. wp:columns, wp:buttons,
 * wp:image and wp:details do NOT get an inner container.
 *
 * Sections (in order):
 *   .sf-teach-hero         — navy band, H1, lead, primary CTA, footnote,
 *                            3 inline stats, right-column photo + pill
 *   .sf-teach-what         — "What you can teach" 2-col layout with 3
 *                            numbered cards
 *   .sf-teach-instructors  — 3 large instructor testimonial cards (photo
 *                            + quote + name + subject) + 3 small quote
 *                            bars (round avatar + 1-line quote + meta)
 *   .sf-teach-how          — 3 numbered steps (01 / 02 / 03)
 *   .sf-teach-earnings     — navy panel with 50% + 96% rate cards (96%
 *                            highlighted in --amber)
 *   .sf-teach-community    — 2-col card with community photo + 6-bullet
 *                            "everything you need" list
 *   .sf-teach-faq          — 7 details/summary items (first open)
 *   .sf-teach-final        — final CTA panel
 *   .sf-teach-modal        — fixed overlay shown via :target when the
 *                            page CTA opens the existing Form 4 popup
 *                            ([soofos_modal_register_instructor])
 *
 * Responsive at 390 / 768 / 1440 px. Visible focus, 44px tap targets,
 * no horizontal scroll, prefers-reduced-motion respected.
 */

.sf-teach-page,
.sf-teach-page * {
    box-sizing: border-box;
}

.sf-teach-page {
    background: var(--page);
    color: var(--body);
    font-family: var(--font);
}

/* The page root is itself a wp:group — neutralise core flow-layout
   top margins on the section children of its inner container. */
.sf-teach-page > .wp-block-group__inner-container > * {
    margin-block-start: 0;
}

.sf-teach-page :where(figure) {
    margin: 0;
}

/* Shared centered content column (1200px, as in the design) */
.sf-teach-page .sf-teach-section__inner {
    width: 100%;
    min-width: 0;
    max-width: calc(var(--soofos-space-3xl) * 25);
    margin-inline: auto;
}

/* ---------------------------------------------------------------------
 * Hero
 * ------------------------------------------------------------------- */

.sf-teach-page .sf-teach-hero {
    background: var(--ink);
    color: var(--white);
    padding: calc(var(--soofos-space-3xl) + var(--soofos-space-md))
             var(--soofos-space-lg)
             calc(var(--soofos-space-3xl) + var(--soofos-space-xl));
}

.sf-teach-page .sf-teach-hero__inner {
    width: 100%;
    min-width: 0;
    max-width: calc(var(--soofos-space-3xl) * 25);
    margin-inline: auto;
}

/* 2-col hero: copy | visual (design: 1.1fr / 1fr, 56px gap) */
.sf-teach-hero__inner > .wp-block-group__inner-container {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: calc(var(--soofos-space-3xl) + var(--soofos-space-sm));
    align-items: center;
}

.sf-teach-page .sf-teach-hero__copy,
.sf-teach-page .sf-teach-hero__visual {
    min-width: 0;
    margin: 0;
}

.sf-teach-page .sf-teach-hero__eyebrow,
.sf-teach-page .sf-teach-kicker {
    margin: 0;
    color: var(--blue);
    font-size: var(--soofos-player-text-md);
    font-weight: var(--soofos-font-weight-black);
    line-height: 1.4;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sf-teach-page .sf-teach-hero__title {
    max-width: calc(var(--soofos-space-3xl) * 16);
    margin: calc(var(--soofos-space-sm) + var(--soofos-space-xs)) 0 0;
    color: var(--white);
    font-size: var(--soofos-space-2xl);
    font-weight: var(--soofos-font-weight-black);
    line-height: 1.12;
    letter-spacing: -0.02em;
}

.sf-teach-page .sf-teach-hero__lead {
    max-width: calc(var(--soofos-space-3xl) * 11);
    margin: var(--soofos-space-md) 0 0;
    color: var(--faint);
    font-size: var(--soofos-space-md);
    font-weight: var(--soofos-font-weight-semibold);
    line-height: 1.6;
}

/* wp:buttons — no inner container; the button wrappers are direct children */
.sf-teach-page .sf-teach-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--soofos-space-md);
    margin: calc(var(--soofos-space-xl) + var(--soofos-space-2xs)) 0 0;
}

.sf-teach-page .sf-teach-hero__footnote {
    margin: var(--soofos-space-sm) 0 0;
    color: var(--faint);
    font-size: var(--soofos-player-text-md);
    font-weight: var(--soofos-font-weight-bold);
    line-height: 1.4;
}

/* Horizontal 3-stat row under the CTA (design: inline flex, 36px gap) */
.sf-teach-page .sf-teach-hero__stats {
    margin: calc(var(--soofos-space-2xl) + var(--soofos-space-xs)) 0 0;
}

.sf-teach-hero__stats > .wp-block-group__inner-container {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--soofos-space-2xl) + var(--soofos-space-xs));
}

.sf-teach-page .sf-teach-hero__stat {
    margin: 0;
}

.sf-teach-hero__stat > .wp-block-group__inner-container {
    display: flex;
    flex-direction: column;
    gap: var(--soofos-space-2xs);
}

.sf-teach-page .sf-teach-hero__stat-value {
    margin: 0;
    color: var(--white);
    font-size: calc(var(--soofos-space-xl) + var(--soofos-space-2xs));
    font-weight: var(--soofos-font-weight-black);
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.sf-teach-page .sf-teach-hero__stat-label {
    margin: 0;
    color: var(--faint);
    font-size: var(--soofos-player-text-md);
    font-weight: var(--soofos-font-weight-extrabold);
    line-height: 1.4;
    letter-spacing: 0.02em;
}

/* Hero visual — photo box with reserved ratio + overlay pill */
.sf-teach-page .sf-teach-hero__visual {
    position: relative;
}

/* The 900×600 photo: reserve a 3/2 box (with a soft navy fill while the
   image loads) so the column never renders as an empty slab. */
.sf-teach-page .sf-teach-hero__photo {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    background: var(--ink-2);
    border-radius: var(--r-card-lg);
    box-shadow: var(--soofos-shadow-black-hero);
    overflow: hidden;
    margin: 0;
}

.sf-teach-page .sf-teach-hero__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

/* "This could be you" chip overlaps the photo bottom-left */
.sf-teach-page .sf-teach-hero__pill {
    position: absolute;
    left: calc(-1 * (var(--soofos-space-md) + var(--soofos-space-2xs)));
    bottom: calc(-1 * (var(--soofos-space-md) + var(--soofos-space-2xs)));
    background: var(--white);
    border-radius: var(--r-card-sm);
    padding: calc(var(--soofos-space-sm) + var(--soofos-space-xs))
             calc(var(--soofos-space-md) + var(--soofos-space-2xs));
    box-shadow: var(--soofos-shadow-navy-strong);
    margin: 0;
}

.sf-teach-hero__pill > .wp-block-group__inner-container {
    display: flex;
    align-items: center;
    gap: calc(var(--soofos-space-sm) + var(--soofos-space-2xs));
}

.sf-teach-page .sf-teach-hero__pill-icon {
    flex: none;
    margin: 0;
}

.sf-teach-hero__pill-icon > .wp-block-group__inner-container {
    display: grid;
    place-items: center;
    width: calc(var(--soofos-space-2xl) + var(--soofos-space-2xs));
    height: calc(var(--soofos-space-2xl) + var(--soofos-space-2xs));
    border-radius: var(--r-pill);
    background: var(--green-fill);
    color: var(--green-ink);
    font-family: var(--font);
    font-size: var(--soofos-space-md);
    font-weight: var(--soofos-font-weight-black);
    line-height: 1;
}

.sf-teach-page .sf-teach-hero__pill-copy {
    margin: 0;
}

.sf-teach-hero__pill-copy > .wp-block-group__inner-container {
    display: flex;
    flex-direction: column;
    gap: var(--soofos-space-2xs);
}

.sf-teach-page .sf-teach-hero__pill-title {
    margin: 0;
    color: var(--ink);
    font-size: var(--soofos-player-text-md);
    font-weight: var(--soofos-font-weight-black);
    line-height: 1.3;
}

.sf-teach-page .sf-teach-hero__pill-sub {
    margin: 0;
    color: var(--muted-2);
    font-size: var(--soofos-player-text-2xs);
    font-weight: var(--soofos-font-weight-bold);
    line-height: 1.3;
}

/* ---------------------------------------------------------------------
 * Buttons
 * ------------------------------------------------------------------- */

.sf-teach-page .sf-teach-button .wp-block-button__link {
    min-height: var(--soofos-control-min-height);
    border: thin solid var(--blue);
    border-radius: var(--r-btn);
    padding: var(--soofos-space-md) var(--soofos-space-2xl);
    font-family: var(--font);
    font-size: var(--soofos-space-md);
    font-weight: var(--soofos-font-weight-black);
    line-height: 1.4;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--soofos-space-sm);
}

.sf-teach-page .sf-teach-button .wp-block-button__link:focus-visible {
    outline: var(--soofos-space-2xs) solid var(--white);
    outline-offset: var(--soofos-space-2xs);
}

.sf-teach-page .sf-teach-button--primary .wp-block-button__link {
    background: var(--blue);
    color: var(--white);
    box-shadow: var(--soofos-shadow-blue-cta);
}

.sf-teach-page .sf-teach-button--primary .wp-block-button__link:hover,
.sf-teach-page .sf-teach-button--primary .wp-block-button__link:focus-visible {
    border-color: var(--blue-hover);
    background: var(--blue-hover);
}

.sf-teach-page .sf-teach-button__icon {
    display: inline-flex;
    align-items: center;
    line-height: 0;
}

.sf-teach-page .sf-teach-button__icon .sf-icon {
    width: 18px;
    height: 18px;
}

/* ---------------------------------------------------------------------
 * Generic section rhythm — design: ~56px above each section, content
 * sits on the light page background (no white bands), tight bottoms so
 * the next section's top padding provides the gap.
 * ------------------------------------------------------------------- */

.sf-teach-page .sf-teach-what,
.sf-teach-page .sf-teach-instructors,
.sf-teach-page .sf-teach-how,
.sf-teach-page .sf-teach-earnings,
.sf-teach-page .sf-teach-community,
.sf-teach-page .sf-teach-faq,
.sf-teach-page .sf-teach-final {
    padding: calc(var(--soofos-space-3xl) + var(--soofos-space-sm))
             var(--soofos-space-lg)
             var(--soofos-space-sm);
}

.sf-teach-page .sf-teach-final {
    padding-bottom: calc(var(--soofos-space-3xl) + var(--soofos-space-md));
}

.sf-teach-page .sf-teach-kicker {
    margin: 0;
}

.sf-teach-page .sf-teach-kicker--center {
    text-align: center;
}

.sf-teach-page .sf-teach-kicker--on-navy {
    color: var(--blue);
}

.sf-teach-page .sf-teach-heading {
    max-width: calc(var(--soofos-space-3xl) * 15);
    margin: var(--soofos-space-sm) 0 0;
    color: var(--ink);
    font-size: calc(var(--soofos-space-xl) + var(--soofos-space-xs));
    font-weight: var(--soofos-font-weight-black);
    line-height: 1.2;
    letter-spacing: -0.02em;
    display: block;
}

.sf-teach-page .sf-teach-heading--center {
    text-align: center;
    margin-inline: auto;
    margin-top: var(--soofos-space-sm);
}

.sf-teach-page .sf-teach-heading--on-navy {
    color: var(--white);
}

.sf-teach-page .sf-teach-intro {
    max-width: calc(var(--soofos-space-3xl) * 15);
    margin: var(--soofos-space-sm) 0 0;
    color: var(--muted);
    font-size: var(--soofos-player-text-md);
    line-height: 1.65;
}

.sf-teach-page .sf-teach-intro--center {
    text-align: center;
    margin-inline: auto;
    margin-top: var(--soofos-space-sm);
}

.sf-teach-page .sf-teach-intro--on-navy {
    color: var(--faint);
}

/* Centered section heads (instructors / how) — design: 640px column */
.sf-teach-page .sf-teach-instructors__head,
.sf-teach-page .sf-teach-how__head {
    max-width: calc(var(--soofos-space-3xl) * 13);
    margin: 0 auto;
    text-align: center;
}

/* ---------------------------------------------------------------------
 * What you can teach — 2-col with numbered cards
 * ------------------------------------------------------------------- */

.sf-teach-what__grid > .wp-block-group__inner-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    gap: calc(var(--soofos-space-3xl) + var(--soofos-space-sm));
    align-items: start;
}

.sf-teach-page .sf-teach-what__grid,
.sf-teach-page .sf-teach-what__copy,
.sf-teach-page .sf-teach-what__cards {
    margin: 0;
    min-width: 0;
}

.sf-teach-what__cards > .wp-block-group__inner-container {
    display: flex;
    flex-direction: column;
    gap: calc(var(--soofos-space-sm) + var(--soofos-space-xs));
}

.sf-teach-page .sf-teach-what__card {
    background: var(--white);
    border: thin solid var(--card-border);
    border-radius: var(--r-card-sm);
    padding: calc(var(--soofos-space-md) + var(--soofos-space-2xs))
             calc(var(--soofos-space-lg) + var(--soofos-space-2xs));
    margin: 0;
}

.sf-teach-what__card > .wp-block-group__inner-container {
    display: grid;
    grid-template-columns: calc(var(--soofos-space-2xl) + var(--soofos-space-2xs)) minmax(0, 1fr);
    gap: calc(var(--soofos-space-sm) + var(--soofos-space-xs) + var(--soofos-space-2xs));
    align-items: start;
}

.sf-teach-page .sf-teach-what__badge {
    margin: 0;
}

.sf-teach-what__badge > .wp-block-group__inner-container {
    display: grid;
    place-items: center;
    width: calc(var(--soofos-space-2xl) + var(--soofos-space-2xs));
    height: calc(var(--soofos-space-2xl) + var(--soofos-space-2xs));
    border-radius: calc(var(--soofos-space-sm) + var(--soofos-space-2xs));
    background: var(--blue-fill);
    color: var(--deep-blue);
    font-family: var(--font);
    font-size: var(--soofos-space-md);
    font-weight: var(--soofos-font-weight-black);
    line-height: 1;
}

.sf-teach-page .sf-teach-what__card-body {
    min-width: 0;
    margin: 0;
}

.sf-teach-what__card-body > .wp-block-group__inner-container {
    display: flex;
    flex-direction: column;
    gap: var(--soofos-space-2xs);
}

.sf-teach-page .sf-teach-what__card-title {
    margin: 0;
    color: var(--ink);
    font-size: var(--soofos-space-md);
    font-weight: var(--soofos-font-weight-black);
    line-height: 1.3;
}

.sf-teach-page .sf-teach-what__card-copy {
    margin: 0;
    color: var(--muted);
    font-size: var(--soofos-player-text-md);
    line-height: 1.6;
}

/* ---------------------------------------------------------------------
 * Real instructors — 3 large cards + 3 small quote bars
 * ------------------------------------------------------------------- */

.sf-teach-page .sf-teach-instructors__cards {
    margin: calc(var(--soofos-space-xl) + var(--soofos-space-xs)) 0 0;
}

.sf-teach-instructors__cards > .wp-block-group__inner-container {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--soofos-space-md);
    align-items: stretch;
}

.sf-teach-page .sf-teach-instructor {
    background: var(--white);
    border: thin solid var(--card-border);
    border-radius: var(--r-card);
    overflow: hidden;
    margin: 0;
    min-width: 0;
}

.sf-teach-instructor > .wp-block-group__inner-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.sf-teach-page .sf-teach-instructor__photo,
.sf-teach-page .sf-teach-instructor__photo img {
    display: block;
    width: 100%;
    height: 210px;
    object-fit: cover;
    margin: 0;
}

.sf-teach-page .sf-teach-instructor__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: var(--soofos-space-lg) calc(var(--soofos-space-lg) + var(--soofos-space-2xs));
    margin: 0;
}

.sf-teach-instructor__body > .wp-block-group__inner-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--soofos-space-md);
}

.sf-teach-page .sf-teach-instructor__quote {
    margin: 0;
    color: var(--body);
    font-size: var(--soofos-player-text-md);
    line-height: 1.6;
    flex: 1;
}

.sf-teach-page .sf-teach-instructor__meta {
    margin: 0;
}

.sf-teach-instructor__meta > .wp-block-group__inner-container {
    display: flex;
    flex-direction: column;
    gap: var(--soofos-space-2xs);
}

.sf-teach-page .sf-teach-instructor__name {
    margin: 0;
    color: var(--ink);
    font-size: var(--soofos-player-text-md);
    font-weight: var(--soofos-font-weight-black);
    line-height: 1.3;
}

.sf-teach-page .sf-teach-instructor__subject {
    margin: 0;
    color: var(--muted-2);
    font-size: var(--soofos-player-text-md);
    font-weight: var(--soofos-font-weight-bold);
    line-height: 1.3;
}

.sf-teach-page .sf-teach-quotes {
    margin: var(--soofos-space-md) 0 0;
}

.sf-teach-quotes > .wp-block-group__inner-container {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--soofos-space-md);
    align-items: stretch;
}

.sf-teach-page .sf-teach-quote {
    background: var(--white);
    border: thin solid var(--card-border);
    border-radius: var(--r-card-sm);
    padding: var(--soofos-space-md) calc(var(--soofos-space-md) + var(--soofos-space-2xs));
    margin: 0;
    min-width: 0;
}

.sf-teach-quote > .wp-block-group__inner-container {
    display: flex;
    align-items: center;
    gap: calc(var(--soofos-space-sm) + var(--soofos-space-xs));
    height: 100%;
}

.sf-teach-page .sf-teach-quote__avatar,
.sf-teach-page .sf-teach-quote__avatar img {
    display: block;
    width: 44px;
    height: 44px;
    border-radius: var(--r-pill);
    object-fit: cover;
    flex: none;
    margin: 0;
}

.sf-teach-page .sf-teach-quote__body {
    min-width: 0;
    margin: 0;
}

.sf-teach-quote__body > .wp-block-group__inner-container {
    display: flex;
    flex-direction: column;
    gap: var(--soofos-space-2xs);
}

.sf-teach-page .sf-teach-quote__text {
    margin: 0;
    color: var(--body);
    font-size: var(--soofos-player-text-sm);
    line-height: 1.5;
}

.sf-teach-page .sf-teach-quote__meta {
    margin: 0;
    color: var(--muted-2);
    font-size: var(--soofos-player-text-2xs);
    font-weight: var(--soofos-font-weight-extrabold);
    line-height: 1.3;
}

/* ---------------------------------------------------------------------
 * How it works — 3 numbered steps in a row
 * ------------------------------------------------------------------- */

.sf-teach-page .sf-teach-how__grid {
    margin: calc(var(--soofos-space-xl) + var(--soofos-space-xs)) 0 0;
}

.sf-teach-how__grid > .wp-block-group__inner-container {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--soofos-space-md);
    align-items: stretch;
}

.sf-teach-page .sf-teach-step {
    background: var(--white);
    border: thin solid var(--card-border);
    border-radius: var(--r-card);
    padding: var(--soofos-space-xl) calc(var(--soofos-space-xl) + var(--soofos-space-2xs));
    margin: 0;
    min-width: 0;
}

.sf-teach-step > .wp-block-group__inner-container {
    display: flex;
    flex-direction: column;
    gap: var(--soofos-space-sm);
    height: 100%;
}

.sf-teach-page .sf-teach-step__number {
    margin: 0;
    color: var(--blue);
    font-size: var(--soofos-space-xl);
    font-weight: var(--soofos-font-weight-black);
    line-height: 1;
}

.sf-teach-page .sf-teach-step__title {
    margin: 0;
    color: var(--ink);
    font-size: var(--soofos-space-md);
    font-weight: var(--soofos-font-weight-black);
    line-height: 1.35;
    display: flex;
    align-items: center;
    gap: var(--soofos-space-sm);
}

.sf-teach-page .sf-teach-step__icon {
    display: inline-flex;
    align-items: center;
    color: var(--deep-blue);
    line-height: 0;
}

.sf-teach-page .sf-teach-step__icon .sf-icon {
    width: 22px;
    height: 22px;
}

.sf-teach-page .sf-teach-step__copy {
    margin: 0;
    color: var(--muted);
    font-size: var(--soofos-player-text-md);
    line-height: 1.6;
}

/* ---------------------------------------------------------------------
 * Earnings — navy panel, copy left, 50% / 96% rate cards right
 * (this section has no .sf-teach-section__inner; the panel is the box)
 * ------------------------------------------------------------------- */

.sf-teach-page .sf-teach-earnings {
    background: var(--page);
}

.sf-teach-page .sf-teach-earnings__panel {
    width: 100%;
    min-width: 0;
    max-width: calc(var(--soofos-space-3xl) * 25);
    margin-inline: auto;
    background: var(--ink);
    border-radius: calc(var(--r-card-lg) + var(--soofos-space-xs));
    padding: var(--soofos-space-3xl) calc(var(--soofos-space-3xl) + var(--soofos-space-sm));
    color: var(--white);
}

.sf-teach-earnings__panel > .wp-block-group__inner-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--soofos-space-3xl);
    align-items: center;
}

.sf-teach-page .sf-teach-earnings__copy {
    min-width: 0;
    margin: 0;
}

.sf-teach-page .sf-teach-earnings__bullets {
    display: flex;
    flex-direction: column;
    gap: calc(var(--soofos-space-sm) + var(--soofos-space-2xs));
    margin: var(--soofos-space-md) 0 0;
    padding: 0;
    list-style: none;
}

.sf-teach-page .sf-teach-earnings__bullets li,
.sf-teach-page .sf-teach-earnings__bullets .wp-block-list-item {
    display: flex;
    align-items: center;
    gap: calc(var(--soofos-space-sm) + var(--soofos-space-2xs));
    margin: 0;
    color: var(--on-navy-strong);
    font-size: var(--soofos-player-text-md);
    font-weight: var(--soofos-font-weight-bold);
    line-height: 1.55;
}

.sf-teach-page .sf-teach-earnings__check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--green);
    line-height: 0;
    flex: none;
}

.sf-teach-page .sf-teach-earnings__check .sf-icon {
    width: 18px;
    height: 18px;
    stroke-width: 2.5;
}

.sf-teach-page .sf-teach-earnings__rates {
    min-width: 0;
    margin: 0;
}

.sf-teach-earnings__rates > .wp-block-group__inner-container {
    display: flex;
    flex-direction: column;
    gap: calc(var(--soofos-space-sm) + var(--soofos-space-xs));
}

.sf-teach-page .sf-teach-earnings__rate {
    background: var(--soofos-on-navy-surface);
    border: thin solid var(--soofos-on-navy-border);
    border-radius: var(--r-card);
    padding: var(--soofos-space-lg) var(--soofos-space-xl);
    margin: 0;
}

.sf-teach-earnings__rate > .wp-block-group__inner-container {
    display: flex;
    align-items: center;
    gap: calc(var(--soofos-space-md) + var(--soofos-space-2xs));
}

.sf-teach-page .sf-teach-earnings__rate-value {
    margin: 0;
    min-width: calc(var(--soofos-space-3xl) * 2);
    color: var(--white);
    font-size: calc(var(--soofos-space-2xl) + var(--soofos-space-2xs));
    font-weight: var(--soofos-font-weight-black);
    line-height: 1;
    letter-spacing: -0.01em;
    flex: none;
}

.sf-teach-page .sf-teach-earnings__rate-value--accent {
    color: var(--amber);
}

.sf-teach-page .sf-teach-earnings__rate-copy {
    margin: 0;
    color: var(--on-navy-strong);
    font-size: var(--soofos-player-text-md);
    font-weight: var(--soofos-font-weight-bold);
    line-height: 1.55;
}

.sf-teach-page .sf-teach-earnings__note {
    margin: var(--soofos-space-2xs) 0 0;
    color: var(--on-navy-muted);
    font-size: var(--soofos-player-text-2xs);
    font-weight: var(--soofos-font-weight-bold);
    line-height: 1.5;
}

.sf-teach-page .sf-teach-earnings__note a {
    color: var(--on-navy-strong);
    text-decoration: underline;
    text-decoration-thickness: from-font;
    text-underline-offset: var(--soofos-space-xs);
}

.sf-teach-page .sf-teach-earnings__note a:hover {
    color: var(--white);
}

.sf-teach-page .sf-teach-earnings__note a:focus-visible {
    outline: var(--soofos-space-2xs) solid var(--white);
    outline-offset: var(--soofos-space-2xs);
    border-radius: var(--soofos-space-2xs);
}

/* ---------------------------------------------------------------------
 * Community + everything you need — 2-col card (photo | bullets)
 * ------------------------------------------------------------------- */

.sf-teach-page .sf-teach-community__card {
    background: var(--white);
    border: thin solid var(--card-border);
    border-radius: var(--r-card-lg);
    overflow: hidden;
    margin: 0;
}

.sf-teach-community__card > .wp-block-group__inner-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    align-items: stretch;
}

.sf-teach-page .sf-teach-community__photo {
    height: 100%;
    margin: 0;
}

.sf-teach-page .sf-teach-community__photo img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 340px;
    object-fit: cover;
    margin: 0;
}

.sf-teach-page .sf-teach-community__body {
    min-width: 0;
    margin: 0;
    padding: calc(var(--soofos-space-2xl) + var(--soofos-space-xs))
             calc(var(--soofos-space-2xl) + var(--soofos-space-sm) + var(--soofos-space-2xs));
}

.sf-teach-page .sf-teach-community__body .sf-teach-heading {
    font-size: var(--soofos-space-xl);
    line-height: 1.25;
}

.sf-teach-page .sf-teach-community__bullets {
    display: flex;
    flex-direction: column;
    gap: calc(var(--soofos-space-sm) + var(--soofos-space-2xs));
    margin: var(--soofos-space-md) 0 0;
    padding: 0;
    list-style: none;
}

.sf-teach-page .sf-teach-community__bullets li,
.sf-teach-page .sf-teach-community__bullets .wp-block-list-item {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--soofos-space-sm) + var(--soofos-space-2xs));
    margin: 0;
    color: var(--body);
    font-size: var(--soofos-player-text-md);
    font-weight: var(--soofos-font-weight-bold);
    line-height: 1.55;
}

.sf-teach-page .sf-teach-community__check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--green);
    line-height: 0;
    flex: none;
    margin-top: 2px;
}

.sf-teach-page .sf-teach-community__check .sf-icon {
    width: 18px;
    height: 18px;
    stroke-width: 2.5;
}

.sf-teach-page .sf-teach-community__bullets strong {
    color: var(--ink);
    font-weight: var(--soofos-font-weight-extrabold);
}

/* ---------------------------------------------------------------------
 * FAQ — centered 860px column
 * ------------------------------------------------------------------- */

.sf-teach-page .sf-teach-faq__inner {
    max-width: calc(var(--soofos-space-3xl) * 18);
}

.sf-teach-faq__inner > .wp-block-group__inner-container {
    display: flex;
    flex-direction: column;
    gap: calc(var(--soofos-space-sm) + var(--soofos-space-2xs));
}

.sf-teach-page .sf-teach-faq__heading {
    margin: 0 0 var(--soofos-space-sm);
    color: var(--ink);
    font-size: var(--soofos-space-xl);
    font-weight: var(--soofos-font-weight-black);
    line-height: 1.2;
    text-align: center;
}

.sf-teach-page .sf-teach-faq__item {
    background: var(--white);
    border: thin solid var(--card-border);
    border-radius: var(--r-card-sm);
    padding: 0;
    margin: 0;
    overflow: hidden;
}

.sf-teach-page .sf-teach-faq__item[open] {
    border-width: 1.5px;
    border-color: var(--blue-border);
}

.sf-teach-page .sf-teach-faq__item > summary {
    cursor: pointer;
    list-style: none;
    min-height: var(--soofos-control-min-height);
    padding: var(--soofos-space-md) var(--soofos-space-xl);
    color: var(--ink);
    font-size: var(--soofos-player-text-md);
    font-weight: var(--soofos-font-weight-extrabold);
    line-height: 1.4;
    position: relative;
    padding-right: calc(var(--soofos-space-2xl) + var(--soofos-space-md));
}

.sf-teach-page .sf-teach-faq__item > summary::-webkit-details-marker {
    display: none;
}

.sf-teach-page .sf-teach-faq__item > summary::after {
    content: "";
    position: absolute;
    right: var(--soofos-space-xl);
    top: 50%;
    width: var(--soofos-space-sm);
    height: var(--soofos-space-sm);
    border-right: 2px solid var(--deep-blue);
    border-bottom: 2px solid var(--deep-blue);
    transform: translateY(-75%) rotate(45deg);
    transition: transform 0.18s ease-in-out;
}

.sf-teach-page .sf-teach-faq__item[open] > summary {
    border-bottom: thin solid var(--card-border);
}

.sf-teach-page .sf-teach-faq__item[open] > summary::after {
    transform: translateY(-25%) rotate(-135deg);
}

.sf-teach-page .sf-teach-faq__item > summary:focus-visible {
    outline: var(--soofos-space-2xs) solid var(--deep-blue);
    outline-offset: -2px;
    border-radius: var(--r-card-sm);
}

.sf-teach-page .sf-teach-faq__item > *:not(summary) {
    margin: 0;
    padding: var(--soofos-space-md) var(--soofos-space-xl) var(--soofos-space-lg);
    color: var(--muted);
    font-size: var(--soofos-player-text-md);
    line-height: 1.6;
}

.sf-teach-page .sf-teach-faq__item > *:not(summary) a {
    color: var(--deep-blue);
    font-weight: var(--soofos-font-weight-extrabold);
    text-decoration: underline;
    text-decoration-thickness: from-font;
    text-underline-offset: var(--soofos-space-xs);
}

.sf-teach-page .sf-teach-faq__item > *:not(summary) a:hover {
    color: var(--blue-hover);
}

.sf-teach-page .sf-teach-faq__item > *:not(summary) a:focus-visible {
    outline: var(--soofos-space-2xs) solid var(--deep-blue);
    outline-offset: var(--soofos-space-2xs);
    border-radius: var(--soofos-space-2xs);
}

.sf-teach-page .sf-teach-faq__contact,
.sf-teach-page .sf-teach-faq__existing {
    text-align: center;
    margin: var(--soofos-space-xs) 0 0;
    color: var(--muted);
    font-size: var(--soofos-player-text-md);
    font-weight: var(--soofos-font-weight-bold);
    line-height: 1.5;
}

.sf-teach-page .sf-teach-faq__existing {
    margin-top: 0;
    color: var(--muted-2);
    font-size: var(--soofos-player-text-sm);
}

.sf-teach-page .sf-teach-faq__contact a,
.sf-teach-page .sf-teach-faq__existing a {
    color: var(--deep-blue);
    font-weight: var(--soofos-font-weight-extrabold);
    text-decoration: underline;
    text-decoration-thickness: from-font;
    text-underline-offset: var(--soofos-space-xs);
}

.sf-teach-page .sf-teach-faq__contact a:hover,
.sf-teach-page .sf-teach-faq__existing a:hover {
    color: var(--blue-hover);
}

.sf-teach-page .sf-teach-faq__contact a:focus-visible,
.sf-teach-page .sf-teach-faq__existing a:focus-visible {
    outline: var(--soofos-space-2xs) solid var(--deep-blue);
    outline-offset: var(--soofos-space-2xs);
    border-radius: var(--soofos-space-2xs);
}

.sf-teach-page .sf-teach-faq__contact-icon {
    display: inline-flex;
    align-items: center;
    line-height: 0;
    margin-left: var(--soofos-space-2xs);
}

.sf-teach-page .sf-teach-faq__contact-icon .sf-icon {
    width: 14px;
    height: 14px;
}

/* ---------------------------------------------------------------------
 * Final CTA — light-blue panel, copy left, button right
 * ------------------------------------------------------------------- */

.sf-teach-page .sf-teach-final__panel {
    background: var(--blue-fill);
    border: thin solid var(--blue-border);
    border-radius: calc(var(--r-card-lg) + var(--soofos-space-xs));
    padding: calc(var(--soofos-space-2xl) + var(--soofos-space-sm) + var(--soofos-space-xs))
             calc(var(--soofos-space-3xl) + var(--soofos-space-sm));
    margin: 0;
}

.sf-teach-final__panel > .wp-block-group__inner-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--soofos-space-2xl);
}

.sf-teach-page .sf-teach-final__content {
    flex: 1;
    min-width: 0;
    max-width: calc(var(--soofos-space-3xl) * 14);
    margin: 0;
}

.sf-teach-page .sf-teach-final__title {
    margin: 0;
    color: var(--ink);
    font-size: calc(var(--soofos-space-xl) + var(--soofos-space-2xs));
    font-weight: var(--soofos-font-weight-black);
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.sf-teach-page .sf-teach-final__copy {
    margin: var(--soofos-space-xs) 0 0;
    color: var(--muted);
    font-size: var(--soofos-player-text-md);
    line-height: 1.6;
}

.sf-teach-page .sf-teach-final__copy a {
    color: var(--deep-blue);
    font-weight: var(--soofos-font-weight-extrabold);
    text-decoration: underline;
    text-decoration-thickness: from-font;
    text-underline-offset: var(--soofos-space-xs);
}

.sf-teach-page .sf-teach-final__copy a:hover {
    color: var(--blue-hover);
}

.sf-teach-page .sf-teach-final__copy a:focus-visible {
    outline: var(--soofos-space-2xs) solid var(--deep-blue);
    outline-offset: var(--soofos-space-2xs);
    border-radius: var(--soofos-space-2xs);
}

.sf-teach-page .sf-teach-final__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--soofos-space-md);
    margin: 0;
    flex: none;
}

/* ---------------------------------------------------------------------
 * Form 4 modal — overlay shown via :target when the CTA opens the popup
 * ------------------------------------------------------------------- */

.sf-teach-page .sf-teach-modal {
    display: none;
}

.sf-teach-page .sf-teach-modal:target {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--overlay);
    padding: var(--soofos-space-xl);
    overflow-y: auto;
}

.sf-teach-modal:target > .wp-block-group__inner-container {
    width: 100%;
    max-width: calc(var(--soofos-space-3xl) * 12);
    min-height: 100%;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: var(--soofos-space-lg);
}

.sf-teach-page .sf-teach-modal #modal-register-instructor {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    background: var(--white);
    border: thin solid var(--card-border);
    border-radius: var(--r-card-lg);
    box-shadow: var(--soofos-shadow-navy-deep);
    padding: 0;
    overflow: hidden;
    margin: 0;
}

.sf-teach-page .sf-teach-modal #modal-register-instructor .flex.flex-wrap {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.sf-teach-page .sf-teach-modal #modal-register-instructor .col-message {
    display: none;
}

.sf-teach-page .sf-teach-modal #modal-register-instructor .col-form {
    width: 100%;
    padding: calc(var(--soofos-space-2xl) + var(--soofos-space-sm));
    color: var(--ink);
    font-family: var(--font);
    background: var(--white);
}

.sf-teach-page .sf-teach-modal #modal-register-instructor .col-form h3 {
    margin: 0 0 var(--soofos-space-lg);
    color: var(--ink);
    font-size: var(--soofos-space-lg);
    font-weight: var(--soofos-font-weight-black);
    line-height: 1.3;
    text-align: left;
}

.sf-teach-page .sf-teach-modal #modal-register-instructor .wrapper-form-fields {
    margin-bottom: var(--soofos-space-md);
}

.sf-teach-page .sf-teach-modal #modal-register-instructor .wrapper-form-fields .nf-form-cont,
.sf-teach-page .sf-teach-modal #modal-register-instructor .wrapper-form-fields .nf-form-wrap {
    background: var(--white);
    color: var(--ink);
    font-family: var(--font);
}

.sf-teach-page .sf-teach-modal #modal-register-instructor .wrapper-form-fields .nf-form-cont .nf-field-label,
.sf-teach-page .sf-teach-modal #modal-register-instructor .wrapper-form-fields .nf-form-cont label {
    color: var(--ink);
    font-size: var(--soofos-player-text-md);
    font-weight: var(--soofos-font-weight-extrabold);
}

.sf-teach-page .sf-teach-modal #modal-register-instructor .wrapper-form-fields .nf-form-cont .nf-field-element input[type="text"],
.sf-teach-page .sf-teach-modal #modal-register-instructor .wrapper-form-fields .nf-form-cont .nf-field-element input[type="email"],
.sf-teach-page .sf-teach-modal #modal-register-instructor .wrapper-form-fields .nf-form-cont .nf-field-element input[type="password"],
.sf-teach-page .sf-teach-modal #modal-register-instructor .wrapper-form-fields .nf-form-cont .nf-field-element textarea,
.sf-teach-page .sf-teach-modal #modal-register-instructor .wrapper-form-fields .nf-form-cont .nf-field-element select {
    min-height: var(--soofos-control-min-height);
    border-radius: var(--r-btn);
    border: thin solid var(--input-border);
    background: var(--white);
    color: var(--ink);
    font-family: var(--font);
    font-size: var(--soofos-player-text-md);
    padding: var(--soofos-space-sm) var(--soofos-space-md);
}

.sf-teach-page .sf-teach-modal #modal-register-instructor .wrapper-form-fields .nf-form-cont .nf-field-element input:focus,
.sf-teach-page .sf-teach-modal #modal-register-instructor .wrapper-form-fields .nf-form-cont .nf-field-element textarea:focus,
.sf-teach-page .sf-teach-modal #modal-register-instructor .wrapper-form-fields .nf-form-cont .nf-field-element select:focus {
    outline: var(--soofos-space-2xs) solid var(--deep-blue);
    outline-offset: 0;
    border-color: var(--deep-blue);
}

.sf-teach-page .sf-teach-modal #modal-register-instructor .wrapper-form-fields .nf-form-cont .nf-field-element input[type="submit"],
.sf-teach-page .sf-teach-modal #modal-register-instructor .wrapper-form-fields .nf-form-cont .nf-field-element button[type="submit"] {
    min-height: var(--soofos-control-min-height);
    border-radius: var(--r-btn);
    background: var(--blue);
    border: thin solid var(--blue);
    color: var(--white);
    font-family: var(--font);
    font-size: var(--soofos-player-text-md);
    font-weight: var(--soofos-font-weight-extrabold);
    padding: var(--soofos-space-md) var(--soofos-space-xl);
    cursor: pointer;
    width: 100%;
}

.sf-teach-page .sf-teach-modal #modal-register-instructor .wrapper-form-fields .nf-form-cont .nf-field-element input[type="submit"]:hover,
.sf-teach-page .sf-teach-modal #modal-register-instructor .wrapper-form-fields .nf-form-cont .nf-field-element button[type="submit"]:hover {
    background: var(--blue-hover);
    border-color: var(--blue-hover);
}

.sf-teach-page .sf-teach-modal #modal-register-instructor .wrapper-form-fields .nf-form-cont .nf-field-element input[type="submit"]:focus-visible,
.sf-teach-page .sf-teach-modal #modal-register-instructor .wrapper-form-fields .nf-form-cont .nf-field-element button[type="submit"]:focus-visible {
    outline: var(--soofos-space-2xs) solid var(--deep-blue);
    outline-offset: var(--soofos-space-2xs);
}

.sf-teach-page .sf-teach-modal #modal-register-instructor .wrapper-form-fields .sf-teach-modal-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--soofos-control-min-height);
    border-radius: var(--r-btn);
    background: var(--blue);
    border: thin solid var(--blue);
    color: var(--white);
    font-family: var(--font);
    font-size: var(--soofos-player-text-md);
    font-weight: var(--soofos-font-weight-extrabold);
    padding: var(--soofos-space-md) var(--soofos-space-xl);
    cursor: pointer;
    width: 100%;
    text-decoration: none;
    box-sizing: border-box;
}

.sf-teach-page .sf-teach-modal #modal-register-instructor .wrapper-form-fields .sf-teach-modal-btn:hover {
    background: var(--blue-hover);
    border-color: var(--blue-hover);
}

.sf-teach-page .sf-teach-modal #modal-register-instructor .wrapper-form-fields .sf-teach-modal-btn:focus-visible {
    outline: var(--soofos-space-2xs) solid var(--deep-blue);
    outline-offset: var(--soofos-space-2xs);
}

.sf-teach-page .sf-teach-modal #modal-register-instructor .pop-account,
.sf-teach-page .sf-teach-modal #modal-register-instructor .copyright {
    color: var(--muted);
    font-size: var(--soofos-player-text-md);
    line-height: 1.6;
    margin: var(--soofos-space-sm) 0 0;
    text-align: left;
}

.sf-teach-page .sf-teach-modal #modal-register-instructor .pop-al-account {
    margin: var(--soofos-space-xs) 0 0;
    text-align: left;
}

.sf-teach-page .sf-teach-modal #modal-register-instructor .pop-al-account a {
    color: var(--deep-blue);
    font-weight: var(--soofos-font-weight-extrabold);
    text-decoration: underline;
    text-decoration-thickness: from-font;
    text-underline-offset: var(--soofos-space-xs);
}

.sf-teach-page .sf-teach-modal #modal-register-instructor .pop-al-account a:hover {
    color: var(--blue-hover);
}

.sf-teach-page .sf-teach-modal #modal-register-instructor .pop-al-account a:focus-visible {
    outline: var(--soofos-space-2xs) solid var(--deep-blue);
    outline-offset: var(--soofos-space-2xs);
    border-radius: var(--soofos-space-2xs);
}

.sf-teach-page .sf-teach-modal #modal-register-instructor .copyright a {
    color: var(--deep-blue);
    text-decoration: underline;
    text-decoration-thickness: from-font;
    text-underline-offset: var(--soofos-space-xs);
}

.sf-teach-page .sf-teach-modal #modal-register-instructor .copyright a:hover {
    color: var(--blue-hover);
}

.sf-teach-page .sf-teach-modal #modal-register-instructor .copyright a:focus-visible {
    outline: var(--soofos-space-2xs) solid var(--deep-blue);
    outline-offset: var(--soofos-space-2xs);
    border-radius: var(--soofos-space-2xs);
}

.sf-teach-page .sf-teach-modal #modal-register-instructor .sep-login,
.sf-teach-page .sf-teach-modal #modal-register-instructor .divider-btm,
.sf-teach-page .sf-teach-modal #modal-register-instructor .emojie {
    display: none;
}

.sf-teach-page .sf-teach-modal #modal-register-instructor .bb-icon-arrow-right {
    display: inline-block;
    margin-left: var(--soofos-space-2xs);
}

.sf-teach-page .sf-teach-modal__close-note {
    margin: 0;
    color: var(--white);
    font-size: var(--soofos-player-text-md);
    text-align: center;
}

.sf-teach-page .sf-teach-modal__close-note a {
    color: var(--white);
    text-decoration: underline;
    text-decoration-thickness: from-font;
    text-underline-offset: var(--soofos-space-xs);
    display: inline-block;
    padding: var(--soofos-space-sm) var(--soofos-space-2xs);
}

.sf-teach-page .sf-teach-modal__close-note a:hover {
    color: var(--blue);
}

.sf-teach-page .sf-teach-modal__close-note a:focus-visible {
    outline: var(--soofos-space-2xs) solid var(--white);
    outline-offset: var(--soofos-space-2xs);
    border-radius: var(--soofos-space-2xs);
}

/* ---------------------------------------------------------------------
 * Responsive — up to 768px: everything stacks to one column, hero photo
 * follows the copy, stats wrap, no horizontal scroll.
 * ------------------------------------------------------------------- */

@media (max-width: 47.99rem) {
    .sf-teach-hero__inner > .wp-block-group__inner-container {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--soofos-space-2xl);
    }

    /* Copy first, visual second (source order) — extra bottom room so the
       overlapping pill never collides with the next section. */
    .sf-teach-page .sf-teach-hero {
        padding-bottom: calc(var(--soofos-space-3xl) + var(--soofos-space-2xl));
    }

    .sf-teach-hero__stats > .wp-block-group__inner-container {
        gap: var(--soofos-space-xl);
    }

    .sf-teach-what__grid > .wp-block-group__inner-container,
    .sf-teach-instructors__cards > .wp-block-group__inner-container,
    .sf-teach-quotes > .wp-block-group__inner-container,
    .sf-teach-how__grid > .wp-block-group__inner-container,
    .sf-teach-earnings__panel > .wp-block-group__inner-container,
    .sf-teach-community__card > .wp-block-group__inner-container {
        grid-template-columns: minmax(0, 1fr);
    }

    .sf-teach-what__grid > .wp-block-group__inner-container {
        gap: var(--soofos-space-2xl);
    }

    .sf-teach-page .sf-teach-earnings__panel {
        padding: var(--soofos-space-xl) var(--soofos-space-lg);
    }

    .sf-teach-page .sf-teach-earnings__rate-value {
        min-width: 0;
    }

    .sf-teach-page .sf-teach-community__photo img {
        min-height: 240px;
    }

    .sf-teach-page .sf-teach-final__panel {
        padding: var(--soofos-space-xl) var(--soofos-space-lg);
    }

    .sf-teach-final__panel > .wp-block-group__inner-container {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--soofos-space-lg);
    }
}

/* ---------------------------------------------------------------------
 * Responsive — 768px and up
 * ------------------------------------------------------------------- */

@media (min-width: 48rem) {
    .sf-teach-page .sf-teach-hero,
    .sf-teach-page .sf-teach-what,
    .sf-teach-page .sf-teach-instructors,
    .sf-teach-page .sf-teach-how,
    .sf-teach-page .sf-teach-earnings,
    .sf-teach-page .sf-teach-community,
    .sf-teach-page .sf-teach-faq,
    .sf-teach-page .sf-teach-final {
        padding-right: calc(var(--soofos-space-2xl) + var(--soofos-space-sm));
        padding-left: calc(var(--soofos-space-2xl) + var(--soofos-space-sm));
    }

    .sf-teach-page .sf-teach-hero__title {
        font-size: calc(var(--soofos-space-2xl) + var(--soofos-space-sm) + var(--soofos-space-2xs));
    }

    .sf-teach-page .sf-teach-modal:target {
        padding: calc(var(--soofos-space-3xl) + var(--soofos-space-lg));
    }

    .sf-teach-page .sf-teach-modal #modal-register-instructor .col-form {
        padding: calc(var(--soofos-space-3xl) + var(--soofos-space-lg));
    }
}

/* ---------------------------------------------------------------------
 * Reduced motion
 * ------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .sf-teach-page .sf-teach-faq__item > summary::after {
        transition: none;
    }
}