/*
  Falcon Terminal marketing site — styles
  Everything here is scoped under .fts-root so this can be dropped into a
  WordPress page (or any other host page) without leaking into, or being
  overridden by, the surrounding theme. Don't add bare element selectors
  (button, a, h1, ...) outside that scope.

  Tokens below are pulled directly from Falcon Trading Systems' brand guide
  (/home/brennen/Documents/Falcon/proposals/site-rework/brand-guide.html):
  single dark theme by design (no light variant), one accent color (Signal
  Blue) in three intensities, four border-radii, three type families each
  with one job. See README.md for the source-of-truth notes.
*/

.fts-root {
  --fts-black: #000000;
  --fts-dark: #0d0d0d;
  --fts-panel: #1a1a1a;
  --fts-panel-mid: #222222;
  --fts-border: rgba(255, 255, 255, 0.08);
  --fts-border-lo: rgba(255, 255, 255, 0.06);

  --fts-blue: #2b64f8; /* fill / border / icon only — never text */
  --fts-blue-dark: #005dc7; /* hover / pressed — fill only */
  --fts-blue-light: #58a6ff; /* links, eyebrows, text-safe accent */

  --fts-white: #ffffff;
  --fts-gray: #b0b5bc; /* body copy */
  --fts-gray-dim: #848990; /* meta, captions, spec labels */

  --fts-green: #4ade80; /* status/"connected" indicators only, not decorative */
  --fts-violet: #c084fc;

  --fts-font-display: "FTSEina01", "FTSEina02", "FTSPoppins", sans-serif;
  --fts-font-body: "FTSLexendDeca", "FTSPoppins", sans-serif;
  --fts-font-ui: "FTSPoppins", "FTSLexendDeca", sans-serif;
  --fts-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;

  --fts-radius-pill: 50px;
  --fts-radius-card: 16px;
  --fts-radius-tile: 13px;
  --fts-radius-sm: 5px;

  --fts-container: 1366px;

  color-scheme: dark;
  background: var(--fts-black);
  color: var(--fts-gray);
  font-family: var(--fts-font-body);
  font-size: 15.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* Lets a deliberate edge-bleed accent (see .fts-hero-level2) run a few
     pixels past its section's edge and simply be cropped there, instead of
     ever handing the host page a horizontal scrollbar. */
  overflow-x: hidden;
}

