/* =============================================================================
   Five Forces — design system
   =============================================================================
   Palette and type are not invented: the hex values were extracted from the live
   Framer stylesheet (counts in the thousands for the brand blue) and confirmed by
   sampling the rendered page. Comments record where each one came from so a
   future edit does not drift the brand by guesswork.
   ========================================================================== */

/* ---------- Fonts (self-hosted; nothing calls out to Google or Framer) ---- */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/roboto-400.425c0713a8.woff2') format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/roboto-500.5bcc3aa180.woff2') format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/roboto-700.b9d66d1708.woff2') format('woff2');
}

:root {
  /* Brand — #1f5eff is the single most-used colour in the live stylesheet. */
  --ff-blue:        #1f5eff;
  --ff-blue-deep:   #0a2a8a;
  --ff-blue-bright: #007dfc;

  /* The five forces, each with its own accent (matches the live cards). */
  --ff-global:   #1f5eff;
  --ff-society:  #f2ad34;
  --ff-industry: #4b0fb0;
  --ff-human:    #fd3c45;
  --ff-internal: #03a5a1;

  /* Ink */
  --ff-ink:      #071329;
  --ff-body:     #273652;
  --ff-muted:    #5e6d84;
  --ff-faint:    #8f9db4;

  /* Surfaces */
  --ff-bg:        #ffffff;
  --ff-bg-soft:   #fafbff;
  --ff-bg-blue:   #f4f8ff;
  --ff-bg-panel:  #f1f4fa;

  /* Lines */
  --ff-line:        #e3ebf7;
  --ff-line-strong: #dde9ff;
  --ff-line-faint:  #ecedf1;

  /* Elevation — soft, wide, low-opacity: the site's whole visual signature. */
  --ff-shadow-sm: 0 1px 2px rgba(7, 19, 41, .04), 0 4px 12px rgba(7, 19, 41, .04);
  --ff-shadow-md: 0 2px 4px rgba(7, 19, 41, .04), 0 12px 32px rgba(7, 19, 41, .06);
  --ff-shadow-lg: 0 8px 24px rgba(7, 19, 41, .06), 0 24px 64px rgba(31, 94, 255, .08);
  --ff-glow:      0 0 0 1px rgba(0, 125, 252, .08), 0 8px 32px rgba(0, 125, 252, .12);

  /* Geometry */
  --ff-radius-sm: 12px;
  --ff-radius:    20px;
  --ff-radius-lg: 28px;
  --ff-pill:      100px;

  --ff-container: 1240px;
  --ff-narrow:    760px;
  --ff-gutter:    24px;
  --ff-nav-h:     76px;

  --ff-sans: 'Roboto', 'Inter', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
}

/* ---------- Reset ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--ff-nav-h) + 24px); }
body {
  margin: 0;
  background: var(--ff-bg);
  color: var(--ff-body);
  font-family: var(--ff-sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

h1, h2, h3, h4 { color: var(--ff-ink); font-weight: 700; line-height: 1.12; letter-spacing: -.02em; }

:focus-visible { outline: 2px solid var(--ff-blue); outline-offset: 3px; border-radius: 4px; }

.ff-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ff-blue); color: #fff; padding: 12px 20px; border-radius: 0 0 12px 0;
}
.ff-skip:focus { left: 0; }

/* ---------- Layout ------------------------------------------------------ */
.ff-container { width: 100%; max-width: var(--ff-container); margin-inline: auto; padding-inline: var(--ff-gutter); }
.ff-container--narrow { max-width: var(--ff-narrow); }

.ff-section { padding-block: clamp(56px, 8vw, 112px); }
.ff-section--soft { background: var(--ff-bg-soft); }
.ff-section--blue { background: var(--ff-bg-blue); }

