/* ==========================================================================
   Flow Efficiency — site-wide design system (2 Oct 2026)

   Loaded LAST on every page so it wins over the older per-page <style> blocks.
   The rule is: only these text styles exist anywhere on the site —
     H1 · H2 · H3 · Body · Subtext · Label   (+ Nav and Button for controls)
   Type sizes are !important on purpose: older pages carry one-off inline
   font-size overrides, and this guarantees they can never show through.

   One page frame: 1100px wide, 20px side gutters on phones. Long reading text
   is capped at 720px but starts on the same left edge as everything else.
   ========================================================================== */

:root {
  --fe-navy: #0a1628;
  --fe-navy-2: #0e2442;
  --fe-teal: #1fcfb8;
  --fe-blue: #1d6fd8;
  --fe-ink: #334155;
  --fe-muted: #64748b;
  --fe-line: #e2e8f0;
  --fe-soft: #f8fafc;

  --fe-head: 'Space Grotesk', system-ui, sans-serif;
  --fe-body: 'Plus Jakarta Sans', system-ui, sans-serif;

  --fe-h1: 2.75rem;      /* 44px */
  --fe-h2: 2rem;         /* 32px */
  --fe-h3: 1.25rem;      /* 20px */
  --fe-text: 1.0625rem;  /* 17px */
  --fe-sub: 0.875rem;    /* 14px */
  --fe-label: 0.75rem;   /* 12px */
  --fe-nav: 0.9375rem;   /* 15px */
  --fe-btn: 1rem;        /* 16px */

  --fe-page: 1100px;
  --fe-read: 720px;
  --fe-gutter: 24px;
  --fe-section: 80px;
}
@media (max-width: 640px) {
  :root {
    --fe-h1: 2rem;        /* 32px */
    --fe-h2: 1.5rem;      /* 24px */
    --fe-h3: 1.1875rem;   /* 19px */
    --fe-text: 1rem;      /* 16px */
    --fe-gutter: 20px;
    --fe-section: 52px;
  }
}

/* ── Base ─────────────────────────────────────────────────────────────── */
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--fe-body) !important;
  font-size: var(--fe-text) !important;
  line-height: 1.75;
  color: var(--fe-ink);
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; }

/* ── Text styles ──────────────────────────────────────────────────────── */
h1, .hero-lead {
  font-family: var(--fe-head) !important;
  font-size: var(--fe-h1) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.01em;
}
h2, .section-title, .stat-num, .calc-out .big {
  font-family: var(--fe-head) !important;
  font-size: var(--fe-h2) !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
}
h3, h4, .card-title {
  font-family: var(--fe-head) !important;
  font-size: var(--fe-h3) !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
}
p, li, td, th, dd, dt, blockquote, input, select, textarea,
.hero-sub, .hero-body, .hero-body p, .section-sub, .cta-sub, .card-desc,
.faq-answer, .faq-question, .explainer-body p, .contact-sub, .contact-heading + p {
  font-size: var(--fe-text) !important;
}
.hero-meta, .article-meta, .article-meta span, .breadcrumb, .breadcrumb a, .breadcrumb span,
.cta-note, .calc-note, .gate-note, .hero-trust-line, .stat-label, .card-position,
figcaption, small, .form-group label, .gate-consent, .entry__error,
.contact-detail a, .contact-detail span, .data-table th, .footer-tagline,
.footer-links a, .footer-bottom, .footer-bottom span, .footer-legal a, .related-card a {
  font-size: var(--fe-sub) !important;
  line-height: 1.6 !important;
}
.section-label, .hero-pill, .dl-label, .rc-label, .tag, .blog-tag, .report-sector,
.report-badge, .footer-col h5, .related-card .tag, .card-position-label {
  font-family: var(--fe-body) !important;
  font-size: var(--fe-label) !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  line-height: 1.4 !important;
}
.nav-link, .nav-dropdown a { font-size: var(--fe-nav) !important; }
.btn-primary, .btn-secondary, .header-cta, .dl-btn, .btn-download, .card-cta,
.btn-cta-box, .blog-link, .email-submit, button[type="submit"] {
  font-family: var(--fe-head) !important;
  font-size: var(--fe-btn) !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}
