/* ==========================================================================
   Competitor pages (SITE-1436) — /compare/…, /alternatives/…, /best-…/
   Converted from the 2026-10-07 handoff (rudy-handoff-20261007). Built on
   theme.css (SITE-1421): tokens, .ti-wrap, .ti-pill, .ti-btn*, .ti-glow,
   .ti-eyebrow and the H1/H2 sizes all come from there. Do NOT set
   font-size on h1/h2 in this file.

   Load order: theme.css, marketing-font.css, then this file.
   Markup: <div class="ti-theme ti-cmp"> <header class="cmp-hero">… <main class="ti-wrap cmp-main">…

   Element-level rules are scoped to .cmp-hero / .cmp-main, never to .ti-cmp
   itself: on mobile the sitewide email capture (templates/tow_signup_form.html)
   is moved in between .ti-cmp's direct children and must keep its own styling.
   ========================================================================== */

.ti-cmp {
  overflow-x: clip;
}

.cmp-main a:not([class]),
.cmp-hero .cmp-xlink a,
.cmp-main .cmp-link {
  color: var(--ti-teal);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cmp-main a:not([class]):hover,
.cmp-main .cmp-link:hover { color: var(--ti-teal-hot); }

/* ==========================================================================
   Hero — two columns: H1 group left, everything else right
   (same proportions as /trade-ideas-review/). Stacks below 1200px.
   ========================================================================== */

.cmp-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: -84px;
  padding: 156px 0 72px;
  border-bottom: 1px solid var(--ti-border);
}
.cmp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(900px 600px at 20% 30%, var(--ti-orange-dim), transparent 65%),
    radial-gradient(800px 600px at 85% 20%, var(--ti-teal-dim), transparent 60%),
    var(--ti-bg);
}

.cmp-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 56px;
  align-items: center;
}

.cmp-hero h1 {
  max-width: 760px;
  margin: 0 0 18px;
  font-weight: var(--ti-fw-black);
  line-height: var(--ti-lh-display);
  letter-spacing: var(--ti-track-display);
  text-wrap: balance;
}

.cmp-hero .crumbs {
  margin: 0 0 16px;
  font-size: var(--ti-fs-sm);
  color: var(--ti-muted-dim);
}
.cmp-hero .crumbs a { color: var(--ti-muted); }
.cmp-hero .crumbs a:hover { color: var(--ti-text); }
.cmp-hero .crumbs [aria-current] { color: var(--ti-muted); }

.cmp-hero .ti-pill { flex-wrap: wrap; }
.cmp-hero .ti-pill .pill-crumb {
  color: inherit;
  border-bottom: 1px dotted currentColor;
}
.cmp-hero .ti-pill .pill-crumb:hover { color: var(--ti-orange); }
.cmp-hero .ti-pill .checked {
  margin: 0 0 0 4px;
  padding: 2px 10px;
}

.cmp-hero .byline {
  margin: 0;
  font-size: var(--ti-fs-md);
  color: var(--ti-muted);
}
.cmp-hero .byline strong { color: var(--ti-amber); font-weight: var(--ti-fw-bold); }
.cmp-hero .byline a,
.cmp-hero .disclose a,
.cmp-hero .disclosure a {
  color: var(--ti-amber);
  border-bottom: 1px dotted currentColor;
}

.cmp-hero .lede {
  margin: 0 0 16px;
  font-size: var(--ti-fs-2xl);
  line-height: var(--ti-lh-body);
  color: var(--ti-muted);
}
.cmp-hero .lede strong { color: var(--ti-text); font-weight: var(--ti-fw-semibold); }

.cmp-hero .disclose,
.cmp-hero .disclosure {
  margin: 0 0 14px;
  font-size: var(--ti-fs-sm);
  line-height: var(--ti-lh-body);
  color: var(--ti-muted-dim);
}

.cmp-hero .cmp-xlink {
  margin: 0 0 14px;
  padding: 10px 16px;
  font-size: var(--ti-fs-base);
  line-height: var(--ti-lh-body);
  color: var(--ti-text);
  background: var(--ti-teal-dim);
  border: 1px solid var(--ti-teal-line);
  border-radius: var(--ti-radius-sm);
}
.cmp-hero .cmp-xlink a { font-weight: var(--ti-fw-semibold); }

.cmp-hero .hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 6px;
}

/* theme.css's `.ti-theme a { color: inherit }` (0,1,1) beats .ti-btn-primary's
   dark label (0,1,0), leaving light text on orange. */
.ti-cmp a.ti-btn-primary,
.ti-cmp a.ti-btn-primary:hover { color: var(--ti-on-accent); }

/* Inc. 5000 + Investopedia badges side by side, at the bottom of the left
   column (under the byline) so the right column stays short. */
.cmp-hero .ti-proof-pair {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 28px;
  margin: 28px 0 0;
}
/* Inc. 5000 logo tile — same as the homepage's .hero-inc-badge__logo (index.css) */
.cmp-hero .ti-hero-proof__logo {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 7px 12px;
  border-radius: var(--ti-radius-sm);
  border: 1px solid var(--ti-overlay-3);
  background: var(--ti-overlay-1);
  box-shadow: var(--ti-shadow-sm);
}
.cmp-hero .ti-hero-proof__logo img { width: 58px; height: auto; }
.cmp-hero .ti-award-proof .ti-award-proof__text { max-width: 11.5em; }
.cmp-hero .ti-hero-proof,
.cmp-hero .ti-award-proof {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 0 1 auto;
  min-width: 0;
}
.cmp-hero .ti-award-badge {
  flex: 0 0 auto;
  width: 56px;
  height: 50px;
  object-fit: contain;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.3));
}
.cmp-hero .ti-hero-proof__text,
.cmp-hero .ti-award-proof__text {
  margin: 0;
  max-width: 18em;
  font-size: var(--ti-fs-md);
  font-weight: var(--ti-fw-semibold);
  line-height: var(--ti-lh-snug);
  color: var(--ti-text-soft);
}

/* Stacked: flatten both columns into one list so the badges can drop to the
   end (after the CTA) instead of sitting between the byline and the lede. */