.ff-eyebrow {
  display: inline-block;
  padding: 8px 20px;
  border-radius: var(--ff-pill);
  background: #fff;
  border: 1px solid var(--ff-line);
  box-shadow: var(--ff-shadow-sm);
  color: var(--ff-muted);
  font-size: 14px;
  line-height: 1.2;
}
.ff-section-head { text-align: center; margin-bottom: clamp(32px, 5vw, 56px); }
.ff-section-title { font-size: clamp(30px, 4.2vw, 46px); margin-block: 20px 14px; }
.ff-accent { color: var(--ff-blue); }
.ff-accent-soft { color: #c7d6ff; }
.ff-lede { color: var(--ff-muted); font-size: clamp(16px, 1.5vw, 18px); max-width: 62ch; margin-inline: auto; }
.ff-section-head .ff-lede { margin-inline: auto; }

/* ---------- Buttons ----------------------------------------------------- */
.ff-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 26px; border-radius: var(--ff-pill);
  font-size: 16px; font-weight: 500; line-height: 1;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.ff-btn:hover { transform: translateY(-1px); }
.ff-btn--primary { background: var(--ff-blue); color: #fff; box-shadow: 0 6px 20px rgba(31, 94, 255, .28); }
.ff-btn--primary:hover { background: #1550ec; box-shadow: 0 10px 28px rgba(31, 94, 255, .34); }
.ff-btn--teal { background: var(--ff-internal); color: #fff; box-shadow: 0 6px 20px rgba(3, 165, 161, .28); }
.ff-btn--teal:hover { background: #02918e; box-shadow: 0 10px 28px rgba(3, 165, 161, .34); }
.ff-btn--ghost {
  background: #fff; color: var(--ff-blue);
  border-color: var(--ff-line-strong); box-shadow: var(--ff-shadow-sm);
}
.ff-btn--ghost:hover { box-shadow: var(--ff-glow); }

/* ---------- Cards ------------------------------------------------------- */
.ff-card {
  background: #fff;
  border: 1px solid var(--ff-line);
  border-radius: var(--ff-radius);
  box-shadow: var(--ff-shadow-sm);
  padding: 28px;
  transition: transform .18s ease, box-shadow .18s ease;
}
a.ff-card:hover { transform: translateY(-3px); box-shadow: var(--ff-shadow-md); }

/* =============================================================================
   NAVIGATION
   =============================================================================
   Structure and behaviour are a port of the Sapience floating nav
   (~/s/website/assets/sapience-nav.html) — fixed centred pill, hover/focus
   flyouts, hamburger sheet — re-skinned light for this site's white canvas.
   ========================================================================== */
.ff-nav {
  position: fixed; top: 10px; left: 50%; transform: translateX(-50%);
  z-index: 50;
  display: flex; align-items: center; gap: 28px;
  width: calc(100% - 32px); max-width: 1180px;
  padding: 12px 14px 12px 28px;
  border-radius: 65px;
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(227, 235, 247, .9);
  box-shadow: 0 2px 8px rgba(7, 19, 41, .04), 0 12px 40px rgba(31, 94, 255, .10);
}
.ff-brand { display: flex; align-items: center; flex: 0 0 auto; }
.ff-brand svg { height: 22px; width: auto; }

.ff-nav-links { display: flex; align-items: center; gap: 28px; margin-left: auto; }
.ff-nav-link {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--ff-body); font-size: 15.5px; line-height: 1.2;
  transition: color .15s ease;
}
.ff-nav-link:hover { color: var(--ff-blue); }
.ff-dd-caret { width: 11px; height: 11px; transition: transform .18s ease; }
.ff-dd:hover .ff-dd-caret, .ff-dd:focus-within .ff-dd-caret { transform: rotate(180deg); }

.ff-nav-cta {
  flex: 0 0 auto;
  padding: 11px 22px; border-radius: var(--ff-pill);
  background: #fff; color: var(--ff-ink);
  border: 1px solid var(--ff-line-strong);
  font-size: 15.5px; line-height: 1;
  box-shadow: 0 2px 10px rgba(31, 94, 255, .10);
  transition: box-shadow .16s ease, color .16s ease;
}
.ff-nav-cta:hover { color: var(--ff-blue); box-shadow: var(--ff-glow); }

/* --- Flyout panels --- */
.ff-dd { position: relative; }
/* Invisible bridge so the pointer can travel from trigger to panel without the
   panel closing in the gap — the same trick the Sapience nav uses. */
.ff-dd::before { content: ""; position: absolute; left: -14px; right: -14px; top: -14px; bottom: -14px; }
.ff-dd-panel {
  position: absolute; top: calc(100% + 18px); left: 50%; transform: translate(-50%, -6px);
  display: flex; align-items: stretch;
  background: rgba(255, 255, 255, .97);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid var(--ff-line);
  border-radius: var(--ff-radius);
  box-shadow: 0 12px 44px rgba(7, 19, 41, .12);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.ff-dd-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -20px; height: 20px; }
.ff-dd:hover > .ff-dd-panel,
.ff-dd:focus-within > .ff-dd-panel {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0);
}
.ff-dd-col { display: flex; flex-direction: column; gap: 10px; padding: 18px 22px; min-width: 220px; }
.ff-dd-col + .ff-dd-col { border-left: 1px solid var(--ff-line); min-width: 170px; }
.ff-dd-head {
  font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ff-faint); margin-bottom: 2px;
}
.ff-dd-item { font-size: 15px; color: var(--ff-body); transition: color .14s ease; }
.ff-dd-item:hover { color: var(--ff-blue); }

/* --- Hamburger + mobile sheet --- */
.ff-nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--ff-pill);
  background: #fff; border: 1px solid var(--ff-line-strong); cursor: pointer;
}
.ff-nav-toggle span, .ff-nav-toggle span::before, .ff-nav-toggle span::after {
  display: block; width: 17px; height: 1.6px; background: var(--ff-ink); border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease, background .2s ease;
}
.ff-nav-toggle span { position: relative; }
.ff-nav-toggle span::before { content: ""; position: absolute; top: -5.5px; left: 0; }
.ff-nav-toggle span::after  { content: ""; position: absolute; top: 5.5px;  left: 0; }
.ff-nav-toggle[aria-expanded="true"] span { background: transparent; }
.ff-nav-toggle[aria-expanded="true"] span::before { transform: translateY(5.5px) rotate(45deg); }
.ff-nav-toggle[aria-expanded="true"] span::after  { transform: translateY(-5.5px) rotate(-45deg); }

