/* ──────────────────────────────────────────────────────────
 * SFC Theme — foundation styles
 * EVERY rule in this file scopes under .sfc-preview-active so
 * it only applies in preview mode. Public visitors see the
 * unmodified theme until the gate is flipped publicly.
 * ──────────────────────────────────────────────────────── */

/* ── Global text-transform reset ─────────────────────────────
 * TwentyTwentyFour theme.json global styles inject:
 *   body { text-transform: capitalize; }
 *   h1,h2,h3,h4,h5,h6 { text-transform: capitalize; }
 *   nav li { text-transform: capitalize; } (inline style too)
 * We blanket-reset everything under our scope so Greek body
 * text renders in sentence case as the content was written.
 */
body.sfc-preview-active,
body.sfc-v2-page {
  text-transform: none;
}
.sfc-preview-active p,
.sfc-preview-active li,
.sfc-preview-active h1,
.sfc-preview-active h2,
.sfc-preview-active h3,
.sfc-preview-active h4,
.sfc-preview-active h5,
.sfc-preview-active h6,
.sfc-preview-active span,
.sfc-preview-active figcaption,
.sfc-preview-active .wp-element-button,
.sfc-preview-active .wp-block-button__link {
  text-transform: none;
}
/* Nav items use inline style="text-transform:capitalize" — needs !important */
.sfc-preview-active .wp-block-navigation-item {
  text-transform: none !important;
}

/* ── Preview banner (top, always visible when in preview) ── */
#sfc-preview-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 52px;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 1.25rem;
  background: linear-gradient(180deg,
    rgba(11, 11, 12, 0.96) 0%,
    rgba(11, 11, 12, 0.92) 100%);
  border-bottom: 1px solid var(--sfc-accent-dim);
  box-shadow: 0 2px 0 rgba(224, 48, 32, 0.18),
              0 12px 30px -10px rgba(0, 0, 0, 0.6);
  color: var(--sfc-text);
  font-family: var(--sfc-font-body);
  font-size: 0.8125rem;
  z-index: 99999;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
#sfc-preview-banner .sfc-preview-banner__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--sfc-accent);
  box-shadow: 0 0 16px rgba(224, 48, 32, 0.8);
  animation: sfc-pulse 2s var(--sfc-easing-spring) infinite;
  flex: none;
}
@keyframes sfc-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(1.25); }
}
#sfc-preview-banner .sfc-preview-banner__label {
  font-family: var(--sfc-font-display);
  font-weight: 800;
  font-size: 0.875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sfc-accent);
}
#sfc-preview-banner .sfc-preview-banner__sub {
  color: var(--sfc-text-muted);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#sfc-preview-banner .sfc-preview-banner__exit {
  margin-left: auto;
  padding: 0.375rem 0.875rem;
  border: 1px solid var(--sfc-hairline-strong);
  border-radius: var(--sfc-radius-pill);
  color: var(--sfc-text-muted);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--sfc-duration-fast) var(--sfc-easing-spring),
              border-color var(--sfc-duration-fast) var(--sfc-easing-spring),
              background-color var(--sfc-duration-fast) var(--sfc-easing-spring);
  flex: none;
}
#sfc-preview-banner .sfc-preview-banner__exit:hover {
  color: var(--sfc-accent-fg);
  background: var(--sfc-accent);
  border-color: var(--sfc-accent);
}
.sfc-preview-active.admin-bar #sfc-preview-banner { top: 32px; }
@media (max-width: 782px) {
  .sfc-preview-active.admin-bar #sfc-preview-banner { top: 46px; }
  #sfc-preview-banner { height: 48px; font-size: 0.75rem; padding: 0 0.875rem; }
  #sfc-preview-banner .sfc-preview-banner__sub { display: none; }
}

/* (Body padding handled by the sticky header offset directly — no body padding here.) */

/* ── Corner watermark (always visible in preview) ── */
#sfc-preview-corner {
  position: fixed;
  bottom: 18px;
  right: 18px;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.875rem 0.5rem 0.625rem;
  background: var(--sfc-bg);
  border: 1px solid var(--sfc-accent-dim);
  border-radius: var(--sfc-radius-pill);
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.5),
              0 0 24px rgba(224, 48, 32, 0.15);
  font-family: var(--sfc-font-body);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sfc-text-muted);
  z-index: 99998;
  pointer-events: none;
}
#sfc-preview-corner .sfc-preview-corner__brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--sfc-accent);
  color: var(--sfc-accent-fg);
  font-family: var(--sfc-font-display);
  font-weight: 800;
  font-size: 0.625rem;
  letter-spacing: 0;
}
@media (max-width: 600px) {
  #sfc-preview-corner { display: none; }
}

/* ── V2 corner badge (replaces preview pill on *-v2 pages) ── */
#sfc-v2-corner {
  position: fixed;
  bottom: 18px;
  right: 18px;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.875rem 0.5rem 0.625rem;
  background: var(--sfc-bg);
  border: 1px solid var(--sfc-accent);
  border-radius: var(--sfc-radius-pill);
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.5),
              0 0 32px rgba(224, 48, 32, 0.28);
  font-family: var(--sfc-font-body);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sfc-text);
  z-index: 99998;
  pointer-events: none;
}
#sfc-v2-corner .sfc-preview-corner__brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--sfc-accent);
  color: var(--sfc-accent-fg);
  font-family: var(--sfc-font-display);
  font-weight: 800;
  font-size: 0.625rem;
  letter-spacing: 0;
}
@media (max-width: 600px) {
  #sfc-v2-corner { display: none; }
}

/* ── Reduced motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .sfc-preview-active *,
  .sfc-preview-active *::before,
  .sfc-preview-active *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  #sfc-preview-banner .sfc-preview-banner__dot { animation: none; }
}

/* ──────────────────────────────────────────────────────────
 * Foundation classes (scoped under .sfc-preview-active)
 * Sprint 3 will populate per-page rules using these.
 * For now: sanity-check rule on the body so we can confirm
 * the preview gate is active.
 * ──────────────────────────────────────────────────────── */

.sfc-preview-active {
  /* nothing visible yet — Sprint 3 fills this in */
}

/* Subtle bottom accent bar — confirms preview without being aggressive */
.sfc-preview-active::after {
  content: '';
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--sfc-accent) 25%,
    var(--sfc-accent) 75%,
    transparent 100%);
  pointer-events: none;
  z-index: 99996;
  opacity: 0.5;
}

/* ── Reusable foundation primitives (kicked off, fleshed out in Sprint 3) ── */

.sfc-preview-active .sfc-eyebrow {
  display: inline-block;
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--sfc-hairline-strong);
  border-radius: var(--sfc-radius-pill);
  font-family: var(--sfc-font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--sfc-text-muted);
}

.sfc-preview-active .sfc-card {
  background: var(--sfc-hairline);
  border: 1px solid var(--sfc-hairline-strong);
  border-radius: var(--sfc-radius-card);
  padding: 0.375rem;
}
.sfc-preview-active .sfc-card__inner {
  background: var(--sfc-surface);
  border-radius: var(--sfc-radius-card-inner);
  box-shadow: var(--sfc-shadow-edge-top);
  padding: clamp(1.25rem, 3vw, 2rem);
}

.sfc-preview-active .sfc-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.375rem;
  border-radius: var(--sfc-radius-pill);
  font-family: var(--sfc-font-body);
  font-size: var(--sfc-text-body);
  font-weight: 600;
  letter-spacing: var(--sfc-tracking-tight);
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--sfc-duration) var(--sfc-easing-spring),
              background-color var(--sfc-duration) var(--sfc-easing-spring),
              color var(--sfc-duration) var(--sfc-easing-spring),
              border-color var(--sfc-duration) var(--sfc-easing-spring);
}
.sfc-preview-active .sfc-btn--primary {
  background: var(--sfc-accent);
  color: var(--sfc-accent-fg);
  border: 1px solid var(--sfc-accent);
}
.sfc-preview-active .sfc-btn--primary:hover {
  background: var(--sfc-accent-hover);
  border-color: var(--sfc-accent-hover);
}
.sfc-preview-active .sfc-btn--secondary {
  background: transparent;
  color: var(--sfc-text);
  border: 1px solid var(--sfc-hairline-strong);
}
.sfc-preview-active .sfc-btn--secondary:hover {
  background: var(--sfc-hairline);
  border-color: var(--sfc-text-muted);
}
.sfc-preview-active .sfc-btn:active {
  transform: translateY(1px) scale(0.98);
}

