/* ============================================================
   Soofos homepage — per-page styles
   Enqueued only on the front page via soofos_enqueue_page_styles().

   Targets the native Gutenberg DOM produced by
   inc/public-page-migrations/home.php (core group / heading / paragraph /
   list / image / buttons / search / details) plus the server-rendered
   soofos/category-marquee and soofos/course-tabs blocks.

   IMPORTANT — this classic theme has no theme.json, so WordPress wraps the
   children of EVERY core group in `.wp-block-group__inner-container`. Every
   grid/flex/max-width container rule below therefore targets
   `> .wp-block-group__inner-container`, never the block element itself
   (same convention as plus.css / about.css).

   All colours, radii, shadows and fonts come from tokens.css. Where the
   design named an off-token value the nearest canonical token is used:
     design #f43f5e / #d92c4b  -> --red / --red-hover      (convert CTA)
     design #9fbcd4            -> --on-navy-faint          (navy-band meta)
     design #c6d8e7            -> --on-navy-strong         (navy-band body)
     design #8a6a2b            -> --amber-ink              (star rating)
   Behaviour lives in assets/js/home.js.
   ============================================================ */

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

.sf-home-page {
    font-family: var(--font);
    color: var(--body);
    overflow-x: hidden;
}

/* Neutralise core default block margins; each section owns its own spacing.
   :where() keeps specificity at zero so the rules below always win. */
.sf-home-page :where(p, h1, h2, h3, ul, li, figure, summary, details) { margin: 0; }
.sf-home-page :where(.wp-block-image, .wp-block-buttons, .wp-block-list, .wp-block-search) { margin: 0; }
.sf-home-page :where(.wp-block-group__inner-container) > * { margin-block-start: 0; }

.sf-home-page a { text-decoration: none; }

/* ---------- Shared pieces ---------- */

.sf-home-kicker {
    align-self: flex-start;
    background: var(--blue-fill);
    color: var(--deep-blue);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .12em;
    padding: 6px 14px;
    border-radius: var(--r-pill);
}

/* Buttons — core wraps every button as .wp-block-button > a.wp-block-button__link */
.sf-home-page .wp-block-button.sf-home-btn { margin: 0; }

.sf-home-page .sf-home-btn .wp-block-button__link {
    display: inline-block;
    border-radius: var(--r-pill);
    font-weight: 900;
    line-height: 1.2;
    white-space: nowrap;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.sf-home-page .sf-home-btn--convert .wp-block-button__link {
    background: var(--red);
    color: var(--white);
    font-size: 15.5px;
    padding: 15px 32px;
    box-shadow: var(--soofos-shadow-red-cta);
}

.sf-home-page .sf-home-btn--convert .wp-block-button__link:hover,
.sf-home-page .sf-home-btn--convert .wp-block-button__link:focus-visible {
    background: var(--red-hover);
    color: var(--white);
}

.sf-home-page .sf-home-btn--outline .wp-block-button__link {
    background: var(--white);
    border: 2px solid var(--card-border);
    color: var(--ink);
    font-size: 15px;
    font-weight: 800;
    padding: 13px 28px;
}

.sf-home-page .sf-home-btn--outline .wp-block-button__link:hover,
.sf-home-page .sf-home-btn--outline .wp-block-button__link:focus-visible {
    border-color: var(--blue);
    color: var(--ink);
}

.sf-home-page .sf-home-btn--blue .wp-block-button__link {
    background: var(--blue);
    color: var(--white);
    font-size: 14px;
    padding: 13px 28px;
}

.sf-home-page .sf-home-btn--blue .wp-block-button__link:hover,
.sf-home-page .sf-home-btn--blue .wp-block-button__link:focus-visible {
    background: var(--blue-hover);
    color: var(--white);
}

.sf-home-page .sf-home-btn--light .wp-block-button__link {
    background: var(--white);
    color: var(--ink);
    font-size: 14px;
    padding: 13px 26px;
}

.sf-home-page .sf-home-btn--light .wp-block-button__link:hover,
.sf-home-page .sf-home-btn--light .wp-block-button__link:focus-visible {
    background: var(--blue-fill);
    color: var(--ink);
}

/* ============================================================
   1. Hero
   ============================================================ */

.sf-home-hero { background: linear-gradient(180deg, var(--page), var(--white)); }

.sf-home-hero > .wp-block-group__inner-container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 56px 32px 44px;
}