@media (max-width: 1199px) {
  .cmp-hero__grid { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
  .cmp-hero__head,
  .cmp-hero__body { display: contents; }
  .cmp-hero__grid > * > * { max-width: 760px; }
  .cmp-hero .byline { margin-bottom: 22px; }
  .cmp-hero .ti-proof-pair { order: 1; }
}
@media (max-width: 768px) {
  .cmp-hero { padding: 132px 0 48px; }
  .cmp-hero .lede { font-size: var(--ti-fs-xl); }
}
@media (max-width: 560px) {
  .cmp-hero .ti-proof-pair { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ==========================================================================
   Body — left-aligned in the .ti-wrap container. Prose is capped at
   --ti-prose and body media at --ti-media-max; tables and card grids use
   the full container width.
   ========================================================================== */

.cmp-main { padding-bottom: 88px; }

.cmp-main .story-block {
  padding: 48px 0 0;
  scroll-margin-top: 100px;
}
.cmp-main .story-block h2 {
  max-width: var(--ti-prose);
  margin: 0 0 14px;
  text-wrap: balance;
  scroll-margin-top: 100px;
}
.cmp-main .story-block h3 {
  max-width: var(--ti-prose);
  margin: 26px 0 8px;
  font-size: var(--ti-fs-h3);
  letter-spacing: var(--ti-track-snug);
  line-height: var(--ti-lh-snug);
}
.cmp-main .story-block > p,
.cmp-main .story-block > ul,
.cmp-main .story-block > ol {
  max-width: var(--ti-prose);
}
.cmp-main .story-block > p {
  margin: 0 0 14px;
  font-size: var(--ti-fs-xl);
  line-height: var(--ti-lh-body);
  color: var(--ti-muted);
}
.cmp-main .story-block > p strong,
.cmp-main .story-block li strong { color: var(--ti-text); }

.cmp-main .ti-eyebrow { margin: 0 0 10px; }

.cmp-main ul.plain,
.cmp-main ol.plain {
  margin: 0 0 14px;
  padding-left: 22px;
  font-size: var(--ti-fs-xl);
  line-height: var(--ti-lh-body);
  color: var(--ti-muted);
}
.cmp-main ul.plain li,
.cmp-main ol.plain li { margin-bottom: 8px; }

/* "The short answer" box */
.cmp-main .quick {
  max-width: var(--ti-prose);
  padding: 22px 24px;
  border: 1px solid var(--ti-orange-line);
  border-radius: var(--ti-radius);
  background: var(--ti-orange-wash);
}
.cmp-main .quick h2 { margin: 0 0 10px; }
.cmp-main .quick ul {
  margin: 0;
  padding-left: 20px;
  font-size: var(--ti-fs-lg);
  line-height: var(--ti-lh-body);
  color: var(--ti-muted);
}
.cmp-main .quick li { margin-bottom: 8px; }
.cmp-main .quick li:last-child { margin-bottom: 0; }
.cmp-main .quick strong { color: var(--ti-text); }

/* On-this-page list */
.cmp-main .toc {
  max-width: var(--ti-prose);
  margin: 24px 0 0;
  padding: 16px 20px;
  border: 1px solid var(--ti-border);
  border-radius: var(--ti-radius);
  background: var(--ti-card);
}
.cmp-main .toc-title {
  margin: 0 0 8px;
  font-size: var(--ti-fs-2xs);
  font-weight: var(--ti-fw-black);
  letter-spacing: var(--ti-track-caps);
  text-transform: uppercase;
  color: var(--ti-muted-dim);
}
.cmp-main .toc ol {
  margin: 0;
  padding-left: 20px;
  columns: 2;
  column-gap: 28px;
  font-size: var(--ti-fs-base);
  line-height: var(--ti-lh-loose);
  color: var(--ti-muted);
}
.cmp-main .toc li { break-inside: avoid; }
.cmp-main .toc a { color: var(--ti-teal); text-decoration: none; }
.cmp-main .toc a:hover { text-decoration: underline; }
@media (max-width: 768px) { .cmp-main .toc ol { columns: 1; } }

/* Callout panels */
.cmp-main .note-panel,
.ft-main .note-panel {
  max-width: var(--ti-prose);
  margin: 18px 0;
  padding: 20px 24px;
  border: 1px solid var(--ti-border);
  border-radius: var(--ti-radius);
  background: var(--ti-card);
}
.cmp-main .note-panel p,
.ft-main .note-panel p {
  margin: 0 0 10px;
  font-size: var(--ti-fs-lg);
  line-height: var(--ti-lh-body);
  color: var(--ti-muted);
}
.cmp-main .note-panel p:last-child,
.ft-main .note-panel p:last-child { margin-bottom: 0; }
.cmp-main .note-panel strong,
.ft-main .note-panel strong { color: var(--ti-text); }
.cmp-main .note-panel.locked,
.ft-main .note-panel.locked {
  border-color: var(--ti-orange-line);
  background: var(--ti-orange-wash);
}

/* Small "Prices checked" tag */
.ti-cmp .checked {
  display: inline-block;
  margin: 0 0 12px;
  padding: 4px 12px;
  font-size: var(--ti-fs-xs);
  font-weight: var(--ti-fw-bold);
  letter-spacing: var(--ti-track-caps-sm);
  text-transform: none;
  color: var(--ti-teal);
  border: 1px solid var(--ti-teal-line);
  border-radius: var(--ti-radius-pill);
  background: var(--ti-teal-dim);
}

.cmp-main .cta-row { margin: 20px 0 4px; }

.cmp-main .fine {
  max-width: var(--ti-prose);
  margin: 0;
  font-size: var(--ti-fs-sm);
  line-height: var(--ti-lh-body);
  color: var(--ti-muted-dim);
}

/* ==========================================================================
   Comparison table
   ========================================================================== */

.cmp-main .cap-wrap {
  margin: 22px 0 8px;
  overflow-x: auto;
  border: 1px solid var(--ti-border);
  border-radius: var(--ti-radius);
  background: var(--ti-card);
}
.cmp-main .cap-table {
  width: 100%;
  min-width: 720px;
  margin: 0;
  border-collapse: collapse;
  font-size: var(--ti-fs-md);
  color: var(--ti-text);
}
.cmp-main .cap-table th,
.cmp-main .cap-table td {
  padding: 14px 16px;
  text-align: left;
  vertical-align: top;
  line-height: var(--ti-lh-snug);
  border-bottom: 1px solid var(--ti-border);
}
.cmp-main .cap-table thead th {
  font-size: var(--ti-fs-2xs);
  font-weight: var(--ti-fw-black);
  letter-spacing: var(--ti-track-caps);
  text-transform: uppercase;
  color: var(--ti-muted-dim);
  background: var(--ti-shade);
}
.cmp-main .cap-table thead th.ti { color: var(--ti-orange); }
.cmp-main .cap-table td:first-child,
.cmp-main .cap-table tbody th {
  width: 18%;
  font-weight: var(--ti-fw-bold);
  color: var(--ti-text);
}
.cmp-main .cap-table td.ts { width: 41%; color: var(--ti-muted); }
.cmp-main .cap-table td.ti-col { width: 41%; background: var(--ti-orange-wash); }
.cmp-main .cap-table tr:last-child > * { border-bottom: none; }
.cmp-main .cap-note,
.cmp-main .story-block > p.cap-note {
  max-width: var(--ti-prose);
  margin: 10px 0 0;
  font-size: var(--ti-fs-sm);
  color: var(--ti-muted-dim);
}

/* ==========================================================================
   FAQ — native <details>, same look as theme.css .ti-faq-accordion
   ========================================================================== */

.cmp-main .faq details,
.ft-main .faq details {
  max-width: var(--ti-prose);
  margin-bottom: 10px;
  padding: 16px 20px;
  border: 1px solid var(--ti-border);
  border-radius: var(--ti-radius);
  background: var(--ti-card);
}
.cmp-main .faq summary,
.ft-main .faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: var(--ti-fs-lg);
  font-weight: var(--ti-fw-semibold);
  color: var(--ti-text);
  cursor: pointer;
  list-style: none;
}
.cmp-main .faq summary::-webkit-details-marker,
.ft-main .faq summary::-webkit-details-marker { display: none; }
.cmp-main .faq summary::after,
.ft-main .faq summary::after {
  content: "+";
  flex-shrink: 0;
  font-size: var(--ti-fs-2xl);
  font-weight: var(--ti-fw-bold);
  color: var(--ti-orange);
}
.cmp-main .faq details[open] summary::after,
.ft-main .faq details[open] summary::after { content: "\2212"; }
.cmp-main .faq details p,
.ft-main .faq details p {
  margin: 10px 0 0;
  font-size: var(--ti-fs-base);
  line-height: var(--ti-lh-body);
  color: var(--ti-muted);
}

/* ==========================================================================
   Author box + related links
   ========================================================================== */

.cmp-main .author-box {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: var(--ti-prose);
  margin: 40px 0 0;
  padding: 14px 18px;
  border: 1px solid var(--ti-border);
  border-radius: var(--ti-radius);
  background: var(--ti-card);
}
.cmp-main .ab-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ti-orange-dim);
  color: var(--ti-amber);
  font-size: var(--ti-fs-base);
  font-weight: var(--ti-fw-black);
}
.cmp-main .author-box p { margin: 0; font-size: var(--ti-fs-base); line-height: var(--ti-lh-body); color: var(--ti-muted); }
.cmp-main .author-box a { color: var(--ti-amber); font-weight: var(--ti-fw-bold); text-decoration: none; }
.cmp-main .ab-k {
  display: block;
  margin-bottom: 2px;
  font-size: var(--ti-fs-2xs);
  font-weight: var(--ti-fw-black);
  letter-spacing: var(--ti-track-caps);
  text-transform: uppercase;
  color: var(--ti-muted-dim);
}