.sfc-preview-active .sfc-h1 {
  font-family: var(--sfc-font-display);
  font-weight: 800;
  font-size: var(--sfc-text-display-1);
  line-height: var(--sfc-leading-display);
  letter-spacing: var(--sfc-tracking-display);
  text-transform: uppercase;
  color: var(--sfc-text);
}
.sfc-preview-active .sfc-h2 {
  font-family: var(--sfc-font-display);
  font-weight: 600;
  font-size: var(--sfc-text-display-2);
  line-height: var(--sfc-leading-tight);
  letter-spacing: var(--sfc-tracking-display);
  color: var(--sfc-text);
}

/* ── Reveal on enter (driven by sfc-preview.js) ────────── */
.sfc-preview-active [data-sfc-reveal] {
  opacity: 0;
  transform: translateY(24px);
  filter: blur(4px);
  transition: opacity var(--sfc-duration-slow) var(--sfc-easing-emphasis),
              transform var(--sfc-duration-slow) var(--sfc-easing-emphasis),
              filter var(--sfc-duration-slow) var(--sfc-easing-emphasis);
  will-change: opacity, transform, filter;
}
.sfc-preview-active [data-sfc-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* ──────────────────────────────────────────────────────────
 * SITE-WIDE CHROME (Sprint 3 — Phase 1)
 * Applies the design language to body, header, footer, and
 * the common Spectra block wrappers. Page-specific reskins
 * come in subsequent phases.
 * ──────────────────────────────────────────────────────── */

/* ── Body / canvas baseline ────────────────────────────── */
body.sfc-preview-active {
  background-color: var(--sfc-bg) !important;
  color: var(--sfc-text);
  font-family: var(--sfc-font-body);
  font-size: var(--sfc-text-body);
  line-height: var(--sfc-leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.sfc-preview-active .wp-site-blocks,
.sfc-preview-active .is-root-container {
  background-color: var(--sfc-bg) !important;
}

/* Default link treatment (everywhere except header nav, which is restyled below) */
.sfc-preview-active a {
  color: var(--sfc-accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--sfc-duration-fast) var(--sfc-easing-spring),
              border-color var(--sfc-duration-fast) var(--sfc-easing-spring);
}
.sfc-preview-active a:hover {
  color: var(--sfc-accent-hover);
  border-bottom-color: var(--sfc-accent-dim);
}

/* Default headings — Saira Condensed */
.sfc-preview-active h1,
.sfc-preview-active h2,
.sfc-preview-active h3,
.sfc-preview-active h4,
.sfc-preview-active h5,
.sfc-preview-active h6,
.sfc-preview-active .uagb-heading-text,
.sfc-preview-active .eb-advanced-heading-text {
  font-family: var(--sfc-font-display) !important;
  letter-spacing: var(--sfc-tracking-display);
  color: var(--sfc-text);
  line-height: var(--sfc-leading-tight);
}
.sfc-preview-active h1, .sfc-preview-active .eb-advanced-heading-text[data-tag="h1"] {
  font-weight: 800;
  font-size: var(--sfc-text-display-1);
  line-height: var(--sfc-leading-display);
  margin-bottom: clamp(1rem, 2vw, 1.75rem);
}
.sfc-preview-active h2, .sfc-preview-active .uagb-heading-text {
  font-weight: 700;
  font-size: var(--sfc-text-display-2);
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}
.sfc-preview-active h3 {
  font-weight: 600;
  font-size: var(--sfc-text-display-3);
  margin-bottom: 1rem;
}
/* Force section breathing room around UAG advanced-heading blocks
   (these often render flush against the next block — the Group Training
   schedule page is the offender). */
.sfc-preview-active .wp-block-uagb-advanced-heading {
  margin-top: clamp(2rem, 5vw, 3.5rem);
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
/* Schedule-page specific: the "Group Training" / "Pilates Mat" / "Pilates Reformer"
   H2s are sectional headings — give them more isolation. */
.sfc-preview-active.page-id-2568 .wp-block-uagb-advanced-heading {
  margin-top: clamp(3rem, 7vw, 5rem);
}

/* Body paragraph + list — Commissioner */
.sfc-preview-active p,
.sfc-preview-active li {
  font-family: var(--sfc-font-body) !important;
  color: var(--sfc-text);
}
.sfc-preview-active p:not(:last-child) { margin-bottom: 1.25rem; }

/* Strong/emphasis — accent on highlighted Greek phrases */
.sfc-preview-active strong { color: var(--sfc-text); font-weight: 600; }

/* ── Global inline-style nuke ───────────────────────────
   Spectra/UAG bakes the legacy navy color into inline styles in
   THREE distinct formats — we have to catch all of them:
     1. rgba(16,24,40,1) / rgba(16, 24, 40, 1)  — Spectra wrappers
     2. #101828 (the same color as hex)         — WP core columns
     3. has-contrast-background-color           — twentytwentyfour theme.json preset (#111111)
   Plus the base preset (#f9f9f9, light) which would clash on dark canvas. */
.sfc-preview-active [style*="rgba(16, 24, 40"],
.sfc-preview-active [style*="rgba(16,24,40"],
.sfc-preview-active [style*="#101828"],
.sfc-preview-active [style*="#101828" i] {
  background-color: transparent !important;
  background-image: none !important;
}
.sfc-preview-active .has-contrast-background-color,
.sfc-preview-active .has-base-background-color,
.sfc-preview-active .has-base-2-background-color {
  background-color: var(--sfc-bg) !important;
}
.sfc-preview-active .has-contrast-color,
.sfc-preview-active .has-base-color,
.sfc-preview-active .has-base-2-color {
  color: var(--sfc-text) !important;
}
/* Specific Spectra/UAG container backgrounds */
.sfc-preview-active .wp-block-essential-blocks-wrapper .eb-wrapper-outer,
.sfc-preview-active .wp-block-essential-blocks-row .eb-row-root-container,
.sfc-preview-active .wp-block-essential-blocks-column .eb-column-wrapper,
.sfc-preview-active .wp-block-uagb-container,
.sfc-preview-active .wp-block-uagb-container > .uagb-container,
.sfc-preview-active [class*="uagb-container-"][class*="block-"] {
  background-color: transparent !important;
  background-image: none !important;
}

/* The body itself + the root WP site-blocks wrapper carry our canvas */
.sfc-preview-active .wp-site-blocks::before,
.sfc-preview-active .wp-site-blocks::after { background: transparent !important; }

/* ── HEADER ─────────────────────────────────────────────
   The site uses an FSE block-theme header template part. We want it
   sticky and visually layered above the page. Important: NO backdrop-filter
   here — it creates a stacking context that traps the nav submenu inside
   the header's bounds (causes the visible-but-clipped submenu bug). */
.sfc-preview-active header.wp-block-template-part,
.sfc-preview-active header[class*="wp-block-template-part"] {
  position: sticky !important;
  top: 0;
  z-index: 90000;
  /* Allow children (submenu) to escape vertically without overflow clip */
  overflow: visible !important;
}
/* Push sticky header below admin bar when admin is logged in */
.sfc-preview-active.admin-bar header.wp-block-template-part {
  top: 32px;
}
@media (max-width: 782px) {
  .sfc-preview-active.admin-bar header.wp-block-template-part {
    top: 46px;
  }
}
/* And below the SFC banner when banner is visible (on by default in preview) */
.sfc-preview-active header.wp-block-template-part {
  top: 52px;
}
.sfc-preview-active.admin-bar header.wp-block-template-part {
  top: calc(52px + 32px);
}
@media (max-width: 782px) {
  .sfc-preview-active header.wp-block-template-part { top: 48px; }
  .sfc-preview-active.admin-bar header.wp-block-template-part { top: calc(48px + 46px); }
}

/* The actual visual surface — solid semi-transparent dark, NO backdrop-filter.
   We keep the visual "premium dark layer" without creating a stacking context. */
.sfc-preview-active .eb-wrapper-outer.eb-wrapper-6bc8v {
  background-color: rgba(11, 11, 12, 0.92) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--sfc-hairline) !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  padding-left: clamp(16px, 4vw, 32px) !important;
  padding-right: clamp(16px, 4vw, 32px) !important;
  transition: background-color var(--sfc-duration) var(--sfc-easing-spring),
              padding var(--sfc-duration) var(--sfc-easing-spring);
  /* DELIBERATELY no backdrop-filter — see comment above on stacking context */
}
.sfc-preview-active .eb-row-9x9mt > .eb-row-wrapper > .eb-row-inner {
  align-items: center !important;
  gap: clamp(1rem, 4vw, 2.5rem);
}

/* Logo column — drop right padding (the existing 20px is too cramped on mobile) */
.sfc-preview-active .eb-parent-eb-column-waxlc { padding-right: 0 !important; }
.sfc-preview-active .eb-parent-eb-column-p366k {
  background-color: transparent !important;
  padding: 0 !important;
}

/* Site logo */
.sfc-preview-active .wp-block-site-logo img {
  filter: brightness(1.05);
  transition: transform var(--sfc-duration) var(--sfc-easing-spring);
}
.sfc-preview-active .wp-block-site-logo:hover img { transform: scale(1.04); }

/* ── Navigation block ──────────────────────────────────
   The wp:navigation block in the header. Style links + submenu. */
.sfc-preview-active .wp-block-navigation {
  font-family: var(--sfc-font-display) !important;
}
.sfc-preview-active .wp-block-navigation .wp-block-navigation__container {
  gap: 0.25rem !important;
  align-items: center !important;
}
.sfc-preview-active .wp-block-navigation .wp-block-navigation-item__content {
  font-family: var(--sfc-font-display);
  font-weight: 500;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  word-spacing: 0.05em;
  line-height: 1;
  text-transform: none;
  white-space: nowrap;
  color: var(--sfc-text) !important;
  padding: 0.55rem 1rem !important;
  border-radius: var(--sfc-radius-pill);
  border: 1px solid transparent;
  transition: color var(--sfc-duration-fast) var(--sfc-easing-spring),
              background-color var(--sfc-duration-fast) var(--sfc-easing-spring),
              border-color var(--sfc-duration-fast) var(--sfc-easing-spring);
}
.sfc-preview-active .wp-block-navigation .wp-block-navigation-item__content:hover,
.sfc-preview-active .wp-block-navigation .wp-block-navigation-item__content:focus,
.sfc-preview-active .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
  color: var(--sfc-accent) !important;
  background-color: var(--sfc-hairline);
  border-color: var(--sfc-hairline-strong);
}

/* Submenu dropdown — escape parent stacking context via super-high z-index
   and ensure all ancestors allow overflow:visible. */
.sfc-preview-active .wp-block-navigation__submenu-container {
  position: absolute !important;
  z-index: 99999 !important;
  background: var(--sfc-surface) !important;
  border: 1px solid var(--sfc-hairline-strong) !important;
  border-radius: var(--sfc-radius-card-inner) !important;
  box-shadow: 0 30px 60px -25px rgba(0, 0, 0, 0.7),
              inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  padding: 0.5rem !important;
  min-width: 260px !important;
  margin-top: 0.625rem !important;
  display: flex !important;
  flex-direction: column !important;
  /* Hidden by default — shown only on click via sfc-submenu-open */
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  gap: 0.125rem;
  overflow: visible !important;
}
/* Pseudo-element arrow (small triangular notch above) — visual anchor to parent item */
.sfc-preview-active .wp-block-navigation__submenu-container::before {
  content: '';
  position: absolute;
  top: -7px;
  left: 1.25rem;
  width: 12px;
  height: 12px;
  background: var(--sfc-surface);
  border-top: 1px solid var(--sfc-hairline-strong);
  border-left: 1px solid var(--sfc-hairline-strong);
  transform: rotate(45deg);
}
.sfc-preview-active .wp-block-navigation__submenu-container .wp-block-navigation-item {
  display: block !important;
  width: 100%;
}
.sfc-preview-active .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  display: block !important;
  width: 100% !important;
  border-radius: var(--sfc-radius-tile) !important;
  padding: 0.6875rem 1rem !important;
  font-size: 0.8125rem !important;
  text-transform: none !important;
  letter-spacing: 0.04em !important;
  white-space: nowrap;
  border: 1px solid transparent !important;
  background: transparent !important;
}
.sfc-preview-active .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
  background: var(--sfc-surface-2) !important;
  border-color: var(--sfc-hairline) !important;
  color: var(--sfc-accent) !important;
  transform: translateX(2px);
}
.sfc-preview-active .wp-block-navigation__submenu-icon {
  margin-left: 0.375rem;
  fill: var(--sfc-text-muted);
  transition: transform var(--sfc-duration) var(--sfc-easing-spring);
}
.sfc-preview-active .has-child:hover > .wp-block-navigation-item__content .wp-block-navigation__submenu-icon,
.sfc-preview-active .has-child[aria-expanded="true"] > .wp-block-navigation-item__content .wp-block-navigation__submenu-icon {
  transform: rotate(180deg);
  fill: var(--sfc-accent);
}