.sf-home-hero__inner > .wp-block-group__inner-container {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 48px;
    align-items: center;
}

.sf-home-hero__copy > .wp-block-group__inner-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
}

.sf-home-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--blue-fill);
    color: var(--deep-blue);
    font-size: 12.5px;
    font-weight: 800;
    padding: 6px 14px;
    border-radius: var(--r-pill);
}

.sf-home-hero__title {
    font-size: 52px;
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: -1px;
    color: var(--ink);
}

.sf-home-hero__lead {
    font-size: 17.5px;
    font-weight: 600;
    line-height: 1.6;
    color: var(--muted);
    max-width: 460px;
}

.sf-home-hero__ctas {
    display: flex;
    gap: 14px;
    margin-top: 6px;
}

.sf-home-hero__trust {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    font-size: 13px;
    font-weight: 700;
    color: var(--muted);
}

.sf-home-hero__trust li { white-space: nowrap; }
.sf-home-hero__check { color: var(--deep-blue); margin-right: 5px; }

.sf-home-hero__visual > .wp-block-group__inner-container {
    position: relative;
    display: flex;
    justify-content: center;
}

.sf-home-hero__photo img {
    width: 420px;
    max-width: 100%;
    height: auto;
    display: block;
}

/* Floating motivation chips */
.sf-home-chip {
    position: absolute;
    background: var(--white);
    border-radius: 14px;
    box-shadow: var(--shadow-pop);
}

.sf-home-chip > .wp-block-group__inner-container {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
}

.sf-home-chip--streak { top: 22px; left: 6px; }
.sf-home-chip--goal { bottom: 26px; right: 0; }

.sf-home-chip__icon { font-size: 19px; line-height: 1; }
.sf-home-chip__title { font-size: 14px; font-weight: 900; color: var(--ink); }
.sf-home-chip__sub { font-size: 11.5px; font-weight: 700; color: var(--muted-2); }

/* Weekly-goal ring: conic progress track with a white disc punched out. */
.sf-home-ring {
    position: relative;
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 50%;
    background: conic-gradient(var(--blue) 0 288deg, var(--strip) 288deg 360deg);
    display: grid;
    place-items: center;
}

.sf-home-ring::before {
    content: "";
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    background: var(--white);
}

.sf-home-ring__value {
    position: relative;
    font-size: 9px;
    font-weight: 900;
    color: var(--ink);
}

/* ============================================================
   2. Category marquee (soofos/category-marquee)
   ============================================================ */

.sf-home-marquee { background: var(--white); }

.sf-home-marquee > .wp-block-group__inner-container {
    padding: 8px 0 40px;
    -webkit-mask-image: linear-gradient(90deg, transparent, var(--soofos-marquee-fade-color) var(--soofos-marquee-fade-start), var(--soofos-marquee-fade-color) var(--soofos-marquee-fade-end), transparent);
    mask-image: linear-gradient(90deg, transparent, var(--soofos-marquee-fade-color) var(--soofos-marquee-fade-start), var(--soofos-marquee-fade-color) var(--soofos-marquee-fade-end), transparent);
}

.sf-marquee__lane { overflow: hidden; }
.sf-marquee__lane + .sf-marquee__lane { margin-top: 14px; }

.sf-marquee__track {
    display: flex;
    gap: 14px;
    width: max-content;
    animation: sf-marquee-left var(--sf-marquee-duration, 110s) linear infinite;
}

.sf-marquee__track--right { animation-name: sf-marquee-right; }

.sf-marquee:hover .sf-marquee__track,
.sf-marquee:focus-within .sf-marquee__track { animation-play-state: paused; }

/* Half the duplicated track plus half of the seam gap keeps the loop seamless. */
@keyframes sf-marquee-left {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-50% - 7px)); }
}

@keyframes sf-marquee-right {
    from { transform: translateX(calc(-50% - 7px)); }
    to   { transform: translateX(0); }
}

.sf-marquee__tile {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 290px;
    height: 150px;
    border-radius: var(--r-card-lg);
    padding: 16px 16px 16px 22px;
    transition: transform .2s ease;
}

.sf-marquee__tile:hover { transform: translateY(-2px); }

.sf-marquee__tile-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}

.sf-marquee__tile-name {
    font-size: 15.5px;
    font-weight: 800;
    line-height: 1.25;
    color: var(--white);
}

