/* ==========================================================================
   FertileRank — Global stylesheet for Divi 5
   --------------------------------------------------------------------------
   Paste into: Divi > Theme Options > Custom CSS  (or a child theme style.css).
   Pair with the per-page HTML in divi/pages/*.html (Code modules) and the
   Theme Builder header/footer in divi/global-header.html / global-footer.html.

   Design tokens match the source design system (docs/11-design-system.md):
   brand orange from the logo (#F4731F), ink slate neutrals, Inter +
   Plus Jakarta Sans. All selectors are single-class or :where()-scoped for
   speed and to avoid fighting Divi's own styles. Mobile-first; breakpoints
   at 640px and 1024px.
   ========================================================================== */

:root {
  /* Brand orange (logo #F4731F). 700+ for text/buttons on white (WCAG AA). */
  --fr-brand-50: #fff7ef;
  --fr-brand-100: #feeddc;
  --fr-brand-200: #fcd7b4;
  --fr-brand-300: #faba81;
  --fr-brand-400: #f7954a;
  --fr-brand-500: #f4731f;
  --fr-brand-600: #e25a0c;
  --fr-brand-700: #bc4708;
  --fr-brand-800: #963a0e;
  --fr-brand-900: #7a320f;

  /* Ink / neutrals (Tailwind slate). */
  --fr-ink-50: #f8fafc;
  --fr-ink-100: #f1f5f9;
  --fr-ink-200: #e2e8f0;
  --fr-ink-300: #cbd5e1;
  --fr-ink-400: #94a3b8;
  --fr-ink-500: #64748b;
  --fr-ink-600: #475569;
  --fr-ink-700: #334155;
  --fr-ink-800: #1e293b;
  --fr-ink-900: #0f172a;
  --fr-ink-950: #020617;

  --fr-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fr-font-display: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;

  --fr-radius: 0.5rem;      /* buttons */
  --fr-radius-lg: 0.75rem;  /* cards */
  --fr-radius-xl: 1rem;     /* feature cards */
  --fr-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --fr-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --fr-container: 80rem;    /* max-w-7xl */
  --fr-measure: 42rem;      /* comfortable reading width */
}

/* --------------------------------------------------------------------------
   Base typography — scoped with :where() (zero specificity) so it styles the
   Code-module content without overriding Divi theme UI elsewhere.
   -------------------------------------------------------------------------- */
.fr-page,
.fr-header,
.fr-footer,
.fr-sticky {
  font-family: var(--fr-font-sans);
  color: var(--fr-ink-600);
  line-height: 1.6;
  font-size: 1rem;
  -webkit-font-smoothing: antialiased;
}

/* Divi sets border-box globally; this keeps the modules correct standalone too. */
:where(.fr-page, .fr-header, .fr-footer, .fr-sticky),
:where(.fr-page, .fr-header, .fr-footer, .fr-sticky) * {
  box-sizing: border-box;
}

.fr-page :where(h1, h2, h3, h4) {
  font-family: var(--fr-font-display);
  color: var(--fr-ink-900);
  line-height: 1.2;
  margin: 0 0 1rem;
  font-weight: 700;
}
.fr-page :where(h1) { font-size: 2.25rem; font-weight: 800; letter-spacing: -0.02em; }
.fr-page :where(h2) { font-size: 1.75rem; }
.fr-page :where(h3) { font-size: 1.25rem; }
.fr-page :where(h4) { font-size: 1.05rem; }
.fr-page :where(p, ul, ol) { margin: 0 0 1rem; }
.fr-page :where(ul, ol) { padding-left: 1.25rem; }
.fr-page :where(li) { margin-bottom: 0.375rem; }
.fr-page :where(a) { color: var(--fr-brand-700); text-decoration: none; }
.fr-page :where(a:hover) { color: var(--fr-brand-800); text-decoration: underline; }
.fr-page :where(strong) { color: var(--fr-ink-900); font-weight: 600; }
.fr-page :where(img, svg) { max-width: 100%; height: auto; }

@media (min-width: 640px) {
  .fr-page :where(h1) { font-size: 3rem; }
  .fr-page :where(h2) { font-size: 2.125rem; }
  .fr-page :where(h3) { font-size: 1.375rem; }
}
@media (min-width: 1024px) {
  .fr-page :where(h1) { font-size: 3.5rem; }
}