.cmp-main .related {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ti-gap);
  margin: 16px 0 0;
}
@media (max-width: 900px) { .cmp-main .related { grid-template-columns: 1fr; } }
.cmp-main .related > div {
  padding: 16px 18px;
  border: 1px solid var(--ti-border);
  border-radius: var(--ti-radius);
  background: var(--ti-card);
}
.cmp-main .related h3 { margin: 0 0 10px; font-size: var(--ti-fs-lg); }
.cmp-main .related ul {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--ti-fs-base);
}

/* ==========================================================================
   Pricing chips
   ========================================================================== */

.cmp-main .price-strip { display: flex; flex-wrap: wrap; gap: 12px; margin: 16px 0 22px; }
/* The Trade Ideas chips always start their own row, so the competitor's
   plans and ours read as two groups instead of one wrapping run. The
   full-width ::after sits between them (order 1) and forces the break; it
   also leaves a double gap between the groups, which reads as the split. */
.cmp-main .price-strip::after { content: ""; flex-basis: 100%; height: 0; order: 1; }
.cmp-main .price-strip .price-chip.ti { order: 2; }
.cmp-main .price-chip {
  padding: 10px 14px;
  border: 1px solid var(--ti-border);
  border-radius: var(--ti-radius-sm);
  background: var(--ti-shade);
  font-size: var(--ti-fs-md);
  color: var(--ti-muted);
}
.cmp-main .price-chip strong { color: var(--ti-text); }
.cmp-main .price-chip.ti { border-color: var(--ti-orange-line); }

/* ==========================================================================
   Shared card / panel look for the grids below
   ========================================================================== */

.cmp-main .alt-card,
.cmp-main .price-card,
.cmp-main .gain-grid article,
.cmp-main .style-grid > div,
.cmp-main .types-grid > div,
.cmp-main .vs .cmp-card {
  border: 1px solid var(--ti-border);
  border-radius: var(--ti-radius);
  background: var(--ti-card);
}
.cmp-main .alt-card.cmp-ti-card,
.cmp-main .price-card.ti,
.cmp-main .gain-grid article.feature,
.cmp-main .vs .cmp-card.us {
  border-color: var(--ti-orange-line);
  background: linear-gradient(180deg, var(--ti-orange-wash), var(--ti-card));
}

/* Amber links inside cards and grids (handoff colour), teal elsewhere */
.cmp-main .alt-card a:not([class]),
.cmp-main .crit a,
.cmp-main .style-grid a,
.cmp-main .types-grid a,
.cmp-main .gain-grid a,
.cmp-main .kg-table a,
.cmp-main .alt-tbl a {
  color: var(--ti-amber);
  text-decoration: none;
}
.cmp-main .alt-card a:not([class]):hover,
.cmp-main .crit a:hover,
.cmp-main .style-grid a:hover,
.cmp-main .types-grid a:hover,
.cmp-main .gain-grid a:hover,
.cmp-main .kg-table a:hover,
.cmp-main .alt-tbl a:hover { text-decoration: underline; }

/* ==========================================================================
   Alternatives / best-of: numbered pick cards
   ========================================================================== */

.cmp-main ol.picks {
  max-width: var(--ti-prose);
  margin: 0;
  padding: 0;
  list-style: none;
}
.cmp-main ol.picks > li { margin: 0; }

.cmp-main .alt-card {
  margin: 14px 0;
  padding: 20px 22px;
  scroll-margin-top: 100px;
}
.cmp-main .alt-card h3 { margin: 0 0 10px; }
.cmp-main .alt-card .bf-tag {
  display: inline-block;
  margin: 0 0 10px;
  padding: 3px 10px;
  font-size: var(--ti-fs-2xs);
  font-weight: var(--ti-fw-black);
  letter-spacing: var(--ti-track-caps);
  text-transform: uppercase;
  color: var(--ti-amber);
  border: 1px solid var(--ti-orange-line);
  border-radius: var(--ti-radius-pill);
}
.cmp-main .alt-card .cmp-lead {
  margin: 0 0 10px;
  font-size: var(--ti-fs-lg);
  line-height: var(--ti-lh-body);
  color: var(--ti-muted);
}
.cmp-main .alt-card .replaces { margin: 0 0 8px; font-size: var(--ti-fs-base); color: var(--ti-text); }
.cmp-main .alt-card .replaces strong { color: var(--ti-amber); }
.cmp-main .alt-card .worth,
.cmp-main .alt-card .fit,
.cmp-main .alt-card .swap {
  margin: 8px 0 0;
  font-size: var(--ti-fs-md);
  line-height: var(--ti-lh-body);
  color: var(--ti-muted);
}
.cmp-main .alt-card .worth strong,
.cmp-main .alt-card .fit strong,
.cmp-main .alt-card .swap strong { color: var(--ti-text); }
.cmp-main .alt-card .cmp-link { margin: 10px 0 0; font-size: var(--ti-fs-md); }
.cmp-main .alt-card .cmp-link a { color: var(--ti-teal); }

