/* ══════════════════════════════════════════════════════════════════════
   IPTV Americans — Design System Components (v1.0)
   ──────────────────────────────────────────────────────────────────────
   The 22 canonical components extracted from the 4 reference pages.

   Component classes are already defined in site.css. This file
   DOCUMENTS them and adds the few cross-cutting helpers that don't
   exist yet (the .surface-light pattern, the .ds-progress reading bar,
   etc.). Loading this file does NOT override existing component CSS —
   it adds the missing utility patterns and codifies the canonical set.

   Load order:
     <link rel="stylesheet" href="/css/site.min.css">
     <link rel="stylesheet" href="/css/design-tokens.css">
     <link rel="stylesheet" href="/css/design-system.css">   ← this file

   See: design-system/01-component-reference.md for HTML examples
   ══════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════
   1. SURFACE PRIMITIVES — the foundation under every component
   ══════════════════════════════════════════════════════════════════════ */

/* .surface-light — the "reading sheet" / content-card pattern.
   Use for: long-form articles, pricing tables, contact forms, /packages,
   any content that needs a light surface inside the dark page chrome. */
.surface-light {
  background:    var(--color-surface-light);
  border:        1px solid var(--color-line-on-light);
  border-radius: var(--radius-xl);
  box-shadow:    var(--shadow-sheet);
  padding:       var(--space-8) var(--space-7) var(--space-9);
  color:         var(--color-fg-on-light);
}
.surface-light h1,
.surface-light h2,
.surface-light h3,
.surface-light h4,
.surface-light h5,
.surface-light h6      { color: var(--color-navy); }
.surface-light p,
.surface-light li      { color: var(--color-fg-on-light-soft); line-height: var(--lh-loose); }
.surface-light strong  { color: var(--color-navy); }
.surface-light a       { color: var(--color-navy); text-decoration: underline; text-underline-offset: 2px; }
.surface-light a:hover { color: var(--color-navy-2); }
.surface-light .muted  { color: var(--color-muted-on-light); }