.sf-marquee__tile-count {
    font-size: 12px;
    font-weight: 700;
    color: var(--soofos-overlay-white-85);
}

.sf-marquee__tile-photo {
    width: 112px;
    height: 118px;
    flex: none;
    border-radius: 10px;
    background-color: var(--soofos-overlay-white-15);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

@media (prefers-reduced-motion: reduce) {
    .sf-marquee__track { animation: none; }
    .sf-marquee__lane { overflow-x: auto; }
}

/* ============================================================
   3. Ask band
   ============================================================ */

.sf-home-ask { background: var(--white); }

.sf-home-ask > .wp-block-group__inner-container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 32px 56px;
}

.sf-home-ask__panel {
    background: var(--ink);
    border-radius: var(--r-card-lg);
}

.sf-home-ask__panel > .wp-block-group__inner-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px 24px;
    padding: 26px 32px;
}

.sf-home-ask__copy { flex: none; }
.sf-home-ask__title { font-size: 17px; font-weight: 900; color: var(--white); }

.sf-home-ask__sub {
    font-size: 13px;
    font-weight: 600;
    color: var(--on-navy-faint);
    margin-top: 2px;
}

/* core/search, button-inside variant */
.sf-home-page .sf-home-ask__search {
    flex: 1;
    min-width: 320px;
}

.sf-home-page .sf-home-ask__search .wp-block-search__inside-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--white);
    border: none;
    border-radius: var(--r-pill);
    padding: 8px 8px 8px 22px;
}

.sf-home-page .sf-home-ask__search .wp-block-search__input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--font);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ink);
    padding: 0;
}

.sf-home-page .sf-home-ask__search .wp-block-search__input::placeholder { color: var(--faint); }

.sf-home-page .sf-home-ask__search .wp-block-search__button {
    flex: none;
    border: none;
    background: var(--blue-fill);
    color: var(--deep-blue);
    font-family: var(--font);
    font-size: 14px;
    font-weight: 900;
    padding: 12px 24px;
    margin: 0;
    border-radius: var(--r-pill);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .18s ease;
}

.sf-home-page .sf-home-ask__search .wp-block-search__button:hover,
.sf-home-page .sf-home-ask__search .wp-block-search__button:focus-visible {
    background: var(--card-border);
}

.sf-home-ask__popular {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--on-navy-faint);
    white-space: nowrap;
}

.sf-home-ask__popular a { color: var(--white); }
.sf-home-ask__popular a:hover { color: var(--blue-fill); }

/* ============================================================
   4. New on Soofos (soofos/course-tabs -> soofos/course-grid)
   ============================================================ */

.sf-home-new { background: var(--page); }

.sf-home-new > .wp-block-group__inner-container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 56px 32px 64px;
}

.sf-home-new__heading {
    font-size: 30px;
    font-weight: 900;
    letter-spacing: -.4px;
    color: var(--ink);
    margin-bottom: 6px;
}

.sf-home-new__sub {
    font-size: 15px;
    font-weight: 600;
    color: var(--muted);
    margin-bottom: 22px;
}

.sf-course-tabs__bar {
    display: flex;
    align-items: center;
    gap: 22px;
    border-bottom: 1.5px solid var(--card-border);
    margin-bottom: 26px;
}

.sf-course-tabs__tab {
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--muted);
    font-size: 14.5px;
    font-weight: 700;
    padding: 0 2px 11px;
    margin-bottom: -1.5px;
    cursor: pointer;
}

.sf-course-tabs__tab.is-active {
    border-bottom-color: var(--blue);
    color: var(--ink);
    font-weight: 800;
}

.sf-course-tabs__all {
    margin-left: auto;
    font-size: 13.5px;
    font-weight: 800;
    color: var(--deep-blue);
    padding-bottom: 12px;
}

.sf-course-tabs__all:hover { color: var(--blue-hover); }

/* Server-rendered panels: all are present for SEO / no-JS; home.js hides
   the inactive ones once it takes over. */
.sf-course-tabs__panel + .sf-course-tabs__panel { margin-top: 26px; }

.sf-home-new .soofos-course-grid { gap: 18px !important; }

.sf-home-new .course-card {
    display: block;
    background: var(--white);
    border: 1px solid var(--card-border);
    border-radius: var(--r-card);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    transition: box-shadow .2s ease, transform .2s ease;
}

.sf-home-new .course-card:hover {
    box-shadow: var(--soofos-shadow-navy-card);
    transform: translateY(-2px);
}