.cmp-main dl.crit {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 6px 14px;
  margin: 10px 0 4px;
  font-size: var(--ti-fs-md);
  line-height: var(--ti-lh-body);
}
.cmp-main dl.crit dt { font-weight: var(--ti-fw-bold); color: var(--ti-text); }
.cmp-main dl.crit dd { margin: 0; color: var(--ti-muted); }
@media (max-width: 560px) {
  .cmp-main dl.crit { grid-template-columns: 1fr; gap: 2px 0; }
  .cmp-main dl.crit dd { margin-bottom: 8px; }
}

.cmp-main .past { font-size: var(--ti-fs-sm); color: var(--ti-muted); }
.cmp-main .story-block > p.past { margin-top: -4px; }

.cmp-main .approved {
  padding: 12px 16px;
  border-left: 3px solid var(--ti-teal);
  border-radius: var(--ti-radius-sm);
  background: var(--ti-teal-dim);
  color: var(--ti-text);
}

/* ==========================================================================
   Wide tables (alternatives side-by-side, best-of, stack) — sticky first column
   ========================================================================== */

.cmp-main .alt-tbl-wrap,
.cmp-main .kg-wrap {
  margin: 20px 0 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--ti-border);
  border-radius: var(--ti-radius);
  background: var(--ti-card);
}

.cmp-main .alt-tbl,
.cmp-main .kg-table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  color: var(--ti-muted);
}
.cmp-main .alt-tbl { min-width: 1120px; font-size: var(--ti-fs-sm); }
.cmp-main .kg-table { min-width: 520px; font-size: var(--ti-fs-md); }
.cmp-main .alt-tbl caption,
.cmp-main .kg-table caption {
  caption-side: top;
  padding: 12px 16px 4px;
  text-align: left;
  font-size: var(--ti-fs-sm);
  color: var(--ti-muted);
}
.cmp-main .alt-tbl th,
.cmp-main .alt-tbl td,
.cmp-main .kg-table th,
.cmp-main .kg-table td {
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
  line-height: var(--ti-lh-snug);
  border-bottom: 1px solid var(--ti-border);
}
.cmp-main .alt-tbl thead th,
.cmp-main .kg-table thead th {
  font-size: var(--ti-fs-2xs);
  font-weight: var(--ti-fw-black);
  letter-spacing: var(--ti-track-caps);
  text-transform: uppercase;
  color: var(--ti-muted-dim);
  background: var(--ti-bg-sunken);
}
.cmp-main .kg-table thead th.ti { color: var(--ti-orange); }
.cmp-main .alt-tbl tbody th {
  position: sticky;
  left: 0;
  z-index: 2;
  width: 118px;
  min-width: 118px;
  font-weight: var(--ti-fw-bold);
  color: var(--ti-text);
  background: var(--ti-card);
}
.cmp-main .alt-tbl thead th:first-child { position: sticky; left: 0; z-index: 3; }
.cmp-main .alt-tbl tr.ti-row td { background: var(--ti-orange-wash); color: var(--ti-text); }
.cmp-main .alt-tbl tr.ti-row th { background: var(--ti-card-hot); }
.cmp-main .alt-tbl tbody tr:last-child > * ,
.cmp-main .kg-table tbody tr:last-child > * { border-bottom: none; }

.cmp-main .kg-table tbody th { width: 42%; font-weight: var(--ti-fw-medium); color: var(--ti-muted); }
.cmp-main .kg-table tbody th strong,
.cmp-main .kg-table td.them strong { color: var(--ti-text); }
.cmp-main .kg-table td.them { width: 42%; }
.cmp-main .kg-table td.ti-col { color: var(--ti-text); background: var(--ti-orange-wash); }
.cmp-main .kg-table tr.added th,
.cmp-main .kg-table tr.added td.them { font-weight: var(--ti-fw-bold); color: var(--ti-amber); }

/* .bo-table / .stack-table / .simple / .t2-table are .cap-table variants */
.cmp-main .cap-table.bo-table { min-width: 1240px; }
.cmp-main .cap-table.stack-table { min-width: 900px; }
.cmp-main .cap-table.simple { min-width: 560px; }
.cmp-main .cap-table.bo-table th,
.cmp-main .cap-table.bo-table td,
.cmp-main .cap-table.stack-table th,
.cmp-main .cap-table.stack-table td { padding: 12px; font-size: var(--ti-fs-sm); }
.cmp-main .cap-table.bo-table td.ts,
.cmp-main .cap-table.bo-table td.ti-col,
.cmp-main .cap-table.simple td { width: auto; }
.cmp-main .cap-table.bo-table td:first-child,
.cmp-main .cap-table.bo-table tbody th,
.cmp-main .cap-table.stack-table td:first-child,
.cmp-main .cap-table.stack-table tbody th {
  position: sticky;
  left: 0;
  z-index: 2;
  width: 112px;
  white-space: normal;
  background: var(--ti-card);
}
.cmp-main .cap-table.bo-table thead th:first-child,
.cmp-main .cap-table.stack-table thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 3;
  background: var(--ti-bg-sunken);
}
.cmp-main .cap-table tr.ti-row > * { background: var(--ti-orange-wash); }
.cmp-main .cap-table tr.ti-row > :first-child { background: var(--ti-card-hot); color: var(--ti-amber); }
.cmp-main .cap-table tbody th a { color: inherit; }
.cmp-main .t2-table td:first-child { white-space: nowrap; }

.cmp-main .tbl-legend,
.cmp-main .swipe-hint {
  max-width: var(--ti-prose);
  margin: 10px 0 0;
  font-size: var(--ti-fs-sm);
  color: var(--ti-muted-dim);
}
.cmp-main .swipe-hint { display: none; }
@media (max-width: 768px) { .cmp-main .swipe-hint { display: block; } }

/* ==========================================================================
   Card grids
   ========================================================================== */

.cmp-main .style-grid,
.cmp-main .gain-grid,
.cmp-main .price-grid,
.cmp-main .alt-hub-grid,
.cmp-main .hub-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ti-gap);
  margin: 18px 0 8px;
}
.cmp-main .types-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ti-gap);
  margin: 16px 0 8px;
}
@media (max-width: 900px) { .cmp-main .types-grid { grid-template-columns: 1fr; } }
@media (max-width: 768px) {
  .cmp-main .style-grid,
  .cmp-main .gain-grid,
  .cmp-main .price-grid,
  .cmp-main .alt-hub-grid,
  .cmp-main .hub-grid { grid-template-columns: 1fr; }
}