.logo-text { font-size: 1.25rem !important; font-family: var(--fe-head) !important; font-weight: 700 !important; }

/* Headings colour on light backgrounds stays navy; on dark sections pages set white. */

/* ── One page frame ───────────────────────────────────────────────────── */
.container, .nav-inner, .footer-inner, .related-inner, .article-wrap,
.whats-in-inner, .email-capture-inner, .cta-inner {
  width: 100%;
  max-width: var(--fe-page) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--fe-gutter) !important;
  padding-right: var(--fe-gutter) !important;
  box-sizing: border-box;
}
/* nested frames must not double the gutter */
.container .container, .container .whats-in-inner, .container .cta-inner,
.container .email-capture-inner, section .container > .container {
  padding-left: 0 !important; padding-right: 0 !important;
}

/* Reading column: same left edge as the frame, capped for comfortable line length */
.article-wrap > *, .article-body > *, .page-hero .container > *,
.whats-in-inner > *, .email-capture-inner > * {
  max-width: var(--fe-read);
}
.article-wrap > .article-body { max-width: none; }
.article-wrap, .article-body { margin-left: auto; }
.article-wrap { padding-top: 56px !important; padding-bottom: 64px !important; }
@media (max-width: 640px) {
  .article-wrap { padding-top: 36px !important; padding-bottom: 44px !important; }
}

/* Section rhythm */
.section, .how-section, .cards-section, .whats-in, .related-section, .cta-section,
.contact-section, .request-section {
  padding-top: var(--fe-section) !important;
  padding-bottom: var(--fe-section) !important;
}
.page-hero, .home-hero {
  padding-top: calc(var(--fe-section) * 0.9) !important;
  padding-bottom: calc(var(--fe-section) * 0.9) !important;
}
.cta-section { text-align: left !important; }
.cta-section > div, .cta-section .container { text-align: left !important; }
.cta-section .cta-sub { margin-left: 0 !important; margin-right: 0 !important; max-width: var(--fe-read); }

/* ── Article figure (photo under the hero) ────────────────────────────── */
.fe-figure { margin: 0 0 32px; max-width: var(--fe-read); }
.fe-figure img { display: block; width: 100%; height: auto; border-radius: 12px; aspect-ratio: 16 / 9; object-fit: cover; }
.fe-figure figcaption { color: var(--fe-muted); margin-top: 8px; }

/* Split block: text beside a photo, stacks on phones */
.fe-split { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.fe-split img { display: block; width: 100%; height: auto; border-radius: 12px; object-fit: cover; aspect-ratio: 4 / 3; }
@media (max-width: 860px) { .fe-split { grid-template-columns: minmax(0, 1fr); gap: 28px; } }

/* Hero with photo background (darkened so text stays readable) */
.fe-photo-hero { background-size: cover !important; background-position: center !important; }

/* ── Mobile safety net ────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .data-table-wrap { margin-left: 0; margin-right: 0; }
  .btn-primary, .btn-secondary { display: block; width: 100%; text-align: center; box-sizing: border-box; }
  .hero-ctas, .contact-links { flex-direction: column; align-items: stretch !important; }
  .dl-box { padding: 20px !important; }
  .dl-btn { display: block; width: 100%; text-align: center; box-sizing: border-box; }
  input, select, textarea { font-size: 16px !important; } /* stops iOS zooming into fields */
}

/* ── Components mapped onto the system ────────────────────────────────── */
.calc-box .calc-row, .calc-box .calc-row span, .calc-box h4 { font-size: var(--fe-text) !important; }
.calc-grid label, .calc-tool .calc-note { font-size: var(--fe-sub) !important; }
.dl-box .dl-text p, .dl-box p, .related-card p, .report-card p, .blog-card p { font-size: var(--fe-sub) !important; line-height: 1.6 !important; }
.calc-out p { font-size: var(--fe-text) !important; }