.sf-home-new .course-card__thumb {
    position: relative;
    height: 150px;
    background: var(--strip);
}

.sf-home-new .course-card__badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--blue-fill);
    color: var(--deep-blue);
    font-size: 11px;
    font-weight: 900;
    padding: 4px 10px;
    border-radius: var(--r-pill);
}

.sf-home-new .course-card__body { padding: 14px 16px 16px; }

.sf-home-new .course-card__title {
    font-size: 14.5px;
    font-weight: 800;
    line-height: 1.4;
    color: var(--ink);
    min-height: 60px;
}

.sf-home-new .course-card__price {
    font-size: 16.5px;
    font-weight: 900;
    color: var(--ink);
}

/* Equal-height cards: rows differ when a course has no price/rating row. */
.sf-home-new .soofos-course-grid { align-items: stretch; }
.sf-home-new .course-card-wrap { height: 100%; }

.sf-home-new .course-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.sf-home-new .course-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.sf-home-new .course-card__price { margin-top: auto; }

/* ============================================================
   5. USP carousel
   ============================================================ */

.sf-home-usp { background: var(--white); }

.sf-home-usp > .wp-block-group__inner-container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 64px 32px;
}

.sf-home-usp__heading {
    font-size: 30px;
    font-weight: 900;
    letter-spacing: -.4px;
    color: var(--ink);
    text-align: center;
    margin-bottom: 6px;
}

.sf-home-usp__sub {
    font-size: 15px;
    font-weight: 600;
    color: var(--muted);
    text-align: center;
    margin-bottom: 28px;
}

.sf-home-usp__stage {
    position: relative;
    border-radius: var(--r-card-lg);
    background: var(--ink);
    box-shadow: var(--soofos-shadow-navy-stage);
    overflow: hidden;
}

/* The scrolling element is the group's inner container (see file header).
   Scroll-snap keeps the carousel usable with JavaScript disabled. */
.sf-home-usp__track > .wp-block-group__inner-container {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.sf-home-usp__track > .wp-block-group__inner-container::-webkit-scrollbar { display: none; }

.sf-home-usp__slide {
    /* Exactly one track-width per slide: with only min-width the flex item
       sizes to max-content (its widest child) and clips past the viewport. */
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    flex: none;
    scroll-snap-align: start;
}

.sf-home-usp__slide > .wp-block-group__inner-container > * {
    min-width: 0;
}

.sf-home-usp__slide > .wp-block-group__inner-container {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 44px;
    align-items: center;
    padding: 48px 56px 64px;
}

.sf-home-usp__copy > .wp-block-group__inner-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 13px;
}

.sf-home-usp__kicker {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .14em;
    color: var(--on-navy-faint);
}

.sf-home-usp__title {
    font-size: 32px;
    font-weight: 900;
    line-height: 1.18;
    letter-spacing: -.4px;
    color: var(--white);
}

.sf-home-usp__body {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.65;
    color: var(--on-navy-strong);
    max-width: 440px;
}

.sf-home-usp__copy .wp-block-buttons { margin-top: 8px; }

.sf-home-usp__img img {
    display: block;
    width: 100%;
    height: 300px;
    object-fit: contain;
}

/* Controls are injected by home.js — hidden entirely without it. */
.sf-home-usp__dots {
    position: absolute;
    left: 56px;
    bottom: 24px;
    display: flex;
    gap: 8px;
    align-items: center;
}

.sf-home-usp__dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--soofos-overlay-white-35);
    cursor: pointer;
    transition: width .3s ease, background-color .3s ease, border-radius .3s ease;
}

.sf-home-usp__dot.is-active {
    width: 24px;
    border-radius: var(--r-pill);
    background: var(--white);
}

.sf-home-usp__nav {
    position: absolute;
    right: 44px;
    bottom: 14px;
    display: flex;
    gap: 10px;
}

.sf-home-usp__arrow {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1.5px solid var(--on-navy-line);
    background: transparent;
    color: var(--white);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    transition: background-color .18s ease;
}

.sf-home-usp__arrow:hover { background: var(--soofos-overlay-white-10); }

/* ============================================================
   6. Instructors
   ============================================================ */

.sf-home-teachers { background: var(--page); }

.sf-home-teachers > .wp-block-group__inner-container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 64px 32px;
}

