/* global React, FullDashboard */

/* ============================================================
   DIRECTION B · FULL PAGE
   Stacked Manifesto, evolved.
   Hero · Trust · Problem · Tracks · Trailblazers · Proof · CTA · Footer
   ============================================================ */

function DirectionBFull({ accent, motion }) {
  const cssVars = { "--accent": accent };
  return (
    <div
      className={"dirBF " + (motion ? "has-motion" : "no-motion")}
      style={cssVars}
      data-screen-label="Transform365 · Full Page"
    >
      <style>{dirBFStyles}</style>
      <BFNav />
      <BFHero motion={motion} />
      <BFTicker />
      <BFTrust />
      <BFProblem />
      <BFTracks />
      <BFTrailblazers />
      <BFProof />
      <BFFAQ />
      <BFFinalCTA />
      <BFFooter />
    </div>
  );
}

/* ── NAV ───────────────────────────────────────────────── */
function BFNav() {
  return (
    <nav className="bf-nav">
      <div className="bf-nav-inner">
        <div className="bf-nav-brand">
          <span>Ideal State</span>
          <span className="bf-nav-divider">/</span>
          <span className="bf-nav-product">Transform365<sup className="bf-tm">™</sup></span>
        </div>
        <div className="bf-nav-links">
          <a href="#how">How it works</a>
          <a href="#proof">Case studies</a>
        </div>
        <a href="#assess" className="bf-nav-cta">
          Schedule a call
          <span className="arrow" aria-hidden="true">→</span>
        </a>
      </div>
    </nav>
  );
}

/* ── HERO ──────────────────────────────────────────────── */
function BFHero({ motion }) {
  return (
    <section className="bf-hero">
      <div className="bf-hero-grid">
        <div className="bf-hero-l">
          <div className="bf-eyebrow">
            <span className="dot" />
            <span>A managed service from Ideal State · est. 2016</span>
          </div>

          <h1 className="bf-headline">
            <span className="line-1">Your <em className="ed-italic">people</em> are ready for AI.</span>
            <span className="line-2">But is your <em className="ed-italic">organization</em>?</span>
          </h1>

          <p className="bf-lede">
            Most organizations are somewhere between curious and overwhelmed. A few Copilot licenses here, some ChatGPT and Claude there, an AI strategy that still doesn't feel right.
          </p>

          <p className="bf-lede bf-lede-2">
            The gap isn't technological, it's organizational. The people, governance, and know-how to make AI work on your terms.
          </p>

          <p className="bf-lede bf-lede-2 bf-lede-emphasis">
            <strong>Transform365<sup className="bf-tm">™</sup></strong> is the managed service that builds that capability, using the same human-centered methodology we've applied to digital transformation since 2016.
          </p>

          <div className="bf-cta-row">
            <a href="#assess" className="bf-cta primary">
              Schedule a call
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
            </a>
            <a href="#how" className="bf-cta ghost">Transform365 explained</a>
          </div>

        </div>

        <div className="bf-hero-r">
          <FullDashboard motion={motion} />
        </div>
      </div>
    </section>
  );
}

/* ── TICKER ────────────────────────────────────────────── */
function BFTicker() {
  const tracks = [
    "FOUNDATIONS",
    "ADOPTION & ENABLEMENT",
    "GOVERNANCE & PROGRAM",
    "AI SOLUTIONS DELIVERY",
  ];
  const items = tracks.concat(tracks).concat(tracks);
  return (
    <section className="bf-ticker">
      <div className="bf-ticker-inner">
        <span className="bf-ticker-l">Four parallel tracks · running in concert ·</span>
        <div className="bf-ticker-mask">
        <div className="bf-ticker-track">
          {items.map((t, i) => (
            <span key={i} className="bf-ticker-item">
              <span className="num">{String((i % 4) + 1).padStart(2, "0")}</span>
              <span className="t">{t}</span>
              <span className="sep">★</span>
            </span>
          ))}
        </div>
        </div>
      </div>
    </section>
  );
}