/* ---------- self-hosted brand fonts ---------- */
@font-face {
  font-family: "FTSEina01";
  src: url("assets/fonts/eina01-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "FTSEina02";
  src: url("assets/fonts/eina02-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "FTSLexendDeca";
  src: url("assets/fonts/lexend-deca-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "FTSPoppins";
  src: url("assets/fonts/poppins-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "FTSPoppins";
  src: url("assets/fonts/poppins-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "FTSPoppins";
  src: url("assets/fonts/poppins-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "FTSPoppins";
  src: url("assets/fonts/poppins-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "FTSPoppins";
  src: url("assets/fonts/poppins-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

.fts-root * {
  box-sizing: border-box;
}
.fts-root img {
  max-width: 100%;
  display: block;
}
.fts-root a {
  color: var(--fts-blue-light);
  text-decoration: none;
}
.fts-root a:hover {
  text-decoration: underline;
}
.fts-root :focus-visible {
  outline: 2px solid var(--fts-blue-light);
  outline-offset: 2px;
}

.fts-wrap {
  max-width: var(--fts-container);
  margin: 0 auto;
  padding: 0 40px;
  /* Establishes a stacking context above any chart-texture background (see
     .fts-chart-bg / .fts-proof-chart) in the same section, regardless of
     DOM order — without this, an absolutely positioned background paints
     on top of this static content, not behind it. */
  position: relative;
  z-index: 1;
}
@media (max-width: 900px) {
  .fts-wrap {
    padding: 0 24px;
  }
}

/* ---------- loading screen (mirrors Falcon Terminal's own startup screen) ---------- */
.fts-loading {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: var(--fts-dark);
  transition: opacity 0.4s ease;
}
/* JS adds .fts-loaded once the intro has run its course; a <noscript> block
   in content.html forces this same state with no JS at all, so the loader
   never gets a chance to trap a no-JS visitor or a crawler. */
.fts-root.fts-loaded .fts-loading {
  opacity: 0;
  pointer-events: none;
}
.fts-loading-mark {
  width: 56px;
  height: 56px;
  margin-bottom: 18px;
}
.fts-loading-name {
  font-family: var(--fts-font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 1px;
  color: var(--fts-white);
  text-align: center;
  line-height: 1.25;
}
/* Two-candlestick spinner, not a ring: candle 1 (Sky Signal) opens at the
   baseline, wicks down to a new low, wicks up to a new high, and closes
   ~2 units above the open. Candle 2 (Deep Signal) opens where candle 1
   closed, wicks to a new high, wicks down to a new low, and closes back
   at candle 1's original open — so the loop restarts exactly where it
   began. Each candle's body tracks open-vs-current-price live (the way an
   actual live-updating candle looks) rather than jumping straight to its
   final shape, which is what gives this motion during the ~2.4s it takes
   to draw. See each @keyframes rule's comment for the price (in "units")
   each stop represents; the pixel math is unit=4px against a baseline at
   top:26px inside a 28x34px box.
   The base (non-keyframe) top/height below is each element's OWN final
   resting shape — it's what prefers-reduced-motion falls back to once the
   animation is removed, so reduced motion still shows one complete,
   readable pair of candles instead of a blank or zero-height box. */
.fts-loading-spinner {
  position: relative;
  width: 28px;
  height: 34px;
  margin-top: 20px;
}
.fts-spinner-wick,
.fts-spinner-body {
  position: absolute;
  border-radius: 1px;
}
.fts-spinner-wick {
  width: 2px;
}
.fts-spinner-body {
  width: 8px;
}
.fts-spinner-wick-1 {
  left: 6px;
  top: 14px;
  height: 16px;
  background: var(--fts-blue-light); /* Sky Signal — up candle */
  animation: fts-candle1-wick 2.4s ease-in-out infinite;
}
.fts-spinner-body-1 {
  left: 3px;
  top: 18px;
  height: 8px;
  background: var(--fts-blue-light);
  animation: fts-candle1-body 2.4s ease-in-out infinite;
}
.fts-spinner-wick-2 {
  left: 18px;
  top: 12px;
  height: 20px;
  background: var(--fts-blue-dark); /* Deep Signal — down candle */
  animation: fts-candle2-wick 2.4s ease-in-out infinite;
}
.fts-spinner-body-2 {
  left: 15px;
  top: 18px;
  height: 8px;
  background: var(--fts-blue-dark);
  animation: fts-candle2-body 2.4s ease-in-out infinite;
}
/* Candle 1's full-range wick (running low/high so far): open(0) -> new
   low(-1) -> new high(+3), then holds full range [-1,+3] once reached. */
@keyframes fts-candle1-wick {
  0% {
    top: 26px;
    height: 0;
  } /* open, price 0 */
  15% {
    top: 26px;
    height: 4px;
  } /* new low, price -1 */
  30% {
    top: 14px;
    height: 16px;
  } /* new high, price +3 — range now [-1,+3] */
  45%,
  92% {
    top: 14px;
    height: 16px;
  } /* close reached (price +2), range unchanged; hold until candle 2 finishes */
  100% {
    top: 26px;
    height: 0;
  } /* reset to open, loop point */
}
/* Candle 1's body (open-vs-current-price): 0 -> -1 -> +3 (briefly, as the
   live "close" overshoots on its way to the high) -> settles at +2. */
@keyframes fts-candle1-body {
  0% {
    top: 26px;
    height: 0;
  }
  15% {
    top: 26px;
    height: 4px;
  }
  30% {
    top: 14px;
    height: 12px;
  }
  45%,
  92% {
    top: 18px;
    height: 8px;
  } /* final body: open 0 -> close +2 */
  100% {
    top: 26px;
    height: 0;
  }
}
/* Candle 2's full-range wick, own open at price +2 (candle 1's close):
   sits flat until 50%, then new high(+3.5) -> new low(-1.5). */
@keyframes fts-candle2-wick {
  0%,
  50% {
    top: 18px;
    height: 0;
  } /* pinned at open, price +2, until candle 1 finishes */
  65% {
    top: 12px;
    height: 6px;
  } /* new high, price +3.5 */
  80%,
  90% {
    top: 12px;
    height: 20px;
  } /* new low, price -1.5 — range now [-1.5,+3.5] */
  100% {
    top: 18px;
    height: 0;
  } /* reset to open, loop point */
}
/* Candle 2's body: +2 -> +3.5 (briefly) -> -1.5 (briefly) -> settles at
   0, i.e. exactly candle 1's original open — the loop closes here. */
@keyframes fts-candle2-body {
  0%,
  50% {
    top: 18px;
    height: 0;
  }
  65% {
    top: 12px;
    height: 6px;
  }
  80% {
    top: 18px;
    height: 14px;
  }
  90% {
    top: 18px;
    height: 8px;
  } /* final body: open +2 -> close 0 */
  100% {
    top: 18px;
    height: 0;
  }
}
.fts-loading-detail {
  margin-top: 14px;
  color: var(--fts-gray-dim);
  font-size: 13px;
  text-align: center;
  min-height: 1.4em;
}
@media (prefers-reduced-motion: reduce) {
  .fts-spinner-wick,
  .fts-spinner-body {
    animation: none;
  }
}

/* ---------- header ---------- */
.fts-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(0, 0, 0, 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--fts-border-lo);
}
.fts-nav {
  position: relative;
  display: flex;
  align-items: center;
  gap: 28px;
  height: 76px;
}
.fts-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--fts-white);
  margin-right: auto;
}
.fts-brand:hover {
  text-decoration: none;
}
.fts-brand-mark {
  width: 26px;
  height: 26px;
}
.fts-brand-name {
  font-family: var(--fts-font-ui);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.6px;
  color: var(--fts-white);
}
.fts-brand-name b {
  color: var(--fts-blue-light);
  font-weight: 700;
}
.fts-nav-links {
  display: flex;
  gap: 26px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.fts-nav-links a {
  font-family: var(--fts-font-ui);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--fts-gray);
}
.fts-nav-links a:hover {
  color: var(--fts-white);
  text-decoration: none;
}
.fts-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--fts-radius-sm);
  border: 1px solid var(--fts-border);
  background: transparent;
  color: var(--fts-white);
  cursor: pointer;
}
.fts-nav-toggle svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
}
@media (max-width: 900px) {
  .fts-nav-links {
    display: none;
    position: absolute;
    top: 76px;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--fts-black);
    border-bottom: 1px solid var(--fts-border-lo);
    padding: 8px 24px 20px;
  }
  .fts-nav-links a {
    padding: 12px 0;
    border-bottom: 1px solid var(--fts-border-lo);
  }
  .fts-nav-links.fts-nav-links-open {
    display: flex;
  }
  .fts-nav-toggle {
    display: inline-flex;
  }
}

/* ---------- buttons + badges ---------- */
.fts-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--fts-font-ui);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  border-radius: var(--fts-radius-pill);
  padding: 15px 30px;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}
.fts-btn:hover {
  text-decoration: none;
}
/* .fts-root prefixed here (not just .fts-btn-primary) so this beats the
   generic `.fts-root a { color: ... }` link rule above on specificity —
   these buttons are <a> elements, and without this the filled button's
   text rendered blue-light on a blue background instead of white. */
.fts-root .fts-btn-primary {
  background: var(--fts-blue);
  color: var(--fts-white);
}
.fts-root .fts-btn-primary:hover {
  background: var(--fts-blue-dark);
}
.fts-root .fts-btn-ghost {
  background: transparent;
  color: var(--fts-white);
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  padding: 13.5px 28.5px;
}
.fts-btn-ghost:hover {
  border-color: var(--fts-blue-light);
  color: var(--fts-blue-light);
}
.fts-btn-sm {
  padding: 9px 18px;
  font-size: 11.5px;
}
.fts-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--fts-radius-pill);
  padding: 5px 13px;
  font-family: var(--fts-font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
  color: var(--fts-white);
}
.fts-badge-blue {
  border-color: rgba(43, 100, 248, 0.4);
  background: rgba(43, 100, 248, 0.14);
  color: #7ab4ff;
}