@media (max-width: 680px) {
  .surface-light {
    margin: var(--space-7) 0;
    padding: var(--space-7) var(--space-5);
    border-radius: 0;
    border-left: none;
    border-right: none;
    box-shadow: none;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   2. BUTTONS — primary, secondary, ghost
   (Existing site.css defines .btn-primary inside .sales-hero only;
    these are the cross-context versions usable anywhere.)
   ══════════════════════════════════════════════════════════════════════ */

.ds-btn {
  display:         inline-flex;
  align-items:     center;
  gap:             var(--space-2);
  padding:         var(--space-3) var(--space-6);
  border-radius:   var(--radius);
  font:            inherit;
  font-weight:     700;
  font-size:       var(--fs-base);
  text-decoration: none;
  border:          none;
  cursor:          pointer;
  transition:      transform var(--transition-fast),
                   background var(--transition-fast),
                   box-shadow var(--transition-fast);
  white-space:     nowrap;
  text-align:      center;
}
.ds-btn:hover     { transform: translateY(-1px); }
.ds-btn:active    { transform: translateY(0); }
.ds-btn:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}
.ds-btn:disabled  { opacity: 0.6; cursor: not-allowed; transform: none; }

/* Primary — purple, prominent CTA. Use sparingly (one per section). */
.ds-btn--primary {
  background: var(--color-accent);
  color:      var(--color-fg);
  box-shadow: var(--shadow-cta);
}
.ds-btn--primary:hover {
  background: var(--color-primary-2);
  box-shadow: 0 12px 32px rgba(168,85,247,.30);
}

/* Secondary — translucent border, ghost on dark */
.ds-btn--secondary {
  background: rgba(255,255,255,0.08);
  color:      var(--color-fg);
  border:     1px solid rgba(255,255,255,0.30);
}
.ds-btn--secondary:hover {
  background: rgba(255,255,255,0.16);
}

/* Amber — for the rare hot-CTA emphasis (used on .cta block) */
.ds-btn--amber {
  background: var(--color-amber);
  color:      var(--color-amber-fg);
}
.ds-btn--amber:hover { background: #fbbf24; }

/* Sizes */
.ds-btn--sm { padding: var(--space-2) var(--space-4); font-size: var(--fs-sm); }
.ds-btn--lg { padding: var(--space-4) var(--space-7); font-size: var(--fs-lg); }


/* ══════════════════════════════════════════════════════════════════════
   3. SECTION-HEADING — centred H2 + sub
   Canonical class: .section-heading (defined in site.css line 1075)
   This is reference only — DO NOT redefine in this file.

   Markup:
     <section class="section-heading">
       <h2>Heading text</h2>
       <p>Subtitle paragraph (optional)</p>
     </section>
   ══════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════
   4. SALES HERO — page header banner
   Canonical class: .sales-hero (defined in site.css line ~1020)

   Markup:
     <section class="sales-hero">
       <h1>Hero headline</h1>
       <p class="sub">Subhead.</p>
       <div class="cta-row">
         <a href="..." class="btn-primary">Primary CTA</a>
         <a href="..." class="btn-secondary">Secondary CTA</a>
       </div>
       <div class="micro-trust">7-day refund · no contract · …</div>
     </section>
   ══════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════
   5. TRUST ROW — 4-stat horizontal pill row
   Canonical: .trust-row + .trust-badge (site.css line 885)

   Markup:
     <section class="trust-row">
       <div class="trust-badge"><span class="icon">📺</span>
         <span><strong>59,000+</strong>Live channels</span></div>
       …
     </section>
   ══════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════
   6. REASON CARD — feature grid (numbered icon + heading + body)
   Canonical: .reasons + .reason-card + .num (site.css line 838)

   Markup:
     <section class="reasons">
       <div class="reason-card">
         <div class="num">1</div>
         <h3>Heading</h3>
         <p>Body copy.</p>
       </div>
       …
     </section>
   ══════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════
   7. AEO BLOCK — "Quick answer" zero-click summary card
   Canonical: .aeo-block + .aeo-eyebrow (site.css)
   Use for AI-search-optimised answer blocks.

   Markup:
     <article class="aeo-block">
       <span class="aeo-eyebrow">Quick answer</span>
       <h3>Question H3</h3>
       <p>40-60 word self-contained answer.</p>
     </article>
   ══════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════
   8. AEO Q&A — fragment-extractable Q/A pair
   Canonical: .aeo-qa + .aeo-q + .aeo-a

   Markup:
     <div class="aeo-qa">
       <p class="aeo-q">Question?</p>
       <p class="aeo-a">Answer.</p>
     </div>
   ══════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════
   9. DIRECT-ANSWER — short answer box (under H1)
   Canonical: .direct-answer (site.css line 105)
   ══════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════
   10. TL;DR — bullet summary at top of long pages
   Canonical: .tldr (site.css line 116)

   Markup:
     <section class="tldr">
       <h2 hidden>TL;DR</h2>
       <ul><li>…</li><li>…</li></ul>
     </section>
   ══════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════
   11. IPTV COMPARISON TABLE
   Canonical: .iptv-comparison (site.css)
   Use the .ds-table-winner highlight to mark the winning row.
   ══════════════════════════════════════════════════════════════════════ */

.ds-table-winner {
  background:
    linear-gradient(90deg,
      var(--color-good-bg-light) 0%,
      #dcfce7 100%);
}
.ds-table-winner th,
.ds-table-winner td {
  color: var(--color-good-on-light);
  font-weight: 700;
  border-bottom-color: #86efac !important;
}

.ds-check,
.ds-x {
  display:     inline-flex;
  align-items: center;
  gap:         5px;
  font-weight: 700;
}
.ds-check          { color: var(--color-good-on-light); }
.ds-check::before  {
  content: "✓";
  display: inline-flex;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--color-good-strong);
  color: #fff;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 800;
}
.ds-x              { color: var(--color-err-on-light); }
.ds-x::before      {
  content: "×";
  display: inline-flex;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fca5a5;
  color: #fff;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 800;
}


/* ══════════════════════════════════════════════════════════════════════
   12. PLAN CARD — pricing tier card
   Canonical: .plan-card + .plan-card.featured (site.css line 624)
   ══════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════
   13. INCLUDED CARD — "Every plan includes…" feature list
   Canonical: .included-card + .plan-features (site.css)
   ══════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════
   14. SPORT CARD — compact icon + sport name pill
   Canonical: .sport-card + .sport-icon (site.css line 906)
   ══════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════
   15. DEVICE CARD — device compatibility tile
   Canonical: .device-card + .device-icon + .device-name + .device-tag
   ══════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════
   16. ISP TILE — ISP latency dashboard tile (advanced)
   Canonical: .isp-tile + .isp-led + .isp-wordmark
   Uses --isp-region custom property for per-ISP brand colour.
   ══════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════
   17. TESTIMONIAL CARDS — quote + author cards
   Canonical: .testimonials + .testimonial + .by (existing)
   New rich variant: .ds-tcard with avatar + stars + plan badge.
   ══════════════════════════════════════════════════════════════════════ */

.ds-tcard {
  background:    var(--color-surface-light);
  border:        1px solid var(--color-line-on-light);
  border-radius: var(--radius-lg);
  padding:       var(--space-5);
  display:       flex;
  flex-direction: column;
  gap:           var(--space-3);
  transition:    transform var(--transition-base),
                 box-shadow var(--transition-base);
}
.ds-tcard:hover {
  transform:  translateY(-2px);
  box-shadow: 0 8px 24px rgba(15,23,42,.10);
}
.ds-tcard__head {
  display:     flex;
  align-items: center;
  gap:         var(--space-3);
}
.ds-tcard__avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-navy), var(--color-navy-2));
  color: #fff;
  font-weight: 800;
  font-size: var(--fs-base);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ds-tcard__meta { flex: 1; min-width: 0; }