/* Focus visibility (WCAG 2.2 AA) — one rule for everything interactive. */
:where(.fr-page, .fr-header, .fr-footer, .fr-sticky) :where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--fr-brand-500);
  outline-offset: 2px;
  border-radius: var(--fr-radius);
}

@media (prefers-reduced-motion: reduce) {
  .fr-page *, .fr-header *, .fr-sticky * { transition: none !important; animation: none !important; }
}

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */
.fr-container {
  max-width: var(--fr-container);
  margin-inline: auto;
  padding-inline: 1rem;
}
@media (min-width: 640px) { .fr-container { padding-inline: 1.5rem; } }
@media (min-width: 1024px) { .fr-container { padding-inline: 2rem; } }

.fr-section { padding-block: 4rem; background: #fff; }
.fr-section--tint { background: var(--fr-ink-50); }
.fr-section--dark { background: var(--fr-ink-950); }
.fr-section--hero { background: linear-gradient(135deg, var(--fr-brand-50), #fff 55%, var(--fr-brand-50)); }
@media (min-width: 1024px) { .fr-section { padding-block: 6rem; } }

/* Dark sections: readable defaults without extra classes on every element. */
.fr-section--dark, .fr-section--dark :where(p, li) { color: var(--fr-ink-300); }
.fr-section--dark :where(h2, h3, h4, strong) { color: #fff; }

.fr-center { text-align: center; }
.fr-measure { max-width: var(--fr-measure); margin-inline: auto; }

/* Section header block (eyebrow + heading + intro). */
.fr-section-head { max-width: 46rem; margin: 0 auto 2.5rem; text-align: center; }
.fr-section-head > p:last-child { font-size: 1.125rem; margin-bottom: 0; }

.fr-eyebrow {
  display: inline-block;
  padding: 0.375rem 1rem;
  border-radius: 999px;
  background: var(--fr-brand-100);
  color: var(--fr-brand-800);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}
.fr-section--dark .fr-eyebrow { background: rgb(244 115 31 / 0.15); color: var(--fr-brand-300); }

.fr-lead { font-size: 1.125rem; color: var(--fr-ink-600); }
@media (min-width: 640px) { .fr-lead { font-size: 1.25rem; } }

.fr-accent {
  background: linear-gradient(90deg, var(--fr-brand-600), var(--fr-brand-800));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Responsive grids — one class each, no media-query soup in the HTML. */
.fr-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .fr-grid--2, .fr-grid--3, .fr-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 640px) {
  .fr-grid--5 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .fr-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .fr-grid--4 { grid-template-columns: repeat(4, 1fr); }
  .fr-grid--5 { grid-template-columns: repeat(5, 1fr); }
}

/* Two-column split (e.g., Contact page). */
.fr-split { display: grid; gap: 3rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1024px) { .fr-split { grid-template-columns: 1fr 1fr; } }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.fr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  min-height: 44px; /* tap target */
  border: 1px solid transparent;
  border-radius: var(--fr-radius);
  font-family: var(--fr-font-display);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none !important;
  transition: background-color 0.2s, box-shadow 0.2s;
}
.fr-btn .fr-icon { width: 1rem; height: 1rem; }

.fr-btn--primary { background: var(--fr-brand-700); color: #fff !important; box-shadow: var(--fr-shadow-sm); }
.fr-btn--primary:hover { background: var(--fr-brand-800); box-shadow: var(--fr-shadow-md); }

.fr-btn--secondary { background: var(--fr-brand-50); color: var(--fr-brand-800) !important; border-color: var(--fr-brand-200); }
.fr-btn--secondary:hover { background: var(--fr-brand-100); }

.fr-btn--white { background: #fff; color: var(--fr-ink-800) !important; box-shadow: var(--fr-shadow-sm); }
.fr-btn--white:hover { background: var(--fr-ink-50); }

.fr-btn--lg { padding: 1rem 2rem; font-size: 1rem; }

.fr-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
@media (min-width: 640px) { .fr-actions { flex-direction: row; } }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.fr-hero { padding-block: 4rem; }
.fr-hero .fr-lead { margin: 0 auto 2.5rem; max-width: var(--fr-measure); }
.fr-hero h1 { max-width: 56rem; margin-inline: auto; margin-bottom: 1.5rem; }
@media (min-width: 1024px) { .fr-hero { padding-block: 6rem; } }

/* --------------------------------------------------------------------------
   Blueprint illustrations (inline SVG)
   fr-hero__art is desktop-only so the mobile LCP element stays the H1
   (docs/06 §6.6). fr-draw expects pathLength="1" on the stroked path; its
   base state (dashoffset 0) is fully drawn, so the global reduced-motion
   kill-switch above leaves a complete static frame. fr-fade is opacity-only.
   -------------------------------------------------------------------------- */
.fr-hero__art { display: none; }
@media (min-width: 1024px) { .fr-hero__art { display: block; } }

/* Two-column hero: text column + fr-hero__art diagram column at 1024px+.
   Below 1024px the art is hidden and the hero stays centered, text-first. */
.fr-hero__split { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 1024px) {
  .fr-hero__split { grid-template-columns: 3fr 2fr; text-align: left; }
  .fr-hero__split h1, .fr-hero__split .fr-lead { margin-inline: 0; }
  .fr-hero__split .fr-actions { justify-content: flex-start; }
}

.fr-draw { stroke-dasharray: 1; animation: fr-draw 1.2s ease-out forwards; }
.fr-fade { animation: fr-fade 0.6s ease-out both; }
@keyframes fr-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes fr-fade { from { opacity: 0; } to { opacity: 1; } }

.fr-page :where(figure) { margin: 0 0 1rem; }
.fr-page :where(figcaption) { font-size: 0.875rem; color: var(--fr-ink-500); text-align: center; margin-top: 0.75rem; }
.fr-section--dark :where(figcaption) { color: var(--fr-ink-400); }

/* --------------------------------------------------------------------------
   Answer block (AEO) — brand panel with left rule, sits under the hero.
   -------------------------------------------------------------------------- */
.fr-answer {
  max-width: 48rem;
  margin: -1.5rem auto 0;
  position: relative;
  background: var(--fr-brand-50);
  border-left: 4px solid var(--fr-brand-700);
  border-radius: 0 var(--fr-radius-lg) var(--fr-radius-lg) 0;
  padding: 1.25rem 1.5rem;
  box-shadow: var(--fr-shadow-sm);
}
.fr-answer__q { font-family: var(--fr-font-display); font-weight: 700; color: var(--fr-ink-900); margin-bottom: 0.5rem; }
.fr-answer p:last-child { margin-bottom: 0; color: var(--fr-ink-700); }

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.fr-card {
  background: #fff;
  border: 1px solid var(--fr-ink-200);
  border-radius: var(--fr-radius-xl);
  padding: 1.5rem;
  transition: box-shadow 0.2s;
}
.fr-card:hover { box-shadow: var(--fr-shadow-md); }
.fr-card > :last-child { margin-bottom: 0; }
.fr-card h3 { margin-bottom: 0.5rem; }
.fr-section--dark .fr-card { background: var(--fr-ink-900); border-color: var(--fr-ink-800); }

/* Card as a link (intent router, article cards). */
a.fr-card { display: block; color: inherit; text-decoration: none !important; }
a.fr-card:hover h3 { color: var(--fr-brand-800); }

.fr-icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--fr-radius-lg);
  background: var(--fr-brand-50);
  color: var(--fr-brand-700);
  margin-bottom: 1rem;
}
.fr-icon-tile .fr-icon { width: 1.5rem; height: 1.5rem; }
.fr-section--dark .fr-icon-tile { background: rgb(244 115 31 / 0.15); color: var(--fr-brand-400); }

.fr-icon { width: 1.25rem; height: 1.25rem; flex: none; }

/* Inline "learn more" style link with arrow. */
.fr-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-weight: 600;
  color: var(--fr-brand-700);
}
.fr-link .fr-icon { width: 1rem; height: 1rem; }

/* Tag / small label (e.g., "Publishing soon"). */
.fr-tag {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: var(--fr-ink-100);
  color: var(--fr-ink-600);
  font-size: 0.75rem;
  font-weight: 600;
}
.fr-tag--brand { background: var(--fr-brand-100); color: var(--fr-brand-800); }

/* Callout panel (compliance notes, honesty panels). */
.fr-callout {
  background: var(--fr-brand-50);
  border: 1px solid var(--fr-brand-200);
  border-radius: var(--fr-radius-xl);
  padding: 1.5rem;
}
.fr-callout > :last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Checklists (Check icon + text)
   -------------------------------------------------------------------------- */
.fr-checklist { list-style: none; padding: 0; margin: 0 0 1rem; }
.fr-checklist li {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin-bottom: 0.75rem;
}
.fr-checklist .fr-icon { color: var(--fr-brand-700); margin-top: 0.2rem; }
.fr-checklist p { margin: 0; font-size: 0.875rem; }
.fr-section--dark .fr-checklist .fr-icon { color: var(--fr-brand-400); }

/* Numbered tile variant of the icon tile (e.g., phase cards). */
.fr-icon-tile--num { font-family: var(--fr-font-display); font-weight: 700; }

/* --------------------------------------------------------------------------
   Stats (process facts) — light cards and the slim dark stat bar
   -------------------------------------------------------------------------- */
.fr-statbar { padding-block: 2.5rem; }
.fr-statbar .fr-grid { gap: 2rem; }
.fr-stat { text-align: center; }
.fr-stat__value {
  font-family: var(--fr-font-display);
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--fr-brand-600);
  line-height: 1.1;
  margin-bottom: 0.375rem;
}
.fr-section--dark .fr-stat__value { color: var(--fr-brand-400); }
.fr-stat__label { font-weight: 600; color: var(--fr-ink-900); margin-bottom: 0.25rem; }
.fr-section--dark .fr-stat__label { color: #fff; }
.fr-stat__desc { font-size: 0.875rem; color: var(--fr-ink-500); margin-bottom: 0; }
.fr-section--dark .fr-stat__desc { color: var(--fr-ink-400); }

/* --------------------------------------------------------------------------
   Numbered steps / phase timeline
   -------------------------------------------------------------------------- */
.fr-steps { list-style: none; counter-reset: fr-step; padding: 0; margin: 0; }
.fr-step {
  counter-increment: fr-step;
  position: relative;
  padding: 0 0 2rem 3.5rem;
}
.fr-step::before {
  content: counter(fr-step);
  position: absolute;
  left: 0;
  top: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--fr-brand-700);
  color: #fff;
  font-family: var(--fr-font-display);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fr-step::after {
  content: '';
  position: absolute;
  left: 1.25rem;
  top: 2.75rem;
  bottom: 0.25rem;
  width: 2px;
  background: var(--fr-ink-200);
}
.fr-step:last-child { padding-bottom: 0; }
.fr-step:last-child::after { display: none; }
.fr-step > :last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Comparison table
   -------------------------------------------------------------------------- */
.fr-table-wrap { overflow-x: auto; border: 1px solid var(--fr-ink-200); border-radius: var(--fr-radius-xl); }
.fr-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; min-width: 34rem; }
.fr-table caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.fr-table th, .fr-table td { padding: 0.875rem 1.25rem; text-align: left; border-bottom: 1px solid var(--fr-ink-200); vertical-align: top; }
.fr-table thead th { background: var(--fr-ink-900); color: #fff; font-family: var(--fr-font-display); }
.fr-table tbody th { font-weight: 600; color: var(--fr-ink-900); background: var(--fr-ink-50); }
.fr-table tr:last-child :where(th, td) { border-bottom: 0; }
.fr-table td.fr-table__win { color: var(--fr-ink-700); }
.fr-table td.fr-table__win strong { color: var(--fr-brand-800); }

/* --------------------------------------------------------------------------
   FAQ accordion — native <details>, zero JS.
   -------------------------------------------------------------------------- */
.fr-faq { max-width: 48rem; margin-inline: auto; }
.fr-faq__item {
  background: #fff;
  border: 1px solid var(--fr-ink-200);
  border-radius: var(--fr-radius-lg);
  margin-bottom: 0.75rem;
}
.fr-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.125rem 1.5rem;
  font-weight: 600;
  color: var(--fr-ink-900);
  cursor: pointer;
  list-style: none;
}
.fr-faq__item summary::-webkit-details-marker { display: none; }
.fr-faq__item summary .fr-icon { color: var(--fr-ink-400); transition: transform 0.2s; }
.fr-faq__item[open] summary .fr-icon { transform: rotate(180deg); }
.fr-faq__item > div { padding: 0 1.5rem 1.125rem; }
.fr-faq__item > div > :last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Brand facts (GEO) — definition list
   -------------------------------------------------------------------------- */
.fr-facts {
  background: #fff;
  border: 1px solid var(--fr-ink-200);
  border-radius: var(--fr-radius-xl);
  margin: 0;
}
.fr-facts > div { padding: 1rem 1.5rem; border-bottom: 1px solid var(--fr-ink-100); }
.fr-facts > div:last-child { border-bottom: 0; }
.fr-facts dt { font-weight: 600; color: var(--fr-ink-900); font-size: 0.875rem; margin-bottom: 0.25rem; }
.fr-facts dd { margin: 0; font-size: 0.875rem; }
@media (min-width: 640px) {
  .fr-facts > div { display: grid; grid-template-columns: 1fr 2fr; gap: 1rem; }
  .fr-facts dt { margin-bottom: 0; padding-top: 0.125rem; }
}

/* --------------------------------------------------------------------------
   CTA band
   -------------------------------------------------------------------------- */
.fr-cta { text-align: center; }
.fr-cta h2 { color: #fff; }
.fr-cta .fr-lead { color: var(--fr-ink-300); margin: 0 auto 2rem; max-width: var(--fr-measure); }
.fr-cta__note { margin: 1.5rem 0 0; font-size: 0.875rem; color: var(--fr-ink-400); }

/* Slim mid-page CTA band on the brand tint — light variant of fr-cta, used
   directly after a page's strongest proof/mechanism section (docs/05 §5.4). */
.fr-cta-mid { padding-block: 3.5rem; background: var(--fr-brand-50); text-align: center; }
.fr-cta-mid h2 { font-size: 1.5rem; }
.fr-cta-mid .fr-lead { max-width: var(--fr-measure); margin: 0 auto 2rem; font-size: 1.125rem; }
.fr-cta-mid .fr-cta__note { color: var(--fr-ink-600); }

/* --------------------------------------------------------------------------
   Forms — labels above fields, visible focus, no placeholder-as-label.
   -------------------------------------------------------------------------- */
.fr-form { display: grid; gap: 1.25rem; }
.fr-field label { display: block; font-weight: 600; color: var(--fr-ink-900); font-size: 0.875rem; margin-bottom: 0.375rem; }
.fr-field :where(input, select, textarea) {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--fr-ink-300);
  border-radius: var(--fr-radius);
  background: #fff;
  color: var(--fr-ink-900);
  font: inherit;
}
.fr-field :where(input, select, textarea):focus { border-color: var(--fr-brand-500); }
.fr-form__note {
  background: var(--fr-brand-50);
  border: 1px solid var(--fr-brand-200);
  border-radius: var(--fr-radius);
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  color: var(--fr-ink-700);
}
@media (min-width: 640px) {
  .fr-form--2col { grid-template-columns: 1fr 1fr; }
  .fr-form--2col > .fr-field--full, .fr-form--2col > .fr-form__note, .fr-form--2col > .fr-btn { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   Prose pages (legal) — narrow measure, quiet headings.
   -------------------------------------------------------------------------- */
.fr-prose { max-width: 48rem; margin-inline: auto; }
.fr-prose h2 { font-size: 1.375rem; margin-top: 2.5rem; }
.fr-prose > :first-child { margin-top: 0; }

/* ==========================================================================
   HEADER (Theme Builder global header — divi/global-header.html)
   ========================================================================== */
.fr-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgb(255 255 255 / 0.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--fr-ink-100);
}
.fr-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4rem;
}
.fr-logo {
  display: inline-flex;
  align-items: center;
  flex: none;
  text-decoration: none !important;
}
.fr-logo__image {
  display: block;
  width: clamp(9.5rem, 32vw, 11.75rem);
  height: 2.25rem;
  object-fit: cover;
  object-position: center;
}
.fr-footer .fr-logo__image {
  width: min(100%, 13.5rem);
  height: 2.75rem;
}

.fr-nav { display: none; }
.fr-header__cta { display: none; }
@media (min-width: 1024px) {
  .fr-nav { display: flex; align-items: center; gap: 0.25rem; }
  .fr-header__cta { display: inline-flex; }
  .fr-nav__toggle { display: none; }
}
.fr-nav a, .fr-nav button {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: var(--fr-radius);
  font-family: var(--fr-font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--fr-ink-600);
  cursor: pointer;
  white-space: nowrap;
  background: none;
  border: 0;
}
.fr-nav a:hover, .fr-nav button:hover,
.fr-nav button[aria-expanded="true"] { color: var(--fr-brand-800); background: var(--fr-brand-50); text-decoration: none; }

/* Mega menu (desktop). The panel is absolutely positioned against .fr-header
   (sticky = containing block) and rendered display:none while closed. */
.fr-mega {
  position: absolute;
  inset-inline: 0;
  top: 100%;
  background: #fff;
  border-top: 1px solid var(--fr-ink-100);
  border-bottom: 1px solid var(--fr-ink-200);
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1);
}
.fr-mega[hidden] { display: none; }
.fr-mega__inner { display: grid; grid-template-columns: 3fr 1fr; gap: 2rem; padding-block: 2rem; }
.fr-mega__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 1rem; }
.fr-mega__label {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--fr-ink-400); margin: 0;
}
.fr-mega__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.25rem; list-style: none; margin: 0; padding: 0; }
.fr-mega__grid li { margin: 0; }
.fr-mega__item {
  display: flex; align-items: flex-start; gap: 0.75rem;
  padding: 0.75rem; border-radius: var(--fr-radius-lg);
  text-decoration: none !important;
}
.fr-mega__item:hover { background: var(--fr-brand-50); }
.fr-mega__item .fr-icon-tile { width: 2.5rem; height: 2.5rem; margin: 0; flex: none; border-radius: var(--fr-radius); }
.fr-mega__item:hover .fr-icon-tile { background: #fff; }
.fr-mega__item .fr-icon-tile .fr-icon { width: 1.25rem; height: 1.25rem; }
.fr-mega__item strong {
  display: block; font-family: var(--fr-font-display);
  font-size: 0.875rem; color: var(--fr-ink-900);
}
.fr-mega__item:hover strong { color: var(--fr-brand-800); }
.fr-mega__item small { display: block; font-size: 0.875rem; color: var(--fr-ink-500); line-height: 1.45; }
.fr-mega__rail {
  background: var(--fr-ink-50); border-radius: var(--fr-radius-xl);
  padding: 1.5rem; display: flex; flex-direction: column;
}
.fr-mega__rail .fr-btn { width: 100%; margin-bottom: 1rem; }
.fr-mega__rail-links { margin-top: auto; display: grid; gap: 0.5rem; }
.fr-mega__rail-links a { font-size: 0.875rem; font-weight: 500; color: var(--fr-ink-600); text-decoration: none; }
.fr-mega__rail-links a:hover { color: var(--fr-brand-800); }

/* Mobile menu */
.fr-nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: 0;
  color: var(--fr-ink-600);
  cursor: pointer;
}
@media (min-width: 1024px) { .fr-nav__toggle { display: none; } }
.fr-mobilenav { display: none; border-top: 1px solid var(--fr-ink-100); background: #fff; max-height: calc(100vh - 4rem); overflow-y: auto; }
.fr-mobilenav.is-open { display: block; }
.fr-mobilenav a {
  display: block;
  padding: 0.75rem 1rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--fr-ink-700);
  text-decoration: none;
}
.fr-mobilenav a:hover { color: var(--fr-brand-800); }
.fr-mobilenav__group { padding: 0.25rem 0 0.5rem; border-bottom: 1px solid var(--fr-ink-100); }
.fr-mobilenav__group p { margin: 0; padding: 0.75rem 1rem 0.25rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fr-ink-400); }
.fr-mobilenav .fr-btn { margin: 0.75rem 1rem 1rem; width: calc(100% - 2rem); }

