/* ForeFront site system: the shared look for every page, built from the homepage hero.
   Tokens first, then base type, the header, sections and components, the closing CTA, the
   footer, and the product mockup kit (.fx-*) used to show the app on each page.

   Pages are drawn by the dc runtime (support.js), so markup lives in each page's <x-dc>
   template and uses these classes. Motion hooks live in /assets/js/ff-site.js:
   - data-rv on an element fades it up the first time it scrolls into view (data-rv-d="1..6" staggers)
   - data-flow on a section lights its [data-flow-step] items one by one as the section scrolls through
   The homepage hero keeps its own files (ff-hero.css, ff-hero.js). */

:root {
  /* colour */
  --ff-navy: #0B1F33;
  --ff-navy-2: #0F2A43;
  --ff-navy-deep: #061322;
  --ff-ink: #0B1F33;
  --ff-ink-2: #3F4C5A;
  --ff-ink-3: #66737F;
  --ff-ink-4: #8A97A4;
  --ff-teal: #0299AE;
  --ff-teal-ink: #067486;
  --ff-teal-deep: #0B6C86;
  --ff-teal-soft: #E3F4F6;
  --ff-cyan: #4FBDCB;
  --ff-cyan-ink: #8DD6DF;
  --ff-cobalt: #5B6BD6;
  --ff-cobalt-ink: #4553B8;
  --ff-cobalt-soft: #EEF0FB;
  --ff-green: #1E8A55;
  --ff-green-soft: #E3F4EA;
  --ff-mint: #D9F6E5;
  --ff-amber: #E8A33D;
  --ff-amber-soft: #FDF3E1;
  --ff-violet: #8B5CF6;
  --ff-pink: #D9408F;
  --ff-bg: #FFFFFF;
  --ff-bg-2: #F5F8FA;
  --ff-bg-3: #EDF3F7;
  --ff-sky-1: #1D5FA8;
  --ff-sky-2: #5FA7DA;
  --ff-sky-3: #A9D5EE;
  --ff-sky-4: #E6F3FA;
  --ff-line: #E4EAEF;
  --ff-line-2: rgba(11, 31, 51, 0.10);
  --ff-line-3: rgba(11, 31, 51, 0.16);
  --ff-on-dark: #FFFFFF;
  --ff-on-dark-2: #B6C5D5;
  --ff-on-dark-3: #8FA2B6;
  --ff-line-dark: rgba(255, 255, 255, 0.12);
  --ff-surface: #FFFFFF;
  --ff-surface-2: #F5F7FA;
  --ff-side: #0F2236;
  --ff-mkt: #5B6BD6;      /* marketing side accent */
  --ff-ops: #0299AE;      /* operations side accent */

  /* type */
  --ff-display: 'Switzer', ui-sans-serif, system-ui, sans-serif;
  --ff-text: 'Satoshi', ui-sans-serif, system-ui, sans-serif;
  --ff-sys: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --ff-fs-hero: clamp(40px, 5.2vw, 76px);
  --ff-fs-h1: clamp(38px, 4.8vw, 68px);
  --ff-fs-h2: clamp(30px, 3.7vw, 50px);
  --ff-fs-h3: clamp(20px, 1.8vw, 24px);
  --ff-fs-lead: clamp(17px, 1.35vw, 20px);
  --ff-fs-body: 16px;
  --ff-fs-small: 14px;

  /* space */
  --ff-pad-x: clamp(20px, 3.4vw, 60px);
  --ff-sec-y: clamp(72px, 8.4vw, 136px);
  --ff-sec-y-sm: clamp(56px, 6vw, 96px);
  --ff-gap: clamp(24px, 3vw, 48px);
  --ff-wrap: 1240px;
  --ff-wrap-wide: 1400px;
  --ff-wrap-text: 760px;

  /* shape */
  --ff-r-xs: 8px;
  --ff-r-sm: 12px;
  --ff-r: 18px;
  --ff-r-lg: 26px;
  --ff-r-xl: 34px;
  --ff-pill: 200px;

  /* depth */
  --ff-shadow-1: 0 1px 2px rgba(11, 31, 51, 0.05), 0 4px 12px -6px rgba(11, 31, 51, 0.10);
  --ff-shadow-2: 0 2px 6px rgba(11, 31, 51, 0.05), 0 24px 48px -28px rgba(11, 31, 51, 0.32);
  --ff-shadow-3: 0 2px 8px rgba(11, 31, 51, 0.06), 0 40px 80px -36px rgba(11, 31, 51, 0.45);
  --ff-shadow-float: 0 12px 30px -12px rgba(11, 31, 51, 0.28), 0 2px 6px rgba(11, 31, 51, 0.06);

  /* motion */
  --ff-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ff-ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --ff-t-fast: 160ms;
  --ff-t: 260ms;
  --ff-t-slow: 700ms;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
body { margin: 0; background: var(--ff-bg); font-family: var(--ff-text); font-size: var(--ff-fs-body); line-height: 1.55; color: var(--ff-ink); -webkit-font-smoothing: antialiased; overflow-x: clip; }
h1, h2, h3, h4 { font-family: var(--ff-display); font-weight: 400; letter-spacing: -0.025em; margin: 0; color: inherit; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg, video { max-width: 100%; }
button { font-family: inherit; }
a { color: var(--ff-teal-ink); text-decoration: none; }
a:hover { color: var(--ff-navy); }
::selection { background: var(--ff-teal); color: #FFFFFF; }
:focus-visible { outline: 2px solid var(--ff-teal); outline-offset: 3px; border-radius: 6px; }
.ff-dark :focus-visible, .ff-header :focus-visible, .ff-footer :focus-visible { outline-color: var(--ff-cyan); }
.ff-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ff-skip { position: fixed; left: 12px; top: -60px; z-index: 300; padding: 10px 16px; border-radius: var(--ff-pill); background: #FFFFFF; color: var(--ff-navy); font-family: var(--ff-display); box-shadow: var(--ff-shadow-2); transition: top var(--ff-t) var(--ff-ease); }
.ff-skip:focus { top: 12px; color: var(--ff-navy); }

.ff-page { position: relative; width: 100%; overflow-x: clip; background: var(--ff-bg); }
.ff-wrap { position: relative; width: 100%; max-width: var(--ff-wrap); margin: 0 auto; }
.ff-wrap--wide { max-width: var(--ff-wrap-wide); }
.ff-wrap--text { max-width: var(--ff-wrap-text); }

/* ---------- type ---------- */
.ff-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--ff-display); font-size: 13px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ff-teal-ink); }
.ff-eyebrow i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ff-eyebrow--mkt { color: var(--ff-cobalt-ink); }
.ff-dark .ff-eyebrow { color: var(--ff-cyan-ink); }
.ff-h1 { font-size: var(--ff-fs-h1); line-height: 1.0; letter-spacing: -0.04em; text-wrap: balance; }
.ff-h1 em, .ff-h2 em { font-style: normal; color: var(--ff-teal-deep); }
.ff-dark .ff-h1 em, .ff-dark .ff-h2 em { color: var(--ff-cyan); }
.ff-h2 { font-size: var(--ff-fs-h2); line-height: 1.04; letter-spacing: -0.032em; text-wrap: balance; }
.ff-h3 { font-size: var(--ff-fs-h3); line-height: 1.2; letter-spacing: -0.022em; }
.ff-lead { font-size: var(--ff-fs-lead); line-height: 1.55; color: var(--ff-ink-2); max-width: 58ch; }
.ff-body { font-size: var(--ff-fs-body); line-height: 1.62; color: var(--ff-ink-2); }
.ff-small { font-size: var(--ff-fs-small); line-height: 1.55; color: var(--ff-ink-3); }
.ff-dark .ff-lead, .ff-dark .ff-body { color: var(--ff-on-dark-2); }
.ff-dark .ff-small { color: var(--ff-on-dark-3); }
.ff-head { display: flex; flex-direction: column; gap: 16px; max-width: 760px; }
.ff-head--center { align-items: center; text-align: center; margin: 0 auto; }
.ff-head--center .ff-lead { margin: 0 auto; }
.ff-head + * { margin-top: clamp(36px, 4.4vw, 64px); }

/* ---------- buttons ---------- */
.ff-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 13px 24px; border-radius: var(--ff-pill); border: 1px solid transparent; font-family: var(--ff-display); font-size: 16px; line-height: 1.2; letter-spacing: -0.02em; white-space: nowrap; cursor: pointer; text-decoration: none; transition: background var(--ff-t-fast) var(--ff-ease), color var(--ff-t-fast) var(--ff-ease), border-color var(--ff-t-fast) var(--ff-ease), box-shadow var(--ff-t) var(--ff-ease), transform var(--ff-t) var(--ff-ease); }
.ff-btn svg { width: 16px; height: 16px; flex-shrink: 0; transition: transform var(--ff-t) var(--ff-ease); }
.ff-btn:hover svg { transform: translateX(2px); }
.ff-btn:active { transform: translateY(1px); }
.ff-btn--primary { background: var(--ff-navy); color: #FFFFFF; box-shadow: 0 14px 30px -14px rgba(6, 30, 70, 0.55); }
.ff-btn--primary:hover { background: #14304D; color: #FFFFFF; box-shadow: 0 18px 36px -14px rgba(6, 30, 70, 0.6); }
.ff-btn--light { background: #FFFFFF; color: var(--ff-navy); box-shadow: 0 10px 26px -14px rgba(3, 10, 17, 0.45); }
.ff-btn--light:hover { background: #E3F1F4; color: var(--ff-navy); }
.ff-btn--teal { background: var(--ff-teal); color: #FFFFFF; }
.ff-btn--teal:hover { background: var(--ff-teal-ink); color: #FFFFFF; }
.ff-btn--ghost { background: transparent; color: var(--ff-navy); border-color: var(--ff-line-3); }
.ff-btn--ghost:hover { background: rgba(11, 31, 51, 0.04); color: var(--ff-navy); border-color: rgba(11, 31, 51, 0.28); }
.ff-btn--ghost-light { background: rgba(255, 255, 255, 0.06); color: #FFFFFF; border-color: rgba(255, 255, 255, 0.28); }
.ff-btn--ghost-light:hover { background: rgba(255, 255, 255, 0.14); color: #FFFFFF; }
.ff-btn--glass { background: rgba(255, 255, 255, 0.72); color: var(--ff-navy); border-color: rgba(255, 255, 255, 0.9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ff-btn--glass:hover { background: #FFFFFF; color: var(--ff-navy); }
.ff-btn--sm { min-height: 42px; padding: 10px 18px; font-size: 15px; }
.ff-btn--lg { min-height: 56px; padding: 16px 30px; font-size: 17px; }
.ff-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.ff-link { display: inline-flex; align-items: center; gap: 6px; font-family: var(--ff-display); font-size: 16px; letter-spacing: -0.02em; color: var(--ff-teal-ink); }
.ff-link svg { width: 15px; height: 15px; transition: transform var(--ff-t) var(--ff-ease); }
.ff-link:hover { color: var(--ff-navy); }
.ff-link:hover svg { transform: translateX(3px); }
.ff-dark .ff-link { color: var(--ff-cyan); }
.ff-dark .ff-link:hover { color: #FFFFFF; }

/* ---------- header (every page) ---------- */
.ff-header { position: sticky; top: 0; z-index: 60; }
.ff-header__bar { position: relative; max-width: 1680px; margin: 0 auto; height: 70px; padding: 0 clamp(14px, 2vw, 30px); }
.ff-header__glass { position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0; border-radius: var(--ff-pill); border: 1px solid rgba(255, 255, 255, 0.10); pointer-events: none; will-change: left, width, top, height; }
.ff-header__row { position: relative; height: 100%; padding: 0 clamp(8px, 1.4vw, 22px); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ff-header__logo { position: relative; z-index: 1; display: flex; align-items: center; min-width: 0; border-radius: 8px; }
.ff-header__logo img { height: 44px; width: auto; display: block; }
.ff-navpill { position: relative; z-index: 1; display: flex; align-items: center; gap: 2px; padding: 5px 6px; border: 1px solid transparent; border-radius: var(--ff-pill); }
.ff-navlink { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; font-family: var(--ff-display); font-size: 15px; letter-spacing: -0.02em; padding: 8px 14px; border: 0; border-radius: var(--ff-pill); color: #E6EDF4; background: transparent; white-space: nowrap; cursor: pointer; transition: background var(--ff-t-fast) var(--ff-ease), color var(--ff-t-fast) var(--ff-ease); }
.ff-navlink svg { width: 11px; height: 11px; opacity: 0.7; transition: transform var(--ff-t) var(--ff-ease); }
.ff-navlink:hover, .ff-navlink[aria-expanded="true"] { background: rgba(255, 255, 255, 0.12); color: #FFFFFF; }
.ff-navlink[aria-expanded="true"] svg { transform: rotate(180deg); }
.ff-navlink[data-current] { color: #FFFFFF; background: rgba(255, 255, 255, 0.14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10); }
.ff-header__actions { position: relative; z-index: 1; display: flex; align-items: center; gap: clamp(10px, 1.6vw, 20px); flex-shrink: 0; }
.ff-login { font-family: var(--ff-display); font-size: 15px; letter-spacing: -0.02em; color: #C3D1DF; padding: 8px 4px; }
.ff-login:hover { color: #FFFFFF; }
.ff-burger { width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.08); border-radius: 14px; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px; cursor: pointer; flex-shrink: 0; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ff-burger span { display: block; width: 17px; height: 1.5px; background: #FFFFFF; transition: transform var(--ff-t) var(--ff-ease), opacity var(--ff-t-fast); }
.ff-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.ff-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.ff-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.ff-drawer { position: absolute; left: clamp(10px, 2vw, 20px); right: clamp(10px, 2vw, 20px); top: 70px; border-radius: 22px; background: rgba(7, 21, 35, 0.97); border: 1px solid rgba(255, 255, 255, 0.10); max-height: calc(100svh - 84px); overflow-y: auto; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.55); animation: ffDrawerIn 280ms var(--ff-ease) both; }
.ff-drawer__in { padding: 6px clamp(18px, 4vw, 30px) 24px; }
.ff-drawer__label { padding: 18px 0 6px; font-family: var(--ff-display); font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ff-on-dark-3); }
.ff-drawer a:not(.ff-btn) { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 10px 2px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); font-family: var(--ff-display); font-size: 18px; letter-spacing: -0.025em; color: #E6EDF4; }
.ff-drawer a:not(.ff-btn) small { font-family: var(--ff-text); font-size: 13px; letter-spacing: 0; color: var(--ff-on-dark-3); }
.ff-drawer a[aria-current="page"] { color: var(--ff-cyan); }
.ff-drawer .ff-btn { width: 100%; margin-top: 20px; }
.ff-drawer__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@keyframes ffDrawerIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (max-width: 959px) {
  .ff-navpill, .ff-login { display: none; }
  .ff-burger { display: flex; }
}
@media (max-width: 420px) {
  .ff-header__logo img { height: 38px; }
  .ff-header__actions .ff-btn { padding: 9px 14px; font-size: 14px; min-height: 40px; }
}

/* ---------- sections ---------- */
.ff-sec { position: relative; padding: var(--ff-sec-y) var(--ff-pad-x); background: var(--ff-bg); }
.ff-sec--sm { padding-top: var(--ff-sec-y-sm); padding-bottom: var(--ff-sec-y-sm); }
.ff-sec--tint { background: var(--ff-bg-2); }
.ff-sec--sky { background: linear-gradient(180deg, #F2F8FC 0%, #FFFFFF 100%); }
.ff-sec--line { border-top: 1px solid var(--ff-line); }
.ff-dark { color: #FFFFFF; background: radial-gradient(900px 520px at 80% 0%, rgba(79, 189, 203, 0.18), transparent 62%), linear-gradient(162deg, #123049 0%, #0B1F33 56%, #081726 100%); }
.ff-sec.ff-dark { background: radial-gradient(900px 520px at 80% 0%, rgba(79, 189, 203, 0.18), transparent 62%), linear-gradient(162deg, #123049 0%, #0B1F33 56%, #081726 100%); }

/* ---------- page hero (inner pages): the homepage sky, without the full landscape ---------- */
.ff-phero { position: relative; overflow: hidden; margin-top: -70px; padding: calc(70px + clamp(40px, 6vw, 92px)) var(--ff-pad-x) clamp(56px, 6vw, 96px); color: var(--ff-ink); background: linear-gradient(180deg, #1C5DA6 0%, #3C86C8 18%, #7DBBE4 40%, #BFE0F2 62%, #EAF5FB 82%, #FFFFFF 100%); }
.ff-phero::before { /* soft cloud banks, painted, no image */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(520px 120px at 12% 30%, rgba(255, 255, 255, 0.34), transparent 70%),
    radial-gradient(640px 140px at 86% 22%, rgba(255, 255, 255, 0.30), transparent 70%),
    radial-gradient(900px 260px at 50% 56%, rgba(255, 255, 255, 0.36), transparent 72%);
}
.ff-phero::after { /* the horizon from the homepage landscape, faded into the page */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46%; pointer-events: none;
  background: url(/_v/07ol0ira7w/assets/hero/ff-hero-poster-1200.webp) center 78% / cover no-repeat;
  opacity: 0.22;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 45%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 45%, transparent 100%);
}
.ff-phero > * { position: relative; z-index: 1; }
.ff-phero__grid { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: clamp(32px, 4.6vw, 80px); align-items: center; max-width: var(--ff-wrap-wide); margin: 0 auto; }
.ff-phero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; min-width: 0; }
.ff-phero__copy .ff-h1 { color: var(--ff-navy); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 36px rgba(255, 255, 255, 0.4); }
.ff-phero__copy .ff-lead { color: #1E3A52; }
.ff-phero__crumb { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 8px; border-radius: var(--ff-pill); background: rgba(255, 255, 255, 0.62); border: 1px solid rgba(255, 255, 255, 0.85); font-family: var(--ff-display); font-size: 13.5px; color: var(--ff-navy); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ff-phero__crumb b { font-weight: 500; padding: 3px 9px; border-radius: var(--ff-pill); background: var(--ff-navy); color: #FFFFFF; font-size: 12px; letter-spacing: 0.02em; }
.ff-phero__crumb--mkt b { background: var(--ff-cobalt); }
.ff-phero__crumb--ops b { background: var(--ff-teal); }
.ff-phero__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding-top: 18px; margin-top: 4px; border-top: 1px solid rgba(11, 31, 51, 0.14); font-size: 15px; color: #1E3A52; }
.ff-phero__price b { font-family: var(--ff-display); font-weight: 400; font-size: 22px; letter-spacing: -0.02em; color: var(--ff-navy); }
.ff-phero__price span.ff-promo { color: var(--ff-teal-ink); font-weight: 500; }
.ff-phero__visual { position: relative; min-width: 0; }
.ff-phero--center { text-align: center; }
.ff-phero--center .ff-phero__copy { align-items: center; max-width: 820px; margin: 0 auto; }
.ff-phero--center .ff-lead { margin: 0 auto; }
.ff-phero--short { padding-bottom: clamp(48px, 5vw, 80px); }
@media (max-width: 1023px) {
  .ff-phero__grid { grid-template-columns: minmax(0, 1fr); }
  .ff-phero__visual { max-width: 720px; width: 100%; margin: 0 auto; }
}
@media (max-width: 640px) {
  .ff-phero { padding-top: calc(70px + 32px); }
}

/* ---------- cards and lists ---------- */
.ff-grid { display: grid; gap: var(--ff-gap); }
.ff-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ff-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ff-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1023px) { .ff-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ff-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .ff-grid--2, .ff-grid--3, .ff-grid--4 { grid-template-columns: minmax(0, 1fr); } }
.ff-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(36px, 5.4vw, 96px); align-items: center; }
.ff-split--rev > :first-child { order: 2; }
.ff-split--top { align-items: start; }
@media (max-width: 1023px) { .ff-split { grid-template-columns: minmax(0, 1fr); } .ff-split--rev > :first-child { order: 0; } }

.ff-card { position: relative; background: var(--ff-surface); border: 1px solid var(--ff-line); border-radius: var(--ff-r); padding: clamp(22px, 2.4vw, 32px); box-shadow: var(--ff-shadow-1); min-width: 0; }
.ff-card--flat { box-shadow: none; }
.ff-card--tint { background: var(--ff-bg-2); border-color: transparent; box-shadow: none; }
.ff-card--glass { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.ff-card__icon { width: 44px; height: 44px; border-radius: 13px; display: flex; align-items: center; justify-content: center; background: var(--ff-teal-soft); color: var(--ff-teal-ink); margin-bottom: 18px; }
.ff-card__icon svg { width: 21px; height: 21px; }
.ff-card__icon--mkt { background: var(--ff-cobalt-soft); color: var(--ff-cobalt-ink); }
.ff-card .ff-h3 + .ff-body { margin-top: 10px; }
.ff-card--link { transition: transform var(--ff-t) var(--ff-ease), box-shadow var(--ff-t) var(--ff-ease), border-color var(--ff-t) var(--ff-ease); }
.ff-card--link:hover { transform: translateY(-3px); box-shadow: var(--ff-shadow-2); border-color: rgba(2, 153, 174, 0.35); }

.ff-checks { display: grid; gap: 0; }
.ff-checks li { display: flex; gap: 12px; align-items: flex-start; padding: 13px 0; border-top: 1px solid var(--ff-line); font-size: 16px; line-height: 1.5; color: var(--ff-ink-2); }
.ff-checks li:last-child { border-bottom: 1px solid var(--ff-line); }
.ff-checks li > svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; padding: 4px; border-radius: 50%; background: var(--ff-teal-soft); color: var(--ff-teal-ink); }
.ff-checks li b { font-weight: 500; color: var(--ff-ink); font-family: var(--ff-display); letter-spacing: -0.01em; }
.ff-checks--bare li { border: 0 !important; padding: 7px 0; }
.ff-dark .ff-checks li { border-color: var(--ff-line-dark); color: var(--ff-on-dark-2); }
.ff-dark .ff-checks li b { color: #FFFFFF; }
.ff-dark .ff-checks li > svg { background: rgba(79, 189, 203, 0.16); color: var(--ff-cyan); }

.ff-feature { display: flex; flex-direction: column; gap: 10px; padding-top: 22px; border-top: 1px solid var(--ff-line-3); min-width: 0; }
.ff-feature__icon { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--ff-teal-soft); color: var(--ff-teal-ink); margin-bottom: 6px; }
.ff-feature__icon svg { width: 20px; height: 20px; }
.ff-feature__icon--mkt { background: var(--ff-cobalt-soft); color: var(--ff-cobalt-ink); }
.ff-dark .ff-feature { border-color: var(--ff-line-dark); }

.ff-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 0; border-top: 1px solid var(--ff-line-3); }
.ff-stat { padding: 22px 22px 22px 0; }
.ff-stat b { display: block; font-family: var(--ff-display); font-weight: 400; font-size: clamp(36px, 4vw, 54px); line-height: 1; letter-spacing: -0.045em; color: var(--ff-navy); }
.ff-stat span { display: block; margin-top: 10px; font-size: 15px; line-height: 1.5; color: var(--ff-ink-3); max-width: 26ch; }
.ff-dark .ff-stat b { color: #FFFFFF; }
.ff-dark .ff-stats { border-color: var(--ff-line-dark); }

.ff-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: var(--ff-pill); background: var(--ff-bg-2); border: 1px solid var(--ff-line); font-size: 13.5px; color: var(--ff-ink-2); white-space: nowrap; }
.ff-chip svg { width: 15px; height: 15px; }
.ff-chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* numbered steps (how it works) */
.ff-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); counter-reset: ffstep; }
.ff-step { position: relative; padding-top: 28px; min-width: 0; }
.ff-step::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--ff-line-3); }
.ff-step__n { position: absolute; top: -17px; left: 0; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #FFFFFF; border: 1px solid var(--ff-line-3); font-family: var(--ff-display); font-size: 14px; color: var(--ff-navy); }
.ff-step .ff-h3 { margin-top: 10px; }
.ff-step .ff-body { margin-top: 10px; max-width: 38ch; }
@media (max-width: 800px) { .ff-steps { grid-template-columns: minmax(0, 1fr); gap: 44px; } }

/* pricing callout */
.ff-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; }
.ff-price b { font-family: var(--ff-display); font-weight: 400; font-size: clamp(44px, 5vw, 64px); line-height: 1; letter-spacing: -0.045em; }
.ff-price s { font-size: 18px; color: var(--ff-ink-4); }
.ff-price span { font-size: 15px; color: var(--ff-ink-3); }
.ff-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: var(--ff-pill); background: var(--ff-teal-soft); color: var(--ff-teal-ink); font-family: var(--ff-display); font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.ff-badge--mkt { background: var(--ff-cobalt-soft); color: var(--ff-cobalt-ink); }
.ff-badge--promo { background: var(--ff-cyan); color: #04212A; }
.ff-dark .ff-badge { background: rgba(79, 189, 203, 0.16); color: var(--ff-cyan); }

/* ---------- FAQ (static, readable, keyboard friendly) ---------- */
.ff-faq { border-top: 1px solid var(--ff-line-3); }
.ff-faq__item { border-bottom: 1px solid var(--ff-line-3); }
.ff-faq__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 64px; padding: 22px 0; background: transparent; border: 0; cursor: pointer; text-align: left; font-family: var(--ff-display); font-size: clamp(18px, 1.7vw, 21px); line-height: 1.35; letter-spacing: -0.02em; color: var(--ff-ink); }
.ff-faq__q:hover { color: var(--ff-teal-ink); }
.ff-faq__icon { position: relative; width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; border: 1px solid var(--ff-line-3); transition: background var(--ff-t) var(--ff-ease), border-color var(--ff-t) var(--ff-ease); }
.ff-faq__icon::before, .ff-faq__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.6px; margin: -0.8px 0 0 -6px; border-radius: 2px; background: var(--ff-navy); transition: transform var(--ff-t) var(--ff-ease), background var(--ff-t); }
.ff-faq__icon::after { transform: rotate(90deg); }
.ff-faq__q[aria-expanded="true"] .ff-faq__icon { background: var(--ff-navy); border-color: var(--ff-navy); }
.ff-faq__q[aria-expanded="true"] .ff-faq__icon::before, .ff-faq__q[aria-expanded="true"] .ff-faq__icon::after { background: #FFFFFF; }
.ff-faq__q[aria-expanded="true"] .ff-faq__icon::after { transform: rotate(0deg); }
.ff-faq__a { padding: 0 54px 26px 0; font-size: 17px; line-height: 1.68; color: var(--ff-ink-2); max-width: 70ch; }

/* ---------- closing CTA: the hero's sky and hills, once more, as the last thing on the page ---------- */
.ff-end { position: relative; overflow: hidden; isolation: isolate; padding: clamp(120px, 12vw, 190px) var(--ff-pad-x) clamp(260px, 30vw, 440px); margin-bottom: -1px; background: var(--ff-navy-deep); color: var(--ff-navy); text-align: center; }
.ff-end__media { position: absolute; inset: 0; z-index: -1; background: #8CCBEA url(/_v/07ol0ira7w/assets/hero/ff-hero-poster-1200.webp) center 58% / cover no-repeat; }
.ff-end__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 58%; opacity: 0; transition: opacity 1200ms ease; }
.ff-end__media.is-playing video { opacity: 1; }
.ff-end__media::after { /* page colour melts into the sky at the top; a long eased fade carries the hills into navy at the bottom */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(70% 34% at 50% 26%, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0) 72%),
    linear-gradient(180deg, var(--ff-end-from, #FFFFFF) 0%, rgba(255, 255, 255, 0) clamp(90px, 12vw, 180px)),
    linear-gradient(180deg,
      rgba(6, 19, 34, 0) 0%, rgba(6, 19, 34, 0) 42%,
      rgba(6, 19, 34, 0.03) 47%, rgba(6, 19, 34, 0.08) 52%, rgba(6, 19, 34, 0.15) 57%, rgba(6, 19, 34, 0.25) 62%,
      rgba(6, 19, 34, 0.37) 67%, rgba(6, 19, 34, 0.5) 72%, rgba(6, 19, 34, 0.63) 77%, rgba(6, 19, 34, 0.75) 82%,
      rgba(6, 19, 34, 0.86) 87%, rgba(6, 19, 34, 0.94) 92%, rgba(6, 19, 34, 0.985) 96%, #061322 100%);
}
.ff-end--tint .ff-end__media::after { --ff-end-from: #F5F8FA; }
.ff-end__card { position: relative; max-width: 860px; margin: 0 auto; }
.ff-end__card .ff-h2 { font-size: clamp(36px, 4.8vw, 66px); color: var(--ff-navy); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35), 0 0 34px rgba(255, 255, 255, 0.5); }
.ff-end__card .ff-lead { margin: 18px auto 0; color: #1E3A52; text-shadow: 0 0 18px rgba(255, 255, 255, 0.6); }
.ff-end__card .ff-btns { justify-content: center; margin-top: 32px; }
.ff-end__card .ff-btn--glass { background: rgba(255, 255, 255, 0.82); }
.ff-end__card .ff-eyebrow, .ff-end__note { display: none; }
.ff-end--bare { padding: 0; height: clamp(180px, 22vw, 300px); }
@media (min-width: 1200px) { .ff-end__media { background-image: url(/_v/07ol0ira7w/assets/hero/ff-hero-poster.webp); } }

/* ---------- footer (every page) ---------- */
.ff-footer { position: relative; background: var(--ff-navy-deep); color: #FFFFFF; padding: clamp(24px, 3vw, 48px) var(--ff-pad-x) clamp(26px, 3vw, 36px); }
.ff-footer__top { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); }
.ff-footer__brand img { height: 44px; width: auto; display: block; }
.ff-footer__brand p { margin-top: 16px; font-size: 15px; line-height: 1.6; color: var(--ff-on-dark-2); max-width: 34ch; }
.ff-footer__contact { display: grid; gap: 6px; margin-top: 18px; font-size: 14.5px; }
.ff-footer__contact a, .ff-footer__contact button { color: #D5E0EA; justify-self: start; padding: 2px 0; background: none; border: 0; font: inherit; cursor: pointer; text-align: left; }
.ff-footer__contact a:hover, .ff-footer__contact button:hover { color: #FFFFFF; }
.ff-footer__h { font-family: var(--ff-display); font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ff-on-dark-3); }
.ff-footer__links { display: grid; gap: 4px; margin-top: 14px; }
.ff-footer__links a { display: inline-block; padding: 5px 0; font-size: 15px; color: #D5E0EA; justify-self: start; }
.ff-footer__links a:hover, .ff-footer__links a[aria-current="page"] { color: #FFFFFF; }
.ff-footer__bottom { margin-top: clamp(40px, 5vw, 64px); padding-top: 22px; border-top: 1px solid var(--ff-line-dark); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 24px; font-size: 13.5px; color: var(--ff-on-dark-3); }
.ff-footer__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px; }
.ff-footer__legal a, .ff-footer__legal button { padding: 6px 0; color: #A6B5C7; background: none; border: 0; font: inherit; cursor: pointer; }
.ff-footer__legal a:hover, .ff-footer__legal button:hover { color: #FFFFFF; }
@media (max-width: 860px) { .ff-footer__top { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ff-footer__brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { .ff-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- reveal (ff-site.js adds html.ffs-js; without JS or with reduced motion, everything is simply shown) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .ffs-js [data-rv]:not([data-rv-in]) { opacity: 0; transform: translateY(18px); }
  .ffs-js [data-rv] { transition: opacity 800ms var(--ff-ease), transform 900ms var(--ff-ease); transition-delay: calc(var(--rv-d, 0) * 80ms); }
  .ffs-js [data-rv-d="1"] { --rv-d: 1; } .ffs-js [data-rv-d="2"] { --rv-d: 2; } .ffs-js [data-rv-d="3"] { --rv-d: 3; }
  .ffs-js [data-rv-d="4"] { --rv-d: 4; } .ffs-js [data-rv-d="5"] { --rv-d: 5; } .ffs-js [data-rv-d="6"] { --rv-d: 6; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
}

/* ---------- page-hero entrance (short, CSS only) ---------- */
@keyframes ffIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes ffInR { from { opacity: 0; transform: translate3d(24px, 14px, 0) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes ffPopIn { from { opacity: 0; transform: translateY(10px) scale(0.94); } to { opacity: 1; transform: none; } }
@keyframes ffGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ffGrowY { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes ffDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes ffFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.ff-in { animation: ffIn 800ms var(--ff-ease) both; }
.ff-in--1 { animation-delay: 80ms; } .ff-in--2 { animation-delay: 160ms; } .ff-in--3 { animation-delay: 240ms; } .ff-in--4 { animation-delay: 320ms; }
.ff-in-visual { animation: ffInR 1000ms var(--ff-ease) 200ms both; }

/* =====================================================================
   Product mockup kit (.fx-*)
   A stage is a container; --u is 1% of its width, so a composition scales as one picture.
   Devices sit absolutely inside the stage (left/top/width as percentages set inline).
   ===================================================================== */
.fx-stage { position: relative; width: 100%; container-type: inline-size; }
.fx-stage__in { --u: 1cqw; position: relative; width: 100%; aspect-ratio: var(--fx-ar, 1.25); font-family: var(--ff-text); color: var(--ff-ink); font-size: calc(1.2 * var(--u)); line-height: 1.35; }
.fx-glow { position: absolute; inset: 6% 4% 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 100%); pointer-events: none; }
.fx-abs { position: absolute; }

/* app window: a clean desktop window (inner pages) */
.fx-win { position: absolute; border-radius: calc(1.2 * var(--u)); background: #FFFFFF; overflow: hidden; box-shadow: 0 0 0 1px rgba(11, 31, 51, 0.08), 0 calc(0.6 * var(--u)) calc(1.2 * var(--u)) rgba(11, 31, 51, 0.06), 0 calc(4 * var(--u)) calc(8 * var(--u)) calc(-3 * var(--u)) rgba(11, 31, 51, 0.42); display: flex; flex-direction: column; }
.fx-win__bar { display: flex; align-items: center; gap: calc(0.5 * var(--u)); height: calc(3 * var(--u)); padding: 0 calc(1.1 * var(--u)); background: #F3F5F8; border-bottom: 1px solid var(--ff-line); flex-shrink: 0; }
.fx-win__bar i { width: calc(0.75 * var(--u)); height: calc(0.75 * var(--u)); border-radius: 50%; background: #D5DBE1; }
.fx-win__bar i:nth-child(1) { background: #F2685E; } .fx-win__bar i:nth-child(2) { background: #F5BE4F; } .fx-win__bar i:nth-child(3) { background: #5CC66B; }
.fx-win__url { flex: 1; max-width: 46%; margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: calc(0.4 * var(--u)); height: calc(1.9 * var(--u)); border-radius: var(--ff-pill); background: #FFFFFF; font-family: var(--ff-sys); font-size: calc(0.95 * var(--u)); color: #4A5866; box-shadow: inset 0 0 0 1px var(--ff-line); white-space: nowrap; overflow: hidden; }
.fx-win__url svg { width: calc(0.9 * var(--u)); height: calc(0.9 * var(--u)); }
.fx-win__body { position: relative; flex: 1; min-height: 0; display: flex; overflow: hidden; background: var(--ff-surface-2); }

/* phone (same family as the hero's iPhone) */
.fx-phone { position: absolute; aspect-ratio: 9 / 19.2; border-radius: calc(4.6 * var(--u)); padding: calc(0.75 * var(--u)); background: #07090C; box-shadow: 0 0 0 calc(0.32 * var(--u)) #C8CDD2, 0 0 0 calc(0.32 * var(--u) + 1px) rgba(110, 118, 126, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 calc(3 * var(--u)) calc(5 * var(--u)) calc(-1.6 * var(--u)) rgba(11, 31, 51, 0.5); }
.fx-phone__screen { position: relative; width: 100%; height: 100%; border-radius: calc(3.9 * var(--u)); overflow: hidden; background: #FFFFFF; font-family: var(--ff-sys); display: flex; flex-direction: column; }
.fx-phone__screen::before { content: ""; position: absolute; z-index: 5; left: 50%; top: calc(0.9 * var(--u)); width: 32%; height: calc(2.1 * var(--u)); margin-left: -16%; border-radius: var(--ff-pill); background: #07090C; }
.fx-phone__status { flex-shrink: 0; height: calc(4.4 * var(--u)); display: flex; align-items: center; justify-content: space-between; padding: calc(0.4 * var(--u)) calc(2.4 * var(--u)) 0; font-size: calc(1.15 * var(--u)); font-weight: 600; color: var(--ff-navy); }
.fx-phone__status.is-light { color: #FFFFFF; }
.fx-phone__home { position: absolute; z-index: 5; left: 50%; bottom: calc(0.7 * var(--u)); width: 36%; height: calc(0.45 * var(--u)); margin-left: -18%; border-radius: var(--ff-pill); background: rgba(11, 31, 51, 0.55); }
.fx-phone__body { position: relative; flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }

/* tablet */
.fx-tablet { position: absolute; border-radius: calc(2 * var(--u)); padding: calc(1 * var(--u)); background: #07090C; box-shadow: 0 0 0 calc(0.32 * var(--u)) #C8CDD2, 0 0 0 calc(0.32 * var(--u) + 1px) rgba(110, 118, 126, 0.55), 0 calc(3 * var(--u)) calc(5 * var(--u)) calc(-1.6 * var(--u)) rgba(11, 31, 51, 0.45); }
.fx-tablet__screen { position: relative; width: 100%; height: 100%; border-radius: calc(1.1 * var(--u)); overflow: hidden; background: #FFFFFF; font-family: var(--ff-sys); display: flex; flex-direction: column; }

/* floating proof card */
.fx-card { position: absolute; z-index: 4; background: #FFFFFF; border-radius: calc(1.3 * var(--u)); padding: calc(1.3 * var(--u)) calc(1.5 * var(--u)); box-shadow: 0 0 0 1px rgba(11, 31, 51, 0.06), 0 calc(1.4 * var(--u)) calc(3.4 * var(--u)) calc(-1.2 * var(--u)) rgba(11, 31, 51, 0.35); font-size: calc(1.2 * var(--u)); }
.fx-card--dark { background: linear-gradient(160deg, #143550 0%, #0B1F33 70%); color: #FFFFFF; box-shadow: 0 calc(1.4 * var(--u)) calc(3.4 * var(--u)) calc(-1.2 * var(--u)) rgba(3, 10, 17, 0.6); }
.fx-card__row { display: flex; align-items: center; gap: calc(0.9 * var(--u)); }
.fx-card__ico { width: calc(3.2 * var(--u)); height: calc(3.2 * var(--u)); border-radius: calc(0.9 * var(--u)); display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--ff-teal-soft); color: var(--ff-teal-ink); }
.fx-card__ico svg { width: 52%; height: 52%; }
.fx-card__ico--green { background: var(--ff-green-soft); color: var(--ff-green); }
.fx-card__ico--blue { background: var(--ff-cobalt-soft); color: var(--ff-cobalt-ink); }
.fx-card__ico--app { background: none; padding: 0; overflow: hidden; }
.fx-card__ico--app img { width: 100%; height: 100%; display: block; }
.fx-card b { display: block; font-family: var(--ff-display); font-weight: 500; font-size: calc(1.3 * var(--u)); letter-spacing: -0.015em; line-height: 1.2; }
.fx-card small { display: block; font-size: calc(1.02 * var(--u)); color: var(--ff-ink-3); margin-top: calc(0.2 * var(--u)); }
.fx-card--dark small { color: var(--ff-cyan-ink); }
.fx-card__big { font-family: var(--ff-display); font-size: calc(3.6 * var(--u)); line-height: 1; letter-spacing: -0.04em; }
.fx-float { animation: ffFloat 7s ease-in-out infinite; }
.fx-float--b { animation-duration: 8.5s; animation-delay: -3s; }

/* --- app atoms (shared with the hero's look) --- */
.fx-side { width: 17%; flex-shrink: 0; background: var(--ff-side); color: #C7D3DE; display: flex; flex-direction: column; gap: calc(0.5 * var(--u)); padding: calc(1.2 * var(--u)) calc(0.9 * var(--u)); font-size: calc(1.02 * var(--u)); font-family: var(--ff-text); }
.fx-side__logo { width: 80%; display: block; margin: 0 0 calc(0.6 * var(--u)) calc(0.2 * var(--u)); }
.fx-side__new { display: flex; align-items: center; justify-content: center; padding: calc(0.5 * var(--u)); border-radius: calc(0.5 * var(--u)); background: var(--ff-teal); color: #FFFFFF; font-weight: 600; }
.fx-side__group { margin-top: calc(0.5 * var(--u)); font-size: calc(0.76 * var(--u)); letter-spacing: 0.1em; color: #6F8597; text-transform: uppercase; }
.fx-nav { display: flex; align-items: center; gap: calc(0.55 * var(--u)); padding: calc(0.4 * var(--u)) calc(0.55 * var(--u)); border-radius: calc(0.5 * var(--u)); white-space: nowrap; }
.fx-nav svg { width: calc(1.2 * var(--u)); height: calc(1.2 * var(--u)); flex-shrink: 0; }
.fx-nav.is-on { background: rgba(255, 255, 255, 0.11); color: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
.fx-nav em { margin-left: auto; font-style: normal; min-width: calc(1.4 * var(--u)); padding: 0 calc(0.35 * var(--u)); border-radius: 99px; background: var(--ff-teal); color: #FFFFFF; font-size: calc(0.78 * var(--u)); text-align: center; }
.fx-main { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--ff-surface-2); font-family: var(--ff-text); }
.fx-head { display: flex; align-items: center; gap: calc(0.8 * var(--u)); padding: calc(1 * var(--u)) calc(1.5 * var(--u)); background: #FFFFFF; border-bottom: 1px solid var(--ff-line); flex-shrink: 0; }
.fx-head__title { font-family: var(--ff-display); font-size: calc(1.8 * var(--u)); letter-spacing: -0.02em; margin-right: auto; white-space: nowrap; }
.fx-bsm { display: inline-flex; align-items: center; gap: calc(0.4 * var(--u)); padding: calc(0.4 * var(--u)) calc(0.85 * var(--u)); border-radius: calc(0.5 * var(--u)); border: 1px solid var(--ff-line); background: #FFFFFF; font-size: calc(0.98 * var(--u)); white-space: nowrap; color: var(--ff-ink); }
.fx-bsm--teal { background: var(--ff-teal); border-color: var(--ff-teal); color: #FFFFFF; font-weight: 600; }
.fx-bsm--navy { background: var(--ff-navy); border-color: var(--ff-navy); color: #FFFFFF; font-weight: 600; }
.fx-body { flex: 1; min-height: 0; padding: calc(1.2 * var(--u)) calc(1.5 * var(--u)); display: flex; flex-direction: column; gap: calc(0.9 * var(--u)); }
.fx-tile { background: #FFFFFF; border: 1px solid var(--ff-line); border-radius: calc(0.8 * var(--u)); padding: calc(0.95 * var(--u)) calc(1.1 * var(--u)); min-width: 0; }
.fx-tile__h { display: flex; align-items: baseline; justify-content: space-between; gap: calc(0.6 * var(--u)); font-family: var(--ff-display); font-size: calc(1.15 * var(--u)); letter-spacing: -0.015em; margin-bottom: calc(0.6 * var(--u)); }
.fx-tile__h small { font-family: var(--ff-text); font-size: calc(0.9 * var(--u)); color: var(--ff-ink-3); letter-spacing: 0; }
.fx-label { font-size: calc(0.95 * var(--u)); color: var(--ff-ink-3); white-space: nowrap; }
.fx-num { font-family: var(--ff-display); font-weight: 400; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.fx-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(0.8 * var(--u)); }
.fx-kpis--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fx-kpis--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fx-kpi .fx-num { display: block; font-size: calc(2.3 * var(--u)); line-height: 1.05; margin-top: calc(0.3 * var(--u)); }
.fx-kpi small { display: block; font-size: calc(0.92 * var(--u)); margin-top: calc(0.2 * var(--u)); color: var(--ff-ink-3); }
.fx-up { color: var(--ff-green) !important; font-weight: 600; }
.fx-muted { color: var(--ff-ink-3); }
.fx-cols { display: grid; gap: calc(0.9 * var(--u)); flex: 1; min-height: 0; }
.fx-pill { display: inline-flex; align-items: center; gap: calc(0.3 * var(--u)); font-size: calc(0.88 * var(--u)); padding: calc(0.15 * var(--u)) calc(0.6 * var(--u)); border-radius: 99px; white-space: nowrap; font-style: normal; background: #EEF2F5; color: var(--ff-ink-3); }
.fx-pill--new { background: var(--ff-cobalt-soft); color: var(--ff-cobalt-ink); }
.fx-pill--done { background: var(--ff-green-soft); color: var(--ff-green); }
.fx-pill--teal { background: var(--ff-teal-soft); color: var(--ff-teal-ink); }
.fx-pill--amber { background: var(--ff-amber-soft); color: #A86B12; }
.fx-av { width: calc(2.3 * var(--u)); height: calc(2.3 * var(--u)); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: calc(0.88 * var(--u)); font-family: var(--ff-display); font-weight: 500; flex-shrink: 0; background: #FFFFFF; box-shadow: inset 0 0 0 2px currentColor; }
.fx-row { display: grid; grid-template-columns: calc(2.3 * var(--u)) minmax(0, 1fr) auto; align-items: center; gap: calc(0.7 * var(--u)); padding: calc(0.55 * var(--u)) 0; font-size: calc(1.05 * var(--u)); }
.fx-row + .fx-row { border-top: 1px solid #EEF2F5; }
.fx-row b { display: block; font-family: var(--ff-display); font-weight: 500; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-row small { display: block; color: var(--ff-ink-3); font-size: calc(0.9 * var(--u)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-row--plain { grid-template-columns: minmax(0, 1fr) auto; }
.fx-bar { height: calc(0.75 * var(--u)); border-radius: 99px; background: #EDF1F4; overflow: hidden; }
.fx-bar i { display: block; height: 100%; border-radius: inherit; background: var(--ff-teal); transform-origin: left center; }
.fx-bar--blue i { background: var(--ff-cobalt); }
.fx-bar--green i { background: var(--ff-green); }
.fx-ico { display: inline-block; width: calc(1.3 * var(--u)); height: calc(1.3 * var(--u)); vertical-align: -0.2em; flex-shrink: 0; }
.fx-chart { display: block; width: 100%; height: auto; overflow: visible; }
.fx-chart path[data-line] { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
.fx-months { display: flex; justify-content: space-between; font-size: calc(0.85 * var(--u)); color: var(--ff-ink-3); margin-top: calc(0.4 * var(--u)); }
.fx-msg { max-width: 78%; padding: calc(0.6 * var(--u)) calc(0.85 * var(--u)); border-radius: calc(0.9 * var(--u)); line-height: 1.35; font-size: calc(1.05 * var(--u)); }
.fx-msg small { display: block; text-align: right; font-size: calc(0.78 * var(--u)); color: #7A8894; margin-top: calc(0.2 * var(--u)); }
.fx-msg--in { align-self: flex-start; background: #F1F3F6; border: 1px solid #E6EAEE; }
.fx-msg--out { align-self: flex-end; background: var(--ff-mint); }
.fx-msg--sys { align-self: center; max-width: none; padding: 0; background: none; font-size: calc(0.85 * var(--u)); letter-spacing: 0.05em; color: var(--ff-ink-3); }
.fx-map { position: relative; overflow: hidden; background: #E4E2DE; }
.fx-map > img, .fx-map > svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.fx-route { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.fx-cal { display: grid; grid-template-columns: calc(4.4 * var(--u)) repeat(5, minmax(0, 1fr)); flex: 1; min-height: 0; background: #FFFFFF; border: 1px solid var(--ff-line); border-radius: calc(0.8 * var(--u)); overflow: hidden; font-size: calc(0.9 * var(--u)); }
.fx-cal__h { padding: calc(0.5 * var(--u)); text-align: center; border-bottom: 1px solid var(--ff-line); color: var(--ff-ink-3); font-size: calc(0.86 * var(--u)); }
.fx-cal__h b { display: block; font-family: var(--ff-display); font-weight: 500; color: var(--ff-ink); font-size: calc(1.1 * var(--u)); }
.fx-cal__col { position: relative; border-left: 1px solid #F0F3F6; background: repeating-linear-gradient(180deg, transparent 0, transparent calc(3.2 * var(--u) - 1px), #F2F5F7 calc(3.2 * var(--u) - 1px), #F2F5F7 calc(3.2 * var(--u))); }
.fx-cal__t { color: var(--ff-ink-4); font-size: calc(0.78 * var(--u)); text-align: right; padding-right: calc(0.4 * var(--u)); }
.fx-ev { position: absolute; left: 5%; right: 5%; border-radius: calc(0.45 * var(--u)); padding: calc(0.3 * var(--u)) calc(0.45 * var(--u)); background: #EEF4FB; border-left: calc(0.3 * var(--u)) solid var(--c, var(--ff-teal)); font-size: calc(0.82 * var(--u)); line-height: 1.2; overflow: hidden; }
.fx-ev b { display: block; font-family: var(--ff-display); font-weight: 500; font-size: calc(0.88 * var(--u)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-ev span { color: var(--ff-ink-3); white-space: nowrap; }
.fx-glogo { font-family: 'Product Sans', var(--ff-sys); font-weight: 600; letter-spacing: -0.02em; }
.fx-stars { color: #F4B400; letter-spacing: 0.04em; }

@media (prefers-reduced-motion: reduce) { .fx-float { animation: none; } }

/* drawer only exists below the desktop nav breakpoint */
@media (min-width: 960px) { .ff-drawer { display: none; } }
.ff-faq h3 { margin: 0; font: inherit; letter-spacing: inherit; }
main:focus { outline: none; }

/* ---------- header dropdowns (built by site-chrome.js): clear "liquid glass" panels ---------- */
.ffm { position: fixed; left: 0; right: 0; top: 66px; z-index: 59; display: flex; justify-content: center; padding: 0 clamp(12px, 2vw, 24px); pointer-events: none; }
.ffm__panel { pointer-events: auto; width: 100%; max-width: 980px; padding: 10px; border-radius: 26px;
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.58) 0%, rgba(255, 255, 255, 0.36) 100%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(255, 255, 255, 0.25), 0 1px 2px rgba(11, 31, 51, 0.08), 0 28px 60px -26px rgba(11, 31, 51, 0.45);
  animation: ffmIn 260ms var(--ff-ease) both; transform-origin: 50% 0; }
.ffm__panel--ops { max-width: 700px; }
.ffm__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ffm__panel--ops .ffm__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ffm__item { position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 100%; padding: 18px 18px 20px; border-radius: 18px; color: var(--ff-navy);
  background: rgba(255, 255, 255, 0.42); border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition: background var(--ff-t) var(--ff-ease), transform var(--ff-t) var(--ff-ease), box-shadow var(--ff-t) var(--ff-ease); }
.ffm__item:hover, .ffm__item:focus-visible { background: rgba(255, 255, 255, 0.82); color: var(--ff-navy); transform: translateY(-2px); box-shadow: inset 0 1px 0 #FFFFFF, 0 14px 30px -18px rgba(11, 31, 51, 0.45); }
.ffm__item[aria-current="page"] { background: rgba(255, 255, 255, 0.78); box-shadow: inset 0 0 0 1.5px var(--acc, var(--ff-teal)); }
.ffm__ico { width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 6px; color: var(--acc, var(--ff-teal)); background: rgba(255, 255, 255, 0.85); box-shadow: 0 1px 2px rgba(11, 31, 51, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.9); }
.ffm__ico svg { width: 19px; height: 19px; }
.ffm__item b { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-family: var(--ff-display); font-weight: 400; font-size: 18px; letter-spacing: -0.02em; }
.ffm__item b svg { width: 15px; height: 15px; opacity: 0.45; transition: transform var(--ff-t) var(--ff-ease), opacity var(--ff-t); }
.ffm__item:hover b svg { transform: translateX(3px); opacity: 0.9; }
.ffm__item span { font-size: 14px; line-height: 1.5; color: #3A4D5F; }
@keyframes ffmIn { from { opacity: 0; transform: translateY(-6px) scale(0.985); } to { opacity: 1; transform: none; } }
@media (max-width: 959px) { .ffm { display: none !important; } }

/* =====================================================================
   Client website mockup (.qs-*): "Queen City Services", built on the layout of the real sites
   ForeFront ships (top bar, serif brand, video hero with a 3-step quote form, trust badges,
   what-we-do video, services grid, why-us band, blog, footer), in a light palette.
   Sizes use --q (defaults to the surrounding --u), so the same markup works in the homepage hero
   monitor, phone screens and .fx-stage windows. Videos use data-ff-video (see ff-site.js).
   ===================================================================== */
.qs { --q: var(--u, 1cqw); --qs-bg: #FBF9F5; --qs-sand: #F2ECE3; --qs-ink: #1F2A26; --qs-mute: #5E6963; --qs-acc: #A47B55; --qs-line: #E6DFD4;
  --qs-serif: 'Cormorant Garamond', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  position: relative; flex: 1; min-width: 0; min-height: 0; overflow: hidden; background: var(--qs-bg); color: var(--qs-ink); font-family: var(--ff-text); font-size: calc(0.95 * var(--q)); line-height: 1.45; text-align: left; }
.qs.qs b, .qs.qs strong { font-weight: 600; font-family: inherit; letter-spacing: inherit; }
.qs.qs em { font-style: italic; }
.qs.qs .qs__head { position: absolute; z-index: 3; left: 0; right: 0; top: 0; background: rgba(251, 249, 245, 0.96); box-shadow: 0 1px 0 var(--qs-line); }
.qs.qs .qs__top { display: flex; justify-content: space-between; padding: calc(0.45 * var(--q)) calc(2.2 * var(--q)); background: var(--qs-sand); font-size: calc(0.75 * var(--q)); color: var(--qs-mute); }
.qs.qs .qs__nav { display: flex; align-items: center; gap: calc(1.4 * var(--q)); padding: calc(0.85 * var(--q)) calc(2.2 * var(--q)); }
.qs.qs .qs__logo { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; line-height: 1; margin-right: auto; color: var(--qs-ink); }
.qs.qs .qs__logo b { font-family: var(--qs-serif); font-weight: 500; font-size: calc(1.55 * var(--q)); letter-spacing: 0.14em; }
.qs.qs .qs__logo small { font-size: calc(0.5 * var(--q)); letter-spacing: 0.42em; margin-top: calc(0.25 * var(--q)); color: var(--qs-acc); }
.qs.qs .qs__links { display: flex; gap: calc(1 * var(--q)); font-size: calc(0.66 * var(--q)); min-width: 0; overflow: hidden; letter-spacing: 0.1em; text-transform: uppercase; color: var(--qs-ink); white-space: nowrap; }
.qs.qs .qs__links i { font-style: normal; }
.qs.qs .qs__btn { display: inline-flex; align-items: center; justify-content: center; padding: calc(0.7 * var(--q)) calc(1.4 * var(--q)); border: 1px solid var(--qs-ink); color: var(--qs-ink); font-size: calc(0.72 * var(--q)); letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; background: transparent; }
.qs.qs .qs__btn--fill { background: var(--qs-ink); color: #FFFFFF; }
.qs.qs .qs__btn--acc { border-color: var(--qs-acc); color: var(--qs-acc); }
.qs.qs .qs__page { position: absolute; left: 0; right: 0; top: 0; padding-top: calc(5.3 * var(--q)); will-change: transform; }
.qs.qs .qs__eyebrow { display: block; font-size: calc(0.66 * var(--q)); letter-spacing: 0.28em; text-transform: uppercase; color: var(--qs-acc); }
.qs.qs .qs__h2 { display: block; font-family: var(--qs-serif); font-weight: 500 !important; font-size: calc(2.5 * var(--q)); line-height: 1.08; letter-spacing: -0.005em; color: var(--qs-ink); }
.qs.qs .qs__sub { display: block; font-family: var(--qs-serif); font-style: italic; font-size: calc(1.35 * var(--q)); color: var(--qs-mute); }
.qs.qs .qs__p { display: block; font-size: calc(0.92 * var(--q)); line-height: 1.55; color: var(--qs-mute); }

/* hero: video background, copy left, quote form right */
.qs.qs .qs__hero { position: relative; overflow: hidden; height: calc(33 * var(--q)); }
.qs.qs .qs__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: #E9E2D7 center / cover no-repeat; }
.qs.qs .qs__hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(251, 249, 245, 0.94) 0%, rgba(251, 249, 245, 0.82) 34%, rgba(251, 249, 245, 0.2) 62%, rgba(251, 249, 245, 0.05) 100%); }
.qs.qs .qs__hero-in { position: relative; z-index: 1; height: 100%; display: grid; grid-template-columns: 1.15fr 0.85fr; align-items: center; gap: calc(2.4 * var(--q)); padding: 0 calc(2.6 * var(--q)); }
.qs.qs .qs__welcome { display: block; font-family: var(--qs-serif); font-size: calc(1.05 * var(--q)); color: var(--qs-ink); }
.qs.qs .qs__welcome em { color: var(--qs-acc); }
.qs.qs .qs__h1 { display: block; margin-top: calc(0.6 * var(--q)); font-family: var(--qs-serif); font-weight: 500 !important; font-size: calc(3 * var(--q)); line-height: 1.04; color: var(--qs-ink); }
.qs.qs .qs__h1 em { display: block; margin-top: calc(0.3 * var(--q)); font-size: 1.2em; color: var(--qs-acc); }
.qs.qs .qs__hero-copy .qs__p { margin: calc(1 * var(--q)) 0 calc(1.4 * var(--q)); max-width: 40ch; color: #3E4944; }
.qs.qs .qs__form { padding: calc(1.3 * var(--q)) calc(1.4 * var(--q)); background: rgba(255, 255, 255, 0.86); border: 1px solid rgba(255, 255, 255, 0.95); box-shadow: 0 calc(1 * var(--q)) calc(3 * var(--q)) calc(-1 * var(--q)) rgba(31, 42, 38, 0.3); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.qs.qs .qs__step { display: block; font-size: calc(0.6 * var(--q)); letter-spacing: 0.2em; text-transform: uppercase; color: var(--qs-mute); }
.qs.qs .qs__prog { display: block; height: calc(0.22 * var(--q)); margin: calc(0.45 * var(--q)) 0 calc(0.9 * var(--q)); background: var(--qs-line); }
.qs.qs .qs__prog::before { content: ""; display: block; width: 34%; height: 100%; background: var(--qs-ink); }
.qs.qs .qs__form > b { display: block; font-family: var(--qs-serif); font-weight: 600 !important; font-size: calc(1.25 * var(--q)); }
.qs.qs .qs__form > small { display: block; font-size: calc(0.72 * var(--q)); color: var(--qs-mute); margin-bottom: calc(0.8 * var(--q)); }
.qs.qs .qs__fields { display: grid; grid-template-columns: 1fr 1fr; gap: calc(0.6 * var(--q)); }
.qs.qs .qs__fields span { display: flex; flex-direction: column; gap: calc(0.25 * var(--q)); font-size: calc(0.62 * var(--q)); color: var(--qs-mute); }
.qs.qs .qs__fields i { font-style: normal; display: flex; justify-content: space-between; padding: calc(0.45 * var(--q)) calc(0.6 * var(--q)); background: #FFFFFF; border: 1px solid var(--qs-line); color: var(--qs-ink); font-size: calc(0.72 * var(--q)); }
.qs.qs .qs__fields i::after { content: "▾"; color: var(--qs-mute); }
.qs.qs .qs__next { display: block; margin-top: calc(0.9 * var(--q)); padding: calc(0.6 * var(--q)); text-align: center; background: var(--qs-ink); color: #FFFFFF; font-size: calc(0.72 * var(--q)); letter-spacing: 0.12em; text-transform: uppercase; }

/* trust strip with badges */
.qs.qs .qs__trust { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: calc(2 * var(--q)); padding: calc(1.6 * var(--q)) calc(2.6 * var(--q)); background: #FFFFFF; border-top: 1px solid var(--qs-acc); border-bottom: 1px solid var(--qs-line); }
.qs.qs .qs__trust .qs__h2 { font-size: calc(1.6 * var(--q)); }
.qs.qs .qs__trust .qs__p { margin-top: calc(0.4 * var(--q)); max-width: 52ch; }
.qs.qs .qs__badges { display: flex; gap: calc(0.8 * var(--q)); }
.qs.qs .qs__badge { position: relative; width: calc(4.2 * var(--q)); height: calc(4.2 * var(--q)); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(0.1 * var(--q)); color: #FFFFFF; background: var(--c); box-shadow: inset 0 0 0 calc(0.28 * var(--q)) rgba(255, 255, 255, 0.85), 0 0 0 calc(0.18 * var(--q)) var(--c), 0 calc(0.3 * var(--q)) calc(0.8 * var(--q)) rgba(0, 0, 0, 0.18); font-size: calc(0.36 * var(--q)); font-weight: 700; letter-spacing: 0.06em; text-align: center; line-height: 1.05; text-transform: uppercase; }
.qs.qs .qs__badge svg { width: calc(1.5 * var(--q)); height: calc(1.5 * var(--q)); }
.qs.qs .qs__badge b { font-size: calc(0.8 * var(--q)); line-height: 1; }

/* what we do: copy + video */
.qs.qs .qs__what { display: grid; grid-template-columns: 1fr 1fr; gap: calc(2.6 * var(--q)); align-items: center; padding: calc(3.4 * var(--q)) calc(3.2 * var(--q)); }
.qs.qs .qs__what .qs__h2 { margin: calc(0.5 * var(--q)) 0 calc(0.2 * var(--q)); }
.qs.qs .qs__what .qs__p { margin: calc(0.9 * var(--q)) 0 calc(1.2 * var(--q)); }
.qs.qs .qs__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #E9E2D7 center / cover no-repeat; box-shadow: 0 calc(0.8 * var(--q)) calc(2.4 * var(--q)) calc(-0.8 * var(--q)) rgba(31, 42, 38, 0.35); }
.qs.qs .qs__media video, .qs.qs .qs__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* services grid */
.qs.qs .qs__services { padding: calc(3 * var(--q)) calc(3.2 * var(--q)); text-align: center; background: #FFFFFF; }
.qs.qs .qs__services > .qs__p { max-width: 62ch; margin: calc(0.8 * var(--q)) auto 0; }
.qs.qs .qs__svc { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: calc(1 * var(--q)); margin-top: calc(2 * var(--q)); text-align: left; }
.qs.qs .qs__svc > span { display: flex; flex-direction: column; gap: calc(0.5 * var(--q)); padding-top: calc(0.9 * var(--q)); border-top: 1px solid var(--qs-acc); }
.qs.qs .qs__svc b { font-family: var(--qs-serif); font-weight: 600 !important; font-size: calc(1.05 * var(--q)); line-height: 1.15; }
.qs.qs .qs__svc small { font-size: calc(0.66 * var(--q)); line-height: 1.45; color: var(--qs-mute); min-height: 4.4em; }
.qs.qs .qs__svc .qs__btn { padding: calc(0.45 * var(--q)); font-size: calc(0.56 * var(--q)); }

/* why-us band */
.qs.qs .qs__why { position: relative; overflow: hidden; display: grid; grid-template-columns: 0.9fr 1.1fr; gap: calc(2.4 * var(--q)); align-items: center; padding: calc(3 * var(--q)) calc(3.4 * var(--q)); background: var(--qs-sand); }
.qs.qs .qs__why::before { content: ""; position: absolute; inset: 0; background: var(--qs-why-img, none) center / cover no-repeat; opacity: 0.16; }
.qs.qs .qs__why > * { position: relative; }
.qs.qs .qs__why .qs__p { margin: calc(0.9 * var(--q)) 0 calc(1.2 * var(--q)); }
.qs.qs .qs__checks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(1.1 * var(--q)) calc(1 * var(--q)); font-size: calc(0.74 * var(--q)); }
.qs.qs .qs__checks span { display: flex; align-items: center; gap: calc(0.45 * var(--q)); }
.qs.qs .qs__checks span::before { content: "✓"; flex-shrink: 0; width: calc(1.2 * var(--q)); height: calc(1.2 * var(--q)); border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--qs-acc); color: #FFFFFF; font-size: calc(0.6 * var(--q)); }

/* blog + footer */
.qs.qs .qs__blog { padding: calc(3 * var(--q)) calc(3.2 * var(--q)); }
.qs.qs .qs__blog-h { display: flex; justify-content: space-between; align-items: baseline; }
.qs.qs .qs__blog-h .qs__h2 { font-size: calc(1.8 * var(--q)); }
.qs.qs .qs__blog-h small { color: var(--qs-acc); font-size: calc(0.72 * var(--q)); }
.qs.qs .qs__posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(1.1 * var(--q)); margin-top: calc(1.2 * var(--q)); }
.qs.qs .qs__posts span { display: flex; flex-direction: column; gap: calc(0.35 * var(--q)); background: #FFFFFF; border: 1px solid var(--qs-line); padding-bottom: calc(0.8 * var(--q)); }
.qs.qs .qs__posts img, .qs.qs .qs__posts video { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; background: #E9E2D7; }
.qs.qs .qs__posts small { padding: 0 calc(0.8 * var(--q)); color: var(--qs-mute); font-size: calc(0.6 * var(--q)); }
.qs.qs .qs__posts b { padding: 0 calc(0.8 * var(--q)); font-family: var(--qs-serif); font-size: calc(0.95 * var(--q)); line-height: 1.2; }
.qs.qs .qs__foot { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: calc(1.4 * var(--q)); padding: calc(2.6 * var(--q)) calc(3.2 * var(--q)); background: var(--qs-sand); border-top: 1px solid var(--qs-line); font-size: calc(0.66 * var(--q)); color: var(--qs-mute); }
.qs.qs .qs__foot b { display: block; margin-bottom: calc(0.5 * var(--q)); font-size: calc(0.62 * var(--q)); letter-spacing: 0.18em; text-transform: uppercase; color: var(--qs-ink); }
.qs.qs .qs__foot span { display: block; line-height: 1.8; }

/* phone version */
.qs.qs--m { font-size: calc(1.05 * var(--q)); }
.qs.qs--m .qs__nav { padding: calc(0.8 * var(--q)) calc(1.4 * var(--q)); }
.qs.qs--m .qs__logo b { font-size: calc(1.35 * var(--q)); }
.qs.qs--m .qs__burger { width: calc(1.8 * var(--q)); height: calc(1.2 * var(--q)); border-top: 1.5px solid var(--qs-ink); border-bottom: 1.5px solid var(--qs-ink); position: relative; }
.qs.qs--m .qs__burger::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1.5px solid var(--qs-ink); }
.qs.qs--m .qs__page { padding-top: calc(3.6 * var(--q)); }
.qs.qs--m .qs__hero { height: calc(30 * var(--q)); }
.qs.qs--m .qs__hero::after { background: linear-gradient(180deg, rgba(251, 249, 245, 0.25) 0%, rgba(251, 249, 245, 0.9) 58%, #FBF9F5 100%); }
.qs.qs--m .qs__hero-in { display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; padding: 0 calc(1.5 * var(--q)) calc(1.6 * var(--q)); gap: 0; }
.qs.qs--m .qs__h1 { font-size: calc(2.5 * var(--q)); }
.qs.qs--m .qs__hero-copy .qs__p { font-size: calc(0.9 * var(--q)); margin: calc(0.7 * var(--q)) 0 calc(1 * var(--q)); }
.qs.qs--m .qs__btn { font-size: calc(0.75 * var(--q)); padding: calc(0.8 * var(--q)) calc(1.2 * var(--q)); }
.qs.qs--m .qs__form { margin: calc(0.4 * var(--q)) calc(1.4 * var(--q)) 0; }
.qs.qs--m .qs__badges { justify-content: center; padding: calc(1.6 * var(--q)) 0 calc(0.6 * var(--q)); gap: calc(0.6 * var(--q)); }
.qs.qs--m .qs__badge { width: calc(3.8 * var(--q)); height: calc(3.8 * var(--q)); font-size: calc(0.34 * var(--q)); }
.qs.qs--m .qs__what { grid-template-columns: 1fr; padding: calc(1.6 * var(--q)) calc(1.5 * var(--q)); gap: calc(1 * var(--q)); }
.qs.qs--m .qs__h2 { font-size: calc(2 * var(--q)); }
.qs.qs--m .qs__svc { grid-template-columns: 1fr; gap: calc(0.8 * var(--q)); padding: 0 calc(1.5 * var(--q)) calc(1.5 * var(--q)); margin: 0; }

/* gentle auto-scroll for mockups outside the homepage hero (which scrolls itself) */
@keyframes qsScroll { 0%, 12% { transform: translateY(0); } 30%, 42% { transform: translateY(-24%); } 60%, 72% { transform: translateY(-46%); } 88%, 100% { transform: translateY(0); } }
.qs--auto .qs__page { animation: qsScroll 22s var(--ff-ease-io) infinite; }
@media (prefers-reduced-motion: reduce) { .qs--auto .qs__page { animation: none; } }

/* =====================================================================
   Round 3: bright from top to bottom. Navy is kept for the ending (landscape -> footer) only.
   ===================================================================== */

/* pricing band: light sky, white card */
.ff-sec--price { background: radial-gradient(900px 420px at 85% 0%, rgba(124, 187, 228, 0.22), transparent 65%), radial-gradient(700px 380px at 0% 100%, rgba(2, 153, 174, 0.08), transparent 65%), linear-gradient(180deg, #EEF6FB 0%, #F6FAFC 55%, #FFFFFF 100%); }
.ff-card--price { position: relative; overflow: hidden; padding: clamp(28px, 3vw, 42px); border-radius: var(--ff-r-lg); background: #FFFFFF; border: 1px solid var(--ff-line); box-shadow: var(--ff-shadow-3); }
.ff-card--price::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--acc, var(--ff-teal)), color-mix(in srgb, var(--acc, var(--ff-teal)) 40%, #FFFFFF)); }
.ff-card--price-mkt { --acc: var(--ff-cobalt); }

/* small detail row under a section's paragraph: real information, scannable */
.ff-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 8px; }
.ff-points > div { display: flex; flex-direction: column; gap: 6px; padding: 16px 16px 18px; border-radius: 16px; background: rgba(255, 255, 255, 0.7); border: 1px solid var(--ff-line); }
.ff-points > div > svg, .ff-points__ico { width: 34px; height: 34px; padding: 8px; border-radius: 10px; background: var(--ff-teal-soft); color: var(--ff-teal-ink); margin-bottom: 4px; }
.ff-points--mkt > div > svg { background: var(--ff-cobalt-soft); color: var(--ff-cobalt-ink); }
.ff-points b { font-family: var(--ff-display); font-weight: 400; font-size: 16.5px; letter-spacing: -0.015em; color: var(--ff-ink); }
.ff-points span { font-size: 14px; line-height: 1.5; color: var(--ff-ink-3); }
@media (max-width: 680px) { .ff-points { grid-template-columns: minmax(0, 1fr); } .ff-points > div { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 12px; } .ff-points span { flex-basis: 100%; } }

/* product pictures in content sections sit on a soft tinted stage with a faint map texture */
.ff-sec .fx-stage { isolation: isolate; }
.ff-sec .fx-stage::before { content: ""; position: absolute; z-index: -1; inset: -7% -5% -7% -5%; border-radius: 36px;
  background:
    radial-gradient(60% 70% at 70% 30%, rgba(124, 187, 228, 0.20), transparent 70%),
    radial-gradient(55% 60% at 20% 85%, rgba(2, 153, 174, 0.10), transparent 70%),
    linear-gradient(160deg, #F3F8FB 0%, #EEF4F8 100%); }
.ff-sec .fx-stage::after { content: ""; position: absolute; z-index: -1; inset: -7% -5% -7% -5%; border-radius: 36px; background: url(/_v/07ol0ira7w/assets/hero/map-desktop.jpg) center / cover no-repeat; opacity: 0.07; mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(75% 75% at 50% 50%, #000 30%, transparent 85%); mask-image: radial-gradient(75% 75% at 50% 50%, #000 30%, transparent 85%); }
.ff-sec--tint .fx-stage::before { background: radial-gradient(60% 70% at 70% 30%, rgba(124, 187, 228, 0.22), transparent 70%), linear-gradient(160deg, #FFFFFF 0%, #F7FAFC 100%); }
.ff-sec .fx-stage--bare::before, .ff-sec .fx-stage--bare::after { display: none; }

/* the connecting line: one faint thread that draws itself down the page as you scroll (ff-site.js) */
main { position: relative; }
.ff-thread { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; overflow: hidden; }
.ff-thread svg { position: absolute; left: 0; top: 0; overflow: visible; }
.ff-thread path { fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ff-thread .is-base { stroke: rgba(11, 31, 51, 0.06); }
.ff-thread .is-draw { stroke: url(#ffThreadGrad); stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0.55; }
.ff-thread circle { fill: #FFFFFF; stroke: var(--ff-teal); stroke-width: 2; filter: drop-shadow(0 0 6px rgba(2, 153, 174, 0.55)); }
@media (max-width: 1099px) { .ff-thread { display: none; } }
@media (prefers-reduced-motion: reduce) { .ff-thread .is-draw { stroke-dashoffset: 0 !important; } .ff-thread circle { display: none; } }
@media (min-width: 1024px) and (max-width: 1279px) {
  .ff-split .ff-points { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .ff-split .ff-points > div { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 12px; padding: 12px 14px; }
  .ff-split .ff-points > div > svg { grid-row: 1 / 3; margin: 0; }
}