/* ---------- type ---------- */
.fts-eyebrow {
  font-family: var(--fts-font-ui);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--fts-blue-light);
  margin: 0 0 14px;
}
.fts-h1 {
  font-family: var(--fts-font-display);
  font-weight: 700;
  font-size: clamp(32px, 5vw, 54px);
  letter-spacing: -1.2px;
  line-height: 1.08;
  color: var(--fts-white);
  margin: 0 0 20px;
}
.fts-h2 {
  font-family: var(--fts-font-display);
  font-weight: 700;
  font-size: clamp(26px, 3.4vw, 32px);
  letter-spacing: -0.5px;
  line-height: 1.15;
  color: var(--fts-white);
  margin: 0 0 16px;
}
.fts-lede {
  font-size: 17px;
  line-height: 1.7;
  color: var(--fts-gray);
  max-width: 640px;
  margin: 0 0 32px;
}
.fts-section-head {
  max-width: 720px;
  margin: 0 auto 48px;
  text-align: center;
}
.fts-section-head .fts-lede {
  margin-left: auto;
  margin-right: auto;
}

/* ---------- layout primitives ---------- */
.fts-section {
  padding: 96px 0;
  border-bottom: 1px solid var(--fts-border-lo);
  position: relative;
  overflow: hidden;
}
.fts-section:last-of-type {
  border-bottom: none;
}
.fts-section-dark {
  background: var(--fts-dark);
}
@media (max-width: 700px) {
  .fts-section {
    padding: 64px 0;
  }
}
.fts-grid {
  display: grid;
  gap: 22px;
}
.fts-grid-2 {
  grid-template-columns: repeat(2, 1fr);
}
.fts-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 860px) {
  .fts-grid-2,
  .fts-grid-3 {
    grid-template-columns: 1fr;
  }
}
.fts-card {
  background: var(--fts-panel);
  border: 1px solid var(--fts-border);
  border-radius: var(--fts-radius-card);
  padding: 26px;
  transition: transform 0.15s ease;
}
.fts-card:hover {
  transform: translateY(-4px);
}
.fts-card-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--fts-radius-tile);
  background: rgba(43, 100, 248, 0.12);
  border: 1px solid rgba(43, 100, 248, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.fts-card-icon svg {
  width: 20px;
  height: 20px;
  stroke: var(--fts-blue-light);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fts-card h3 {
  font-family: var(--fts-font-ui);
  font-weight: 700;
  font-size: 16px;
  color: var(--fts-white);
  margin: 0 0 8px;
}
.fts-card p {
  margin: 0;
  font-size: 14.5px;
  color: var(--fts-gray-dim);
  line-height: 1.6;
}

/* ---------- hero ---------- */
.fts-hero {
  padding: 84px 0 40px;
  position: relative;
}
.fts-hero-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  max-width: 760px;
}
.fts-hero-cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.fts-hero-note {
  font-size: 13px;
  color: var(--fts-gray-dim);
}
.fts-chart-bg {
  /* Spans the section's full rendered height (not a fixed bottom strip) so
     script.js's real-size measurement (see initCharts()'s box()) hands the
     Renko/line/candlestick generators real vertical room to work with. A
     fixed short band starves them of rows, which is what previously made
     a long, content-heavy section's motif read as a flat, low-variance
     sliver pinned to its bottom edge. */
  position: absolute;
  inset: 0;
  opacity: 0.7;
  pointer-events: none;
  z-index: 0;
}
.fts-hero-shot {
  margin-top: 56px;
}
.fts-hero-level2 {
  position: absolute;
  top: -16px;
  right: -24px;
  width: 150px;
  height: 340px;
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 900px) {
  /* No real margin gutter to bleed into once the hero copy runs edge to
     edge — the accent would just sit on top of it instead of beside it. */
  .fts-hero-level2 {
    display: none;
  }
}

/* ---------- screenshot frames ---------- */
.fts-shot {
  margin: 0;
}
.fts-shot-frame {
  position: relative;
  background: var(--fts-panel-mid);
  border: 1px solid var(--fts-border);
  border-radius: var(--fts-radius-card);
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}
.fts-shot-bar {
  display: flex;
  gap: 6px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid var(--fts-border);
}
.fts-shot-bar span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
}
.fts-shot-img {
  width: 100%;
  height: auto;
  display: block;
  background: var(--fts-dark);
}
.fts-shot-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
}
.fts-shot-caption {
  margin: 14px 4px 0;
  font-size: 13px;
  color: var(--fts-gray-dim);
  text-align: center;
}