.sf-home-teachers__inner > .wp-block-group__inner-container {
    display: grid;
    grid-template-columns: 1fr .9fr;
    gap: 40px;
    align-items: center;
}

.sf-home-teachers__copy > .wp-block-group__inner-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.sf-home-teachers__heading {
    font-size: 38px;
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -.6px;
    color: var(--ink);
}

.sf-home-teachers__body {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.65;
    color: var(--muted);
    max-width: 460px;
}

.sf-home-teachers__copy .wp-block-buttons {
    display: flex;
    gap: 14px;
    margin-top: 6px;
}

.sf-home-teachers__fan > .wp-block-group__inner-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px 0;
}

.sf-home-teacher {
    background: var(--white);
    border: 1px solid var(--card-border);
    border-radius: var(--r-card);
    box-shadow: var(--soofos-shadow-navy-soft);
}

.sf-home-teacher > .wp-block-group__inner-container { padding: 8px 8px 12px; }

.sf-home-teacher:nth-child(1) { transform: rotate(-5deg); }

.sf-home-teacher:nth-child(2) {
    transform: rotate(2deg);
    margin-left: -26px;
    position: relative;
    z-index: 2;
}

.sf-home-teacher:nth-child(3) {
    transform: rotate(-2deg);
    margin-left: -26px;
}

.sf-home-teacher__photo img {
    display: block;
    width: 158px;
    height: 170px;
    border-radius: 10px;
    object-fit: cover;
}

.sf-home-teacher__name {
    padding: 8px 6px 0;
    font-size: 13px;
    font-weight: 900;
    color: var(--ink);
}

.sf-home-teacher__field {
    padding: 0 6px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--muted-2);
}

/* ============================================================
   7. Testimonials
   ============================================================ */

.sf-home-quotes { background: var(--white); }

.sf-home-quotes > .wp-block-group__inner-container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 64px 32px;
}

.sf-home-quotes__header > .wp-block-group__inner-container {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}

.sf-home-quotes__heading {
    font-size: 30px;
    font-weight: 900;
    letter-spacing: -.4px;
    color: var(--ink);
}

.sf-home-quotes__link { font-size: 13.5px; font-weight: 800; }
.sf-home-quotes__link a { color: var(--deep-blue); }
.sf-home-quotes__link a:hover { color: var(--blue-hover); }

.sf-home-quotes__grid > .wp-block-group__inner-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.sf-home-quote {
    background: var(--white);
    border: 1px solid var(--card-border);
    border-radius: var(--r-card);
}

.sf-home-quote > .wp-block-group__inner-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
    padding: 22px 24px;
}

.sf-home-quote__stars {
    font-size: 13px;
    font-weight: 800;
    color: var(--amber-ink);
    letter-spacing: 1px;
}

.sf-home-quote__text {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.65;
    color: var(--ink);
}

.sf-home-quote__author { margin-top: auto; }

.sf-home-quote__author > .wp-block-group__inner-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sf-home-quote__avatar img {
    display: block;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
}

.sf-home-quote__name { font-size: 12.5px; font-weight: 800; color: var(--ink); }
.sf-home-quote__role { font-size: 11px; font-weight: 700; color: var(--muted-2); }

/* ============================================================
   8-10. Product sections (programs / business / teach)
   ============================================================ */

.sf-home-product--programs { background: var(--page); }
.sf-home-product--business { background: var(--ink); }
.sf-home-product--teach { background: var(--white); }

.sf-home-product > .wp-block-group__inner-container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 64px 32px;
}

.sf-home-product__inner > .wp-block-group__inner-container {
    display: grid;
    grid-template-columns: 1.05fr .8fr;
    gap: 52px;
    align-items: center;
}

/* Business band leads with the image, so the columns flip. */
.sf-home-product--business .sf-home-product__inner > .wp-block-group__inner-container {
    grid-template-columns: .8fr 1.05fr;
}

.sf-home-product__copy > .wp-block-group__inner-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.sf-home-product__heading {
    font-size: 32px;
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -.5px;
    color: var(--ink);
}

.sf-home-product__intro {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.65;
    color: var(--muted);
}

.sf-home-product__bullets { width: 100%; }