/* Desktop: show submenu when click-opened (JS adds sfc-submenu-open to .has-child) */
.sfc-preview-active .wp-block-navigation-item.has-child.sfc-submenu-open > .wp-block-navigation__submenu-container {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Force overflow:visible up the entire ancestor chain so the submenu can bleed out */
.sfc-preview-active header,
.sfc-preview-active header *,
.sfc-preview-active .wp-block-navigation,
.sfc-preview-active .wp-block-navigation *,
.sfc-preview-active .wp-block-essential-blocks-wrapper,
.sfc-preview-active .wp-block-essential-blocks-row,
.sfc-preview-active .wp-block-essential-blocks-column,
.sfc-preview-active .eb-wrapper-outer,
.sfc-preview-active .eb-row-root-container,
.sfc-preview-active .eb-column-wrapper {
  overflow: visible !important;
}
/* But the body / site-blocks itself can clip — only nav-related stuff escapes */
.sfc-preview-active body { overflow-x: hidden; } /* prevent horizontal scroll */

/* Mobile menu — full-screen frosted overlay */
.sfc-preview-active .wp-block-navigation__responsive-container.is-menu-open {
  background: rgba(11, 11, 12, 0.96) !important;
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  padding: clamp(2rem, 8vh, 4rem) clamp(1.5rem, 6vw, 3rem) !important;
}
/* Top-level items inside the open overlay — all rules scoped to .is-menu-open
   so the responsive container in the DOM on desktop is completely unaffected. */
.sfc-preview-active .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  font-size: 1.5rem;
  padding: 0.75rem 0 !important;
  border-bottom: 1px solid var(--sfc-hairline);
  border-radius: 0 !important;
  width: 100%;
}
.sfc-preview-active .wp-block-navigation__responsive-container-open svg,
.sfc-preview-active .wp-block-navigation__responsive-container-close svg {
  fill: var(--sfc-text);
  width: 28px; height: 28px;
}

/* ── Mobile menu: submenus inside full-screen overlay ───
   Desktop submenus are position:absolute floating cards. Inside
   the overlay they must be static + animated-height accordion. */
.sfc-preview-active .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
  position: static !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  min-width: 0 !important;
  margin-top: 0 !important;
  padding: 0 0 0 1.25rem !important;
  border-radius: 0 !important;
  max-height: 0;
  overflow: hidden !important;
  opacity: 0;
  pointer-events: none;
  transition: max-height 0.35s var(--sfc-easing-spring), opacity 0.2s ease;
}
.sfc-preview-active .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container::before {
  display: none !important;
}
/* Accordion open — JS adds sfc-submenu-open to the parent <li> */
.sfc-preview-active .wp-block-navigation__responsive-container.is-menu-open .has-child.sfc-submenu-open > .wp-block-navigation__submenu-container {
  max-height: 600px !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
/* Mobile submenu items */
.sfc-preview-active .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  font-size: 1.15rem !important;
  padding: 0.6rem 0 !important;
  border-bottom: 1px solid var(--sfc-hairline) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--sfc-text-muted) !important;
  letter-spacing: 0.03em !important;
}
.sfc-preview-active .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
  color: var(--sfc-accent) !important;
  background: transparent !important;
  transform: none !important;
}
/* Chevron icon rotates when submenu is open */
.sfc-preview-active .wp-block-navigation__responsive-container.is-menu-open .has-child.sfc-submenu-open > .wp-block-navigation-item__content .wp-block-navigation__submenu-icon {
  transform: rotate(180deg);
  fill: var(--sfc-accent);
}

/* ── FOOTER ─────────────────────────────────────────────
   Targets eb-wrapper-7ezqo + the inner column blocks. */
