/*
  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;
  }
}

/* ---------- parent-brand bar ---------- */
/* Sits above the sticky header and scrolls away with the page, so it never
   competes with the page's own nav. */
.fts-parent-bar {
  border-bottom: 1px solid var(--fts-border-lo);
  background: var(--fts-black);
}
.fts-parent-bar .fts-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 32px;
}
.fts-parent-bar a {
  font-family: var(--fts-font-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.3px;
  color: var(--fts-gray-dim);
  white-space: nowrap;
}
.fts-parent-bar a:hover {
  color: var(--fts-white);
  text-decoration: none;
}
.fts-parent-bar-short {
  display: none;
}
@media (max-width: 480px) {
  .fts-parent-bar-long {
    display: none;
  }
  .fts-parent-bar-short {
    display: inline;
  }
}

/* ---------- 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;
  /* No grid gap: it stacked on top of each child's own margin, which left
     the eyebrow floating 42px above the h1 and the note 53px below the
     buttons. Spacing is set per child below instead. */
  gap: 0;
  /* Wide enough for "Falcon Terminal is why you buy the machine." to hold
     one line at the h1's max size; the lede keeps its own 640px measure. */
  max-width: 1240px;
}
.fts-hero-inner .fts-h1 {
  margin-bottom: 48px;
}
.fts-hero-inner .fts-lede {
  margin-bottom: 60px;
}
/* Consecutive hero ledes read as one block; only the last one gets the
   large gap above the CTAs. */
.fts-hero-inner .fts-lede:has(+ .fts-lede) {
  margin-bottom: 24px;
}
.fts-hero-cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.fts-hero-inner .fts-hero-cta {
  margin-bottom: 0;
}
.fts-hero-note {
  margin: 16px 0 0;
  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;
  /* Kept low so the motif reads as texture behind the copy rather than
     competing with it — at 0.7 the bricks/candles sat at nearly the same
     contrast as body text. */
  opacity: 0.35;
  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);
  /* Lets the title bar size itself against the frame's width (cqw below). */
  container-type: inline-size;
}
/* Windows 11 dark-mode title bar. Every metric is in em, and the em is a
   fixed fraction of the frame's width, so the bar keeps the same proportion
   to the screenshot at every size: the captures are a ~1280px-wide window,
   where Windows draws a 32px bar, 12px title text, 16px icon and 46px-wide
   caption buttons with 10px glyphs. The 12px font-size is the fallback for
   browsers without container query units. */
.fts-shot-bar {
  display: flex;
  align-items: center;
  height: 2.6667em;
  font-size: 12px;
  font-size: calc(100cqw * 12 / 1280);
  font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  color: rgba(255, 255, 255, 0.86);
  background: #202020;
}
.fts-shot-icon {
  width: 1.3333em;
  height: 1.3333em;
  margin: 0 0.8333em 0 1em;
}
.fts-shot-title {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
}
.fts-shot-ctrls {
  display: flex;
  align-self: stretch;
}
.fts-shot-ctrls svg {
  box-sizing: content-box;
  width: 0.8333em;
  height: 0.8333em;
  padding: 0.9167em 1.5em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
}
.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);
}

/* Product links under the timeline — sends readers who made it this far
   on to the three machines Falcon Terminal ships with or connects to. */
.fts-lineup {
  max-width: 920px;
  margin: 64px auto 0;
  text-align: center;
}
.fts-root .fts-lineup-card {
  display: flex;
  flex-direction: column;
  text-align: left;
  color: inherit;
}
.fts-root .fts-lineup-card:hover {
  text-decoration: none;
  border-color: rgba(43, 100, 248, 0.45);
}
.fts-lineup-card p {
  flex: 1;
  margin-bottom: 18px;
}
.fts-lineup-link {
  font-family: var(--fts-font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--fts-blue-light);
}

.fts-root .fts-lineup-all {
  display: inline-block;
  margin-top: 28px;
  font-family: var(--fts-font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--fts-blue-light);
}

/* ---------- 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);
}
/* The hardware Falcon Terminal ships on, for readers who found the page
   first and haven't seen the main site yet. */
.fts-footer-family {
  display: flex;
  align-items: baseline;
  gap: 8px 20px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--fts-gray-dim);
  padding-bottom: 24px;
  border-bottom: 1px solid var(--fts-border-lo);
  margin-bottom: 24px;
}
.fts-footer-family ul {
  display: flex;
  gap: 8px 20px;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}
.fts-footer-family a {
  color: var(--fts-gray);
}
.fts-footer-family 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);
}