/* ==========================================================================
   FlowMerce front-end styles
   Source of truth: FlowMerce Brand Guide (Concept 2A).
   Colors: Brand Color System + full scales. Typography: Plus Jakarta Sans.
   ========================================================================== */

/* ---------- Fonts (self-hosted variable WOFF2, SIL OFL) ------------------ */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/plus-jakarta-sans-latin-wght.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/plus-jakarta-sans-latin-ext-wght.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens ------------------------------------------------------- */
:root {
  --navy: #0B1F3B;
  --navy-800: #223550;
  --navy-50: #F5F7F9;
  --blue: #1D4ED8;
  --blue-500: #2563EB;
  --blue-700: #133DB6;
  --blue-100: #D7E8FF;
  --blue-50: #F0F7FF;
  --cyan: #00C2D9;
  --teal: #14B8A6;
  --teal-100: #D8F4EE;
  --teal-700: #007567;
  --slate-500: #7C8B9F;
  --slate-600: #64748B;
  --slate-700: #4D5B6F;
  --slate-100: #E7EAEF;
  --gray-200: #E5E7EB;
  --gray-100: #F0F1F4;
  --gray-50: #F6F7F8;

  --grad-brand: linear-gradient(90deg, #1D4ED8 0%, #00C2D9 100%);
  --grad-dark: linear-gradient(90deg, #0B1F3B 0%, #1D4ED8 100%);

  --r-xl: 28px;
  --r-lg: 20px;
  --r-md: 14px;
  --r-sm: 10px;
  --sh-sm: 0 1px 2px rgba(11, 31, 59, .05), 0 4px 12px rgba(11, 31, 59, .05);
  --sh-md: 0 2px 4px rgba(11, 31, 59, .04), 0 12px 32px -8px rgba(11, 31, 59, .12);
  --sh-lg: 0 4px 8px rgba(11, 31, 59, .04), 0 24px 56px -12px rgba(11, 31, 59, .22);
  --container: 1200px;
  --gutter: 24px;
  --header-h: 72px;
}

/* Accent scopes. Default is the FlowMerce brand blue; each product overrides it
   (Brand Guide: Orange = FlowShip, Green = FlowPilot, Purple = FlowMerchant).
   -700 steps are used wherever the accent carries text, to keep AA contrast. */
:root { --ac: #2563EB; --ac-50: #F0F7FF; --ac-100: #D7E8FF; --ac-600: #1D4ED8; --ac-700: #133DB6; --ac-glow: rgba(37, 99, 235, .14); }
.is-ship, .fm-ui--ship { --ac: #F97316; --ac-50: #FFF3EA; --ac-100: #FFE5D4; --ac-600: #CF5700; --ac-700: #A63B00; --ac-glow: rgba(249, 115, 22, .16); }
.is-pilot, .fm-ui--pilot { --ac: #22C55E; --ac-50: #ECFCEE; --ac-100: #D8F7DD; --ac-600: #00A043; --ac-700: #007D29; --ac-glow: rgba(34, 197, 94, .16); }
.is-commerce, .fm-ui--commerce { --ac: #8B5CF6; --ac-50: #F7F5FF; --ac-100: #EAE4FF; --ac-600: #7347D2; --ac-700: #5D33B0; --ac-glow: rgba(139, 92, 246, .16); }

/* ---------- Base --------------------------------------------------------- */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #fff; color: var(--slate-700); font-weight: 450; font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
img, svg { max-width: 100%; height: auto; }
img { display: block; }
h1, h2, h3, h4 { text-wrap: balance; letter-spacing: -0.028em; }
h1 { letter-spacing: -0.04em; }
p { text-wrap: pretty; }
a { text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--blue-500); outline-offset: 3px; border-radius: 6px; }
.fm-dark :focus-visible, .fm-footer :focus-visible, .fm-cta :focus-visible { outline-color: #fff; }
.fm-skip { position: absolute; inset-inline-start: 16px; top: -64px; z-index: 100; background: var(--navy); color: #fff; padding: 12px 18px; border-radius: 10px; font-weight: 700; text-decoration: none; transition: top .15s; }
.fm-skip:focus { top: 12px; }
.screen-reader-text, .fm-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

.fm-main { display: block; }
.fm-nw { white-space: nowrap; }
.fm-main > * + *, .fm-main .wp-block-post-content > * + * { margin-block-start: 0; }
.fm-container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); box-sizing: border-box; }
.fm-section { padding-block: clamp(52px, 6.5vw, 92px); position: relative; }
.fm-section--tight { padding-block: clamp(40px, 5vw, 64px); }
.fm-section--tint { background: var(--navy-50); }
.fm-section--flush { padding-bottom: 0; }
.fm-section--blue { background: var(--blue-50); }
.fm-section--dark { background: var(--navy); color: rgba(255, 255, 255, .78); }
.fm-section--dark h2, .fm-section--dark h3 { color: #fff; }
.fm-section--dark .fm-eyebrow { color: #7DE7F2; }
.fm-section--dark .fm-lead { color: rgba(255, 255, 255, .78); }

/* Intro blocks */
.fm-intro { max-width: 760px; margin: 0 0 clamp(32px, 4vw, 52px); }
.fm-intro--center { margin-inline: auto; text-align: center; }
.fm-intro h2, .fm-intro h1 { margin: 0 0 16px; }
.fm-intro .fm-lead { margin: 0; }
.fm-intro--center .fm-lead { margin-inline: auto; }

.fm-eyebrow { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 14px; font-size: .8125rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--blue); }
.fm-eyebrow::before { content: ""; width: 22px; height: 3px; border-radius: 3px; background: var(--ac, var(--blue)); }
.fm-section--dark .fm-eyebrow::before { background: var(--cyan); }
.is-ship .fm-eyebrow, .is-pilot .fm-eyebrow, .is-commerce .fm-eyebrow { color: var(--ac-700); }
.fm-lead { font-size: var(--wp--preset--font-size--lead, 1.1875rem); line-height: 1.6; color: var(--slate-700); max-width: 62ch; margin: 0; }
.fm-small { font-size: .875rem; color: var(--slate-600); }

/* ---------- Buttons ------------------------------------------------------ */
.wp-block-buttons.fm-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 32px 0 0; }
.fm-actions--center { justify-content: center; }
.wp-block-button__link, .fm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--blue); color: #fff; border: 1.5px solid transparent; border-radius: 12px;
  padding: .85rem 1.45rem; font-family: inherit; font-size: 1rem; font-weight: 700; line-height: 1.2; text-decoration: none;
  box-shadow: 0 1px 2px rgba(29, 78, 216, .25), 0 8px 18px -8px rgba(29, 78, 216, .55);
  transition: background-color .15s, transform .15s, box-shadow .15s, border-color .15s; cursor: pointer;
}
.wp-block-button__link:hover, .fm-btn:hover { background: var(--blue-500); color: #fff; transform: translateY(-1px); }
.wp-block-button.is-style-fm-secondary .wp-block-button__link { background: #fff; color: var(--navy); border-color: #C6CDD7; box-shadow: var(--sh-sm); }
.wp-block-button.is-style-fm-secondary .wp-block-button__link:hover { border-color: var(--blue-500); color: var(--blue); background: #fff; }
.wp-block-button.is-style-fm-on-dark .wp-block-button__link { background: #fff; color: var(--navy); box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .35); }
.wp-block-button.is-style-fm-on-dark .wp-block-button__link:hover { background: var(--blue-50); color: var(--navy); }
.wp-block-button.is-style-fm-outline-light .wp-block-button__link { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); box-shadow: none; }
.wp-block-button.is-style-fm-outline-light .wp-block-button__link:hover { background: rgba(255, 255, 255, .12); border-color: #fff; color: #fff; }
.fm-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--ac-700, var(--blue)); text-decoration: none; }
.fm-link:hover { text-decoration: underline; }
.fm-link .fm-i { transition: transform .15s; }
.fm-link:hover .fm-i { transform: translateX(3px); }
.fm-i { flex: none; display: inline-block; vertical-align: middle; }
.fm-i--sm { width: 18px; height: 18px; }
.fm-i--xs { width: 12px; height: 12px; }
.fm-i--check { width: 20px; height: 20px; }

/* ---------- Header + navigation ----------------------------------------- */
.fm-header { position: sticky; top: 0; z-index: 60; border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s; }
/* The blur lives on a pseudo-element: backdrop-filter on the header itself would trap the mobile menu overlay (position: fixed) inside it. */
.fm-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: saturate(1.5) blur(14px); backdrop-filter: saturate(1.5) blur(14px); }
.fm-header.is-stuck { border-color: var(--gray-200); box-shadow: 0 6px 24px -16px rgba(11, 31, 59, .25); }
.admin-bar .fm-header { top: 32px; }
.fm-header__inner { max-width: calc(var(--container) + var(--gutter) * 2); margin: 0 auto; padding: 12px var(--gutter); min-height: var(--header-h); box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.fm-logo { display: inline-flex; flex: none; line-height: 0; border-radius: 8px; }
.fm-logo img { height: 44px; width: auto; }
.fm-nav { font-size: .9375rem; font-weight: 600; }
.fm-nav .wp-block-navigation__container { gap: 4px; align-items: center; }
.fm-nav .wp-block-navigation-item__content { color: var(--navy); text-decoration: none; padding: 9px 13px; border-radius: 10px; transition: background-color .15s, color .15s; }
.fm-nav .wp-block-navigation-item__content:hover { background: var(--blue-50); color: var(--blue); }
.fm-nav .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
.fm-nav .wp-block-navigation-item__content[aria-current="page"] { color: var(--blue); }
.fm-nav .wp-block-navigation-submenu__toggle { padding: 4px; color: var(--navy); }
.fm-nav .wp-block-navigation__submenu-container { min-width: 250px; padding: 8px; background: #fff; color: var(--navy); border: 1px solid var(--gray-200); border-radius: 16px; box-shadow: var(--sh-lg); }
.fm-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content { display: flex; align-items: center; gap: 12px; padding: 10px 12px; font-weight: 700; }
.fm-nav .wp-block-navigation__submenu-container a::before { content: ""; width: 24px; height: 24px; flex: none; background: center / contain no-repeat; }
.fm-nav a[href$="/flowship/"]::before { background-image: url("../logos/flowship_mark.svg"); }
.fm-nav a[href$="/flowpilot/"]::before { background-image: url("../logos/flowpilot_mark.svg"); }
.fm-nav a[href$="/flowmerchant/"]::before { background-image: url("../logos/flowmerchant_mark.svg"); }
.fm-nav .wp-block-navigation__submenu-container a[href*="/solutions/"]::before { width: 10px; height: 10px; margin: 0 7px; border-radius: 50%; background: var(--blue-500); }
.fm-nav a[href$="/solutions/ecommerce/"]::before { background: #8B5CF6; }
.fm-nav a[href$="/solutions/shipping-last-mile/"]::before { background: #F97316; }
.fm-nav a[href$="/solutions/customer-operations/"]::before { background: #22C55E; }
.fm-nav .fm-nav__all a::before { background-image: url("../logos/flowmerce_mark.svg"); }
.fm-nav .fm-nav__cta > .wp-block-navigation-item__content { background: var(--blue); color: #fff; margin-inline-start: 10px; padding: 10px 20px; border-radius: 12px; box-shadow: 0 1px 2px rgba(29, 78, 216, .25), 0 8px 18px -8px rgba(29, 78, 216, .55); }
.fm-nav .fm-nav__cta > .wp-block-navigation-item__content:hover { background: var(--blue-500); color: #fff; }
.fm-nav .wp-block-navigation__responsive-container-open, .fm-nav .wp-block-navigation__responsive-container-close { color: var(--navy); padding: 8px; border-radius: 10px; }
.fm-nav .wp-block-navigation__responsive-container-open svg, .fm-nav .wp-block-navigation__responsive-container-close svg { width: 28px; height: 28px; }
.fm-nav .wp-block-navigation__responsive-container.is-menu-open { background: #fff; color: var(--navy); padding: 20px var(--gutter) 32px; }
.fm-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 4px; align-items: stretch; width: 100%; }
.fm-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-size: 1.25rem; padding: 14px 12px; }
.fm-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { border: 0; box-shadow: none; padding: 0; padding-inline-start: 8px; min-width: 0; }
.fm-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { font-size: 1.0625rem; }
.fm-nav .is-menu-open .wp-block-navigation__responsive-container-content { align-items: stretch; justify-content: flex-start; padding-top: 24px; }
.fm-nav .is-menu-open .wp-block-navigation__container, .fm-nav .is-menu-open .wp-block-navigation__submenu-container { align-items: stretch; justify-content: flex-start; text-align: start; }
.fm-nav .is-menu-open .wp-block-navigation-item { align-items: stretch; width: 100%; }
.fm-nav .is-menu-open .wp-block-navigation-item:not(.fm-nav__cta) > .wp-block-navigation-item__content { color: var(--navy); }
.fm-nav .is-menu-open .wp-block-navigation-item:not(.fm-nav__cta) > .wp-block-navigation-item__content:hover { color: var(--blue); }
.fm-nav .is-menu-open .fm-nav__cta > .wp-block-navigation-item__content { color: #fff; flex: 1; }
.fm-nav .wp-block-navigation__responsive-container.is-menu-open .fm-nav__cta { margin-top: 16px; }
.fm-nav .wp-block-navigation__responsive-container.is-menu-open .fm-nav__cta > .wp-block-navigation-item__content { margin: 0; justify-content: center; text-align: center; }

/* ---------- Footer ------------------------------------------------------- */
.fm-footer { background: var(--navy); color: rgba(255, 255, 255, .72); padding-top: clamp(48px, 6vw, 80px); font-size: .9375rem; }
.fm-footer a { color: rgba(255, 255, 255, .82); text-decoration: none; }
.fm-footer a:hover { color: #fff; text-decoration: underline; }
.fm-footer__grid { display: grid; grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr)); gap: 40px; padding-bottom: 48px; }
.fm-footer__brand p { max-width: 38ch; margin: 18px 0 0; line-height: 1.65; }
.fm-footer__logo { display: inline-block; line-height: 0; }
.fm-footer__logo img { height: 48px; width: auto; }
.fm-footer__col h2 { margin: 0 0 16px; font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.fm-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fm-footer__base { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-block: 24px 32px; font-size: .8125rem; color: rgba(255, 255, 255, .62); }
.fm-footer__base::before { content: ""; position: absolute; top: 0; inset-inline-start: var(--gutter); inset-inline-end: var(--gutter); height: 1px; background: rgba(255, 255, 255, .14); }
.fm-footer__base p { margin: 0; }

/* ---------- Hero --------------------------------------------------------- */
.fm-hero { position: relative; overflow: hidden; padding-block: clamp(40px, 5.5vw, 80px) clamp(48px, 6vw, 88px); background: radial-gradient(900px 480px at 88% -8%, var(--ac-100, var(--blue-100)) 0%, rgba(255, 255, 255, 0) 65%), linear-gradient(180deg, var(--ac-50, var(--blue-50)) 0%, #fff 78%); }
.fm-hero__grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
:where(.fm-hero__copy) > * { margin-block: 0; }
.fm-hero h1 { margin: 0 0 20px; }
.fm-hero .fm-lead { font-size: 1.25rem; }
.fm-hero--center { text-align: center; }
.fm-hero--center .fm-hero__copy { max-width: 820px; margin-inline: auto; }
.fm-hero--center .fm-lead { margin-inline: auto; }
.fm-hero--page { padding-block: clamp(48px, 6vw, 88px) clamp(40px, 5vw, 72px); }
.fm-hero--404 { padding-block: clamp(72px, 12vw, 160px); }
.fm-404__mark { width: 72px; height: auto; margin: 0 auto 24px; }
.fm-hero__badges { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 22px; }
.fm-hero__logo { margin: 0 0 22px; line-height: 0; }
.fm-hero__logo img { height: 56px; width: auto; margin-inline-start: -8px; }
.fm-hero em, .fm-accent { font-style: normal; color: var(--ac-600, var(--blue)); }
.is-ship .fm-accent { color: var(--ac-700); }
.fm-chiplinks { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 32px 0 0; padding: 0; justify-content: center; }
.fm-chiplink { display: inline-flex; align-items: center; gap: 8px; padding-block: 8px; padding-inline: 10px 16px; border: 1px solid var(--gray-200); border-radius: 999px; background: #fff; color: var(--navy); font-weight: 700; font-size: .9375rem; text-decoration: none; box-shadow: var(--sh-sm); transition: transform .15s, border-color .15s; }
.fm-chiplink:hover { transform: translateY(-1px); border-color: var(--ac); }
.fm-hero__chips { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 32px 0 0; padding: 0; }
.fm-hero__chips .fm-chiplink { padding-inline-end: 16px; }
.fm-hero__visual { min-width: 0; }

/* Status strip (honest MVP / roadmap summary on product pages) */
.fm-status { display: grid; grid-template-columns: repeat(3, 1fr); background: #fff; border: 1px solid var(--gray-200); border-radius: var(--r-lg); box-shadow: var(--sh-sm); margin-top: clamp(32px, 4vw, 56px); }
.fm-status > div { padding: 20px 24px; }
.fm-status > div + div { border-inline-start: 1px solid var(--gray-200); }
.fm-status dt, .fm-status span.fm-status__k { display: block; margin: 0 0 6px; font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ac-700, var(--blue)); }
.fm-status dd, .fm-status p { margin: 0; font-size: .9375rem; color: var(--navy); font-weight: 600; line-height: 1.5; }

/* ---------- Badges / chips ---------------------------------------------- */
.fm-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: .75rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; line-height: 1.3; white-space: nowrap; }
.fm-badge--mvp { background: var(--ac-700); color: #fff; }
.fm-badge--road { background: #fff; color: var(--slate-700); box-shadow: inset 0 0 0 1.5px #A8B2BF; }
.fm-badge--later { background: var(--gray-100); color: var(--slate-700); }
.fm-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: .6875rem; font-weight: 700; line-height: 1.6; white-space: nowrap; }
.fm-chip--received { background: var(--slate-100); color: #374353; }
.fm-chip--transit, .fm-chip--fb { background: var(--blue-100); color: var(--blue-700); }
.fm-chip--delivered, .fm-chip--settled, .fm-chip--ok { background: var(--teal-100); color: var(--teal-700); }
.fm-chip--returned, .fm-chip--pending, .fm-chip--low { background: #FFE5D4; color: #A63B00; }
.fm-chip--wa { background: #D8F7DD; color: #007D29; }
.fm-chip--ig, .fm-chip--commerce { background: #EAE4FF; color: #5D33B0; }
.fm-chip--road { background: #fff; color: var(--slate-700); box-shadow: inset 0 0 0 1px #A8B2BF; }
.fm-chip--later { background: var(--gray-100); color: var(--slate-700); }

/* ---------- Cards and grids --------------------------------------------- */
.fm-grid { display: grid; gap: 24px; }
.fm-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fm-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fm-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fm-card { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--r-lg); padding: 28px; box-shadow: var(--sh-sm); position: relative; }
.fm-card h3 { margin: 0 0 10px; }
.fm-card p { margin: 0; }
.fm-card p + p { margin-top: 10px; }
.fm-card__ico { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--ac-50, var(--blue-50)); color: var(--ac-700, var(--blue)); margin-bottom: 18px; }
.fm-card__ico .fm-i { width: 24px; height: 24px; }
.fm-card--flat { box-shadow: none; }
.fm-card .fm-checks { margin-top: 16px; }

/* Product cards (ecosystem) */
.fm-pcard { display: flex; flex-direction: column; padding: 0; overflow: hidden; transition: transform .2s, box-shadow .2s; }
.fm-pcard:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.fm-pcard::before { content: ""; height: 5px; background: var(--ac); }
.fm-pcard__body { padding: 28px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.fm-pcard__logo { line-height: 0; margin: 0 0 4px; margin-inline-start: -6px; }
.fm-pcard__logo img { height: 44px; width: auto; }
.fm-pcard__role { margin: 0; font-size: .8125rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ac-700); }
.fm-pcard p { margin: 0; }
.fm-pcard .fm-link { margin-top: auto; padding-top: 6px; }
.fm-pcard__flow { display: inline-flex; margin: 0; font-size: .8125rem; color: var(--slate-600); }

/* Checklist */
.fm-checks { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 12px; }
.fm-checks li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; line-height: 1.5; }
.fm-checks .fm-i--check { color: var(--ac-700, var(--blue)); margin-top: 1px; }
.fm-checks li span strong { color: var(--navy); }

/* Product showcase rows */
.fm-prows { display: grid; gap: clamp(56px, 8vw, 112px); }
.fm-prow { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.fm-prow--rev .fm-prow__text { order: 2; }
:where(.fm-prow__text) > * { margin-block: 0; }
.fm-prow__logo { margin: 0 0 18px; line-height: 0; }
.fm-prow__logo img { height: 52px; width: auto; margin-inline-start: -7px; }
.fm-prow__badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.fm-prow h3 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.125rem); margin: 0 0 14px; line-height: 1.15; }
.fm-prow__text > p { margin: 0; }
.fm-prow .fm-link { margin-top: 24px; }
.fm-prow__vis { position: relative; min-width: 0; padding: clamp(18px, 3vw, 36px); border-radius: var(--r-xl); background: radial-gradient(420px 300px at 85% 0%, var(--ac-glow), transparent 70%), var(--ac-50); border: 1px solid var(--ac-100); }
.fm-prow__vis .fm-ui + .fm-ui { margin-top: 18px; }

/* Steps */
.fm-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; counter-reset: step; list-style: none; margin: 0; padding: 0; }
.fm-step { counter-increment: step; background: #fff; border: 1px solid var(--gray-200); border-radius: var(--r-lg); padding: 24px; box-shadow: var(--sh-sm); }
.fm-step::before { content: counter(step); display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--ac-700, var(--blue)); color: #fff; font-weight: 800; margin-bottom: 16px; }
.fm-step h3 { font-size: 1.125rem; margin: 0 0 8px; }
.fm-step p { margin: 0; font-size: .9375rem; }
.fm-steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Capability cards */
.fm-cap__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.fm-cap__top .fm-card__ico { margin: 0; }

/* Tabs (FlowPilot product tour) */
.fm-tabs__list { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 12px; margin: 0 0 8px; scrollbar-width: thin; }
.js .fm-tabs__list { display: flex; }
.fm-tabs__list:not([role]) { display: none; }
.fm-tab { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 999px; border: 1.5px solid #C6CDD7; background: #fff; color: var(--navy); font: 700 .9375rem/1 inherit; font-family: inherit; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; }
.fm-tab:hover { border-color: var(--ac-700); color: var(--ac-700); }
.fm-tab[aria-selected="true"] { background: var(--ac-700); border-color: var(--ac-700); color: #fff; }
.fm-tabpanel { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 72px); align-items: center; padding-top: 28px; }
.fm-tabpanel + .fm-tabpanel { margin-top: 56px; }
.js .fm-tabpanel + .fm-tabpanel { margin-top: 0; }
.fm-tabpanel[hidden] { display: none; }
.fm-tabpanel__text h3 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.875rem); margin: 0 0 12px; }
.fm-tabpanel__text p { margin: 0; }
.fm-tabpanel__text .fm-badge { margin-bottom: 16px; }
.fm-tabpanel__vis { background: radial-gradient(420px 300px at 85% 0%, var(--ac-glow), transparent 70%), var(--ac-50); border: 1px solid var(--ac-100); border-radius: var(--r-xl); padding: clamp(18px, 3vw, 36px); display: grid; gap: 18px; justify-items: center; min-width: 0; }
.fm-tabpanel__vis > .fm-ui { width: 100%; }

/* Roadmap table */
.fm-road { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.fm-road__col { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--r-lg); padding: 26px; box-shadow: var(--sh-sm); }
.fm-road__col h3 { margin: 12px 0 14px; font-size: 1.125rem; }
.fm-road__col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.fm-road__col li { position: relative; padding-inline-start: 20px; font-size: .9375rem; line-height: 1.5; }
.fm-road__col li::before { content: ""; position: absolute; inset-inline-start: 0; top: .5em; width: 8px; height: 8px; border-radius: 50%; background: var(--ac); }
.fm-road__col--mvp { border-color: var(--ac); box-shadow: 0 0 0 3px var(--ac-100), var(--sh-sm); }
.fm-road__col--later li::before { background: #A8B2BF; }
.fm-road__col--later { background: var(--navy-50); box-shadow: none; }

/* Vision diagram (dark section) */
.fm-vision { display: grid; grid-template-columns: minmax(0, 1fr) minmax(140px, 220px) minmax(0, 1fr); gap: 0; align-items: center; margin-top: 8px; }
.fm-vision__src { display: grid; gap: 24px; }
.fm-vnode { background: #fff; color: var(--slate-700); border-radius: var(--r-lg); padding: 22px 24px; box-shadow: 0 24px 48px -20px rgba(0, 0, 0, .5); border-top: 5px solid var(--ac); }
.fm-vnode img { height: 40px; width: auto; margin: 0 0 10px; margin-inline-start: -5px; }
.fm-vnode strong { display: block; color: var(--navy); font-size: 1rem; }
.fm-vnode p { margin: 4px 0 0; font-size: .9375rem; }
.fm-vlinks { display: grid; gap: 24px; align-self: stretch; align-content: space-around; }
.fm-vlink { display: grid; justify-items: center; gap: 6px; text-align: center; color: #fff; font-size: .75rem; font-weight: 700; letter-spacing: .02em; padding: 0 8px; }
.fm-vlink__line { position: relative; width: 100%; height: 2px; background: linear-gradient(90deg, rgba(0, 194, 217, .15), #00C2D9); }
.fm-vlink__line::after { content: ""; position: absolute; right: -1px; top: 50%; width: 9px; height: 9px; border-top: 2px solid #00C2D9; border-right: 2px solid #00C2D9; transform: translateY(-50%) rotate(45deg); }
.fm-vision__note { margin: 36px 0 0; font-size: .9375rem; color: rgba(255, 255, 255, .72); max-width: 70ch; }

/* Status / now panel */
.fm-now { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.fm-now__item { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--r-lg); padding: 26px; box-shadow: var(--sh-sm); }
.fm-now__item h3 { font-size: 1.0625rem; margin: 14px 0 8px; }
.fm-now__item p { margin: 0; font-size: .9375rem; }

/* Compare table (Products page) */
.fm-compare { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid var(--gray-200); border-radius: var(--r-lg); box-shadow: var(--sh-sm); overflow: hidden; font-size: .9375rem; }
.fm-compare th, .fm-compare td { padding: 18px 20px; text-align: start; vertical-align: top; border-top: 1px solid var(--gray-200); line-height: 1.5; }
.fm-compare thead th { border-top: 0; background: var(--navy-50); font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; color: var(--slate-700); }
.fm-compare tbody th { color: var(--navy); font-weight: 800; white-space: nowrap; }
.fm-compare tbody th a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; }
.fm-compare tbody th img { width: 28px; height: auto; }

/* CTA band */
.fm-ctaband { padding-block: clamp(32px, 5vw, 64px) clamp(56px, 7vw, 104px); }
.fm-cta { position: relative; overflow: hidden; background: var(--grad-dark); color: rgba(255, 255, 255, .85); border-radius: var(--r-xl); padding: clamp(36px, 6vw, 80px) clamp(24px, 6vw, 80px); }
.fm-cta::after { content: ""; position: absolute; right: -40px; bottom: -60px; width: 340px; height: 340px; background: url("../logos/flowmerce_mark_white.svg") center / contain no-repeat; opacity: .08; pointer-events: none; }
.fm-cta > * { position: relative; z-index: 1; max-width: 700px; }
.fm-cta .fm-eyebrow { color: #7DE7F2; }
.fm-cta .fm-eyebrow::before { background: var(--cyan); }
.fm-cta h2 { color: #fff; margin: 0 0 16px; }
.fm-cta .fm-lead { color: rgba(255, 255, 255, .85); }
.fm-cta .fm-actions { margin-top: 28px; }
.fm-cta.fm-cta--center { text-align: center; }
.fm-cta.fm-cta--center > * { margin-inline: auto; }
.fm-cta.fm-cta--center .fm-actions { justify-content: center; }

/* ---------- Product UI mockups ------------------------------------------ */
.fm-ui { container-type: inline-size; margin: 0; width: 100%; box-sizing: border-box; background: #fff; border: 1px solid var(--gray-200); border-radius: var(--r-md); box-shadow: var(--sh-lg); overflow: hidden; font-size: .8125rem; line-height: 1.45; color: var(--slate-700); text-align: start; }
.fm-ui__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 14px; background: #FAFBFC; border-bottom: 1px solid var(--gray-200); }
.fm-ui__dots { display: inline-flex; gap: 5px; }
.fm-ui__dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--gray-200); display: block; }
.fm-ui__title { display: inline-flex; align-items: center; gap: 7px; font-weight: 800; color: var(--navy); font-size: .8125rem; min-width: 0; white-space: nowrap; }
.fm-ui__mark { width: auto; height: 16px; }
.fm-ui__tag { flex: none; margin-inline-start: auto; padding: 3px 9px; border-radius: 999px; background: var(--ac-50); color: var(--ac-700); font-size: .6875rem; font-weight: 800; letter-spacing: .02em; white-space: nowrap; }
.fm-ui__body { padding: 16px; }
.fm-ui__foot { margin: 12px 0 0; font-size: .75rem; color: var(--slate-600); }
.fm-ui__sub { margin: 16px 0 8px; font-weight: 800; color: var(--navy); }
.fm-ui__cap { margin: 14px 0 0; font-size: .75rem; font-weight: 700; color: var(--slate-700); text-align: center; }
.fm-ui--bare { background: none; border: 0; box-shadow: none; overflow: visible; container-type: normal; text-align: center; }
.fm-ui--muted { opacity: .92; border-style: dashed; box-shadow: var(--sh-sm); }
.fm-muted { color: var(--slate-600); font-size: .75rem; }
.mono, .num { font-variant-numeric: tabular-nums; }
.mono { font-weight: 700; color: var(--navy); }
.num { text-align: end; }
.fm-ui strong { color: var(--navy); }
.fm-ui p, .fm-ui ul, .fm-ui ol, .fm-ui dl, .fm-ui dd { margin: 0; }

.fm-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.fm-kpis--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fm-kpis--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fm-kpi { --k: #C6CDD7; display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--gray-200); border-top: 3px solid var(--k); border-radius: 10px; background: #fff; }
.fm-kpi.is-blue { --k: #2563EB; } .fm-kpi.is-teal { --k: #14B8A6; } .fm-kpi.is-orange { --k: #F97316; } .fm-kpi.is-purple { --k: #8B5CF6; }
.fm-kpi__label { font-size: .6875rem; font-weight: 700; color: var(--slate-600); }
.fm-kpi__val { font-size: 1.375rem; font-weight: 800; color: var(--navy); letter-spacing: -0.02em; line-height: 1.2; font-variant-numeric: tabular-nums; }
.fm-kpi__val--sm { font-size: .9375rem; }

.fm-table-wrap { overflow-x: auto; border: 1px solid var(--gray-200); border-radius: 10px; }
.fm-mt { width: 100%; border-collapse: collapse; }
.fm-mt th { padding: 8px 12px; background: var(--navy-50); text-align: start; font-size: .6875rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--slate-700); white-space: nowrap; }
.fm-mt th.num { text-align: end; }
.fm-mt td { padding: 9px 12px; border-top: 1px solid var(--gray-100); white-space: nowrap; vertical-align: middle; }
.fm-mt td.is-due { color: #A63B00; font-weight: 800; }
.fm-mt .fm-i--xs { margin: 0 3px; color: var(--slate-600); }

.fm-ship-head { display: flex; align-items: center; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--gray-100); }
.fm-ship-head > div { display: grid; gap: 1px; }
.fm-ship-head > div:last-child { margin-inline-start: auto; text-align: end; }
.fm-tl { list-style: none; margin: 16px 0 0; padding: 0; }
.fm-tl__item { position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; padding-bottom: 18px; }
.fm-tl__item:last-child { padding-bottom: 0; }
.fm-tl__item::before { content: ""; position: absolute; inset-inline-start: 8px; top: 18px; bottom: -2px; width: 2px; background: var(--gray-200); }
.fm-tl__item:last-child::before { display: none; }
.fm-tl__dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #C6CDD7; background: #fff; margin-top: 1px; box-sizing: border-box; z-index: 1; }
.fm-tl__item.is-done .fm-tl__dot { background: var(--teal); border-color: var(--teal); }
.fm-tl__item.is-now .fm-tl__dot { border-color: var(--ac); background: #fff; box-shadow: 0 0 0 4px var(--ac-100); }
.fm-tl__head { display: flex; justify-content: space-between; gap: 12px; }
.fm-tl__head span { color: var(--slate-600); font-variant-numeric: tabular-nums; }
.fm-tl p { margin-top: 2px; color: var(--slate-600); }

.fm-alerts { list-style: none; padding: 0; display: grid; gap: 10px; }
.fm-alert { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px; border: 1px solid var(--gray-200); border-radius: 12px; }
.fm-alert__ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: #FFE5D4; color: #A63B00; }
.fm-alert.is-blue .fm-alert__ico { background: var(--blue-100); color: var(--blue-700); }
.fm-alert__ico .fm-i { width: 20px; height: 20px; }
.fm-alert p { color: var(--slate-600); margin-top: 1px; }
.fm-alert__when { font-size: .6875rem; font-weight: 700; color: var(--slate-600); white-space: nowrap; }

.fm-bars { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; height: 140px; margin-top: 6px; }
.fm-bar { display: grid; grid-template-rows: 1fr auto; gap: 6px; }
.fm-bar__fill { align-self: end; background: linear-gradient(180deg, #F97316, #FFAD80); border-radius: 6px 6px 2px 2px; }
.fm-bar__lbl { text-align: center; font-size: .6875rem; font-weight: 700; color: var(--slate-600); }

/* FlowPilot: phone + chat */
.fm-phone { width: min(310px, 100%); margin: 0 auto; background: #fff; border-radius: 34px; border: 8px solid var(--navy); box-shadow: var(--sh-lg); overflow: hidden; text-align: start; box-sizing: border-box; }
.fm-phone__head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: #fff; border-bottom: 1px solid var(--gray-200); }
.fm-phone__av { width: auto; height: 28px; }
.fm-phone__head strong { display: block; color: var(--navy); font-size: .875rem; line-height: 1.2; }
.fm-phone__head span { display: flex; align-items: center; gap: 6px; font-size: .6875rem; color: var(--slate-600); }
.fm-phone__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ac); }
.fm-phone__body { display: flex; flex-direction: column; gap: 10px; padding: 14px 12px; min-height: 400px; background: linear-gradient(180deg, var(--ac-50), #fff); font-size: .8125rem; }
.fm-phone__input { display: flex; align-items: center; justify-content: space-between; margin: 0 10px 10px; padding: 9px 14px; border: 1px solid var(--gray-200); border-radius: 999px; color: var(--slate-600); background: #fff; }
.fm-phone__input .fm-i { color: var(--ac-700); }
.fm-msg { max-width: 86%; font-size: .8125rem; line-height: 1.45; }
.fm-msg p { padding: 9px 12px; border-radius: 14px; margin: 0; }
.fm-msg--in { align-self: flex-start; }
.fm-msg--in p { background: #fff; border: 1px solid var(--gray-200); border-end-start-radius: 4px; color: var(--navy); }
.fm-msg--out { align-self: flex-end; }
.fm-msg--out p { background: var(--ac-100); border-end-end-radius: 4px; color: var(--navy); }
.fm-phone--anim .fm-msg { opacity: 0; transform: translateY(8px); animation: fm-pop .45s ease forwards; animation-delay: var(--d, 0s); }
.js .fm-phone--anim:not(.is-in) .fm-msg { animation-play-state: paused; }
@keyframes fm-pop { to { opacity: 1; transform: none; } }

.fm-opts { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 6px; }
.fm-opt { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 12px; background: rgba(255, 255, 255, .8); border: 1.5px solid transparent; }
.fm-opt.is-picked { border-color: var(--ac-700); background: #fff; }
.fm-opt strong, .fm-opt em { display: block; font-style: normal; line-height: 1.3; }
.fm-opt em { color: var(--slate-600); font-size: .75rem; }
.fm-opt .fm-i--check { color: var(--ac-700); width: 18px; height: 18px; }
.fm-opt .fm-pimg { width: 40px; }

.fm-order { display: grid; gap: 14px; }
.fm-order__head { display: flex; align-items: center; gap: 12px; }
.fm-order__head > div { display: grid; }
.fm-order__head .fm-chip { margin-inline-start: auto; }
.fm-order__ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--ac-100); color: var(--ac-700); }
.fm-kvs { display: grid; border: 1px solid var(--gray-200); border-radius: 10px; overflow: hidden; }
.fm-kv { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; padding: 9px 12px; }
.fm-kv + .fm-kv { border-top: 1px solid var(--gray-100); }
.fm-kv dt { color: var(--slate-600); font-weight: 700; }
.fm-kv dd { color: var(--navy); font-weight: 700; }
.fm-order__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; color: var(--slate-600); }

.fm-handoff { display: grid; gap: 10px; }
.fm-handoff__card { margin-top: 6px; padding: 14px; border: 1.5px solid var(--ac); border-radius: 12px; background: var(--ac-50); display: grid; gap: 8px; }
.fm-handoff__head { display: flex; align-items: center; gap: 8px; }
.fm-handoff__head .fm-i { color: var(--ac-700); width: 20px; height: 20px; }
.fm-handoff__head .fm-chip { margin-inline-start: auto; }
.fm-handoff ul { padding-inline-start: 18px; display: grid; gap: 4px; }

.fm-flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.fm-flow__item { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; padding-bottom: 20px; align-items: start; }
.fm-flow__item:last-child { padding-bottom: 0; }
.fm-flow__item::before { content: ""; position: absolute; inset-inline-start: 19px; top: 40px; bottom: 0; width: 2px; background: repeating-linear-gradient(180deg, var(--ac) 0 4px, transparent 4px 8px); }
.fm-flow__item:last-child::before { display: none; }
.fm-flow__ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--ac-100); color: var(--ac-700); z-index: 1; }
.fm-flow p { color: var(--slate-600); margin-top: 1px; }

.fm-inbox { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border: 1px solid var(--gray-200); border-radius: 12px; overflow: hidden; }
.fm-convs { list-style: none; padding: 0; margin: 0; border-inline-end: 1px solid var(--gray-200); }
.fm-conv { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--gray-100); }
.fm-conv.is-active { background: var(--ac-50); }
.fm-conv__av { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--gray-100); color: var(--navy); font-weight: 800; }
.fm-conv strong { display: block; }
.fm-conv p { color: var(--slate-600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fm-thread { display: grid; gap: 10px; padding: 12px; align-content: start; background: linear-gradient(180deg, var(--ac-50), #fff); }
.fm-thread__head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 8px; border-bottom: 1px solid var(--gray-100); }

/* FlowMerchant (internal class key: commerce) */
.fm-pimg { display: grid; place-items: center; aspect-ratio: 1; border-radius: 12px; color: rgba(93, 51, 176, .7); }
.fm-pimg .fm-i { width: 40%; height: 40%; }
.fm-pimg--t1 { background: linear-gradient(135deg, #EAE4FF, #D0C3FF); }
.fm-pimg--t2 { background: linear-gradient(135deg, #F7F5FF, #B7A2FF); }
.fm-pimg--t3 { background: linear-gradient(135deg, #D0C3FF, #A081FE); color: rgba(51, 6, 110, .6); }
.fm-pimg--pilot { background: linear-gradient(135deg, #D8F7DD, #8CE09D); color: rgba(0, 91, 14, .7); }
.fm-pimg--sm { width: 40px; border-radius: 10px; }
.fm-pimg--lg { width: 112px; flex: none; border-radius: 14px; }
.fm-store__bar { display: flex; gap: 6px; margin-bottom: 14px; }
.fm-store__bar span { height: 8px; width: 48px; border-radius: 4px; background: var(--gray-100); }
.fm-store__bar span:first-child { width: 72px; background: var(--ac-100); }
.fm-store__pdp { display: flex; gap: 16px; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--gray-100); }
.fm-store__pdp > div { display: grid; gap: 4px; justify-items: start; }
.fm-store__pdp strong { font-size: 1rem; }
.fm-store__pdp em { font-style: normal; color: var(--slate-700); font-weight: 700; }
.fm-store__btn { margin-top: 6px; padding: 7px 16px; border-radius: 8px; background: var(--navy); color: #fff; font-weight: 700; font-size: .75rem; }
.fm-reco { padding-top: 14px; }
.fm-reco__head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.fm-reco__head .fm-i { color: var(--ac-700); width: 20px; height: 20px; }
.fm-reco__head .fm-chip { margin-inline-start: auto; }
.fm-prods { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.fm-prods--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fm-prod { display: grid; gap: 3px; padding: 8px; border: 1px solid var(--gray-200); border-radius: 12px; background: #fff; }
.fm-prod.is-sel { border-color: var(--ac); box-shadow: 0 0 0 3px var(--ac-100); }
.fm-prod strong { font-size: .75rem; line-height: 1.3; }
.fm-prod em { font-style: normal; font-size: .75rem; color: var(--slate-600); }
.fm-prod .fm-pimg { width: 100%; }
.fm-hbars { list-style: none; padding: 0; display: grid; gap: 10px; }
.fm-hbar { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 10px; align-items: center; }
.fm-hbar__lbl { font-weight: 700; color: var(--navy); }
.fm-hbar__track { height: 12px; border-radius: 6px; background: var(--gray-100); overflow: hidden; }
.fm-hbar__fill { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #7347D2, #A081FE); }
.fm-chart { width: 100%; aspect-ratio: 560 / 220; display: block; margin-top: 8px; }
.fm-chart__grid line { stroke: var(--gray-200); stroke-width: 1; vector-effect: non-scaling-stroke; }
.fm-chart__actual, .fm-chart__fore { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.fm-chart__actual { stroke: #5D33B0; stroke-width: 3; }
.fm-chart__fore { stroke: #8B5CF6; stroke-width: 3; stroke-dasharray: 7 7; }
.fm-chart__now { stroke: #A8B2BF; stroke-width: 1.5; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.fm-chart__pt { fill: #fff; stroke: #5D33B0; stroke-width: 3; vector-effect: non-scaling-stroke; }
.fm-chart__axis { display: flex; justify-content: space-between; margin-top: 6px; font-size: .6875rem; font-weight: 700; color: var(--slate-600); }
.fm-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; font-weight: 700; color: var(--navy); }
.fm-legend i { display: inline-block; width: 18px; height: 0; border-top: 3px solid #5D33B0; margin-inline-end: 6px; vertical-align: middle; }
.fm-legend i.is-fore { border-top: 3px dashed #8B5CF6; }
.fm-legend .fm-muted { margin-inline-start: auto; font-weight: 600; }
.fm-stocks { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fm-stock { padding: 12px; border: 1px solid var(--gray-200); border-radius: 12px; display: grid; gap: 8px; }
.fm-stock__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fm-stock__track { height: 8px; border-radius: 4px; background: var(--gray-100); overflow: hidden; }
.fm-stock__track span { display: block; height: 100%; border-radius: 4px; background: #8B5CF6; }
.fm-stock.is-low .fm-stock__track span { background: #F97316; }
.fm-stock p { color: var(--slate-600); font-weight: 600; }
.fm-later { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 6px 0; color: var(--slate-600); }
.fm-later > .fm-i { width: 32px; height: 32px; color: var(--ac-700); }
.fm-later p { margin-top: 2px; }

/* FlowPilot hero: phone with floating order card */
.fm-duo { position: relative; display: grid; gap: 20px; justify-items: center; }
.fm-duo__float { width: min(340px, 100%); }
@media (min-width: 1241px) { .fm-duo { justify-items: start; } .fm-duo > .fm-ui--bare { width: 330px; } .fm-duo__float { position: absolute; inset-inline-end: -2%; bottom: 2%; width: 262px; } }
.fm-bcell { min-width: 120px; width: 50%; }
.fm-bcell .fm-hbar__track { display: block; }

/* Home hero ecosystem visual */
.fm-eco { position: relative; display: grid; gap: 16px; padding: 8px; max-width: 520px; margin-inline: auto; }
.fm-eco__rail { position: absolute; left: 50%; top: 5%; bottom: 5%; width: 3px; margin-inline-start: -1.5px; border-radius: 3px; background: linear-gradient(180deg, #1D4ED8, #00C2D9); opacity: .28; }
.fm-eco__card { position: relative; background: #fff; border: 1px solid var(--gray-200); border-top: 4px solid var(--ac); border-radius: var(--r-md); padding: 16px 18px; box-shadow: var(--sh-md); width: 82%; box-sizing: border-box; }
.fm-eco__card--1 { justify-self: start; }
.fm-eco__card--2 { justify-self: end; }
.fm-eco__card--3 { justify-self: start; }
.fm-eco__head { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; margin-bottom: 12px; }
.fm-eco__head img { grid-row: span 2; height: 26px; width: auto; }
.fm-eco__head strong { color: var(--navy); font-size: 1rem; line-height: 1.2; }
.fm-eco__head span { font-size: .75rem; color: var(--slate-600); font-weight: 600; }
.fm-eco__card > p { margin: 12px 0 0; font-size: .8125rem; color: var(--slate-700); font-weight: 600; }
.fm-eco__recs { list-style: none; display: flex; gap: 8px; margin: 0; padding: 0; }
.fm-eco__recs li { width: 46px; }
.fm-eco__chat { display: grid; gap: 6px; font-size: .8125rem; }
.fm-eco__b { display: inline-block; max-width: 85%; padding: 7px 11px; border-radius: 12px; line-height: 1.35; }
.fm-eco__b.in { justify-self: start; background: var(--gray-100); color: var(--navy); border-end-start-radius: 3px; }
.fm-eco__b.out { justify-self: end; background: var(--ac-100); color: var(--navy); border-end-end-radius: 3px; }
.fm-eco__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fm-eco__rows li { display: flex; align-items: center; justify-content: space-between; padding: 7px 10px; border: 1px solid var(--gray-100); border-radius: 8px; font-size: .8125rem; }

/* ---------- Contact form ------------------------------------------------- */
.fm-contact { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.fm-formcard { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--r-xl); padding: clamp(24px, 4vw, 44px); box-shadow: var(--sh-md); }
.fm-formcard h2 { margin: 0 0 8px; font-size: 1.625rem; }
.fm-formcard > p { margin: 0 0 24px; }
.fm-form { display: grid; gap: 20px; }
.fm-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.fm-field { display: grid; gap: 7px; }
.fm-field label, .fm-field .fm-label { font-weight: 700; color: var(--navy); font-size: .9375rem; }
.fm-field .fm-req { color: var(--ac-700, var(--blue-700)); margin-inline-start: 2px; }
.fm-field input[type="text"], .fm-field input[type="email"], .fm-field select, .fm-field textarea {
  width: 100%; box-sizing: border-box; padding: 13px 14px; font: inherit; font-size: 1rem; color: var(--navy);
  background: #fff; border: 1.5px solid var(--slate-500); border-radius: 12px; transition: border-color .15s, box-shadow .15s;
}
.fm-field textarea { min-height: 150px; resize: vertical; }
.fm-field select { appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230B1F3B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center; padding-inline-end: 40px; }
.fm-field input:hover, .fm-field select:hover, .fm-field textarea:hover { border-color: var(--navy-800); }
.fm-field input:focus, .fm-field select:focus, .fm-field textarea:focus { outline: none; border-color: var(--blue-500); box-shadow: 0 0 0 4px rgba(37, 99, 235, .22); }
.fm-field.has-error input, .fm-field.has-error select, .fm-field.has-error textarea { border-color: #A63B00; background: #FFF9F5; }
.fm-field__err { display: none; align-items: center; gap: 6px; color: #A63B00; font-weight: 700; font-size: .875rem; }
.fm-field.has-error .fm-field__err { display: flex; }
.fm-field__hint { font-size: .8125rem; color: var(--slate-600); margin: 0; }
.fm-check { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font-size: .9375rem; }
.fm-check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--blue); }
.fm-check label { font-weight: 500; color: var(--slate-700); }
.fm-check.has-error label { color: #A63B00; font-weight: 700; }
.fm-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fm-form__submit { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.fm-form__submit .fm-btn { padding: .95rem 1.7rem; }
.fm-form__submit .fm-btn[disabled] { opacity: .7; cursor: progress; }
.fm-form__note { margin: 0; font-size: .8125rem; color: var(--slate-600); }
.fm-notice { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 12px; font-weight: 600; margin-bottom: 8px; }
.fm-notice .fm-i { margin-top: 1px; }
.fm-notice--error:not(:has(svg))::before { content: ""; flex: none; width: 20px; height: 20px; margin-top: 1px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l10 18H2z'/%3E%3Cpath d='M12 10v5M12 18h.01'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l10 18H2z'/%3E%3Cpath d='M12 10v5M12 18h.01'/%3E%3C/svg%3E") center / contain no-repeat; }
.fm-notice--error { background: #FFF3EA; color: #7F2000; border: 1.5px solid #FFAD80; }
.fm-notice--ok { background: var(--teal-100); color: #00382F; border: 1.5px solid #89D7CA; }
.fm-aside { display: grid; gap: 20px; }
.fm-aside .fm-card h3 { font-size: 1.125rem; }

/* ---------- Prose (legal) ------------------------------------------------ */
.fm-prose { max-width: 780px; margin-inline: auto; }
.fm-prose.fm-container { padding-block: clamp(48px, 6vw, 88px); }
.fm-prose h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); margin: 0 0 12px; }
.fm-prose h2 { font-size: 1.5rem; margin: 40px 0 12px; }
.fm-prose h3 { font-size: 1.125rem; margin: 28px 0 8px; }
.fm-prose p, .fm-prose ul, .fm-prose ol { margin: 0 0 16px; }
.fm-prose ul, .fm-prose ol { padding-inline-start: 22px; }
.fm-prose li { margin-bottom: 8px; }
.fm-prose .fm-meta { color: var(--slate-600); font-size: .9375rem; }
.fm-prose .fm-callout { padding: 16px 18px; border-radius: 12px; background: var(--blue-50); border: 1px solid var(--blue-100); margin: 24px 0; color: var(--navy); }

/* Thank-you */
.fm-thanks { text-align: center; }
.fm-thanks__ico { display: grid; place-items: center; width: 72px; height: 72px; margin: 0 auto 24px; border-radius: 50%; background: var(--teal-100); color: var(--teal-700); }
.fm-thanks__ico .fm-i { width: 36px; height: 36px; }


/* Products page: large cards, definition lists, brand-mark row */
.fm-bigcard { flex-direction: column; }
.fm-bigcard__logo { display: grid; place-items: center; padding: 28px 20px 20px; background: var(--ac-50); border-bottom: 1px solid var(--ac-100); }
.fm-bigcard__logo img { height: 140px; width: auto; }
.fm-bigcard__h { margin: 0; font-size: 1.25rem; line-height: 1.25; }
.fm-bigcard__h a { color: var(--navy); text-decoration: none; }
.fm-bigcard__h a:hover { color: var(--ac-700); }
.fm-defs { margin: 6px 0 4px; display: grid; gap: 12px; }
.fm-defs > div { padding-top: 12px; border-top: 1px solid var(--gray-200); }
.fm-defs dt { margin: 0 0 3px; font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ac-700); }
.fm-defs dd { margin: 0; color: var(--navy); font-weight: 600; font-size: .9375rem; line-height: 1.5; }
.fm-markrow { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(24px, 5vw, 64px); align-items: center; background: #fff; border: 1px solid var(--blue-100); border-radius: var(--r-xl); padding: clamp(24px, 4vw, 48px); }
.fm-markrow__logo img { height: 96px; width: auto; }
.fm-markrow p { margin: 0; }
.fm-markrow p + p { margin-top: 14px; }
@media (max-width: 760px) { .fm-markrow { grid-template-columns: minmax(0, 1fr); } }
.fm-hero__status { margin-top: 0; }

/* ---------- Responsive --------------------------------------------------- */
@container (max-width: 520px) {
  .fm-prod .fm-pimg { aspect-ratio: 5 / 3; }
  .hide-sm { display: none; }
  .fm-ui__dots { display: none; }
  .fm-ui__bar { padding-inline: 12px; gap: 8px; }
  .fm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fm-kpis--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fm-stocks { grid-template-columns: minmax(0, 1fr); }
  .fm-prods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fm-inbox { grid-template-columns: minmax(0, 1fr); }
  .fm-convs { border-inline-end: 0; }
  .fm-kv { grid-template-columns: 100px minmax(0, 1fr); }
}
@container (max-width: 380px) {
  .fm-kpis--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fm-pimg--lg { width: 84px; }
  .fm-legend .fm-muted { margin-inline-start: 0; width: 100%; }
}

@media (max-width: 1080px) {
  .fm-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .fm-hero__visual { max-width: 640px; margin-inline: auto; width: 100%; }
  .fm-prow, .fm-tabpanel { grid-template-columns: minmax(0, 1fr); }
  .fm-prow--rev .fm-prow__text { order: 0; }
  .fm-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fm-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fm-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fm-footer__brand { grid-column: 1 / -1; }
  .fm-contact { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .fm-grid--3, .fm-road, .fm-now, .fm-steps--3 { grid-template-columns: minmax(0, 1fr); }
  .fm-status { grid-template-columns: minmax(0, 1fr); }
  .fm-status > div + div { border-inline-start: 0; border-top: 1px solid var(--gray-200); }
  .fm-vision { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .fm-vlinks { gap: 0; align-content: center; padding: 8px 0; }
  .fm-vlink { grid-auto-flow: column; justify-content: center; gap: 12px; padding: 8px 0; }
  .fm-vlink__line { width: 2px; height: 40px; background: linear-gradient(180deg, rgba(0, 194, 217, .15), #00C2D9); }
  .fm-vlink__line::after { right: auto; left: 50%; top: auto; bottom: -1px; transform: translateX(-50%) rotate(135deg); }
  /* compare table becomes stacked cards */
  .fm-compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .fm-compare, .fm-compare tbody, .fm-compare tr, .fm-compare th, .fm-compare td { display: block; }
  .fm-compare tr + tr { border-top: 8px solid var(--navy-50); }
  .fm-compare tbody th { border-top: 0; padding-bottom: 6px; font-size: 1.125rem; }
  .fm-compare td { border-top: 0; padding-block: 6px; }
  .fm-compare td::before { content: attr(data-label); display: block; font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--slate-600); margin-bottom: 2px; }
  .fm-compare tr { padding-bottom: 12px; }
}
@media (max-width: 782px) { .admin-bar .fm-header { top: 46px; } }
@media (max-width: 640px) {
  :root { --gutter: 20px; --header-h: 64px; }
  .fm-logo img { height: 38px; }
  .fm-grid--2, .fm-grid--4, .fm-footer__grid, .fm-form__row, .fm-steps { grid-template-columns: minmax(0, 1fr); }
  .fm-footer__grid { gap: 32px; }
  .fm-card { padding: 22px; }
  .fm-pcard__body { padding: 22px; }
  .fm-hero .fm-lead { font-size: 1.125rem; }
  .wp-block-buttons.fm-actions { flex-direction: column; align-items: stretch; }
  .wp-block-buttons.fm-actions .wp-block-button { width: 100%; }
  .wp-block-buttons.fm-actions .wp-block-button__link { width: 100%; box-sizing: border-box; }
  .fm-actions--center { align-items: stretch; }
  .fm-eco__card { width: 92%; }
  .fm-tabs__list { margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .fm-prow__vis, .fm-tabpanel__vis { padding: 14px; border-radius: var(--r-lg); }
  .fm-cta::after { width: 220px; height: 220px; inset-inline-end: -50px; bottom: -50px; }
  .fm-kv { grid-template-columns: 96px minmax(0, 1fr); }
}

/* ==========================================================================
   Ecosystem architecture (v2): layers, combinations, solution routing
   ========================================================================== */
.fm-layer { display: inline-flex; align-items: center; gap: 7px; margin: 0; font-size: .6875rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--ac-700); }
.fm-layer::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ac); }
.fm-hero__badges .fm-layer, .fm-prow__badges .fm-layer { padding: 5px 12px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--ac-100); }

/* Architecture diagram */
.fm-arch { max-width: 600px; margin-inline: auto; background: #fff; border: 1px solid var(--gray-200); border-radius: var(--r-lg); box-shadow: var(--sh-lg); overflow: hidden; }
.fm-arch--lg { max-width: 940px; }
.fm-arch__top { display: flex; align-items: center; gap: 14px; padding: 16px 20px; background: var(--grad-dark); color: #fff; }
.fm-arch__top strong { display: block; font-size: 1.125rem; letter-spacing: -0.03em; color: #fff; }
.fm-arch__top span { font-size: .8125rem; color: rgba(255, 255, 255, .85); font-weight: 600; }
.fm-arch__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 16px; }
.fm-arch__col { display: grid; align-content: start; gap: 8px; padding: 14px; border: 1px solid var(--gray-200); border-top: 4px solid var(--ac); border-radius: var(--r-md); background: linear-gradient(180deg, var(--ac-50), #fff 70%); text-decoration: none; color: var(--slate-700); transition: transform .15s, box-shadow .15s; }
.fm-arch__col:hover { transform: translateY(-2px); box-shadow: var(--sh-md); color: var(--slate-700); }
.fm-arch__col strong { color: var(--navy); font-size: .9375rem; line-height: 1.3; }
.fm-arch__col ul { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 0; padding: 0; }
.fm-arch__col li { padding: 2px 8px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--ac-100); font-size: .6875rem; font-weight: 700; color: var(--ac-700); }
.fm-arch__logo { display: block; line-height: 0; margin-block: 2px; }
.fm-arch__logo img { height: 30px; width: auto; margin-inline-start: -4px; }
.fm-arch__combos { padding: 4px 16px 16px; display: grid; gap: 8px; }
.fm-arch__lbl { margin: 0 0 2px; font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--slate-700); }
.fm-arch__combo { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 9px 12px; border-radius: 12px; background: var(--navy-50); font-size: .8125rem; }
.fm-arch__combo > span:first-child { color: var(--slate-700); font-weight: 600; }
.fm-arch__combo b { color: var(--navy); font-weight: 800; text-align: end; }
.fm-arch__pair { display: inline-flex; gap: 4px; }
.fm-arch__pair img { height: 20px; width: auto; }
.fm-hero__arch { margin-top: clamp(28px, 4vw, 48px); text-align: start; }
.fm-hero__copy--wide { max-width: 980px !important; }

/* Product combination chips */
.fm-combo { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-block: 6px 2px; }
.fm-combo .fm-chiplink { padding-block: 6px; padding-inline: 8px 12px; font-size: .875rem; }
.fm-combo .fm-chiplink img { width: auto; height: 20px; }
.fm-plus { font-weight: 800; color: var(--slate-600); }
.fm-youdweuse { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 26px 0 0; }
.fm-youdweuse > span:first-child, .fm-solve__use { font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--slate-700); }

/* Solution routing cards */
.fm-solve { display: grid; align-content: start; gap: 12px; text-decoration: none; color: var(--slate-700); transition: transform .2s, box-shadow .2s, border-color .2s; }
.fm-solve:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: #A8C8FF; color: var(--slate-700); }
.fm-solve:hover .fm-link { text-decoration: underline; }
.fm-solve__q { font-size: 1.25rem; font-weight: 800; line-height: 1.25; letter-spacing: -0.025em; color: var(--navy); }
.fm-solve__h { margin: 0; font-size: 1.5rem; }
.fm-solve__eyebrow { font-size: .75rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--blue); }
.fm-solve__t { line-height: 1.55; }
.fm-solve .fm-link { margin-top: 4px; color: var(--blue); }

/* Notes, tags, split layout, lists */
.fm-note { margin: 28px 0 0; padding: 16px 20px; border-radius: var(--r-md); background: var(--blue-50); border: 1px solid var(--blue-100); color: var(--navy); font-size: .9375rem; line-height: 1.6; }
.fm-note a { font-weight: 700; }
.fm-note--center { text-align: center; background: none; border: 0; padding: 0; margin-top: 28px; }
.fm-section--tint .fm-note:not(.fm-note--center), .fm-section--blue .fm-note:not(.fm-note--center) { background: #fff; }
.fm-tag { display: inline-flex; padding: 3px 10px; border-radius: 999px; background: var(--ac-100); color: var(--ac-700); font-size: .6875rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.fm-step__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: -2px 0 12px; }
.fm-split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.fm-split__text > * + * { margin-top: 16px; }
.fm-split__text h2 { margin: 0 0 16px; }
.fm-split__text .fm-eyebrow { margin-bottom: 0; }
.fm-split__card h3 { margin: 0 0 4px; }
.fm-split__diff { margin: 20px 0 0 !important; padding-top: 16px; border-top: 1px solid var(--gray-200); font-size: .9375rem; }
.fm-split__diff strong { color: var(--ac-700); }
.fm-pcard__head { margin: 0; font-size: 1.0625rem; letter-spacing: -0.02em; }
.fm-grid--flat .fm-card { box-shadow: none; }
.fm-startlist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.fm-startlist li { display: grid; gap: 12px; align-content: start; }
.fm-startlist__p { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; color: var(--navy); font-size: 1.0625rem; }
.fm-startlist__p img { height: 24px; width: auto; }
.fm-startlist p { margin: 0; }
.fm-startlist .fm-badge { justify-self: start; }
.fm-compare--choose tbody th { white-space: normal; font-size: 1rem; width: 30%; }
.fm-compare .fm-combo { gap: 4px; }

/* Resources */
.fm-jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 28px; }
.fm-jump a { padding: 9px 16px; border-radius: 999px; background: #fff; border: 1px solid #C6CDD7; color: var(--navy); font-weight: 700; font-size: .9375rem; text-decoration: none; transition: border-color .15s, color .15s; }
.fm-jump a:hover { border-color: var(--blue-500); color: var(--blue); }
.fm-layers { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--r-lg); box-shadow: var(--sh-md); overflow: hidden; }
.fm-layers__root { display: flex; align-items: center; gap: 14px; padding: 18px 24px; background: var(--grad-dark); color: #fff; }
.fm-layers__root strong { display: block; font-size: 1.125rem; color: #fff; }
.fm-layers__root span { font-size: .875rem; color: rgba(255, 255, 255, .85); }
.fm-layers__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fm-layers__cell { display: grid; gap: 6px; padding: 22px 24px; border-top: 4px solid var(--ac); background: linear-gradient(180deg, var(--ac-50), #fff 80%); }
.fm-layers__cell + .fm-layers__cell { border-inline-start: 1px solid var(--gray-200); }
.fm-layers__cell strong { font-size: 1.25rem; color: var(--navy); letter-spacing: -0.025em; }
.fm-layers__cell p { margin: 0; }
.fm-faqs { display: grid; gap: 10px; max-width: 860px; }
.fm-faq { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--r-md); }
.fm-faq summary { cursor: pointer; list-style: none; padding-block: 18px; padding-inline: 22px 56px; position: relative; font-weight: 800; color: var(--navy); font-size: 1.0625rem; line-height: 1.4; border-radius: var(--r-md); }
.fm-faq summary::-webkit-details-marker { display: none; }
.fm-faq summary::after { content: ""; position: absolute; inset-inline-end: 22px; top: 50%; width: 10px; height: 10px; margin-top: -7px; border-right: 2.5px solid var(--blue); border-bottom: 2.5px solid var(--blue); transform: rotate(45deg); transition: transform .2s; }
.fm-faq[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.fm-faq summary:hover { color: var(--blue); }
.fm-faq__a { padding: 0 22px 20px; }
.fm-faq__a p { margin: 0; }
.fm-statuslist { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 0; }
.fm-statuslist li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-top: 1px solid var(--gray-100); font-weight: 600; color: var(--navy); font-size: .9375rem; }
.fm-statuslist li:first-child { border-top: 0; }
.fm-glossary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; margin: 0; }
.fm-glossary > div { padding: 18px 0; border-top: 1px solid var(--gray-200); }
.fm-glossary dt { font-weight: 800; color: var(--navy); margin: 0 0 4px; }
.fm-glossary dd { margin: 0; }

/* Responsive additions */
@media (max-width: 1080px) {
  .fm-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fm-split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .fm-layers__row { grid-template-columns: minmax(0, 1fr); }
  .fm-layers__cell + .fm-layers__cell { border-inline-start: 0; }
  .fm-glossary { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .fm-arch__cols { grid-template-columns: minmax(0, 1fr); }
  .fm-arch__combo { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .fm-arch__combo b { text-align: start; }
  .fm-arch__pair { display: none; }
  .fm-faq summary { padding-block: 16px; padding-inline: 18px 48px; font-size: 1rem; }
  .fm-youdweuse { margin-top: 20px; }
  .fm-footer__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   v3: independent products. Status badges, standalone product cards, family strip.
   ========================================================================== */
.fm-badge--now { background: var(--ac-700); color: #fff; }
.fm-badge--soon { background: var(--ac-50); color: var(--ac-700); box-shadow: inset 0 0 0 1.5px var(--ac-100); }
.fm-road__col--now { border-color: var(--ac); box-shadow: 0 0 0 3px var(--ac-100), var(--sh-sm); }

/* Product cards with Who / Problem / What it does */
.fm-pcard--rows .fm-defs { margin: 4px 0 8px; }
.fm-pcard--rows .fm-defs dd { font-weight: 500; color: var(--slate-700); }
.fm-pcard--rows .fm-defs > div:last-child dd { font-weight: 700; color: var(--navy); }
.fm-arch__col dl { margin: 4px 0 0; display: grid; gap: 10px; }
.fm-arch__col dt { font-size: .6875rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ac-700); }
.fm-arch__col dd { margin: 1px 0 0; font-size: .8125rem; line-height: 1.45; color: var(--slate-700); }

/* Solution routing cards: optional second line */
.fm-solve__also { margin-top: 2px; padding-top: 12px; border-top: 1px solid var(--gray-200); font-size: .875rem; line-height: 1.5; color: var(--slate-700); }
.fm-solve:hover { border-color: var(--ac); }

/* Solution pages */
.fm-solution-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.fm-statuscard { display: grid; gap: 22px; padding: 28px; }
.fm-statuscard ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.fm-statuscard li { position: relative; padding-inline-start: 22px; font-weight: 600; color: var(--navy); }
.fm-statuscard li::before { content: ""; position: absolute; inset-inline-start: 0; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: var(--ac); }
.fm-optional { display: flex; align-items: center; flex-wrap: wrap; gap: 20px 28px; padding: 24px 28px; border: 1.5px dashed #A8B2BF; border-radius: var(--r-lg); background: #fff; }
.fm-optional img { height: 46px; width: auto; }
.fm-optional > div { flex: 1 1 320px; }
.fm-optional strong { display: block; color: var(--navy); }
.fm-optional p { margin: 4px 0 0; }

/* Low-key family strip at the end of each product page */
.fm-family { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 28px 40px; align-items: center; padding: 28px 32px; border: 1px solid var(--gray-200); border-radius: var(--r-lg); background: var(--navy-50); }
.fm-family__head .fm-eyebrow { margin: 0 0 8px; }
.fm-family__head p:last-child { margin: 0; font-size: .9375rem; }
.fm-family__items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fm-family__item { display: grid; gap: 10px; padding: 16px 18px; background: #fff; border: 1px solid var(--gray-200); border-top: 3px solid var(--ac); border-radius: var(--r-md); text-decoration: none; color: var(--slate-700); font-size: .875rem; line-height: 1.4; transition: transform .15s, box-shadow .15s; }
.fm-family__item:hover { transform: translateY(-2px); box-shadow: var(--sh-md); color: var(--slate-700); }
.fm-family__item strong { display: block; color: var(--navy); margin-bottom: 2px; }
.fm-family__item img { height: 30px; width: auto; margin-inline-start: -3px; }
.fm-family-cards .fm-card { display: grid; gap: 6px; align-content: start; }
.fm-family-cards h3 { margin: 6px 0 0; }
.fm-family-cards p { margin: 0; }
.fm-family-cards img { width: auto; height: 30px; }

/* FlowShip reads as an operations console: dark title bars and a faint route-map backdrop */
.fm-ui--ship .fm-ui__bar { background: var(--navy); border-bottom-color: var(--navy); }
.fm-ui--ship .fm-ui__title { color: #fff; }
.fm-ui--ship .fm-ui__dots i { background: rgba(255, 255, 255, .28); }
.fm-ui--ship .fm-ui__tag { background: rgba(255, 255, 255, .14); color: #fff; }
.fm-hero.is-ship { background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 420' fill='none' stroke='%23F97316' stroke-width='2'%3E%3Cpath d='M10 390C150 300 210 390 330 262S520 190 630 30' stroke-dasharray='3 9' stroke-linecap='round' opacity='.45'/%3E%3Cpath d='M40 120C170 150 250 60 380 120S560 240 640 200' stroke-dasharray='3 9' stroke-linecap='round' opacity='.3'/%3E%3Ccircle cx='330' cy='262' r='7' opacity='.55'/%3E%3Ccircle cx='630' cy='30' r='7' opacity='.55'/%3E%3Ccircle cx='380' cy='120' r='6' opacity='.4'/%3E%3C/svg%3E") right top / min(720px, 70%) auto no-repeat,
  radial-gradient(900px 480px at 88% -8%, var(--ac-100) 0%, rgba(255, 255, 255, 0) 65%), linear-gradient(180deg, var(--ac-50) 0%, #fff 78%); }

@media (max-width: 1080px) {
  .fm-solution-grid { grid-template-columns: minmax(0, 1fr); }
  .fm-family { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .fm-family { padding: 22px; }
  .fm-family__items { grid-template-columns: minmax(0, 1fr); }
  .fm-statuscard { padding: 22px; }
  .fm-optional { padding: 20px; }
}

/* ==========================================================================
   Arabic / RTL layer. Applies when the page is served with <html dir="rtl" lang="ar">.
   Layout mirrors automatically (flex/grid + logical properties above); this block handles
   typography, directional icons, charts and the few things that can't mirror by themselves.
   ========================================================================== */
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-sans-arabic-400.woff") format("woff"); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F, U+2010-2011, U+2013-2014, U+2018-2019, U+201C-201D, U+2026, U+00A0, U+00D7, U+2022; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 500 600; font-display: swap; src: url("../fonts/ibm-plex-sans-arabic-600.woff") format("woff"); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F, U+2010-2011, U+2013-2014, U+2018-2019, U+201C-201D, U+2026, U+00A0, U+00D7, U+2022; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 700 900; font-display: swap; src: url("../fonts/ibm-plex-sans-arabic-700.woff") format("woff"); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F, U+2010-2011, U+2013-2014, U+2018-2019, U+201C-201D, U+2026, U+00A0, U+00D7, U+2022; }

/* Typography: Plus Jakarta Sans keeps Latin text (brand names, technical terms); IBM Plex Sans Arabic covers Arabic glyphs.
   Never letter-space Arabic: it breaks the connected letterforms. */
html[dir="rtl"] body { font-family: "Plus Jakarta Sans", "IBM Plex Sans Arabic", system-ui, "Segoe UI", Tahoma, Arial, sans-serif; font-weight: 400; line-height: 1.85; font-size: 1.125rem; }
html[dir="rtl"] *, html[dir="rtl"] *::before, html[dir="rtl"] *::after { letter-spacing: normal !important; }
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4 { line-height: 1.4; text-wrap: balance; }
html[dir="rtl"] h1 { line-height: 1.3; font-size: clamp(2.1rem, 1.3rem + 3.2vw, 3.5rem); }
html[dir="rtl"] .fm-intro h2, html[dir="rtl"] .fm-split__text h2, html[dir="rtl"] .fm-cta h2 { font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem); }
html[dir="rtl"] .fm-footer__col h2 { font-size: 1rem; }
html[dir="rtl"] .fm-formcard h2 { font-size: 1.5rem; }
html[dir="rtl"] .fm-lead { line-height: 1.85; max-width: 58ch; }
html[dir="rtl"] .fm-eyebrow, html[dir="rtl"] .fm-badge, html[dir="rtl"] .fm-layer, html[dir="rtl"] .fm-chip, html[dir="rtl"] .fm-ui__tag, html[dir="rtl"] .fm-status__k,
html[dir="rtl"] .fm-defs dt, html[dir="rtl"] .fm-arch__col dt, html[dir="rtl"] .fm-arch__lbl, html[dir="rtl"] .fm-solve__use, html[dir="rtl"] .fm-solve__eyebrow,
html[dir="rtl"] .fm-youdweuse > span:first-child, html[dir="rtl"] .fm-footer__col h2, html[dir="rtl"] .fm-mt th, html[dir="rtl"] .fm-compare thead th,
html[dir="rtl"] .fm-tag, html[dir="rtl"] .fm-pcard__role, html[dir="rtl"] .fm-field__err { text-transform: none; }
html[dir="rtl"] .fm-eyebrow { font-size: .9375rem; }
html[dir="rtl"] .fm-badge, html[dir="rtl"] .fm-layer { font-size: .8125rem; }
html[dir="rtl"] .fm-chip { font-size: .75rem; }
html[dir="rtl"] .fm-defs dt, html[dir="rtl"] .fm-arch__col dt, html[dir="rtl"] .fm-status__k { font-size: .8125rem; }
html[dir="rtl"] .fm-ui { font-size: .875rem; line-height: 1.7; }
html[dir="rtl"] .fm-ui__tag { font-size: .75rem; }
html[dir="rtl"] .fm-btn, html[dir="rtl"] .wp-block-button__link { line-height: 1.5; font-size: 1.0625rem; }
html[dir="rtl"] .fm-nav { font-size: 1rem; }
html[dir="rtl"] .fm-card p, html[dir="rtl"] .fm-pcard p { line-height: 1.8; }
html[dir="rtl"] .fm-checks li, html[dir="rtl"] .fm-statuslist li { line-height: 1.7; }
html[dir="rtl"] .fm-kpi__val { line-height: 1.3; }
html[dir="rtl"] .fm-footer { line-height: 1.8; }

/* Latin / numeric tokens stay left-to-right inside RTL text */
html[dir="rtl"] .mono, html[dir="rtl"] .fm-kpi__val, html[dir="rtl"] .num { direction: ltr; unicode-bidi: isolate; }
html[dir="rtl"] .num { text-align: end; }
html[dir="rtl"] .fm-nw { unicode-bidi: isolate; }

/* Directional icons and arrows */
html[dir="rtl"] .fm-link .fm-i, html[dir="rtl"] .fm-mt .fm-i--xs, html[dir="rtl"] .fm-phone__input .fm-i, html[dir="rtl"] .fm-arrow-flip { transform: scaleX(-1); }
html[dir="rtl"] .fm-link:hover .fm-i { transform: scaleX(-1) translateX(3px); }
html[dir="rtl"] .fm-chart { transform: scaleX(-1); }
html[dir="rtl"] .fm-hbar__fill { background: linear-gradient(270deg, #7347D2, #A081FE); }

/* Hero backgrounds mirror: the glow and the route-map sit on the leading (right) side */
html[dir="rtl"] .fm-hero { background: radial-gradient(900px 480px at 12% -8%, var(--ac-100, var(--blue-100)) 0%, rgba(255, 255, 255, 0) 65%), linear-gradient(180deg, var(--ac-50, var(--blue-50)) 0%, #fff 78%); }
html[dir="rtl"] .fm-hero.is-ship { background-position: left top, 0 0, 0 0; }
html[dir="rtl"] .fm-hero.is-ship { transform: none; }

/* Form controls */
html[dir="rtl"] .fm-field select { background-position: left 14px center; padding-inline-end: 14px; padding-inline-start: 40px; }
html[dir="rtl"] .fm-field input[type="email"] { text-align: end; }
html[dir="rtl"] .fm-field input[type="email"], html[dir="rtl"] .fm-field input[type="text"][name="company"] { unicode-bidi: plaintext; }
html[dir="rtl"] .fm-hp { left: auto; right: -9999px; }

/* Navigation (core block) */
html[dir="rtl"] .fm-nav .wp-block-navigation__submenu-container { left: auto; right: 0; text-align: right; }
html[dir="rtl"] .fm-nav .wp-block-navigation__responsive-container.is-menu-open { text-align: right; }
html[dir="rtl"] .fm-nav .wp-block-navigation-submenu__toggle { margin-inline-start: 0; }
html[dir="rtl"] .fm-nav .fm-nav__cta > .wp-block-navigation-item__content { margin-inline-start: 10px; margin-left: 0; }

/* Arabic slightly benefits from larger tap targets on mobile */
@media (max-width: 640px) {
  html[dir="rtl"] body { font-size: 1.0625rem; }
  html[dir="rtl"] h1 { font-size: clamp(1.9rem, 1.3rem + 4vw, 2.5rem); }
}


/* Arabic labels are longer: collapse the Arabic header into the hamburger menu below 1100px (core only does it below 600px). */
@media (max-width: 1100px) and (min-width: 601px) {
  html[dir="rtl"] .fm-nav .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none !important; }
  html[dir="rtl"] .fm-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex !important; }
  html[dir="rtl"] .fm-header__inner > .wp-block-shortcode, html[dir="rtl"] .fm-header__inner > .fm-lang { order: 2; margin-inline-start: auto; }
  html[dir="rtl"] .fm-header__inner > .fm-nav { order: 3; margin-inline-start: 0; }
}

/* Language switcher (both languages) */
.fm-lang { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--gray-200); border-radius: 999px; background: #fff; font-size: .8125rem; font-weight: 700; line-height: 1; white-space: nowrap; }
.fm-lang a { display: inline-block; padding: 7px 11px; border-radius: 999px; color: var(--slate-700); text-decoration: none; }
.fm-lang a:hover { color: var(--blue); }
.fm-lang a[aria-current="page"] { background: var(--navy); color: #fff; }
.fm-lang a[lang="ar"] { font-family: "IBM Plex Sans Arabic", "Plus Jakarta Sans", system-ui, sans-serif; font-size: .9375rem; line-height: 1; padding-block: 6px; }
.fm-lang__sep { display: none; }
.fm-header__inner > .wp-block-shortcode, .fm-header__inner > .fm-lang { order: 3; flex: none; }
.fm-header__inner > .fm-nav { order: 2; margin-inline-start: auto; }
.fm-header__inner > .fm-logo, .fm-header__inner > .wp-block-html { order: 1; }
@media (max-width: 600px) {
  .fm-header__inner > .wp-block-shortcode, .fm-header__inner > .fm-lang { order: 2; margin-inline-start: auto; }
  .fm-header__inner > .fm-nav { order: 3; margin-inline-start: 0; }
  .fm-lang a { padding: 7px 9px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; transition-duration: .001ms !important; }
  .fm-phone--anim .fm-msg { opacity: 1; transform: none; }
}
@media print {
  .fm-header, .fm-footer, .fm-cta { display: none; }
}