.cmp-main .style-grid > div,
.cmp-main .types-grid > div { padding: 14px 16px; }
.cmp-main .types-grid > div.here { border-color: var(--ti-orange-line); }
.cmp-main .gain-grid article { padding: 16px 18px; }
.cmp-main .price-card { padding: 18px 20px; }

.cmp-main .style-grid h3,
.cmp-main .types-grid h3,
.cmp-main .gain-grid h3,
.cmp-main .gain-grid h4 { margin: 0 0 6px; font-size: var(--ti-fs-xl); letter-spacing: var(--ti-track-snug); color: var(--ti-text); }
.cmp-main .price-card h3 { margin: 0 0 10px; font-size: var(--ti-fs-2xl); }

.cmp-main .style-grid p,
.cmp-main .types-grid p,
.cmp-main .gain-grid p {
  margin: 0 0 8px;
  font-size: var(--ti-fs-base);
  line-height: var(--ti-lh-body);
  color: var(--ti-muted);
}
.cmp-main .style-grid p:last-child,
.cmp-main .types-grid p:last-child,
.cmp-main .gain-grid p:last-child { margin-bottom: 0; }

.cmp-main .gain-grid .tag,
.cmp-main .hub-card .tag,
.cmp-main .alt-hub-card .tag {
  margin: 0 0 8px;
  font-size: var(--ti-fs-2xs);
  font-weight: var(--ti-fw-black);
  letter-spacing: var(--ti-track-caps);
  text-transform: uppercase;
  color: var(--ti-orange);
}

.cmp-main .price-card ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--ti-fs-base);
  line-height: var(--ti-lh-body);
  color: var(--ti-muted);
}
.cmp-main .price-card li strong { color: var(--ti-text); }
.cmp-main .price-card p { margin: 12px 0 0; font-size: var(--ti-fs-md); line-height: var(--ti-lh-body); color: var(--ti-muted); }
.cmp-main .price-cta { margin: 18px 0 0; }

/* Hub cards (whole card is the link) */
.cmp-main .hub-card,
.cmp-main .alt-hub-card {
  display: block;
  padding: 22px 22px 20px;
  border: 1px solid var(--ti-border);
  border-radius: var(--ti-radius-lg);
  background: linear-gradient(165deg, var(--ti-glass-top), var(--ti-glass-bottom));
  color: var(--ti-text);
  text-decoration: none;
  transition: border-color var(--ti-dur-fast) ease, transform var(--ti-dur-fast) ease, box-shadow var(--ti-dur-fast) ease;
}
.cmp-main .hub-card.roundup,
.cmp-main .alt-hub-card { border-color: var(--ti-orange-line); }
.cmp-main .alt-hub-card { background: linear-gradient(180deg, var(--ti-orange-wash), var(--ti-card)); }
.cmp-main .hub-card:hover,
.cmp-main .alt-hub-card:hover {
  border-color: var(--ti-orange-line);
  transform: translateY(-2px);
  box-shadow: var(--ti-shadow-md);
}
.cmp-main .hub-card h3,
.cmp-main .alt-hub-card h3 { margin: 0 0 8px; font-size: var(--ti-fs-h3); letter-spacing: var(--ti-track-snug); }
.cmp-main .hub-card p,
.cmp-main .alt-hub-card p { margin: 0; font-size: var(--ti-fs-base); line-height: var(--ti-lh-body); color: var(--ti-muted); }
.cmp-main .hub-card .go,
.cmp-main .alt-hub-card .go { margin-top: 14px; font-size: var(--ti-fs-sm); font-weight: var(--ti-fw-bold); color: var(--ti-orange); }

/* Score tiles (alternatives-vectorvest) */
.cmp-main .score-panel {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ti-gap);
  max-width: var(--ti-prose);
  margin: 16px 0 18px;
}
@media (max-width: 560px) { .cmp-main .score-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cmp-main .score-panel > div {
  padding: 12px;
  text-align: center;
  border: 1px solid var(--ti-orange-line);
  border-radius: var(--ti-radius);
  background: var(--ti-orange-wash);
}
.cmp-main .score-panel strong {
  display: block;
  font-size: var(--ti-fs-stat);
  line-height: var(--ti-lh-tight);
  letter-spacing: var(--ti-track-snug);
  color: var(--ti-amber);
}
.cmp-main .score-panel span {
  display: block;
  margin-top: 4px;
  font-size: var(--ti-fs-sm);
  line-height: var(--ti-lh-snug);
  color: var(--ti-muted);
}

/* Trading Room facts + CTA row */
.cmp-main .room-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: var(--ti-prose);
  margin: 14px 0 16px;
}
.cmp-main .room-facts span {
  padding: 7px 14px;
  font-size: var(--ti-fs-md);
  color: var(--ti-muted);
  border: 1px solid var(--ti-orange-line);
  border-radius: var(--ti-radius-pill);
  background: var(--ti-orange-wash);
}
.cmp-main .room-facts strong { color: var(--ti-text); }
.cmp-main .room-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  max-width: var(--ti-prose);
  margin: 16px 0 6px;
}
.cmp-main .room-cta a.text-link { font-size: var(--ti-fs-md); color: var(--ti-teal); text-decoration: underline; text-underline-offset: 2px; }

/* Head-to-head cards */
.cmp-main .vs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ti-gap); margin: 22px 0; }
@media (max-width: 768px) { .cmp-main .vs { grid-template-columns: 1fr; } }
.cmp-main .vs .cmp-card { padding: 20px; }
.cmp-main .vs .lab {
  margin-bottom: 10px;
  font-size: var(--ti-fs-2xs);
  font-weight: var(--ti-fw-black);
  letter-spacing: var(--ti-track-caps);
  text-transform: uppercase;
  color: var(--ti-muted-mid);
}
.cmp-main .vs .cmp-card.us .lab { color: var(--ti-orange); }
.cmp-main .vs .cmp-card h3 { margin: 0 0 8px; font-size: var(--ti-fs-2xl); }
.cmp-main .vs .cmp-card p { margin: 0; font-size: var(--ti-fs-base); line-height: var(--ti-lh-snug); color: var(--ti-muted); }

.cmp-main .cmp-xlink--end {
  max-width: var(--ti-prose);
  margin: 0 0 12px;
  padding: 8px 0 8px 14px;
  font-size: var(--ti-fs-lg);
  color: var(--ti-text);
  border-left: 3px solid var(--ti-teal);
}
.cmp-main .cmp-xlink--end a { color: var(--ti-teal); text-decoration: underline; text-underline-offset: 2px; }