/* ── TRUST STRIP ───────────────────────────────────────── */
function BFTrust() {
  const logos = [
    { src: "assets/clients/model-group.png", alt: "Model Group" },
    { src: "assets/clients/catalight.png", alt: "Catalight" },
    { src: "assets/clients/la-lgbt.png", alt: "LA LGBT Center" },
    { src: "assets/clients/rwjf.png", alt: "Robert Wood Johnson" },
    { src: "assets/clients/wkkf.png", alt: "W.K. Kellogg" },
    { src: "assets/clients/alvin-ailey.png", alt: "Alvin Ailey" },
    { src: "assets/clients/cff.png", alt: "CFF" },
    { src: "assets/clients/selc.webp", alt: "SELC" },
  ];
  return (
    <section className="bf-trust">
      <div className="bf-section-inner">
        <div className="bf-trust-row">
          <div className="bf-trust-l">
            <span className="bf-eyebrow-line">Recognized partner · Trusted since 2016</span>
            <p className="bf-trust-lead">
              Ideal State is a <em>Microsoft AI Cloud Partner</em> and <em>SBA-certified woman-owned small business</em>. We've guided more than 250 companies and nonprofits from 50 to 5,000 people through complex Microsoft 365 and AI transformation projects.
            </p>
            <div className="bf-trust-badges">
              <div className="bf-trust-badge" aria-label="Microsoft Solutions Partner — Modern Work">
                <img src="assets/microsoft-partner.png" alt="Microsoft Solutions Partner — Modern Work" />
              </div>
              <div className="bf-trust-badge bf-trust-badge--wosb" aria-label="WOSB Certified — U.S. Small Business Administration">
                <img src="assets/wosb-certified.png" alt="WOSB Certified — U.S. Small Business Administration" />
              </div>
            </div>
          </div>
          <div className="bf-trust-r">
            <div className="bf-trust-logos">
              {logos.map((l, i) => (
                <div className="bf-logo" key={i}>
                  <img src={l.src} alt={l.alt} />
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ── PROBLEM ───────────────────────────────────────────── */
function BFProblem() {
  const symptoms = [
    "Staff using AI tools you don't know about",
    "An AI strategy that's been drafted and redrafted but never finalized",
    "A small IT team carrying the weight of everything",
    "Leaders who can't articulate what AI has produced, or should produce",
  ];
  return (
    <section className="bf-problem" id="problem">
      <div className="bf-section-inner">
        <div className="bf-problem-grid">
          <div className="bf-problem-l">
            <span className="bf-eyebrow-line">The pattern</span>
            <h2 className="bf-h2">
              Why AI isn't <em className="ed-italic">working</em> yet.
            </h2>
            <p className="bf-lede sm">
              The pattern looks different at every organization, but it leads to the same place. Maybe you purchased Copilot licenses and ran a training, and six months later the transformation everyone promised is somewhere between modest and invisible.
            </p>
            <p className="bf-lede sm bf-lede-2">
              Maybe your team is using ChatGPT and Claude on their own and you have no visibility into what's happening. Maybe you're still trying to figure out where to start. The common thread: the tools are here, but the organization isn't ready for them.
            </p>
            <blockquote className="bf-quote">
              <span className="mark">“</span>
              <p>Organizational factors like culture, manager support, and talent practices account for more than <em className="accent">2x</em> the AI impact of individual effort alone.</p>
              <cite>— Microsoft 2026 Work Trend Index</cite>
            </blockquote>
            <p className="bf-lede sm">
              This isn't a technology problem. It's an organizational one. Your people need more than access to tools. They need governance, enablement, and a way forward that's designed around how they actually work. That's why Transform365 exists.
            </p>
          </div>
          <div className="bf-problem-r">
            <span className="bf-eyebrow-line">Common symptoms</span>
            <ul className="bf-symptoms">
              {symptoms.map((s, i) => (
                <li key={i}>
                  <span className="n">{String(i + 1).padStart(2, "0")}</span>
                  <span className="t">{s}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ── TRACKS ────────────────────────────────────────────── */
function BFTracks() {
  const tracks = [
    {
      n: "01",
      h: "Foundations",
      sub: "Honest baseline · governed environment",
      b: "We start where you are. An eight-domain assessment gives your leadership a clear, honest picture of what's working, what's not, and what to do first. From there we configure M365 governance, stand up your AI Adoption Hub, and identify the first cohort of AI builders: your Trailblazers.",
      tags: ["8-domain assessment", "AI Adoption Hub", "M365 governance", "Trailblazer launch"],
    },
    {
      n: "02",
      h: "Adoption & Enablement",
      sub: "The human side · compounding wins",
      b: "The human side. The Trailblazers Program turns AI-curious staff into capable builders who ship real solutions. Your AI Adoption Hub in Teams becomes the place where people share what's working, ask questions, and learn from each other. Adoption that compounds, month by month.",
      tags: ["Trailblazers Program", "Adoption Hub in Teams", "Real wins for everyone"],
    },
    {
      n: "03",
      h: "Governance & Program Management",
      sub: "The part that makes everyone safe",
      b: "The part that makes everyone feel safe moving forward. Agent lifecycle management, usage monitoring, data hygiene, and security policies designed around how your organization actually works. We build a rhythm your team can carry forward on their own.",
      tags: ["Agent lifecycle", "Usage monitoring", "Data hygiene", "Security"],
    },
    {
      n: "04",
      h: "AI Solutions Delivery",
      sub: "Custom agents · measured outcomes",
      b: "When your organization is ready for custom agents and automation, we scope, build, and deploy them on the foundation we've built together. Every solution is tracked and measured so your leadership can see what AI is actually producing.",
      tags: ["Custom agents", "Automation", "Measurement"],
    },
  ];

  return (
    <section className="bf-tracks" id="how">
      <div className="bf-section-inner">
        <div className="bf-tracks-head">
          <span className="bf-eyebrow-line">What we provide</span>
          <h2 className="bf-h2">
            Four parallel tracks.<br/>
            <em className="ed-italic">One</em> trusted partner.
          </h2>
          <p className="bf-lede sm">
            Transform365 pairs your organization with a dedicated team of senior consultants who build alongside you, not just advise. Four tracks run in parallel so that governance, adoption, and solutions move forward together rather than waiting on each other.
          </p>
        </div>

        <div className="bf-tracks-grid">
          {tracks.map((t, i) => (
            <article className="bf-track" key={i}>
              <div className="bf-track-h">
                <span className="num">{t.n}</span>
                <span className="lbl">TRACK</span>
              </div>
              <h3 className="bf-track-title">{t.h}</h3>
              <div className="bf-track-sub">{t.sub}</div>
              <p className="bf-track-body">{t.b}</p>
              <div className="bf-track-tags">
                {t.tags.map((tg, j) => <span key={j} className="bf-tag">{tg}</span>)}
              </div>
            </article>
          ))}
        </div>
        <div className="bf-tracks-cta">
          <a href="#" className="bf-cta primary">
            Download Transform365 one-pager
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M12 3v12"></path><path d="m7 10 5 5 5-5"></path><path d="M5 21h14"></path></svg>
          </a>
        </div>
      </div>
    </section>
  );
}

/* ── TRAILBLAZERS SPOTLIGHT ────────────────────────────── */
function BFTrailblazers() {
  return (
    <section className="bf-spotlight" id="trailblazers">
      <div className="bf-section-inner">
        <div className="bf-spot-grid">
          <div className="bf-spot-l">
            <span className="bf-eyebrow-line dark">Our signature program</span>
            <h2 className="bf-h2 on-dark bf-h2-stack">
              <span>We don't just train users.</span>
              <span>We develop <em className="ed-italic accent">AI builders</em>.</span>
            </h2>
          </div>
          <div className="bf-spot-r">
            <p className="bf-body on-dark">
              Most AI adoption efforts stop at training. We take it further.
            </p>
            <p className="bf-body on-dark">
              The <strong>Trailblazers Program</strong> takes AI-curious employees and turns them into capable AI builders: people shipping real, vetted solutions that change how work gets done. Graduates mentor the next cohort and become the AI talent your organization will rely on long after our engagement ends.
            </p>

            <div className="bf-case-snippet">
              <div className="bf-case-stat">
                <div className="num">80<span className="u">%</span></div>
                <div className="lbl">Less time on HR<br/>info requests</div>
              </div>
              <div className="bf-case-body">
                <em className="ed-italic">Trailblazers: the spark that lights the fire</em>
                <p>One Trailblazer shipped a SharePoint-based knowledge-base agent in <strong>eight weeks</strong> that now answers staff HR questions across all twenty-five departments. No IT background, never built an AI agent before. As a graduate, she's now advising other departments on how to build similar tools.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ── PROOF (polished) ──────────────────────────────────── */
function BFProof() {
  const cases = [
    {
      tag: "CASE STUDY · 01",
      stat: "82",
      unit: "%",
      lbl: "active usage",
      h: "A Copilot habit on $1.5B in active projects.",
      b: "A national real estate development firm turned Copilot from a feature into a daily habit, with 82% active usage, a 59-member internal Copilot community, and construction-specific use cases in production.",
      logo: "assets/clients/model-group.png",
      client: "Model Group · Urban dev",
      featured: true,
    },
    {
      tag: "CASE STUDY · 02",
      stat: "0",
      unit: "",
      lbl: "PHI incidents",
      h: "Healthcare AI governance, done right.",
      b: "A behavioral health organization migrated 18 departments onto a governed M365 environment, with Purview policies designed for patient-data compliance and zero PHI incidents during the migration.",
      logo: "assets/clients/catalight.png",
      client: "Catalight · Behavioral health",
    },
    {
      tag: "CASE STUDY · 03",
      stat: "+500",
      unit: "%",
      lbl: "Copilot usage",
      h: "From digital chaos to AI-ready operations.",
      b: "One of the world's largest LGBTQ+ organizations consolidated 548 Teams, 740 SharePoint sites, and scattered HIPAA-regulated content into a governed environment, with Copilot and Teams engagement up across the board.",
      logo: "assets/clients/la-lgbt.png",
      client: "LA LGBT Center · Nonprofit",
    },
    {
      tag: "CASE STUDY · 04",
      stat: "25",
      unit: "+",
      lbl: "departments migrated",
      h: "From scattered files to intelligent knowledge.",
      b: "A major philanthropy migrated 25+ departments from Dropbox, Google, and on-prem servers to Microsoft 365 and launched enterprise search. Now AI agents are surfacing knowledge from across the organization, bringing years of institutional expertise to life.",
      logo: "assets/clients/rwjf.png",
      client: "RWJF · Foundations",
    },
  ];

  return (
    <section className="bf-proof" id="proof">
      <div className="bf-section-inner">
        <div className="bf-proof-head">
          <span className="bf-eyebrow-line">Proof</span>
          <h2 className="bf-h2 large">
            Four organizations.<br/>
            Same managed service.<br/>
            <em className="ed-italic accent">Different shapes of win.</em>
          </h2>
        </div>

        <div className="bf-proof-grid">
          {cases.map((c, i) => (
            <article key={i} className={"bf-pcard " + (c.featured ? "featured" : "")}>
              <div className="bf-pcard-tag">{c.tag}</div>
              <div className="bf-pcard-stat">
                <span className="num">{c.stat}<span className="u">{c.unit}</span></span>
                <span className="lbl">{c.lbl}</span>
              </div>
              <h3 className="bf-pcard-h">{c.h}</h3>
              <p className="bf-pcard-b">{c.b}</p>
              <div className="bf-pcard-foot">
                <img src={c.logo} alt={c.client} />
                <span>{c.client}</span>
              </div>
            </article>
          ))}
        </div>

      </div>
    </section>
  );
}

/* ── FINAL CTA ─────────────────────────────────────────── */
function BFFAQ() {
  const faqs = [
    { q: "We already have an MSP. How is this different?", a: "Your MSP keeps your systems running. We make sure your organization knows what to do with them. Transform365 sits above the infrastructure layer. We focus on governance, adoption, and AI solutions that your MSP isn't scoped to deliver. Most of our clients keep their MSP in place. We work alongside them." },
    { q: "What if we haven't purchased Copilot or any AI licenses yet?", a: "That's fine. Many of the organizations we work with start without any AI-specific licenses. The assessment and foundations work helps you understand what you actually need before you spend. We'd rather you buy the right things than buy everything." },
    { q: "How much time does this require from our team?", a: "We designed Transform365 for organizations with small, stretched teams. Your leadership participates in a monthly check-in and your Trailblazers commit a few hours a week during their cohort. Beyond that, our team carries the weight." },
    { q: "How long before we see results?", a: "Within the first 30 days, most clients have governance in place, an Adoption Hub live in Teams, and their first Trailblazer cohort underway. Solutions start shipping by month two." },
    { q: "Is this just for Microsoft 365?", a: "Transform365 focuses on the Microsoft ecosystem because that's where most of our client's critical data lives and where the AI capabilities are evolving fastest. But the governance frameworks and adoption practices we build are platform-agnostic. If your team is using ChatGPT, Claude or other tools alongside Copilot, we account for that." },
    { q: "What's the minimum commitment?", a: "Transform365 is a subscription-based service with a three-month minimum commitment. That gives us enough time to complete your assessment, stand up governance, and get your first Trailblazer cohort moving. After that, you can cancel anytime. Most clients stay because the value compounds month over month, but you're never locked in." },
    { q: "What happens when the engagement ends?", a: "You keep everything we build: the governance framework, the Adoption Hub, trained Trailblazers and the program playbook, and the AI solutions pipeline. The goal is to leave your organization with the internal capability to carry the work forward." },
  ];
  return (
    <section className="bf-faq" id="faq">
      <div className="bf-section-inner">
        <div className="bf-faq-head">
          <span className="bf-eyebrow-line">Q&amp;A</span>
          <h2 className="bf-h2">Questions we hear<br/><em className="ed-italic">every</em> week.</h2>
        </div>
        <div className="bf-faq-list">
          {faqs.map((f, i) => (
            <details key={i} className="bf-faq-item" {...(i === 0 ? {open: true} : {})}>
              <summary><span>{f.q}</span><span className="plus" aria-hidden="true">+</span></summary>
              <p>{f.a}</p>
            </details>
          ))}
        </div>
      </div>
    </section>
  );
}

function BFFinalCTA() {
  return (
    <section className="bf-finalcta" id="assess">
      <div className="bf-section-inner">
        <div className="bf-finalcta-grid">
          <div className="bf-finalcta-l">
            <span className="bf-eyebrow-line">Let's get started</span>
            <h2 className="bf-h2">
              Find out where you<br/>
              <em className="ed-italic accent">actually</em> stand.
            </h2>
          </div>
          <div className="bf-finalcta-r">
            <p className="bf-body big">
              Want to take a test drive? Our free AI Readiness Assessment gives your leadership a clear, honest picture of your organization's AI readiness across <strong>five domains</strong>. No generic benchmarks. Just a customized read on what's working, what's blocking, and what to do in the next 30 days.
            </p>
            <p className="bf-body">
              Five business days. One dashboard. An expert-led conversation to unpack the results.
            </p>
            <div className="bf-cta-row">
              <a href="/assessment" className="bf-cta primary big">
                Get your free assessment
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ── FOOTER ────────────────────────────────────────────── */
function BFFooter() {
  return (
    <footer className="bf-footer">
      <div className="bf-section-inner">
        <div className="bf-footer-top">
          <div className="bf-footer-brand">
            <div className="bf-footer-logo">
              <img src="assets/idealstate-logo-white.png" alt="Ideal State" />
            </div>
            <p>Partners in human-centered digital transformation since 2016.</p>
            <a href="#assess" className="bf-cta primary bf-footer-cta">
              Schedule a call
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
            </a>
          </div>
          <div className="bf-footer-cols">
            <div className="bf-footer-col">
              <h4>Ideal State</h4>
              <a href="#about">About</a>
              <a href="#contact">Contact</a>
              <a href="#insights">Insights</a>
            </div>
            <div className="bf-footer-col">
              <h4>Follow</h4>
              <div className="bf-footer-social">
                <a href="#linkedin" aria-label="LinkedIn" className="bf-footer-social-icon">
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M20.45 20.45h-3.55v-5.57c0-1.33-.03-3.04-1.85-3.04-1.86 0-2.14 1.45-2.14 2.95v5.66H9.36V9h3.41v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.06 2.06 0 1 1 0-4.12 2.06 2.06 0 0 1 0 4.12zM7.12 20.45H3.56V9h3.56v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.72v20.56C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.72V1.72C24 .77 23.2 0 22.22 0z"/></svg>
                </a>
                <a href="#x" aria-label="X" className="bf-footer-social-icon">
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
                </a>
              </div>
              <a href="mailto:transform365@idealstate.co" className="bf-footer-email">transform365@idealstate.co</a>
            </div>
          </div>
        </div>
        <div className="bf-footer-meta">
          <span>© 2026 Ideal State LLC. All Rights Reserved.</span>
          <span><a href="#terms">Terms</a> · <a href="#privacy">Privacy</a></span>
        </div>
      </div>
    </footer>
  );
}

window.DirectionBFull = DirectionBFull;

/* ─────────────────── STYLES ─────────────────── */
const dirBFStyles = `
.dirBF { background: var(--white); color: var(--navy); font-family: var(--font-body); }
.bf-section-inner { max-width: 1320px; margin: 0 auto; padding: 0 56px; }

.ed-italic { font-family: var(--font-display); font-style: italic; font-weight: 400; }
.bf-eyebrow-line {
  font-family: var(--font-display); font-weight: 600;
  font-size: 12px; color: var(--soft-blue);
  text-transform: uppercase; letter-spacing: 0.18em;
  display: inline-flex; align-items: center; gap: 14px;
  margin-bottom: 18px;
}
.bf-eyebrow-line.dark { color: var(--accent); }
.bf-eyebrow-line::before {
  content: "";
  display: inline-block;
  width: 30px; height: 8px;
  background:
    linear-gradient(currentColor, currentColor) top left / 30px 1.5px no-repeat,
    linear-gradient(var(--accent), var(--accent)) bottom left / 16px 1.5px no-repeat;
  opacity: 1;
  flex: 0 0 auto;
}
.bf-h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  line-height: 1.04; letter-spacing: -0.025em;
  color: var(--navy); margin: 0 0 36px;
  text-wrap: balance;
}
.bf-h2.large { font-size: clamp(2.6rem, 5.5vw, 4.6rem); }
.bf-h2.huge { font-size: clamp(3rem, 6.5vw, 5.6rem); line-height: 0.98; }
.bf-h2.on-dark { color: var(--cream); }
.bf-h2 em.accent, .bf-h2 .ed-italic.accent { color: var(--accent); }
.bf-body { font-size: 1.13rem; line-height: 1.7; color: var(--gray); text-wrap: pretty; margin: 0 0 16px; }
.bf-body.big { font-size: 1.3rem; line-height: 1.6; color: var(--navy); }
.bf-body.on-dark { color: var(--cream); opacity: 0.86; }
.bf-body strong { color: var(--navy); font-weight: 600; }
.bf-body.on-dark strong { color: var(--white); }
.bf-lede { font-size: 1.3rem; line-height: 1.6; color: var(--gray); max-width: 600px; text-wrap: pretty; margin: 0; }
.bf-lede.sm { font-size: 1.16rem; max-width: 640px; }
.bf-lede em, .bf-body em { font-family: var(--font-display); font-style: italic; font-weight: 500; color: var(--navy); }
.bf-lede-emphasis {
  margin-top: 32px !important;
  padding-top: 26px;
  border-top: 1px solid rgba(14,40,65,0.18);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.45rem, 2.2vw, 1.75rem);
  line-height: 1.35;
  letter-spacing: -0.012em;
  color: var(--navy);
  max-width: 620px;
  text-wrap: pretty;
}
.bf-lede-emphasis strong {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  color: var(--navy);
}

/* NAV */
.bf-nav { background: var(--white); border-bottom: 1px solid var(--light-gray); position: sticky; top: 0; z-index: 50; }
.bf-nav-inner {
  max-width: 1320px; margin: 0 auto; padding: 18px 56px;
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
}
.bf-nav-brand { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--navy); letter-spacing: 0.04em; text-transform: uppercase; display: inline-flex; gap: 8px; }
.bf-nav-divider { color: var(--accent); font-weight: 400; }
.bf-nav-product { color: var(--accent); }
.bf-tm { font-size: 0.55em; vertical-align: super; line-height: 0; margin-left: 1px; font-weight: 500; }
.bf-nav-links { display: flex; gap: 28px; }
.bf-nav-links a { font-family: var(--font-display); font-weight: 500; font-size: 14px; color: var(--navy); text-decoration: none; }
.bf-nav-links a:hover { color: var(--accent); }
.bf-nav-cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 18px; border-radius: 9999px;
  background: var(--accent); color: var(--white);
  font-family: var(--font-display); font-weight: 600; font-size: 13px;
  text-decoration: none; border: 2px solid var(--accent);
  transition: all 200ms;
}
.bf-nav-cta:hover { background: var(--navy); color: var(--white); border-color: var(--navy); gap: 14px; }

/* HERO */
.bf-hero {
  background: var(--cream);
  position: relative; overflow: hidden;
  padding: 88px 0 96px;
}
.bf-hero::before {
  content: ""; position: absolute;
  top: 0; right: 0; bottom: 0; width: 38%;
  background: var(--navy);
  z-index: 0;
}
.bf-hero-grid {
  position: relative; z-index: 1;
  max-width: 1320px; margin: 0 auto; padding: 0 56px;
  display: grid; grid-template-columns: 1fr 1.05fr;
  gap: 56px; align-items: start;
}
.bf-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 600;
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--navy);
}
.bf-eyebrow .dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent), white 70%);
}
.bf-headline {
  margin: 28px 0 36px;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.6rem, 5.6vw, 4.8rem);
  line-height: 1.04; letter-spacing: -0.025em;
  color: var(--navy);
  text-wrap: balance;
  display: flex; flex-direction: column; gap: 24px;
}
.bf-headline .line-1 { color: var(--navy); }
.bf-headline .line-2 { color: var(--navy); }
.bf-headline em.ed-italic { color: var(--navy); }
.bf-h2-stack { display: flex; flex-direction: column; gap: 24px; }
.bf-headline em.accent {
  font-family: var(--font-display);
  font-style: italic; font-weight: 400;
  color: var(--accent);
}
.bf-stack {
  margin: 28px 0 0;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(3.5rem, 9vw, 7.4rem);
  line-height: 0.92; letter-spacing: -0.04em;
  color: var(--navy);
}
.bf-stack .row { display: flex; align-items: baseline; gap: 24px; position: relative; }
.bf-stack .row.outdent { padding-left: 1.5em; }
.bf-stack .word.accent { color: var(--accent); position: relative; }
.bf-stack .word.accent::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0.08em;
  height: 0.08em; background: var(--accent); opacity: 0.18; border-radius: 2px;
}
.bf-stack .meta {
  font-family: var(--font-display); font-weight: 500;
  font-size: 11px; color: var(--soft-blue);
  text-transform: uppercase; letter-spacing: 0.18em;
  align-self: center;
  border: 1px solid rgba(14,40,65,0.18);
  padding: 4px 10px; border-radius: 9999px; white-space: nowrap;
}
.bf-stack .row.connector { height: 70px; align-items: center; gap: 16px; margin: 4px 0; }
.bf-arrow { width: 80px; height: 56px; color: var(--accent); flex-shrink: 0; }
.bf-stack .ed-italic.to {
  font-family: var(--font-display); font-style: italic; font-weight: 300;
  font-size: 0.4em; color: var(--gray); letter-spacing: -0.02em;
}
.bf-cta-row { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.bf-cta {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 600; font-size: 0.98rem;
  text-decoration: none;
  padding: 16px 24px; border-radius: 9999px;
  transition: all 220ms cubic-bezier(0.2,0,0,1);
}
.bf-cta.primary { background: var(--navy); color: var(--white); border: 2px solid var(--navy); }
.bf-cta.primary:hover { background: var(--accent); color: var(--white); border-color: var(--accent); transform: translateY(-2px); }
.bf-cta.primary.big { padding: 20px 30px; font-size: 1.05rem; }
.bf-cta.ghost { background: transparent; color: var(--navy); border: 2px solid rgba(14,40,65,0.2); }
.bf-cta.ghost:hover { border-color: var(--navy); }
.bf-cta.on-dark { background: var(--accent); color: var(--navy); border: 2px solid var(--accent); }
.bf-cta.on-dark:hover { background: var(--white); border-color: var(--white); }
.bf-hero-foot { margin-top: 24px; font-size: 12px; color: var(--soft-blue); font-family: var(--font-display); font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; }
.bf-hero-r { position: relative; padding-top: 12px; min-width: 0; }

/* TICKER */
.bf-ticker { background: var(--navy); color: var(--cream); padding: 22px 0; overflow: hidden; position: relative; }
.bf-ticker-inner { display: flex; align-items: center; gap: 0; position: relative; }
.bf-ticker-l {
  flex: 0 0 auto; padding: 12px 28px 12px 56px;
  font-family: var(--font-display); font-weight: 600;
  font-size: 13px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--accent);
  background: var(--navy);
  position: relative; z-index: 2;
  box-shadow: 12px 0 16px -4px var(--navy);
}
.bf-ticker-mask {
  flex: 1; min-width: 0; overflow: hidden; position: relative;
}
.bf-ticker-track {
  display: flex; align-items: center; gap: 0; width: max-content;
  animation: bf-marquee 38s linear infinite;
}
.no-motion .bf-ticker-track { animation: none; }
.bf-ticker-item {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 0 28px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.1rem; letter-spacing: 0.02em;
  color: var(--cream); text-transform: uppercase; white-space: nowrap;
}
.bf-ticker-item .num {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: 1.4rem; color: var(--accent);
}
.bf-ticker-item .sep { color: var(--accent); font-size: 0.9rem; opacity: 0.7; }
@keyframes bf-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* TRUST */
.bf-trust { background: var(--white); padding: 80px 0; border-bottom: 1px solid var(--light-gray); }
.bf-trust-row { display: grid; grid-template-columns: 1fr 1.2fr; gap: 64px; align-items: start; }
.bf-trust-lead { font-family: var(--font-body); font-size: 1.16rem; line-height: 1.65; color: var(--gray); margin: 0; max-width: 480px; text-wrap: pretty; }
.bf-trust-lead em { font-family: var(--font-display); font-style: italic; font-weight: 500; color: var(--navy); }
.bf-trust-badges {
  display: flex; align-items: center; gap: 32px;
  margin-top: 28px; padding-top: 24px;
  border-top: 1px solid var(--light-gray);
}
.bf-trust-badge { display: flex; align-items: center; }
.bf-trust-badge img { height: 96px; width: auto; display: block; }
.bf-trust-badge--wosb img { height: 108px; }
.bf-trust-logos {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border-top: 1px solid var(--light-gray); border-left: 1px solid var(--light-gray);
}
.bf-logo {
  border-right: 1px solid var(--light-gray); border-bottom: 1px solid var(--light-gray);
  height: 100px; display: flex; align-items: center; justify-content: center;
  padding: 18px; background: var(--white);
}
.bf-logo img {
  max-height: 36px; max-width: 100%; opacity: 0.7;
  filter: grayscale(100%) brightness(0.5) contrast(1.4);
  transition: opacity 200ms, filter 200ms;
}
.bf-logo:hover img { opacity: 1; filter: none; }

/* PROBLEM */
.bf-problem { background: var(--cream); padding: 120px 0; }
.bf-problem-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 80px; align-items: start; }
.bf-quote {
  margin: 32px 0;
  padding: 24px 0 24px 36px;
  border-left: 3px solid var(--accent);
  position: relative;
}
.bf-quote .mark {
  position: absolute; left: 8px; top: -8px;
  font-family: var(--font-display);
  font-size: 4rem; line-height: 1; color: var(--accent); opacity: 0.4;
}
.bf-quote p {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: 1.5rem; line-height: 1.4; color: var(--navy); margin: 0;
  text-wrap: balance;
}
.bf-quote em.accent { font-style: italic; color: var(--accent); }
.bf-quote cite {
  display: block; margin-top: 14px;
  font-family: var(--font-display); font-style: normal; font-weight: 600;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--soft-blue);
}
.bf-lede-2 { margin-top: 18px; }
.bf-problem-r-h {
  display: flex; align-items: baseline; gap: 16px;
  padding-bottom: 18px; border-bottom: 2px solid var(--navy); margin-bottom: 0;
}
.bf-problem-r-h .num {
  font-family: var(--font-display); font-weight: 700;
  font-size: 3.4rem; color: var(--accent); line-height: 1; letter-spacing: -0.04em;
}
.bf-problem-r-h .lbl {
  font-family: var(--font-display); font-weight: 600; font-size: 11px;
  color: var(--navy); text-transform: uppercase; letter-spacing: 0.16em;
}
.bf-symptoms { list-style: none; padding: 0; margin: 0; }
.bf-symptoms li {
  display: grid; grid-template-columns: 48px 1fr; gap: 16px;
  padding: 18px 0; border-bottom: 1px solid rgba(14,40,65,0.14);
  align-items: baseline;
}
.bf-symptoms .n {
  font-family: var(--font-display); font-style: italic;
  font-size: 1.4rem; color: var(--soft-blue);
}
.bf-symptoms .t { font-family: var(--font-display); font-weight: 500; font-size: 1.18rem; color: var(--navy); line-height: 1.45; }

/* TRACKS */
.bf-tracks { background: var(--white); padding: 120px 0; }
.bf-tracks-head { max-width: 880px; margin-bottom: 64px; }
.bf-tracks-head .bf-lede { margin-top: 0; }
.bf-tracks-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 2px solid var(--navy);
  border-left: 1px solid var(--light-gray);
}
.bf-track {
  padding: 36px 36px 40px;
  border-right: 1px solid var(--light-gray);
  border-bottom: 1px solid var(--light-gray);
  display: flex; flex-direction: column; gap: 14px;
  background: var(--white);
  transition: background 240ms;
  position: relative;
}
.bf-track:hover { background: var(--cream); }
.bf-track-h { display: flex; align-items: baseline; gap: 12px; }
.bf-track-h .num {
  font-family: var(--font-display); font-weight: 700;
  font-size: 2.6rem; color: var(--accent); line-height: 1;
  letter-spacing: -0.04em;
}
.bf-track-h .lbl {
  font-family: var(--font-display); font-weight: 600;
  font-size: 11px; color: var(--soft-blue);
  text-transform: uppercase; letter-spacing: 0.18em;
}
.bf-track-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.7rem; color: var(--navy); margin: 4px 0 2px;
  letter-spacing: -0.015em;
}
.bf-track-sub {
  font-family: var(--font-display); font-style: italic;
  font-size: 1rem; color: var(--gray);
}
.bf-track-body {
  font-size: 1.08rem; line-height: 1.6; color: var(--gray);
  margin: 6px 0; flex: 1; text-wrap: pretty;
}
.bf-track-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.bf-tag {
  font-family: var(--font-display); font-weight: 500; font-size: 11px;
  padding: 5px 10px; border-radius: 9999px;
  background: var(--alt-row); color: var(--navy);
  text-transform: uppercase; letter-spacing: 0.06em;
  border: 1px solid var(--light-gray);
}

/* TRAILBLAZERS */
.bf-spotlight { background: var(--navy); color: var(--cream); padding: 120px 0; }
.bf-spot-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 80px; align-items: start; }
.bf-case-snippet {
  display: grid; grid-template-columns: auto 1fr; gap: 28px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(237, 89, 38, 0.4);
  border-radius: 14px; padding: 28px;
  margin: 28px 0;
  align-items: center;
}
.bf-case-stat .num {
  font-family: var(--font-display); font-weight: 700;
  font-size: 4.6rem; color: var(--accent); line-height: 1;
  letter-spacing: -0.04em; font-variant-numeric: tabular-nums;
}
.bf-case-stat .num .u { font-size: 1.8rem; }
.bf-case-stat .lbl {
  font-family: var(--font-display); font-weight: 500; font-size: 11px;
  color: var(--soft-blue); text-transform: uppercase; letter-spacing: 0.12em;
  display: block; margin-top: 8px; line-height: 1.4;
}
.bf-case-body em {
  font-family: var(--font-display); font-style: italic;
  font-size: 1.15rem; color: var(--cream); display: block; margin-bottom: 8px;
}
.bf-case-body p {
  font-size: 1.05rem; line-height: 1.6; color: var(--cream); opacity: 0.88; margin: 0;
}
.bf-case-body strong { color: var(--accent); font-weight: 600; }

/* PROOF */
.bf-proof { background: var(--white); padding: 120px 0; }
.bf-proof-head { max-width: 900px; margin-bottom: 64px; }
.bf-proof-head .bf-h2 { margin-top: 4px; }
.bf-proof-grid {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 0;
  border-top: 2px solid var(--navy);
  border-bottom: 2px solid var(--navy);
}
.bf-pcard {
  padding: 32px 24px;
  border-right: 1px solid rgba(14,40,65,0.16);
  display: flex; flex-direction: column; gap: 16px;
  position: relative; transition: background 240ms;
}
.bf-pcard:last-child { border-right: none; }
.bf-pcard:hover { background: var(--cream); }
.bf-pcard.featured { background: var(--cream); padding: 36px 32px; }
.bf-pcard-tag {
  font-family: var(--font-display); font-weight: 600;
  font-size: 11px; color: var(--accent);
  text-transform: uppercase; letter-spacing: 0.18em;
}
.bf-pcard-stat .num {
  font-family: var(--font-display); font-weight: 700;
  font-size: 3.6rem; color: var(--navy); line-height: 1;
  letter-spacing: -0.04em; display: inline-flex; align-items: baseline;
  font-variant-numeric: tabular-nums;
}
.bf-pcard-stat .num .u {
  font-size: 0.5em; margin-left: 2px; color: var(--soft-blue); font-weight: 500;
}
.bf-pcard-stat .lbl {
  font-family: var(--font-display); font-weight: 600;
  font-size: 11px; color: var(--gray);
  text-transform: uppercase; letter-spacing: 0.08em;
  margin-top: 4px; display: block;
}
.bf-pcard.featured .bf-pcard-stat .num { font-size: 5.4rem; color: var(--accent); }
.bf-pcard-h {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.28rem; color: var(--navy); line-height: 1.3;
  letter-spacing: -0.01em; margin: 0; text-wrap: balance;
}
.bf-pcard.featured .bf-pcard-h { font-size: 1.7rem; }
.bf-pcard-b {
  font-size: 1.02rem; line-height: 1.55; color: var(--gray); margin: 0;
  text-wrap: pretty;
}
.bf-pcard-foot {
  margin-top: auto; padding-top: 18px;
  border-top: 1px solid rgba(14,40,65,0.12);
  display: flex; align-items: center; gap: 12px;
}
.bf-pcard-foot img {
  height: 24px; max-width: 100px; width: auto;
  object-fit: contain; opacity: 0.85;
  filter: grayscale(100%) brightness(0.4) contrast(1.4);
}
.bf-pcard-foot span {
  font-family: var(--font-display); font-weight: 500;
  font-size: 10px; color: var(--soft-blue);
  text-transform: uppercase; letter-spacing: 0.12em;
}

/* Metric row */
.bf-metric-row {
  margin-top: 56px;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--light-gray);
  border-bottom: 1px solid var(--light-gray);
}
.bf-metric {
  padding: 28px 24px;
  border-right: 1px solid var(--light-gray);
  display: flex; flex-direction: column; gap: 6px;
}
.bf-metric:last-child { border-right: none; }
.bf-metric .v {
  font-family: var(--font-display); font-weight: 700;
  font-size: 2.6rem; color: var(--navy); line-height: 1;
  letter-spacing: -0.03em;
}
.bf-metric .l {
  font-family: var(--font-display); font-weight: 500; font-size: 11px;
  color: var(--gray); text-transform: uppercase; letter-spacing: 0.1em;
}

/* FAQ */
.bf-faq { background: var(--white); padding: 120px 0; }
.bf-faq-head { max-width: 700px; margin-bottom: 48px; }
.bf-faq-list { border-top: 2px solid var(--navy); }
.bf-faq-item { border-bottom: 1px solid var(--light-gray); padding: 0; }
.bf-faq-item summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 0; cursor: pointer; font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; color: var(--navy); letter-spacing: -0.01em; }
.bf-faq-item summary::-webkit-details-marker { display: none; }
.bf-faq-item summary:hover { color: var(--accent); }
.bf-faq-item .plus { font-family: var(--font-display); font-weight: 400; font-size: 1.6rem; color: var(--accent); transition: transform 200ms; flex-shrink: 0; }
.bf-faq-item[open] .plus { transform: rotate(45deg); }
.bf-faq-item p { font-size: 1.1rem; line-height: 1.7; color: var(--gray); margin: 0 0 28px; max-width: 820px; text-wrap: pretty; }

/* FINAL CTA */
.bf-finalcta { background: var(--cream); padding: 140px 0; border-top: 1px solid var(--light-gray); }
.bf-finalcta-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 80px; align-items: start; }
.bf-finalcta-r .bf-cta-row { margin-top: 28px; }
.bf-tracks-cta { margin-top: 56px; display: flex; }

/* FOOTER */
.bf-footer { background: var(--navy); color: var(--cream); padding: 80px 0 40px; }
.bf-footer-top {
  display: grid; grid-template-columns: 1.2fr 2fr; gap: 64px;
  padding-bottom: 56px; border-bottom: 1px solid rgba(255,255,255,0.1);
}
.bf-footer-logo {
  font-family: var(--font-display); font-weight: 700; font-size: 1.6rem;
  color: var(--white); letter-spacing: -0.01em;
}
.bf-footer-logo img { display: block; height: 96px; width: auto; }
.bf-footer-brand p {
  font-size: 0.96rem; color: var(--soft-blue); margin: 12px 0 0;
  max-width: 320px; line-height: 1.5;
}
.bf-footer-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
.bf-footer-col h4 {
  font-family: var(--font-display); font-weight: 600; font-size: 11px;
  color: var(--accent); text-transform: uppercase; letter-spacing: 0.16em;
  margin: 0 0 14px;
}
.bf-footer-col a {
  display: block; padding: 5px 0;
  font-family: var(--font-display); font-size: 14px; font-weight: 500;
  color: var(--cream); text-decoration: none; transition: color 200ms;
}
.bf-footer-col a:hover { color: var(--accent); }
.bf-footer-social { display: inline-flex; gap: 10px; margin-bottom: 14px; }
.bf-footer-social-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: transparent; color: var(--cream);
  transition: color 200ms;
}
.bf-footer-social-icon svg { width: 22px; height: 22px; }
.bf-footer-social-icon:hover { background: transparent; color: var(--accent); }
.bf-footer-social-icon:hover { background: transparent; color: var(--accent); }
.bf-footer-email { display: block; font-size: 14px; color: var(--cream); text-decoration: none; }
.bf-footer-email:hover { color: var(--accent); }
.bf-footer-cta {
  margin-top: 20px;
  background: var(--accent); border-color: var(--accent); color: var(--white);
}
.bf-cta.primary.bf-footer-cta:hover { background: var(--white); color: var(--navy); border-color: var(--white); }
.bf-footer-meta {
  margin-top: 32px;
  display: flex; justify-content: space-between;
  font-family: var(--font-display); font-size: 12px;
  color: var(--soft-blue); letter-spacing: 0.04em;
}
.bf-footer-meta a { color: var(--soft-blue); margin: 0 6px; text-decoration: none; }
.bf-footer-meta a:hover { color: var(--accent); }
`;