.sfc-preview-active .eb-wrapper-outer.eb-wrapper-7ezqo {
  background-color: var(--sfc-bg) !important;
  background-image: none !important;
  border-top: 1px solid var(--sfc-hairline) !important;
  padding-top: clamp(2.5rem, 6vw, 4.5rem) !important;
  padding-bottom: clamp(2.5rem, 6vw, 4rem) !important;
  position: relative;
}
/* A subtle warm accent stage-light at the top of footer */
.sfc-preview-active .eb-wrapper-outer.eb-wrapper-7ezqo::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  width: 60vw; max-width: 800px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--sfc-accent) 50%,
    transparent 100%);
  transform: translateX(-50%);
  opacity: 0.35;
}
.sfc-preview-active footer h2,
.sfc-preview-active footer h3,
.sfc-preview-active footer h4,
.sfc-preview-active footer .uagb-heading-text,
.sfc-preview-active footer .uagb-ifb-title {
  font-family: var(--sfc-font-display) !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  color: var(--sfc-text) !important;
  margin-bottom: 1rem !important;
}
.sfc-preview-active footer p,
.sfc-preview-active footer li {
  font-family: var(--sfc-font-body) !important;
  color: var(--sfc-text-muted) !important;
  font-size: 0.9rem;
}
.sfc-preview-active footer a {
  color: var(--sfc-text-muted);
}
.sfc-preview-active footer a:hover {
  color: var(--sfc-accent);
}
.sfc-preview-active footer a[href^="tel:"] {
  font-family: var(--sfc-font-display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.04em;
  color: var(--sfc-text) !important;
}
.sfc-preview-active footer a[href^="tel:"]:hover {
  color: var(--sfc-accent) !important;
}

/* Footer columns get a hairline left rule on desktop for editorial feel */
@media (min-width: 1024px) {
  .sfc-preview-active footer .wp-block-essential-blocks-column + .wp-block-essential-blocks-column .eb-column-wrapper {
    border-left: 1px solid var(--sfc-hairline);
    padding-left: clamp(1rem, 3vw, 2rem) !important;
  }
}

/* ── Eyebrow / kicker pattern — used on heading wrappers ── */
.sfc-preview-active .has-text-align-left,
.sfc-preview-active .has-text-align-center {
  /* leave alignment alone; just ensure consistent type */
}

/* ── Common buttons (any visible CTA) ────────────────────
   Targets WP core buttons + Spectra/UAG buttons + raw <button>. */
.sfc-preview-active .wp-block-button__link,
.sfc-preview-active .wp-element-button,
.sfc-preview-active .uagb-button-link,
.sfc-preview-active .eb-button-link,
.sfc-preview-active button[type="submit"] {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--sfc-accent) !important;
  color: var(--sfc-accent-fg) !important;
  border: 1px solid var(--sfc-accent) !important;
  border-radius: var(--sfc-radius-pill) !important;
  padding: 0.875rem 1.5rem !important;
  font-family: var(--sfc-font-body) !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: transform var(--sfc-duration) var(--sfc-easing-spring),
              background-color var(--sfc-duration) var(--sfc-easing-spring),
              box-shadow var(--sfc-duration) var(--sfc-easing-spring) !important;
  box-shadow: 0 12px 30px -10px rgba(224, 48, 32, 0.4);
}
.sfc-preview-active .wp-block-button__link:hover,
.sfc-preview-active .wp-element-button:hover,
.sfc-preview-active .uagb-button-link:hover,
.sfc-preview-active .eb-button-link:hover,
.sfc-preview-active button[type="submit"]:hover {
  background: var(--sfc-accent-hover) !important;
  border-color: var(--sfc-accent-hover) !important;
  transform: translateY(-1px);
  box-shadow: 0 18px 36px -10px rgba(224, 48, 32, 0.55);
}
.sfc-preview-active .wp-block-button__link:active,
.sfc-preview-active .wp-element-button:active,
.sfc-preview-active button[type="submit"]:active {
  transform: translateY(1px) scale(0.98);
}

/* "outline" button variant — for secondary CTAs */
.sfc-preview-active .is-style-outline .wp-block-button__link,
.sfc-preview-active .wp-block-button.is-style-outline .wp-element-button {
  background: transparent !important;
  color: var(--sfc-text) !important;
  border-color: var(--sfc-hairline-strong) !important;
  box-shadow: none;
}
.sfc-preview-active .is-style-outline .wp-block-button__link:hover {
  background: var(--sfc-hairline) !important;
  border-color: var(--sfc-text-muted) !important;
}

/* ── Form inputs (Contact + Subscription) ──────────────── */
.sfc-preview-active input[type="text"],
.sfc-preview-active input[type="email"],
.sfc-preview-active input[type="tel"],
.sfc-preview-active textarea,
.sfc-preview-active .uagb-forms-main-form input,
.sfc-preview-active .uagb-forms-main-form textarea {
  background: var(--sfc-surface) !important;
  border: 1px solid var(--sfc-hairline-strong) !important;
  border-radius: var(--sfc-radius-tile) !important;
  color: var(--sfc-text) !important;
  font-family: var(--sfc-font-body) !important;
  padding: 0.875rem 1rem !important;
  transition: border-color var(--sfc-duration) var(--sfc-easing-spring) !important;
}
.sfc-preview-active input:focus,
.sfc-preview-active textarea:focus {
  outline: none !important;
  border-color: var(--sfc-accent) !important;
  box-shadow: 0 0 0 3px rgba(224, 48, 32, 0.15) !important;
}
.sfc-preview-active label {
  font-family: var(--sfc-font-body);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--sfc-text-muted);
  margin-bottom: 0.5rem;
  display: block;
}

/* ── Image radius softening (consistent with cards) ──── */
.sfc-preview-active .wp-block-image img,
.sfc-preview-active .wp-block-essential-blocks-advanced-image img,
.sfc-preview-active .uagb-image-wrapper img {
  border-radius: var(--sfc-radius-card-inner);
}

/* ── Selection color ──────────────────────────────────── */
.sfc-preview-active ::selection {
  background: var(--sfc-accent);
  color: var(--sfc-accent-fg);
}

/* ──────────────────────────────────────────────────────
 * Subscription page (page-id-2569) — give tier cards a real surface
 * The original navy fill is nuked; replace with subtle elevated cards
 * + amber price emphasis + hover lift.
 * ──────────────────────────────────────────────────────── */
.sfc-preview-active.page-id-2569 .wp-block-column[style*="#101828"],
.sfc-preview-active.page-id-2569 .wp-block-column.has-contrast-background-color,
.sfc-preview-active.page-id-2569 .wp-block-columns > .wp-block-column {
  background: var(--sfc-surface) !important;
  border: 1px solid var(--sfc-hairline-strong) !important;
  border-radius: var(--sfc-radius-card) !important;
  padding: clamp(1.5rem, 3.5vw, 2.5rem) !important;
  box-shadow: var(--sfc-shadow-edge-top);
  transition: transform var(--sfc-duration) var(--sfc-easing-spring),
              border-color var(--sfc-duration) var(--sfc-easing-spring),
              box-shadow var(--sfc-duration) var(--sfc-easing-spring);
}
.sfc-preview-active.page-id-2569 .wp-block-columns > .wp-block-column:hover {
  transform: translateY(-3px);
  border-color: var(--sfc-accent-dim) !important;
  box-shadow: var(--sfc-shadow-edge-top), 0 24px 48px -20px rgba(224, 48, 32, 0.35);
}
/* Tier headings — Saira Condensed, top-anchored */
.sfc-preview-active.page-id-2569 .wp-block-columns > .wp-block-column h2,
.sfc-preview-active.page-id-2569 .wp-block-columns > .wp-block-column h3,
.sfc-preview-active.page-id-2569 .wp-block-columns > .wp-block-column h4,
.sfc-preview-active.page-id-2569 .wp-block-columns > .wp-block-column p strong {
  font-family: var(--sfc-font-display);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--sfc-text);
}
/* Tier prices — anything that LOOKS like a € price line */
.sfc-preview-active.page-id-2569 .wp-block-columns > .wp-block-column p:has(strong),
.sfc-preview-active.page-id-2569 .wp-block-columns > .wp-block-column p:last-child {
  font-family: var(--sfc-font-display);
  font-size: 2rem;
  font-weight: 800;
  color: var(--sfc-accent);
  margin-top: auto;
}
/* "Συνδρομές" page hero — strip the navy box, leave the H1 floating */
.sfc-preview-active.page-id-2569 .wp-block-uagb-advanced-heading:first-of-type,
.sfc-preview-active.page-id-2569 .wp-block-cover:first-of-type {
  background: transparent !important;
  margin-top: clamp(2rem, 5vw, 4rem);
  margin-bottom: clamp(2rem, 5vw, 4rem);
}