.ff-mobile-menu {
  display: none; position: fixed; top: 80px; left: 50%; transform: translateX(-50%);
  z-index: 49; flex-direction: column; gap: 2px;
  width: calc(100% - 32px); max-width: 460px;
  max-height: calc(100dvh - 100px); overflow-y: auto;
  padding: 12px; border-radius: var(--ff-radius);
  background: rgba(255, 255, 255, .98);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid var(--ff-line);
  box-shadow: 0 16px 48px rgba(7, 19, 41, .14);
}
.ff-mobile-menu.open { display: flex; }
.ff-mobile-menu a {
  font-size: 16px; color: var(--ff-ink); padding: 13px 16px; border-radius: 14px;
  transition: background .15s ease;
}
.ff-mobile-menu a:hover { background: var(--ff-bg-blue); }
.ff-mm-head {
  padding: 14px 16px 4px; font-size: 10.5px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ff-faint);
}
.ff-mobile-menu a.ff-mm-sub { padding: 9px 16px 9px 28px; font-size: 14.5px; color: var(--ff-muted); }
.ff-mm-divider { height: 1px; background: var(--ff-line); margin: 8px 4px; }
.ff-mobile-menu a.ff-mm-cta {
  background: var(--ff-blue); color: #fff; text-align: center; font-weight: 500; margin-top: 4px;
}
.ff-mobile-menu a.ff-mm-cta:hover { background: #1550ec; }

@media (max-width: 1080px) {
  .ff-nav-links, .ff-nav-cta { display: none; }
  .ff-nav-toggle { display: flex; margin-left: auto; }
  .ff-nav { padding: 10px 12px 10px 20px; gap: 12px; }
}
@media (min-width: 1081px) { .ff-mobile-menu { display: none !important; } }

/* ---------- Footer ------------------------------------------------------ */
.ff-footer { border-top: 1px solid var(--ff-line); background: var(--ff-bg-soft); margin-top: 0; }
.ff-footer-inner {
  width: 100%; max-width: var(--ff-container); margin-inline: auto;
  padding: 56px var(--ff-gutter) 32px;
  display: flex; flex-direction: column; align-items: center; gap: 24px;
}
.ff-footer-brand svg { height: 26px; width: auto; }
.ff-footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px; }
.ff-footer-links a { color: var(--ff-body); font-size: 16px; transition: color .15s ease; }
.ff-footer-links a:hover { color: var(--ff-blue); }
.ff-footer-base {
  width: 100%; margin-top: 8px; padding-top: 20px; border-top: 1px solid var(--ff-line);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.ff-copyright { color: var(--ff-faint); font-size: 14px; }
.ff-footer-badges { display: flex; align-items: center; gap: 10px; }
.ff-badge {
  display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: var(--ff-pill); background: #fff;
  border: 1px solid var(--ff-line); box-shadow: var(--ff-shadow-sm);
  transition: box-shadow .16s ease, transform .16s ease;
}
.ff-badge:hover { transform: translateY(-2px); box-shadow: var(--ff-glow); }
.ff-badge svg { width: 20px; height: 20px; }

/* ---------- Page + article shells --------------------------------------- */
.ff-page-head, .ff-article-head { padding-top: calc(var(--ff-nav-h) + 56px); padding-bottom: 28px; text-align: center; }
.ff-page-title { font-size: clamp(34px, 5vw, 56px); margin-block: 18px 16px; }
.ff-article-head { text-align: left; }
.ff-article-title { font-size: clamp(30px, 4.4vw, 46px); margin-block: 14px 12px; }
.ff-article-meta { color: var(--ff-faint); font-size: 14.5px; }
.ff-backlink {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--ff-muted); font-size: 14.5px; margin-bottom: 18px;
  transition: color .15s ease;
}
.ff-backlink:hover { color: var(--ff-blue); }