.sf-home-product__bullets > .wp-block-group__inner-container {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.sf-home-bullet__title { font-size: 15px; font-weight: 800; color: var(--ink); }

.sf-home-bullet__body {
    margin-top: 3px;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.6;
    color: var(--muted);
}

.sf-home-product__copy .wp-block-buttons { margin-top: 4px; }

.sf-home-product__img img {
    display: block;
    width: 100%;
    max-height: 460px;
    object-fit: contain;
}

/* Navy variant text colours */
.sf-home-product--business .sf-home-kicker {
    background: var(--on-navy-fill);
    color: var(--on-navy-faint);
}

.sf-home-product--business .sf-home-product__heading,
.sf-home-product--business .sf-home-bullet__title { color: var(--white); }

.sf-home-product--business .sf-home-product__intro,
.sf-home-product--business .sf-home-bullet__body { color: var(--on-navy-strong); }

.sf-home-product--business .sf-home-product__img img { max-height: 440px; }
.sf-home-product--teach .sf-home-product__img img { max-height: 440px; }

/* ============================================================
   11. FAQ (core/details, single-open via home.js)
   ============================================================ */

.sf-home-faq { background: var(--page); }

.sf-home-faq > .wp-block-group__inner-container {
    max-width: 820px;
    margin: 0 auto;
    padding: 64px 32px;
}

.sf-home-faq__heading {
    font-size: 30px;
    font-weight: 900;
    letter-spacing: -.4px;
    color: var(--ink);
    text-align: center;
    margin-bottom: 24px;
}

.sf-home-faq__list > .wp-block-group__inner-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sf-home-faq__item {
    background: var(--white);
    border: 1px solid var(--card-border);
    border-radius: 14px;
    overflow: hidden;
}

.sf-home-page .sf-home-faq__item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 17px 22px;
    font-size: 15px;
    font-weight: 800;
    color: var(--ink);
    cursor: pointer;
    list-style: none;
}

.sf-home-faq__item summary::-webkit-details-marker { display: none; }
.sf-home-faq__item summary::marker { content: ""; }

.sf-home-faq__item summary::after {
    content: "+";
    flex: none;
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
    color: var(--deep-blue);
    transition: transform .25s ease;
}

.sf-home-faq__item[open] summary::after { transform: rotate(45deg); }

.sf-home-faq__answer {
    padding: 0 22px 18px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.65;
    color: var(--muted);
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 1024px) {
    .sf-home-hero__inner > .wp-block-group__inner-container,
    .sf-home-teachers__inner > .wp-block-group__inner-container,
    .sf-home-product__inner > .wp-block-group__inner-container,
    .sf-home-product--business .sf-home-product__inner > .wp-block-group__inner-container,
    .sf-home-usp__slide > .wp-block-group__inner-container {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .sf-home-product--business .sf-home-product__inner > .wp-block-group__inner-container > .sf-home-product__img { order: 2; }

    .sf-home-hero__title { font-size: 40px; }
    .sf-home-teachers__heading { font-size: 30px; }
    .sf-home-usp__slide > .wp-block-group__inner-container { padding: 40px 32px 64px; }
    .sf-home-usp__dots { left: 32px; }
    .sf-home-usp__nav { right: 24px; }

    .sf-home-quotes__grid > .wp-block-group__inner-container { grid-template-columns: 1fr; }
    .sf-home-new .soofos-course-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 640px) {
    .sf-home-hero > .wp-block-group__inner-container,
    .sf-home-ask > .wp-block-group__inner-container,
    .sf-home-new > .wp-block-group__inner-container,
    .sf-home-usp > .wp-block-group__inner-container,
    .sf-home-teachers > .wp-block-group__inner-container,
    .sf-home-quotes > .wp-block-group__inner-container,
    .sf-home-product > .wp-block-group__inner-container,
    .sf-home-faq > .wp-block-group__inner-container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .sf-home-hero__title { font-size: 32px; }
    .sf-home-hero__ctas { flex-wrap: wrap; }
    .sf-home-chip { display: none; }

    .sf-home-ask__panel > .wp-block-group__inner-container { padding: 22px 20px; }
    .sf-home-page .sf-home-ask__search { min-width: 100%; }
    .sf-home-ask__popular { white-space: normal; }

    .sf-home-new .soofos-course-grid { grid-template-columns: 1fr !important; }
    .sf-course-tabs__bar { overflow-x: auto; }
    .sf-course-tabs__all { display: none; }

    .sf-home-usp__title { font-size: 24px; }
    .sf-home-usp__nav { display: none; }

    .sf-home-teachers__fan > .wp-block-group__inner-container { transform: scale(.8); }
    .sf-home-product__heading { font-size: 26px; }
}