.ds-tcard__name {
  font-size: 0.92rem;
  color: var(--color-navy);
  font-weight: 700;
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.ds-tcard__verified {
  font-size: 0.7rem;
  color: var(--color-good-on-light);
  background: #d1fae5;
  padding: 1px var(--space-2);
  border-radius: var(--radius-pill);
  font-weight: 700;
}
.ds-tcard__loc {
  font-size: var(--fs-sm);
  color: var(--color-muted-on-light);
  margin: 0;
}
.ds-tcard__stars {
  color: var(--color-amber);
  font-size: 0.92rem;
  letter-spacing: 1px;
  line-height: 1;
}
.ds-tcard blockquote {
  margin: 0;
  font-style: italic;
  color: var(--color-fg-on-light-soft);
  font-size: 0.94rem;
  line-height: var(--lh-normal);
  border-left: 3px solid var(--color-amber);
  padding-left: var(--space-3);
}
.ds-tcard__plan {
  display: inline-block;
  font-size: 0.72rem;
  background: #eff6ff;
  color: var(--color-navy);
  padding: 3px var(--space-3);
  border-radius: var(--radius-pill);
  font-weight: 700;
  align-self: flex-start;
}


/* ══════════════════════════════════════════════════════════════════════
   18. FAQ ACCORDION — native <details>/<summary> pattern
   Canonical: .faq + <details> (site.css line 153)

   Markup:
     <div class="faq">
       <details><summary>Question?</summary><p>Answer.</p></details>
       …
     </div>
   ══════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════
   19. CTA BLOCK — mid- or end-of-page conversion block
   Canonical: .cta + .cta .btn (site.css line 205)

   Markup:
     <section class="cta">
       <h2>Ready to subscribe?</h2>
       <p>One subscription, every package above.</p>
       <a class="btn" href="/pricing">See pricing →</a>
     </section>
   ══════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════
   20. STEP CARDS — numbered process cards
   New v1 component (not yet in site.css). Use for HowTo flows.

   Markup:
     <ol class="ds-steps">
       <li class="ds-step"><span class="ds-step__num">1</span>
         <h4>Step name</h4><p>Step body.</p></li>
       …
     </ol>
   ══════════════════════════════════════════════════════════════════════ */

.ds-steps {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
  margin: var(--space-5) 0 var(--space-7);
  padding: 0;
  list-style: none;
  counter-reset: ds-step;
}
@media (min-width: 600px)  { .ds-steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px)  { .ds-steps { grid-template-columns: repeat(5, 1fr); } }
.ds-step {
  background:    var(--color-surface-light);
  border:        1px solid var(--color-line-on-light);
  border-radius: var(--radius-lg);
  padding:       var(--space-5) var(--space-4);
  position:      relative;
  display:       flex;
  flex-direction: column;
  gap:           var(--space-2);
}
.ds-step__num {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--color-amber);
  color: var(--color-amber-fg);
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  margin-bottom: 4px;
}
.ds-step h4 {
  margin: 0;
  font-size: 0.96rem;
  color: var(--color-navy);
  font-weight: 700;
  line-height: var(--lh-snug);
}
.ds-step p {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--color-muted-on-light);
  line-height: var(--lh-normal);
}


