/* ============================================================
   framedminds — Frame pages + the FMI page
   /frames/ · /frames/{slug}/ · /fmi/
   Version 1.1.0

   Calling design system.
   Ink #231F20 · Green #88BD40 · Deep #5E8A26 · Warm #F7F7F4 · Line #E4E3DF

   CHANGES FROM 1.0.0 — read before deploying
   ------------------------------------------------------------
   1. NOTHING is declared on `.fm-page` alone any more. Every rule
      begins with `.fm-fr`. v1.0.0 redefined `.fm-page` base
      typography, a universal margin/padding reset, ::selection,
      `a` and `img` — the exact same shell every other Calling
      page (Careers, Philosophy, Manifesto, FAQ, Affiliate, App,
      Contact, Circles, Business) declares in its own inline
      <style>. Those pages were only safe because the mu-plugin
      gated the file to /frames/. One mis-gated condition and this
      stylesheet restyles the whole site. Now it is inert
      everywhere except inside .fm-fr, even if loaded globally.

   2. Generic child classes are namespaced. `.wrap`, `.eyebrow`,
      `.measure`, `.theme`, `.n`, `.d`, `.reveal`, `.in` are all
      names BuddyBoss, LearnDash, PMPro or a future page could
      also use. All now carry the fm-fr- prefix.

   3. Reveal is now FAIL-VISIBLE. v1.0.0 set `.reveal{opacity:0}`
      in the stylesheet and relied on JS adding `.in` to bring it
      back. Two ways that ships a blank page: LiteSpeed RUCSS
      strips `.in` because the selector never appears in the
      source HTML, or the JS is deferred/blocked. Now the hiding
      rule only applies inside `.fm-fr-anim`, a class JS adds to
      the wrapper at runtime. No JS, or stripped CSS, means the
      content simply renders. Nothing can hide it.

   4. Colors stay compiled to literals (no CSS variables) so
      minify / combine / RUCSS layers cannot break a defining rule.

   5. Green #88BD40 is never used as small text — it fails WCAG AA
      on white. Text green is #5E8A26 throughout, per Constitution
      Part XII.7.
   ============================================================ */


/* ---------- shell ---------- */
.fm-fr{
  font-family:'Newsreader',Georgia,serif;
  font-size:1.125rem;line-height:1.65;
  color:#231F20;background:#FFFFFF;
  -webkit-font-smoothing:antialiased;
}
.fm-fr *,.fm-fr *::before,.fm-fr *::after{box-sizing:border-box;margin:0;padding:0}
.fm-fr ::selection{background:#88BD40;color:#231F20}
.fm-fr a{color:inherit}
.fm-fr img{max-width:100%;height:auto}
.fm-fr section,.fm-fr header{scroll-margin-top:6rem}
.fm-fr em{font-style:italic}
.fm-fr strong{font-weight:500}

.fm-fr-wrap{max-width:1120px;margin:0 auto;padding:0 clamp(1.25rem,4vw,3rem)}
.fm-fr-measure{max-width:36rem}

.fm-fr-eyebrow{
  font-family:'Archivo',system-ui,sans-serif;font-weight:700;font-size:.72rem;
  letter-spacing:.22em;text-transform:uppercase;color:#5E8A26;
}

/* ---------- reveal (fail-visible: see note 3 above) ---------- */
.fm-fr.fm-fr-anim .fm-fr-reveal{
  opacity:0;transform:translateY(18px);
  transition:opacity .7s ease,transform .7s ease;
}
.fm-fr.fm-fr-anim .fm-fr-reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .fm-fr.fm-fr-anim .fm-fr-reveal{opacity:1;transform:none;transition:none}
}

