/*
Theme Name: Wayfield
Theme URI: https://wayfieldapp.com
Description: Wayfield marketing site — Frost child theme. Built for
  wayfieldapp.com. Do not edit Frost directly; all customisations
  live in this child theme.
Author: Wayfield
Author URI: https://wayfieldapp.com
Template: frost
Version: 1.0.14
Requires at least: 6.5
Tested up to: 6.7
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wayfield
*/

/* ─────────────────────────────────────────────────
   BASE RESETS
───────────────────────────────────────────────── */

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }

/* ── Sticky footer — footer always at bottom on all pages ──
   .wp-site-blocks is the outermost FSE wrapper. Making it a
   full-height flex column pushes the footer to the bottom
   even when the content is short. */
html, body { height: 100%; }
.wp-site-blocks {
  min-height: 100dvh;
  display: flex !important;
  flex-direction: column !important;
}
.wp-site-blocks > footer.site-footer {
  margin-top: auto !important;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ─────────────────────────────────────────────────
   TOUCH TARGETS — Apple HIG 44×44px minimum
───────────────────────────────────────────────── */

.wp-block-button__link,
button, [role="button"], a.wp-block-button__link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding-inline: 1.25rem;
}

.wp-block-navigation-item__content { padding-block: 0.5rem; }

/* ─────────────────────────────────────────────────
   FOCUS RINGS — WCAG 2.4.7
───────────────────────────────────────────────── */

