/*
 * FoF Insider - source utility classes, reproduced verbatim from the
 * original Manus/Vite build (client/src/index.css -> assets/index-*.css).
 * oklch() values are written as their exact sRGB hex equivalents.
 * Applied to Elementor widgets via the "CSS Classes" advanced control.
 */

/* --- rules and accents ------------------------------------------------ */
.gold-rule {
  background: linear-gradient(90deg, transparent, #dda552, transparent);
  height: 1px;
}

.gold-accent-left {
  border-left: 3px solid #dda552;
  padding-left: 1rem;
}

.glass-card {
  background: #f4f5f6;
  border: 1px solid rgba(1, 14, 30, 0.08);
}

/* --- buttons ---------------------------------------------------------- */
.btn-gold {
  color: #010e1e;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: #dda552;
  font-family: Outfit, sans-serif;
  font-weight: 600;
  transition: all 0.3s;
}
.btn-gold:hover,
.btn-gold:focus {
  background: #c38c37;
  color: #010e1e;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(221, 165, 82, 0.3);
}

.btn-gold-outline {
  color: #010e1e;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid #010e1e;
  font-family: Outfit, sans-serif;
  font-weight: 500;
  transition: all 0.3s;
}
.btn-gold-outline:hover,
.btn-gold-outline:focus {
  background: rgba(1, 14, 30, 0.06);
  color: #010e1e;
}

.btn-gold-outline-light {
  color: #dda552;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid #dda552;
  font-family: Outfit, sans-serif;
  font-weight: 500;
  transition: all 0.3s;
}
.btn-gold-outline-light:hover,
.btn-gold-outline-light:focus {
  background: rgba(221, 165, 82, 0.1);
  color: #dda552;
}

/* --- section kicker label --------------------------------------------- */
.section-label {
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #b07a20;
  font-family: Outfit, sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
}

/* --- entrance animation ----------------------------------------------- */
@keyframes fofFadeUp {
  0%  { opacity: 0; transform: translateY(24px); }
  to  { opacity: 1; transform: translateY(0); }
}
/* Entrance animation is opt-in. It only applies once the document has been
 * flagged with .fof-js. Without that flag - no JavaScript, or inside the
 * Elementor editor - content renders in its final, visible state instead of
 * being stranded at opacity 0. */
.fof-js .animate-fade-up          { animation: 0.7s forwards fofFadeUp; }
.fof-js .animate-fade-up-delay-1  { opacity: 0; animation: 0.7s 0.15s forwards fofFadeUp; }
.fof-js .animate-fade-up-delay-2  { opacity: 0; animation: 0.7s 0.3s  forwards fofFadeUp; }
.fof-js .animate-fade-up-delay-3  { opacity: 0; animation: 0.7s 0.45s forwards fofFadeUp; }
.fof-js .animate-fade-up-delay-4  { opacity: 0; animation: 0.7s 0.6s  forwards fofFadeUp; }

@keyframes fofCountUp {
  0%  { opacity: 0; transform: translateY(10px); }
  to  { opacity: 1; transform: translateY(0); }
}

/* --- sticky header ----------------------------------------------------- */
.nav-scrolled {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background: rgba(255, 255, 255, 0.96) !important;
  border-bottom: 1px solid rgba(1, 14, 30, 0.08);
  box-shadow: 0 1px 12px rgba(1, 14, 30, 0.06);
}

/* --- panels and cards --------------------------------------------------- */
.pricing-glow {
  box-shadow: 0 0 60px rgba(221, 165, 82, 0.12), 0 20px 60px rgba(1, 14, 30, 0.12);
}

.tab-active {
  color: #b07a20;
  border-bottom: 2px solid #dda552;
}

.testimonial-card {
  background: #fff;
  border: 1px solid rgba(1, 14, 30, 0.08);
  transition: border-color 0.3s, transform 0.3s;
  box-shadow: 0 2px 12px rgba(1, 14, 30, 0.04);
}
.testimonial-card:hover {
  border-color: rgba(221, 165, 82, 0.5);
  transform: translateY(-4px);
}

/* --- scroll reveal ------------------------------------------------------ */
.fof-js .reveal {
  opacity: 0;
  transition: opacity 0.7s, transform 0.7s;
  transform: translateY(30px);
}
.fof-js .reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .fof-js .animate-fade-up,
  .fof-js .animate-fade-up-delay-1,
  .fof-js .animate-fade-up-delay-2,
  .fof-js .animate-fade-up-delay-3,
  .fof-js .animate-fade-up-delay-4 { animation: none; opacity: 1; }
  .fof-js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ======================================================================
 * Header shell and its scrolled state.
 * The source header is a fixed bar that is transparent over the hero and
 * swaps to a blurred white bar past 40px of scroll, recolouring the logo,
 * the nav links and the hamburger as it goes. All of that hangs off a
 * class toggled on an ancestor by script, so it cannot be expressed with
 * Elementor's per-widget controls.
 * ==================================================================== */
.fof-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: transparent;
  transition: background 0.5s, box-shadow 0.5s, border-color 0.5s, -webkit-backdrop-filter 0.5s, backdrop-filter 0.5s;
}