/* ── Whole-word submenu open (paired with sfc-preview.js) ──
   When sfc-preview.js sets .sfc-submenu-open on a parent <li>, force the
   submenu container visible. We don't touch WP's aria-expanded state, so
   hover-via-Interactivity-API still works untouched alongside this. */
.sfc-preview-active .wp-block-navigation .has-child.sfc-submenu-open > .wp-block-navigation__submenu-container {
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
}
.sfc-preview-active .wp-block-navigation .has-child.sfc-submenu-open > .wp-block-navigation-item__content,
.sfc-preview-active .wp-block-navigation .has-child.sfc-submenu-open > .wp-block-navigation__submenu-icon {
  color: var(--sfc-accent) !important;
}
.sfc-preview-active .wp-block-navigation .has-child.sfc-submenu-open > .wp-block-navigation__submenu-icon svg {
  transform: rotate(180deg);
  fill: var(--sfc-accent);
}
/* Make the parent <a> a pointer so users know it's clickable */
.sfc-preview-active .wp-block-navigation .has-child > a.wp-block-navigation-item__content {
  cursor: pointer;
}

/* ──────────────────────────────────────────────────────
 * V2 PAGES — fresh block markup, scoped under .sfc-v2-page
 * Per the v2 workflow (memory: feedback_v2_workflow.md), per-page
 * styling lives next to the page markup, not as overrides on the
 * existing site. These rules only apply on *-v2 pages.
 * ──────────────────────────────────────────────────────── */

/* ── V2 page — expand content wrapper to full width ────── */
.sfc-v2-page .wp-block-post-content,
.sfc-v2-page .entry-content {
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 100% !important;
}
/* TwentyTwentyFour applies max-width + margin:auto to every direct child of
   post-content via its layout engine. Override for v2 so alignfull blocks
   actually stretch to the viewport edge. */
.sfc-v2-page .wp-block-post-content > *,
.sfc-v2-page .entry-content > * {
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box;
}

/* ── V2 Hero ──────────────────────────────────────────── */
/* Background image layer — sits below glow + content */
.sfc-v2-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 40%;
  z-index: -1;
}
.sfc-v2-hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    rgba(11,11,12,0.93) 0%,
    rgba(11,11,12,0.78) 38%,
    rgba(11,11,12,0.52) 65%,
    rgba(11,11,12,0.32) 100%
  );
}

.sfc-v2-hero {
  position: relative;
  width: 100%;
  background: var(--sfc-bg);
  padding: clamp(5rem, 10vw, 8rem) clamp(1.5rem, 6vw, 5rem) clamp(4rem, 8vw, 6rem);
  overflow: hidden;
  isolation: isolate;
}
.sfc-v2-hero__glow {
  position: absolute;
  top: -5%;
  right: -5%;
  width: 55%;
  aspect-ratio: 1;
  background: radial-gradient(circle at center,
    rgba(224, 48, 32, 0.28) 0%,
    rgba(224, 48, 32, 0.08) 40%,
    transparent 70%);
  filter: blur(90px);
  z-index: 0;
  pointer-events: none;
}
.sfc-v2-hero::before {
  content: '';
  position: absolute;
  top: 15%;
  bottom: 15%;
  left: clamp(1.5rem, 5vw, 4rem);
  width: 2px;
  background: linear-gradient(180deg,
    transparent 0%,
    var(--sfc-accent) 25%,
    var(--sfc-accent) 75%,
    transparent 100%);
  opacity: 0.5;
  z-index: 0;
  pointer-events: none;
}
.sfc-v2-hero__inner {
  position: relative;
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 clamp(2.5rem, 6vw, 4rem);
  z-index: 1;
}
.sfc-v2-hero .sfc-eyebrow {
  margin-bottom: 1.75rem;
}
.sfc-v2-hero__title {
  font-family: var(--sfc-font-display);
  font-weight: 800;
  font-size: clamp(2.4rem, 5.5vw, 5rem);
  line-height: 1.05;
  letter-spacing: -0.005em;
  word-spacing: 0.08em;
  color: var(--sfc-text);
  margin: 0;
  max-width: 18ch;
  text-transform: none;
}
.sfc-v2-hero__title--em {
  font-style: italic;
  font-weight: 800;
  color: var(--sfc-text);
  background-image: linear-gradient(transparent 80%, var(--sfc-accent) 80%, var(--sfc-accent) 90%, transparent 90%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 0 0.04em;
}
.sfc-v2-hero__title--accent {
  color: var(--sfc-accent);
}
.sfc-v2-hero__rule {
  display: block;
  width: clamp(60px, 8vw, 100px);
  height: 2px;
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  background: var(--sfc-accent);
}

/* ── Hero modifier: right-align inner content ──────────────────────
 * Used on /gallery/ so the TechnoGym branding on the bg photo (which
 * sits left-of-center) is not covered by the title. Falls back to
 * default left-aligned layout on phones where horizontal space is
 * tight and right-alignment looks awkward.
 */
.sfc-v2-hero--right .sfc-v2-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}
.sfc-v2-hero--right .sfc-v2-hero__inner > nav {
  justify-content: flex-end;
}

/* ── V2 Content sections ──────────────────────────────── */
.sfc-v2-section {
  width: 100%;
  padding: var(--sfc-space-section) clamp(1.5rem, 6vw, 5rem);
}
.sfc-v2-section--alt {
  background: var(--sfc-surface);
}
.sfc-v2-section__inner {
  max-width: 72rem;
  margin: 0 auto;
}
.sfc-v2-section__eyebrow {
  display: inline-block;
  font-family: var(--sfc-font-body);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--sfc-accent);
  margin-bottom: 1rem;
}
.sfc-v2-page .sfc-v2-section__heading,
.sfc-preview-active .sfc-v2-section__heading {
  font-family: var(--sfc-font-display);
  font-size: var(--sfc-text-display-2);
  font-weight: 700;
  letter-spacing: 0 !important;
  word-spacing: 0.04em;
  color: var(--sfc-text);
  line-height: var(--sfc-leading-tight);
  margin: 0 0 clamp(1.25rem, 3vw, 2rem);
  text-transform: none;
  overflow-wrap: break-word;
}
.sfc-v2-section__body {
  font-family: var(--sfc-font-body);
  font-size: clamp(1.0625rem, 1.8vw, 1.25rem);
  line-height: var(--sfc-leading-body);
  word-spacing: 0.03em;
  color: var(--sfc-text-muted);
  max-width: 52ch;
}
/* Base word-spacing for Greek text legibility across the v2 page */
.sfc-v2-page .wp-block-post-content p,
.sfc-v2-page .wp-block-post-content li {
  word-spacing: 0.03em;
}
.sfc-v2-benefits li { word-spacing: 0.04em; }
.sfc-v2-tier__name { word-spacing: 0.04em; }
/* Two-column split: text left, photo right */
.sfc-v2-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
@media (max-width: 768px) {
  .sfc-v2-split { grid-template-columns: 1fr; }
}