/* ── Tap targets: at least 44px tall for anything a thumb presses ─────── */
@media (max-width: 900px) { .nav-toggle { min-width: 44px; min-height: 44px; } }
.related-card a, .related-card .read, .blog-link, .card-cta, .footer-links a, .footer-legal a {
  display: inline-flex; align-items: center; min-height: 44px;
}
.btn-primary, .btn-secondary, .header-cta, .dl-btn, .btn-download { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 640px) {
  .btn-primary, .btn-secondary, .dl-btn { display: flex; }
}

/* Bold text inside dark boxes inherits the box colour (article rules made it navy,
   which hid the £23,300 total in the debtor-days worked example). */
.calc-box strong, .article-stat strong, .dl-box strong, .cta-section strong,
.home-hero strong, .page-hero strong, .contact-section strong, .section-dark strong { color: inherit !important; }

/* ── Footer: two columns on phones instead of one long list ───────────── */
@media (max-width: 640px) {
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 8px 20px !important; }
  .footer-grid .footer-brand { grid-column: 1 / -1; margin-bottom: 8px; }
  .footer-links li { margin-bottom: 0 !important; }
  .footer-col h5 { margin-bottom: 4px !important; margin-top: 12px; }
}
@media (max-width: 640px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .footer-grid > * { min-width: 0; max-width: none !important; width: auto !important; }
}
@media (max-width: 640px) {
  .footer-grid .footer-col:last-child { grid-column: 1 / -1; }   /* email address needs the full width */
  .footer-links a { overflow-wrap: anywhere; }
}

/* ── Alignment: every heading, label and intro starts on the frame's left edge ── */
h1, h2, .section-label, .section-title, .section-sub, .hero-sub, .hero-body, .hero-pill,
.cards-intro, .cards-intro *, .cta-section h2, .cta-sub, .cta-note, .page-hero p, .hero-meta, .breadcrumb {
  text-align: left !important;
}
h1, h2, .section-label, .section-title, .section-sub, .hero-sub, .cta-sub, .cta-note, .cards-intro {
  margin-left: 0 !important; margin-right: 0 !important;
}
.hero-ctas, .hero-trust, .breadcrumb { justify-content: flex-start !important; }
.section-sub, .hero-sub, .cta-sub { max-width: var(--fe-read) !important; }

/* ── Sections never add side padding: the frame (.container etc.) owns the gutter ── */
section, .cta-section, .related-section, .page-hero, .home-hero, .section, .whats-in, .request-section,
.email-capture, .contact-section, .how-section, .cards-section, .industries-section {
  padding-left: 0 !important; padding-right: 0 !important;
}
/* any paragraph sits on the left edge, never centred */
main p, section p, .article-wrap p, .article-body p { text-align: left !important; }

/* ── Component text mapped onto the scale (product pages, cards, pricing) ── */
[class*="-label"], [class*="badge"], [class*="-tag"], [class*="chip"], [class*="-position"],
[class*="-num"], .tl-dot, .trust-item, .data-tag, .g-card-label, .sel-count {
  font-family: var(--fe-body) !important;
  font-size: var(--fe-label) !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  line-height: 1.4 !important;
}
.trust-item { text-transform: none !important; letter-spacing: 0 !important; font-weight: 600 !important; font-size: var(--fe-sub) !important; }
a[class*="-cta"]:not(.header-cta), button[class*="-cta"], a[class*="-btn"], button[class*="-btn"], .cta-contact-link {
  font-family: var(--fe-head) !important; font-size: var(--fe-btn) !important; font-weight: 600 !important;
}
[class*="pricing-name"], [class*="-amount"], [class*="discount"], .flow-letter, .faq-icon,
.guarantee-amount, .bundle-card-discount, .killer-num, .amount {
  font-family: var(--fe-head) !important; font-size: var(--fe-h3) !important; font-weight: 700 !important; line-height: 1.3 !important;
}
.flow-letter, .guarantee-amount, .bundle-card-discount { font-size: var(--fe-h2) !important; }
.faq-question, .faq-question *, .route-guarantee, .route-guarantee *, .contact-btn { font-size: var(--fe-text) !important; }
.route-guarantee, .route-guarantee * { font-size: var(--fe-sub) !important; }
td *, th *, li > span, p > span, p > strong, li > strong { font-size: inherit !important; }