/* ==========================================================================
   FOOTER (Theme Builder global footer — divi/global-footer.html)
   ========================================================================== */
.fr-footer { background: var(--fr-ink-950); color: var(--fr-ink-300); }
.fr-footer__cta {
  display: flex; flex-direction: column; align-items: flex-start;
  justify-content: space-between; gap: 1.5rem;
  padding-block: 2.5rem;
  border-bottom: 1px solid rgb(30 41 59 / 0.8);
}
.fr-footer__cta p { margin: 0; }
.fr-footer__cta .fr-footer__cta-title {
  font-family: var(--fr-font-display); font-weight: 700;
  font-size: 1.25rem; color: #fff; margin-bottom: 0.25rem;
}
.fr-footer__cta .fr-footer__cta-sub { font-size: 0.875rem; color: var(--fr-ink-400); }
@media (min-width: 640px) { .fr-footer__cta { flex-direction: row; align-items: center; } }
.fr-footer__main { padding-block: 3.5rem; }
.fr-totop {
  display: inline-flex; align-items: center; gap: 0.25rem;
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 0.75rem; font-weight: 600; color: var(--fr-ink-400);
}
.fr-totop:hover { color: var(--fr-brand-400); }
.fr-totop .fr-icon { width: 0.875rem; height: 0.875rem; }
.fr-footer__grid { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .fr-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .fr-footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.fr-footer__tagline { color: var(--fr-brand-400); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; margin: 0.75rem 0 1rem; }
.fr-footer p { font-size: 0.875rem; color: var(--fr-ink-400); }
.fr-footer h3 { font-family: var(--fr-font-display); font-size: 0.875rem; color: #fff; margin: 0 0 1rem; }
.fr-footer ul { list-style: none; margin: 0; padding: 0; }
.fr-footer li { margin-bottom: 0.625rem; }
.fr-footer a { color: var(--fr-ink-400); font-size: 0.875rem; text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem; }
.fr-footer a:hover { color: var(--fr-brand-400); }
.fr-footer__bottom {
  padding-block: 1.5rem 2rem;
  border-top: 1px solid var(--fr-ink-800);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--fr-ink-400);
}
.fr-footer__bottom p { margin: 0; font-size: 0.75rem; color: var(--fr-ink-400); }
.fr-footer__bottom nav { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; justify-content: center; }
.fr-footer__bottom a { font-size: 0.75rem; }
@media (min-width: 640px) { .fr-footer__bottom { flex-direction: row; } }

/* ==========================================================================
   Sticky mobile CTA (optional; divi/global-footer.html includes markup + JS)
   ========================================================================== */
.fr-sticky {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 40;
  display: none;
  gap: 0.5rem;
  align-items: center;
  padding: 0.625rem 0.75rem;
  background: #fff;
  border-top: 1px solid var(--fr-ink-200);
  box-shadow: 0 -4px 12px rgb(0 0 0 / 0.08);
}
.fr-sticky.is-visible { display: flex; }
.fr-sticky .fr-btn--primary { flex: 1; }
.fr-sticky__close { background: none; border: 0; padding: 0.5rem; color: var(--fr-ink-400); cursor: pointer; }
@media (min-width: 1024px) { .fr-sticky.is-visible { display: none; } }

/* ==========================================================================
   MINI STARTER SITE — landing hero lead-form additions
   ========================================================================== */
.fr-heroform {
  background: #fff;
  border: 1px solid var(--fr-ink-200);
  border-radius: var(--fr-radius-xl);
  padding: 1.75rem;
  box-shadow: var(--fr-shadow-md);
}
.fr-heroform__head { margin-bottom: 1.25rem; }
.fr-heroform__title { font-size: 1.375rem; margin: 0.75rem 0 0.5rem; }
.fr-heroform__sub { font-size: 0.9375rem; color: var(--fr-ink-600); margin: 0; }
.fr-heroform .fr-form { gap: 1rem; }
.fr-heroform__fineprint { margin: 0.25rem 0 0; font-size: 0.8125rem; color: var(--fr-ink-500); text-align: center; }
@media (min-width: 1024px) { .fr-heroform { padding: 2rem; } }

/* Skip link (WCAG 2.4.1 bypass blocks) + mobile-nav desktop guard */
.fr-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--fr-brand-700);
  color: #fff !important;
  font-family: var(--fr-font-display);
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 var(--fr-radius) 0;
}
.fr-skip:focus { left: 0; }
@media (min-width: 1024px) { .fr-mobilenav, .fr-mobilenav.is-open { display: none; } }