.ti-cmp .vh {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ==========================================================================
   Screenshots and video — body media keep their own shape (only hero
   stages are 3:2). The width/height attributes on each <img>/<video> give
   the ratio, so space is reserved before it loads. Never crop a product
   screenshot to fit.
   ========================================================================== */

.cmp-main figure.shot,
.cmp-main .sk-video,
.ft-main figure.shot { max-width: var(--ti-media-max); margin: 20px 0 10px; }
.cmp-main .sk-stills {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ti-gap);
  max-width: 72rem;
  margin: 20px 0 18px;
}
.cmp-main .sk-stills figure { margin: 0; }
@media (max-width: 768px) { .cmp-main .sk-stills { grid-template-columns: 1fr; max-width: 28rem; } }

.cmp-main figure.shot img,
.cmp-main figure.shot video,
.cmp-main .sk-video video,
.cmp-main .sk-stills img,
.ft-main figure.shot img,
.ft-main figure.shot video {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--ti-border);
  border-radius: var(--ti-radius);
  background: var(--ti-bg-deep);
}
/* A body screenshot or video narrower than the slot shows at its own width
   instead of being stretched (and blurred) to fill it */
.cmp-main figure.shot img,
.cmp-main figure.shot video,
.ft-main figure.shot video,
.ft-main figure.shot img { width: auto; max-width: 100%; }
/* Stills of slightly different heights line up along their top edge */
.cmp-main .sk-stills { align-items: start; }

.cmp-main figure.shot figcaption,
.cmp-main .sk-video figcaption,
.cmp-main .sk-stills figcaption,
.ft-main figure.shot figcaption {
  margin-top: 8px;
  font-size: var(--ti-fs-sm);
  line-height: var(--ti-lh-body);
  color: var(--ti-muted);
}
.cmp-main .sk-stills figcaption strong { color: var(--ti-text); }
.cmp-main .story-block.sk-test .cap-wrap { margin-top: 18px; }

@media (max-width: 768px) {
  .cmp-main .story-block { padding-top: 36px; }
  .cmp-main .story-block > p { font-size: var(--ti-fs-lg); }
}

/* ==========================================================================
   Phones: comparison tables become stacked cards (from the handoff's
   ti-compare-batch.css). One card per row; the row's first cell is the card
   title, the Trade Ideas cell (td.ti-col) moves to the top, and each cell is
   labelled from its data-label (its column header). Desktop is untouched.
   !important is needed to undo the sticky first column and per-table widths
   set above, which use higher-specificity selectors.
   ========================================================================== */

@media (max-width: 560px) {
  .cmp-main .cap-wrap:has(> table.ti-stack),
  .cmp-main .alt-tbl-wrap:has(> table.ti-stack),
  .cmp-main .kg-wrap:has(> table.ti-stack) {
    overflow: visible;
    max-width: 100%;
    border: 0;
    background: none;
  }
  .cmp-main .swipe-hint { display: none; }

  .cmp-main table.ti-stack {
    display: block;
    width: 100%;
    min-width: 0 !important;
    border: 0;
    background: none;
  }
  .cmp-main table.ti-stack caption {
    display: block;
    padding: 0 2px 10px;
    font-size: var(--ti-fs-sm);
  }
  .cmp-main table.ti-stack thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .cmp-main table.ti-stack tbody { display: block; width: 100%; }
  .cmp-main table.ti-stack tbody tr {
    display: flex;
    flex-direction: column;
    margin: 0 0 12px;
    padding: 12px 14px;
    border: 1px solid var(--ti-border);
    border-radius: var(--ti-radius);
    background: var(--ti-card);
  }
  .cmp-main table.ti-stack tbody tr.ti-row {
    border-color: var(--ti-orange-glow);
    background: var(--ti-card-hot);
  }
  .cmp-main table.ti-stack tbody tr > th,
  .cmp-main table.ti-stack tbody tr > td {
    display: block;
    order: 2;
    position: static !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0;
    padding: 7px 0 !important;
    border: 0 !important;
    background: none !important;
    white-space: normal !important;
    font-size: var(--ti-fs-md) !important;
    line-height: var(--ti-lh-body);
    color: var(--ti-muted);
  }
  .cmp-main table.ti-stack tbody tr > :first-child {
    order: 0;
    margin-bottom: 2px;
    padding: 0 0 8px !important;
    border-bottom: 1px solid var(--ti-border) !important;
    font-size: var(--ti-fs-lg) !important;
    font-weight: var(--ti-fw-black);
    color: var(--ti-text) !important;
  }
  .cmp-main table.ti-stack tbody tr.ti-row > :first-child { color: var(--ti-amber) !important; }
  .cmp-main table.ti-stack tbody tr > td.ti-col { order: 1; color: var(--ti-text); }
  .cmp-main table.ti-stack tbody tr > [data-label]:not(:first-child)::before {
    content: attr(data-label);
    display: block;
    margin: 0 0 2px;
    font-size: var(--ti-fs-xs);
    font-weight: var(--ti-fw-black);
    letter-spacing: var(--ti-track-caps-sm);
    text-transform: uppercase;
    color: var(--ti-muted-dim);
  }
  .cmp-main table.ti-stack tbody tr > td.ti-col[data-label]::before { color: var(--ti-amber); }
  .cmp-main table.ti-stack tbody tr > [data-label=""]::before { content: none; }
}


/* ==========================================================================
   Shared with the feature pages (moved from feature-pages.css, SITE-1443):
   the hero media slot, its pause button and the closing CTA band. The fp-
   class names are kept because the feature pages already use them.
   ========================================================================== */

/* Media column: label, 3:2 stage, caption */
.fp-media { display: flex; flex-direction: column; gap: 12px; min-width: 0; width: 100%; }
.fp-media-title {
  margin: 0;
  font-size: var(--ti-fs-lead-lg);
  font-weight: var(--ti-fw-black);
  line-height: var(--ti-lh-tight);
  letter-spacing: var(--ti-track-snug);
  color: var(--ti-text);
}
.fp-media-sub {
  margin: -6px 0 0;
  font-size: var(--ti-fs-base);
  font-weight: var(--ti-fw-semibold);
  color: var(--ti-muted);
}
.fp-media-caption {
  margin: 0;
  font-size: var(--ti-fs-sm);
  line-height: var(--ti-lh-snug);
  text-align: center;
  color: var(--ti-muted);
}

/* Every stage is exactly 3:2 (SITE-1421 rule) — canvas or recorded video.
   Size with width/max-width only. Video letterboxes, never crops. */