/* ── V2 Mobile / responsive ────────────────────────────── */
@media (max-width: 640px) {
  /* Hero: tighter vertical padding, slightly smaller H1 */
  .sfc-v2-hero {
    padding: clamp(3.5rem, 12vh, 5rem) 1.5rem clamp(2.5rem, 8vh, 4rem);
  }
  .sfc-v2-hero__inner { padding: 0; }
  /* On phones, right-aligned variant falls back to default — too cramped
   * horizontally for the right-shift to look intentional. */
  .sfc-v2-hero--right .sfc-v2-hero__inner {
    align-items: flex-start;
    text-align: left;
  }
  .sfc-v2-hero--right .sfc-v2-hero__inner > nav {
    justify-content: flex-start;
  }

  /* Section: tighter horizontal padding on narrow phones */
  .sfc-v2-section {
    padding: var(--sfc-space-section) 1.25rem;
  }

  /* FAQ: tighter padding on phone */
  .sfc-v2-faq summary {
    font-size: 1rem;
    padding: 1rem 1.125rem;
  }
  .sfc-v2-faq__body {
    padding: 0 1.125rem 1rem;
    font-size: 0.9375rem;
  }

  /* CTA: stack buttons vertically */
  .sfc-v2-cta__buttons {
    flex-direction: column;
    align-items: center;
  }

  /* Contact grid: single column */
  .sfc-v2-contact-grid {
    grid-template-columns: 1fr;
  }

  /* Hours table: wrap onto two lines */
  .sfc-v2-hours__row {
    flex-direction: column;
    gap: 0.125rem;
  }
}
.sfc-v2-split__photo {
  border-radius: var(--sfc-radius-card);
  overflow: hidden;
  aspect-ratio: 4/3;
}
.sfc-v2-split__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Benefits list */
.sfc-v2-benefits {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.sfc-v2-benefits li {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  font-family: var(--sfc-font-body);
  font-size: 1rem;
  color: var(--sfc-text);
  line-height: 1.5;
}
.sfc-v2-benefits li::before {
  content: '—';
  color: var(--sfc-accent);
  font-family: var(--sfc-font-display);
  font-weight: 800;
  flex-shrink: 0;
}
/* Subscription tiers */
.sfc-v2-tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
  margin-top: clamp(2rem, 5vw, 4rem);
}
.sfc-v2-tier {
  background: var(--sfc-surface);
  border: 1px solid var(--sfc-hairline-strong);
  border-radius: var(--sfc-radius-card);
  overflow: hidden;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  box-shadow: var(--sfc-shadow-edge-top);
  transition: transform var(--sfc-duration) var(--sfc-easing-spring),
              border-color var(--sfc-duration) var(--sfc-easing-spring),
              box-shadow var(--sfc-duration) var(--sfc-easing-spring);
}
.sfc-v2-tier:hover {
  transform: translateY(-3px);
  border-color: var(--sfc-accent-dim);
  box-shadow: var(--sfc-shadow-edge-top), 0 24px 48px -20px rgba(224, 48, 32, 0.3);
}
.sfc-v2-tier__category {
  font-family: var(--sfc-font-body);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--sfc-text-dim);
  margin-bottom: 0.25rem;
}
.sfc-v2-page .sfc-v2-tier__name,
.sfc-preview-active .sfc-v2-tier__name {
  font-family: var(--sfc-font-display);
  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
  font-weight: 700;
  letter-spacing: 0;
  word-spacing: 0.03em;
  line-height: 1.25;
  text-transform: none;
  color: var(--sfc-text);
  margin: 0;
  overflow-wrap: break-word;
}
.sfc-v2-tier__price {
  font-family: var(--sfc-font-display);
  font-size: clamp(2.5rem, 4.5vw, 3.75rem);
  font-weight: 800;
  color: var(--sfc-accent);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0.5rem 0 0.25rem;
}
.sfc-v2-tier__price-label {
  font-family: var(--sfc-font-body);
  font-size: 0.75rem;
  color: var(--sfc-text-dim);
  letter-spacing: 0.04em;
}
.sfc-v2-tier__features {
  font-family: var(--sfc-font-body);
  font-size: 0.9375rem;
  color: var(--sfc-text-muted);
  line-height: 1.55;
  flex: 1;
  margin-top: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--sfc-hairline);
}
.sfc-v2-tier__cta {
  padding-top: 1.25rem;
  margin-top: 0.5rem;
}
.sfc-v2-tier__cta .sfc-btn {
  display: flex;
  width: 100%;
  justify-content: center;
}
/* Contact layout */
.sfc-v2-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
@media (max-width: 768px) {
  .sfc-v2-contact-grid { grid-template-columns: 1fr; }
}
.sfc-v2-contact-info { display: flex; flex-direction: column; gap: 2rem; }
.sfc-v2-contact-item__label {
  font-family: var(--sfc-font-body);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--sfc-text-dim);
  margin-bottom: 0.375rem;
}
.sfc-v2-contact-item__value {
  font-family: var(--sfc-font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--sfc-text);
  letter-spacing: 0.02em;
}
/* Hours table */
.sfc-v2-hours { border-top: 1px solid var(--sfc-hairline); margin-top: 2rem; }
.sfc-v2-hours__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
  border-bottom: 1px solid var(--sfc-hairline);
}
.sfc-v2-hours__day { font-family: var(--sfc-font-body); color: var(--sfc-text-muted); font-size: 0.9375rem; }
.sfc-v2-hours__time {
  font-family: var(--sfc-font-display);
  font-weight: 700;
  color: var(--sfc-text);
  letter-spacing: 0.06em;
  font-size: 1.05rem;
}

/* ── V2 Programs: image card with description ────────── */
.sfc-v2-programs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
  margin-top: clamp(2rem, 5vw, 3.5rem);
}
@media (max-width: 900px) {
  .sfc-v2-programs { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
}
@media (max-width: 560px) {
  .sfc-v2-programs { grid-template-columns: 1fr; gap: 1.125rem; }
}
.sfc-v2-program {
  display: flex;
  flex-direction: column;
  background: var(--sfc-surface);
  border: 1px solid var(--sfc-hairline-strong);
  border-radius: var(--sfc-radius-card);
  overflow: hidden;
  text-decoration: none;
  transition: transform var(--sfc-duration) var(--sfc-easing-spring),
              border-color var(--sfc-duration) var(--sfc-easing-spring),
              box-shadow var(--sfc-duration) var(--sfc-easing-spring);
}
.sfc-v2-program:hover {
  transform: translateY(-4px);
  border-color: var(--sfc-accent-dim);
  box-shadow: 0 28px 56px -22px rgba(224, 48, 32, 0.35);
}
.sfc-v2-program__media {
  position: relative;
  aspect-ratio: 16 / 10;
  background-size: cover;
  background-position: center;
}
.sfc-v2-program__media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(11,11,12,0.78) 0%, rgba(11,11,12,0.15) 60%, transparent 100%);
}
.sfc-v2-program__name {
  position: absolute;
  left: 1.25rem;
  right: 1.25rem;
  bottom: 1rem;
  z-index: 1;
  font-family: var(--sfc-font-display);
  font-weight: 800;
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  letter-spacing: 0;
  word-spacing: 0.03em;
  line-height: 1.2;
  text-transform: none;
  color: var(--sfc-text);
  overflow-wrap: break-word;
}
.sfc-v2-program__body {
  padding: 1.5rem 1.75rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  flex: 1;
}
.sfc-v2-program__copy {
  font-family: var(--sfc-font-body);
  font-size: 1rem;
  color: var(--sfc-text-muted);
  line-height: 1.65;
  word-spacing: 0.03em;
  flex: 1;
}
.sfc-v2-program__more {
  font-family: var(--sfc-font-body);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--sfc-accent);
  margin-top: auto;
}
.sfc-v2-program__more::after {
  content: ' \2192';
  display: inline-block;
  transition: transform var(--sfc-duration) var(--sfc-easing-spring);
}
.sfc-v2-program:hover .sfc-v2-program__more::after {
  transform: translateX(4px);
}

/* ── V2 Feature grid (4-up "why us" blocks) ──────────── */
.sfc-v2-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem;
  margin-top: clamp(2rem, 5vw, 3rem);
}
@media (max-width: 640px) {
  .sfc-v2-features { grid-template-columns: 1fr; gap: 1.125rem; }
}
.sfc-v2-feature {
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--sfc-surface);
  border: 1px solid var(--sfc-hairline);
  border-radius: var(--sfc-radius-card-inner);
  border-top: 3px solid var(--sfc-accent);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.sfc-v2-page .sfc-v2-feature__title,
.sfc-preview-active .sfc-v2-feature__title {
  font-family: var(--sfc-font-display);
  font-weight: 700;
  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
  letter-spacing: 0;
  word-spacing: 0.03em;
  line-height: 1.25;
  text-transform: none;
  color: var(--sfc-text);
  margin: 0;
  overflow-wrap: break-word;
}
.sfc-v2-feature__body {
  font-family: var(--sfc-font-body);
  font-size: 1rem;
  color: var(--sfc-text-muted);
  line-height: 1.65;
  word-spacing: 0.03em;
  margin: 0;
}