/* ---------- Prose (article bodies) -------------------------------------- */
.ff-prose { padding-bottom: 72px; font-size: 17.5px; line-height: 1.75; color: var(--ff-body); }
.ff-prose > * + * { margin-top: 1.15em; }
.ff-prose h2 { font-size: clamp(24px, 3vw, 31px); margin-top: 2em; }
.ff-prose h3 { font-size: clamp(19px, 2.2vw, 23px); margin-top: 1.7em; }
.ff-prose h4 { font-size: 18px; margin-top: 1.5em; }
.ff-prose a { color: var(--ff-blue); text-decoration: underline; text-underline-offset: 3px; }
.ff-prose a:hover { color: var(--ff-blue-deep); }
.ff-prose strong { color: var(--ff-ink); font-weight: 700; }
.ff-prose ul, .ff-prose ol { padding-left: 1.3em; }
.ff-prose ul { list-style: disc; }
.ff-prose ol { list-style: decimal; }
.ff-prose li + li { margin-top: .45em; }
.ff-prose li::marker { color: var(--ff-faint); }
.ff-prose blockquote {
  margin-inline: 0; padding: 4px 0 4px 22px;
  border-left: 3px solid var(--ff-blue); color: var(--ff-ink); font-size: 19px;
}
.ff-prose img { border-radius: var(--ff-radius); box-shadow: var(--ff-shadow-sm); margin-block: 1.6em; }
.ff-prose hr { border: 0; border-top: 1px solid var(--ff-line); margin-block: 2.4em; }
.ff-prose table { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.ff-prose th, .ff-prose td { padding: 11px 14px; border-bottom: 1px solid var(--ff-line); text-align: left; }
.ff-prose th { color: var(--ff-ink); font-weight: 700; background: var(--ff-bg-soft); }
.ff-prose code {
  background: var(--ff-bg-panel); padding: .15em .4em; border-radius: 6px; font-size: .92em;
}

/* ---------- Closing CTA band -------------------------------------------- */
.ff-cta-band { padding-block: clamp(48px, 7vw, 96px); }
.ff-cta-card {
  position: relative; overflow: hidden;
  border: 1px solid var(--ff-line); border-radius: var(--ff-radius-lg);
  background:
    radial-gradient(120% 140% at 0% 100%, rgba(31, 94, 255, .14) 0%, rgba(31, 94, 255, 0) 55%),
    #fff;
  box-shadow: var(--ff-shadow-md);
  padding: clamp(48px, 7vw, 88px) 32px;
  text-align: center;
}
.ff-cta-title { font-size: clamp(28px, 4vw, 44px); }
.ff-cta-copy { color: var(--ff-muted); margin-block: 16px 28px; }

/* ---------- Article / resource index lists ------------------------------ */
.ff-index-list { display: grid; gap: 14px; padding-bottom: 72px; }
.ff-index-item { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; }
.ff-index-item h2 { font-size: clamp(18px, 2.2vw, 22px); }
.ff-index-date { color: var(--ff-faint); font-size: 14px; white-space: nowrap; }
.ff-index-desc { color: var(--ff-muted); font-size: 15.5px; margin-top: 8px; }

/* ---------- Typeform embed ---------------------------------------------- */
.ff-typeform-shell { padding-top: calc(var(--ff-nav-h) + 32px); padding-bottom: 56px; }
.ff-typeform {
  width: 100%; height: min(76vh, 720px); min-height: 520px;
  border: 1px solid var(--ff-line); border-radius: var(--ff-radius);
  overflow: hidden; box-shadow: var(--ff-shadow-md); background: #fff;
}
.ff-typeform iframe { width: 100%; height: 100%; border: 0; display: block; }

@media (max-width: 640px) {
  :root { --ff-gutter: 18px; }
  body { font-size: 16px; }
  .ff-index-item { flex-direction: column; gap: 4px; }
}

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

/* =============================================================================
   WORDMARK — "5 FORCES"
   =============================================================================
   The live site draws the "5" as a bespoke vector and sets "FORCES" as live text
   in Orbitron 900. Reproduced the same way (not as one flat image) so it stays
   sharp at every size and inherits its colour from context.
   ========================================================================== */
@font-face {
  font-family: 'Orbitron';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/assets/fonts/orbitron-900.ce87e6a1b1.woff2') format('woff2');
}

.ff-wordmark { display: inline-flex; align-items: center; gap: .34em; color: var(--ff-ink); line-height: 1; }
.ff-wordmark-mark { height: 1.12em; width: auto; flex: 0 0 auto; }
.ff-wordmark-mark path { fill: currentColor; }
.ff-wordmark-text {
  font-family: 'Orbitron', var(--ff-sans);
  font-weight: 900;
  font-size: 1em;
  letter-spacing: .06em;
}
.ff-brand .ff-wordmark { font-size: 21px; }
.ff-footer-brand .ff-wordmark { font-size: 25px; }
.ff-nav-link.is-current { color: var(--ff-blue); }

/* =============================================================================
   HOME — HERO
   ========================================================================== */
.ff-hero { padding-top: calc(var(--ff-nav-h) + 56px); padding-bottom: clamp(40px, 6vw, 80px); overflow: hidden; }
.ff-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
.ff-hero-title { font-size: clamp(38px, 5.6vw, 66px); margin-block: 22px 20px; }
.ff-hero-lede { margin-inline: 0; max-width: 54ch; }
.ff-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

.ff-hero-steps { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 18px; margin-top: 36px; }
.ff-hero-step { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 116px; position: relative; }
.ff-hero-step + .ff-hero-step::before {
  content: ""; position: absolute; left: -18px; top: 22px; width: 18px;
  border-top: 2px dashed var(--ff-line-strong);
}
.ff-hero-step-num {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--ff-pill);
  background: #fff; border: 1.5px solid var(--ff-line-strong); color: var(--ff-blue);
  font-weight: 700; font-size: 15px; box-shadow: var(--ff-glow);
}
.ff-hero-step-label { text-align: center; font-size: 14px; font-weight: 500; color: var(--ff-ink); line-height: 1.3; }