/* ── Wide tables scroll inside their own box on phones instead of widening the page ── */
.article-wrap table:not(.data-table), .container table:not(.data-table), main table:not(.data-table) {
  display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
}

/* ── More tap targets: card links and buttons inside product cards ── */
a[class*="-cta"], [class*="card"] > a, [class*="card"] h3 > a, .tier-link {
  min-height: 44px; display: inline-flex; align-items: center;
}
.contact-detail a { display: inline-flex; align-items: center; min-height: 44px; }

/* Re-assert display numbers after the broad "-num" label rule */
.stat-num, .calc-out .big { font-family: var(--fe-head) !important; font-size: var(--fe-h2) !important; font-weight: 700 !important; letter-spacing: 0 !important; line-height: 1.2 !important; }
.card-position { font-size: var(--fe-sub) !important; letter-spacing: 0 !important; font-weight: 500 !important; text-transform: none !important; }

/* ── Last component mappings (legal pages, FLOW audit, FAQs, tier cards) ── */
.policy-header, .policy-content, .guarantee-flagship-inner {
  width: 100%; max-width: var(--fe-page) !important; margin-left: auto !important; margin-right: auto !important;
  padding-left: var(--fe-gutter) !important; padding-right: var(--fe-gutter) !important; box-sizing: border-box;
}
.policy-content > *, .policy-header > * { max-width: var(--fe-read); }
.policy-content table { display: block; max-width: 100%; overflow-x: auto; }
.checkpoint-letter { font-family: var(--fe-head) !important; font-size: var(--fe-h2) !important; font-weight: 700 !important; }
.checkpoint-header-text span, .checkpoint-header-text > span { font-size: var(--fe-label) !important; font-weight: 700 !important; letter-spacing: 0.08em !important; }
.faq-btn, .faq-btn span, .faq-btn * { font-family: var(--fe-body) !important; font-size: var(--fe-text) !important; font-weight: 600 !important; text-align: left !important; }
.pricing-card-desc { font-size: var(--fe-sub) !important; }
[class*="card"] h4 > a, [class*="card"] h3 > a { display: inline-flex; align-items: center; min-height: 44px; }
.area-chip span, .area-chip > span { font-size: var(--fe-sub) !important; font-weight: 400 !important; letter-spacing: 0 !important; text-transform: none !important; }
@media (min-width: 861px) { .fe-split--rev > div:first-child { order: 2; } }
.fe-split > div > *:last-child { margin-bottom: 0; }