/* ── V2 FAQ accordion (native <details>) ─────────────── */
.sfc-v2-faq {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: clamp(2rem, 5vw, 3rem);
  max-width: 56rem;
}
.sfc-v2-faq details {
  background: var(--sfc-surface);
  border: 1px solid var(--sfc-hairline);
  border-radius: var(--sfc-radius-card-inner);
  overflow: hidden;
  transition: border-color var(--sfc-duration) var(--sfc-easing-spring);
}
.sfc-v2-faq details[open] {
  border-color: var(--sfc-accent-dim);
}
.sfc-v2-faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1.125rem 1.5rem;
  font-family: var(--sfc-font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.02em;
  word-spacing: 0.04em;
  color: var(--sfc-text);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  transition: color var(--sfc-duration) var(--sfc-easing-spring);
}
.sfc-v2-faq summary::-webkit-details-marker { display: none; }
.sfc-v2-faq summary::after {
  content: '+';
  font-family: var(--sfc-font-display);
  font-weight: 400;
  font-size: 1.5rem;
  color: var(--sfc-accent);
  transition: transform var(--sfc-duration) var(--sfc-easing-spring);
  flex-shrink: 0;
}
.sfc-v2-faq details[open] summary::after {
  transform: rotate(45deg);
}
.sfc-v2-faq summary:hover { color: var(--sfc-accent); }
.sfc-v2-faq__body {
  padding: 0 1.5rem 1.25rem;
  font-family: var(--sfc-font-body);
  font-size: 0.95rem;
  line-height: 1.7;
  word-spacing: 0.03em;
  color: var(--sfc-text-muted);
}

/* ── V2 CTA strip (final-call section) ───────────────── */
.sfc-v2-cta {
  text-align: center;
  padding: clamp(3rem, 8vw, 6rem) clamp(1.5rem, 6vw, 5rem);
  background: linear-gradient(135deg, var(--sfc-surface) 0%, rgba(224, 48, 32, 0.08) 100%);
  border-top: 1px solid var(--sfc-hairline);
  border-bottom: 1px solid var(--sfc-hairline);
}
.sfc-v2-cta__title {
  font-family: var(--sfc-font-display);
  font-weight: 800;
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  line-height: 1.15;
  letter-spacing: 0;
  word-spacing: 0.04em;
  color: var(--sfc-text);
  margin: 0 0 1rem;
  text-transform: none;
}
.sfc-v2-cta__body {
  font-family: var(--sfc-font-body);
  font-size: 1.05rem;
  line-height: 1.6;
  word-spacing: 0.03em;
  color: var(--sfc-text-muted);
  max-width: 50ch;
  margin: 0 auto 2rem;
}
.sfc-v2-cta__buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ── V2 Carousel: horizontal scroll-snap, native swipe ── */
.sfc-v2-carousel {
  margin-top: clamp(2rem, 4vw, 3rem);
  position: relative;
}
.sfc-v2-carousel__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(85%, 70vw, 30rem);
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 1.25rem;
  scrollbar-width: thin;
  scrollbar-color: var(--sfc-accent-dim) var(--sfc-surface);
}
.sfc-v2-carousel__track::-webkit-scrollbar { height: 6px; }
.sfc-v2-carousel__track::-webkit-scrollbar-track { background: var(--sfc-surface); border-radius: 3px; }
.sfc-v2-carousel__track::-webkit-scrollbar-thumb { background: var(--sfc-accent-dim); border-radius: 3px; }
.sfc-v2-carousel__slide {
  scroll-snap-align: start;
  border-radius: var(--sfc-radius-card);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--sfc-surface);
  position: relative;
}
.sfc-v2-carousel__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--sfc-easing-spring);
}
.sfc-v2-carousel__slide { cursor: zoom-in; }
.sfc-v2-carousel__slide:hover img { transform: scale(1.04); }
.sfc-v2-carousel__slide::after {
  content: '';
  position: absolute;
  top: 0.875rem; right: 0.875rem;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(11, 11, 12, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ededee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='16.5' y1='16.5' x2='21' y2='21'/><line x1='11' y1='8' x2='11' y2='14'/><line x1='8' y1='11' x2='14' y2='11'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--sfc-duration) var(--sfc-easing-spring),
              transform var(--sfc-duration) var(--sfc-easing-spring);
  pointer-events: none;
  z-index: 2;
}
.sfc-v2-carousel__slide:hover::after,
.sfc-v2-carousel__slide:focus-within::after { opacity: 1; transform: translateY(0); }
.sfc-v2-carousel__hint {
  font-family: var(--sfc-font-body);
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  color: var(--sfc-text-dim);
  margin-top: 0.75rem;
  text-align: center;
}
@media (min-width: 769px) {
  .sfc-v2-carousel__track { grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column dense; grid-template-columns: repeat(5, 1fr); overflow-x: visible; }
  .sfc-v2-carousel__hint { display: none; }
}

/* ── V2 Carousel: grid modifier for the Gallery page (multi-row wrap, no scroll) ── */
.sfc-v2-carousel--grid .sfc-v2-carousel__track {
  grid-auto-flow: row;
  grid-auto-columns: auto;
  grid-template-columns: repeat(2, 1fr);
  overflow-x: visible;
  scroll-snap-type: none;
  padding-bottom: 0;
  gap: 0.875rem;
}
@media (min-width: 640px) {
  .sfc-v2-carousel--grid .sfc-v2-carousel__track { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
}
@media (min-width: 1024px) {
  .sfc-v2-carousel--grid .sfc-v2-carousel__track { grid-template-columns: repeat(4, 1fr); }
}
.sfc-v2-carousel--grid .sfc-v2-carousel__hint { display: none; }

/* ── V2 Schedule: day cards (5-up desktop, stacked mobile) ── */
.sfc-v2-schedule {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  margin-top: clamp(1.5rem, 3vw, 2rem);
}
@media (max-width: 900px) { .sfc-v2-schedule { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .sfc-v2-schedule { grid-template-columns: 1fr; } }

.sfc-v2-day {
  background: var(--sfc-surface);
  border: 1px solid var(--sfc-hairline-strong);
  border-top: 3px solid var(--sfc-accent);
  border-radius: var(--sfc-radius-card-inner);
  padding: 1.25rem 1rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.sfc-v2-day--empty { opacity: 0.55; border-top-color: var(--sfc-hairline-strong); }
.sfc-v2-day__name {
  font-family: var(--sfc-font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.01em;
  word-spacing: 0.04em;
  color: var(--sfc-accent);
  margin: 0 0 0.25rem;
}
.sfc-v2-day__class {
  font-family: var(--sfc-font-display);
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1.25;
  letter-spacing: 0;
  word-spacing: 0.03em;
  color: var(--sfc-text);
  text-transform: none;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--sfc-hairline);
}
.sfc-v2-day__class--muted { color: var(--sfc-text-dim); font-weight: 600; }
.sfc-v2-day__times {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.sfc-v2-day__times li {
  font-family: var(--sfc-font-body);
  font-size: 0.9375rem;
  color: var(--sfc-text);
  font-variant-numeric: tabular-nums;
}
.sfc-v2-day__times li.sfc-v2-day__off {
  color: var(--sfc-text-dim);
  font-style: italic;
}

/* ── Lightbox overlay (driven by sfc-preview.js) ──────
   Opens when a .sfc-v2-carousel slide image is clicked.
   Body gets .sfc-lightbox-open while active to lock scroll. */
.sfc-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(11, 11, 12, 0.94);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--sfc-duration) var(--sfc-easing-spring),
              visibility 0s linear var(--sfc-duration);
}
.sfc-lightbox.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--sfc-duration) var(--sfc-easing-spring), visibility 0s linear 0s;
}
.sfc-lightbox__stage {
  position: relative;
  max-width: min(88vw, 1400px);
  max-height: 86vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sfc-lightbox__img {
  max-width: 100%;
  max-height: 86vh;
  width: auto;
  height: auto;
  display: block;
  border-radius: var(--sfc-radius-card-inner);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.7),
              0 0 60px rgba(224, 48, 32, 0.18);
  transform: scale(0.96);
  opacity: 0;
  transition: transform var(--sfc-duration) var(--sfc-easing-spring),
              opacity var(--sfc-duration) var(--sfc-easing-spring);
}
.sfc-lightbox.is-open .sfc-lightbox__img { transform: scale(1); opacity: 1; }
.sfc-lightbox__btn {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--sfc-hairline-strong);
  background: rgba(20, 20, 22, 0.7);
  color: var(--sfc-text);
  font-family: var(--sfc-font-display);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--sfc-duration-fast) var(--sfc-easing-spring),
              border-color var(--sfc-duration-fast) var(--sfc-easing-spring),
              transform var(--sfc-duration-fast) var(--sfc-easing-spring);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.sfc-lightbox__btn:hover,