/* ---------- hero ---------- */
.fm-fr-hero{
  padding:clamp(3.5rem,8vw,6rem) 0 clamp(2rem,4vw,3rem);
  border-bottom:1px solid #E4E3DF;
}
.fm-fr-hero .fm-fr-eyebrow{display:block;margin-bottom:1.25rem}
.fm-fr-hero h1{
  font-family:'Archivo',system-ui,sans-serif;font-weight:900;text-transform:lowercase;
  letter-spacing:-.025em;line-height:1.05;color:#231F20;
  font-size:clamp(2.1rem,5.5vw,3.6rem);
  max-width:20ch;margin-bottom:1.75rem;
}
.fm-fr-lede > p{margin-bottom:1.15rem}
.fm-fr-lede > p:first-child{font-size:1.3rem;line-height:1.5;color:#231F20}
.fm-fr-lede > p:last-child{margin-bottom:0}

/* ---------- body sections ---------- */
.fm-fr section{padding:clamp(2.5rem,5vw,3.75rem) 0}
.fm-fr section + section{border-top:1px solid #E4E3DF}
.fm-fr h2{
  font-family:'Archivo',system-ui,sans-serif;font-weight:900;text-transform:lowercase;
  letter-spacing:-.02em;line-height:1.15;color:#231F20;
  font-size:clamp(1.5rem,3vw,2.05rem);
  margin-bottom:1.5rem;
}
.fm-fr p{margin-bottom:1.15rem}
.fm-fr p:last-child{margin-bottom:0}

/* ---------- recognition markers ---------- */
.fm-fr-markers{list-style:none;margin:0}
.fm-fr-markers li{
  position:relative;padding:.9rem 0 .9rem 1.75rem;
  border-top:1px solid #E4E3DF;line-height:1.5;
}
.fm-fr-markers li:last-child{border-bottom:1px solid #E4E3DF}
.fm-fr-markers li::before{
  content:"";position:absolute;left:0;top:1.45rem;
  width:.6rem;height:1px;background:#88BD40;
}

/* ---------- internal dialogue ---------- */
.fm-fr-voice{
  position:relative;
  padding:clamp(2rem,4vw,2.75rem) clamp(1.5rem,4vw,2.5rem);
  margin:.5rem 0 1.5rem;background:#F7F7F4;
}
.fm-fr-voice::before,.fm-fr-voice::after{
  content:"";position:absolute;width:1.5rem;height:1.5rem;
  border-color:#88BD40;border-style:solid;
}
.fm-fr-voice::before{top:0;left:0;border-width:2px 0 0 2px}
.fm-fr-voice::after{bottom:0;right:0;border-width:0 2px 2px 0}
.fm-fr-voice p{
  font-style:italic;font-size:1.2rem;line-height:1.55;
  color:#231F20;margin-bottom:1rem;
}
.fm-fr-voice p:last-child{margin-bottom:0}

/* ---------- closing ---------- */
.fm-fr-line{
  font-family:'Archivo',system-ui,sans-serif;font-weight:900;text-transform:lowercase;
  letter-spacing:-.02em;font-size:clamp(1.35rem,3vw,1.75rem);
  line-height:1.2;color:#5E8A26;margin-top:1.5rem;
}

/* ============================================================
   THE FMI BLOCK — the conversion unit.
   Appears on every Frame page and on /fmi/. One component so
   the offer reads identically everywhere.
   ============================================================ */
.fm-fr-cta{
  background:#231F20;color:#FFFFFF;
  padding:clamp(2.75rem,6vw,4rem) 0;border-top:0;
}
.fm-fr-cta h2{color:#FFFFFF}
.fm-fr-cta p{color:#E4E3DF}
.fm-fr-cta .fm-fr-eyebrow{color:#88BD40;display:block;margin-bottom:1.1rem}

/* instrument fact strip — what it is, how long, what it costs */
.fm-fr-meta{
  list-style:none;display:grid;gap:1px;background:#3B3634;
  border:1px solid #3B3634;margin:1.75rem 0;
}
.fm-fr-meta li{background:#231F20;padding:1rem 1.15rem}
.fm-fr-meta .fm-fr-meta-k{
  font-family:'Archivo',system-ui,sans-serif;font-weight:700;font-size:.66rem;
  letter-spacing:.18em;text-transform:uppercase;color:#88BD40;
  display:block;margin-bottom:.35rem;
}
.fm-fr-meta .fm-fr-meta-v{font-size:1rem;color:#FFFFFF;line-height:1.4}
@media(min-width:700px){.fm-fr-meta{grid-template-columns:repeat(3,1fr)}}

.fm-fr-btn{
  display:inline-block;
  font-family:'Archivo',system-ui,sans-serif;font-weight:800;font-size:.95rem;
  letter-spacing:.02em;text-decoration:none;
  background:#88BD40;color:#231F20;
  padding:.9rem 1.9rem;margin-top:.25rem;
  transition:background .2s ease,transform .2s ease;
}
.fm-fr-btn:hover,.fm-fr-btn:focus-visible{background:#FFFFFF;transform:translateY(-1px)}
.fm-fr-btn-ghost{
  display:inline-block;
  font-family:'Archivo',system-ui,sans-serif;font-weight:800;font-size:.95rem;
  text-decoration:none;color:#FFFFFF;background:transparent;
  border:1px solid #57534F;padding:.9rem 1.9rem;margin-top:.25rem;
  transition:border-color .2s ease,color .2s ease;
}
.fm-fr-btn-ghost:hover,.fm-fr-btn-ghost:focus-visible{border-color:#88BD40;color:#88BD40}
.fm-fr-btns{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:.5rem}
.fm-fr-cta-fine{margin-top:1rem;font-size:.95rem;color:#A9A5A0}
.fm-fr-cta-alt{
  margin-top:1.75rem;padding-top:1.5rem;border-top:1px solid #45403F;
  font-size:1rem;color:#E4E3DF;
}
.fm-fr-cta-alt a{color:#88BD40;text-decoration:underline;text-underline-offset:.2em}

/* light-background variant, for use mid-page on /fmi/ */
.fm-fr-panel{
  background:#F7F7F4;border:1px solid #E4E3DF;
  padding:clamp(1.75rem,4vw,2.5rem);
}

/* ---------- comparison (positioning against typing systems) ---------- */
.fm-fr-compare{
  width:100%;border-collapse:collapse;margin-top:1.75rem;
  font-size:1.02rem;
}
.fm-fr-compare th,.fm-fr-compare td{
  text-align:left;vertical-align:top;
  padding:1rem 1.15rem;border-bottom:1px solid #E4E3DF;
}
.fm-fr-compare thead th{
  font-family:'Archivo',system-ui,sans-serif;font-weight:700;font-size:.68rem;
  letter-spacing:.18em;text-transform:uppercase;color:#8A8681;
  border-bottom:1px solid #231F20;
}
.fm-fr-compare tbody th{
  font-family:'Archivo',system-ui,sans-serif;font-weight:800;font-size:.95rem;
  color:#231F20;width:26%;
}
.fm-fr-compare td:last-child{background:#F7F7F4;color:#231F20}
.fm-fr-compare-note{margin-top:1rem;font-size:.92rem;color:#57534F;line-height:1.5}
.fm-fr-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media(max-width:640px){
  .fm-fr-compare{min-width:34rem}
}

/* ---------- steps ---------- */
.fm-fr-steps{list-style:none;counter-reset:fmstep;margin-top:1.5rem}
.fm-fr-steps li{
  counter-increment:fmstep;position:relative;
  padding:1.35rem 0 1.35rem 3rem;border-top:1px solid #E4E3DF;
}
.fm-fr-steps li:last-child{border-bottom:1px solid #E4E3DF}
.fm-fr-steps li::before{
  content:counter(fmstep,decimal-leading-zero);
  position:absolute;left:0;top:1.5rem;
  font-family:'Archivo',system-ui,sans-serif;font-weight:800;font-size:.8rem;
  letter-spacing:.05em;color:#5E8A26;
}
.fm-fr-steps h3{
  font-family:'Archivo',system-ui,sans-serif;font-weight:800;text-transform:lowercase;
  letter-spacing:-.015em;font-size:1.15rem;margin-bottom:.35rem;color:#231F20;
}
.fm-fr-steps p{font-size:1.02rem;color:#57534F;margin:0}

/* ---------- faq ---------- */
.fm-fr-faq{border-top:1px solid #E4E3DF;margin-top:1.5rem}
.fm-fr-faq details{border-bottom:1px solid #E4E3DF}
.fm-fr-faq summary{
  cursor:pointer;list-style:none;padding:1.15rem 2rem 1.15rem 0;position:relative;
  font-family:'Archivo',system-ui,sans-serif;font-weight:700;font-size:1rem;
  color:#231F20;
}
.fm-fr-faq summary::-webkit-details-marker{display:none}
.fm-fr-faq summary::after{
  content:"";position:absolute;right:.35rem;top:1.55rem;
  width:.7rem;height:.7rem;border-right:2px solid #5E8A26;border-bottom:2px solid #5E8A26;
  transform:rotate(45deg);transition:transform .2s ease;
}
.fm-fr-faq details[open] summary::after{transform:rotate(-135deg);top:1.75rem}
.fm-fr-faq summary:focus-visible{outline:2px solid #5E8A26;outline-offset:3px}
.fm-fr-faq .fm-fr-faq-a{padding:0 0 1.35rem;font-size:1.05rem;color:#57534F}
.fm-fr-faq .fm-fr-faq-a p{margin-bottom:.85rem}
.fm-fr-faq .fm-fr-faq-a p:last-child{margin-bottom:0}

/* ---------- related ---------- */
.fm-fr-related ul{list-style:none;display:grid;gap:1px;background:#E4E3DF;border:1px solid #E4E3DF}
.fm-fr-related li{background:#FFFFFF;padding:1.25rem 1.5rem}
.fm-fr-related .fm-fr-name{
  font-family:'Archivo',system-ui,sans-serif;font-weight:800;font-size:1rem;
  display:block;margin-bottom:.2rem;
}
.fm-fr-related .fm-fr-desc{font-size:1rem;color:#57534F}
.fm-fr-related a{text-decoration:none;color:#5E8A26}
.fm-fr-related a:hover{text-decoration:underline;text-underline-offset:.2em}
@media(min-width:700px){.fm-fr-related ul{grid-template-columns:repeat(3,1fr)}}
.fm-fr-all{margin-top:1.75rem;font-size:1rem}
.fm-fr-all a{color:#5E8A26;text-decoration:underline;text-underline-offset:.2em}

/* ---------- index (the /frames/ hub) ---------- */
.fm-fr-index{list-style:none;margin-top:2rem}
.fm-fr-index li{padding:1.5rem 0;border-top:1px solid #E4E3DF}
.fm-fr-index li:last-child{border-bottom:1px solid #E4E3DF}
.fm-fr-index h3{
  font-family:'Archivo',system-ui,sans-serif;font-weight:800;text-transform:lowercase;
  letter-spacing:-.015em;font-size:1.3rem;line-height:1.2;margin-bottom:.4rem;color:#231F20;
}
.fm-fr-index h3 a{color:#5E8A26;text-decoration:none}
.fm-fr-index h3 a:hover{text-decoration:underline;text-underline-offset:.2em}
.fm-fr-index .fm-fr-theme{
  font-family:'Archivo',system-ui,sans-serif;font-weight:700;font-size:.68rem;
  letter-spacing:.18em;text-transform:uppercase;color:#8A8681;
  display:block;margin-bottom:.5rem;
}
.fm-fr-index p{font-size:1.05rem;color:#57534F;margin:0}

/* ---------- ownership / IP line ---------- */
.fm-fr-note{
  margin-top:2.25rem;padding-top:1.25rem;border-top:1px solid #E4E3DF;
  font-size:.88rem;line-height:1.55;color:#8A8681;max-width:44rem;
}
.fm-fr-note a{color:#5E8A26}
.fm-fr-cta .fm-fr-note{border-top-color:#45403F;color:#8A8681}

/* ---------- closing section hook ----------
   .fm-fr-close carries no visual rules of its own; the tagline is
   styled by .fm-fr-line. Kept as a stable hook so the closing beat
   can be targeted later (print styles, share images) without
   touching markup on twelve pages. */
.fm-fr-close .fm-fr-line{margin-top:1.5rem}

/* ---------- comparison page: category label ---------- */
.fm-fr-cat{
  font-family:'Archivo',system-ui,sans-serif;font-weight:800;
  text-transform:lowercase;letter-spacing:-.015em;
  font-size:1.15rem;color:#231F20;
  margin:2.5rem 0 .35rem;
}
.fm-fr-cat:first-of-type{margin-top:1.5rem}
.fm-fr-cat-sub{font-size:1rem;color:#57534F;margin-bottom:0}

/* ---------- comparison page: the closest-neighbour callout ---------- */
.fm-fr-flag{
  border-left:3px solid #88BD40;background:#F7F7F4;
  padding:clamp(1.25rem,3vw,1.75rem);margin:1.5rem 0;
}
.fm-fr-flag p{font-size:1.05rem;margin-bottom:.85rem}
.fm-fr-flag p:last-child{margin-bottom:0}

/* ---------- crisis support line ----------
   Sits above the ownership note inside the dark CTA band on every
   Frame page. Deliberately quiet: a reader in difficulty should find
   it without a reader who is fine being alarmed by it. Present on all
   twelve for consistency, not only on the three heaviest, so it reads
   as standing policy rather than a warning attached to a topic. */
.fm-fr-support{
  margin-top:1.75rem;padding-top:1.25rem;
  border-top:1px solid #45403F;
  font-size:.92rem;line-height:1.55;color:#A9A5A0;max-width:44rem;
}
.fm-fr-support a{color:#88BD40;text-decoration:underline;text-underline-offset:.2em}
.fm-fr-cta .fm-fr-support + .fm-fr-note{margin-top:1.1rem;border-top:0;padding-top:0}

/* ============================================================
   NARROW VIEWPORT / APP WEBVIEW GUARD   (added v1.5.0)

   The Frame pages are public and built for search, so most traffic
   arrives in a mobile browser where the theme behaves. But a member
   can reach them from inside the BuddyBoss app, and there the same
   failure that hit /reflections/ applies: the theme reserves room for
   the BuddyPanel rail on .site-content, the app never draws the rail,
   and the offset survives — pushing every section right and running
   the right edge off screen.

   Nothing above depends on the theme for width, so this block only has
   to neutralise the wrappers. It keys on viewport width alone, with no
   body class and no PHP detection, so it cannot be defeated by a
   detection miss the way the first attempt at the Reflections fix was.
   ============================================================ */

@media (max-width: 900px) {

  .fm-fr,
  .fm-page:has(.fm-fr) #page,
  .fm-page:has(.fm-fr) #content {
    max-width: 100%;
  }

  body:has(.fm-fr) #page,
  body:has(.fm-fr) #content,
  body:has(.fm-fr) .site-content,
  body:has(.fm-fr) .site-content-wrap,
  body:has(.fm-fr) .bb-grid,
  body:has(.fm-fr) .bb-grid-cell,
  body:has(.fm-fr) .entry-content,
  body:has(.fm-fr) .container,
  body:has(.fm-fr) #primary {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    float: none !important;
    left: 0 !important;
  }

  /* One over-wide child reintroduces the whole problem. The comparison
     table is deliberately wider than the viewport and lives inside its
     own .fm-fr-scroll container, so it is exempt. */
  .fm-fr > section,
  .fm-fr > header {
    overflow-x: hidden;
  }

  .fm-fr .fm-fr-scroll {
    overflow-x: auto;
  }

  /* Tell people the table scrolls. Without this it silently clips and
     the last column looks missing rather than off-screen. */
  .fm-fr-scroll-hint {
    display: block;
    font-family: 'Archivo', system-ui, sans-serif;
    font-weight: 700;
    font-size: .68rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #8A8681;
    margin-bottom: .6rem;
  }
}

/* Hidden on anything wide enough to show the table whole. */
.fm-fr-scroll-hint { display: none; }

/* ---------- breadcrumbs ----------
   Injected above the page markup by the mu-plugin, so this is the one
   Frame-page component that lives OUTSIDE .fm-fr and needs its own
   base styling rather than inheriting the shell. */
.fm-fr-crumbs{
  font-family:'Newsreader',Georgia,serif;
  background:#FFFFFF;
  border-bottom:1px solid #E4E3DF;
  padding:1rem 0 .9rem;
}
.fm-fr-crumbs-inner{
  max-width:1120px;margin:0 auto;
  padding:0 clamp(1.25rem,4vw,3rem);
  font-size:.86rem;line-height:1.5;color:#8A8681;
}
.fm-fr-crumbs a{color:#5E8A26;text-decoration:none}
.fm-fr-crumbs a:hover{text-decoration:underline;text-underline-offset:.2em}
.fm-fr-crumbs .last,
.fm-fr-crumbs [aria-current="page"]{color:#57534F}
.fm-fr-crumbs .separator{margin:0 .45rem;color:#B8B5B1}

/* Trail can run long on a phone; let it wrap rather than clip. */
@media (max-width:640px){
  .fm-fr-crumbs{padding:.75rem 0 .7rem}
  .fm-fr-crumbs-inner{font-size:.8rem;word-break:break-word}
}