.fp-stage {
  position: relative;
  aspect-ratio: 3 / 2;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--ti-orange-line);
  border-radius: var(--ti-radius-lg);
  background:
    radial-gradient(500px 320px at 50% 45%, var(--ti-orange-dim), transparent 65%),
    var(--ti-bg-deep);
  box-shadow: var(--ti-shadow-lg);
}
.fp-stage canvas,
.fp-stage video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.fp-stage video { object-fit: contain; background: var(--ti-bg-deep); }
.fp-stage-badge {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 2;
  padding: 7px 12px;
  font-size: var(--ti-fs-xs);
  font-weight: var(--ti-fw-bold);
  letter-spacing: var(--ti-track-caps-sm);
  color: var(--ti-on-accent);
  background: var(--ti-orange);
  border-radius: var(--ti-radius-pill);
  box-shadow: var(--ti-shadow-orange);
}

/* Hero screenshots sit in the 3:2 stage; the image letterboxes */
.fp-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.fp-stage picture { display: contents; }

/* Hero screenshots and videos that aren't 3:2 (Stock Races, AI Signals,
   Stock Scanner, TI Wave, PiP): the graphic sits inset on a blurred,
   darkened copy of itself, so the frame stays 3:2 and the spare space reads
   as backdrop on all four sides instead of black bars. Each stage sets
   --fp-backdrop to its image, or to the video's poster, in a style
   attribute: the one allowed inline style, since it passes image data
   rather than styling. */
.cmp-hero .fp-stage--backdrop {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  isolation: isolate;
}
.cmp-hero .fp-stage--backdrop::before {
  content: "";
  position: absolute;
  inset: -40px;
  z-index: -1;
  background: var(--fp-backdrop) center / cover no-repeat;
  filter: blur(26px) brightness(0.42) saturate(1.3);
}
.cmp-hero .fp-stage--backdrop img,
.cmp-hero .fp-stage--backdrop video {
  position: static;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  border: 1px solid var(--ti-overlay-3);
  border-radius: var(--ti-radius-sm);
  background: transparent;
  box-shadow: var(--ti-shadow-md);
}
@media (max-width: 560px) {
  .cmp-hero .fp-stage--backdrop { padding: 14px; }
}

/* Pause/play button on autoplaying hero videos (marketing-pages.js, or
   feature-pages.js on feature pages until Phase 2) */
.cmp-hero .fp-pause {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  color: var(--ti-text);
  border: 1px solid var(--ti-overlay-4);
  border-radius: 50%;
  background: var(--ti-scrim);
  cursor: pointer;
  opacity: 0.8;
  transition: opacity var(--ti-dur-fast) ease, border-color var(--ti-dur-fast) ease;
}
.cmp-hero .fp-pause:hover,
.cmp-hero .fp-pause:focus-visible { opacity: 1; border-color: var(--ti-orange); }
.cmp-hero .fp-pause:focus-visible { outline: 2px solid var(--ti-orange); outline-offset: 2px; }
.cmp-hero .fp-pause svg { width: 14px; height: 14px; fill: currentColor; }

/* Closing CTA band (TI Wave) */
.fp-close {
  padding: 56px 0 80px;
  text-align: center;
  border-top: 1px solid var(--ti-border);
}
.fp-close h2 { max-width: 40rem; margin: 0 auto 12px; text-wrap: balance; }
.fp-close p { max-width: 36rem; margin: 0 auto 22px; color: var(--ti-muted); }
/* margin-top: room between the heading or line above and the buttons */
.fp-close .hero-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }

/* Channel Bar: guest-only note under the CTAs, and the small trust line in
   the closing band */
.cmp-hero .fp-guest-note { margin: 12px 0 0; }
.fp-close .fp-guest-note { margin: 14px auto 0; font-size: var(--ti-fs-sm); color: var(--ti-muted-dim); }
.fp-close .fp-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--ti-fs-sm);
  color: var(--ti-muted-dim);
}
.fp-close .fp-trust li + li::before { content: "·"; margin-right: 18px; }

/* ==========================================================================
   Part 3 page refresh (SITE-1443): pieces the 10/13 handoff added to every
   compare, alternatives and best-of page.
   ========================================================================== */

/* Short line under the H1 ("Real-Time Discovery and Holly, or …") */
.cmp-hero .cmp-h1-sub {
  margin: -6px 0 18px;
  font-size: var(--ti-fs-lead-lg);
  font-weight: var(--ti-fw-semibold);
  line-height: var(--ti-lh-snug);
  color: var(--ti-text-soft);
  text-wrap: balance;
}

/* Guest-only line under the hero buttons; only rendered for visitors who
   aren't signed in (ti_is_guest() in marketing/index.php) */
.cmp-hero .cmp-guest-note {
  margin: 12px 0 0;
  font-size: var(--ti-fs-sm);
  color: var(--ti-muted-dim);
}
.cmp-hero .cmp-guest-note a { color: var(--ti-orange); text-decoration: underline; text-underline-offset: 2px; }

/* Labelled callout ("Key point", "Trader tip", "Settings" …) */
.cmp-main .cmp-callout,
.ft-main .cmp-callout {
  max-width: var(--ti-prose);
  margin: 16px 0;
  padding: 12px 16px;
  border-left: 3px solid var(--ti-orange);
  border-radius: 0 var(--ti-radius-sm) var(--ti-radius-sm) 0;
  background: var(--ti-orange-wash);
}
.cmp-main .cmp-callout__label,
.ft-main .cmp-callout__label {
  display: block;
  margin-bottom: 4px;
  font-size: var(--ti-fs-xs);
  font-weight: var(--ti-fw-black);
  letter-spacing: var(--ti-track-caps);
  text-transform: uppercase;
  color: var(--ti-amber);
}
.cmp-main .story-block > .cmp-callout p,
.cmp-main .cmp-callout p,
.ft-main .story-block > .cmp-callout p,
.ft-main .cmp-callout p {
  margin: 0;
  font-size: var(--ti-fs-lg);
  line-height: var(--ti-lh-body);
  color: var(--ti-muted);
}
.cmp-main .cmp-callout strong,
.ft-main .cmp-callout strong { color: var(--ti-text); }

/* Bulleted points shown as cards */
.cmp-main ul.cmp-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--ti-gap);
  max-width: none;
  margin: 16px 0;
  padding: 0;
  list-style: none;
}
.cmp-main ul.cmp-cards > li {
  margin: 0;
  padding: 14px 16px;
  font-size: var(--ti-fs-base);
  line-height: var(--ti-lh-body);
  color: var(--ti-muted);
  border: 1px solid var(--ti-border);
  border-radius: var(--ti-radius);
  background: linear-gradient(180deg, var(--ti-orange-wash), var(--ti-card));
}
.cmp-main ul.cmp-cards > li > strong:first-child { color: var(--ti-amber); }

/* "Why consider Trade Ideas over X?" */
.cmp-main .cmp-why-extra {
  display: grid;
  gap: 8px;
  max-width: var(--ti-prose);
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.cmp-main .cmp-why-extra li {
  position: relative;
  padding-left: 24px;
  font-size: var(--ti-fs-base);
  line-height: var(--ti-lh-body);
  color: var(--ti-text-soft);
}
.cmp-main .cmp-why-extra li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 0.45em;
  width: 10px;
  height: 5px;
  border-left: 2px solid var(--ti-orange);
  border-bottom: 2px solid var(--ti-orange);
  transform: rotate(-45deg);
}

