/* ==========================================================================
   Free 48-Hour Audit landing page (/free-audit)  —  v3
   Brand-aligned with the Buildertrend / Procore cluster hero language.
   Palette: #009282 teal, #0EAFA0 bright teal, #00293a dark, #0E1F2A darker,
   #0A4F4A deep teal, #15A37A / #0E7D5E green, #8FD9BF mint. No warm/yellow.
   ========================================================================== */

.fa-body {
  --fa-teal:     #009282;
  --fa-teal-b:   #0EAFA0;   /* bright teal */
  --fa-teal-d:   #007a6d;
  --fa-ink:      #00293a;
  --fa-darker:   #0E1F2A;
  --fa-deep:     #0A4F4A;
  --fa-green:    #15A37A;
  --fa-green-d:  #0E7D5E;
  --fa-mint:     #8FD9BF;
  --fa-mint-bg:  #e7f6f1;
  --fa-cyan:     #5ee8e8;
  --fa-cyan-l:   #9affff;
  --fa-paper:    #f2f8f7;
  --fa-soft:     #f6fafa;
  --fa-surface:  #ffffff;
  --fa-text:     #253c45;
  --fa-muted:    #46636d;   /* darkened: the old #5a747c read washed out */
  --fa-line:     #e2ecee;
  --fa-shadow:   0 22px 50px -24px rgba(0,41,58,.34);
  --fa-shadow-sm:0 8px 22px -12px rgba(0,41,58,.24);
  --fa-radius:   20px;

  margin: 0;
  background: var(--fa-paper);
  color: var(--fa-text);
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
.fa-body * { box-sizing: border-box; }
.fa-body img { max-width: 100%; }

/* Body copy weight/colour, matched to the Buildertrend + Procore cluster theme
   (which ships p/li at 600 / #294049). :where() keeps this at zero-ish
   specificity so every component rule below still wins on dark surfaces. */
.fa-body :where(p, li) { font-weight: 600; color: var(--fa-text); }
.fa-body :where(b, strong) { font-weight: 800; }

/* Layout ------------------------------------------------------------------ */
.fa-wrap { width: 100%; max-width: 700px; margin-inline: auto; padding-inline: 20px; }
/* Section rhythm. Adjacent sections stack their padding, so the gap a reader
   actually sees is double this number: 40 here reads as ~80px between blocks.
   It was 54 (a 108px gap on a phone), which left the page feeling like it had
   fallen apart between sections. Tuned per breakpoint further down. */
.fa-section { padding: 40px 0; }
.fa-body h1, .fa-body h2, .fa-body h3 {
  font-family: "Lexend", "Manrope", system-ui, sans-serif;
  color: var(--fa-ink); line-height: 1.12; letter-spacing: -0.02em; margin: 0 0 .5em;
}
.fa-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--fa-teal-d); background: var(--fa-mint-bg); padding: 8px 15px; border-radius: 999px;
  border: 1px solid rgba(0,146,130,.16);
}
.fa-eyebrow svg { width: 15px; height: 15px; }
.fa-h2 { font-size: clamp(27px, 6.6vw, 42px); font-weight: 900; margin-top: 16px; }
.fa-sec-intro { color: #3d5a64; margin: 0 0 28px; font-size: 17px; font-weight: 600; line-height: 1.6; }

/* Section heads read as a landing page, not an article: centred, with the
   cards below them left-aligned as normal. */
.fa-section > .fa-wrap { text-align: center; }
.fa-sec-intro { max-width: 58ch; margin-inline: auto; }
.fa-finds, .fa-findings, .fa-shots, .fa-howcard, .fa-statcard, .fa-trans,
.fa-testimonials, .fa-faq, .fa-email, .fa-form-card .fa-field,
.fa-sahil { text-align: left; }

/* Buttons ----------------------------------------------------------------- */
.fa-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 58px; padding: 16px 22px;
  font-family: "Lexend", sans-serif; font-size: 18px; font-weight: 800; letter-spacing: .01em;
  color: #fff; text-decoration: none; text-align: center;
  background: linear-gradient(115deg, var(--fa-green) 0%, var(--fa-teal) 55%, var(--fa-teal-d) 100%);
  border: none; border-radius: 14px; cursor: pointer;
  box-shadow: 0 16px 34px -12px rgba(0,146,130,.7);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.fa-cta:hover  { transform: translateY(-2px); box-shadow: 0 22px 40px -12px rgba(0,146,130,.75); filter: brightness(1.05); color:#fff; }
.fa-cta:active { transform: translateY(0); }
.fa-cta svg { width: 20px; height: 20px; }
.fa-cta[disabled] { opacity: .75; cursor: default; transform: none; }

/* FREE flag on the CTA, same badge the integration/location pages use. */
.fa-cta-free { position: relative; overflow: visible; }
.fa-free-flag {
  position: absolute; top: -16px; right: -12px; z-index: 3;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 15px; border-radius: 6px; white-space: nowrap; overflow: hidden;
  background: linear-gradient(135deg, #ff4d5e 0%, #E63946 45%, #b91c1c 100%);
  border: 1.5px solid rgba(255,255,255,.85); color: #fff;
  font-family: "Lexend", sans-serif; font-weight: 800; font-size: 14px; line-height: 1;
  letter-spacing: 2px; text-transform: uppercase; text-shadow: 0 1px 2px rgba(0,0,0,.3);
  box-shadow: 0 10px 22px rgba(230,57,70,.5), 0 3px 8px rgba(185,28,28,.4),
              inset 0 1px 0 rgba(255,255,255,.35), inset 0 -2px 0 rgba(0,0,0,.18);
  animation: fa-flag-wiggle 2s ease-in-out infinite;
  pointer-events: none;
}
.fa-free-flag::before {
  content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(115deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-20deg); animation: fa-flag-shine 2.6s ease-in-out infinite;
}
@keyframes fa-flag-wiggle {
  0%, 100% { transform: rotate(-5deg) scale(1); }
  25%      { transform: rotate(4deg)  scale(1.05); }
  50%      { transform: rotate(-3deg) scale(1); }
  75%      { transform: rotate(5deg)  scale(1.05); }
}
@keyframes fa-flag-shine {
  0%        { left: -60%; }
  60%, 100% { left: 140%; }
}
@media (prefers-reduced-motion: reduce) {
  .fa-free-flag { animation: none; transform: rotate(-4deg); }
  .fa-free-flag::before { animation: none; opacity: 0; }
}

/* ===================== HERO (Buildertrend/Procore language) ============== */
.fa-hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(1100px 560px at 92% 118%, rgba(14,175,160,.22), transparent 60%),
    radial-gradient(820px 460px at -8% -10%, rgba(0,146,130,.30), transparent 62%),
    linear-gradient(135deg, var(--fa-darker) 0%, var(--fa-deep) 100%);
  color: #eafeff;
}
.fa-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(circle at 80% 30%, #000 0%, transparent 72%);
  mask-image: radial-gradient(circle at 80% 30%, #000 0%, transparent 72%);
}
.fa-hero .fa-wrap { position: relative; z-index: 2; }
.fa-topbar { padding: 20px 0 8px; }
.fa-topbar a { display: inline-block; }
.fa-topbar img { height: 28px; width: auto; display: block; filter: brightness(0) invert(1); transition: opacity .15s ease; }
.fa-topbar a:hover img { opacity: .8; }
.fa-hero-in { padding: 20px 0 46px; }

.fa-hero h1 {
  color: #fff; font-family: "Lexend", sans-serif; font-weight: 900;
  font-size: clamp(33px, 9vw, 50px); line-height: 1.06; letter-spacing: -0.03em;
  margin: 12px 0 18px; text-shadow: 0 2px 16px rgba(0,0,0,.35);
}
.fa-hero h1 .fa-hl {
  background: linear-gradient(135deg, var(--fa-cyan-l) 0%, var(--fa-cyan) 55%, #00c5b0 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.fa-hero .fa-sub { color: rgba(255,255,255,.95); font-size: 18px; font-weight: 600; line-height: 1.66; margin: 0 0 26px; max-width: 46ch; text-shadow: 0 1px 2px rgba(0,0,0,.3); }
.fa-hero .fa-sub strong { color: #fff; font-weight: 800; }
.fa-hero .fa-sub em { font-style: normal; font-weight: 800; color: var(--fa-cyan-l); }

/* Hero trust row — client avatars + stars (matches BT social-proof) */
.fa-trust { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
.fa-avatars { display: flex; }
.fa-avatar {
  width: 46px; height: 46px; border-radius: 50%; margin-left: -12px;
  background: #fff; border: 2px solid rgba(255,255,255,.85); display: grid; place-items: center;
  box-shadow: 0 8px 18px rgba(0,0,0,.3);
}
.fa-avatar:first-child { margin-left: 0; }
/* The image is clipped, not the cell: overflow:hidden on the cell would eat the
   name tooltip below. */
.fa-avatar img { width: 100%; height: 100%; object-fit: contain; padding: 7px; border-radius: 50%; }
/* Client name on hover/tap, same behaviour as the cluster/bookkeeping pages */
.fa-avatar { position: relative; overflow: visible; transition: transform .16s ease; cursor: pointer; }
.fa-avatar:nth-child(1) { z-index: 5; } .fa-avatar:nth-child(2) { z-index: 4; }
.fa-avatar:nth-child(3) { z-index: 3; } .fa-avatar:nth-child(4) { z-index: 2; }
.fa-avatar:hover, .fa-avatar:focus { transform: translateY(-3px) scale(1.07); z-index: 6; outline: none; }
.fa-avatar::after {
  content: attr(data-tip);
  position: absolute; left: 50%; bottom: calc(100% + 9px);
  transform: translateX(-50%) translateY(4px);
  padding: 6px 10px; border-radius: 6px; white-space: nowrap;
  background: #00293a; color: #fff; border: 1px solid rgba(154,255,255,.28);
  font-size: 11.5px; font-weight: 700; line-height: 1;
  opacity: 0; pointer-events: none; z-index: 100;
  transition: opacity .16s ease, transform .16s ease;
}
/* :focus covers the phone, where there is no hover: the cells are focusable, so a
   tap reveals the name. */
.fa-avatar:hover::after, .fa-avatar:focus::after { opacity: 1; transform: translateX(-50%) translateY(0); }
.fa-sp-div { width: 1px; height: 34px; background: rgba(255,255,255,.18); }
.fa-rating { display: flex; flex-direction: column; gap: 3px; }
.fa-stars { display: flex; gap: 2px; }
.fa-stars img { height: 16px; width: auto; }
.fa-proof-copy { color: rgba(215,251,251,.9); font-size: 13px; font-weight: 700; }

/* ===================== LOGO BAND (colored, light) ======================== */
/* ===================== PLATFORM MARQUEE ================================== */
.fa-logoband { background: var(--fa-surface); border-bottom: 1px solid var(--fa-line); padding: 30px 0 28px; overflow: hidden; }
.fa-logoband > .fa-wrap > p { text-align: center; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--fa-muted); margin: 0 0 18px; }

/* The row is a viewport; the track inside it is moved by script. The mask fades
   the chips out at both edges instead of letting them get guillotined. */
.fa-mq {
  position: relative; overflow: hidden; cursor: grab;
  touch-action: pan-y;          /* horizontal drags come to us, vertical scroll stays with the page */
  user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  padding: 5px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.fa-mq.is-dragging { cursor: grabbing; }
.fa-mq-track { display: flex; width: max-content; will-change: transform; }
.fa-mq-set { display: flex; gap: 10px; padding-right: 10px; }

/* One fixed mark box + our own type for the name, so a compact glyph and a wide
   wordmark land at the same visual weight. */
.fa-chip {
  display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto;
  background: var(--fa-surface); border: 1px solid var(--fa-line);
  border-radius: 999px; padding: 8px 18px 8px 9px;
  font-size: 15px; font-weight: 800; color: var(--fa-ink);
  white-space: nowrap; box-shadow: var(--fa-shadow-sm);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.fa-mq:not(.is-dragging) .fa-chip:hover { border-color: var(--fa-teal-b); box-shadow: 0 10px 24px -12px rgba(0,146,130,.5); transform: translateY(-2px); }
.fa-chip-mark {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; background: var(--fa-soft); border: 1px solid var(--fa-line);
}
.fa-chip-mark img { width: 24px; height: 24px; object-fit: contain; display: block; }

/* ===================== WHAT THE AUDIT FINDS ============================== */
.fa-finds-sec { background: linear-gradient(180deg, var(--fa-mint-bg), var(--fa-paper)); }
.fa-finds { display: grid; gap: 15px; }
.fa-find {
  display: flex; gap: 15px; align-items: flex-start;
  background: var(--fa-surface); border: 1px solid var(--fa-line);
  border-radius: var(--fa-radius); padding: 20px; box-shadow: var(--fa-shadow-sm);
  transition: transform .15s ease, box-shadow .15s ease;
}
.fa-find:hover { transform: translateY(-3px); box-shadow: var(--fa-shadow); }
.fa-find-ico { flex: 0 0 auto; width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; color: #fff; }
.fa-find-ico svg { width: 25px; height: 25px; }
.fa-find:nth-child(1) .fa-find-ico { background: linear-gradient(140deg, var(--fa-green), var(--fa-teal-d)); }
.fa-find:nth-child(2) .fa-find-ico { background: linear-gradient(140deg, var(--fa-teal-b), var(--fa-teal)); }
.fa-find:nth-child(3) .fa-find-ico { background: linear-gradient(140deg, var(--fa-teal), var(--fa-deep)); }
.fa-find:nth-child(4) .fa-find-ico { background: linear-gradient(140deg, var(--fa-green-d), var(--fa-teal)); }
.fa-find:nth-child(5) .fa-find-ico { background: linear-gradient(140deg, var(--fa-deep), var(--fa-ink)); }
.fa-find:nth-child(6) .fa-find-ico { background: linear-gradient(140deg, var(--fa-ink), var(--fa-darker)); }
.fa-find h3 { font-size: 18px; font-weight: 800; margin: 2px 0 7px; letter-spacing: -0.015em; }
.fa-find p { margin: 0; font-size: 16px; color: #3d5a64; font-weight: 600; line-height: 1.56; }
.fa-find b { color: var(--fa-ink); font-weight: 800; }

/* ===================== DELIVERABLE / STAT =============================== */
.fa-deliver { background: var(--fa-surface); }
.fa-statcard {
  position: relative; overflow: hidden;
  background: linear-gradient(150deg, var(--fa-darker) 0%, var(--fa-ink) 55%, var(--fa-deep) 100%);
  border-radius: 24px; padding: 30px 24px; color: #eafeff; box-shadow: var(--fa-shadow);
}
.fa-statcard::after { content: ""; position: absolute; right: -40px; top: -40px; width: 220px; height: 220px; background: radial-gradient(circle, rgba(14,175,160,.32), transparent 70%); }
.fa-statcard .fa-tagline { position: relative; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--fa-mint); margin: 0 0 8px; }
.fa-stat-num {
  position: relative; font-family: "Lexend", sans-serif; font-weight: 900; line-height: 1;
  font-size: clamp(48px, 15vw, 76px); letter-spacing: -0.03em;
  background: linear-gradient(120deg, #fff 0%, var(--fa-cyan) 130%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.fa-stat-sub { position: relative; font-size: 17.5px; font-weight: 600; line-height: 1.55; color: #d8eded; margin: 14px 0 0; max-width: 34ch; }
.fa-stat-sub b { color: #fff; font-weight: 800; }
.fa-report-note { display: flex; align-items: center; justify-content: center; gap: 9px; max-width: 44ch; margin: 24px auto 0; text-align: left; font-size: 14.5px; font-weight: 700; color: var(--fa-muted); }
.fa-report-note svg { flex: 0 0 auto; width: 17px; height: 17px; color: var(--fa-teal); }

/* ============ AUDIT PAGE EVIDENCE CARDS ================================
   The page image can never be readable shrunk to phone width, so each card
   states its finding in real text first and the spreadsheet sits underneath
   as proof, opening full size on tap. */
.fa-shots { display: grid; gap: 20px; margin-top: 28px; }
.fa-shot {
  margin: 0; background: var(--fa-surface); border: 1px solid var(--fa-line);
  border-radius: var(--fa-radius); box-shadow: var(--fa-shadow); overflow: hidden;
}
.fa-shot-head { padding: 22px 20px 16px; }
.fa-shot-tag {
  display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--fa-teal-d); background: var(--fa-mint-bg); padding: 5px 12px; border-radius: 999px; margin-bottom: 12px;
}
.fa-shot-head h3 { font-size: 19px; font-weight: 800; margin: 0 0 8px; line-height: 1.25; }
.fa-shot-head p { margin: 0; font-size: 15.5px; font-weight: 600; line-height: 1.55; color: #3d5a64; }

.fa-shot-img {
  display: block; position: relative; width: 100%; padding: 0; margin: 0; cursor: zoom-in;
  border: none; border-top: 1px solid var(--fa-line); background: #eef4f5; font: inherit;
}
.fa-shot-img img { width: 100%; display: block; }
/* The hint sits in its own strip under the page, never on top of a number. */
.fa-zoom-hint {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 14px; border-top: 1px solid var(--fa-line); background: var(--fa-surface);
  font-family: "Lexend", sans-serif; font-size: 14px; font-weight: 700; color: var(--fa-teal-d);
}
.fa-zoom-hint svg { width: 17px; height: 17px; }
.fa-shot-img:hover .fa-zoom-hint { background: var(--fa-mint-bg); }

/* Full-size viewer */
.fa-lightbox {
  position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column;
  background: rgba(6,26,34,.94); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.fa-lightbox[hidden] { display: none; }
.fa-lb-scroll { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; display: flex; align-items: center; padding: 56px 12px 12px; }
.fa-lb-scroll img { max-width: none; width: auto; height: auto; margin: auto; border-radius: 8px; background: #fff; box-shadow: 0 30px 60px -20px rgba(0,0,0,.6); }
.fa-lb-close {
  position: absolute; top: 12px; right: 12px; z-index: 2; width: 44px; height: 44px;
  display: grid; place-items: center; border: none; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.14); color: #fff;
}
.fa-lb-close:hover { background: rgba(255,255,255,.26); }
.fa-lb-close svg { width: 22px; height: 22px; }
.fa-lb-note { margin: 0; padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px)); text-align: center; font-size: 13px; font-weight: 700; color: rgba(215,251,251,.75); }

/* ===================== HOW IT WORKS (2-step card) ======================= */
.fa-how-sec { background: linear-gradient(180deg, var(--fa-paper), var(--fa-mint-bg)); }
.fa-howcard { background: var(--fa-surface); border: 1px solid var(--fa-line); border-radius: 24px; box-shadow: var(--fa-shadow); padding: 8px 6px; }
.fa-how-step { display: flex; gap: 16px; align-items: flex-start; padding: 22px 20px; }
.fa-how-step + .fa-how-step { border-top: 1px dashed var(--fa-line); }
.fa-how-n { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; font-family: "Lexend", sans-serif; font-weight: 800; font-size: 22px; color: #fff; }
.fa-how-step:nth-child(1) .fa-how-n { background: linear-gradient(150deg, var(--fa-green), var(--fa-teal-d)); box-shadow: 0 10px 22px -10px rgba(0,146,130,.7); }
.fa-how-step:nth-child(2) .fa-how-n { background: linear-gradient(150deg, var(--fa-teal-b), var(--fa-teal)); box-shadow: 0 10px 22px -10px rgba(14,175,160,.6); }
.fa-how-step h3 { font-size: 20px; font-weight: 800; margin: 5px 0 6px; }
.fa-how-step p { margin: 0; font-size: 16.5px; font-weight: 600; line-height: 1.58; color: #3d5a64; }
.fa-how-step p + p { margin-top: 10px; }
.fa-how-step p b { color: var(--fa-ink); font-weight: 800; }
.fa-how-step .fa-pill-badge { display: inline-block; margin-top: 11px; font-size: 12.5px; font-weight: 800; color: var(--fa-teal-d); background: var(--fa-mint-bg); padding: 5px 12px; border-radius: 999px; }

/* ===================== BEFORE / AFTER TURNAROUNDS ======================= */
.fa-trans-sec { background: var(--fa-surface); }
.fa-trans { display: grid; gap: 18px; }
.fa-tr {
  display: flex; flex-direction: column;
  background: var(--fa-surface); border: 1px solid var(--fa-line);
  border-radius: 22px; box-shadow: var(--fa-shadow-sm); overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}
.fa-tr:hover { transform: translateY(-3px); box-shadow: var(--fa-shadow); }

/* Fixed height so a two-line client name cannot knock the three cards' rows out
   of line with each other. */
.fa-tr-head {
  display: flex; align-items: center; gap: 13px; padding: 18px 20px; min-height: 112px;
  background: linear-gradient(150deg, var(--fa-darker), var(--fa-ink) 60%, var(--fa-deep));
}
.fa-tr-logo {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 13px;
  display: grid; place-items: center; background: rgba(255,255,255,.94);
}
.fa-tr-logo img { width: 32px; height: 32px; object-fit: contain; display: block; }
.fa-tr-head h3 { color: #fff; font-size: 18.5px; font-weight: 800; margin: 0 0 2px; letter-spacing: -0.015em; }
.fa-tr-meta { margin: 0; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--fa-mint); }

/* Two tinted columns under one label. The colour carries the direction, so the
   row needs no arrow: red is the state we walked into, teal is the state now.
   Red tokens are the ones the hero's red-flag rows already use. */
.fa-tr-tbl { display: grid; grid-template-columns: 1fr 1fr; column-gap: 8px; padding: 0 20px 6px; }
.fa-tr-hd {
  padding: 12px 0 8px; text-align: center;
  font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
}
.fa-tr-hd--b { color: #b5646a; }
.fa-tr-hd--a { color: var(--fa-teal-d); }
.fa-tr-label {
  grid-column: 1 / -1; padding: 14px 0 8px; border-top: 1px dashed var(--fa-line);
  font-size: 13.5px; font-weight: 700; color: var(--fa-muted); line-height: 1.4;
}
.fa-tr-b, .fa-tr-a {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 42px; padding: 8px 10px; border-radius: 11px;
  font-size: 14px; font-weight: 800; line-height: 1.35;
}
.fa-tr-b { background: #fef4f3; border: 1px solid #f6dedb; color: #a23b34; }
.fa-tr-a { background: var(--fa-mint-bg); border: 1px solid #cbe9de; color: var(--fa-teal-d); font-family: "Lexend", sans-serif; }

.fa-tr-now { margin-top: auto; padding: 17px 20px 19px; background: var(--fa-soft); border-top: 1px solid var(--fa-line); }
.fa-tr-now-tag {
  display: inline-block; margin-bottom: 8px;
  font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--fa-teal-d);
}
.fa-tr-now p { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.55; color: #3d5a64; }
.fa-tr-now a {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
  font-size: 14.5px; font-weight: 800; color: var(--fa-teal-d); text-decoration: none;
}
.fa-tr-now a:hover { color: var(--fa-ink); }
.fa-tr-now a svg { width: 15px; height: 15px; transition: transform .15s ease; }
.fa-tr-now a:hover svg { transform: translateX(3px); }

/* ===================== MEET SAHIL ======================================= */
.fa-sahil-sec { background: var(--fa-soft); }
.fa-sahil { display: flex; gap: 18px; align-items: center; background: var(--fa-surface); border: 1px solid var(--fa-line); border-radius: 24px; padding: 22px; box-shadow: var(--fa-shadow-sm); }
.fa-sahil-photo { flex: 0 0 auto; width: 96px; height: 96px; border-radius: 20px; overflow: hidden; border: 3px solid #fff; box-shadow: 0 10px 24px -10px rgba(0,41,58,.4), 0 0 0 3px var(--fa-teal-b); }
.fa-sahil-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fa-sahil-name { font-family: "Lexend", sans-serif; font-weight: 800; color: var(--fa-ink); font-size: 18px; }
.fa-sahil-role { font-size: 13px; color: var(--fa-teal-d); font-weight: 700; margin-bottom: 6px; }
.fa-sahil p { margin: 0; font-size: 14.5px; color: var(--fa-text); }

/* ===================== PROOF: EMAIL + TESTIMONIALS ====================== */
.fa-proof2 { background: var(--fa-surface); }
.fa-email { border: 1px solid var(--fa-line); border-radius: 16px; overflow: hidden; box-shadow: var(--fa-shadow); background: #fff; margin-bottom: 12px; }
.fa-email-shot img { width: 100%; display: block; }
.fa-email-top { display: flex; align-items: center; gap: 11px; padding: 14px 16px; border-bottom: 1px solid var(--fa-line); }
.fa-email-avatar { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--fa-teal), var(--fa-green-d)); color: #fff; display: grid; place-items: center; font-weight: 800; font-family: "Lexend", sans-serif; font-size: 14px; }
.fa-email-name { font-weight: 700; color: var(--fa-ink); font-size: 14.5px; }
.fa-redact-bar { display: inline-block; height: 12px; border-radius: 3px; background: #cfdad9; vertical-align: middle; }
.fa-email-subject { padding: 13px 16px 2px; font-weight: 700; color: var(--fa-ink); font-size: 14px; }
.fa-email-body { padding: 8px 16px 18px; color: var(--fa-text); font-size: 16.5px; }
.fa-email-body .fa-quote { margin: 0; font-weight: 700; color: var(--fa-ink); }
.fa-email-quote {
  max-width: 640px; margin: 18px auto 10px; padding: 0 4px;
  font-family: "Lexend", sans-serif; font-size: 18px; font-weight: 600; line-height: 1.5;
  color: var(--fa-ink); text-align: center;
}
.fa-email-caption { font-size: 15px; font-weight: 600; color: var(--fa-muted); margin: 0 0 34px; text-align: center; }

.fa-testimonials { display: grid; gap: 16px; }
@media (min-width: 640px) {
  .fa-testimonials { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .fa-tcard--center { grid-column: 1 / -1; max-width: calc(50% - 8px); margin-inline: auto; }
}
.fa-tcard { background: var(--fa-surface); border: 1px solid var(--fa-line); border-radius: var(--fa-radius); padding: 22px 20px; box-shadow: var(--fa-shadow-sm); display: flex; flex-direction: column; }
.fa-tcard-top { display: flex; align-items: center; gap: 13px; margin-bottom: 14px; }
.fa-tphoto { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; border: 2px solid #fff; box-shadow: 0 0 0 3px var(--fa-mint); }
.fa-tphoto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fa-tname { font-family: "Lexend", sans-serif; font-weight: 800; color: var(--fa-ink); font-size: 16.5px; line-height: 1.2; }
.fa-trole { color: var(--fa-muted); font-size: 13.5px; font-weight: 600; margin-top: 3px; }
.fa-tcard p { margin: 0; font-size: 16.5px; font-weight: 600; color: #21363e; line-height: 1.6; }
.fa-tcard p b { color: var(--fa-ink); font-weight: 800; }
.fa-google { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 14px; font-size: 12.5px; font-weight: 800; color: var(--fa-muted); }
.fa-google svg { width: 15px; height: 15px; }
/* Social proof stat bar */
.fa-proofbar-label { text-align: center; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--fa-muted); margin: 40px 0 14px; }
.fa-proofbar {
  margin-top: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--fa-line); border: 1px solid var(--fa-line); border-radius: 18px; overflow: hidden;
  box-shadow: var(--fa-shadow-sm);
}
@media (min-width: 640px) { .fa-proofbar { grid-template-columns: repeat(4, 1fr); } }
.fa-proofbar .fa-pb { background: var(--fa-surface); padding: 22px 14px; text-align: center; }
.fa-pb-v { font-family: "Lexend", sans-serif; font-weight: 900; font-size: clamp(25px, 6vw, 33px); color: var(--fa-ink); display: flex; align-items: center; justify-content: center; gap: 5px; letter-spacing: -0.02em; }
.fa-pb-v img { height: 21px; width: auto; }
.fa-pb-l { font-size: 13px; font-weight: 600; color: var(--fa-muted); margin-top: 8px; line-height: 1.45; }

/* Real findings grid */
.fa-findings-sec { background: linear-gradient(180deg, var(--fa-mint-bg), var(--fa-paper)); }
.fa-findings { display: grid; gap: 14px; }
@media (min-width: 600px) { .fa-findings { grid-template-columns: 1fr 1fr; } }
.fa-finding-card {
  background: var(--fa-surface); border: 1px solid var(--fa-line); border-left: 4px solid var(--fa-teal);
  border-radius: 16px; padding: 18px; box-shadow: var(--fa-shadow-sm);
}
.fa-finding-tag { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--fa-teal-d); background: var(--fa-mint-bg); padding: 5px 12px; border-radius: 999px; margin-bottom: 12px; }
.fa-finding-card p { margin: 0; font-size: 16px; font-weight: 600; color: #21363e; line-height: 1.58; }
.fa-finding-card b { color: var(--fa-ink); font-weight: 800; }
.fa-finding-shots-note { text-align: center; font-size: 14.5px; font-weight: 600; color: var(--fa-muted); margin: 16px 0 0; }

/* ===================== FORM ============================================= */
.fa-formwrap { background: linear-gradient(180deg, var(--fa-mint-bg) 0%, var(--fa-paper) 100%); }

.fa-form-card { background: var(--fa-surface); border: 1px solid var(--fa-line); border-radius: 26px; box-shadow: var(--fa-shadow); padding: 26px 20px 28px; }

/* Shaded field boxes. Nothing else about the form changes: same fields, same
   labels, same controls. The panel is tinted and the controls inside invert to
   plain white, because the inputs are already near-white (#fbfdfd) and would
   otherwise sink into the tint and make the box look like a mistake. */
.fa-group {
  background: #f4faf9; border: 1px solid #e6f0ef; border-radius: 18px;
  padding: 18px 16px; margin-bottom: 14px; text-align: left;
}
.fa-group--last { margin-bottom: 24px; }
.fa-group > .fa-field:last-child { margin-bottom: 0; }
.fa-group .fa-input, .fa-group .fa-pill-txt { background: #fff; }
.fa-group .fa-pill:hover .fa-pill-txt { background: #fff; border-color: var(--fa-mint); }
/* checked pills keep their teal fill, which the rule above must not undo */
.fa-group .fa-pill input:checked + .fa-pill-txt { background: linear-gradient(150deg, var(--fa-teal), var(--fa-teal-d)); }

.fa-pills--stack { flex-direction: column; }
.fa-pill--full { width: 100%; }
.fa-pill--full .fa-pill-txt { width: 100%; }
.fa-form-card .fa-eyebrow { margin-bottom: 12px; }
.fa-form-card h2 { font-size: clamp(25px, 6.2vw, 34px); font-weight: 900; }
.fa-form-lead { color: #3d5a64; font-size: 16.5px; font-weight: 600; margin: 0 auto 26px; max-width: 46ch; }
.fa-field { margin-bottom: 22px; }
.fa-label { display: block; font-weight: 800; color: var(--fa-ink); font-size: 15.5px; margin-bottom: 10px; }
.fa-label .fa-req { color: var(--fa-teal); }
.fa-input {
  width: 100%; min-height: 56px; padding: 15px 17px; font-size: 16.5px; font-weight: 600; color: var(--fa-text);
  background: #fbfdfd; border: 1.5px solid var(--fa-line); border-radius: 13px; font-family: inherit;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.fa-input::placeholder { color: #9fb2b8; }
.fa-input:focus { outline: none; border-color: var(--fa-teal); box-shadow: 0 0 0 4px rgba(0,146,130,.15); background:#fff; }

.fa-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.fa-pill { position: relative; margin: 0; cursor: pointer; }
.fa-pill input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.fa-pill-txt {
  display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 13px 17px;
  font-size: 15.5px; font-weight: 700; color: var(--fa-ink);
  background: #fbfdfd; border: 1.5px solid var(--fa-line); border-radius: 13px; transition: all .12s ease;
}
.fa-pill-txt::before { content: ""; flex: 0 0 auto; width: 19px; height: 19px; border-radius: 6px; border: 2px solid #c4d4d4; transition: all .12s ease; }
.fa-pill--radio .fa-pill-txt::before { border-radius: 50%; }
.fa-pill:hover .fa-pill-txt { border-color: var(--fa-mint); background: #fff; }
.fa-pill input:focus-visible + .fa-pill-txt { box-shadow: 0 0 0 4px rgba(0,146,130,.18); }
.fa-pill input:checked + .fa-pill-txt { color: #fff; background: linear-gradient(150deg, var(--fa-teal), var(--fa-teal-d)); border-color: var(--fa-teal-d); box-shadow: 0 8px 20px -10px rgba(0,146,130,.7); }
.fa-pill input:checked + .fa-pill-txt::before { border-color: #fff; background: #fff; }
.fa-pill--radio input:checked + .fa-pill-txt::before { box-shadow: inset 0 0 0 3px var(--fa-teal); }
.fa-pill--check input:checked + .fa-pill-txt::before { background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23009282' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/13px no-repeat; }
/* Two-up revenue pills. The label reads from the radio outwards like every other
   field on the form, and never wraps: "Under $200K" breaking across two lines
   made the four boxes different heights and the group look broken. */
.fa-pill-half { flex: 1 1 44%; min-width: 0; }
.fa-pill-half .fa-pill-txt { justify-content: flex-start; white-space: nowrap; }

.fa-error { display: none; color: #c0392b; font-size: 13.5px; font-weight: 600; margin-top: 8px; }
.fa-field.fa-has-error .fa-error { display: block; }
.fa-field.fa-has-error .fa-input, .fa-field.fa-has-error .fa-pill-txt { border-color: #e0a4a0; }
.fa-form-note { text-align: center; font-size: 14px; font-weight: 600; color: var(--fa-muted); margin: 16px auto 0; max-width: 46ch; }

/* ===================== QUALIFIER + FOOTER =============================== */
.fa-qualifier { display: flex; gap: 12px; align-items: flex-start; justify-content: center; max-width: 760px; margin: 0 auto; padding: 24px 20px; }
.fa-qualifier svg { flex: 0 0 auto; width: 21px; height: 21px; color: var(--fa-teal); margin-top: 3px; }
.fa-qualifier p { margin: 0; font-size: 16px; font-weight: 600; color: var(--fa-muted); }
.fa-qualifier b { color: var(--fa-ink); font-weight: 800; }
.fa-footer { background: var(--fa-ink); color: #b3d0d3; text-align: center; padding: 30px 20px; }
.fa-footer p { margin: 0; font-size: 14px; font-weight: 600; color: #b3d0d3; line-height: 1.6; }
.fa-footer b { color: #eaf4f4; font-family: "Lexend", sans-serif; letter-spacing: .01em; }

/* ===================== STICKY CTA ======================================
   Phone: full-width bar pinned to the bottom edge.
   Desktop: floating pill, bottom centre, same as the integration/location pages. */
.fa-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(255,255,255,.92); backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%);
  border-top: 1px solid var(--fa-line); box-shadow: 0 -8px 24px -16px rgba(0,41,58,.4);
  transform: translateY(120%); transition: transform .25s ease;
}
.fa-sticky.is-visible { transform: translateY(0); }
.fa-sticky .fa-cta { min-height: 52px; font-size: 16px; }
/* Smaller flag on the bar: it has to clear the bar's own top edge without
   swallowing the button. The bar itself must not clip it. */
.fa-sticky { overflow: visible; }
.fa-sticky .fa-free-flag { top: -18px; right: 4px; padding: 6px 12px; font-size: 12px; letter-spacing: 1.6px; }

@media (min-width: 720px) {
  .fa-sticky {
    left: 50%; right: auto; bottom: 26px; width: auto; padding: 0;
    background: none; border: none; box-shadow: none;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    transform: translate(-50%, 180%);
  }
  .fa-sticky.is-visible { transform: translate(-50%, 0); }
  .fa-sticky .fa-cta {
    width: auto; min-height: 60px; padding: 16px 32px; border-radius: 999px; font-size: 17.5px;
    box-shadow: 0 20px 44px -14px rgba(0,146,130,.85), 0 0 0 6px rgba(255,255,255,.55);
  }
  .fa-sticky .fa-free-flag { top: -16px; right: -14px; }
}

/* ===================== THANK-YOU PAGE ================================== */
.fa-thanks {
  min-height: 100dvh; display: flex; flex-direction: column;
  background:
    radial-gradient(1100px 560px at 80% 118%, rgba(14,175,160,.22), transparent 60%),
    radial-gradient(820px 460px at -8% -10%, rgba(0,146,130,.30), transparent 62%),
    linear-gradient(135deg, var(--fa-darker) 0%, var(--fa-deep) 100%);
  color: #eafeff;
}
.fa-thanks-main { flex: 1; display: flex; align-items: center; }
.fa-thanks-card { max-width: 620px; margin-inline: auto; padding: 40px 24px; text-align: center; }
.fa-thanks .fa-check { width: 72px; height: 72px; margin: 0 auto 22px; border-radius: 50%; background: linear-gradient(180deg, var(--fa-green), var(--fa-green-d)); display: grid; place-items: center; box-shadow: 0 16px 36px -14px rgba(21,163,122,.8); }
.fa-thanks .fa-check svg { width: 36px; height: 36px; color: #fff; }
.fa-thanks h1 { color: #fff; font-family: "Lexend", sans-serif; font-weight: 900; font-size: clamp(28px, 8vw, 40px); margin-bottom: 16px; }
.fa-thanks p { color: rgba(255,255,255,.9); font-size: 16.5px; max-width: 46ch; margin: 0 auto 18px; }
.fa-thanks p strong { color: #fff; }
.fa-thanks-logo { padding: 22px 24px 0; }
.fa-thanks-logo img { height: 27px; filter: brightness(0) invert(1); opacity: .92; }

/* ===================== HERO VISUAL (floating report) =================== */
.fa-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.fa-cta-row .fa-cta { width: auto; flex: 1 1 auto; }
.fa-cta-ghost {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  font-family: "Manrope", sans-serif; font-size: 15.5px; font-weight: 800; color: #eafeff; text-decoration: none;
  padding: 15px 24px; border-radius: 14px; background: rgba(255,255,255,.06); border: 1.5px solid rgba(154,255,255,.4);
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.fa-cta-ghost:hover { background: rgba(255,255,255,.12); border-color: rgba(154,255,255,.7); transform: translateY(-2px); color: #eafeff; }
.fa-cta-ghost svg { width: 17px; height: 17px; }

.fa-hero-visual { position: relative; margin-top: 34px; }
.fa-report-glow { position: absolute; inset: -12% -8% -14% -8%; z-index: 1; background: radial-gradient(closest-side, rgba(14,175,160,.5), transparent 72%); filter: blur(18px); }

/* The income-statement page of a real audit, rebuilt as live text. A screenshot
   of a spreadsheet is fixed-pixel type in a fluid frame and can never be sharp at
   every width; this stays legible from 360px up. Figures are unchanged. */
.fa-snap {
  position: relative; z-index: 2; border-radius: 18px; overflow: hidden;
  background: #fff; border: 1px solid rgba(255,255,255,.5);
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06);
  text-align: left;
}
.fa-snap-top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px; background: linear-gradient(120deg, var(--fa-ink), var(--fa-deep));
}
.fa-snap-file {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: "Lexend", sans-serif; font-size: 14px; font-weight: 800; color: #fff; letter-spacing: .01em;
}
.fa-snap-file svg { width: 17px; height: 17px; color: var(--fa-mint); }
.fa-snap-yr {
  font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: #d7fbfb; background: rgba(255,255,255,.12); border: 1px solid rgba(154,255,255,.28);
  padding: 5px 11px; border-radius: 999px;
}

.fa-snap-rows { margin: 0; padding: 6px 0; }
.fa-snap-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 18px; border-bottom: 1px solid #eef3f4;
}
.fa-snap-row:last-child { border-bottom: none; }
.fa-snap-row dt { font-size: 15px; font-weight: 700; color: #3d5a64; }
.fa-snap-row dd {
  margin: 0; display: flex; align-items: center; gap: 9px; white-space: nowrap;
  font-family: "Lexend", sans-serif; font-size: 16.5px; font-weight: 800; color: var(--fa-ink); letter-spacing: -0.01em;
}
.fa-snap-row--sum { background: #f4f9f9; }
.fa-snap-row--sum dt, .fa-snap-row--sum dd { color: var(--fa-ink); }
.fa-snap-row--flag { background: #fef4f3; }
.fa-snap-row--flag dt { color: #a23b34; }
.fa-snap-row--flag dd { color: #c0392b; font-size: 18px; }
.fa-snap-flag {
  font-family: "Manrope", sans-serif; font-size: 10.5px; font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase; color: #fff;
  background: #c0392b; padding: 4px 8px; border-radius: 6px;
}

.fa-snap-note {
  display: flex; align-items: flex-start; gap: 10px; margin: 0;
  padding: 15px 18px 17px; border-top: 1px solid #eef3f4; background: #fbfdfd;
  font-size: 14px; font-weight: 600; line-height: 1.5; color: #3d5a64;
}
.fa-snap-note svg { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; color: #c0392b; }
.fa-snap-note b { color: var(--fa-ink); font-weight: 800; }

.fa-snap-cap {
  position: relative; z-index: 2; margin: 14px 0 0; text-align: center;
  font-size: 13px; font-weight: 700; color: rgba(215,251,251,.72);
}
/* ===================== MID CTA BAND ==================================== */
.fa-ctaband {
  position: relative; overflow: hidden;
  background:
    radial-gradient(700px 300px at 85% 120%, rgba(14,175,160,.28), transparent 60%),
    linear-gradient(135deg, var(--fa-darker), var(--fa-deep));
  color: #eafeff; text-align: center; padding: 44px 20px;
}
.fa-ctaband h2 { color: #fff; font-family: "Lexend", sans-serif; font-weight: 900; font-size: clamp(26px, 6.2vw, 38px); margin: 0 auto 12px; max-width: 18ch; }
.fa-ctaband p { color: rgba(255,255,255,.9); font-size: 17px; font-weight: 600; line-height: 1.55; margin: 0 auto 26px; max-width: 42ch; }
.fa-ctaband .fa-cta { max-width: 380px; margin: 0 auto; }

/* ===================== VIDEO TESTIMONIAL ==============================
   Vertical (9:16) client video, same one as the homepage. Player first on a
   phone, side by side on desktop. */
.fa-vid-sec { background: linear-gradient(180deg, var(--fa-mint-bg), var(--fa-paper)); }
.fa-vid { display: grid; gap: 28px; justify-items: center; }
.fa-vid-title { margin-top: 14px; font-size: clamp(26px, 6vw, 36px); }
.fa-vid-sub { margin: 0 0 22px; font-size: 16.5px; font-weight: 600; line-height: 1.6; color: #3d5a64; }
.fa-vid-player { width: 100%; display: flex; justify-content: center; }
.fa-vid-frame {
  position: relative; width: 100%; max-width: 300px; aspect-ratio: 9 / 16;
  border-radius: 22px; overflow: hidden; cursor: pointer;
  background: var(--fa-ink); border: 1px solid rgba(255,255,255,.7);
  box-shadow: 0 30px 66px -22px rgba(0,41,58,.45);
}
.fa-vid-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fa-vid-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.fa-vid-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 62px; height: 62px; border-radius: 18px; display: grid; place-items: center;
  color: #fff; background: rgba(214,44,38,.92);
  box-shadow: 0 14px 30px -10px rgba(0,0,0,.55);
  transition: transform .16s ease, background .16s ease;
}
.fa-vid-play svg { width: 30px; height: 30px; margin-left: 2px; }
.fa-vid-frame:hover .fa-vid-play { transform: translate(-50%, -50%) scale(1.07); background: #d62c26; }
.fa-vid-frame:focus-visible { outline: 3px solid var(--fa-teal); outline-offset: 3px; }

/* Phone: head centred over the player, which comes first; the tick list stays
   left-aligned inside a centred block so the ticks line up. */
.fa-vid-copy { width: 100%; max-width: 460px; }
.fa-vid-player { order: -1; }
.fa-vid-points { list-style: none; margin: 0 auto 24px; padding: 0; display: grid; gap: 13px; max-width: 340px; text-align: left; }
.fa-vid-points li { position: relative; padding-left: 34px; font-size: 15.5px; font-weight: 600; color: var(--fa-text); line-height: 1.45; }
.fa-vid-points li::before {
  content: ""; position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 999px;
  background: linear-gradient(125deg, var(--fa-teal), var(--fa-teal-b)); box-shadow: 0 4px 10px rgba(0,146,130,.3);
}
.fa-vid-points li::after {
  content: ""; position: absolute; left: 8px; top: 5px; width: 5px; height: 9px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.fa-vid-btn {
  display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
  background: linear-gradient(135deg, var(--fa-teal-b), var(--fa-teal)); color: #fff;
  border-radius: 999px; padding: 14px 26px;
  font-family: "Lexend", sans-serif; font-weight: 700; font-size: 15px;
  box-shadow: 0 16px 34px -14px rgba(0,146,130,.6);
  transition: transform .18s ease, box-shadow .18s ease;
}
.fa-vid-btn:hover { transform: translateY(-2px); box-shadow: 0 22px 44px -14px rgba(0,146,130,.7); color: #fff; }
.fa-vid-btn svg { width: 18px; height: 18px; }

/* Desktop: copy column left, player right, one aligned row (homepage shape). */
@media (min-width: 860px) {
  .fa-vid {
    grid-template-columns: 1fr auto; gap: 56px;
    align-items: center; justify-items: start;
    max-width: 900px; margin-inline: auto; text-align: left;
  }
  .fa-vid-copy { max-width: 480px; text-align: left; }
  .fa-vid-title { margin-top: 16px; }
  .fa-vid-sub { margin-bottom: 26px; }
  .fa-vid-points { margin-inline: 0; max-width: none; }
  .fa-vid-player { order: 0; }
  .fa-vid-frame { width: 320px; max-width: 320px; }
}

/* ===================== FAQ (objection handling) ======================= */
.fa-faq-sec { background: var(--fa-soft); }
.fa-faq { display: grid; gap: 12px; }
.fa-faq-item { background: var(--fa-surface); border: 1px solid var(--fa-line); border-radius: 14px; box-shadow: var(--fa-shadow-sm); overflow: hidden; }
.fa-faq-item summary {
  list-style: none; cursor: pointer; padding: 20px; display: flex; align-items: center; gap: 12px;
  font-family: "Lexend", sans-serif; font-weight: 700; font-size: 17px; color: var(--fa-ink);
}
.fa-faq-item summary::-webkit-details-marker { display: none; }
.fa-faq-item summary .fa-faq-plus { flex: 0 0 auto; margin-left: auto; width: 22px; height: 22px; position: relative; transition: transform .2s ease; }
.fa-faq-item summary .fa-faq-plus::before, .fa-faq-item summary .fa-faq-plus::after { content: ""; position: absolute; background: var(--fa-teal); border-radius: 2px; }
.fa-faq-item summary .fa-faq-plus::before { top: 10px; left: 3px; right: 3px; height: 2px; }
.fa-faq-item summary .fa-faq-plus::after { left: 10px; top: 3px; bottom: 3px; width: 2px; transition: opacity .2s ease; }
.fa-faq-item[open] summary .fa-faq-plus::after { opacity: 0; }
.fa-faq-item .fa-faq-a { padding: 0 20px 20px; margin: 0; color: #3d5a64; font-size: 16px; font-weight: 600; line-height: 1.65; }

/* ===================== ENRICHED FOOTER ================================= */
.fa-footer .fa-foot-contact { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 18px; margin: 12px 0 0; }
.fa-footer .fa-foot-contact a { color: var(--fa-mint); text-decoration: none; font-weight: 600; }
.fa-footer .fa-foot-contact a:hover { color: #fff; }

/* ===================== MOBILE HERO ====================================
   Phone traffic is the whole game here, so the hero stacks on one centre
   line: headline, promise, both CTAs full width, then the proof row. */
@media (max-width: 719px) {
  .fa-hero-copy { text-align: center; }
  .fa-hero .fa-sub { margin-inline: auto; }
  .fa-cta-row { flex-direction: column; align-items: stretch; gap: 12px; }
  .fa-cta-row .fa-cta { width: 100%; }
  .fa-cta-ghost { width: 100%; justify-content: center; }
  .fa-trust { justify-content: center; gap: 12px 16px; margin-top: 26px; }
  .fa-rating { align-items: center; }
  .fa-stars { justify-content: center; }
  .fa-sp-div { display: none; }   /* dangles once the row wraps */
  .fa-topbar img { margin-inline: auto; }
  .fa-hero-visual { margin-top: 30px; }

  /* One revenue pill per line. Two-up, the box is ~125px wide on a 390px phone
     and ~90px at 320px, while "Under $200K" needs ~132px: it cannot hold a line
     at any phone width. Full width it always does, and the group now reads the
     same as the checkbox list right below it. */
  .fa-pill-half { flex: 1 1 100%; }
}

/* ===================== DESKTOP ========================================= */
@media (min-width: 720px) {
  .fa-section { padding: 54px 0; }    /* ~108px between sections */
  .fa-finds { grid-template-columns: 1fr 1fr; }
}

/* Grand landing-page scale: the content column opens up to match the rest of
   the site (the homepage locations band, BT/Procore heroes), each block still
   capped at a comfortable measure so nothing stretches thin. */
@media (min-width: 960px) {
  .fa-section { padding: 62px 0; }    /* ~124px between sections; was 92 = a 184px canyon */
  .fa-section > .fa-wrap { max-width: 1080px; }
  .fa-sec-intro { font-size: 18.5px; margin-bottom: 34px; }
  .fa-h2 { margin-top: 18px; }

  .fa-finds { gap: 18px; }
  .fa-find { padding: 24px; }
  .fa-findings { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .fa-finding-card { padding: 22px; }

  /* The number and its explanation sit side by side so the card fills the wider
     column instead of leaving a dead half. */
  .fa-statcard {
    max-width: 920px; margin-inline: auto; padding: 44px 46px 46px;
    display: grid; grid-template-columns: auto 1fr; gap: 6px 44px; align-items: center;
  }
  .fa-statcard .fa-tagline { grid-column: 1 / -1; }
  .fa-stat-sub { margin: 0; max-width: 40ch; font-size: 18.5px; }
  .fa-howcard { max-width: 860px; margin-inline: auto; padding: 12px 10px; }
  .fa-how-step { padding: 26px 24px; }

  .fa-trans { grid-template-columns: repeat(3, 1fr); gap: 20px; }

  .fa-email { max-width: 820px; margin-inline: auto; }
  .fa-testimonials { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .fa-tcard--center { grid-column: auto; max-width: none; margin-inline: 0; }
  .fa-tcard { padding: 26px 24px; }

  .fa-faq { max-width: 860px; margin-inline: auto; }
  .fa-form-card { max-width: 780px; margin-inline: auto; padding: 40px 44px 44px; }
  /* Not a .fa-section, so it kept the narrow 700px wrap */
  .fa-logoband .fa-wrap { max-width: 1080px; }
  .fa-ctaband { padding: 58px 20px; }
}
/* Tablet: keep the hero single-column, center the report under the copy */
@media (min-width: 720px) and (max-width: 959px) {
  .fa-hero-visual { max-width: 470px; margin: 36px auto 0; }
}
/* Desktop: wide hero container so the split is roomy, not congested */
@media (min-width: 960px) {
  .fa-hero .fa-wrap { max-width: 1160px; }
  .fa-hero-in { display: grid; grid-template-columns: 1.06fr 0.94fr; gap: 56px; align-items: center; padding: 34px 0 74px; }
  .fa-hero-copy { max-width: 540px; }
  .fa-hero-visual { margin-top: 0; max-width: 500px; margin-inline: auto; }
}
/* No 3D tilt on the report any more: the numbers on it are meant to be read. */
@media (prefers-reduced-motion: reduce) {
  .fa-cta, .fa-pill-txt, .fa-sticky, .fa-input, .fa-find { transition: none; }
}