/* ══════════════════════════════════════════════════════════════════════
   21. PROGRESS BAR — sticky reading-progress indicator
   New v1 component. Pairs with design-system.js initProgressBar().

   Markup:
     <div class="ds-progress"><div class="ds-progress__bar"></div></div>
   ══════════════════════════════════════════════════════════════════════ */

.ds-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: transparent;
  z-index: var(--z-sticky);
  pointer-events: none;
}
.ds-progress__bar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  transition: width 100ms ease-out;
}


/* ══════════════════════════════════════════════════════════════════════
   22. REGION HEADER — flag + h2 + region-meta byline
   New v1 component. Lives inside .surface-light blocks.

   Markup:
     <header class="ds-region">
       <span class="ds-region__flag" aria-hidden="true">🇺🇸</span>
       <div class="ds-region__info">
         <h2>For US cord-cutters</h2>
         <p class="ds-region__meta">Ashburn edge · sub-25 ms latency</p>
       </div>
     </header>
   ══════════════════════════════════════════════════════════════════════ */

.ds-region {
  display:       flex;
  gap:           var(--space-5);
  align-items:   center;
  margin:        var(--space-8) 0 var(--space-6);
  padding:       var(--space-5) var(--space-6);
  background:    linear-gradient(135deg, #fffbeb 0%, var(--color-surface-light) 100%);
  border-left:   4px solid var(--color-amber);
  border-radius: var(--radius-lg);
}
.ds-region__flag {
  font-size: 2.4rem;
  flex-shrink: 0;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(245,158,11,.2));
}
.ds-region__info { flex: 1; min-width: 0; }
.ds-region__info h2 {
  margin: 0;
  font-size: var(--fs-2xl);
  color: var(--color-navy);
  line-height: var(--lh-snug);
}
.ds-region__meta {
  margin: 6px 0 0;
  font-size: var(--fs-sm);
  color: var(--color-muted-on-light);
  line-height: var(--lh-normal);
}
.ds-region__meta strong { color: var(--color-navy); }

@media (max-width: 560px) {
  .ds-region {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-5);
  }
  .ds-region__flag { font-size: 2rem; }
}


/* ══════════════════════════════════════════════════════════════════════
   v1.1 ADDITIONS — AEO/GEO content blocks (Princeton GEO research)
   ──────────────────────────────────────────────────────────────────────
   Five components engineered for AI-engine citation extraction:
     .ds-tldr        — TL;DR callout (top of every page/post)
     .ds-definition  — "X is..." answer-first block
     .ds-stat        — pulled-out statistic with source link
     .ds-quote       — quote with attribution + credentials
     .ds-comparison  — IPTVAmericans-vs-typical 3-col table
     .ds-faq         — accordion FAQ (single-open via design-system.js)

   All styled for the dark page chrome by default. Add .on-light modifier
   to use inside .surface-light reading sheets.
   ══════════════════════════════════════════════════════════════════════ */