/* ---------- proof strip ---------- */
.fts-proof {
  position: relative;
  overflow: hidden;
  /* Taller than the single-line row of text strictly needs (28px used to be
     enough) — the MACD motif behind it (histogram + two lines, see
     data-fts-macd below) needs real vertical room to read as anything but a
     flat smear at this element's actual rendered height (.fts-proof-chart is
     inset:0 to this padding box, so it fills exactly whatever height this
     padding gives it). */
  padding: 44px 0;
  border-top: 1px solid var(--fts-border-lo);
  border-bottom: 1px solid var(--fts-border-lo);
}
.fts-proof-chart {
  position: absolute;
  inset: 0;
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}
.fts-proof-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 40px;
  justify-content: center;
  font-family: var(--fts-font-ui);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--fts-gray-dim);
  text-align: center;
}
.fts-proof-row strong {
  color: var(--fts-white);
  font-weight: 700;
}

/* ---------- two-col feature rows ---------- */
.fts-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.fts-feature-rev .fts-feature-copy {
  order: 2;
}
.fts-feature-rev .fts-feature-shot {
  order: 1;
}
@media (max-width: 900px) {
  .fts-feature {
    grid-template-columns: 1fr;
  }
  .fts-feature-rev .fts-feature-copy,
  .fts-feature-rev .fts-feature-shot {
    order: 0;
  }
}
.fts-feature-list {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.fts-feature-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 14.5px;
  color: var(--fts-gray);
}
.fts-feature-list svg {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  stroke: var(--fts-blue-light);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- opening bell section ---------- */
.fts-bell {
  text-align: center;
}
.fts-bell-mark {
  width: 48px;
  height: 48px;
  margin: 0 auto 24px;
}
.fts-bell blockquote {
  margin: 0 auto 24px;
  max-width: 760px;
  font-family: var(--fts-font-display);
  font-weight: 700;
  font-size: clamp(24px, 3.6vw, 34px);
  letter-spacing: -0.5px;
  line-height: 1.25;
  color: var(--fts-white);
}
.fts-bell-body {
  max-width: 640px;
  margin: 0 auto;
}
.fts-timeline {
  display: flex;
  justify-content: center;
  gap: 0;
  margin-top: 56px;
  flex-wrap: wrap;
}
.fts-timeline-item {
  flex: 1 1 160px;
  max-width: 220px;
  padding: 0 18px;
  border-left: 1px solid var(--fts-border);
  text-align: left;
}
.fts-timeline-item:first-child {
  border-left: none;
}
.fts-timeline-year {
  font-family: var(--fts-font-ui);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--fts-blue-light);
  margin-bottom: 6px;
}
.fts-timeline-item p {
  margin: 0;
  font-size: 13.5px;
  color: var(--fts-gray-dim);
}