/* Founder block (About): photo beside text on desktop, stacked on phones */
.fe-founder { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 40px; align-items: start; max-width: var(--fe-read); }
.fe-founder-photo { border-radius: 12px; overflow: hidden; }
.fe-founder-photo img { width: 100%; height: auto; display: block; }
@media (max-width: 640px) {
  .fe-founder { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .fe-founder-photo { max-width: 180px; }
}

/* Inner boxes inside the frame start on its left edge (product pages centred
   740px boxes inside the 1100px frame, so their headings sat ~160px in). */
.container > div, .container > form, .container > ul { margin-left: 0 !important; }

/* ── Calculator engine (assets/fe-calc.js) ────────────────────────────── */
.fe-calc { background: var(--fe-soft); border: 1px solid var(--fe-line); border-radius: 14px; padding: 24px; margin: 28px 0; max-width: var(--fe-read); box-sizing: border-box; }
.fe-calc-title { margin-top: 0 !important; }
.fe-calc-inputs { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 18px; }
.fe-calc-group { grid-column: 1 / -1; font-family: var(--fe-body); font-size: var(--fe-label) !important; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--fe-teal); margin-top: 6px; }
.fe-calc-field { display: flex; flex-direction: column; gap: 6px; font-size: var(--fe-sub) !important; font-weight: 600; color: var(--fe-navy); }
.fe-calc-field.fe-wide { grid-column: 1 / -1; }
.fe-calc-field small { font-weight: 400; color: var(--fe-muted); font-size: var(--fe-sub) !important; }
.fe-calc-field input, .fe-calc-field select, .fe-calc-field textarea { padding: 11px 12px; border: 1.5px solid #cbd5e1; border-radius: 8px; font-family: var(--fe-body); color: var(--fe-navy); background: #fff; min-height: 44px; box-sizing: border-box; width: 100%; }
.fe-calc-field input:focus, .fe-calc-field select:focus, .fe-calc-field textarea:focus { outline: none; border-color: var(--fe-teal); }
.fe-calc-out { background: #fff; border: 1px solid var(--fe-teal); border-radius: 10px; padding: 16px 18px; }
.fe-calc-row { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--fe-line); align-items: baseline; }
.fe-calc-row:last-child { border-bottom: 0; }
.fe-calc-row span { color: var(--fe-ink); }
.fe-calc-row strong { color: var(--fe-navy); text-align: right; white-space: nowrap; }
.fe-calc-row.fe-primary span, .fe-calc-row.fe-primary strong { font-family: var(--fe-head) !important; font-size: var(--fe-h3) !important; color: var(--fe-navy); }
.fe-calc-label { font-weight: 700; color: var(--fe-navy); margin: 8px 0 !important; }
.fe-calc-note { margin: 12px 0 0 !important; color: var(--fe-ink); }
.fe-capture { margin-top: 20px; padding-top: 18px; border-top: 1px dashed #cbd5e1; }
.fe-capture-title { font-family: var(--fe-head) !important; font-size: var(--fe-h3) !important; font-weight: 700; color: var(--fe-navy); margin: 0 0 4px !important; }
.fe-capture-sub { color: var(--fe-muted); margin: 0 0 12px !important; font-size: var(--fe-sub) !important; }
.fe-capture-row { display: flex; gap: 10px; flex-wrap: wrap; }
.fe-capture-row input { flex: 1 1 220px; padding: 12px 14px; border: 1.5px solid #cbd5e1; border-radius: 10px; font-family: var(--fe-body); min-height: 48px; box-sizing: border-box; }
.fe-capture-row .btn-primary { flex: 0 0 auto; }
.fe-capture-consent { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; font-size: var(--fe-sub) !important; color: var(--fe-ink); cursor: pointer; }
.fe-capture-consent input { margin-top: 3px; width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--fe-teal); }
.fe-capture-status { display: none; border-radius: 8px; padding: 12px 14px; margin-bottom: 10px; }
.fe-capture-status.ok { display: block; background: #e7faf0; border: 1px solid #13ce66; color: #085229; }
.fe-capture-status.err { display: block; background: #ffeded; border: 1px solid #ff4949; color: #661d1d; }
.fe-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 640px) {
  .fe-calc { padding: 18px 16px; }
  .fe-calc-row { flex-direction: column; gap: 2px; }
  .fe-calc-row strong { text-align: left; white-space: normal; }
  .fe-capture-row .btn-primary { flex: 1 1 100%; }
}
/* Method diagram figure (inline SVG) */
.fe-diagram { margin: 0 0 32px; max-width: var(--fe-read); background: #fff; border: 1px solid var(--fe-line); border-radius: 12px; padding: 16px; box-sizing: border-box; }
.fe-diagram svg { display: block; width: 100%; height: auto; }
.fe-diagram figcaption { color: var(--fe-muted); margin-top: 8px; }
.fe-sources { border-top: 1px solid var(--fe-line); margin-top: 40px; padding-top: 20px; }
.fe-sources li, .fe-sources p { font-size: var(--fe-sub) !important; color: var(--fe-muted); }

/* Diagrams: wide version on larger screens, stacked version on phones */
.fe-diagram svg.fe-d-v { display: none; }
@media (max-width: 600px) {
  .fe-diagram svg.fe-d-h { display: none; }
  .fe-diagram svg.fe-d-v { display: block; max-width: 340px; margin: 0 auto; }
}

/* Tables: never split a word or a number; the wrapper scrolls sideways if a table is too wide */
.data-table th, .data-table td { overflow-wrap: normal !important; word-break: normal !important; hyphens: manual !important; }
.data-table td.num, .data-table th.num { white-space: nowrap !important; }
.data-table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; max-width: 100%; }