.sfc-lightbox__btn:focus-visible {
  background: var(--sfc-accent);
  border-color: var(--sfc-accent);
  color: var(--sfc-accent-fg);
  outline: none;
}
.sfc-lightbox__close { top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); }
.sfc-lightbox__prev { left: clamp(0.5rem, 2vw, 1.5rem); top: 50%; transform: translateY(-50%); }
.sfc-lightbox__next { right: clamp(0.5rem, 2vw, 1.5rem); top: 50%; transform: translateY(-50%); }
.sfc-lightbox__prev:hover, .sfc-lightbox__next:hover { transform: translateY(-50%) scale(1.06); }
.sfc-lightbox__counter {
  position: absolute;
  bottom: clamp(1rem, 3vw, 2rem);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--sfc-font-body);
  font-size: 0.875rem;
  color: var(--sfc-text-muted);
  font-variant-numeric: tabular-nums;
  background: rgba(20, 20, 22, 0.7);
  border: 1px solid var(--sfc-hairline);
  border-radius: var(--sfc-radius-pill);
  padding: 0.375rem 0.875rem;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
@media (max-width: 600px) {
  .sfc-lightbox__btn { width: 42px; height: 42px; font-size: 1.25rem; }
  .sfc-lightbox__prev { left: 0.25rem; }
  .sfc-lightbox__next { right: 0.25rem; }
}
body.sfc-lightbox-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .sfc-lightbox, .sfc-lightbox__img { transition: none; }
}

/* ── Scrollbar (subtle, on dark canvas) ──────────────── */
.sfc-preview-active ::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
.sfc-preview-active ::-webkit-scrollbar-track {
  background: var(--sfc-bg);
}
.sfc-preview-active ::-webkit-scrollbar-thumb {
  background: var(--sfc-hairline-strong);
  border-radius: var(--sfc-radius-pill);
  border: 3px solid var(--sfc-bg);
}
.sfc-preview-active ::-webkit-scrollbar-thumb:hover {
  background: var(--sfc-text-dim);
}

/* ──────────────────────────────────────────────────────────
 * Sprint C — content depth blocks
 * Definition / comparison-table / FAQ-accordion / related-programs
 * Appended at the bottom of service pages above the bottom CTA
 * ────────────────────────────────────────────────────────── */

/* Section wrapper — slightly tighter vertical rhythm than the hero/main sections,
 * so the content-depth blocks read as a continuation, not new pages. */
.sfc-preview-active .sfc-v2-c-section {
  padding: var(--sfc-space-section-tight) clamp(1.5rem, 6vw, 5rem);
  background: var(--sfc-bg);
}
.sfc-preview-active .sfc-v2-c-section + .sfc-v2-c-section {
  padding-top: 0;
}
.sfc-preview-active .sfc-v2-c-section .sfc-v2-section__inner {
  max-width: var(--sfc-container);
  margin: 0 auto;
}
.sfc-preview-active .sfc-v2-c-section h2.sfc-v2-section__heading {
  font-family: var(--sfc-font-display);
  font-size: var(--sfc-text-display-3);
  font-weight: 700;
  line-height: var(--sfc-leading-tight);
  letter-spacing: var(--sfc-tracking-tight);
  color: var(--sfc-text);
  margin: 0 0 var(--sfc-space-block);
}
.sfc-preview-active .sfc-v2-c-section p {
  font-size: var(--sfc-text-body-lg);
  line-height: var(--sfc-leading-body);
  color: var(--sfc-text-muted);
  margin: 0 0 1em;
  max-width: 64ch;
}

/* ── Comparison table ─────────────────────────────────── */
.sfc-preview-active .sfc-v2-c-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--sfc-space-block);
  font-size: var(--sfc-text-body);
}
.sfc-preview-active .sfc-v2-c-table thead th {
  background: var(--sfc-surface);
  color: var(--sfc-text);
  font-family: var(--sfc-font-display);
  font-weight: 700;
  font-size: var(--sfc-text-body);
  letter-spacing: var(--sfc-tracking-tight);
  text-align: left;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--sfc-hairline-strong);
}
.sfc-preview-active .sfc-v2-c-table tbody td {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--sfc-hairline);
  color: var(--sfc-text-muted);
  vertical-align: top;
}
.sfc-preview-active .sfc-v2-c-table tbody td:first-child {
  font-family: var(--sfc-font-display);
  font-weight: 600;
  color: var(--sfc-text);
  letter-spacing: var(--sfc-tracking-tight);
}
.sfc-preview-active .sfc-v2-c-table tbody tr:last-child td {
  border-bottom: 0;
}
@media (max-width: 640px) {
  .sfc-preview-active .sfc-v2-c-table { font-size: var(--sfc-text-body-sm); }
  .sfc-preview-active .sfc-v2-c-table thead th,
  .sfc-preview-active .sfc-v2-c-table tbody td { padding: 0.75rem 0.875rem; }
}

/* ── FAQ accordion (native <details>) ─────────────────── */
.sfc-preview-active .sfc-v2-c-faq {
  border-bottom: 1px solid var(--sfc-hairline);
  padding: 1.25rem 0;
  max-width: 64ch;
}
.sfc-preview-active .sfc-v2-c-faq:first-of-type {
  border-top: 1px solid var(--sfc-hairline);
}
.sfc-preview-active .sfc-v2-c-faq > summary {
  list-style: none;
  cursor: pointer;
  font-family: var(--sfc-font-display);
  font-size: var(--sfc-text-body-lg);
  font-weight: 600;
  color: var(--sfc-text);
  padding-right: 2.5rem;
  position: relative;
  transition: color var(--sfc-duration-fast) var(--sfc-easing-spring);
}
.sfc-preview-active .sfc-v2-c-faq > summary::-webkit-details-marker { display: none; }
.sfc-preview-active .sfc-v2-c-faq > summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--sfc-font-display);
  font-weight: 400;
  font-size: 1.5rem;
  color: var(--sfc-accent);
  transition: transform var(--sfc-duration) var(--sfc-easing-spring);
  line-height: 1;
}
.sfc-preview-active .sfc-v2-c-faq[open] > summary { color: var(--sfc-accent); }
.sfc-preview-active .sfc-v2-c-faq[open] > summary::after { transform: translateY(-50%) rotate(45deg); }
.sfc-preview-active .sfc-v2-c-faq > summary:hover { color: var(--sfc-accent); }
.sfc-preview-active .sfc-v2-c-faq > p {
  margin: 0.875rem 0 0;
  color: var(--sfc-text-muted);
  font-size: var(--sfc-text-body);
  line-height: var(--sfc-leading-body);
}

/* ── Related programs grid ────────────────────────────── */
.sfc-preview-active .sfc-v2-c-related {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 1rem;
  margin: 0;
}
.sfc-preview-active .sfc-v2-c-related__card {
  display: block;
  padding: 1.5rem;
  background: var(--sfc-surface);
  border: 1px solid var(--sfc-hairline);
  border-radius: var(--sfc-radius-card-inner);
  text-decoration: none;
  color: var(--sfc-text);
  transition: transform var(--sfc-duration) var(--sfc-easing-spring),
              border-color var(--sfc-duration) var(--sfc-easing-spring),
              background var(--sfc-duration) var(--sfc-easing-spring);
  will-change: transform;
}
.sfc-preview-active .sfc-v2-c-related__card:hover {
  transform: translateY(-3px);
  border-color: var(--sfc-accent);
  background: var(--sfc-surface-2);
}
.sfc-preview-active .sfc-v2-c-related__card h3 {
  font-family: var(--sfc-font-display);
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
  color: var(--sfc-text);
  letter-spacing: var(--sfc-tracking-tight);
}
.sfc-preview-active .sfc-v2-c-related__card p {
  margin: 0;
  font-size: var(--sfc-text-body-sm);
  color: var(--sfc-text-muted);
  line-height: 1.5;
  max-width: none;
}
@media (prefers-reduced-motion: reduce) {
  .sfc-preview-active .sfc-v2-c-faq > summary::after,
  .sfc-preview-active .sfc-v2-c-related__card { transition: none; }
  .sfc-preview-active .sfc-v2-c-related__card:hover { transform: none; }
}