/* "Alerts and filters to look at": help-page links as pills */
.cmp-main ul.cmp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: var(--ti-prose);
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.cmp-main ul.cmp-chips a {
  display: inline-block;
  padding: 6px 12px;
  font-size: var(--ti-fs-sm);
  color: var(--ti-text);
  text-decoration: none;
  border: 1px solid var(--ti-overlay-3);
  border-radius: var(--ti-radius-pill);
}
.cmp-main ul.cmp-chips a:hover { border-color: var(--ti-orange-line); color: var(--ti-orange-hot); }
.cmp-main ul.cmp-chips span {
  display: inline-block;
  padding: 6px 12px;
  font-size: var(--ti-fs-sm);
  color: var(--ti-muted);
  border: 1px dashed var(--ti-overlay-3);
  border-radius: var(--ti-radius-pill);
}
.fp-close .fp-guest-note a { color: var(--ti-orange); text-decoration: underline; text-underline-offset: 2px; }

/* "Read more" expander under a short answer */
.cmp-main details.cmp-more { max-width: var(--ti-prose); margin: 12px 0 0; }
.cmp-main details.cmp-more > summary {
  display: inline-block;
  font-size: var(--ti-fs-md);
  font-weight: var(--ti-fw-bold);
  color: var(--ti-orange);
  cursor: pointer;
  list-style: none;
}
.cmp-main details.cmp-more > summary::-webkit-details-marker { display: none; }
.cmp-main details.cmp-more > summary::after { content: " +"; }
.cmp-main details.cmp-more[open] > summary::after { content: " \2212"; }
.cmp-main details.cmp-more > p {
  margin: 10px 0 0;
  font-size: var(--ti-fs-lg);
  line-height: var(--ti-lh-body);
  color: var(--ti-muted);
}

/* Inline SVG diagram (best-of pages); the tall version replaces the wide one
   on phones */
.cmp-main figure.cmp-diagram {
  max-width: var(--ti-media-max);
  margin: 20px 0 10px;
  padding: 16px;
  border: 1px solid var(--ti-border);
  border-radius: var(--ti-radius);
  background: var(--ti-bg-deep);
}
.cmp-main figure.cmp-diagram svg { display: block; width: 100%; height: auto; }
.cmp-main figure.cmp-diagram .cmp-diagram__v { display: none; }
.cmp-main figure.cmp-diagram figcaption {
  margin-top: 8px;
  font-size: var(--ti-fs-sm);
  line-height: var(--ti-lh-body);
  color: var(--ti-muted);
}
@media (max-width: 560px) {
  .cmp-main figure.cmp-diagram svg { display: none; }
  .cmp-main figure.cmp-diagram .cmp-diagram__v { display: block; max-width: 300px; margin: 0 auto; }
}

/* Opening paragraphs that the best-of prototypes moved out of the hero */
.cmp-main .cmp-intro { padding-top: 32px; }

/* ==========================================================================
   Radar sweep (marketing-pages.js) over radar-ti.webp: the stock scanner
   hero and the features hub's library cards. From the part3 handoff's
   radar-tickers.css (SITE-1443).
   ========================================================================== */

.rt-wrap { position: relative; }
.rt-svg {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  border-radius: inherit;
}
.rt-svg .rt-b { opacity: 0; transform-box: fill-box; transform-origin: center; }
.rt-svg.rt-on .rt-b { animation: rtLit 3.6s ease-out infinite both; }
.rt-svg .rt-sw { opacity: 0; transform-box: view-box; }
.rt-svg.rt-on .rt-sw { animation: rtSweep 3.6s linear infinite; }
.rt-svg.rt-on.rt-off .rt-b,
.rt-svg.rt-on.rt-off .rt-sw { animation-play-state: paused; }
.rt-svg .rt-sw line { stroke: var(--ti-green); stroke-width: 4; stroke-opacity: 0.8; }
.rt-svg .rt-wash { stop-color: var(--ti-green); }
.rt-svg .rt-halo { fill-opacity: 0.25; }
.rt-svg .rt-dot { filter: drop-shadow(0 0 10px currentColor); }
.rt-svg .rt-up { color: var(--ti-green); }
.rt-svg .rt-down { color: var(--ti-orange); }
.rt-svg .rt-halo,
.rt-svg .rt-dot,
.rt-svg .rt-pct { fill: currentColor; }
.rt-svg text {
  font: var(--ti-fw-bold) var(--rt-fs, 64px) / 1 var(--ti-font);
  fill: var(--ti-text);
  paint-order: stroke;
  stroke: var(--ti-bg-deep);
  stroke-width: 10px;
}
.rt-svg .rt-pct { font-size: calc(var(--rt-fs, 64px) * 0.72); font-weight: var(--ti-fw-black); }
/* Tickers link to Stock Info: hover/focus holds the ticker lit */
.rt-svg a.rt-lk { pointer-events: auto; cursor: pointer; outline: none; }
.rt-svg .rt-hit { fill: transparent; stroke: none; pointer-events: all; }
.rt-svg a.rt-lk:hover .rt-b,
.rt-svg a.rt-lk:focus .rt-b { opacity: 1; animation-play-state: paused; }
.rt-svg a.rt-lk:hover text:not(.rt-pct),
.rt-svg a.rt-lk:focus text:not(.rt-pct) { fill: var(--ti-orange); text-decoration: underline; }
.rt-svg a.rt-lk:focus-visible .rt-hit { stroke: var(--ti-text); stroke-width: 6; }
@keyframes rtLit {
  0% { opacity: 0; transform: scale(0.4); }
  8% { opacity: 1; transform: scale(1.25); }
  14% { opacity: 1; transform: scale(1); }
  78% { opacity: 1; transform: scale(1); }
  96%, 100% { opacity: 0; transform: scale(0.9); }
}
@keyframes rtSweep {
  0% { opacity: 0.85; transform: rotate(0deg); }
  100% { opacity: 0.85; transform: rotate(360deg); }
}
/* As specific as the .rt-on rules above, so reduced motion always wins (the
   JS also never adds .rt-on then) */
@media (prefers-reduced-motion: reduce) {
  .rt-svg .rt-b,
  .rt-svg.rt-on .rt-b { opacity: 1; animation: none; }
  .rt-svg .rt-sw,
  .rt-svg.rt-on .rt-sw { display: none; }
}

/* Hero radar: the 16:9 image sits inset on the 3:2 backdrop stage */
.cmp-hero .fp-radar { width: 100%; aspect-ratio: 16 / 9; }
.cmp-hero .fp-stage--backdrop .fp-radar img { display: block; width: 100%; max-height: none; }