a:focus-visible, button:focus-visible, [role="button"]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
.wp-block-button__link:focus-visible {
  outline: 2px solid #0FA3B1;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ─────────────────────────────────────────────────
   INLINE LINKS — WCAG AA contrast fix
───────────────────────────────────────────────── */

p a, li a, .wp-block-paragraph a { color: #0c8f9c; text-decoration: underline; }
p a:hover, li a:hover { color: #0a7a85; }

.has-charcoal-background-color a,
.wf-footer a { color: rgba(255,255,255,0.85); }

/* ─────────────────────────────────────────────────
   NOTIFICATION BAR
───────────────────────────────────────────────── */

.wf-notif-bar {
  background-color: #0FA3B1;
  padding: 0.5rem 1rem;
}
.wf-notif-bar__text {
  color: #FFFFFF;
  font-size: 0.8125rem;
  font-weight: 500;
  margin: 0;
}
.wf-notif-bar__text a { color: #FFFFFF; font-weight: 700; }

/* ─────────────────────────────────────────────────
   NAVIGATION
───────────────────────────────────────────────── */

.wf-nav {
  position: sticky;
  top: 0;
  z-index: 200;
  background: #FFFFFF;
  padding: 0 1.5rem;
}

/* Override WP's flex columns with CSS grid — auto | 1fr | auto
   Logo and CTA are content-sized; the links column gets all
   remaining space and centers its items within it.
   Scoped to desktop only (min-width: 769px) — below that, WordPress
   core's own responsive nav behavior (hamburger toggle + overlay
   panel) takes over instead of fighting it with a forced 3-column
   grid that has no room to collapse. */
/* WordPress core's own navigation-block breakpoint for showing the
   hamburger toggle is exactly 600px (see wp-includes/blocks/navigation/
   style.min.css: "@media (min-width:600px){...-open:not(.always-shown)
   {display:none}}"). This desktop grid must switch off at the same
   point core switches the toggle on, or there's a dead zone between
   the two breakpoints where neither layout is correct. */
@media (min-width: 601px) {
  .wf-nav .wf-nav__inner.wp-block-columns {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
    min-height: 56px !important;
    gap: 0 2rem !important;
    /* Reset WP's default flex-wrap that bleeds into grid */
    flex-wrap: unset !important;
  }
}

/* WP adds flex-basis inline — reset it so grid takes over */
.wf-nav .wp-block-column {
  flex-basis: unset !important;
  max-width: none !important;
  width: auto !important;
  min-width: 0;
}

.wf-nav__links-col {
  justify-self: stretch;
  display: flex !important;
  justify-content: center !important;
}

.wf-nav__cta-col {
  justify-self: end;
  display: flex !important;
  justify-content: flex-end !important;
}

/* Keep buttons on one line — prevents the tall-nav wrapping bug */
.wf-nav .wp-block-button__link,
.wf-nav a.wp-block-button__link {
  white-space: nowrap !important;
  min-height: 36px !important;
  padding-top: 0.4rem !important;
  padding-bottom: 0.4rem !important;
}

/* Navigation link items — zero vertical padding inside the site header.
   Height is governed by the 56px grid row on .wf-nav__inner.
   Scoped to site-header so footer/mobile navs are unaffected. */
header.site-header .wp-block-navigation-item__content,
.site-header .wp-block-navigation-item__content,
.wf-nav .wp-block-navigation-item__content {
  padding-block: 0 !important;
}

/* Site header — exactly 56px, matching web app nav height */
.site-header,
header.site-header,
.wp-site-blocks > header {
  border-bottom: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  height: 56px !important;
  overflow: visible !important;
  display: flex !important;
  align-items: stretch !important;
}
header.site-header > .wp-block-group {
  width: 100% !important;
  height: 56px !important;
}
/* The nav group fills the header exactly */
.wf-nav {
  height: 56px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
}
.wf-nav__inner { align-items: center; }
/* Nav wordmark — direct <a class="wf-nav__wordmark"> via wp:html */
a.wf-nav__wordmark {
  color: #0FA3B1 !important;
  font-size: 1.375rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  white-space: nowrap;
  text-decoration: none !important;
  line-height: 1;
  display: inline-block !important;
  margin: 0 !important;
}
a.wf-nav__wordmark:hover { color: #0a8a96 !important; }

/* Fallback: wp:site-title renders <p class="wp-block-site-title"><a>…</a></p> */
.wf-nav .wp-block-site-title {
  margin: 0 !important;
  font-size: 0 !important;
}
.wf-nav .wp-block-site-title a {
  color: #0FA3B1 !important;
  font-size: 1.375rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  white-space: nowrap;
  text-decoration: none !important;
  line-height: 1;
}
.wf-nav .wp-block-navigation a {
  color: #374151;
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 500;
  padding: 0 0.75rem;
  transition: color 0.15s;
}
.wf-nav .wp-block-navigation a:hover { color: #0FA3B1; }
.wf-nav__btn-login .wp-block-button__link {
  color: #374151 !important;
  border-color: #d1d5db !important;
  font-size: 0.875rem !important;
  border-radius: 8px !important;
}
.wf-nav__btn-cta .wp-block-button__link {
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
}
.wf-nav__buttons {
  justify-content: flex-end !important;
  gap: 0.5rem;
}

/* ─────────────────────────────────────────────────
   HERO — Full-screen gradient
───────────────────────────────────────────────── */

.wf-hero-section {
  background: linear-gradient(145deg, #0FA3B1 0%, #0d8a96 45%, #0a7080 100%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem;
}

.wf-hero-inner {
  width: 100%;
  padding: 5rem 1.5rem 6rem;
  text-align: center;
}

.wf-hero__eyebrow {
  margin: 0 auto 1.25rem;
}

/* Pill style on the home hero's dark gradient background — matches the
   .wf-section__label treatment used on other pages' dark heroes. */
.wf-hero-section .wf-section__label {
  color: rgba(255,255,255,0.75) !important;
  border-color: rgba(255,255,255,0.35) !important;
  background: rgba(255,255,255,0.12) !important;
}

.wf-hero__headline {
  color: #FFFFFF !important;
  font-size: clamp(2.5rem, 6vw, 4rem) !important;
  font-weight: 800 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.02em;
  margin: 0 0 1.5rem !important;
  text-wrap: balance;
  text-shadow: 0 2px 16px rgba(0,0,0,0.35), 0 1px 3px rgba(0,0,0,0.3);
}

.wf-hero__sub {
  color: rgba(255,255,255,0.88);
  font-size: clamp(1rem, 2vw, 1.25rem);
  line-height: 1.65;
  margin: 0 auto 2.5rem;
  max-width: 680px;
}

.wf-hero__buttons {
  gap: 1rem !important;
  justify-content: center !important;
  margin-bottom: 2rem;
}

.wf-hero__btn-primary .wp-block-button__link {
  background: #FFFFFF !important;
  color: #0a7080 !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  border-radius: 10px !important;
  padding: 0.875rem 2rem !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.15);
  transition: box-shadow 0.2s, transform 0.2s;
}
.wf-hero__btn-primary .wp-block-button__link:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  transform: translateY(-1px);
}

.wf-hero__btn-secondary .wp-block-button__link {
  color: rgba(255,255,255,0.92) !important;
  border-color: rgba(255,255,255,0.5) !important;
  border-width: 1.5px !important;
  border-radius: 10px !important;
  padding: 0.875rem 1.75rem !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  background: rgba(255,255,255,0.12) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  transition: background 0.2s, border-color 0.2s;
}
.wf-hero__btn-secondary .wp-block-button__link:hover {
  background: rgba(255,255,255,0.22) !important;
  border-color: rgba(255,255,255,0.8) !important;
}

.wf-hero__trust {
  color: rgba(255,255,255,0.55);
  font-size: 0.8125rem;
  margin: 0;
  letter-spacing: 0.02em;
}

/* ─────────────────────────────────────────────────
   SECTION WRAPPERS
───────────────────────────────────────────────── */

.wf-section {
  padding: 4rem 1.5rem;
}
.wf-section--white { background: #FFFFFF; }
.wf-section--gray  { background: #EDF7F8; }

/* ── Dark section (#111827) — used for audience cards after hero ── */
.wf-section--dark {
  background: #111827;
}
.wf-section--dark .wf-section__heading,
.wf-section--dark h1, .wf-section--dark h2, .wf-section--dark h3 {
  color: #FFFFFF !important;
}
.wf-section--dark .wf-section__sub {
  color: rgba(255,255,255,0.7) !important;
}
.wf-section--dark .wf-section__label {
  color: rgba(255,255,255,0.7) !important;
  border-color: rgba(255,255,255,0.3) !important;
  background: rgba(255,255,255,0.1) !important;
}
.wf-section--dark .wf-audience-card {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.10);
}
.wf-section--dark .wf-audience-card--featured {
  background: rgba(15,163,177,0.12);
  border-color: #0FA3B1;
  box-shadow: 0 4px 24px rgba(15,163,177,0.20);
}
.wf-section--dark .wf-audience-card__role {
  color: rgba(255,255,255,0.92) !important;
}
.wf-section--dark .wf-audience-card--featured .wf-audience-card__role {
  color: #0FA3B1 !important;
}
.wf-section--dark .wf-audience-card__desc {
  color: rgba(255,255,255,0.58) !important;
}
.wf-section--dark .wf-audience-card__btn .wp-block-button__link {
  color: rgba(255,255,255,0.8) !important;
  border-color: rgba(255,255,255,0.25) !important;
}
.wf-section--dark .wf-audience-card__btn .wp-block-button__link:hover {
  color: #FFFFFF !important;
  border-color: rgba(255,255,255,0.6) !important;
}

/* ── Teal section — used for participants section ── */
.wf-section--teal {
  background: #0a5462;
}
.wf-section--teal .wf-section__heading,
.wf-section--teal h1, .wf-section--teal h2, .wf-section--teal h3 {
  color: #FFFFFF !important;
}
.wf-section--teal .wf-section__sub {
  color: rgba(255,255,255,0.8) !important;
}
.wf-section--teal .wf-section__label {
  color: rgba(255,255,255,0.8) !important;
  border-color: rgba(255,255,255,0.4) !important;
  background: rgba(255,255,255,0.12) !important;
}
.wf-section--teal .wf-participant-feature__title {
  color: rgba(255,255,255,0.95) !important;
}
.wf-section--teal .wf-participant-feature__body {
  color: rgba(255,255,255,0.68) !important;
}
.wf-section--teal .wp-block-button__link {
  border-radius: 8px !important;
}
.wf-section--teal .has-primary-background-color.wp-block-button__link {
  background: #FFFFFF !important;
  color: #0a5462 !important;
}
.wf-section--teal .is-style-outline .wp-block-button__link {
  color: rgba(255,255,255,0.88) !important;
  border-color: rgba(255,255,255,0.4) !important;
}

/* Section centering — headings only. Paragraphs are left-aligned + centered via margin. */
.wf-section,
.wf-section.wf-section--white,
.wf-section.wf-section--gray {
  text-align: left;
}

/* Headings inside sections remain centered */
.wf-section .wf-section__heading,
.wf-section .wf-section__label,
.wf-section .wf-section__sub,
.wf-section .wf-section__label-row {
  text-align: center;
}

h1.wf-section__heading,
h2.wf-section__heading,
h3.wf-section__heading,
.wp-block-heading.wf-section__heading,
.has-text-align-center.wf-section__heading {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem) !important;
  font-weight: 700 !important;
  color: #111827 !important;
  margin: 0 0 1.25rem !important;
  letter-spacing: -0.02em;
  text-wrap: balance;
  text-align: center !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  align-self: stretch !important;
  box-sizing: border-box !important;
}

.wf-section__sub,
p.wf-section__sub,
.has-text-align-center.wf-section__sub {
  color: #6B7280;
  font-size: 1.0625rem;
  line-height: 1.65;
  margin: 0 auto 3.5rem;
  max-width: 640px;
  text-align: center !important;
  display: block;
}

/* Center the label pill row */
.wf-section__label-row {
  margin-bottom: 1rem;
  display: flex !important;
  justify-content: center !important;
  width: 100%;
}

.wf-section__label {
  display: block !important;
  width: fit-content !important;
  margin: 0 auto 1.5rem !important;
  text-align: center;
  font-family: var(--wp--preset--font-family--mono, 'JetBrains Mono', monospace);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #0FA3B1;
  border: 1.5px solid #0FA3B1;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  /* Frosted-glass pill — same visual language as the mockup captions.
     Contexts with their own tinted background (--gray, --dark, --teal,
     photo/hero) already set !important overrides below and are untouched. */
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ─────────────────────────────────────────────────
   AUDIENCE CARDS
───────────────────────────────────────────────── */

.wf-audience-cards {
  gap: 1.5rem !important;
}

.wf-audience-card {
  background: #F9FAFB;
  border: 1px solid #E5E7EB;
  border-radius: 16px;
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s, transform 0.2s;
}
.wf-audience-card:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}

.wf-audience-card--featured {
  background: #FFFFFF;
  border-color: #0FA3B1;
  box-shadow: 0 4px 24px rgba(15,163,177,0.12);
}

.wf-audience-card__icon {
  font-size: 2.25rem;
  margin: 0 0 1rem;
  line-height: 1;
}

.wf-audience-card__role {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: #111827 !important;
  margin: 0 0 0.875rem !important;
}

.wf-audience-card--featured .wf-audience-card__role {
  color: #0FA3B1 !important;
}

.wf-audience-card__desc {
  color: #6B7280;
  font-size: 0.9375rem;
  line-height: 1.7;
  margin: 0 0 1.5rem;
  flex-grow: 1;
}

.wf-audience-card__cta { margin-top: auto; }

.wf-audience-card__btn .wp-block-button__link {
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  padding: 0.75rem 1.5rem !important;
}

/* ─────────────────────────────────────────────────
   FEATURE CARDS
───────────────────────────────────────────────── */

.wf-features__grid { gap: 1.5rem !important; }

/* The organizers/participants/leaders/security pages set grid-template-columns
   inline (2 or 3 cols, varies per page) so desktop layout is untouched here —
   this only forces a single column below tablet width, same breakpoints as
   the pricing/blog grids elsewhere in this file. */
@media (max-width: 900px) {
  .wf-features__grid,
  .wf-steps {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 640px) {
  .wf-features__grid,
  .wf-steps {
    grid-template-columns: 1fr !important;
  }
}

.wf-feature-card {
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-top: 3px solid #0FA3B1;
  border-radius: 12px;
  padding: 2rem 1.75rem;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  transition: box-shadow 0.2s, border-top-color 0.2s;
}
.wf-feature-card:hover {
  box-shadow: 0 6px 24px rgba(15,163,177,0.12);
  border-top-color: #0D4F56;
}

.wf-feature-card__icon {
  font-size: 2rem;
  margin: 0 0 1rem;
  line-height: 1;
}

.wf-feature-card__title {
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  color: #0D4F56 !important;
  margin: 0 0 0.75rem !important;
}

.wf-feature-card__body {
  color: #6B7280;
  font-size: 0.9375rem;
  line-height: 1.7;
  margin: 0;
}

/* ─────────────────────────────────────────────────
   HOW IT WORKS — STEPS
───────────────────────────────────────────────── */

.wf-steps { gap: 2.5rem !important; }

.wf-step__number {
  font-size: 3.5rem;
  font-weight: 800;
  color: #0FA3B1;
  line-height: 1;
  margin: 0 0 1rem;
  font-family: var(--wp--preset--font-family--heading, 'Sora', sans-serif);
}

.wf-step__title {
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  color: #111827 !important;
  margin: 0 0 0.75rem !important;
}

.wf-step__body {
  color: #6B7280;
  font-size: 0.9375rem;
  line-height: 1.7;
  margin: 0;
}

/* ─────────────────────────────────────────────────
   TESTIMONIALS
───────────────────────────────────────────────── */

.wf-testimonials { gap: 1.5rem !important; }

.wf-testimonial {
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  padding: 2rem 1.75rem;
}

.wf-testimonial__stars {
  color: #F59E0B;
  font-size: 1rem;
  letter-spacing: 0.05em;
  margin: 0 0 1.25rem;
}

.wf-testimonial__quote {
  color: #374151;
  font-size: 0.9375rem;
  line-height: 1.75;
  font-style: italic;
  margin: 0 0 1.5rem;
}

.wf-testimonial__name {
  font-weight: 700;
  font-size: 0.9rem;
  color: #111827;
  margin: 0 0 0.2rem;
}

.wf-testimonial__role {
  color: #9CA3AF;
  font-size: 0.8125rem;
  margin: 0;
}

/* ─────────────────────────────────────────────────
   NEWSLETTER
───────────────────────────────────────────────── */

.wf-newsletter {
  background: linear-gradient(135deg, #0FA3B1 0%, #0a7080 100%);
  padding: 5rem 1.5rem;
  text-align: center;
}

.wf-newsletter__heading {
  color: #FFFFFF !important;
  font-size: clamp(1.75rem, 3vw, 2.25rem) !important;
  font-weight: 700 !important;
  margin: 0 0 1rem !important;
}

.wf-newsletter__sub {
  color: rgba(255,255,255,0.85);
  font-size: 1rem;
  margin: 0 auto 2rem;
  max-width: 500px;
}

.wf-newsletter__form { max-width: 480px; margin: 0 auto; }

.wf-newsletter__row {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 0.875rem;
}

.wf-newsletter__input {
  flex: 1;
  padding: 0.75rem 1rem;
  border: 1.5px solid rgba(255,255,255,0.35);
  border-radius: 8px;
  background: rgba(255,255,255,0.15);
  color: #FFFFFF;
  font-size: 0.9375rem;
  min-height: 44px;
  outline: none;
  transition: border-color 0.2s;
}
.wf-newsletter__input::placeholder { color: rgba(255,255,255,0.6); }
.wf-newsletter__input:focus { border-color: rgba(255,255,255,0.8); }

.wf-newsletter__submit {
  background: #FFFFFF;
  color: #0a7080;
  font-weight: 700;
  font-size: 0.9375rem;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  min-height: 44px;
  white-space: nowrap;
  transition: opacity 0.2s;
}
.wf-newsletter__submit:hover { opacity: 0.9; }

.wf-newsletter__note {
  color: rgba(255,255,255,0.6);
  font-size: 0.8125rem;
  margin: 0;
}

/* ─────────────────────────────────────────────────
   CTA SECTION
───────────────────────────────────────────────── */

.wf-cta {
  background: linear-gradient(145deg, #0FA3B1 0%, #0d8a96 50%, #0a7080 100%);
  padding: 5rem 1.5rem;
  text-align: center;
}

.wf-cta__heading {
  color: #FFFFFF !important;
  font-size: clamp(1.875rem, 4vw, 2.75rem) !important;
  font-weight: 700 !important;
  margin: 0 0 1rem !important;
  letter-spacing: -0.02em;
}

.wf-cta__sub {
  color: rgba(255,255,255,0.7);
  font-size: 1.0625rem;
  margin: 0 auto 2.5rem;
  max-width: 520px;
}

.wf-cta__buttons { gap: 1rem !important; }

.wf-cta__btn-primary .wp-block-button__link {
  background: #FFFFFF !important;
  color: #0a7080 !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  padding: 0.875rem 2rem !important;
  font-size: 1rem !important;
}

.wf-cta__btn-secondary .wp-block-button__link {
  color: rgba(255,255,255,0.8) !important;
  border-color: rgba(255,255,255,0.35) !important;
  border-radius: 10px !important;
  font-size: 0.9375rem !important;
}

.wf-cta__trust {
  color: rgba(255,255,255,0.35);
  font-size: 0.8125rem;
  margin: 2rem 0 0;
  letter-spacing: 0.02em;
}

/* ─────────────────────────────────────────────────
   FOOTER
───────────────────────────────────────────────── */

.wf-footer {
  background: #2E2E2E;
  color: rgba(255,255,255,0.65);
}

.wf-footer a { color: rgba(255,255,255,0.65) !important; text-decoration: none !important; }
.wf-footer a:hover { color: #fff !important; }

/* Main padded content area */
.wf-footer__main {
  padding: 3rem 1.5rem 2rem;
}

/* Force grid layout for 7 columns: brand (fixed) + 6 equal nav cols */
.wf-footer__top.wp-block-columns {
  display: grid !important;
  grid-template-columns: 210px repeat(6, 1fr) !important;
  gap: 1rem 2rem !important;
  align-items: start !important;
  flex-wrap: unset !important;
}
@media (max-width: 1024px) {
  .wf-footer__top.wp-block-columns {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
@media (max-width: 640px) {
  .wf-footer__top.wp-block-columns {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
/* Reset WP inline flex-basis so grid takes over */
.wf-footer__top .wp-block-column {
  flex-basis: unset !important;
  max-width: none !important;
  width: auto !important;
  min-width: 0;
}

.wf-footer__top { align-items: flex-start !important; }

/* Brand column */
.wf-footer__brand { padding-right: 2rem; }

/* Direct <a> wordmark via wp:html */
a.wf-footer__wordmark,
.wf-footer__wordmark {
  color: #0FA3B1 !important;
  font-size: 1.375rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 0.75rem !important;
  text-decoration: none !important;
  display: inline-block !important;
}
a.wf-footer__wordmark:hover { color: #0d9daa !important; }

.wf-footer__tagline {
  color: rgba(255,255,255,0.45);
  font-size: 0.875rem;
  line-height: 1.65;
  margin: 0 0 0.75rem;
}

.wf-footer__ctas { gap: 0.5rem; margin: 0 0 2rem !important; }
.wf-footer__ctas .wp-block-button__link {
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  padding: 0.5rem 1.125rem !important;
}

.wf-footer__social-heading {
  color: rgba(255,255,255,0.28) !important;
  font-size: 0.65rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  margin: 0 0 0.75rem !important;
  font-family: var(--wp--preset--font-family--mono, 'JetBrains Mono', monospace) !important;
}

.wf-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

.wf-footer__social-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  min-height: unset !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.5) !important;
  text-decoration: none !important;
  transition: background 0.15s, color 0.15s;
}
.wf-footer__social-link svg { display: block; flex-shrink: 0; }
.wf-footer__social-link:hover {
  background: rgba(15,163,177,0.22);
  color: #0FA3B1 !important;
}

/* Nav columns */
.wf-footer__nav-col { min-width: 0; }

.wf-footer__nav-heading {
  color: rgba(255,255,255,0.3) !important;
  font-size: 0.625rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  margin: 0 0 1rem !important;
  font-family: var(--wp--preset--font-family--mono, 'JetBrains Mono', monospace) !important;
}

.wf-footer__nav-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.wf-footer__nav-list li { margin-bottom: 0.5rem; }
.wf-footer__nav-list a {
  color: rgba(255,255,255,0.55) !important;
  text-decoration: none !important;
  font-size: 0.875rem;
  transition: color 0.15s;
}
.wf-footer__nav-list a:hover { color: #ffffff !important; }

/* "Soon" badge */
.wf-soon {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(15,163,177,0.18);
  color: #0FA3B1 !important;
  padding: 0.1em 0.45em;
  border-radius: 4px;
  vertical-align: middle;
  margin-left: 0.25em;
}

.wf-footer__divider {
  border-color: rgba(255,255,255,0.07) !important;
  margin: 0 !important;
}

/* Bottom bar */
.wf-footer__bottom { padding: 1.25rem 1.5rem; }
.wf-footer__bottom-row { align-items: center !important; }

.wf-footer__copyright p {
  color: rgba(255,255,255,0.28);
  font-size: 0.8125rem;
  margin: 0;
}

.wf-footer__bottom-nav {
  display: flex;
  justify-content: flex-end;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.wf-footer__bottom-nav a {
  color: rgba(255,255,255,0.28) !important;
  font-size: 0.8125rem;
  text-decoration: none !important;
  transition: color 0.15s;
}
.wf-footer__bottom-nav a:hover { color: rgba(255,255,255,0.65) !important; }

/* ─────────────────────────────────────────────────
   BLOG — listing + single post
───────────────────────────────────────────────── */

/* Blog hero/banner */
/* ─────────────────────────────────────────────────
   BLOG / GUIDES — listing pages
   Reference: Kintsugi-style card grid (image #22)
   Apple HIG: 44px touch targets, generous spacing
───────────────────────────────────────────────── */

/* Hero banner — dark, left-aligned, large heading */
.wf-blog-hero {
  background: #111827;
  padding: 2.5rem 1.5rem 2.25rem;
}
/* Force hero inner group to stack block-direction, left-aligned */
.wf-blog-hero > .wp-block-group {
  padding: 0 !important;
  display: block !important;
  text-align: left !important;
  max-width: 1200px;
  margin: 0 auto;
}
.wf-blog-hero > .wp-block-group > * {
  margin-left: 0 !important;
  margin-right: auto !important;
}
.wf-blog-hero__title {
  color: #FFFFFF !important;
  font-size: clamp(1.75rem, 3.5vw, 2.5rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
  margin: 0 0 0.75rem !important;
  text-align: left !important;
  width: 100% !important;
  display: block !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.5), 0 1px 3px rgba(0,0,0,0.35) !important;
}
.wf-blog-hero__sub {
  color: rgba(255,255,255,0.55);
  font-size: 1rem;
  line-height: 1.6;
  margin: 0 !important;
  max-width: 560px;
  text-align: left !important;
  margin-left: 0 !important;
}

/* Guides accent teal strip at bottom of hero */
.wf-guides-hero { border-bottom: 3px solid #0FA3B1; }

/* Features accent indigo strip at bottom of hero */
.wf-features-hero { border-bottom: 3px solid #6366f1; }

/* Main grid area — light gray background matching reference */
.wf-blog-main {
  background: #F3F4F6;
  padding: 3rem 1.5rem 5rem;
}

/* 3-column grid */
.wf-blog-grid.wp-block-post-template,
.wf-guides-grid.wp-block-post-template {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1.5rem !important;
  align-items: start !important;
}
/* Each grid item must have min-width: 0 so the 1fr tracks stay equal.
   Without this, cards with many category badges inflate their column. */
.wf-blog-grid.wp-block-post-template > li,
.wf-blog-grid.wp-block-post-template .wp-block-post,
.wf-guides-grid.wp-block-post-template > li,
.wf-guides-grid.wp-block-post-template .wp-block-post {
  min-width: 0;
}
@media (max-width: 960px) {
  .wf-blog-grid.wp-block-post-template,
  .wf-guides-grid.wp-block-post-template {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 600px) {
  .wf-blog-grid.wp-block-post-template,
  .wf-guides-grid.wp-block-post-template {
    grid-template-columns: 1fr !important;
  }
}

/* Featured-first layout: latest blog post / guide spans 2 of 3 columns.
   Remaining items auto-flow into col 3 row 1, then col 1 row 2, etc. */
.wf-blog-grid.wp-block-post-template > li:first-child,
.wf-blog-grid.wp-block-post-template .wp-block-post:first-child,
.wf-guides-grid.wp-block-post-template > li:first-child,
.wf-guides-grid.wp-block-post-template .wp-block-post:first-child {
  grid-column: 1 / span 2;
}

/* Larger title and longer excerpt on the featured card */
.wf-blog-grid .wp-block-post:first-child .wf-blog-card__title,
.wf-blog-grid .wp-block-post:first-child h2.wf-blog-card__title,
.wf-guides-grid .wp-block-post:first-child .wf-blog-card__title,
.wf-guides-grid .wp-block-post:first-child h2.wf-blog-card__title {
  font-size: clamp(1.25rem, 2.5vw, 1.625rem) !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
}
.wf-blog-grid .wp-block-post:first-child .wf-blog-card__excerpt,
.wf-guides-grid .wp-block-post:first-child .wf-blog-card__excerpt {
  -webkit-line-clamp: 4 !important;
  max-height: none !important;
}

/* On tablet, featured card fills the full width row */
@media (max-width: 960px) {
  .wf-blog-grid.wp-block-post-template > li:first-child,
  .wf-blog-grid.wp-block-post-template .wp-block-post:first-child,
  .wf-guides-grid.wp-block-post-template > li:first-child,
  .wf-guides-grid.wp-block-post-template .wp-block-post:first-child {
    grid-column: 1 / -1;
  }
}
@media (max-width: 600px) {
  .wf-blog-grid.wp-block-post-template > li:first-child,
  .wf-blog-grid.wp-block-post-template .wp-block-post:first-child,
  .wf-guides-grid.wp-block-post-template > li:first-child,
  .wf-guides-grid.wp-block-post-template .wp-block-post:first-child {
    grid-column: 1;
  }
}

/* Card — white, rounded, subtle shadow on hover */
.wf-blog-card {
  background: #FFFFFF;
  border-radius: 10px;
  overflow: hidden;
  transition: box-shadow 0.18s, transform 0.18s;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.wf-blog-card:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,0.09);
  transform: translateY(-2px);
}

/* Featured image — 16:9, fills card width, no margin */
.wf-blog-card__image {
  margin: 0 !important;
  display: block !important;
  line-height: 0;
  overflow: hidden;
}
.wf-blog-card__image img,
.wf-blog-card__image .wp-post-image,
.wf-blog-card .wp-block-post-featured-image img,
.wf-blog-card .wp-block-post-featured-image a {
  width: 100% !important;
  aspect-ratio: 16/9 !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 0 !important;
  /* Kill Frost's transition:all on a:hover which causes image to zoom */
  transform: none !important;
  transition: none !important;
  scale: 1 !important;
}
/* Placeholder when no featured image */
.wf-blog-card__image:empty,
.wf-blog-card .wp-block-post-featured-image:not(:has(img)) {
  background: #E8EAED;
  aspect-ratio: 16/9;
  display: block;
}

/* Card body */
.wf-blog-card__body {
  padding: 1.125rem 1.25rem 1.375rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

/* Meta row — category badge + date, sits ABOVE the title */
.wf-blog-card__meta.wp-block-group {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.375rem 0.625rem !important;
  margin-bottom: 0.625rem !important;
  margin-top: 0 !important;
  border-top: none !important;
  padding-top: 0 !important;
  flex-wrap: wrap;
}

/* Category pill badge — like the reference colored chips */
.wf-blog-card__cat,
.wf-blog-card__cat .wp-block-post-terms {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  margin: 0 !important;
  min-width: 0;
}
.wf-blog-card__cat a,
.wf-blog-card__cat .wp-block-post-terms__item {
  display: inline-block !important;
  font-size: 0.625rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  background: rgba(15,163,177,0.12) !important;
  color: #0a7080 !important;
  text-decoration: none !important;
  padding: 0.2rem 0.6rem !important;
  border-radius: 99px !important;
  white-space: nowrap;
  line-height: 1.6;
}

/* Feature badge (static, indigo) */
.wf-feature-badge {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(99,102,241,0.12);
  color: #312e81;
  padding: 0.2rem 0.6rem;
  border-radius: 99px;
  white-space: nowrap;
  line-height: 1.6;
}

/* Blog badge (static, charcoal — distinct from Guide/News teal and
   Feature indigo, matching the brand's neutral accent) */
.wf-blog-badge {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(46,46,46,0.1);
  color: #2E2E2E;
  padding: 0.2rem 0.6rem;
  border-radius: 99px;
  white-space: nowrap;
  line-height: 1.6;
}

/* Guide badge (static, no category) */
.wf-guide-badge,
.wf-news-badge {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(15,163,177,0.15);
  color: #0a5462;
  padding: 0.2rem 0.6rem;
  border-radius: 99px;
  white-space: nowrap;
  line-height: 1.6;
}
.wf-blog-card__cat p { margin: 0 !important; }

/* Date */
.wf-blog-card__date {
  font-size: 0.8rem !important;
  color: #9CA3AF !important;
  white-space: nowrap;
  flex-shrink: 0;
}
.wf-blog-card__date .wp-block-post-date { font-size: inherit !important; color: inherit !important; }
.wf-blog-card__date a { color: #9CA3AF !important; text-decoration: none !important; }

/* Title — the <h2> itself carries both classes, so target the element directly */
h2.wf-blog-card__title,
.wf-blog-card__title.wp-block-post-title,
.wf-blog-card__title {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #111827 !important;
  margin: 0 0 0.5rem !important;
  line-height: 1.4 !important;
  text-align: left !important;
}
.wf-blog-card__title a { text-decoration: none !important; color: #111827 !important; }
.wf-blog-card__title a:hover { color: #0FA3B1 !important; }

/* Excerpt */
.wf-blog-card__excerpt {
  color: #6B7280;
  font-size: 0.875rem;
  line-height: 1.6;
  flex-grow: 1;
  margin: 0 !important;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.wf-blog-card__excerpt a { color: #0FA3B1 !important; text-decoration: none; }
.wf-blog-card__excerpt p { margin: 0 !important; }

/* Empty state */
.wf-blog__empty { color: #9CA3AF; padding: 4rem 0; font-style: italic; }

/* Blog pagination */
.wf-blog-pagination { margin-top: 3rem; }
.wf-blog-pagination .wp-block-query-pagination-numbers .page-numbers {
  padding: 0.5rem 0.875rem;
  border-radius: 6px;
  text-decoration: none;
  color: #6B7280;
  font-size: 0.9375rem;
}
.wf-blog-pagination .wp-block-query-pagination-numbers .page-numbers.current {
  background: #0FA3B1;
  color: #FFFFFF;
}

/* Category pill (used on single posts and archive pages) */
.wayfield-category-pill {
  display: inline-block;
  background: #0FA3B1;
  color: #FFFFFF;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border-radius: 9999px;
  text-decoration: none;
}

/* ─────────────────────────────────────────────────
   SINGLE GUIDE — article header, typography, sidebar
   Best practices: 18px body, 1.75 leading, ≤680px line
   measure, teal accents, sticky sidebar, Apple HIG.
───────────────────────────────────────────────── */

/* Dark header with accent bar — blog posts (teal), guides (teal), features (indigo) */
.wf-article-header--guide,
.wf-article-header--post {
  background: #111827;
  padding: 1.75rem 1.5rem 2rem;
  border-bottom: 3px solid #0FA3B1;
  /* Kill any margin/gap the site layout injects above this block */
  margin-top: 0 !important;
}
.wf-article-header--feature {
  background: #111827;
  padding: 1.75rem 1.5rem 2rem;
  border-bottom: 3px solid #6366f1;
  margin-top: 0 !important;
}
/* Remove block-gap above the article header so it butts against the nav */
body .wf-article-header--guide,
body .wf-article-header--post,
body .wf-article-header--feature,
body .wp-site-blocks > .wf-article-header--guide,
body .wp-site-blocks > .wf-article-header--post,
body .wp-site-blocks > .wf-article-header--feature {
  margin: 0 !important;
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}
/* Also kill the gap between nav and dark header */
body .wp-site-blocks > header.site-header + .wf-article-header--guide,
body .wp-site-blocks > header.site-header + .wf-article-header--post,
body .wp-site-blocks > header.site-header + .wf-article-header--feature {
  margin-top: 0 !important;
}

/* Blog post category terms badge */
.wf-article-cat-terms.wp-block-post-terms,
.wf-article-cat-terms .wp-block-post-terms__item {
  font-size: 0.625rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #0FA3B1 !important;
  text-decoration: none !important;
  display: inline-block;
  margin: 0;
}
.wf-article-cat-terms a {
  display: inline-block !important;
  font-size: 0.625rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  background: rgba(15,163,177,0.15) !important;
  color: #5CE6F2 !important;
  text-decoration: none !important;
  padding: 0.25rem 0.75rem !important;
  border-radius: 99px !important;
  white-space: nowrap;
  line-height: 1.6;
}
.wf-article-header--guide > .wp-block-group,
.wf-article-header--post > .wp-block-group {
  /* Matches .wf-article-columns' max-width (1200px) so the header title
     and the article body share the same left edge instead of the header
     centering at a narrower width and sitting further right. */
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
  display: block !important;
}
/* Feature badge inside the dark article header — needs bright indigo to be readable on #111827 */
.wf-article-header--feature .wf-feature-badge {
  background: rgba(99,102,241,0.2) !important;
  color: #c7d2fe !important;
}
.wf-article-header--feature > .wp-block-group {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
  display: block !important;
}

/* High-specificity override so Frost's body.single-post .wp-block-post-title rules
   cannot win — all header types must render at the same size */
.wf-article-header--post .wp-block-post-title,
.wf-article-header--guide .wp-block-post-title,
.wf-article-header--feature .wp-block-post-title {
  font-size: clamp(1.75rem, 4vw, 2.75rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.15 !important;
  color: #FFFFFF !important;
  margin: 0 0 1.25rem !important;
  text-align: left !important;
}
.wf-article-header__badge {
  /* Override WordPress core's per-child constrained-layout behavior,
     which otherwise re-centers this div in its own narrower max-width
     box (independent of the parent group's width) — the same reason
     .wf-article-header__title needed its own margin override below. */
  margin: 0 0 1rem !important;
  max-width: 100% !important;
  text-align: left !important;
  display: block !important;
  width: 100% !important;
}
/* Guide badge inside the dark article header — needs bright cyan to be readable on #111827 */
.wf-article-header--guide .wf-guide-badge {
  background: rgba(15,163,177,0.15) !important;
  color: #5CE6F2 !important;
}
.wf-article-header__title {
  color: #FFFFFF !important;
  font-size: clamp(1.75rem, 4vw, 2.75rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.15 !important;
  margin: 0 0 1.25rem !important;
  text-align: left !important;
  width: 100% !important;
  display: block !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.5), 0 1px 3px rgba(0,0,0,0.35) !important;
}
.wf-article-header__meta.wp-block-group {
  /* Same override as .wf-article-header__badge — escape WP core's
     per-child constrained-layout re-centering. */
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 100% !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0.625rem !important;
  flex-wrap: nowrap;
}
.wf-article-header__date,
.wf-article-header__date .wp-block-post-date,
.wf-article-header__author,
.wf-article-header__author .wp-block-post-author-name {
  color: rgba(255,255,255,0.5) !important;
  font-size: 0.875rem !important;
}
.wf-article-header__date a,
.wf-article-header__author a { color: inherit !important; text-decoration: none !important; }
.wf-article-meta-sep { border: none !important; background: rgba(255,255,255,0.25) !important; width: 1px !important; height: 12px !important; display: inline-block !important; margin: 0 !important; }

/* Full-width hero image — direct child of .wp-site-blocks flex column,
   so it is already full-width; no position trick needed (avoids sub-pixel
   gap on left edge). All margins zeroed to kill WordPress block-gap. */
.wf-article-hero-image,
.wf-article-hero-image.wp-block-post-featured-image,
.wf-article-hero-image.alignfull {
  width: 100% !important;
  max-width: 100% !important;
  position: static !important;
  left: auto !important;
  transform: none !important;
  margin: 0 !important;
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  max-height: 480px;
  display: block;
}
.wf-article-hero-image img,
.wf-article-hero-image .wp-block-post-featured-image img,
.wf-article-hero-image.wp-block-post-featured-image img {
  width: 100% !important;
  max-height: 480px !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 0 !important;
  transform: none !important;
  transition: none !important;
}

/* Content + sidebar wrapper — butts against hero image with no gap.
   Uses body prefix to beat WordPress's "body .wp-site-blocks > * + *" gap rule. */
body .wf-article-layout,
body .wf-article-layout.wp-block-group,
body .wp-site-blocks > .wf-article-layout {
  margin: 0 !important;
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
  padding: 1.5rem 1.5rem 5rem !important;
  background: #FFFFFF;
  max-width: 100% !important;
}
.wf-article-columns.wp-block-columns {
  gap: 4rem !important;
  align-items: start !important;
  max-width: 1200px;
  margin: 0 auto;
}

/* ── Article typography ── */
.wf-article-col .wp-block-post-content {
  font-size: 1.0625rem;
  line-height: 1.8;
  color: #1F2937;
}
.wf-article-col .wp-block-post-content > p,
.wf-article-col .wp-block-post-content .wp-block-paragraph {
  margin: 0 0 1.5rem !important;
  line-height: 1.8;
  font-size: 1.0625rem;
}
.wf-article-col .wp-block-post-content h2,
.wf-article-col .wp-block-post-content .wp-block-heading[class*="wp-block-heading"]:is(h2) {
  font-size: 1.625rem !important;
  font-weight: 800 !important;
  color: #111827 !important;
  margin: 3rem 0 0.875rem !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em;
  text-align: left !important;
  width: auto !important;
  display: block !important;
}
.wf-article-col .wp-block-post-content h3 {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: #111827 !important;
  margin: 2.25rem 0 0.625rem !important;
  line-height: 1.3 !important;
  text-align: left !important;
  width: auto !important;
  display: block !important;
}
.wf-article-col .wp-block-post-content h4 {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #374151 !important;
  margin: 1.75rem 0 0.5rem !important;
  text-align: left !important;
  width: auto !important;
  display: block !important;
}
.wf-article-col .wp-block-post-content ul,
.wf-article-col .wp-block-post-content ol {
  padding-left: 1.375rem !important;
  margin: 0 0 1.5rem !important;
}
.wf-article-col .wp-block-post-content li {
  margin-bottom: 0.5rem;
  line-height: 1.7;
}
.wf-article-col .wp-block-post-content strong { color: #111827; font-weight: 700; }
.wf-article-col .wp-block-post-content em { color: #374151; }
.wf-article-col .wp-block-post-content a {
  color: #0FA3B1;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.wf-article-col .wp-block-post-content a:hover { color: #0a7080; }

/* Blockquote — teal left border, subtle bg */
.wf-article-col .wp-block-post-content blockquote,
.wf-article-col .wp-block-post-content .wp-block-quote {
  border-left: 3px solid #0FA3B1 !important;
  padding: 0.875rem 1.375rem !important;
  margin: 2rem 0 !important;
  background: rgba(15,163,177,0.05) !important;
  border-radius: 0 8px 8px 0 !important;
}
.wf-article-col .wp-block-post-content blockquote p,
.wf-article-col .wp-block-post-content .wp-block-quote p {
  color: #374151 !important;
  font-style: italic;
  font-size: 1.0625rem !important;
  margin: 0 !important;
  line-height: 1.7;
}

/* Inline images */
.wf-article-col .wp-block-post-content img:not(.wf-sidebar-guide-thumb img) {
  border-radius: 8px;
  max-width: 100%;
  height: auto;
  margin: 0.5rem 0 1.5rem;
}

/* Unsplash attribution credit */
.wf-article-col .unsplash-credit,
.wf-article-col p.unsplash-credit {
  font-size: 0.8rem !important;
  color: #9CA3AF !important;
  margin: -0.75rem 0 1.75rem !important;
  line-height: 1.5 !important;
}
.wf-article-col .unsplash-credit a { color: #9CA3AF !important; text-decoration: none !important; }
.wf-article-col .unsplash-credit a:hover { color: #0FA3B1 !important; }

/* ── Sidebar ── */
.wf-guide-sidebar-col.wp-block-column {
  position: sticky;
  top: 5rem;
  align-self: start;
  max-width: 280px !important;
}
.wf-guide-sidebar.wp-block-group {
  background: #F9FAFB;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  padding: 1.25rem !important;
  max-width: 280px;
}
.wf-guide-sidebar__heading.wp-block-heading {
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #9CA3AF !important;
  margin: 0 0 1.125rem !important;
  text-align: left !important;
  width: auto !important;
  display: block !important;
}
.wf-sidebar-guide-list.wp-block-post-template {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.wf-sidebar-guide-item.wp-block-group {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 0.75rem !important;
  padding: 0.875rem 0 !important;
  border-bottom: 1px solid #E5E7EB;
  margin: 0 !important;
}
.wf-sidebar-guide-item.wp-block-group:last-child { border-bottom: none; padding-bottom: 0 !important; }
.wf-sidebar-guide-thumb { flex-shrink: 0; }
.wf-sidebar-guide-thumb .wp-block-post-featured-image img {
  width: 72px !important;
  height: 72px !important;
  min-width: 72px !important;
  object-fit: cover !important;
  border-radius: 8px !important;
  display: block !important;
  transform: none !important;
  transition: none !important;
}
.wf-sidebar-guide-info.wp-block-group {
  flex: 1 !important;
  min-width: 0 !important;
  display: block !important;
}
.wf-sidebar-guide-title {
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  color: #111827 !important;
  margin: 0 0 0.3rem !important;
  text-align: left !important;
  width: auto !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.wf-sidebar-guide-title a { color: #111827 !important; text-decoration: none !important; }
.wf-sidebar-guide-title a:hover { color: #0FA3B1 !important; }
.wf-sidebar-guide-date,
.wf-sidebar-guide-date .wp-block-post-date {
  font-size: 0.75rem !important;
  color: #9CA3AF !important;
  display: block !important;
}
.wf-sidebar-guide-date a { color: #9CA3AF !important; text-decoration: none !important; }
.wf-sidebar-all-guides {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #0FA3B1;
  text-decoration: none;
}
.wf-sidebar-all-guides:hover { color: #0a7080; }

@media (max-width: 768px) {
  .wf-guide-sidebar-col.wp-block-column {
    position: static;
    max-width: 100% !important;
  }
  .wf-guide-sidebar.wp-block-group { max-width: 100%; }
  .wf-article-layout.wp-block-group { padding: 2rem 1.25rem 3rem; }
}

/* ─────────────────────────────────────────────────
   PAGE TEMPLATES — generic page + features page
───────────────────────────────────────────────── */

/* Generic page (about, contact, pricing, etc.) */
.wf-page-content { padding: 4rem 1.5rem 6rem; }

.wf-page-hero {
  background: #F8F9FA;
  padding: 4rem 1.5rem 3rem;
  border-bottom: 1px solid #E5E7EB;
}
.wf-page-hero__title {
  font-size: clamp(2rem, 4vw, 3rem) !important;
  font-weight: 800 !important;
  color: #111827 !important;
  letter-spacing: -0.02em !important;
  margin: 0 !important;
}

/* Features page specific hero */
.wf-features-page-hero {
  position: relative;
  background-image: var(--wf-hero-bg, none);
  background-color: #0a7080;
  background-size: cover;
  background-position: center;
  min-height: 29vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  text-align: center;
}
.wf-features-page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.6) 100%);
  z-index: 0;
}
.wf-features-page-hero > * {
  position: relative;
  z-index: 1;
}
.wf-features-page-hero__title {
  color: #FFFFFF !important;
  font-size: clamp(2rem, 4vw, 3rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 1.25rem !important;
  text-align: center !important;
  text-wrap: balance;
}
.wf-features-page-hero__sub {
  color: rgba(255,255,255,0.82);
  font-size: 1.125rem;
  line-height: 1.65;
  margin: 0 auto 2rem;
  max-width: 640px;
  text-align: center;
}
.wf-features-page-hero .wf-section__label {
  color: rgba(255,255,255,0.75);
  border-color: rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.12);
  margin-bottom: 1rem;
}
.wf-features-page-hero .has-text-align-center { text-align: center !important; }
.wf-features-page-hero .wp-block-button__link { color: #fff !important; }
.wf-features-page-hero .wp-block-button.is-style-outline .wp-block-button__link {
  color: #fff !important;
  border-color: rgba(255,255,255,0.6) !important;
}

/* ─────────────────────────────────────────────────
   CODE / MONO
───────────────────────────────────────────────── */

code, kbd, pre {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.875rem;
  background: #F3F4F6;
  padding: 0.125rem 0.375rem;
  border-radius: 4px;
}

/* ─────────────────────────────────────────────────
   HERO — Full-screen gradient + optional photos
   Photos are injected by functions.php wp_footer
   when wf_hero_images option is set. Until then
   the gradient alone fills the full viewport.
───────────────────────────────────────────────── */

.wf-hero-section {
  min-height: 29vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  position: relative;
  background-image: var(--wf-hero-bg, url('/wp-content/uploads/2026/05/46-1600x800.jpg'));
  background-size: cover;
  background-position: center 30%;
  overflow: hidden;
  text-align: center;
}

/* Cap inner content width without a WP layout constraint */
.wf-hero-section > * {
  max-width: 820px;
  width: 100%;
}

/* Photo slides — injected by JS from functions.php */
.wf-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
}

.wf-slide--1 { animation: wf-slide 18s 0s  infinite; }
.wf-slide--2 { animation: wf-slide 18s 6s  infinite; }
.wf-slide--3 { animation: wf-slide 18s 12s infinite; }

@keyframes wf-slide {
  0%   { opacity: 1; }
  28%  { opacity: 1; }
  33%  { opacity: 0; }
  95%  { opacity: 0; }
  100% { opacity: 1; }
}

/* Overlay: light vignette — dark edges, clear centre where text sits */
.wf-hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.35) 0%,
    rgba(0,0,0,0.10) 35%,
    rgba(0,0,0,0.10) 65%,
    rgba(0,0,0,0.40) 100%
  );
  pointer-events: none;
}

/* Content sits above the photo layer */
.wf-hero-section > * {
  position: relative;
  z-index: 1;
}

.wf-hero-section {
  padding: 5rem 1.5rem 6rem;
  text-align: center;
}

/* ─────────────────────────────────────────────────
   PARTICIPANTS SECTION
───────────────────────────────────────────────── */

.wf-participants {
  background: #FFFFFF;
  padding: 6rem 1.5rem;
}

.wf-participants__features { gap: 2rem !important; }

.wf-participant-feature {
  text-align: center;
  padding: 1.5rem 1rem;
}

.wf-participant-feature__icon {
  font-size: 2.5rem;
  margin: 0 0 1rem;
  line-height: 1;
}

.wf-participant-feature__title {
  font-size: 1.0625rem !important;
  font-weight: 700 !important;
  color: #111827 !important;
  margin: 0 0 0.625rem !important;
}

.wf-participant-feature__body {
  color: #6B7280;
  font-size: 0.9rem;
  line-height: 1.7;
  margin: 0;
}

.wf-participants__app-cta { margin-top: 3rem; }
.wf-participants__buttons { gap: 1rem !important; }

/* ─────────────────────────────────────────────────
   RESOURCES SECTION
───────────────────────────────────────────────── */

.wf-resources__cols { gap: 3rem !important; }

.wf-resources__col-label {
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #9CA3AF !important;
  margin: 0 0 1.25rem !important;
  font-family: var(--wp--preset--font-family--mono, 'JetBrains Mono', monospace) !important;
}

.wf-resource-card { margin: 0; }

.wf-resource-card__image {
  margin: 0 0 1rem;
  border-radius: 10px;
  overflow: hidden;
}
.wf-resource-card__image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
}

.wf-resource-card__cats {
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #0FA3B1;
}
.wf-resource-card__cats a { color: #0FA3B1; text-decoration: none; }

.wf-resource-card__title {
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  color: #111827 !important;
  line-height: 1.3 !important;
  margin: 0 0 0.625rem !important;
}
.wf-resource-card__title a { color: #111827; text-decoration: none; }
.wf-resource-card__title a:hover { color: #0FA3B1; }

.wf-resource-card__excerpt {
  color: #6B7280;
  font-size: 0.9rem;
  line-height: 1.65;
  margin: 0 0 0.875rem;
}
.wf-resource-card__excerpt a { color: #0FA3B1; font-weight: 500; }

.wf-resource-card__date {
  color: #9CA3AF;
  font-size: 0.8125rem;
  margin: 0;
}

.wf-resources__empty {
  color: #9CA3AF;
  font-size: 0.9375rem;
  font-style: italic;
  padding: 2rem 0;
  margin: 0;
}

/* Topic tags */
.wf-resource-topics {
  margin-top: 3rem;
  text-align: center;
}

.wf-resource-topics__heading {
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #9CA3AF !important;
  margin: 0 0 1rem !important;
}

.wf-topic-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}

.wf-topic-tag {
  display: inline-block;
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  color: #374151;
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 0.375rem 0.875rem;
  border-radius: 9999px;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.wf-topic-tag:hover {
  background: #0FA3B1;
  border-color: #0FA3B1;
  color: #FFFFFF;
}

.wf-section__cta-row {
  margin-top: 2.5rem;
  gap: 1rem !important;
}
.wf-section__cta-row .wp-block-button__link {
  border-radius: 8px !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
}

/* ─────────────────────────────────────────────────
   FOOTER — APP STORE BADGES
───────────────────────────────────────────────── */

.wf-footer__app-badges {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

.wf-footer__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.85);
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  text-decoration: none;
  min-height: 44px;
  transition: background 0.15s, border-color 0.15s;
}
.wf-footer__badge:hover {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.35);
  color: #FFFFFF;
}
.wf-footer__badge-icon { font-size: 1rem; }

/* ─────────────────────────────────────────────────
   RESPONSIVE TWEAKS
───────────────────────────────────────────────── */

@media (max-width: 768px) {
  .wf-hero-section { min-height: 29vh; }
  .wf-hero-inner { padding: 4rem 1rem 5rem; }
  .wf-section { padding: 4rem 1rem; }
  .wf-newsletter { padding: 4rem 1rem; }
  .wf-cta { padding: 4rem 1rem; }
  .wf-participants { padding: 4rem 1rem; }
  .wf-footer__upper { padding: 3.5rem 1rem 3rem; }
  .wf-newsletter__row { flex-direction: column; }
  .wf-newsletter__submit { width: 100%; justify-content: center; }
  .wf-nav { padding: 0 0.5rem; }
  .wf-resources__cols { gap: 2rem !important; }
}

/* ── MOBILE NAV — logo left, hamburger toggle right ──
   Matches WordPress core's own navigation-block breakpoint exactly
   (600px — see the min-width:601px desktop-grid rule above). Below
   this point the desktop 3-column grid no longer applies; fall back
   to a simple 2-item flex row and let WP core's own responsive
   navigation (toggle + full-screen overlay) handle the menu itself. */
@media (max-width: 600px) {
  .wf-nav .wf-nav__inner.wp-block-columns {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 56px !important;
  }
  .wf-nav__logo-col { flex: 0 0 auto !important; }
  /* Desktop button row (Log In / Get Started) hides here — the
     primary "Get Started" CTA is already prominent throughout page
     content, and hiding this keeps the mobile header to logo + one
     tap target instead of three competing for a narrow row. */
  .wf-nav__cta-col { display: none !important; }
  /* The links column becomes the toggle button's container */
  .wf-nav__links-col {
    flex: 0 0 auto !important;
    justify-content: flex-end !important;
  }

  /* WordPress core's hamburger toggle button */
  .wf-nav .wp-block-navigation__responsive-container-open {
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    border: none !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0.5rem !important;
    cursor: pointer;
  }
  .wf-nav .wp-block-navigation__responsive-container-open svg {
    width: 26px !important;
    height: 26px !important;
    color: #111827 !important;
    stroke: #111827 !important;
  }

  /* Full-screen overlay panel + its close button */
  .wf-nav .wp-block-navigation__responsive-container.is-menu-open {
    background: #FFFFFF !important;
    z-index: 999 !important;
    padding: 1.5rem !important;
  }
  .wf-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
    min-width: 44px !important;
    min-height: 44px !important;
    color: #111827 !important;
    background: transparent !important;
    border: none !important;
  }
  .wf-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg {
    width: 24px !important;
    height: 24px !important;
    color: #111827 !important;
    stroke: #111827 !important;
  }
  /* Nav links inside the open overlay — stacked, generously sized,
     44px touch targets */
  .wf-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.25rem !important;
    margin-top: 3rem !important;
  }
  .wf-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    display: flex !important;
    align-items: center !important;
    min-height: 44px !important;
    font-size: 1.125rem !important;
    color: #111827 !important;
    padding-block: 0 !important;
  }
}

/* =================================================================
   NUCLEAR HEADING CENTER — loaded last, beats all Frost global styles.
   Root cause: Frost vertical flex groups use align-items:flex-start,
   collapsing heading width → text-align:center looks left-aligned.
   Fix: force block + full-width so text-align:center is meaningful.
   ================================================================= */
h1.has-text-align-center,
h2.has-text-align-center,
h3.has-text-align-center,
h4.has-text-align-center,
h5.has-text-align-center,
h6.has-text-align-center,
.wp-block-heading.has-text-align-center {
  text-align: center !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  align-self: stretch !important;
  box-sizing: border-box !important;
}

/* Belt-and-suspenders: any heading inside a wf-section */
.wf-section h1,
.wf-section h2,
.wf-section h3,
.wf-section .wp-block-heading {
  text-align: center !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  align-self: stretch !important;
}

/* Fix flex-container child collapsing on section groups */
.wf-section.wp-block-group,
.wp-block-group.wf-section {
  align-items: stretch !important;
}

/* Remove WordPress block-gap margins between ALL top-level blocks.
   wp:html renders its inner HTML directly (no wrapper element), so
   targeting specific class names misses those blocks entirely.
   Using > * catches everything; the footer sticky rule remains more
   specific so margin-top:auto on footer.site-footer still wins. */
.wp-site-blocks > *:not(footer) {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}

/* Also zero out any inline margin WP adds to block groups used as sections */
.wf-section.wp-block-group {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Mobile: tighten section padding further */
@media (max-width: 640px) {
  .wf-section { padding: 3rem 1rem !important; }
}

/* =================================================================
   SECTION ALTERNATION — break up consecutive gray sections.
   Sections that don't have an explicit dark/teal color get
   alternated white/gray so they're visually distinct.
   ================================================================= */
.wf-section:not(.wf-section--dark):not(.wf-section--teal):not(.wf-section--cta):not(.wf-section--coming-soon):not(.wf-section--white):not(.wf-section--gray):nth-child(odd) {
  background: #FFFFFF !important;
}
.wf-section:not(.wf-section--dark):not(.wf-section--teal):not(.wf-section--cta):not(.wf-section--coming-soon):not(.wf-section--white):not(.wf-section--gray):nth-child(even) {
  background: #EDF7F8 !important;
}

/* ─────────────────────────────────────────────────────────
   WORKSHOP CARDS — featured workshop highlights in blog posts
   ───────────────────────────────────────────────────────── */

.wf-workshop-section {
  margin: 2.5rem 0 !important;
  padding: 2rem 1.5rem !important;
  background: #F9FAFB;
  border: 1px solid #E5E7EB;
  border-radius: 16px;
}
.wf-workshop-section__title {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #6B7280 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  margin: 0 0 1.25rem !important;
}

.wf-workshop-card {
  display: flex;
  gap: 1.25rem;
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 1rem;
  transition: box-shadow 0.15s ease;
}
.wf-workshop-card:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.wf-workshop-card:last-child {
  margin-bottom: 0;
}

.wf-workshop-card__image {
  flex-shrink: 0;
  width: 140px;
}
.wf-workshop-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.wf-workshop-card__body {
  flex: 1;
  padding: 1rem 1rem 1rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.wf-workshop-card:not(:has(.wf-workshop-card__image)) .wf-workshop-card__body {
  padding: 1rem;
}

.wf-workshop-card__badges {
  margin-bottom: 0.25rem;
}
.wf-workshop-card__archived-badge {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 700;
  background: #FEF3C7;
  color: #92400E;
  padding: 0.2rem 0.6rem;
  border-radius: 99px;
  letter-spacing: 0.03em;
}

.wf-workshop-card__cats {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #0FA3B1;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 !important;
}

.wf-workshop-card__title {
  font-size: 1.0625rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  margin: 0.25rem 0 !important;
}
.wf-workshop-card__title a {
  color: #111827 !important;
  text-decoration: none !important;
}
.wf-workshop-card__title a:hover {
  color: #0FA3B1 !important;
}

.wf-workshop-card__meta {
  font-size: 0.8125rem !important;
  color: #6B7280 !important;
  margin: 0 !important;
}

.wf-workshop-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 0.75rem;
}
.wf-workshop-card__price {
  font-size: 1.125rem;
  font-weight: 800;
  color: #111827;
}
.wf-workshop-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #FFFFFF !important;
  background: #0FA3B1;
  padding: 0.4rem 0.875rem;
  border-radius: 8px;
  text-decoration: none !important;
  transition: background 0.15s ease;
}
.wf-workshop-card__cta:hover {
  background: #0d8f9c !important;
}

@media (max-width: 600px) {
  .wf-workshop-card { flex-direction: column; }
  .wf-workshop-card__image { width: 100%; height: 180px; }
  .wf-workshop-card__body { padding: 1rem; }
}

/* Secondary sidebar box (More Guides on post pages / More Articles on guide pages) */
.wf-sidebar-secondary.wf-guide-sidebar {
  margin-top: 1.25rem !important;
}

/* ─────────────────────────────────────────────────
   SHARE BAR
───────────────────────────────────────────────── */

.wf-share-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 1.25rem 0;
  border-top: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
  margin: 2.5rem 0 0;
}

.wf-share-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-right: 0.25rem;
}

.wf-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.85rem;
  border-radius: 6px;
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none !important;
  transition: background 0.15s ease, color 0.15s ease;
  border: 1px solid transparent;
  cursor: pointer;
  background: #f3f4f6;
  color: #374151;
  min-height: 36px;
}

.wf-share-btn:hover { background: #e5e7eb; color: #111827; }

.wf-share-x:hover         { background: #000; color: #fff; }
.wf-share-linkedin:hover  { background: #0a66c2; color: #fff; }
.wf-share-facebook:hover  { background: #1877f2; color: #fff; }
.wf-share-copy:hover      { background: #0FA3B1; color: #fff; }

.wf-share-btn svg { flex-shrink: 0; }

/* ─────────────────────────────────────────────────
   ARTICLE TAGS — rendered above the share bar
───────────────────────────────────────────────── */

.wf-article-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 2.5rem;
}

.wf-article-tags__label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b7280;
  margin-right: 0.25rem;
  white-space: nowrap;
}

.wf-tag-pill {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #374151;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  padding: 0.3rem 0.875rem;
  text-decoration: none;
  line-height: 1.4;
  transition: background 150ms, color 150ms, border-color 150ms;
}

.wf-tag-pill:hover {
  background: #0FA3B1;
  color: #fff;
  border-color: #0FA3B1;
  text-decoration: none;
}

/* ─────────────────────────────────────────────────
   COMMENTS SECTION
───────────────────────────────────────────────── */

.wf-comments-section {
  margin-top: 3rem;
  padding-top: 2rem;
}

/* Comment list */
.wf-comments-section .wp-block-comments-title {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: #111827 !important;
  margin-bottom: 1.5rem !important;
}

.wf-comments-section .wp-block-comment-template {
  list-style: none !important;
  padding: 0 !important;
}

.wf-comments-section .wp-block-comment {
  padding: 1.25rem 0;
  border-bottom: 1px solid #f3f4f6;
}

.wf-comments-section .wp-block-comment:last-child { border-bottom: none; }

/* Avatar */
.wf-comments-section .wp-block-avatar img {
  border-radius: 50% !important;
  width: 40px !important;
  height: 40px !important;
}

/* Author name */
.wf-comments-section .wp-block-comment-author-name a {
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  color: #111827 !important;
  text-decoration: none !important;
}

/* Date */
.wf-comments-section .wp-block-comment-date a,
.wf-comments-section .wp-block-comment-date {
  font-size: 0.8rem !important;
  color: #9ca3af !important;
  text-decoration: none !important;
}

/* Comment content */
.wf-comments-section .wp-block-comment-content p {
  font-size: 0.9375rem !important;
  color: #374151 !important;
  line-height: 1.65 !important;
  margin: 0.5rem 0 0 !important;
}

/* Reply link */
.wf-comments-section .wp-block-comment-reply-link a {
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  color: #0FA3B1 !important;
  text-decoration: none !important;
}
.wf-comments-section .wp-block-comment-reply-link a:hover { text-decoration: underline !important; }

/* Comment form */
.wf-comments-section .wp-block-post-comments-form {
  margin-top: 2rem;
}

.wf-comments-section .wp-block-post-comments-form h3 {
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: #111827 !important;
  margin-bottom: 1rem !important;
}

.wf-comments-section .comment-form label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: 0.3rem;
}

.wf-comments-section .comment-form input[type="text"],
.wf-comments-section .comment-form input[type="email"],
.wf-comments-section .comment-form input[type="url"],
.wf-comments-section .comment-form textarea {
  width: 100%;
  padding: 0.6rem 0.875rem;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 0.9375rem;
  color: #111827;
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.wf-comments-section .comment-form input:focus,
.wf-comments-section .comment-form textarea:focus {
  outline: none;
  border-color: #0FA3B1;
  box-shadow: 0 0 0 3px rgba(15,163,177,0.12);
}

.wf-comments-section .comment-form textarea { min-height: 120px; resize: vertical; }

.wf-comments-section .comment-form .form-submit input[type="submit"] {
  display: inline-flex;
  align-items: center;
  padding: 0.6rem 1.5rem;
  background: #0FA3B1;
  color: #fff;
  font-weight: 600;
  font-size: 0.9375rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease;
  min-height: 44px;
}

.wf-comments-section .comment-form .form-submit input[type="submit"]:hover {
  background: #0d8f9c;
}

/* "Must be logged in" notice */
.wf-comments-section .must-log-in {
  font-size: 0.9rem;
  color: #6b7280;
  padding: 1rem;
  background: #f9fafb;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

.wf-comments-section .must-log-in a {
  color: #0FA3B1;
  font-weight: 500;
}

@media (max-width: 600px) {
  .wf-share-bar { gap: 0.4rem; }
  .wf-share-btn span { display: none; }
  .wf-share-btn { padding: 0.5rem; border-radius: 8px; }
}

/* Wayfield Calculator Embed
   MKT-CALC-01
   ─────────────────────────── */
.wayfield-calculator-embed {
    margin: 2rem auto;
    max-width: 900px;
}

@media (max-width: 600px) {
    .wayfield-calculator-embed iframe {
        height: 960px; /* taller on mobile: inputs + results stack */
    }
}

/* ─────────────────────────────────────────────────
   NAV SUBMENU / DROPDOWN
───────────────────────────────────────────────── */
.wf-nav .wp-block-navigation-item.has-child {
  position: relative;
}
.wf-nav .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.10);
  min-width: 200px;
  padding: 0.75rem 0 0.5rem; /* top padding fills hover gap — no margin-top so cursor can reach dropdown */
  z-index: 200;
}
.wf-nav .wp-block-navigation-item.has-child:hover > .wp-block-navigation__submenu-container,
.wf-nav .wp-block-navigation-item.has-child:focus-within > .wp-block-navigation__submenu-container {
  display: block;
}
.wf-nav .wp-block-navigation__submenu-container .wp-block-navigation-item a {
  display: block;
  padding: 0.5rem 1.125rem;
  font-size: 0.875rem;
  color: #374151 !important;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s;
}
.wf-nav .wp-block-navigation__submenu-container .wp-block-navigation-item a:hover {
  background: #F3F4F6;
  color: #0FA3B1 !important;
}
.wf-nav .wp-block-navigation-submenu__toggle {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: #374151;
  font-size: inherit;
  font-family: inherit;
}
.wf-nav .wp-block-navigation-submenu__toggle:hover { color: #0FA3B1; }

/* ─────────────────────────────────────────────────
   PHOTO HERO — reusable photo-background page header
   Usage: <div class="wf-photo-hero"> with a
   --wf-hero-bg CSS variable set per-page via PHP.
   Falls back to the teal gradient when no image set.
───────────────────────────────────────────────── */
.wf-photo-hero {
  position: relative;
  min-height: 29vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-image: var(--wf-hero-bg, none);
  background-color: #0a7080;
  background-size: cover;
  background-position: center;
  padding: 3rem 2rem;
}
.wf-photo-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.72) 100%);
  z-index: 0;
}
/* Hero text container — no glass, text reads over the gradient overlay */
.wf-photo-hero__glass {
  position: relative;
  z-index: 1;
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  padding: 0 2rem;
}
.wf-photo-hero__label {
  display: inline-block;
  font-family: var(--wp--preset--font-family--mono, monospace);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  border: 1.5px solid rgba(255,255,255,0.5);
  border-radius: 9999px;
  padding: 0.25rem 0.75rem;
  margin: 0 0 1rem;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
  /* Frosted-glass pill — same treatment as .wf-section__label. */
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
/* Shared frosted-glass treatment for raw-HTML outline buttons in photo
   heroes (page-leaders/organizers/participants/security) — same look
   as .wf-photo-hero__label, applied via inline style + this class since
   these hero CTAs are hand-written HTML, not wp:button blocks. */
.wf-btn-glass {
  background: rgba(255,255,255,0.12) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  transition: background 0.2s, border-color 0.2s;
}
.wf-btn-glass:hover {
  background: rgba(255,255,255,0.22) !important;
  border-color: rgba(255,255,255,0.8) !important;
}
.wf-photo-hero__title {
  color: #ffffff !important;
  font-size: clamp(1.875rem, 4.5vw, 3rem) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 1rem !important;
  text-wrap: balance;
  text-shadow: 0 2px 12px rgba(0,0,0,0.55), 0 1px 3px rgba(0,0,0,0.4) !important;
}
.wf-photo-hero__sub {
  color: rgba(255,255,255,0.9);
  font-size: 1.0625rem;
  line-height: 1.6;
  margin: 0;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  text-shadow: 0 1px 6px rgba(0,0,0,0.45);
}
@media (max-width: 640px) {
  .wf-photo-hero__glass { padding: 0; }
}

/* ─────────────────────────────────────────────────
   PRICING HERO — photo background matching web app
───────────────────────────────────────────────── */
.wf-pricing-hero-photo {
  position: relative;
  min-height: 29vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-image: var(--wf-hero-bg, none);
  background-color: #0a7080;
  background-size: cover;
  background-position: center;
  padding: 3rem 2rem;
}
.wf-pricing-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.72) 100%);
  z-index: 0;
}
.wf-pricing-hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
  padding: 0 1rem;
}
.wf-pricing-hero-label {
  font-family: var(--wp--preset--font-family--mono, monospace);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  margin: 0 0 1rem;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.wf-pricing-hero-title {
  font-family: var(--wp--preset--font-family--heading, inherit);
  font-weight: 800;
  color: #fff;
  font-size: clamp(1.875rem, 4.5vw, 3rem);
  line-height: 1.1;
  margin: 0 0 1rem;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 12px rgba(0,0,0,0.55), 0 1px 3px rgba(0,0,0,0.4);
}
.wf-pricing-hero-sub {
  font-size: 1.0625rem;
  color: rgba(255,255,255,0.9);
  line-height: 1.65;
  margin: 0 auto;
  max-width: 640px;
  text-shadow: 0 1px 6px rgba(0,0,0,0.45);
}

/* ─────────────────────────────────────────────────
   PRICING SECTION — full card grid (wp:html block)
───────────────────────────────────────────────── */
.wf-pricing-section {
  background: #F9FAFB;
  padding: 0 1.25rem 4rem;
  max-width: 1200px;
  margin: 0 auto;
}
.wf-pricing-page {
  background: #F9FAFB;
}

/* Billing toggle */
.wf-billing-toggle-wrap {
  display: flex;
  justify-content: center;
  padding: 2.5rem 0 2rem;
}
.wf-billing-toggle {
  display: inline-flex;
  padding: 4px;
  border-radius: 9999px;
  background: rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.08);
  gap: 2px;
}
.wf-billing-btn {
  padding: 8px 22px;
  border-radius: 9999px;
  border: none;
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--wp--preset--font-family--sans, inherit);
  color: #6B7280;
  cursor: pointer;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.wf-billing-btn--active {
  background: white;
  color: #111827;
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}
.wf-billing-badge {
  font-size: 10px;
  font-weight: 700;
  font-family: var(--wp--preset--font-family--mono, monospace);
  background: #E67E22;
  color: white;
  border-radius: 9999px;
  padding: 2px 8px;
  line-height: 1.4;
}

/* Grid */
.wf-pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
@media (max-width: 1024px) {
  .wf-pricing-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .wf-pricing-grid { grid-template-columns: 1fr; }
}

/* Plan card */
.wf-plan-card {
  background: white;
  border: 1px solid #E5E7EB;
  border-radius: 16px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.wf-plan-card--featured {
  border: 2px solid #0FA3B1;
  box-shadow: 0 4px 20px rgba(15,163,177,0.15);
}
.wf-plan-card--dark {
  background: #2E2E2E;
  border-color: rgba(255,255,255,0.1);
}

/* Badge row */
.wf-badge-row {
  height: 22px;
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}
.wf-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 9999px;
  font-family: var(--wp--preset--font-family--mono, monospace);
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.wf-badge--teal { background: #0FA3B1; color: white; }
.wf-badge-text {
  font-family: var(--wp--preset--font-family--mono, monospace);
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #0FA3B1;
}
.wf-plan-card--dark .wf-badge-text { color: rgba(255,255,255,0.45); }

/* Name + tagline */
.wf-plan-name {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #2E2E2E !important;
  margin: 0 0 4px !important;
  font-family: var(--wp--preset--font-family--heading, inherit) !important;
}
.wf-plan-card--dark .wf-plan-name { color: white !important; }
.wf-plan-tagline {
  font-size: 13px;
  color: #6B7280;
  margin: 0 0 20px;
  line-height: 1.4;
}
.wf-plan-card--dark .wf-plan-tagline { color: rgba(255,255,255,0.55); }

/* Price block */
.wf-price-block { margin-bottom: 20px; }
.wf-price-row { display: flex; align-items: baseline; gap: 3px; }
.wf-price-amount {
  font-size: 38px;
  font-weight: 700;
  line-height: 1;
  color: #2E2E2E;
  font-family: var(--wp--preset--font-family--heading, inherit);
}
.wf-plan-card--dark .wf-price-amount { color: white; }
.wf-price-per { font-size: 13px; color: #6B7280; }
.wf-plan-card--dark .wf-price-per { color: rgba(255,255,255,0.55); }
.wf-price-sub { font-size: 12px; color: #9CA3AF; margin: 4px 0 0; }
.wf-plan-card--dark .wf-price-sub { color: rgba(255,255,255,0.4); }

/* Divider */
.wf-divider { height: 1px; background: #F3F4F6; margin-bottom: 20px; }
.wf-plan-card--dark .wf-divider { background: rgba(255,255,255,0.1); }

/* Best For */
.wf-best-for { margin-bottom: 20px; }
.wf-section-micro {
  font-family: var(--wp--preset--font-family--mono, monospace);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #9CA3AF;
  margin: 0 0 4px;
}
.wf-plan-card--dark .wf-section-micro { color: rgba(255,255,255,0.4); }
.wf-best-for-text {
  font-size: 13px;
  color: #6B7280;
  font-style: italic;
  margin: 0;
}
.wf-plan-card--dark .wf-best-for-text { color: rgba(255,255,255,0.7); }

/* Features block */
.wf-features-block { flex: 1; margin-bottom: 28px; }
.wf-inherits-from {
  font-size: 11px;
  color: #9CA3AF;
  font-style: italic;
  margin: 0 0 10px;
}
.wf-plan-card--dark .wf-inherits-from { color: rgba(255,255,255,0.4); }
.wf-feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wf-feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: #374151;
  line-height: 1.4;
}
.wf-plan-card--dark .wf-feature-list li { color: rgba(255,255,255,0.85); }
.wf-check-icon { flex-shrink: 0; margin-top: 2px; }

/* CTA — theme.json button element styles bleed in via .wp-block-html;
   reset the container first, then re-apply only what we want. */
.wp-block-html .wf-cta {
  margin-top: auto;
  padding-top: 24px;
  background: transparent !important;
  background-color: transparent !important;
}
/* Button reset: nuke ALL WP/Frost theme.json button inheritance on our anchor CTAs */
.wp-block-html .wf-btn,
.wp-block-html .wf-btn:visited,
.wp-block-html .wf-btn:hover,
.wp-block-html .wf-btn:focus {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  font-family: var(--wp--preset--font-family--sans, inherit) !important;
  text-decoration: none !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  padding: 0 16px !important;
  transition: opacity 0.15s !important;
  overflow: hidden !important;
}
.wp-block-html .wf-btn:hover { opacity: 0.88 !important; }
/* Per-style overrides — after the reset above, these always win */
.wp-block-html .wf-btn--solid-teal {
  background-color: #0FA3B1 !important;
  color: white !important;
  border: none !important;
}
.wp-block-html .wf-btn--outline-orange {
  background-color: white !important;
  color: #E67E22 !important;
  border: 1.5px solid #E67E22 !important;
}
.wp-block-html .wf-btn--outline-teal {
  background-color: white !important;
  color: #0FA3B1 !important;
  border: 1.5px solid #0FA3B1 !important;
}
.wp-block-html .wf-btn--outline-white {
  background-color: rgba(255,255,255,0.08) !important;
  color: white !important;
  border: 1.5px solid rgba(255,255,255,0.3) !important;
}

/* Annual note + calc link */
.wf-annual-note { text-align: center; font-size: 13px; color: #9CA3AF; margin-top: 1.5rem; }
.wf-calc-link { text-align: center; font-size: 14px; color: #6B7280; margin-top: 2rem; }
.wf-calc-link a { color: #0FA3B1; font-weight: 600; text-decoration: none; }
.wf-calc-link a:hover { text-decoration: underline; }

/* ─────────────────────────────────────────────────
   CALCULATOR HERO — deeper teal gradient
───────────────────────────────────────────────── */
.wf-calculator-hero {
  background: linear-gradient(145deg, #0a7080 0%, #0d8a96 50%, #0FA3B1 100%);
}

/* ─────────────────────────────────────────────────
   CALCULATOR PAGE WRAPPER
───────────────────────────────────────────────── */
.wf-calculator-page {
  padding-top: 3rem;
  padding-bottom: 4rem;
}

/* ─────────────────────────────────────────────────
   ABOUT PAGE
───────────────────────────────────────────────── */
.wf-about-wrap {
  font-family: var(--wp--preset--font-family--body, sans-serif);
}

/* Story section */
.wf-about-story {
  max-width: 1024px;
  margin: 0 auto;
  padding: 4rem 1.5rem;
}
.wf-about-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #0FA3B1;
  margin-bottom: 0.5rem;
}
.wf-about-h2 {
  font-family: var(--wp--preset--font-family--heading, inherit);
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
  font-weight: 700;
  color: #111827;
  margin: 0 0 2rem;
  letter-spacing: -0.02em;
}
.wf-about-prose p {
  color: #4B5563;
  line-height: 1.75;
  margin: 0 0 1.25rem;
  font-size: 1rem;
}
.wf-about-prose p:last-child { margin-bottom: 0; }

/* Mission band */
.wf-about-mission {
  position: relative;
  background-image: var(--wf-s-mission, none);
  background-color: #2E2E2E;
  background-size: cover;
  background-position: center;
  color: white;
  padding: 5rem 2rem;
  text-align: center;
}
.wf-about-mission::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.65) 100%);
  z-index: 0;
}
.wf-about-mission > * {
  position: relative;
  z-index: 1;
}
.wf-about-mission-label {
  font-size: 0.7rem;
  font-family: var(--wp--preset--font-family--mono, monospace);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #0FA3B1;
  margin: 0 0 1.5rem;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.wf-about-mission-quote {
  font-family: var(--wp--preset--font-family--heading, inherit);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  line-height: 1.3;
  max-width: 800px;
  margin: 0 auto 1.5rem;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 10px rgba(0,0,0,0.45);
}
.wf-about-mission-sub {
  color: rgba(255,255,255,0.8);
  font-size: 0.9375rem;
  line-height: 1.65;
  max-width: 640px;
  margin: 0 auto;
  text-align: left;
  text-shadow: 0 1px 4px rgba(0,0,0,0.35);
}
.wf-about-mission-sub + .wf-about-mission-sub {
  margin-top: 1rem;
}

/* Who we serve */
.wf-about-serve {
  max-width: 1024px;
  margin: 0 auto;
  padding: 4rem 1.5rem;
}
.wf-about-serve-intro {
  color: #6B7280;
  font-size: 0.9375rem;
  line-height: 1.65;
  max-width: 560px;
  margin: 0.5rem 0 2.5rem;
}
.wf-about-serve-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 640px) {
  .wf-about-serve-grid { grid-template-columns: repeat(3, 1fr); }
}
.wf-about-serve-card {
  border: 1.5px solid #E5E7EB;
  border-radius: 16px;
  padding: 1.5rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.wf-about-serve-card:hover {
  border-color: #0FA3B1;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.wf-about-serve-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(15,163,177,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}
.wf-about-serve-icon svg { display: block; }
.wf-about-serve-card h3 {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #111827;
  margin: 0 0 0.5rem;
}
.wf-about-serve-card p {
  font-size: 0.875rem;
  color: #4B5563;
  line-height: 1.65;
  margin: 0;
}

/* Values section */
.wf-about-values {
  background: #F9FAFB;
  padding: 4rem 1.5rem;
}
.wf-about-values-inner {
  max-width: 1024px;
  margin: 0 auto;
}
.wf-about-values-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-top: 2.5rem;
}
@media (min-width: 640px) {
  .wf-about-values-grid { grid-template-columns: repeat(2, 1fr); }
}
.wf-about-value-item {
  display: flex;
  gap: 1rem;
}
.wf-about-value-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #0FA3B1;
  flex-shrink: 0;
  margin-top: 6px;
}
.wf-about-value-item h3 {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #111827;
  margin: 0 0 0.25rem;
}
.wf-about-value-item p {
  font-size: 0.875rem;
  color: #4B5563;
  line-height: 1.65;
  margin: 0;
}

/* Contact card */
.wf-about-contact {
  max-width: 1024px;
  margin: 0 auto;
  padding: 4rem 1.5rem;
}
.wf-about-contact-card {
  border: 1.5px solid #E5E7EB;
  border-radius: 16px;
  padding: 2.5rem 1.5rem;
  text-align: center;
}
.wf-about-contact-card h2 {
  font-family: var(--wp--preset--font-family--heading, inherit);
  font-size: 1.25rem;
  font-weight: 700;
  color: #111827;
  margin: 0 0 0.75rem;
  letter-spacing: -0.02em;
}
.wf-about-contact-card p {
  color: #6B7280;
  font-size: 0.9375rem;
  margin: 0 auto 2rem;
  max-width: 400px;
  line-height: 1.65;
}
.wf-about-contact-btns {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: center;
  justify-content: center;
}
@media (min-width: 480px) {
  .wf-about-contact-btns { flex-direction: row; }
}
.wf-about-btn-teal {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #0FA3B1;
  color: white !important;
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.75rem 1.5rem;
  border-radius: 10px;
  text-decoration: none !important;
  transition: background 0.2s;
}
.wf-about-btn-teal:hover { background: #0c8a96; }
.wf-about-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: white;
  color: #374151 !important;
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.75rem 1.5rem;
  border-radius: 10px;
  border: 1.5px solid #E5E7EB;
  text-decoration: none !important;
  transition: border-color 0.2s, color 0.2s;
}
.wf-about-btn-outline:hover {
  border-color: #0FA3B1;
  color: #0FA3B1 !important;
}

/* ─────────────────────────────────────────────────────────
   CONTACT PAGE
   ───────────────────────────────────────────────────────── */

.wf-contact-wrap {
  max-width: 680px;
  margin: 0 auto;
  padding: 4rem 1.5rem 5rem;
}
.wf-contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.wf-contact-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
@media (max-width: 540px) {
  .wf-contact-row { grid-template-columns: 1fr; }
}
.wf-contact-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.wf-contact-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #374151;
  letter-spacing: 0.01em;
}
.wf-contact-input {
  width: 100%;
  padding: 0.65rem 0.875rem;
  border: 1.5px solid #E5E7EB;
  border-radius: 10px;
  font-size: 0.9375rem;
  color: #111827;
  background: white;
  box-sizing: border-box;
  transition: border-color 0.15s;
  font-family: inherit;
}
.wf-contact-input:focus {
  outline: none;
  border-color: #0FA3B1;
  box-shadow: 0 0 0 3px rgba(15,163,177,0.12);
}
.wf-contact-textarea {
  resize: vertical;
  min-height: 140px;
}
.wf-contact-status {
  padding: 0.75rem 1rem;
  border-radius: 10px;
  font-size: 0.875rem;
  font-weight: 500;
}
.wf-contact-status--ok {
  background: #ECFDF5;
  color: #065F46;
  border: 1px solid #A7F3D0;
}
.wf-contact-status--err {
  background: #FEF2F2;
  color: #991B1B;
  border: 1px solid #FECACA;
}
.wf-contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  align-self: flex-start;
  background: #0FA3B1;
  color: white;
  font-weight: 600;
  font-size: 0.9375rem;
  padding: 0.75rem 1.75rem;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
  font-family: inherit;
}
.wf-contact-btn:hover:not(:disabled) { background: #0c8a96; }
.wf-contact-btn:disabled { opacity: 0.65; cursor: default; }
.wf-contact-alt {
  margin-top: 2rem;
  font-size: 0.875rem;
  color: #6B7280;
  text-align: center;
}
.wf-contact-alt a {
  color: #0FA3B1;
  text-decoration: none;
}
.wf-contact-alt a:hover { text-decoration: underline; }

/* ─────────────────────────────────────────────────────────
   JOIN / PRE-LAUNCH WAITLIST PAGE
   ───────────────────────────────────────────────────────── */

.wf-join-wrap {
  display: flex;
  flex-direction: column;
}
.wf-join-hero {
  background: linear-gradient(135deg, #0FA3B1 0%, #0c8a96 100%);
  color: white;
  text-align: center;
  padding: 5rem 1.5rem 4.5rem;
}
.wf-join-label {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.8;
  margin: 0 0 1rem;
}
.wf-join-title {
  font-family: var(--wp--preset--font-family--heading, inherit);
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin: 0 0 1.25rem;
  color: white;
  text-shadow: 0 2px 12px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.3);
}
.wf-join-sub {
  font-size: 1.0625rem;
  line-height: 1.65;
  opacity: 0.9;
  max-width: 540px;
  margin: 0 auto;
}
.wf-join-form-wrap {
  max-width: 580px;
  margin: 0 auto;
  padding: 3.5rem 1.5rem 5rem;
  width: 100%;
}
.wf-join-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.wf-join-fields {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 0.75rem;
}
@media (max-width: 480px) {
  .wf-join-fields { grid-template-columns: 1fr; }
}
.wf-join-input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1.5px solid #E5E7EB;
  border-radius: 10px;
  font-size: 0.9375rem;
  color: #111827;
  background: white;
  box-sizing: border-box;
  transition: border-color 0.15s;
  font-family: inherit;
}
.wf-join-input:focus {
  outline: none;
  border-color: #0FA3B1;
  box-shadow: 0 0 0 3px rgba(15,163,177,0.12);
}
.wf-join-role {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
}
.wf-join-role-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #6B7280;
  white-space: nowrap;
}
.wf-join-role-option {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  color: #374151;
  cursor: pointer;
}
.wf-join-role-option input[type=radio] {
  accent-color: #0FA3B1;
  width: 15px;
  height: 15px;
}
.wf-join-status {
  padding: 0.75rem 1rem;
  border-radius: 10px;
  font-size: 0.875rem;
  font-weight: 500;
}
.wf-join-status--ok {
  background: #ECFDF5;
  color: #065F46;
  border: 1px solid #A7F3D0;
}
.wf-join-status--err {
  background: #FEF2F2;
  color: #991B1B;
  border: 1px solid #FECACA;
}
.wf-join-btn {
  width: 100%;
  padding: 0.875rem 1.5rem;
  background: #0FA3B1;
  color: white;
  font-weight: 700;
  font-size: 1rem;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.2s;
  font-family: inherit;
  letter-spacing: -0.01em;
}
.wf-join-btn:hover:not(:disabled) { background: #0c8a96; }
.wf-join-btn:disabled { opacity: 0.65; cursor: default; }
.wf-join-footnote {
  margin-top: 1rem;
  font-size: 0.8125rem;
  color: #9CA3AF;
  text-align: center;
}

/* ─────────────────────────────────────────────────
   LEGAL PAGES — Terms, Privacy, Cookies, AUP, Refunds
───────────────────────────────────────────────── */
.wf-legal-hero {
  position: relative;
  background-image: var(--wf-hero-bg, none);
  background-color: #0a7080;
  background-size: cover;
  background-position: center;
  min-height: 29vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  text-align: center;
}
.wf-legal-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.6) 100%);
  z-index: 0;
}
.wf-legal-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
}
.wf-legal-hero__label {
  font-family: var(--wp--preset--font-family--mono, monospace);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  margin: 0 0 0.75rem;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.wf-legal-hero__title {
  color: #fff;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  margin: 0 0 0.75rem;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-shadow: 0 2px 12px rgba(0,0,0,0.5), 0 1px 3px rgba(0,0,0,0.35);
}
.wf-legal-hero__eff {
  color: rgba(255,255,255,0.75);
  font-size: 0.875rem;
  margin: 0;
  text-shadow: 0 1px 4px rgba(0,0,0,0.35);
}
.wf-legal-content {
  padding: 4rem 1.5rem 5rem;
  background: #fff;
}
.wf-legal-content__inner {
  max-width: 720px;
  margin: 0 auto;
}
.wf-legal-content p {
  color: #374151;
  line-height: 1.75;
  margin: 0 0 1rem;
  font-size: 0.9375rem;
}
.wf-legal-content h2 {
  font-size: 1.3125rem;
  font-weight: 700;
  margin: 2.75rem 0 0.75rem;
  color: #111827;
  letter-spacing: -0.01em;
}
.wf-legal-content h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  margin: 1.75rem 0 0.5rem;
  color: #374151;
}
.wf-legal-content ul,
.wf-legal-content ol {
  color: #374151;
  line-height: 1.7;
  margin: 0 0 1rem;
  padding-left: 1.5rem;
  font-size: 0.9375rem;
}
.wf-legal-content li { margin-bottom: 0.4rem; }
.wf-legal-content a { color: #0a7080; text-decoration: underline; }
.wf-legal-content a:hover { color: #088090; }
.wf-legal-content strong { font-weight: 600; color: #111827; }
.wf-legal-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.9rem;
}
.wf-legal-content th {
  background: #f9fafb;
  font-weight: 600;
  color: #374151;
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 2px solid #e5e7eb;
}
.wf-legal-content td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #e5e7eb;
  color: #374151;
  vertical-align: top;
}
.wf-legal-content code {
  font-family: var(--wp--preset--font-family--mono, monospace);
  background: #f3f4f6;
  padding: 0.15em 0.4em;
  border-radius: 4px;
  font-size: 0.875em;
  color: #0a7080;
}
@media (max-width: 640px) {
  .wf-legal-hero { padding: 3.5rem 1.25rem 2.5rem; }
  .wf-legal-content { padding: 2.5rem 1.25rem 3.5rem; }
  .wf-legal-content table { font-size: 0.8125rem; }
  .wf-legal-content th, .wf-legal-content td { padding: 0.5rem 0.625rem; }
}

/* ─────────────────────────────────────────────────
   NEW HOMEPAGE SECTIONS — 2026-07 rewrite
───────────────────────────────────────────────── */

/* Eyebrow / intro text variants */
.wf-section__eyebrow {
  font-family: var(--wp--preset--font-family--mono, 'JetBrains Mono', monospace);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6B7280;
  margin: 0 0 0.75rem !important;
}

.wf-section__intro {
  color: #6B7280;
  font-size: 1rem;
  line-height: 1.65;
  margin: 0 auto 2.5rem !important;
  max-width: 600px;
}

/* Three-column feature columns (homepage "Three things" section) */
.wf-feature-cols {
  gap: 2rem !important;
  align-items: start !important;
}

.wf-feature-col {
  text-align: left;
  padding: 1.75rem;
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

.wf-feature-col__title {
  font-size: 1.0625rem !important;
  font-weight: 700 !important;
  color: #111827 !important;
  margin: 0 0 0.875rem !important;
  line-height: 1.3 !important;
  text-align: left !important;
  width: auto !important;
  display: block !important;
}

.wf-feature-col p {
  color: #6B7280;
  font-size: 0.9375rem;
  line-height: 1.7;
  margin: 0 !important;
  text-align: left !important;
}

@media (max-width: 640px) {
  .wf-feature-col { padding: 1.25rem; }
}

/* "What Wayfield doesn't do" columns */
.wf-doesnt-cols {
  gap: 1.5rem !important;
  align-items: start !important;
  margin-top: 2rem !important;
}

.wf-doesnt-col {
  text-align: left;
  padding: 1.5rem 1.5rem 1.25rem;
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  border-left: 3px solid #E5E7EB;
}

.wf-doesnt-col__title {
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
  color: #374151 !important;
  margin: 0 0 0.625rem !important;
  line-height: 1.4 !important;
  text-align: left !important;
  width: auto !important;
  display: block !important;
}

.wf-doesnt-col p {
  color: #6B7280;
  font-size: 0.875rem;
  line-height: 1.7;
  margin: 0 !important;
  text-align: left !important;
}

.wf-doesnt__closing {
  font-size: 1rem;
  color: #374151;
  margin: 2.5rem 0 0 !important;
}

/* "Who this is for" section */
.wf-who__subheading {
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #9CA3AF !important;
  margin: 2rem 0 0.75rem !important;
  text-align: left !important;
  width: auto !important;
  display: block !important;
}

.wf-who__list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 0.5rem !important;
  text-align: left !important;
}

.wf-who__list li {
  font-size: 0.9375rem;
  color: #374151;
  line-height: 1.6;
  padding: 0.5rem 0 0.5rem 1.5rem;
  border-bottom: 1px solid #F3F4F6;
  position: relative;
}

.wf-who__list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #0FA3B1;
  font-weight: 700;
  font-size: 0.875rem;
}

.wf-who__list--not li::before {
  content: '✕';
  color: #9CA3AF;
}

.wf-who__list--not li {
  color: #9CA3AF;
}

/* "Built by organizer" founder signature */
.wf-built-by__signature {
  color: #6B7280 !important;
  font-size: 0.9375rem !important;
  margin: 1.5rem 0 0 !important;
  border-top: 1px solid #E5E7EB;
  padding-top: 1.5rem !important;
}

/* Coming-soon feature card badge (features page) */
.wf-feature-card--soon {
  opacity: 0.65;
  cursor: default;
}

.wf-feature-card__badge {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: #F3F4F6;
  color: #9CA3AF;
  padding: 0.2rem 0.6rem;
  border-radius: 99px;
  white-space: nowrap;
  margin-bottom: 0.75rem;
}

/* ─── Site-wide color accents ─────────────────────────────────── */

/* Section labels / eyebrows in teal throughout */
.wf-section__label,
.wf-section__eyebrow {
  color: #0FA3B1 !important;
}

/* Left-aligned eyebrow for long-form prose content (guides) — same visual
   identity as .wf-section__label, but without its centering/auto-margin,
   since it sits inline above a left-aligned h2 rather than a centered hero.
   !important matches the .wf-section__label convention above — needed here
   because .wf-legal-content p (0-1-1) otherwise outranks a single class
   (0-1-0) and silently overrides color/font-size on these same <p> tags. */
.wf-legal-content__eyebrow {
  display: block !important;
  font-family: var(--wp--preset--font-family--mono, 'JetBrains Mono', monospace) !important;
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #0FA3B1 !important;
  margin: 0 0 0.5rem !important;
}

/* Teal top border on featured plan card */
.wf-plan-card--featured {
  border-top: 3px solid #0FA3B1 !important;
}

/* Plan card badge — teal tint */
.wf-plan-card__badge {
  background: rgba(15,163,177,0.10) !important;
  color: #0D8A96 !important;
  border: 1px solid rgba(15,163,177,0.20) !important;
}

/* FAQ: teal heading when open */
.wf-faq__item[open] > summary {
  color: #0FA3B1;
}

.wf-faq__item summary {
  font-weight: 600;
  cursor: pointer;
  padding: 1rem 0;
  border-bottom: 1px solid #F3F4F6;
  list-style: none;
  transition: color 0.15s ease;
}

.wf-faq__item summary::-webkit-details-marker { display: none; }

.wf-faq__item summary::after {
  content: '+';
  float: right;
  font-size: 1.25rem;
  font-weight: 300;
  color: #9CA3AF;
  line-height: 1;
}

.wf-faq__item[open] summary::after {
  content: '−';
  color: #0FA3B1;
}

.wf-faq__item p {
  padding: 1rem 0;
  font-size: 0.9375rem;
  color: #6B7280;
  line-height: 1.75;
  border-bottom: 1px solid #F3F4F6;
  margin: 0 !important;
}

/* Feature col teal heading color */
.wf-feature-col__title {
  color: #0D4F56 !important;
}

/* ─── Pricing toggle ─────────────────────────────────────────── */
.wf-pricing-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin: 1.5rem auto 0;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 99px;
  padding: 5px;
  gap: 3px;
}

.wf-pricing-toggle__btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 22px;
  border-radius: 99px;
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.65);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
  white-space: nowrap;
  line-height: 1;
  font-family: inherit;
}

.wf-pricing-toggle__btn--active {
  background: #0FA3B1;
  color: #ffffff;
  box-shadow: 0 2px 10px rgba(15,163,177,0.40);
}

.wf-pricing-toggle__btn:hover:not(.wf-pricing-toggle__btn--active) {
  color: rgba(255,255,255,0.95);
  background: rgba(255,255,255,0.09);
}

.wf-pricing-toggle__badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: #E67E22;
  color: #ffffff;
  padding: 3px 8px;
  border-radius: 99px;
  white-space: nowrap;
  vertical-align: middle;
  line-height: 1;
}

/* ─── Pricing example table ──────────────────────────────────── */
.wf-pricing-example-table-wrap {
  overflow-x: auto;
  border-radius: 14px;
  border: 1px solid #E5E7EB;
  margin: 1.75rem 0 1rem;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}

.wf-pricing-example-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 440px;
  background: #ffffff;
}

.wf-pricing-example-table th,
.wf-pricing-example-table td {
  padding: 13px 18px;
  text-align: center;
  border-bottom: 1px solid #F3F4F6;
  font-size: 0.9375rem;
  color: #374151;
}

.wf-pricing-example-table thead th {
  font-weight: 700;
  font-size: 0.875rem;
  color: #111827;
  background: #F9FAFB;
  border-bottom: 2px solid #E5E7EB;
}

.wf-pricing-example-table th:first-child,
.wf-pricing-example-table td:first-child {
  text-align: left;
  color: #4B5563;
}

.wf-pricing-example-table tbody tr:nth-child(even) {
  background: #FAFAFA;
}

.wf-pricing-example-table__highlight {
  background: rgba(15,163,177,0.08) !important;
}

.wf-pricing-example-table__highlight td {
  color: #0FA3B1 !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  border-bottom: none !important;
}

.wf-pricing-example-table__highlight td:first-child {
  color: #0D4F56 !important;
}

.wf-pricing-example-table__caption {
  font-size: 0.8125rem;
  color: #9CA3AF;
  text-align: center;
  margin: 0.875rem 0 0;
  line-height: 1.6;
}

.wf-pricing-example-table__caption a {
  color: #0FA3B1;
  text-decoration: none;
}

.wf-pricing-example-table__caption a:hover {
  text-decoration: underline;
}

/* ─── Hero standardization ───────────────────────────────────── */

/* Inner-page heroes: compact page-header treatment */
.wf-features-page-hero,
.wf-photo-hero {
  min-height: max(220px, 24vh) !important;
  padding: 2.5rem 2rem 2.75rem !important;
}

/* Home hero stays taller — primary entry point */
.wf-hero-section {
  min-height: max(320px, 36vh) !important;
}

/* Standardize inner page hero heading sizes */
.wf-features-page-hero__title,
.wf-photo-hero__title {
  font-size: clamp(2rem, 4.5vw, 3rem) !important;
}

/* Add text-shadow to features-page-hero titles for legibility over images */
.wf-features-page-hero__title {
  text-shadow: 0 2px 12px rgba(0,0,0,0.50), 0 1px 3px rgba(0,0,0,0.35) !important;
}

/* Stronger, consistent gradient on features-page-hero */
.wf-features-page-hero::before {
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.30) 0%,
    rgba(0,0,0,0.68) 100%
  ) !important;
}

/* Eyebrow/label: keep WHITE inside dark hero backgrounds
   (overrides the site-wide teal rule) */
.wf-features-page-hero .wf-section__label,
.wf-features-page-hero .wf-section__eyebrow,
.wf-photo-hero .wf-section__label,
.wf-photo-hero .wf-section__eyebrow {
  color: rgba(255,255,255,0.80) !important;
  border-color: rgba(255,255,255,0.30) !important;
  background: rgba(255,255,255,0.12) !important;
}

/* WP buttons inside dark hero areas — solid white primary */
.wf-features-page-hero .wp-block-button:not(.is-style-outline) .wp-block-button__link,
.wf-photo-hero .wp-block-button:not(.is-style-outline) .wp-block-button__link {
  background: #FFFFFF !important;
  color: #0a7080 !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  padding: 0.875rem 2rem !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.22) !important;
  font-size: 1rem !important;
  transition: box-shadow 0.2s, transform 0.2s !important;
}

.wf-features-page-hero .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
.wf-photo-hero .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.28) !important;
  transform: translateY(-1px);
}

/* Outline secondary buttons in dark hero areas — same frosted-glass
   treatment as the eyebrow pill (.wf-photo-hero__label): translucent
   white fill + backdrop blur, not just a transparent border. */
.wf-features-page-hero .wp-block-button.is-style-outline .wp-block-button__link,
.wf-photo-hero .wp-block-button.is-style-outline .wp-block-button__link {
  color: rgba(255,255,255,0.92) !important;
  border-color: rgba(255,255,255,0.5) !important;
  border-width: 1.5px !important;
  border-radius: 10px !important;
  padding: 0.875rem 1.75rem !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  background: rgba(255,255,255,0.12) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  transition: background 0.2s, border-color 0.2s !important;
}

.wf-features-page-hero .wp-block-button.is-style-outline .wp-block-button__link:hover,
.wf-photo-hero .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: rgba(255,255,255,0.22) !important;
  border-color: rgba(255,255,255,0.85) !important;
}

/* Mobile: reduce height floor */
@media (max-width: 640px) {
  .wf-features-page-hero,
  .wf-photo-hero {
    min-height: max(170px, 20vh) !important;
    padding: 2rem 1.25rem 2.5rem !important;
  }
  .wf-hero-section {
    min-height: max(260px, 30vh) !important;
  }
}

/* ─── Pricing toggle (light bg context) ──────────────────────── */
.wf-pricing-toggle-wrap {
  text-align: center;
  padding: 0 0 2.75rem;
}

.wf-pricing-toggle--light {
  background: rgba(0,0,0,0.05) !important;
  border: 1px solid rgba(0,0,0,0.10) !important;
}

.wf-pricing-toggle--light .wf-pricing-toggle__btn {
  color: #4B5563 !important;
}

.wf-pricing-toggle--light .wf-pricing-toggle__btn:hover:not(.wf-pricing-toggle__btn--active) {
  background: rgba(0,0,0,0.06) !important;
  color: #111827 !important;
}

/* ─── Plan card improvements ─────────────────────────────────── */

/* Equal-height columns in pricing grid */
.wf-pricing__plans {
  align-items: stretch !important;
}

/* No-badge cards get spacer so plan names align with badged cards */
.wf-plan-card--no-badge .wf-plan-card__name {
  margin-top: 2.25rem !important;
}

/* Feature list: remove bullets, add teal checkmarks and row contrast */
.wf-plan-card__features {
  list-style: none !important;
  padding: 0 !important;
  margin: 1rem 0 1.25rem !important;
}

.wf-plan-card__features li {
  font-size: 0.875rem !important;
  color: #374151 !important;
  line-height: 1.5 !important;
  padding: 0.45rem 0.5rem 0.45rem 1.625rem !important;
  border-bottom: 1px solid #F3F4F6 !important;
  position: relative;
}

.wf-plan-card__features li::before {
  content: '✓';
  position: absolute;
  left: 0.375rem;
  color: #0FA3B1;
  font-weight: 700;
  font-size: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
}

.wf-plan-card__features li:nth-child(even) {
  background: rgba(15,163,177,0.03);
}

.wf-plan-card__features li:last-child {
  border-bottom: none !important;
}

/* ─── Plan card redesign — left-aligned layout matching Next.js reference ─── */

/* Left-align all card content */
.wf-plan-card {
  text-align: left !important;
}

.wf-plan-card .wp-block-heading,
.wf-plan-card p,
.wf-plan-card .wp-block-buttons,
.wp-block-column.wf-plan-card h3,
.wp-block-column.wf-plan-card h3.wp-block-heading {
  text-align: left !important;
}

/* Plan name */
.wf-plan-card__name,
.wp-block-column.wf-plan-card h3.wf-plan-card__name {
  font-size: 1.625rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: #111827 !important;
  margin-bottom: 0.2rem !important;
  margin-top: 0 !important;
  text-align: left !important;
}

/* Tagline sits just below name, before price */
.wf-plan-card__tagline {
  font-size: 0.875rem !important;
  color: #6B7280 !important;
  margin-bottom: 1rem !important;
  line-height: 1.5 !important;
}

/* Large price display */
.wf-plan-card__price {
  margin-bottom: 0.25rem !important;
}

.wf-plan-card__price-amount {
  display: block;
  font-size: 2.75rem !important;
  font-weight: 800 !important;
  color: #111827 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.1 !important;
}

.wf-plan-card__price-unit {
  font-size: 1.125rem !important;
  font-weight: 500 !important;
  color: #6B7280 !important;
  letter-spacing: 0 !important;
}

.wf-plan-card__price-period {
  display: block;
  font-size: 0.8rem !important;
  color: #9CA3AF !important;
  margin-bottom: 0.25rem !important;
  font-weight: 400 !important;
}

/* Section labels — "Best For" / "What's Included" */
.wf-plan-card__section-label {
  display: block !important;
  font-size: 0.625rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #9CA3AF !important;
  margin: 1.1rem 0 0.5rem !important;
  padding: 0 !important;
  font-family: 'JetBrains Mono', 'Courier New', monospace !important;
}

/* Best-for description — italic */
.wf-plan-card__best-for-text {
  font-size: 0.875rem !important;
  color: #6B7280 !important;
  font-style: italic !important;
  line-height: 1.55 !important;
  margin: 0 0 0.25rem !important;
}

/* No-badge spacer — equalise top padding since badge is absent */
.wf-plan-card--no-badge .wf-plan-card__name {
  margin-top: 2rem !important;
}

/* ─── Enterprise dark card ─── */
.wf-plan-card--dark {
  background: #1C1C2E !important;
  border-color: transparent !important;
}

.wf-plan-card--dark .wf-plan-card__name,
.wf-plan-card--dark .wp-block-heading {
  color: #ffffff !important;
}

.wf-plan-card--dark .wf-plan-card__price-amount {
  color: #ffffff !important;
}

.wf-plan-card--dark .wf-plan-card__tagline,
.wf-plan-card--dark .wf-plan-card__price-period,
.wf-plan-card--dark .wf-plan-card__section-label,
.wf-plan-card--dark .wf-plan-card__best-for-text,
.wf-plan-card--dark p:not(.wf-plan-card__name):not(.wf-plan-card__section-label) {
  color: rgba(255,255,255,0.55) !important;
}

.wf-plan-card--dark .wf-plan-card__features li {
  color: rgba(255,255,255,0.82) !important;
  border-bottom-color: rgba(255,255,255,0.07) !important;
}

.wf-plan-card--dark .wf-plan-card__features li:nth-child(even) {
  background: rgba(255,255,255,0.04) !important;
}

.wf-plan-card--dark .wf-plan-card__features li::before {
  color: #0FA3B1 !important;
}

/* ─── Foundation: orange outline CTA ─── */
.wf-plan-card__btn--orange-outline .wp-block-button__link {
  background: transparent !important;
  color: #E67E22 !important;
  border: 2px solid #E67E22 !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  transition: background 0.15s !important;
}

.wf-plan-card__btn--orange-outline .wp-block-button__link:hover {
  background: rgba(230,126,34,0.07) !important;
}

/* ─── Enterprise: solid white CTA ─── */
.wf-plan-card__btn--white-solid .wp-block-button__link {
  background: #ffffff !important;
  color: #1C1C2E !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  transition: opacity 0.15s !important;
}

.wf-plan-card__btn--white-solid .wp-block-button__link:hover {
  opacity: 0.88 !important;
}

/* ─── CTA section — teal gradient background ─── */
.wf-section--cta {
  background: linear-gradient(135deg, #0FA3B1 0%, #0A7080 100%) !important;
}

.wf-section--cta .wf-section__heading {
  color: #ffffff !important;
}

.wf-section--cta p {
  color: rgba(255,255,255,0.85) !important;
}

.wf-section--cta .wp-block-button:not(.is-style-outline) .wp-block-button__link {
  background: #ffffff !important;
  color: #0A7080 !important;
  font-weight: 700 !important;
}

.wf-section--cta .is-style-outline .wp-block-button__link {
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.6) !important;
}

.wf-section--cta .is-style-outline .wp-block-button__link:hover {
  background: rgba(255,255,255,0.1) !important;
}

/* Solid-fill buttons inside any teal CTA section → white pill */
.wf-section--cta .wp-block-button__link.has-primary-background-color,
.wf-section--cta a.wp-block-button__link.has-background {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #0A7080 !important;
}

/* Secondary/outline buttons → white outline */
.wf-section--cta a.wp-block-button__link:not(.has-background) {
  color: rgba(255,255,255,0.92) !important;
  border-color: rgba(255,255,255,0.45) !important;
  border-width: 1.5px !important;
}

/* Links inside teal CTA sections */
.wf-section--cta a:not(.wp-block-button__link) {
  color: rgba(255,255,255,0.9) !important;
  text-decoration: underline;
}

.wf-section--cta .wf-section__heading {
  color: #ffffff !important;
}

.wf-section--cta .wf-section__sub,
.wf-section--cta p:not(.wf-section__heading) {
  color: rgba(255,255,255,0.82) !important;
}

/* ─── Front-page feature columns — teal section label and title accent ─── */
.wf-feature-col__title {
  color: #0D4F56 !important;
}

/* Section heading accent line for non-hero sections */
.wf-section--white .wf-section__heading,
.wf-section--gray .wf-section__heading {
  position: relative;
}

/* "Coming soon" feature card muted treatment */
.wf-feature-card--soon {
  border-top-color: #9CA3AF !important;
  opacity: 0.82;
}

.wf-feature-card--soon .wf-feature-card__title {
  color: #6B7280 !important;
}

/* ─── Pricing card: button alignment + centering + Enterprise heading fix ─── */

/* Equal-height columns so buttons align at the same vertical position */
.wf-pricing__plans {
  align-items: stretch !important;
}

/* Features list grows to fill available card space, pushing button to bottom */
.wf-plan-card__features {
  flex-grow: 1 !important;
}

/* Button block anchored to bottom */
.wf-plan-card .wp-block-buttons {
  margin-top: auto !important;
  padding-top: 1.25rem !important;
}

/* All plan card button links: full-width, centered text, consistent height */
.wf-plan-card .wp-block-button__link {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
  min-height: 48px !important;
  border-radius: 10px !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
}

/* Badge: uppercase monospace pill matching Next.js reference */
.wf-plan-card__badge {
  display: inline-flex !important;
  align-items: center !important;
  font-family: 'JetBrains Mono', 'Courier New', monospace !important;
  font-size: 0.6rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding: 4px 12px !important;
  border-radius: 99px !important;
  background: rgba(15,163,177,0.12) !important;
  color: #0FA3B1 !important;
  border: 1px solid rgba(15,163,177,0.22) !important;
  margin-bottom: 0.625rem !important;
}

/* Enterprise heading: white text — override the general name color rule */
.wp-block-column.wf-plan-card--dark h3.wf-plan-card__name,
.wp-block-column.wf-plan-card--dark .wp-block-heading {
  color: #ffffff !important;
  text-align: left !important;
}

/* Enterprise note text */
.wf-plan-card--dark .wf-plan-card__note {
  color: rgba(255,255,255,0.5) !important;
}

/* Annual billing note below plan grid */
.wf-pricing-annual-note {
  text-align: center !important;
  font-size: 0.8125rem !important;
  color: #9CA3AF !important;
  margin-top: 1.5rem !important;
  padding-top: 0.5rem !important;
}

/* ─────────────────────────────────────────────────────────
   FONT CONSISTENCY — Sora headings · Plus Jakarta Sans body
   ───────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6,
.wf-section__heading,
.wf-hero__headline,
.wf-photo-hero__title,
.wf-join-title,
.wf-plan-card__name,
.wf-feature-card__title,
.wf-feature-col__title,
.wf-participant-feature__title,
.wf-step__title,
.wf-who__subheading,
.wf-cta__heading,
.wf-footer__wordmark {
  font-family: 'Sora', sans-serif !important;
}

body,
p, li, a, label, input, select, textarea, button,
.wf-section__body,
.wf-section__sub,
.wf-feature-card__body,
.wf-feature-col p,
.wf-participant-feature__body,
.wf-plan-card__tagline,
.wf-plan-card__best-for-text,
.wf-cta__sub,
.wf-cta__trust,
.wf-hero__sub,
.wf-hero__trust,
.wf-photo-hero__sub,
.wf-footer__tagline,
.wf-footer__nav-list a,
.wf-about__prose,
.wf-section__label {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

/* ─────────────────────────────────────────────────────────
   HOME PAGE — "Three things done properly" cards
   Equal height + features-page card style
   ───────────────────────────────────────────────────────── */
.wf-feature-cols.wp-block-columns {
  align-items: stretch !important;
  gap: 1.25rem !important;
}
.wf-feature-col.wp-block-column {
  background: #ffffff !important;
  border-radius: 12px !important;
  border-top: 3px solid #0FA3B1 !important;
  padding: 1.75rem !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
}
.wf-feature-col__title {
  font-size: 1.0625rem !important;
  font-weight: 700 !important;
  color: #0D4F56 !important;
  margin-bottom: 0.75rem !important;
  text-align: left !important;
}
.wf-feature-col p {
  font-size: 0.9375rem !important;
  color: #4B5563 !important;
  line-height: 1.65 !important;
  text-align: left !important;
  flex-grow: 1 !important;
}

/* ─────────────────────────────────────────────────────────
   WHO THIS IS FOR — "Built for one specific person" section
   ───────────────────────────────────────────────────────── */
.wf-who__subheading {
  text-align: center !important;
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #0FA3B1 !important;
  margin: 2.5rem 0 1.25rem !important;
}
.wf-who__list.wp-block-list,
.wf-who__list {
  list-style: none !important;
  padding: 0 !important;
  max-width: 580px !important;
  margin: 0 auto !important;
}
.wf-who__list li {
  padding: 0.75rem 0 0.75rem 1.75rem !important;
  position: relative !important;
  text-align: left !important;
  border-bottom: 1px solid #f3f4f6 !important;
  color: #374151 !important;
  font-size: 0.9375rem !important;
  line-height: 1.6 !important;
}
.wf-who__list li:last-child {
  border-bottom: none !important;
}
.wf-who__list li::before {
  content: "→" !important;
  position: absolute !important;
  left: 0 !important;
  color: #0FA3B1 !important;
  font-weight: 700 !important;
}

/* ─────────────────────────────────────────────────────────
   PARTICIPANT FEATURE CARDS — match wf-feature-card
   ───────────────────────────────────────────────────────── */
.wf-participant-feature {
  background: #ffffff !important;
  border-radius: 12px !important;
  border-top: 3px solid #0FA3B1 !important;
  padding: 1.5rem !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
}
.wf-participant-feature__title {
  font-size: 1.0625rem !important;
  font-weight: 700 !important;
  color: #0D4F56 !important;
  margin-bottom: 0.5rem !important;
  line-height: 1.35 !important;
}
.wf-participant-feature__body {
  font-size: 0.9375rem !important;
  color: #4B5563 !important;
  line-height: 1.65 !important;
}

/* ─────────────────────────────────────────────────────────
   SECTION PADDING — replace inline style overrides
   ───────────────────────────────────────────────────────── */
.wf-section {
  padding: 4rem 1.5rem !important;
}
.wf-section--cta {
  padding: 4rem 1.5rem !important;
}

/* ─────────────────────────────────────────────────────────
   HERO CTA BUTTON CONSISTENCY — photo-hero pages
   ───────────────────────────────────────────────────────── */
.wf-photo-hero .wp-block-button__link,
.wf-photo-hero a.wp-block-button__link,
a.wp-block-button__link.wp-element-button {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.9375rem !important;
  border-radius: 8px !important;
  min-height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ─────────────────────────────────────────────────────────
   WHO-THIS-IS-FOR inline subheading (organizers page)
   ───────────────────────────────────────────────────────── */
p.wf-who__subheading {
  text-align: center !important;
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #0FA3B1 !important;
  font-family: 'JetBrains Mono', 'Courier New', monospace !important;
  margin: 2.5rem 0 1.25rem !important;
}

/* ─────────────────────────────────────────────────────────
   CTA SECTION — higher specificity force for gradient bg
   ───────────────────────────────────────────────────────── */
body .wp-block-group.wf-section--cta,
body div.wf-section--cta,
.wf-section--cta {
  background: linear-gradient(135deg, #0FA3B1 0%, #0A7080 100%) !important;
}
.wf-section--cta .wf-section__heading,
.wf-section--cta h2 {
  color: #ffffff !important;
}
.wf-section--cta p,
.wf-section--cta .wf-section__sub {
  color: rgba(255,255,255,0.88) !important;
}

/* ─────────────────────────────────────────────────────────
   COMING SOON — dark teal section, distinct from gray
   ───────────────────────────────────────────────────────── */
.wf-section--coming-soon {
  background: #0D4F56 !important;
}
.wf-section--coming-soon .wf-section__label {
  color: rgba(255,255,255,0.6) !important;
  border-color: rgba(255,255,255,0.25) !important;
  background: rgba(255,255,255,0.08) !important;
}
.wf-section--coming-soon .wf-section__heading,
.wf-section--coming-soon h2 {
  color: #ffffff !important;
}
.wf-section--coming-soon .wf-section__sub,
.wf-section--coming-soon p:not(.wf-feature-card__body):not(.wf-feature-card__badge) {
  color: rgba(255,255,255,0.75) !important;
}
.wf-section--coming-soon .wf-feature-card {
  background: rgba(255,255,255,0.07) !important;
  border-top-color: rgba(15,163,177,0.6) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-top: 3px solid rgba(15,163,177,0.7) !important;
}
.wf-section--coming-soon .wf-feature-card__title {
  color: #ffffff !important;
}
.wf-section--coming-soon .wf-feature-card__body {
  color: rgba(255,255,255,0.7) !important;
}
.wf-section--coming-soon .wf-feature-card__badge {
  background: rgba(255,255,255,0.12) !important;
  color: rgba(255,255,255,0.8) !important;
  border-color: rgba(255,255,255,0.2) !important;
}

/* ─────────────────────────────────────────────────────────
   TEAL-TINTED section label (wf-section__label) on light bg
   ───────────────────────────────────────────────────────── */
.wf-section--gray .wf-section__label {
  background: rgba(15,163,177,0.1) !important;
  color: #0FA3B1 !important;
  border-color: rgba(15,163,177,0.25) !important;
}

/* ─────────────────────────────────────────────────────────
   JOIN PAGE — photo hero + white card form layout
   ───────────────────────────────────────────────────────── */

/* Hero taller than audience pages — form is below, not inside */
.wf-photo-hero.wf-join-hero {
  min-height: 42vh !important;
  padding: 5rem 2rem 6rem !important;
}

/* White card containing the form */
.wf-join-card {
  max-width: 560px;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 4px 32px rgba(0,0,0,0.07), 0 1px 4px rgba(0,0,0,0.04);
  padding: 2.5rem;
}

/* Equal 2-column grid */
.wf-join-fields {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 1.25rem 1rem !important;
  margin-bottom: 1.5rem !important;
}
@media (max-width: 480px) {
  .wf-join-fields { grid-template-columns: 1fr !important; }
}

/* Field labels — darker, semibold */
.wf-join-field-label {
  display: block !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: #374151 !important;
  margin-bottom: 0.5rem !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

/* Inputs — stronger border for contrast on white card */
.wf-join-input {
  border: 1.5px solid #D1D5DB !important;
  min-height: 48px !important;
  border-radius: 10px !important;
  padding: 0.75rem 1rem !important;
  font-size: 0.9375rem !important;
  color: #111827 !important;
  background: #FAFAFA !important;
  width: 100% !important;
  box-sizing: border-box !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}
.wf-join-input:focus {
  outline: none !important;
  border-color: #0FA3B1 !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(15,163,177,0.12) !important;
}

/* Select — native elements need explicit height */
.wf-join-select {
  height: 48px !important;
  cursor: pointer !important;
  appearance: auto !important;
  -webkit-appearance: auto !important;
}

/* ─────────────────────────────────────────────────────────
   GLOBAL PROSE RULE — left-aligned, centered on the page.
   Applies to all body-copy paragraphs that are not
   explicitly centered (wf-section__sub, hero subs, CTA text).
   ───────────────────────────────────────────────────────── */

/* Section body copy — the "prose" paragraph class used across page templates */
.wf-section__body,
p.wf-section__body {
  text-align: left !important;
  color: #374151 !important;
  font-size: 1.0625rem !important;
  line-height: 1.8 !important;
  margin: 0 auto 1.25rem !important;
  max-width: 680px !important;
}

/* About page narrative prose */
.wf-about__prose {
  text-align: left !important;
  color: #374151 !important;
  font-size: 1.0625rem !important;
  line-height: 1.8 !important;
  margin: 0 auto 1.25rem !important;
  max-width: 680px !important;
}

/* Feature card body stays left inside its card (no auto centering — card provides context) */
.wf-feature-card__body,
.wf-participant-feature__body,
.wf-feature-col p,
.wf-step__body,
.wf-testimonial__quote {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: none !important;
}

/* Paragraph text reads left-aligned — the surrounding block stays
   centered on the page via margin auto, but the prose itself doesn't
   get ragged edges on both sides the way centered multi-line text does.
   (Headings and short pill labels are handled by separate rules and
   are unaffected by this.) */
p.has-text-align-center,
.wf-section__sub,
.wf-cta__sub,
.wf-photo-hero__sub,
.wf-join-footnote,
.wf-section--cta p {
  text-align: left !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 680px;
}

/* Short one-line trust statements ("No card required. No sales call.")
   stay centered under centered buttons — unlike multi-line prose above,
   a single short line reads as intentional when centered, not left
   hugging an edge for no visible reason.
   Specificity note: the markup carries both has-text-align-center AND
   wf-cta__trust/wf-hero__trust on the same <p> (e.g.
   <p class="has-text-align-center wf-hero__trust">). The broad
   left-align rule above targets p.has-text-align-center at (0,1,1)
   specificity — a bare .wf-hero__trust selector at (0,1,0) loses to
   it even with !important on both, regardless of source order. This
   selector matches both classes together to unambiguously outrank it. */
p.has-text-align-center.wf-cta__trust,
p.has-text-align-center.wf-hero__trust,
.wf-cta__trust,
.wf-hero__trust {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ─────────────────────────────────────────────────────────
   FEATURE ACCORDION — "All Features" sections on the
   organizer/leader/participant/security pages.
   New class (wf-feature-accordion__item), scoped entirely to
   itself — does NOT modify the existing /pricing FAQ accordion
   (wf-faq__item), which keeps its current appearance untouched.
   ───────────────────────────────────────────────────────── */
.wf-feature-accordion {
  max-width: 760px;
  margin: 2.5rem auto 0;
}

.wf-feature-accordion__item {
  border-bottom: 1px solid #E5E7EB;
}

.wf-feature-accordion__item summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 0.25rem;
  font-family: var(--wp--preset--font-family--heading, 'Sora', sans-serif);
  font-weight: 700;
  font-size: 1rem;
  color: #111827;
  cursor: pointer;
  list-style: none;
}

.wf-feature-accordion__item summary::-webkit-details-marker {
  display: none;
}

.wf-feature-accordion__item summary:hover {
  color: #0FA3B1;
}

.wf-feature-accordion__item summary::after {
  content: "+";
  margin-left: auto;
  font-size: 1.25rem;
  font-weight: 400;
  color: #0FA3B1;
  transition: transform 0.2s;
  flex-shrink: 0;
}

.wf-feature-accordion__item[open] summary::after {
  transform: rotate(45deg);
}

.wf-feature-accordion__item p {
  padding: 0 0.25rem 1.25rem;
  margin: 0;
  color: #6B7280;
  font-size: 0.9375rem;
  line-height: 1.7;
}

.wf-feature-accordion__item p a {
  color: #0FA3B1;
  font-weight: 600;
  text-decoration: none;
}

.wf-feature-accordion__item p a:hover {
  text-decoration: underline;
}

/* ─────────────────────────────────────────────────────────
   SCROLL-REVEAL — experimental fade/slide-in on scroll.
   Applied via .wf-scroll-fade (whole sections) and
   .wf-scroll-fade__item (staggered children, e.g. mockup phones).
   JS (js/scroll-reveal.js) adds .is-visible the first time an
   element crosses the viewport threshold.
   ───────────────────────────────────────────────────────── */
.wf-scroll-fade {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.wf-scroll-fade.is-visible {
  opacity: 1;
  transform: none;
}

.wf-scroll-fade__item {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.wf-scroll-fade.is-visible .wf-scroll-fade__item {
  opacity: 1;
  transform: none;
}
.wf-scroll-fade.is-visible .wf-scroll-fade__item:nth-child(1) { transition-delay: 0s; }
.wf-scroll-fade.is-visible .wf-scroll-fade__item:nth-child(2) { transition-delay: 0.15s; }
.wf-scroll-fade.is-visible .wf-scroll-fade__item:nth-child(3) { transition-delay: 0.3s; }
.wf-scroll-fade.is-visible .wf-scroll-fade__item:nth-child(4) { transition-delay: 0.45s; }

@media (prefers-reduced-motion: reduce) {
  .wf-scroll-fade,
  .wf-scroll-fade__item {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ─────────────────────────────────────────────────────────
   HOME PAGE — phone mockup scroll showcase
   ───────────────────────────────────────────────────────── */

.wf-mockup-section {
  position: relative;
}

/* Light/dark toggle for the mockup showcase. */
.wf-mockup-theme-toggle {
  display: flex;
  justify-content: center;
  gap: 0.25rem;
  width: fit-content;
  margin: 1.5rem auto 0;
  padding: 0.25rem;
  border-radius: 9999px;
  background: #F3F4F6;
  border: 1px solid #E5E7EB;
}
.wf-mockup-theme-toggle__btn {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #6B7280;
  background: transparent;
  border: none;
  border-radius: 9999px;
  padding: 0.375rem 1rem;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.wf-mockup-theme-toggle__btn:hover {
  color: #0D4F56;
}
.wf-mockup-theme-toggle__btn.is-active {
  background: #0FA3B1;
  color: #FFFFFF;
}

.wf-mockup-showcase {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1.5rem;
  max-width: 1100px;
  margin: 2.5rem auto 0;
  perspective: 1400px;
}
.wf-mockup-showcase .wf-scroll-fade__item {
  flex: 0 1 200px;
  max-width: 200px;
  /* 3D tilt-in — each phone rotates in from an angle and settles flat.
     Alternating rotation direction per phone for a bit of variety.
     Duration is longer than the base .wf-scroll-fade__item transition
     so the twist reads clearly before it settles flat, instead of being
     dominated by the vertical slide. */
  transform: translateY(40px) rotateX(12deg) rotateY(-22deg);
  transform-origin: center bottom;
  transition-duration: 0.9s;
}
.wf-mockup-showcase .wf-scroll-fade__item:nth-child(2) { transform: translateY(40px) rotateX(12deg) rotateY(18deg); }
.wf-mockup-showcase .wf-scroll-fade__item:nth-child(3) { transform: translateY(40px) rotateX(12deg) rotateY(-18deg); }
.wf-mockup-showcase .wf-scroll-fade__item:nth-child(4) { transform: translateY(40px) rotateX(12deg) rotateY(22deg); }
/* Items 5-6, used by pages with a longer workflow than the home page's 4-item set (e.g. Participants).
   Must stay above the .is-visible reset rule below — equal specificity means source order decides,
   and these need to lose that tie once revealed. */
.wf-mockup-showcase .wf-scroll-fade__item:nth-child(5) { transform: translateY(40px) rotateX(12deg) rotateY(-15deg); }
.wf-mockup-showcase .wf-scroll-fade__item:nth-child(6) { transform: translateY(40px) rotateX(12deg) rotateY(15deg); }
.wf-mockup-showcase.is-visible .wf-scroll-fade__item {
  transform: none;
}
.wf-mockup-showcase img {
  display: block;
  width: 100%;
  height: auto;
  /* Drop shadow starts fully transparent and settles in after each
     phone's slide/fade-in finishes, giving a "landing" 3D effect. */
  filter: drop-shadow(0 0 0 rgba(17, 24, 39, 0));
  transition: filter 0.5s ease;
}
.wf-mockup-showcase.is-visible img {
  filter: drop-shadow(0 22px 34px rgba(17, 24, 39, 0.35));
}
.wf-mockup-showcase.is-visible .wf-scroll-fade__item:nth-child(1) img { transition-delay: 0.9s; }
.wf-mockup-showcase.is-visible .wf-scroll-fade__item:nth-child(2) img { transition-delay: 1.05s; }
.wf-mockup-showcase.is-visible .wf-scroll-fade__item:nth-child(3) img { transition-delay: 1.2s; }
.wf-mockup-showcase.is-visible .wf-scroll-fade__item:nth-child(4) img { transition-delay: 1.35s; }
.wf-mockup-showcase.is-visible .wf-scroll-fade__item:nth-child(5) img { transition-delay: 1.5s; }
.wf-mockup-showcase.is-visible .wf-scroll-fade__item:nth-child(6) img { transition-delay: 1.65s; }

/* Videos (the looping session-picker clip) fade in the same way as images. */
.wf-mockup-showcase video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 700 / 1389;
  background: #E5E7EB;
  border-radius: 8px;
  filter: drop-shadow(0 0 0 rgba(17, 24, 39, 0));
  transition: filter 0.5s ease;
}
.wf-mockup-showcase.is-visible video {
  filter: drop-shadow(0 22px 34px rgba(17, 24, 39, 0.35));
}

@media (max-width: 900px) {
  .wf-mockup-showcase .wf-scroll-fade__item {
    flex: 0 1 150px;
    max-width: 150px;
  }
}
@media (max-width: 560px) {
  .wf-mockup-showcase {
    gap: 0.875rem;
  }
  .wf-mockup-showcase .wf-scroll-fade__item {
    flex: 0 1 calc(50% - 0.4375rem);
    max-width: calc(50% - 0.4375rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .wf-mockup-showcase .wf-scroll-fade__item {
    transform: none !important;
  }
  .wf-mockup-showcase img {
    filter: drop-shadow(0 22px 34px rgba(17, 24, 39, 0.35));
    transition: none;
  }
}

/* ─────────────────────────────────────────────────────────
   ORGANIZERS PAGE — laptop/browser mockup showcase
   Wider (~16:10) frames than the phone showcase above, so this lays out as
   a 2x2 grid rather than a single row at the same 1100px container width.
   A flat fade-up reads better than the phone's rotateX/Y tilt on a wide
   frame. Reuses .wf-mockup-theme-toggle and .wf-mockup-caption as-is.
   ───────────────────────────────────────────────────────── */
.wf-web-mockup-showcase {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2.5rem;
  max-width: 1100px;
  margin: 2.5rem auto 0;
}
.wf-web-mockup-showcase .wf-scroll-fade__item {
  flex: 0 1 480px;
  max-width: 480px;
  transform: translateY(30px);
}
.wf-web-mockup-showcase.is-visible .wf-scroll-fade__item {
  transform: none;
}
.wf-web-mockup-showcase img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  filter: drop-shadow(0 0 0 rgba(17, 24, 39, 0));
  transition: filter 0.5s ease;
}
.wf-web-mockup-showcase.is-visible img {
  filter: drop-shadow(0 18px 30px rgba(17, 24, 39, 0.25));
}
.wf-web-mockup-showcase.is-visible .wf-scroll-fade__item:nth-child(1) img { transition-delay: 0.6s; }
.wf-web-mockup-showcase.is-visible .wf-scroll-fade__item:nth-child(2) img { transition-delay: 0.75s; }
.wf-web-mockup-showcase.is-visible .wf-scroll-fade__item:nth-child(3) img { transition-delay: 0.9s; }
.wf-web-mockup-showcase.is-visible .wf-scroll-fade__item:nth-child(4) img { transition-delay: 1.05s; }

@media (max-width: 560px) {
  .wf-web-mockup-showcase {
    gap: 1.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wf-web-mockup-showcase .wf-scroll-fade__item {
    transform: none !important;
  }
  .wf-web-mockup-showcase img {
    filter: drop-shadow(0 18px 30px rgba(17, 24, 39, 0.25));
    transition: none;
  }
}

/* Web dashboard showcase — real admin screenshots, framed and captured at
   the same width but wildly different heights (a full dashboard scroll vs.
   a short payments-setup card). Forcing a uniform crop would cut off real
   content, so this is a hero (the dashboard, the flagship view) plus a
   supporting row of three detail cards, each left at its natural height
   instead of stretched or cropped to match. No CSS shadow/radius here —
   the source PNGs already have a shadow baked into their alpha channel
   from the mockup tool; adding another on top doubled up as visible
   padding between the image edge and a second shadow ring. */
.wf-web-showcase__hero {
  max-width: 820px;
  margin: 0 auto 3rem;
}
.wf-web-showcase__hero img {
  display: block;
  width: 100%;
  height: auto;
}
.wf-web-showcase__hero .wf-mockup-caption {
  max-width: 560px;
  margin: 1.75rem auto 0;
}
.wf-web-showcase__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  align-items: start;
}
.wf-web-showcase__item img {
  display: block;
  width: 100%;
  height: auto;
}
.wf-web-showcase__item .wf-mockup-caption {
  margin-top: 1.25rem;
}
/* These cards are much wider than the phone-mockup captions the shared
   min-height was tuned for, so the same value leaves a lot of dead space
   below shorter text — let these size to their own content instead. */
.wf-web-showcase .wf-mockup-caption {
  min-height: 0;
}
@media (max-width: 900px) {
  .wf-web-showcase__grid {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin: 0 auto;
    gap: 2.5rem;
  }
  .wf-web-showcase__hero {
    max-width: 480px;
  }
}

/* Glassmorphism caption card — frosted panel behind each label + description.
   Uses min-height (not a fixed height) — content can never overflow its own
   box under min-height, since browsers always grow to fit their own content.
   Rows may occasionally be a few px uneven when captions differ in length,
   which is a much smaller visual issue than text spilling past the card. */
.wf-mockup-caption {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 195px;
  margin-top: 1.25rem;
  padding: 0.875rem 1rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 12px 28px rgba(17, 24, 39, 0.12);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.wf-mockup-caption:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 38px rgba(17, 24, 39, 0.2);
}
/* Home page's 4 captions are shorter than the leader/participant pages that
   share this class — the shared height above is sized for their longer copy,
   which left ~75px of empty space per card here. Scope a smaller height to
   the home page specifically via body class rather than shrinking the shared
   default and breaking the other pages again. */
.home .wf-mockup-caption {
  min-height: 155px;
}
@media (prefers-reduced-motion: reduce) {
  .wf-mockup-caption:hover {
    transform: none;
  }
}
.wf-mockup-caption__label {
  font-family: 'Sora', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #0D4F56;
  text-align: center;
  margin: 0 0 0.375rem;
}
.wf-mockup-caption__desc {
  color: #6B7280;
  font-size: 0.8125rem;
  line-height: 1.55;
  text-align: center;
  margin: 0;
}
@media (max-width: 900px) {
  .wf-mockup-caption {
    min-height: 255px;
  }
  .home .wf-mockup-caption {
    min-height: 195px;
  }
}
@media (max-width: 560px) {
  .wf-mockup-caption {
    min-height: 184px;
    margin-top: 0.875rem;
    padding: 0.625rem 0.75rem;
  }
  .home .wf-mockup-caption {
    height: 140px;
  }
  .wf-mockup-caption__label {
    font-size: 0.875rem;
  }
  .wf-mockup-caption__desc {
    font-size: 0.75rem;
  }
}