/* logo: source renders the light artwork over the hero and filters it to
   navy once the bar turns white (BrandLogo variant="dark") */
.fof-header .fof-logo img {
  transition: filter 0.5s;
}
.fof-header.nav-scrolled .fof-logo img {
  filter: invert(1) brightness(0.15) sepia(1) hue-rotate(190deg) saturate(3);
}

/* nav links */
.fof-header .fof-nav .elementor-item {
  color: #e1dddb;
  transition: color 0.2s;
}
.fof-header.nav-scrolled .fof-nav .elementor-item {
  color: #2f3c4a;
}
.fof-header .fof-nav .elementor-item:hover,
.fof-header .fof-nav .elementor-item:focus,
.fof-header.nav-scrolled .fof-nav .elementor-item:hover,
.fof-header.nav-scrolled .fof-nav .elementor-item:focus {
  color: #b07a20;
}

/* hamburger */
.fof-header .fof-nav .elementor-menu-toggle {
  color: #dda552;
  background: transparent;
}
.fof-header.nav-scrolled .fof-nav .elementor-menu-toggle {
  color: #010e1e;
}

/* mobile dropdown panel */
.fof-header .fof-nav .elementor-nav-menu--dropdown {
  background-color: #ffffff;
  border-top: 1px solid rgba(1, 14, 30, 0.1);
}
.fof-header .fof-nav .elementor-nav-menu--dropdown .elementor-item {
  color: #2f3c4a;
}

/* pages that do not open with the full-bleed hero need to clear the bar */
.fof-offset-header {
  padding-top: 80px;
}
@media (max-width: 1024px) {
  .fof-offset-header { padding-top: 64px; }
}

/* ======================================================================
 * Footer link hovers (source: hover:text-amber-300)
 * ==================================================================== */
.fof-footer a:hover,
.fof-footer a:focus {
  color: #ffd230 !important;
}

/* logo sizing: source uses h-10 in the header and h-11 in the footer */
.fof-logo img { height: 40px; width: auto; }
.fof-logo-footer img { height: 44px; width: auto; }

/* ======================================================================
 * Hero: photographic ground under a 3-stop navy gradient and a 60px gold
 * grid at 5%. Two stacked overlays and a 3-stop gradient are past what a
 * single Elementor background-overlay control can express, so they live
 * on the container's own pseudo-elements.
 * ==================================================================== */
.fof-hero {
  position: relative;
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
}
.fof-hero::before,
.fof-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.fof-hero::before {
  background: linear-gradient(105deg, rgba(0, 3, 15, 0.95) 0%, rgba(0, 6, 20, 0.85) 50%, rgba(0, 9, 25, 0.65) 100%);
  z-index: 1;
}
.fof-hero::after {
  opacity: 0.05;
  background-image:
    linear-gradient(rgba(221, 165, 82, 0.3) 1px, transparent 1px),
    linear-gradient(90deg, rgba(221, 165, 82, 0.3) 1px, transparent 1px);
  background-size: 60px 60px;
  z-index: 2;
}
.fof-hero > .e-con-inner,
.fof-hero > .elementor-element {
  position: relative;
  z-index: 3;
}

