/* TheTechVector site-wide redesign CSS - theme-level (mu-plugin), replacing
   the per-article embedded <style> blocks used during initial rollout
   2026-09-03. Single source of truth from here on - edit this one file,
   not individual articles. */

.ttv-related-wrap { margin: 36px 0; }
.ttv-related-wrap h2 { font-size: 20px; margin: 0 0 16px; }
.ttv-related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.ttv-related-card {
  display: block; border: 1px solid #e2e5ec; border-radius: 12px; padding: 16px;
  text-decoration: none !important; background: #ffffff; transition: border-color 0.15s ease, transform 0.15s ease;
}
.ttv-related-card:hover, .ttv-related-card:focus-visible { border-color: #4F46E5; transform: translateY(-2px); }
.ttv-related-card .ttv-rc-tag {
  display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: #4F46E5 !important; background: #EEF0FF; padding: 2px 8px; border-radius: 5px; margin-bottom: 10px;
}
.ttv-related-card .ttv-rc-title { font-size: 14.5px; font-weight: 700; color: #141826 !important; margin: 0 0 6px; line-height: 1.35; }
.ttv-related-card .ttv-rc-desc { font-size: 12.5px; color: #6b7280; margin: 0; }
.is-style-rounded img {
  border-radius: 50%;
}
.pros-box {
  background: #f0fdf4;
  border-left: 4px solid #22c55e;
  padding: 16px;
}
.cons-box {
  background: #fff1f2;
  border-left: 4px solid #ef4444;
  padding: 16px;
}
.final-cta {
  background: #1e3a5f;
  padding: 24px;
  border-radius: 8px;
  color: #ffffff;
}
.final-cta h2, .final-cta p {
  color: #ffffff;
}
.tdb-title-text.tdb-title-text.tdb-title-text {
  font-family: 'Archivo', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
}
.wp-block-heading.wp-block-heading,
.entry-content h2, .entry-content h3,
article h2, article h3 {
  font-family: 'Archivo', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}
.affiliate-cta .wp-element-button.wp-element-button.wp-element-button[href] {
  background-color: #4F46E5 !important;
  color: #ffffff !important;
  border-radius: 10px !important;
  padding: 12px 24px !important;
  font-weight: 700 !important;
  box-shadow: 0 6px 20px -6px rgba(79, 70, 229, 0.35) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.affiliate-cta .wp-element-button.wp-element-button.wp-element-button[href]:hover {
  background-color: #4338CA !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px -6px rgba(79, 70, 229, 0.45) !important;
}
figure.wp-block-table a[style*="background-color:#0066cc"],
figure.wp-block-table a[style*="background-color: #0066cc"] {
  background-color: #4F46E5 !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 3px 10px -3px rgba(79, 70, 229, 0.4);
}
figure.wp-block-table a[style*="background-color:#0066cc"]:hover,
figure.wp-block-table a[style*="background-color: #0066cc"]:hover {
  background-color: #4338CA !important;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -4px rgba(79, 70, 229, 0.5);
}

/* Compact comparison table redesign - card rows instead of a real
   <table>. Deliberately kept to name/rating/price/deal - same 4
   pieces of info as the old table, T111's mobile-safety limit, just
   presented as cards instead of grid cells. Collapses to a 2-column
   stack under 520px so it never wraps character-by-character on a
   phone - the exact failure mode T111 found once already. */
.cmp-wrap {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin: 20px 0 !important;
}
.cmp-row {
  display: grid !important;
  grid-template-columns: 28px 1fr auto auto !important;
  gap: 14px !important;
  align-items: center !important;
  background: #ffffff !important;
  border: 1px solid #e2e5ec !important;
  border-radius: 12px !important;
  padding: 13px 16px !important;
  box-shadow: 0 1px 2px rgba(20, 24, 38, 0.06) !important;
}
.cmp-row.cmp-winner {
  border-color: #4F46E5 !important;
  box-shadow: 0 6px 20px -6px rgba(79, 70, 229, 0.3) !important;
}
.cmp-rank {
  font-size: 13px !important;
  color: #8891A0 !important;
  font-weight: 500 !important;
}
.cmp-row.cmp-winner .cmp-rank {
  color: #4F46E5 !important;
}
.cmp-name-wrap {
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  min-width: 0 !important;
}
.cmp-name {
  font-weight: 700 !important;
  font-size: 15px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  color: #1A1F2B !important;
}
.cmp-badge {
  font-size: 10px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  background: #FBF0DC !important;
  color: #A9760D !important;
  padding: 2px 7px !important;
  border-radius: 5px !important;
  font-weight: 600 !important;
}
.cmp-rating-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.cmp-rating-track {
  width: 64px !important;
  height: 5px !important;
  border-radius: 3px !important;
  background: #E3E8EC !important;
  overflow: hidden !important;
}
.cmp-rating-fill {
  height: 100% !important;
  background: #16A34A !important;
  border-radius: 3px !important;
  display: block !important;
}
.cmp-rating-num {
  font-size: 12.5px !important;
  color: #16A34A !important;
  font-weight: 600 !important;
}
.cmp-price {
  text-align: right !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: #1A1F2B !important;
  white-space: nowrap !important;
}
.cmp-price-period {
  font-weight: 400 !important;
  font-size: 11px !important;
  color: #8891A0 !important;
}
.cmp-cta.cmp-cta {
  background: #4F46E5 !important;
  color: #ffffff !important;
  border: none !important;
  padding: 9px 16px !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  display: inline-block !important;
  text-align: center !important;
}
.cmp-cta.cmp-cta:hover {
  background: #4338CA !important;
}
.cmp-caption {
  font-size: 13px !important;
  color: #5B6472 !important;
  margin-top: 10px !important;
}
@media (max-width: 520px) {
  .cmp-row {
    grid-template-columns: 22px 1fr !important;
    row-gap: 10px !important;
  }
  .cmp-price {
    grid-column: 2 !important;
    text-align: left !important;
  }
  .cmp-cta.cmp-cta {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    padding: 11px !important;
  }
}

/* Quick verdict cards - fix uneven card heights within a row, and
   pin the CTA button to the bottom of every card regardless of how
   much text is above it, so buttons line up across the row.
   Scoped with :has(.verdict-card) - written unscoped originally and only
   ever visually verified against best-vpn-uk, where every .wp-block-columns
   row happens to hold verdict-cards. Found live 2026-09-03 on an older
   article whose "quick verdict" grid uses a different, non-.verdict-card
   format (a bare styled div, no class): the unscoped rule turned its
   .wp-block-column into a flex row, squeezing its "View Deal" button into
   a vertical sliver where the text wraps one letter per line. This same
   unscoped pair would have broken ANY unrelated .wp-block-columns layout
   on ANY article (pros/cons columns included) - scoping it is the fix,
   not just patching this one article. */
.wp-block-columns:has(.verdict-card) {
  align-items: stretch !important;
}
.wp-block-columns:has(.verdict-card) .wp-block-column {
  display: flex !important;
}
.wp-block-column .wp-block-group.verdict-card.verdict-card {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
}
/* The button row sits one level deeper than it looks - WordPress
   wraps every group block's real children in an auto-generated
   .wp-block-group__inner-container div, so .wp-block-buttons is a
   child of THAT, not of .verdict-card directly. margin-top:auto
   only pushes an element to the end of its own direct flex parent,
   so without this rule the inner-container was a plain block (not
   a flex item at all) and the button just sat wherever the card's
   natural content height put it - close enough to "flush" to pass
   an early check, but genuinely different card-to-card once the
   header/price restyling changed how much text each card wraps to
   (found live 2026-09-03 - two cards per row landed ~26px off their
   row-mates). Making the inner-container itself the flex column
   completes the chain so the button is actually pinned every time. */
.wp-block-column .wp-block-group.verdict-card.verdict-card > .wp-block-group__inner-container {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  min-height: 0 !important;
}
.wp-block-column .wp-block-group.verdict-card.verdict-card .wp-block-buttons {
  margin-top: auto !important;
  padding-top: 14px !important;
}
a[style*="color:#0066cc"], a[style*="color: #0066cc"] {
  color: #4F46E5 !important;
}
/* Card measured pixel-identical across the row (191px, header top
   at 20px in every card) on 2026-09-03 verification - the "still
   doesn't feel aligned" report traced to something the pixel check
   missed: the card had ZERO padding anywhere (content ran flush to
   the rounded border) and the header row used a floated badge, so
   nothing inside had real breathing room or a settled vertical
   centre. Fixed with real padding + a proper flex header row below. */
.wp-block-group.verdict-card.verdict-card {
  position: relative !important;
  background: #ffffff !important;
  border: 1px solid #e2e5ec !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  padding: 22px 22px 20px !important;
  box-shadow: 0 1px 2px rgba(20, 24, 38, 0.06) !important;
}
.wp-block-group.verdict-card.verdict-card::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 3px !important;
  background: #4F46E5 !important;
}
/* Header row: category label (left) + rating pill (right), was a
   bare <p><strong>Label</strong><span style="float:right">...</span></p>
   - floats don't vertically centre against inline text, so the pill
   landed at whatever height the float engine gave it instead of
   sitting level with the label. Flex fixes that and adds a rule
   separating the header from the card body. */
.wp-block-group.verdict-card.verdict-card > .wp-block-group__inner-container > p:first-of-type {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin: 0 0 14px 0 !important;
  padding: 0 0 14px 0 !important;
  border-bottom: 1px solid #eef0f5 !important;
}
.wp-block-group.verdict-card.verdict-card > .wp-block-group__inner-container > p:first-of-type strong {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: #4F46E5 !important;
}
.wp-block-group.verdict-card.verdict-card > .wp-block-group__inner-container > p:first-of-type span {
  float: none !important;
  display: inline-flex !important;
  align-items: center !important;
  background-color: #ECFDF5 !important;
  color: #15803D !important;
  padding: 3px 9px !important;
  border-radius: 20px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}
.wp-block-group.verdict-card.verdict-card > .wp-block-group__inner-container > p:nth-of-type(2) {
  margin-top: 0 !important;
}
/* Price line still carried the old #0066cc inline colour - reads
   as a stray link now that indigo is reserved for the CTA button;
   swap it for a confident dark price tag instead. */
.wp-block-group.verdict-card.verdict-card p[style*="color:#0066cc"],
.wp-block-group.verdict-card.verdict-card p[style*="color: #0066cc"] {
  color: #141826 !important;
  font-size: 19px !important;
  font-weight: 800 !important;
}
.wp-block-group.affiliate-disclosure.affiliate-disclosure {
  background: #f5f6fa !important;
  background-color: #f5f6fa !important;
  border-top: 1px solid #dee2ea !important;
  border-right: 1px solid #dee2ea !important;
  border-bottom: 1px solid #dee2ea !important;
  border-left: none !important;
  border-radius: 10px !important;
  padding: 14px 18px !important;
  margin-bottom: 28px !important;
}
.wp-block-group.affiliate-disclosure.affiliate-disclosure p {
  font-size: 14px !important;
  margin: 0 !important;
}

/* ---------------------------------------------------------------
   Provider review sections - each was a bare H2 + paragraphs with
   no visual container at all (found 2026-09-03 - the 5 reviews just
   ran into each other with only a heading as a divider, while every
   other section on the page had been redesigned into a bordered
   card). Turned into real cards, numbered to match the 01-05 rank
   order already used in the compact comparison table up top. */
body { counter-reset: ttv-review; }
.wp-block-group.provider-review.provider-review {
  counter-increment: ttv-review;
  position: relative !important;
  background: #ffffff !important;
  border: 1px solid #e2e5ec !important;
  border-radius: 16px !important;
  box-shadow: 0 1px 3px rgba(20, 24, 38, 0.06) !important;
  padding: 30px 32px 32px !important;
  margin: 0 0 28px 0 !important;
}
.wp-block-group.provider-review.provider-review::before {
  content: "REVIEW " counter(ttv-review, decimal-leading-zero) !important;
  display: block !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  color: #8b90a3 !important;
  margin-bottom: 10px !important;
}
.wp-block-group.provider-review.provider-review .wp-block-heading {
  margin-top: 0 !important;
}

/* ---------------------------------------------------------------
   Pros / cons boxes - flat colour blocks with a bare "Pros"/"Cons"
   label and default black bullets. Rounded to match the rest of the
   card system, label turned into a small tag, bullets swapped for
   tick/cross marks so good vs bad reads at a glance. */
.pros-box, .cons-box {
  border-radius: 12px !important;
  padding: 20px 22px !important;
}
.pros-box p:first-of-type, .cons-box p:first-of-type {
  margin: 0 0 12px 0 !important;
}
.pros-box p:first-of-type strong, .cons-box p:first-of-type strong {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}
.pros-box p:first-of-type strong { color: #15803D !important; }
.cons-box p:first-of-type strong { color: #B91C1C !important; }
.pros-box ul, .cons-box ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.pros-box li, .cons-box li {
  position: relative !important;
  padding-left: 24px !important;
  margin: 0 0 10px 0 !important;
  line-height: 1.45 !important;
}
.pros-box li:last-child, .cons-box li:last-child { margin-bottom: 0 !important; }
.pros-box li::before {
  content: "\2713" !important;
  position: absolute !important; left: 0 !important; top: 0 !important;
  color: #16A34A !important;
  font-weight: 800 !important;
}
.cons-box li::before {
  content: "\2715" !important;
  position: absolute !important; left: 0 !important; top: 0 !important;
  color: #DC2626 !important;
  font-weight: 800 !important;
}

/* ---------------------------------------------------------------
   Plain wp:table blocks (priority-pick table, pricing table,
   streaming pass/fail table) - default WordPress grid styling,
   didn't match anything else on the page. Given the same rounded-
   container / shaded-header treatment as everything else. */
figure.wp-block-table.wp-block-table {
  border: 1px solid #e2e5ec !important;
  border-radius: 12px !important;
  /* overflow:hidden removed on purpose - ANY ancestor with a non-visible
     overflow value silently breaks position:sticky on its descendants
     (the sticky element's "stuck" position is computed relative to that
     ancestor instead of the real page, and since this figure never
     itself scrolls, the header would just sit static forever - found
     while adding a sticky table header 2026-09-03). Corner rounding
     moved to the individual header/footer cells below instead, so
     nothing needs to clip. */
  box-shadow: 0 1px 2px rgba(20, 24, 38, 0.05) !important;
}
figure.wp-block-table.wp-block-table table {
  border-collapse: collapse !important;
  width: 100% !important;
}
/* Corner rounding per-cell (replaces the figure's old overflow:hidden
   clip) - border-radius on individual td/th cells works fine under
   border-collapse:collapse; it's only the <table> element's OWN
   border-radius that collapse ignores, which this doesn't rely on. */
figure.wp-block-table.wp-block-table thead th:first-child {
  border-top-left-radius: 11px !important;
}
figure.wp-block-table.wp-block-table thead th:last-child {
  border-top-right-radius: 11px !important;
}
figure.wp-block-table.wp-block-table tbody tr:last-child td:first-child {
  border-bottom-left-radius: 11px !important;
}
figure.wp-block-table.wp-block-table tbody tr:last-child td:last-child {
  border-bottom-right-radius: 11px !important;
}
/* Sticky header - only actually useful on a table tall enough that
   scrolling through its rows loses track of which column is which; a
   short 5-row table just sees no visible difference, so this is safe to
   apply everywhere rather than deciding per-table. Needs the overflow
   fix above to not be silently inert. */
figure.wp-block-table.wp-block-table th {
  background: #F5F6FA !important;
  color: #141826 !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  padding: 14px 16px !important;
  border-bottom: 2px solid #e2e5ec !important;
  border-color: #e2e5ec !important;
  text-align: left !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 3 !important;
}
figure.wp-block-table.wp-block-table td {
  padding: 13px 16px !important;
  border-bottom: 1px solid #eef0f5 !important;
  border-color: #eef0f5 !important;
  font-size: 15px !important;
  color: #2b2f3a !important;
  vertical-align: top !important;
}
figure.wp-block-table.wp-block-table tr:last-child td {
  border-bottom: none !important;
}
figure.wp-block-table.wp-block-table tbody tr:nth-child(even) td {
  background: #FAFBFD !important;
}
/* Pass/fail markers in the streaming-compatibility table */
figure.wp-block-table.wp-block-table span.pass {
  color: #15803D !important;
  font-weight: 700 !important;
}
figure.wp-block-table.wp-block-table span.variable {
  color: #B45309 !important;
  font-weight: 700 !important;
}
/* Mobile: these 3 tables have 3-6 columns of real words (provider
   names like "ExpressVPN"/"CyberGhost", multi-word headers) - at
   390px a forced 100%-width table breaks those words mid-string
   onto their own lines (checked live 2026-09-03, T111 pattern).
   Scroll sideways instead of compressing, same fix as the top
   compact table already uses. */
@media (max-width: 600px) {
  figure.wp-block-table.wp-block-table {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  figure.wp-block-table.wp-block-table table {
    width: auto !important;
    min-width: 640px !important;
  }
}

/* ---------------------------------------------------------------
   Internal/body links - real content links (e.g. "our full NordVPN
   UK review") had NO styling at all, rendering as literal unstyled
   browser-default blue (#0000EE + underline) - jarring against
   everything else on the page. .tdb_single_content is the theme's
   real article-content wrapper (confirmed 2026-09-03 from the live
   page's own markup, tagDiv/td-composer - see CLAUDE.md Theme
   section), scoped here instead of a generic `a` tag so this never
   touches header/nav/footer links. Excludes anything already
   styled as a button so CTAs are untouched. Overrides any leftover
   inline color (old #0066cc or already-fixed #4F46E5) too, so every
   content link ends up the same regardless of how it was authored. */
.tdb_single_content a:not(.wp-element-button):not(.cmp-cta):not([style*="background-color"]) {
  color: #4F46E5 !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
  text-decoration-color: rgba(79, 70, 229, 0.35) !important;
  text-underline-offset: 3px !important;
  transition: text-decoration-color 0.15s ease, color 0.15s ease !important;
}
.tdb_single_content a:not(.wp-element-button):not(.cmp-cta):not([style*="background-color"]):hover {
  color: #4338CA !important;
  text-decoration-color: #4338CA !important;
}

/* ---------------------------------------------------------------
   FAQ accordion (wp:details) - markup and showContent attribute are
   correct, but a bare <details>/<summary> carries no styling of its
   own beyond the browser's native triangle marker, so 7 questions
   rendered as 7 plain text lines with ~18px between them and no
   visual sign they're interactive (found live 2026-09-03). Given a
   real card + custom +/- indicator instead of relying on the
   browser default, which most browsers style inconsistently anyway. */
.tdb_single_content details.wp-block-details {
  border: 1px solid #e2e5ec !important;
  border-radius: 12px !important;
  padding: 16px 20px !important;
  margin: 0 0 12px 0 !important;
  background: #ffffff !important;
}
.tdb_single_content details.wp-block-details summary {
  cursor: pointer !important;
  list-style: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  font-family: 'Archivo', sans-serif !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  color: #141826 !important;
  padding: 2px 0 !important;
}
.tdb_single_content details.wp-block-details summary::-webkit-details-marker {
  display: none !important;
}
.tdb_single_content details.wp-block-details summary::after {
  content: "+" !important;
  flex-shrink: 0 !important;
  font-size: 22px !important;
  line-height: 1 !important;
  font-weight: 400 !important;
  color: #4F46E5 !important;
}
.tdb_single_content details.wp-block-details[open] summary::after {
  content: "\2212" !important;
}
.tdb_single_content details.wp-block-details summary:hover {
  color: #4F46E5 !important;
}
.tdb_single_content details.wp-block-details p {
  margin: 12px 0 0 0 !important;
  padding-top: 12px !important;
  border-top: 1px solid #eef0f5 !important;
  color: #2b2f3a !important;
  line-height: 1.6 !important;
}
#ttv-progress {
  position: fixed !important; top: 0 !important; left: 0 !important; height: 3px; width: 0%;
  background: #4F46E5; z-index: 999999 !important; transition: width 0.1s linear; margin: 0 !important;
}
#ttv-sticky-cta {
  position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; z-index: 999999 !important;
  background: #ffffff; border-top: 1px solid #e2e5ec;
  padding: 10px 16px; display: none; align-items: center; justify-content: space-between;
  gap: 12px; box-shadow: 0 -8px 24px -8px rgba(20,24,38,0.18);
  transform: translateY(100%); transition: transform 0.25s ease;
  margin: 0 !important; width: auto !important;
}
#ttv-sticky-cta.show { transform: translateY(0); }
#ttv-sticky-cta .ttv-sc-label { font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #8b90a3; }
#ttv-sticky-cta .ttv-sc-text { font-size: 13.5px; font-weight: 700; color: #141826; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 62vw; display: block; }
#ttv-sticky-cta .ttv-sc-btn {
  background: #4F46E5 !important; color: #ffffff !important; border: none; padding: 10px 16px;
  border-radius: 8px !important; font-weight: 700 !important; font-size: 13px; white-space: nowrap;
  text-decoration: none !important; flex-shrink: 0;
}
@media (max-width: 782px) {
  #ttv-sticky-cta.ttv-ready { display: flex; }
}
#ttv-jump-nav {
  display: flex; flex-wrap: wrap; gap: 8px; padding: 14px; background: #f5f6fa;
  border: 1px solid #e2e5ec; border-radius: 12px; margin: 0 0 28px 0; scroll-margin-top: 20px;
}
#ttv-jump-nav .ttv-jn-label { font-size: 12.5px; color: #6b7280; align-self: center; margin-right: 2px; font-weight: 600; }
#ttv-jump-nav a {
  background: #ffffff; border: 1px solid #e2e5ec; color: #2b2f3a !important;
  padding: 7px 14px; border-radius: 20px; font-size: 13px; font-weight: 600 !important;
  text-decoration: none !important; transition: all 0.15s ease;
}
#ttv-jump-nav a:hover, #ttv-jump-nav a:focus-visible { border-color: #4F46E5; color: #4F46E5 !important; }
.ttv-back-link {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600 !important;
  color: #4F46E5 !important; text-decoration: none !important; margin-top: 18px; padding-top: 16px;
  border-top: 1px solid #eef0f5; width: 100%;
}
.ttv-back-link:hover { color: #4338CA !important; }
.tdb_single_content a:focus-visible,
.tdb_single_content button:focus-visible,
.tdb_single_content summary:focus-visible {
  outline: 3px solid #4F46E5 !important;
  outline-offset: 2px !important;
  border-radius: 4px;
}
.tdb_single_content .wp-element-button:focus-visible {
  outline: 3px solid #141826 !important;
  outline-offset: 3px !important;
}
html { scroll-behavior: smooth; }