/* --- Hero product mock (markup, not a flat image) --- */
.ff-hero-mock { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ff-mock {
  background: #fff; border: 1px solid var(--ff-line); border-radius: 18px;
  box-shadow: var(--ff-shadow-md); padding: 16px 18px; font-size: 12px; line-height: 1.45;
}
.ff-mock--c, .ff-mock--d { margin-top: -6px; }
.ff-mock-step { font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--ff-faint); }
.ff-mock-title { font-size: 15px; font-weight: 700; color: var(--ff-ink); margin-top: 3px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ff-mock-score { font-size: 28px; font-weight: 700; color: var(--ff-blue); margin-top: 10px; display: flex; align-items: center; gap: 10px; }
.ff-mock-score span { font-size: 14px; }
.ff-mock-pill {
  font-style: normal; font-size: 10px; font-weight: 500; padding: 4px 9px;
  border-radius: var(--ff-pill); background: var(--ff-bg-blue); color: var(--ff-blue); white-space: nowrap;
}
.ff-mock-pill--ok   { background: #e7f7ed; color: #16a34a; }
.ff-mock-pill--warn { background: #fff3dc; color: #b97708; }
.ff-mock-list { margin-top: 12px; display: grid; gap: 7px; }
.ff-mock-list li { display: flex; gap: 7px; align-items: flex-start; color: var(--ff-muted); font-size: 11px; }
.ff-mock-list li::before {
  content: "✓"; flex: 0 0 auto; display: grid; place-items: center;
  width: 14px; height: 14px; border-radius: 4px; background: var(--ff-blue); color: #fff; font-size: 9px;
}
.ff-mock-rows { margin-top: 10px; display: grid; gap: 7px; }
.ff-mock-rows > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--ff-line-faint); padding-top: 7px; }
.ff-mock-rows dt { font-size: 11px; font-weight: 500; color: var(--ff-ink); display: flex; flex-direction: column; }
.ff-mock-rows dt small { font-weight: 400; font-size: 9.5px; color: var(--ff-faint); }
.ff-mock-readiness { font-size: 15px; font-weight: 700; color: var(--ff-blue); }
.ff-mock-readiness small { font-size: 8px; letter-spacing: .08em; color: var(--ff-faint); font-weight: 400; }
.ff-radar { width: 100%; max-width: 190px; margin: 6px auto 0; }
.ff-mock-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 9px; color: var(--ff-muted); margin-top: 6px; }
.ff-key { width: 12px; height: 3px; border-radius: 2px; display: inline-block; }
.ff-key--ind { background: var(--ff-blue); }
.ff-key--org { background: var(--ff-society); }
.ff-key--gap { background: #f5d69a; height: 9px; width: 9px; border-radius: 2px; }
.ff-mock-gap { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.ff-mock-gap span { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 11px; font-size: 10px; }
.ff-mock-gap strong { color: var(--ff-ink); font-size: 10.5px; }
.ff-mock-gap small { color: var(--ff-muted); font-size: 9.5px; }
.ff-mock-gap-a { background: #fff8e8; }
.ff-mock-gap-b { background: var(--ff-bg-blue); }

@media (max-width: 980px) {
  .ff-hero-grid { grid-template-columns: 1fr; }
  .ff-hero-mock { order: 2; }
}
@media (max-width: 560px) {
  .ff-hero-mock { grid-template-columns: 1fr; }
  .ff-mock--c, .ff-mock--d { margin-top: 0; }
}

/* =============================================================================
   HOME — THE FIVE FORCES GRID
   =============================================================================
   Desktop mirrors the live layout: four outer forces in the corners with Force 5
   (Internal Pressures) spanning the centre column, because Internal is the one
   the other four act upon. Collapses to a single column on narrow screens.
   ========================================================================== */
.ff-force-word { font-weight: 500; }
.ff-force-word--global   { color: var(--ff-global); }
.ff-force-word--society  { color: var(--ff-society); }
.ff-force-word--industry { color: var(--ff-industry); }
.ff-force-word--human    { color: var(--ff-human); }
.ff-force-word--internal { color: var(--ff-internal); }

.ff-forces-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ff-force-card {
  position: relative; overflow: hidden;
  background: #fff; border: 1px solid var(--ff-line);
  border-radius: var(--ff-radius); box-shadow: var(--ff-shadow-sm);
  padding: 26px; min-height: 220px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.ff-force-card:hover { transform: translateY(-3px); box-shadow: var(--ff-shadow-md); }
.ff-force-card--pos1 { grid-column: 1; grid-row: 1; }   /* Global   — top left */
.ff-force-card--pos2 { grid-column: 3; grid-row: 1; }   /* Society  — top right */
.ff-force-card--pos3 { grid-column: 1; grid-row: 2; }   /* Industry — bottom left */
.ff-force-card--pos4 { grid-column: 3; grid-row: 2; }   /* Human    — bottom right */
.ff-force-card--core { grid-column: 2; grid-row: 1 / span 2; }

.ff-force-texture {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .55; pointer-events: none;
}
.ff-force-body { position: relative; display: flex; flex-direction: column; gap: 12px; height: 100%; }
.ff-force-badge {
  align-self: flex-start; order: -1;
  padding: 5px 12px; border-radius: var(--ff-pill);
  font-size: 10.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
}
.ff-force-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--ff-pill); border: 1px solid currentColor; }
.ff-force-name { font-size: clamp(22px, 2.6vw, 28px); }
.ff-force-copy { color: var(--ff-muted); font-size: 15px; max-width: 44ch; }
.ff-force-arrow {
  margin-top: auto; display: grid; place-items: center; width: 38px; height: 26px;
  border-radius: var(--ff-pill); background: #fff; border: 1px solid var(--ff-line);
  box-shadow: var(--ff-shadow-sm);
}

/* Per-force tinting: the badge, icon ring, name and arrow all take the accent. */
.ff-force-card--global   { --accent: var(--ff-global);   --accent-bg: #eff5ff; }
.ff-force-card--society  { --accent: var(--ff-society);  --accent-bg: #fff8e8; }
.ff-force-card--industry { --accent: var(--ff-industry); --accent-bg: #f4eeff; }
.ff-force-card--human    { --accent: var(--ff-human);    --accent-bg: #fff0f1; }
.ff-force-card--internal { --accent: var(--ff-internal); --accent-bg: #e7f7f5; }
.ff-force-card .ff-force-badge { background: var(--accent-bg); color: var(--accent); }
.ff-force-card .ff-force-icon  { color: var(--accent); background: var(--accent-bg); border-color: color-mix(in srgb, var(--accent) 26%, transparent); }
.ff-force-card .ff-force-name  { color: var(--accent); }
.ff-force-card .ff-force-arrow { color: var(--accent); }

.ff-capabilities { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px; margin-top: 4px; }
.ff-capability {
  display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center;
  padding: 13px 8px; border-radius: 14px;
  background: #fff; border: 1px solid var(--ff-line);
  font-size: 11.5px; font-weight: 500; color: var(--ff-ink); line-height: 1.25;
}
.ff-capability svg { color: var(--accent); }
.ff-dimensions {
  display: grid; gap: 3px; text-align: center; margin-top: 6px;
  padding: 16px; border-radius: 14px; background: #fff; border: 1px solid var(--ff-line);
  font-size: 13.5px; font-weight: 700; color: var(--ff-ink);
}

@media (max-width: 1000px) {
  .ff-forces-grid { grid-template-columns: 1fr 1fr; }
  .ff-force-card--pos1, .ff-force-card--pos2, .ff-force-card--pos3, .ff-force-card--pos4 { grid-column: auto; grid-row: auto; }
  .ff-force-card--core { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 620px) { .ff-forces-grid { grid-template-columns: 1fr; } }

/* =============================================================================
   HOME — ARCHETYPES · STEPS · GAP · FAQ
   ========================================================================== */
/* Two per row on desktop, matching the live layout. */
.ff-archetype-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 760px) { .ff-archetype-grid { grid-template-columns: 1fr; } }
.ff-archetype { display: flex; align-items: center; gap: 20px; }
.ff-archetype-figure { width: 58px; height: auto; flex: 0 0 auto; opacity: .9; }
.ff-archetype-name { font-size: 20px; }
.ff-archetype-trait { color: var(--ff-blue); font-size: 14px; font-weight: 500; margin-top: 5px; }

.ff-steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 20px; }
.ff-step-card {
  position: relative; display: flex; flex-direction: column; gap: 14px;
  padding: 30px 28px 60px; border-radius: var(--ff-radius);
  border: 1px solid var(--ff-line); box-shadow: var(--ff-shadow-sm); background: #fff;
}
.ff-step-card--1 { background: linear-gradient(170deg, #f4f8ff 0%, #fff 62%); }
.ff-step-card--2 { background: linear-gradient(170deg, #fdf3ff 0%, #fff 62%); }
.ff-step-card--3 { background: linear-gradient(170deg, #eefaf2 0%, #fff 62%); }
.ff-step-title { font-size: 24px; }
.ff-step-body { color: var(--ff-muted); font-size: 15.5px; }
.ff-step-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.ff-step-pills li {
  padding: 7px 15px; border-radius: var(--ff-pill); background: #fff;
  border: 1px solid var(--ff-line); font-size: 13px; color: var(--ff-body);
}
.ff-step-cta { align-self: flex-start; }
.ff-step-num { position: absolute; right: 26px; bottom: 22px; font-size: 26px; font-weight: 700; color: var(--ff-ink); }

/* Three per row on desktop (matching the live layout's 3 + 3), not auto-fit —
   auto-fit gave a lopsided 4 + 2 at container width. */
.ff-gap-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 900px) { .ff-gap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ff-gap-grid { grid-template-columns: 1fr; } }
.ff-gap-card { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; padding: 34px 22px; }
.ff-gap-icon {
  display: grid; place-items: center; width: 62px; height: 62px; border-radius: var(--ff-pill);
  color: var(--ff-blue-bright); background: var(--ff-bg-blue);
  box-shadow: 0 0 0 8px rgba(0, 125, 252, .05);
}
.ff-gap-name { font-size: 19px; }

.ff-faq { border: 1px solid var(--ff-line); border-radius: var(--ff-radius); background: #fff; box-shadow: var(--ff-shadow-sm); overflow: hidden; }
.ff-faq-item + .ff-faq-item { border-top: 1px solid var(--ff-line); }
.ff-faq-q {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 20px 26px; cursor: pointer; list-style: none;
  font-weight: 700; color: var(--ff-ink); font-size: 16px;
}
.ff-faq-q::-webkit-details-marker { display: none; }
.ff-faq-q::after { content: "+"; color: var(--ff-faint); font-size: 22px; font-weight: 400; line-height: 1; transition: transform .2s ease; }
.ff-faq-item[open] .ff-faq-q::after { content: "−"; color: var(--ff-blue); }
.ff-faq-a { padding: 0 26px 22px; color: var(--ff-muted); font-size: 15.5px; }

/* =============================================================================
   INNER PAGES — audit · assessment · contact · centered
   ========================================================================== */
.ff-page-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 26px; }
.ff-page-head + .ff-container .ff-prose { padding-top: 8px; }

.ff-audit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 20px; padding-bottom: 80px; }
.ff-audit-card { display: flex; flex-direction: column; gap: 14px; padding: 34px 30px; }
.ff-audit-card--teal { border-top: 3px solid var(--ff-internal); }
.ff-audit-card--blue { border-top: 3px solid var(--ff-blue); }
.ff-audit-card-title { font-size: 23px; }
.ff-audit-card-body { color: var(--ff-muted); font-size: 15.5px; }
.ff-audit-card-cta { margin-top: auto; padding-top: 8px; color: var(--ff-blue); font-weight: 500; font-size: 15px; }

.ff-assessment-head { text-align: center; margin-bottom: 28px; }
.ff-assessment-title { font-size: clamp(28px, 4vw, 42px); margin-bottom: 12px; }
.ff-assessment-sibling { text-align: center; margin-top: 22px; }
.ff-assessment-sibling a { color: var(--ff-blue); font-size: 15px; }

.ff-centered-shell { padding-top: calc(var(--ff-nav-h) + 90px); padding-bottom: 110px; text-align: center; }
.ff-centered-actions { margin-top: 30px; }

.ff-contact-shell { padding-bottom: 88px; }
.ff-contact-card { padding: clamp(28px, 4vw, 44px); }
.ff-contact-heading { font-size: 23px; margin-bottom: 24px; }
.ff-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ff-field { display: flex; flex-direction: column; gap: 7px; }
.ff-field--wide, .ff-form-actions { grid-column: 1 / -1; }
.ff-label { font-size: 14px; font-weight: 500; color: var(--ff-ink); }
.ff-label span { color: var(--ff-human); }
.ff-input {
  font: inherit; font-size: 15.5px; color: var(--ff-ink);
  padding: 12px 15px; border-radius: 13px;
  border: 1px solid var(--ff-line-strong); background: var(--ff-bg-soft);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.ff-input:focus { outline: none; background: #fff; border-color: var(--ff-blue); box-shadow: 0 0 0 3px rgba(31, 94, 255, .14); }
.ff-input:user-invalid { border-color: var(--ff-human); }
textarea.ff-input { resize: vertical; min-height: 130px; }
.ff-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ff-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 4px; }
.ff-form-status { font-size: 14.5px; color: var(--ff-muted); }
.ff-form-status.is-ok { color: #16a34a; }
.ff-form-status.is-error { color: var(--ff-human); }
@media (max-width: 640px) { .ff-form { grid-template-columns: 1fr; } }

/* Narrow screens: keep the three hero steps on ONE row so the dashed connectors
   between them still join adjacent steps. Wrapping left them dangling. */
@media (max-width: 620px) {
  .ff-hero-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 14px; }
  .ff-hero-step { width: auto; }
  .ff-hero-step + .ff-hero-step::before { left: -14px; width: 14px; top: 20px; }
  .ff-hero-step-num { width: 40px; height: 40px; font-size: 14px; }
  .ff-hero-step-label { font-size: 12.5px; }
}