/* scroll cue pinned to the bottom of the hero */
.fof-scroll-cue {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  animation: fofBounce 1s infinite;
}
.fof-scroll-cue .fof-scroll-line {
  width: 1px;
  height: 40px;
  margin: 0 auto 8px;
  background: linear-gradient(to bottom, #dda552, transparent);
}
.fof-scroll-cue .fof-scroll-word {
  font-family: Outfit, sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: #879198;
  display: block;
  text-align: center;
}
@keyframes fofBounce {
  0%, 100% { transform: translateX(-50%) translateY(-25%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
  50%      { transform: translateX(-50%) translateY(0);    animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
}
@media (prefers-reduced-motion: reduce) {
  .fof-scroll-cue { animation: none; }
}

/* ======================================================================
 * Why Us cards: hover lift with a gold border and gold-tinted shadow.
 * Elementor exposes hover controls per widget, not per container, so the
 * card hover lives here.
 * ==================================================================== */
.fof-card {
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
  box-shadow: 0 2px 16px rgba(1, 14, 30, 0.05);
}
.fof-card:hover {
  border-color: rgba(221, 165, 82, 0.4) !important;
  box-shadow: 0 8px 32px rgba(221, 165, 82, 0.12);
  transform: translateY(-3px);
}

/* pull-quote inside a Why Us card */
.fof-card-quote {
  border-left: 2px solid #dda552;
  padding-left: 0.75rem;
}

/* ======================================================================
 * "How We Compare" table
 * ==================================================================== */
.fof-compare {
  border: 1px solid rgba(1, 14, 30, 0.1);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(1, 14, 30, 0.06);
}
.fof-compare table {
  width: 100%;
  border-collapse: collapse;
  font-family: Outfit, sans-serif;
}
.fof-compare thead tr { background: #010e1e; }
.fof-compare th {
  padding: 16px 24px;
  font-size: 0.875rem;
  font-weight: 500;
  color: #879198;
  text-align: left;
}
.fof-compare th:nth-child(1) { width: 50%; }
.fof-compare th:nth-child(2) {
  text-align: center;
  padding: 16px;
  font-weight: 600;
  color: #dda552;
}
.fof-compare th:nth-child(3) { text-align: center; padding: 16px; }
.fof-compare tbody tr {
  background: #ffffff;
  border-bottom: 1px solid rgba(1, 14, 30, 0.06);
}
.fof-compare tbody tr:nth-child(2n) { background: #f7f8fa; }
.fof-compare td {
  padding: 14px 24px;
  font-size: 0.875rem;
  color: #222f3c;
}
.fof-compare td:nth-child(2),
.fof-compare td:nth-child(3) { padding: 14px 16px; text-align: center; }
.fof-compare .fof-yes  { color: #278733; font-size: 1.1rem; }
.fof-compare .fof-no   { color: #e85854; font-size: 1.1rem; }
.fof-compare .fof-part { color: #879198; font-size: 0.9rem; }
@media (max-width: 767px) {
  .fof-compare { overflow-x: auto; }
  .fof-compare table { min-width: 520px; }
}

/* stat bar: hairline rules between the figures, from tablet up (source uses
   Tailwind's divide-x, which has no Elementor control equivalent) */
@media (min-width: 768px) {
  .fof-statbar > .e-con + .e-con {
    border-left: 1px solid rgba(255, 255, 255, 0.1);
  }
}

/* the caption sits over the bottom of the image panel */
.fof-image-panel { overflow: hidden; }

/* ======================================================================
 * Curriculum tabs. The tab strip is a state-driven treatment (active tab
 * takes gold text and a gold underline that sits on the strip's own
 * hairline), which Elementor's nested-tabs controls express only
 * partially, so it is written here in full.
 * ==================================================================== */
.fof-curriculum .e-n-tabs-heading {
  border-bottom: 1px solid rgba(1, 14, 30, 0.12);
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.fof-curriculum .e-n-tab-title {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 12px 16px;
  margin-bottom: -1px;
  font-family: Outfit, sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #495766;
  transition: color 0.2s, border-color 0.2s;
}
.fof-curriculum .e-n-tab-title[aria-selected="true"] {
  color: #b07a20;
  border-bottom-color: #dda552;
}
.fof-curriculum .e-n-tabs-content { padding-top: 32px; }

/* numbered topic list inside a module panel */
.fof-topics { list-style: none; margin: 0; padding: 0; }
.fof-topics li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}
.fof-topics li:last-child { margin-bottom: 0; }
.fof-topics .fof-topic-num {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin-top: 4px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(221, 165, 82, 0.15);
  color: #dda552;
  font-family: Outfit, sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
}
.fof-topics .fof-topic-text {
  font-family: Outfit, sans-serif;
  font-size: 0.875rem;
  color: #2f3c4a;
  line-height: 1.6;
}

/* module outcome callout */
.fof-outcome {
  background: rgba(221, 165, 82, 0.08);
  border: 1px solid rgba(221, 165, 82, 0.2);
  border-radius: 4px;
  padding: 16px;
}
.fof-outcome .fof-outcome-label {
  font-family: Outfit, sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #dda552;
  margin: 0 0 4px;
}
.fof-outcome .fof-outcome-text {
  font-family: Outfit, sans-serif;
  font-size: 0.875rem;
  line-height: 1.6;
  color: #2f3c4a;
  margin: 0;
}

/* prev / next under the module summary */
.fof-tab-nav { display: flex; gap: 12px; margin-top: 24px; }
.fof-tab-nav button {
  flex: 1;
  padding: 8px 0;
  border-radius: 4px;
  border: 1px solid rgba(1, 14, 30, 0.15);
  background: transparent;
  font-family: Outfit, sans-serif;
  font-size: 0.875rem;
  color: #2f3c4a;
  cursor: pointer;
  transition: all 0.2s;
}
.fof-tab-nav button[disabled] { color: #a6afb7; cursor: not-allowed; }
.fof-tab-nav button:not([disabled]):hover { background: rgba(1, 14, 30, 0.04); }

/* dot pagination */
.fof-tab-dots { display: flex; justify-content: center; gap: 8px; margin-top: 24px; }
.fof-tab-dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #bfc5ca;
  cursor: pointer;
  transition: width 0.3s, background 0.3s;
}
.fof-tab-dots button[aria-current="true"] { width: 24px; background: #dda552; }

/* testimonial highlight pill */
.fof-pill {
  display: inline-block;
  background: rgba(221, 165, 82, 0.1);
  color: #dda552;
  font-family: Outfit, sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 6px 12px;
  border-radius: 4px;
}

/* five-star row */
.fof-stars { color: #dda552; font-size: 0.9rem; letter-spacing: 0.05em; }
.fof-stars-lg { color: #dda552; font-size: 1.2rem; letter-spacing: 0.05em; }

/* pricing: struck-through comparison values, and the sticky panel */
.fof-strike .elementor-heading-title { text-decoration: line-through; }
@media (min-width: 1025px) {
  .fof-sticky-panel { position: sticky; top: 96px; }
}

/* pricing: the itemised value table */
.fof-value-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  margin-bottom: 12px;
  border-radius: 4px;
  background: #ffffff;
  border: 1px solid rgba(1, 14, 30, 0.08);
}
.fof-value-row > span:first-child {
  display: flex;
  align-items: center;
  gap: 12px;
}
.fof-value-mark { color: #dda552; font-size: 0.8rem; }
.fof-value-label {
  font-family: Outfit, sans-serif;
  font-size: 0.875rem;
  color: #2f3c4a;
}
.fof-value-price {
  flex-shrink: 0;
  font-family: Outfit, sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  color: #738292;
  text-decoration: line-through;
}
.fof-value-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  border-radius: 4px;
  background: rgba(221, 165, 82, 0.08);
  border: 1px solid rgba(221, 165, 82, 0.2);
}
.fof-total-label {
  font-family: Outfit, sans-serif;
  font-weight: 600;
  color: #010e1e;
}
.fof-total-price {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: #dda552;
  text-decoration: line-through;
}

/* ======================================================================
 * FAQ accordion. Elementor's accordion controls cover colours and type,
 * but the card shell (one bordered, rounded panel per item, gold border
 * and gold halo while open) and the rotating plus sign are state-driven,
 * so they live here.
 * ==================================================================== */
.fof-faq .elementor-accordion-item {
  background: #fcfcfc;
  border: 1px solid rgba(1, 14, 30, 0.09);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 12px;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.fof-faq .elementor-accordion-item:last-child { margin-bottom: 0; }
.fof-faq .elementor-accordion-item:has(.elementor-tab-title.elementor-active) {
  border-color: rgba(221, 165, 82, 0.5);
  box-shadow: 0 2px 16px rgba(221, 165, 82, 0.08);
}
.fof-faq .elementor-tab-title {
  padding: 20px 24px;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.fof-faq .elementor-accordion-title { line-height: 1.4; }
.fof-faq .elementor-accordion-icon {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ebeced;
  font-size: 0.8rem;
  transition: background 0.3s, transform 0.3s;
}
.fof-faq .elementor-tab-title.elementor-active .elementor-accordion-icon {
  background: rgba(221, 165, 82, 0.12);
  transform: rotate(45deg);
}
.fof-faq .elementor-tab-content {
  padding: 0 24px 24px;
  border: 0;
}
.fof-faq .elementor-tab-content::before {
  content: "";
  display: block;
  height: 1px;
  margin-bottom: 16px;
  background: rgba(1, 14, 30, 0.08);
}

/* ======================================================================
 * Guide-palette components (the later-built pages: 1:1 session feedback,
 * the free guide, access / success / cancel, legal). These use the
 * source's second palette: #0F1B2E, #C4A747, #B18C35, #F8F6F1.
 * ==================================================================== */
.fof-quote-mark {
  display: block;
  width: 28px;
  height: 28px;
  color: #b18c35;
  font-family: "Cormorant Garamond", serif;
  font-size: 3.25rem;
  line-height: 0.75;
}
.fof-guide-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: rgba(196, 167, 71, 0.15);
  color: #8f6e20;
  font-family: Outfit, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 6px 12px;
}

/* enquiry form: gold focus ring on inputs, matching the source */
.fof-enquiry-form .elementor-field-textual:focus {
  border-color: #dda552;
  box-shadow: none;
  outline: none;
}
.fof-enquiry-form .elementor-field-textual { transition: border-color 0.2s; }
.fof-enquiry-form .elementor-button:hover { transform: translateY(-1px); }
.fof-enquiry-form .elementor-button { transition: opacity 0.2s, transform 0.15s; }

/* response-time badge */
.fof-icon-box {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(221, 165, 82, 0.1);
  border: 1px solid rgba(221, 165, 82, 0.25);
}

/* ======================================================================
 * Closing CTA band: two overlapping radial washes at 5%, which is past
 * what one Elementor background-overlay can express.
 * ==================================================================== */
.fof-cta-band { position: relative; overflow: hidden; }
.fof-cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  background-image:
    radial-gradient(circle at 30% 50%, #dda552 0%, transparent 60%),
    radial-gradient(circle at 70% 50%, #224a71 0%, transparent 60%);
  z-index: 1;
}
.fof-cta-band > .e-con-inner,
.fof-cta-band > .elementor-element { position: relative; z-index: 2; }

/* ======================================================================
 * Guide / legal / transactional pages: the source gives these their own
 * minimal chrome rather than the marketing header and footer.
 * ==================================================================== */
.fof-minimal-header { border-bottom: 1px solid #f3f4f6; background: #ffffff; }
.fof-minimal-header .fof-logo img { height: 32px; width: auto; }
.fof-minimal-footer { border-top: 1px solid #f3f4f6; background: #ffffff; }
.fof-minimal-footer .fof-logo img { height: 32px; width: auto; }
.fof-minimal-footer a { color: inherit; }
.fof-minimal-footer a:hover { color: #c4a747; }

/* the "free guide" eyebrow pill on the guide hero */
.fof-hero-pill {
  display: inline-block;
  background: rgba(196, 167, 71, 0.2);
  color: #c4a747;
  font-family: Outfit, sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 6px 16px;
  border-radius: 999px;
}

/* navy rounded icon tile used through the guide page */
.fof-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: #0f1b2e;
  border-radius: 8px;
}
.fof-tile-sm { width: 36px; height: 36px; }
.fof-tile-md { width: 40px; height: 40px; }

/* gold check used in the "why this guide is different" list */
.fof-check { color: #c4a747; flex-shrink: 0; }

/* inline email capture on the closing band */
.fof-inline-form .elementor-form-fields-wrapper { align-items: stretch; }
.fof-inline-form .elementor-field-textual {
  height: 48px;
  background: #ffffff;
  color: #0f1b2e;
  border: 0;
}
.fof-inline-form .elementor-button { height: 48px; white-space: nowrap; }

/* the ten question tiles on the free-guide page */
.fof-q-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 639px) {
  .fof-q-grid { grid-template-columns: minmax(0, 1fr); }
}
.fof-q {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid #f3f4f6;
  background: #f9f7f4;
}
.fof-q-label {
  font-family: Outfit, sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  color: #0f1b2e;
  line-height: 1.45;
}

/* "why this guide is different" checklist */
.fof-checklist { list-style: none; margin: 0; padding: 0; }
.fof-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}
.fof-checklist li:last-child { margin-bottom: 0; }
.fof-checklist span:last-child {
  font-family: Outfit, sans-serif;
  font-size: 1rem;
  color: #374151;
  line-height: 1.7;
}

/* ======================================================================
 * Coaching / booking pages: navy chrome, glass cards, numbered steps.
 * ==================================================================== */
.fof-dark-header { background: #0f1b2e; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.fof-dark-header .fof-logo img { height: 36px; width: auto; }
.fof-dark-footer { background: #0f1b2e; }
.fof-dark-footer .fof-logo img { height: 32px; width: auto; }
.fof-dark-footer a { color: inherit; }
.fof-dark-footer a:hover { color: #d3ab50; }

/* hero wash on the coaching page */
.fof-coach-hero { position: relative; overflow: hidden; }
.fof-coach-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.2;
  background-image:
    radial-gradient(circle at 80% 10%, #c4a747 0, transparent 32%),
    radial-gradient(circle at 8% 100%, #294565 0, transparent 36%);
  z-index: 1;
}
.fof-coach-hero > .e-con-inner,
.fof-coach-hero > .elementor-element { position: relative; z-index: 2; }

/* translucent card on a navy ground */
.fof-glass {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* icon + text rows used in the session card and the checklist asides */
.fof-icon-rows { list-style: none; margin: 0; padding: 0; }
.fof-icon-rows li {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  font-family: Outfit, sans-serif;
  font-size: 0.875rem;
  line-height: 1.6;
}
.fof-icon-rows li:last-child { margin-bottom: 0; }
.fof-icon-rows svg { flex-shrink: 0; color: #d3ab50; }

/* numbered steps in "how it works" */
.fof-steps { display: flex; flex-direction: column; gap: 28px; }
.fof-step { display: flex; gap: 20px; }
.fof-step-num {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.875rem;
  line-height: 1;
  color: #c4a747;
  flex-shrink: 0;
}
.fof-step h3 {
  font-family: Outfit, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: #0f1b2e;
  margin: 0;
}
.fof-step p {
  font-family: Outfit, sans-serif;
  font-size: 0.875rem;
  line-height: 1.6;
  color: #475569;
  margin: 4px 0 0;
}

/* the three small stat tiles in the perspective panel */
.fof-mini-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 639px) { .fof-mini-stats { grid-template-columns: minmax(0, 1fr); } }
.fof-mini-stat { background: #f8f6f1; border-radius: 12px; padding: 16px; }
.fof-mini-stat b {
  display: block;
  font-family: "Cormorant Garamond", serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: #b18c35;
}
.fof-mini-stat span {
  display: block;
  margin-top: 4px;
  font-family: Outfit, sans-serif;
  font-size: 0.875rem;
  line-height: 1.35;
  color: #475569;
}

/* coaching FAQ: hairline rows rather than cards */
.fof-faq-plain .elementor-accordion-item {
  background: transparent;
  border: 0;
  border-bottom: 1px solid #e2e8f0;
  border-radius: 0;
}
.fof-faq-plain .elementor-accordion { border-top: 1px solid #e2e8f0; }
.fof-faq-plain .elementor-tab-title {
  padding: 20px 0;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.fof-faq-plain .elementor-accordion-icon { transition: transform 0.3s; }
.fof-faq-plain .elementor-tab-title.elementor-active .elementor-accordion-icon { transform: rotate(180deg); }
.fof-faq-plain .elementor-tab-content { padding: 0 40px 20px 0; border: 0; }

/* Elementor's own accordion stylesheet is MORE specific than the rules above:
 *   .elementor-accordion .elementor-tab-title .elementor-accordion-icon
 *     { display: inline-block; width: 1.5em }
 *   .elementor-accordion .elementor-tab-title .elementor-accordion-icon.elementor-accordion-icon-right
 *     { text-align: right }
 * so the `display:flex` centring above never applied. The glyph ended up on a
 * text baseline at the top of the box and pushed to its right edge - measured
 * 5.6px up and 5.6px right of the middle of a 24px circle. These selectors
 * deliberately match Elementor's own specificity so the centring wins. */
.fof-faq .elementor-accordion .elementor-tab-title .elementor-accordion-icon,
.fof-faq .elementor-accordion .elementor-tab-title .elementor-accordion-icon.elementor-accordion-icon-right {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1;
}

/* An inline <svg> sits on a baseline and carries descender leading below it,
 * which offsets the glyph upward inside its box. Making it a block removes the
 * line box entirely, so the icon's box is exactly the icon. */
.fof-faq .elementor-accordion-icon > span,
.fof-faq-plain .elementor-accordion-icon > span { line-height: 0; }

.fof-faq .elementor-accordion-icon svg,
.fof-faq-plain .elementor-accordion-icon svg { display: block; }

/* Question text alignment.
 * The row is a flex container with justify-content: space-between, and the
 * title is a shrink-to-fit flex item - so a short question (What is your
 * refund policy?) was pushed hard against the right edge while a long one
 * wrapped and filled the row, leaving the column ragged from item to item.
 * Letting the title take the free space instead pins every question to the
 * same left edge, whatever its length. */
.fof-faq .elementor-accordion .elementor-tab-title,
.fof-faq-plain .elementor-accordion .elementor-tab-title {
  justify-content: flex-start;
}

.fof-faq .elementor-accordion .elementor-tab-title .elementor-accordion-title,
.fof-faq-plain .elementor-accordion .elementor-tab-title .elementor-accordion-title {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}

/* icon rows on a light ground take the deeper gold */
.fof-icon-rows-gold svg { color: #b18c35; }

/* centred confirmation card used by the transactional pages */
.fof-confirm-card { box-shadow: 0 20px 40px -12px rgba(15, 27, 46, 0.18); }

/* legal pages keep their header pinned, as the source does */
.fof-sticky-header { position: sticky; top: 0; z-index: 50; }

/* ======================================================================
 * Stripe return pages (/success, /cancel). These use the source's third
 * gold, #D4AF6A, over a #0B1628 navy.
 * ==================================================================== */
.fof-status-card {
  background: #ffffff;
  border: 1px solid rgba(212, 175, 106, 0.25);
  border-radius: 16px;
  box-shadow: 0 4px 40px rgba(11, 22, 40, 0.1);
}
.fof-status-badge {
  width: 72px;
  height: 72px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(212, 175, 106, 0.12);
  border: 2px solid #d4af6a;
}
.fof-next-box {
  background: rgba(11, 22, 40, 0.04);
  border: 1px solid rgba(11, 22, 40, 0.08);
  border-radius: 12px;
  padding: 24px;
  text-align: left;
}
.fof-next-box h2 {
  margin: 0 0 16px;
  font-family: Outfit, sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #d4af6a;
}
.fof-next-box ul { list-style: none; margin: 0; padding: 0; }
.fof-next-box li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
  font-family: Outfit, sans-serif;
  font-size: 0.875rem;
  line-height: 1.6;
  color: #4a5568;
}
.fof-next-box li:last-child { margin-bottom: 0; }
.fof-next-num {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #d4af6a;
  color: #0b1628;
  font-size: 0.75rem;
  font-weight: 700;
}
.fof-next-box li svg { flex-shrink: 0; margin-top: 3px; color: #d4af6a; }
.fof-guarantee {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #0b1628;
  border-radius: 12px;
  padding: 20px;
  text-align: left;
}
.fof-guarantee p {
  margin: 0;
  font-family: Outfit, sans-serif;
  font-size: 0.875rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
}
.fof-guarantee strong { color: #d4af6a; }

/* gold bullet list on the access page */
.fof-dot-list { list-style: none; margin: 0; padding: 0; }
.fof-dot-list li {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  font-family: Outfit, sans-serif;
  font-size: 0.875rem;
  line-height: 1.6;
  color: #475569;
}
.fof-dot-list li:last-child { margin-bottom: 0; }
.fof-dot-list li::before {
  content: "";
  flex: 0 0 6px;
  width: 6px;
  height: 6px;
  margin-top: 8px;
  border-radius: 50%;
  background: #c4a747;
}

/* ======================================================================
 * Legal pages (/privacy, /terms, /refund): a single white card of
 * numbered sections on a cool off-white ground.
 * ==================================================================== */
.fof-legal > div { margin-bottom: 32px; }
.fof-legal > div:last-child { margin-bottom: 0; }
.fof-legal h2 {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: #010e1e;
  margin: 0 0 0.6rem;
  line-height: 1.25;
}
.fof-legal p {
  font-family: Outfit, sans-serif;
  font-size: 1rem;
  color: #364452;
  line-height: 1.8;
  margin: 0;
}
.fof-legal a { color: #dda552; text-decoration: underline; }

.fof-refund-band {
  background: linear-gradient(135deg, #010e1e 0%, #061c31 100%);
  border-radius: 12px;
  padding: 32px;
  text-align: center;
}

.fof-legal-footer { border-top: 1px solid rgba(1, 14, 30, 0.08); background: #f7f8fa; }
.fof-legal-footer .fof-logo img { height: 28px; width: auto; }
.fof-legal-footer a { color: inherit; text-decoration: none; }
.fof-legal-footer a:hover { color: #010e1e; }

/* ======================================================================
 * The fixed, transparent-over-hero header belongs to the homepage, which
 * is the only page with a full-bleed dark hero behind it. Everywhere else
 * the marketing header sits in normal flow and renders in its solid state,
 * so WooCommerce and archive pages are not covered by it.
 * ==================================================================== */
body:not(.home) .fof-header {
  position: static;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid rgba(1, 14, 30, 0.08);
}
body:not(.home) .fof-header .fof-logo img {
  filter: invert(1) brightness(0.15) sepia(1) hue-rotate(190deg) saturate(3);
}
body:not(.home) .fof-header .fof-nav .elementor-item { color: #2f3c4a; }
body:not(.home) .fof-header .fof-nav .elementor-menu-toggle { color: #010e1e; }