/* ─── .ds-tldr — TL;DR callout ─── */
.ds-tldr {
  position: relative;
  background: linear-gradient(135deg, rgba(129,140,248,0.10), rgba(192,132,252,0.08));
  border: 1px solid rgba(129,140,248,0.30);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  margin: 24px 0 32px;
  color: rgba(255,255,255,0.92);
}
.ds-tldr::before {
  content: "TL;DR";
  position: absolute; top: -10px; left: 20px;
  background: var(--color-accent, #c084fc); color: #0a0e1f;
  font-weight: 700; font-size: 11px; letter-spacing: 0.08em;
  padding: 3px 10px; border-radius: 999px;
}
.ds-tldr p,
.ds-tldr ul { color: rgba(255,255,255,0.92); font-size: 16px; line-height: 1.65; margin: 0; }
.ds-tldr ul { padding-left: 20px; }
.ds-tldr li { margin: 6px 0; }
.ds-tldr strong { color: #ffffff; }
.ds-tldr.on-light {
  background: linear-gradient(135deg, rgba(129,140,248,0.12), rgba(192,132,252,0.10));
  border-color: rgba(129,140,248,0.35);
  color: var(--color-fg-on-light);
}
.ds-tldr.on-light p,
.ds-tldr.on-light li { color: var(--color-fg-on-light); }
.ds-tldr.on-light strong { color: var(--color-navy); }

/* ─── .ds-definition — "X is..." answer-first block ─── */
.ds-definition {
  background: rgba(255,255,255,0.04);
  border-left: 3px solid var(--color-primary, #818cf8);
  border-radius: 0 12px 12px 0;
  padding: 18px 22px;
  margin: 18px 0 28px;
  color: rgba(255,255,255,0.86);
  line-height: 1.65;
}
.ds-definition .ds-definition__term {
  display: block;
  font-weight: 700; color: #ffffff;
  font-size: 18px; margin-bottom: 4px;
}
.ds-definition.on-light {
  background: #f8fafc;
  border-left-color: var(--color-navy);
  color: var(--color-fg-on-light);
}
.ds-definition.on-light .ds-definition__term { color: var(--color-navy); }

/* ─── .ds-stat — pulled-out statistic + source ─── */
.ds-stat {
  display: inline-flex;
  flex-direction: column;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  padding: 16px 20px;
  margin: 12px 8px 12px 0;
  min-width: 160px;
}
.ds-stat__num {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 32px; font-weight: 700; color: #c084fc;
  line-height: 1; margin: 0;
}
.ds-stat__label {
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255,255,255,0.62); margin: 6px 0 0;
}
.ds-stat__source {
  display: block; margin-top: 8px;
  font-size: 11px; color: rgba(255,255,255,0.50);
  text-decoration: none;
}
.ds-stat__source:hover { color: rgba(255,255,255,0.78); text-decoration: underline; }
.ds-stat.on-light {
  background: #f8fafc;
  border-color: var(--color-line-on-light);
}
.ds-stat.on-light .ds-stat__num { color: var(--color-navy); }
.ds-stat.on-light .ds-stat__label { color: var(--color-muted-on-light); }
.ds-stat.on-light .ds-stat__source { color: var(--color-muted-on-light); }

/* ─── .ds-quote — quote with attribution + credentials ─── */
.ds-quote {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-left: 3px solid var(--color-accent, #c084fc);
  border-radius: 0 12px 12px 0;
  padding: 22px 26px;
  margin: 24px 0;
}
.ds-quote blockquote {
  margin: 0; font-size: 18px; line-height: 1.55;
  color: rgba(255,255,255,0.92); font-style: italic;
}
.ds-quote blockquote::before { content: "\201C"; margin-right: 4px; opacity: 0.5; }
.ds-quote blockquote::after  { content: "\201D"; margin-left: 4px; opacity: 0.5; }
.ds-quote__attr {
  margin: 12px 0 0; font-size: 13px;
  color: rgba(255,255,255,0.68); font-style: normal;
}
.ds-quote__attr strong { color: #ffffff; font-weight: 600; }
.ds-quote__credentials {
  font-size: 12px; color: rgba(255,255,255,0.50);
  margin-left: 6px;
}
.ds-quote.on-light {
  background: #f8fafc; border-color: var(--color-line-on-light);
  border-left-color: var(--color-navy);
}
.ds-quote.on-light blockquote { color: var(--color-fg-on-light); }
.ds-quote.on-light .ds-quote__attr { color: var(--color-muted-on-light); }
.ds-quote.on-light .ds-quote__attr strong { color: var(--color-navy); }

/* ─── .ds-comparison — IPTVAmericans-vs-typical 3-col table ─── */
.ds-comparison {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px; overflow: hidden;
  margin: 20px 0 32px;
  font-size: 14.5px; color: rgba(255,255,255,0.86);
}
.ds-comparison caption {
  caption-side: top; text-align: left;
  padding: 14px 18px 10px;
  font-size: 12px; letter-spacing: 0.10em; text-transform: uppercase;
  color: rgba(255,255,255,0.55); font-weight: 700;
}
.ds-comparison thead th {
  background: rgba(129,140,248,0.10);
  color: #ffffff;
  text-align: left; padding: 14px 18px;
  font-weight: 700; font-size: 13.5px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.ds-comparison thead th:nth-child(3) {
  background: rgba(192,132,252,0.15);
  color: #c084fc;
}
.ds-comparison tbody td {
  padding: 12px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  vertical-align: top;
}
.ds-comparison tbody tr:last-child td { border-bottom: none; }
.ds-comparison tbody td:nth-child(1) {
  color: #ffffff; font-weight: 500;
}
.ds-comparison tbody td:nth-child(2) { color: rgba(255,255,255,0.62); }
.ds-comparison tbody td:nth-child(3) {
  background: rgba(192,132,252,0.06);
  color: rgba(255,255,255,0.92); font-weight: 500;
}
.ds-comparison .ds-comparison__win::before  { content: "✓ "; color: #34d399; font-weight: 700; }
.ds-comparison .ds-comparison__lose::before { content: "✗ "; color: #f87171; font-weight: 700; }
@media (max-width: 720px) {
  .ds-comparison { font-size: 13.5px; }
  .ds-comparison th, .ds-comparison td { padding: 10px 12px; }
}

/* ─── .ds-faq — accordion FAQ block ─── */
.ds-faq details {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 14px 18px;
  margin: 8px 0;
  transition: background 0.2s ease;
}
.ds-faq details[open] { background: rgba(255,255,255,0.06); }
.ds-faq summary {
  cursor: pointer; font-weight: 600; color: #ffffff;
  list-style: none; position: relative; padding-right: 28px;
}
.ds-faq summary::-webkit-details-marker { display: none; }
.ds-faq summary::after {
  content: "+"; position: absolute; right: 4px; top: -2px;
  font-size: 20px; color: #c084fc; transition: transform 0.2s;
}
.ds-faq details[open] summary::after { content: "\2212"; }
.ds-faq details p {
  margin: 10px 0 0; color: rgba(255,255,255,0.78);
  line-height: 1.6;
}
.ds-faq.on-light details {
  background: #ffffff; border-color: var(--color-line-on-light);
}
.ds-faq.on-light details[open] { background: #f8fafc; }
.ds-faq.on-light summary { color: var(--color-navy); }
.ds-faq.on-light details p { color: var(--color-fg-on-light); }


/* ══════════════════════════════════════════════════════════════════════
   v1.2 ADDITIONS — Global conversion components (Phase 2)
   ──────────────────────────────────────────────────────────────────────
   .ds-honesty-banner  — dismissible top-of-page honest-marketing banner
   .ds-support-fab     — floating 24/7 support widget (bottom-right)
   .ds-pillars         — 6/10-card trust pillar grid
   .ds-tooltip         — hover/tap microcopy badge
   ══════════════════════════════════════════════════════════════════════ */

/* ─── .ds-honesty-banner — dismissible top banner ─── */
.ds-honesty-banner {
  position: relative;
  background: linear-gradient(90deg, #0a0e1f 0%, #1a1f3a 50%, #0a0e1f 100%);
  border-bottom: 1px solid rgba(192,132,252,0.30);
  color: #ffffff; font-size: 14px;
  padding: 10px 50px 10px 20px;
  text-align: center;
  z-index: 50;
  letter-spacing: 0.01em;
}
.ds-honesty-banner strong { color: #c084fc; font-weight: 700; }
.ds-honesty-banner .ds-honesty-banner__sep {
  color: rgba(255,255,255,0.30); margin: 0 8px;
}
.ds-honesty-banner__close {
  position: absolute; top: 50%; right: 14px; transform: translateY(-50%);
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255,255,255,0.10); color: #ffffff;
  border: none; cursor: pointer;
  font-size: 16px; line-height: 1; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.ds-honesty-banner__close:hover { background: rgba(255,255,255,0.20); }
.ds-honesty-banner[hidden] { display: none; }
@media (max-width: 720px) {
  .ds-honesty-banner { font-size: 12.5px; padding: 8px 44px 8px 14px; line-height: 1.35; }
  .ds-honesty-banner__sep { display: inline-block; margin: 0 4px; }
}

/* Telegram sticky strip (secondary global bar) */
.ds-telegram-strip {
  position: relative;
  background: linear-gradient(90deg, #2AABEE 0%, #229ED9 100%);
  color: #ffffff; font-size: 13.5px;
  padding: 8px 50px 8px 20px;
  text-align: center; font-weight: 500;
  z-index: 49;
}
.ds-telegram-strip a {
  color: #ffffff; text-decoration: underline; font-weight: 600;
}
.ds-telegram-strip__close {
  position: absolute; top: 50%; right: 14px; transform: translateY(-50%);
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(0,0,0,0.20); color: #ffffff;
  border: none; cursor: pointer; font-size: 14px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.ds-telegram-strip[hidden] { display: none; }

/* ─── .ds-support-fab — floating 24/7 support widget ─── */
.ds-support-fab {
  position: fixed; bottom: 20px; right: 20px;
  z-index: 100;
  font-family: var(--font-stack, system-ui);
}
.ds-support-fab__toggle {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px;
  background: linear-gradient(135deg, #818cf8, #c084fc);
  color: #ffffff;
  border: none; border-radius: 999px;
  font-size: 14px; font-weight: 600;
  box-shadow: 0 10px 30px rgba(129,140,248,0.40);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ds-support-fab__toggle:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(129,140,248,0.55);
}
.ds-support-fab__pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: #34d399; position: relative;
  box-shadow: 0 0 0 0 rgba(52,211,153,0.7);
  animation: ds-support-pulse 1.8s infinite;
}
@keyframes ds-support-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(52,211,153,0.7); }
  70%  { box-shadow: 0 0 0 10px rgba(52,211,153,0); }
  100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); }
}
.ds-support-fab__panel {
  position: absolute; bottom: 70px; right: 0;
  width: 320px;
  background: #0a0e1f;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  box-shadow: 0 30px 60px rgba(0,0,0,0.50);
  padding: 22px 22px 18px;
  display: none;
  color: #ffffff;
}
.ds-support-fab[data-open="true"] .ds-support-fab__panel { display: block; }
.ds-support-fab[data-open="true"] .ds-support-fab__toggle::after {
  content: "×"; margin-left: 4px; font-size: 18px; font-weight: 700;
}
.ds-support-fab__panel h4 {
  margin: 0 0 4px; font-size: 16px; color: #ffffff;
}
.ds-support-fab__panel .ds-support-fab__sub {
  margin: 0 0 16px; font-size: 13px; color: rgba(255,255,255,0.62);
  line-height: 1.4;
}
.ds-support-fab__channels {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.ds-support-fab__channels a {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  color: #ffffff; text-decoration: none; font-size: 14px;
  transition: background 0.15s;
}
.ds-support-fab__channels a:hover { background: rgba(255,255,255,0.08); }
.ds-support-fab__channels .ds-support-fab__icon {
  width: 22px; height: 22px; flex: 0 0 22px; color: #c7d2fe;
}
.ds-support-fab__channels .ds-support-fab__label { flex: 1; }
.ds-support-fab__channels .ds-support-fab__meta {
  font-size: 11px; color: rgba(255,255,255,0.55);
}
@media (max-width: 520px) {
  .ds-support-fab { bottom: 16px; right: 16px; }
  .ds-support-fab__toggle .ds-support-fab__text { display: none; }
  .ds-support-fab__toggle { padding: 14px; border-radius: 50%; }
  .ds-support-fab__panel { width: calc(100vw - 32px); right: 0; }
}

/* ─── .ds-pillars — trust-pillar grid ─── */
.ds-pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
  margin: 24px 0 32px;
}
@media (max-width: 880px) { .ds-pillars { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 520px) { .ds-pillars { grid-template-columns: 1fr; } }
.ds-pillar {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  padding: 22px 24px;
  transition: background 0.2s, transform 0.2s;
  color: rgba(255,255,255,0.82);
}
.ds-pillar:hover {
  background: rgba(255,255,255,0.07);
  transform: translateY(-2px);
}
.ds-pillar__icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: rgba(129,140,248,0.18);
  color: #c7d2fe;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  margin-bottom: 12px;
}
.ds-pillar h3 {
  margin: 0 0 8px;
  font-size: 17px; font-weight: 700;
  color: #ffffff; line-height: 1.3;
}
.ds-pillar p {
  margin: 0; font-size: 14.5px; line-height: 1.55;
  color: rgba(255,255,255,0.78);
}
.ds-pillar.on-light {
  background: #f8fafc;
  border-color: var(--color-line-on-light);
  color: var(--color-fg-on-light);
}
.ds-pillar.on-light h3 { color: var(--color-navy); }
.ds-pillar.on-light p { color: var(--color-fg-on-light); }

/* ─── .ds-tooltip — inline microcopy badge ─── */
.ds-tooltip {
  position: relative; display: inline-flex;
  align-items: center; gap: 4px;
  cursor: help;
}
.ds-tooltip__trigger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: rgba(129,140,248,0.24); color: #c7d2fe;
  font-size: 10px; font-weight: 700; line-height: 1;
  margin-left: 4px;
  cursor: help;
}
.ds-tooltip__body {
  position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%);
  width: 240px;
  background: #0a0e1f; color: #ffffff;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12.5px; line-height: 1.5;
  text-transform: none; letter-spacing: 0;
  font-weight: 400;
  box-shadow: 0 10px 30px rgba(0,0,0,0.50);
  opacity: 0; visibility: hidden;
  transition: opacity 0.15s, visibility 0.15s;
  z-index: 60;
  pointer-events: none;
}
.ds-tooltip__body::after {
  content: ""; position: absolute;
  top: 100%; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #0a0e1f;
}
.ds-tooltip:hover .ds-tooltip__body,
.ds-tooltip:focus-within .ds-tooltip__body,
.ds-tooltip[data-open="true"] .ds-tooltip__body {
  opacity: 1; visibility: visible;
}


/* Hide the footer contact list (email + Telegram + WhatsApp links)
   site-wide per owner request 2026-05-15. To revert: delete this rule. */
.footer-contact-list { display: none !important; }


/* Defensive: any SVG inside a .ds-* component must declare its size.
   Prevents paper-plane/icon SVGs from rendering at viewport scale
   when a parent's flexbox / inline-block context strips intrinsic
   dimensions. */
[class^="ds-"] svg:not([width]):not([height]):not(.no-default-size) {
  width: 1em;
  height: 1em;
  flex: none;
}


/* ─── .ds-status-indicator — footer service-status badge (auto-injected) ─── */
.ds-status-indicator {
  display: inline-flex; align-items: center; gap: 8px;
  margin-left: auto; padding: 4px 12px 4px 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 999px;
  font-size: 12.5px; color: rgba(255,255,255,0.78);
  line-height: 1.4;
}
.ds-status-indicator__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #34d399;                                  /* operational green */
  box-shadow: 0 0 0 0 rgba(52,211,153,0.7);
  animation: ds-status-pulse 2s infinite;
}
.ds-status-indicator__text strong { color: #ffffff; font-weight: 600; }
.ds-status-indicator.is-warn .ds-status-indicator__dot { background: #f59e0b; box-shadow: 0 0 0 0 rgba(245,158,11,0.7); }
.ds-status-indicator.is-err  .ds-status-indicator__dot { background: #f87171; box-shadow: 0 0 0 0 rgba(248,113,113,0.7); }
@keyframes ds-status-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(52,211,153,0.7); }
  70%  { box-shadow: 0 0 0 8px rgba(52,211,153,0); }
  100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); }
}
@media (max-width: 640px) {
  .ds-status-indicator { margin: 8px 0 0; }
}


/* ══════════════════════════════════════════════════════════════════════
   FOCUS RING — global accessibility default
   Any interactive element gets a visible focus ring on :focus-visible.
   ══════════════════════════════════════════════════════════════════════ */

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}