/* ---------- FAQ ---------- */
.fts-faq {
  max-width: 780px;
  margin: 0 auto;
}
.fts-faq-item {
  border-bottom: 1px solid var(--fts-border);
  padding: 22px 0;
}
.fts-faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--fts-font-ui);
  font-weight: 600;
  font-size: 15.5px;
  color: var(--fts-white);
}
.fts-faq-item summary::-webkit-details-marker {
  display: none;
}
.fts-faq-item summary::after {
  content: "+";
  font-size: 20px;
  color: var(--fts-blue-light);
  flex: none;
}
.fts-faq-item[open] summary::after {
  content: "\2212";
}
.fts-faq-item p {
  margin: 14px 0 0;
  font-size: 14.5px;
  color: var(--fts-gray);
  max-width: 660px;
}

/* ---------- final CTA ---------- */
.fts-cta-band {
  text-align: center;
  background: linear-gradient(180deg, rgba(43, 100, 248, 0.1), rgba(43, 100, 248, 0));
}
.fts-cta-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 28px;
}

/* ---------- footer ---------- */
.fts-footer {
  padding: 48px 0 40px;
}
.fts-footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  flex-wrap: wrap;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--fts-border-lo);
  margin-bottom: 24px;
}
.fts-footer-links {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}
.fts-footer-links a {
  font-size: 13px;
  color: var(--fts-gray-dim);
}
.fts-footer-links a:hover {
  color: var(--fts-white);
}
.fts-footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--fts-gray-dim);
}