/*
 * Site refresh (2026-11) — the look of the new home page carried to every page of the public site.
 *
 * Loaded by header.php only while ta_site_refresh_on() is true (the Home page uses front-page-4.php, or
 * ?site_refresh=1). Every rule is scoped to body.ta-refresh, so with the switch off the site looks
 * exactly as it did. It restyles the shared building blocks the pages are made of — it does not change
 * any page's content.
 *
 *  1 tokens          6 cards                 11 FAQ, tables
 *  2 header          7 screenshots & mocks   12 CTA bands
 *  3 heroes          8 buttons               13 countries band & footer
 *  4 sections        9 flows & steps         14 WhatsApp button & phone action bar
 *  5 type scale     10 pricing               15 phones & tablets (responsive)   16 dark mode
 */

/* ── 1. Tokens ───────────────────────────────────────────────────────── */
body.ta-refresh {
  --tr-radius: 16px;
  --tr-radius-sm: 12px;
  --tr-shadow: 0 1px 2px rgba(15,23,42,.04), 0 12px 32px -14px rgba(15,32,90,.18);
  --tr-shadow-lift: 0 24px 54px -20px rgba(15,32,90,.34);
  --tr-hero: linear-gradient(135deg, #0c1a3d 0%, #1e4496 62%, #142d6b 100%);
  --tr-glow: radial-gradient(900px 440px at 8% 35%, rgba(16,185,129,.16), transparent 60%), radial-gradient(900px 440px at 92% 0%, rgba(99,140,255,.22), transparent 60%);
  --tr-go: #10b981;
  --tr-go-dark: #059669;
  --tr-frame: #e9eef6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* ── 2. Header ───────────────────────────────────────────────────────── */
body.ta-refresh .ta-navbar { background: rgba(255,255,255,.92); -webkit-backdrop-filter: saturate(170%) blur(12px); backdrop-filter: saturate(170%) blur(12px); }
body.ta-refresh .ta-navbar .btn-ta-cta { border-radius: 10px; }

@media (max-width: 991.98px) {
  /* menu button: shown only below 992px by Bootstrap; never set display here */
  body.ta-refresh .navbar-toggler { width: 42px; height: 42px; padding: 0 !important; border: 1px solid var(--ta-border) !important; border-radius: 10px; align-items: center; justify-content: center; box-shadow: none !important; }
  body.ta-refresh .navbar-toggler span { font-size: 20px !important; line-height: 1; }
  body.ta-refresh .navbar-toggler:focus { outline: none; box-shadow: none !important; }
  body.ta-refresh .navbar-toggler:focus-visible { outline: 3px solid rgba(30,68,150,.35); outline-offset: 2px; }
  body.ta-refresh .navbar-toggler[aria-expanded="true"] { background: var(--ta-primary-light); border-color: var(--ta-primary) !important; }
  body.ta-refresh #taNav { margin: 0 -12px; padding: 4px 12px 18px; border-top: 1px solid var(--ta-border); }
  body.ta-refresh #taNav.show, body.ta-refresh #taNav.collapsing { max-height: calc(100vh - 64px); max-height: calc(100dvh - 64px); overflow-y: auto; overscroll-behavior: contain; }
  body.ta-refresh #taNav .navbar-nav > .nav-item { border-bottom: 1px solid var(--ta-border); }
  body.ta-refresh #taNav .navbar-nav > .nav-item > .nav-link { font-size: 16px; font-weight: 600; color: var(--ta-heading) !important; padding: 14px 6px !important; border-left: 0 !important; min-height: 50px; }
  body.ta-refresh #taNav .navbar-nav > .nav-item > .nav-link.active { background: transparent; color: var(--ta-primary) !important; }
  body.ta-refresh #taNav .dropdown-menu { border-radius: 12px; margin: 0 0 12px; padding: 6px; background: var(--ta-surface); }
  body.ta-refresh #taNav .ta-mm-item { padding: 10px 8px; border-radius: 10px; }
  body.ta-refresh #taNav > .d-flex { flex-wrap: wrap; gap: 10px !important; padding-top: 16px; }
  body.ta-refresh #taNav > .d-flex .btn-ta-login,
  body.ta-refresh #taNav > .d-flex .btn-ta-cta { flex: 1 1 0; justify-content: center; text-align: center; min-height: 46px; display: inline-flex; align-items: center; border-radius: 10px; }
  body.ta-refresh #taNav > .d-flex .btn-ta-login { border: 1px solid var(--ta-border); }
  body.ta-refresh.ta-menu-open { overflow: hidden; }
}

/* ── 3. Heroes ───────────────────────────────────────────────────────── */
/* 3a. Module & industry pages (.ta-ind-hero): light → the home page's dark hero */
body.ta-refresh .ta-ind-hero { background: var(--tr-glow), var(--tr-hero); padding: 80px 0 72px; border-bottom: 0; position: relative; overflow: hidden; }
body.ta-refresh .ta-ind-hero h1 { color: #fff; text-wrap: balance; }
body.ta-refresh .ta-ind-hero h1 em { color: #34d399; }
body.ta-refresh .ta-ind-hero .lead { color: rgba(255,255,255,.8); }
body.ta-refresh .ta-ind-hero .kv-subTitle { color: #a7f3d0; background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); }
body.ta-refresh .ta-ind-hero .ta-ind-chips span { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); color: rgba(255,255,255,.9); }
body.ta-refresh .ta-ind-hero .ta-ind-chips i { color: #34d399; }
body.ta-refresh .ta-ind-hero .kv-act-btn { background: var(--tr-go); border-color: var(--tr-go); box-shadow: 0 10px 24px -10px rgba(16,185,129,.7); }
body.ta-refresh .ta-ind-hero .kv-act-btn:hover { background: var(--tr-go-dark); border-color: var(--tr-go-dark); }
body.ta-refresh .ta-ind-hero .btn-outline-ta { color: #fff !important; border-color: rgba(255,255,255,.38); background: rgba(255,255,255,.08); }
body.ta-refresh .ta-ind-hero .btn-outline-ta:hover { background: rgba(255,255,255,.16); }
body.ta-refresh .ta-ind-hero .ta-ind-visual,
body.ta-refresh .ta-ind-hero .ta-mock { border-color: rgba(255,255,255,.14); box-shadow: 0 30px 70px rgba(0,0,0,.45); }

/* 3b. App pages (.mod-page-hero): text carousel beside a screenshot */
body.ta-refresh .mod-page-hero { background: var(--tr-glow), var(--tr-hero); padding: 80px 0 72px; border-bottom: 0; position: relative; overflow: hidden; }
body.ta-refresh .mod-page-hero .mod-tx-carousel-title,
body.ta-refresh .mod-page-hero h1, body.ta-refresh .mod-page-hero h2 { color: #fff; text-wrap: balance; }
body.ta-refresh .mod-page-hero .mod-tx-carousel-sub { color: #a7f3d0; }
body.ta-refresh .mod-page-hero .mod-tx-carousel-desc, body.ta-refresh .mod-page-hero p { color: rgba(255,255,255,.8); }
body.ta-refresh .mod-page-hero .mod-hero-badge { color: #fff; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); font-size: 12.5px; }
body.ta-refresh .mod-page-hero .mod-tx-carousel-dots button { background: rgba(255,255,255,.3); }
body.ta-refresh .mod-page-hero .mod-tx-carousel-dots button.active { background: #34d399; }
body.ta-refresh .mod-page-hero .kv-act-btn { background: var(--tr-go); border-color: var(--tr-go); }
body.ta-refresh .mod-page-hero .kv-act-btn:hover { background: var(--tr-go-dark); border-color: var(--tr-go-dark); }
body.ta-refresh .mod-page-hero .btn-outline-ta { color: #fff !important; border-color: rgba(255,255,255,.38); background: rgba(255,255,255,.08); }
body.ta-refresh .mod-page-hero .mod-tx-hero-shot { box-shadow: 0 30px 70px rgba(0,0,0,.45); }

/* 3c. Company & plan pages (already dark): the same glow, room and label */
body.ta-refresh .page-hero, body.ta-refresh .plan-hero { background: var(--tr-glow), var(--tr-hero); padding: 84px 0 72px; }
body.ta-refresh .page-hero h1, body.ta-refresh .plan-hero h1 { font-size: clamp(32px, 4.6vw, 52px); text-wrap: balance; }
body.ta-refresh .page-hero p, body.ta-refresh .plan-hero p { font-size: 17px; line-height: 1.7; color: rgba(255,255,255,.78); }
body.ta-refresh .page-hero .kv-subTitle, body.ta-refresh .plan-hero .kv-subTitle { color: #a7f3d0; }
body.ta-refresh .plan-hero .kv-act-btn { background: var(--tr-go); border-color: var(--tr-go); }
body.ta-refresh .plan-hero .kv-act-btn:hover { background: var(--tr-go-dark); border-color: var(--tr-go-dark); }

/* ── 4. Section rhythm ───────────────────────────────────────────────── */
body.ta-refresh :is(.section, .ta-section, .ta-section-alt, .ta-ind-section, .ta-new-section, .ta-faq-section, .ta-vid-section, .mod-tx-section, .ta-extras-section) { padding-top: 80px; padding-bottom: 80px; }
body.ta-refresh .ta-highlight-strip { padding: 64px 0; }
body.ta-refresh .tx-flow-strip { padding: 44px 0; }

/* ── 5. Type scale ───────────────────────────────────────────────────── */
body.ta-refresh :is(.section-header, .ta-section-heading) h2,
body.ta-refresh .section-header-left h2 { font-size: clamp(26px, 3.4vw, 40px); font-weight: 800; letter-spacing: -.025em; line-height: 1.18; text-wrap: balance; }
body.ta-refresh :is(.section-header, .ta-section-heading) p { font-size: 16.5px; line-height: 1.7; max-width: 660px; }
body.ta-refresh .section-header { margin-bottom: 52px; }
body.ta-refresh :is(.kv-subTitle, .ta-eyebrow, .mod-tx-step, .mod-hero-badge, .rsl-eyebrow-2) { font-size: 12px; letter-spacing: .1em; }
body.ta-refresh :is(.ta-new-tag, .ta-app-tag, .ta-chip, .ta-footer-badge, .bg-feat-badge, .bg-cat-chip) { font-size: 12px; }
/* readable minimums: menu descriptions and labels, small print, About / Resellers page labels */
body.ta-refresh .ta-mm-ds { font-size: 12.5px; }
body.ta-refresh :is(.ta-mm-head, .ta-mm-feature-eyebrow) { font-size: 11.5px; }
body.ta-refresh .ta-mm-new { font-size: 10.5px; }
body.ta-refresh main small, body.ta-refresh section small { font-size: 12.5px; }
body.ta-refresh :is(.abt-bn-lbl, .timeline-year, .rsl-geo-tax, .rsl-tl-day, .rsl-profile-tag, .rsl-wl-url, .rsl-wl-tagline, .rsl-wl-tag, .rsl-hero-card-stat-label, .rsl-hero-card-bar-lbl, .rsl-tier-flag) { font-size: 12px; }
body.ta-refresh .mod-tx-content h3 { font-size: clamp(22px, 2.4vw, 28px); letter-spacing: -.02em; line-height: 1.25; }
body.ta-refresh .mod-tx-content p, body.ta-refresh .mod-tx-content ul li { font-size: 16px; }

/* ── 6. Cards: one shape, one shadow, one hover ───────────────────────── */
body.ta-refresh :is(.ta-extra-card, .plan-feature-card, .enterprise-card, .step-card, .value-card, .ta-new-card, .ta-app-card, .ta-growth-card, .ta-pain-card, .feature-list-item, .contact-info-card, .contact-form-wrap, .contact-location-card, .ta-card, .ta-card-sm, .ta-blog-card, .blog-card) {
  border-radius: var(--tr-radius); box-shadow: var(--tr-shadow); border-color: var(--ta-border); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
body.ta-refresh :is(.ta-extra-card, .plan-feature-card, .enterprise-card, .step-card, .value-card, .ta-new-card, .ta-app-card.is-link, .ta-growth-card, .feature-list-item, .ta-blog-card, .blog-card):hover { transform: translateY(-4px); box-shadow: var(--tr-shadow-lift); }
body.ta-refresh :is(.ta-extra-card, .plan-feature-card, .enterprise-card, .value-card, .ta-new-card, .ta-growth-card) { padding: 26px; }
body.ta-refresh :is(.ta-extra-card, .plan-feature-card, .enterprise-card, .step-card, .value-card) p,
body.ta-refresh .ta-flow-step2 span, body.ta-refresh .ta-app-text { font-size: 14px; line-height: 1.65; }
body.ta-refresh :is(.ta-extra-card, .plan-feature-card, .enterprise-card, .step-card, .value-card) h4 { font-size: 16px; }
body.ta-refresh :is(.ta-extra-icon, .pfc-icon, .ec-icon, .vi, .ta-app-ico, .ta-new-ico) { border-radius: 12px; }
body.ta-refresh .ta-pain-card { border-left-width: 4px; }

/* contact page: the four contact cards fill the row (auto-fill left an empty fifth column) */
body.ta-refresh .contact-info-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 991.98px) { body.ta-refresh .contact-info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 399.98px) { body.ta-refresh .contact-info-grid { grid-template-columns: minmax(0, 1fr); } }

/* ── 7. Screenshots & mock screens: framed like a browser window ─────── */
body.ta-refresh :is(.mod-tx-shot, .mod-tx-hero-shot, .ta-ind-visual) { position: relative; padding-top: 28px; background: var(--tr-frame); border: 1px solid var(--ta-border); border-radius: var(--tr-radius); }
body.ta-refresh :is(.mod-tx-shot, .mod-tx-hero-shot, .ta-ind-visual)::before {
  content: ''; position: absolute; top: 10px; left: 14px; width: 46px; height: 9px; z-index: 1; pointer-events: none;
  background: radial-gradient(circle at 4.5px 4.5px, #f87171 4px, transparent 4.6px), radial-gradient(circle at 20.5px 4.5px, #fbbf24 4px, transparent 4.6px), radial-gradient(circle at 36.5px 4.5px, #34d399 4px, transparent 4.6px);
}
body.ta-refresh .ta-ind-hero .ta-ind-visual, body.ta-refresh .mod-page-hero .mod-tx-hero-shot { border-color: rgba(255,255,255,.16); }
body.ta-refresh .mod-tx-section .mod-tx-shot { box-shadow: 0 24px 60px -18px rgba(15,32,90,.32); }
body.ta-refresh .ta-mock { border-radius: var(--tr-radius); }

/* ── 8. Buttons ──────────────────────────────────────────────────────── */
body.ta-refresh :is(.kv-act-btn, .btn-outline-ta, .btn-ta-primary, .btn-ta-accent, .btn-ta-outline, .btn-ghost-white, .btn-white-solid, .btn-plan-primary, .btn-plan-outline) { border-radius: 10px; font-size: 15px; min-height: 46px; padding: 11px 22px; justify-content: center; }
body.ta-refresh :is(.kv-act-btn, .btn-ta-primary, .btn-ta-accent):hover { transform: translateY(-1px); }
body.ta-refresh :is(.kv-act-btn, .btn-outline-ta, .btn-ta-primary, .btn-ta-accent, .btn-ta-outline, .btn-ghost-white, .btn-white-solid):focus-visible { outline: 3px solid rgba(16,185,129,.45); outline-offset: 2px; }

/* ── 9. Flows & steps ────────────────────────────────────────────────── */
body.ta-refresh .ta-flow-step2 { border-radius: 14px; box-shadow: var(--tr-shadow); }
body.ta-refresh .tx-flow-icon { border-radius: 14px; box-shadow: 0 8px 20px -10px rgba(30,68,150,.45); }
body.ta-refresh .tx-flow-label { font-size: 13px; }
body.ta-refresh .mod-tx-step { padding: 6px 14px; }

/* ── 10. Pricing ─────────────────────────────────────────────────────── */
body.ta-refresh .ta-pricing-card { border-radius: 18px; box-shadow: var(--tr-shadow); }
body.ta-refresh .ta-pricing-card.featured { box-shadow: 0 24px 60px -22px rgba(30,68,150,.5); }
body.ta-refresh .ta-pricing-card:hover { box-shadow: var(--tr-shadow-lift); }

/* ── 11. FAQ & tables ────────────────────────────────────────────────── */
body.ta-refresh .ta-faq-section .ta-accordion-item { border: 1px solid var(--ta-border); border-radius: 14px; box-shadow: 0 1px 2px rgba(15,23,42,.04); overflow: hidden; }
body.ta-refresh .ta-faq-section .ta-accordion-header { font-size: 16px; font-weight: 600; min-height: 60px; padding: 16px 20px; }
body.ta-refresh .ta-faq-section .ta-accordion-body { font-size: 15px; line-height: 1.7; padding: 4px 20px 20px; }

/* ── 12. Call-to-action bands ────────────────────────────────────────── */
body.ta-refresh :is(.mod-cta, .ta-cta-banner, .cta-section) { background: var(--tr-glow), var(--tr-hero); }
body.ta-refresh .ta-cta-banner { border-radius: 20px; box-shadow: 0 24px 60px -24px rgba(12,26,61,.6); }
body.ta-refresh .mod-cta .kv-act-btn, body.ta-refresh .ta-cta-banner .btn-ta-accent { background: var(--tr-go); border-color: var(--tr-go); }

/* ── 13. Countries band & footer ─────────────────────────────────────── */
body.ta-refresh .countries-section { background: radial-gradient(800px 300px at 50% 0%, rgba(99,140,255,.16), transparent 70%), #0b1430; padding: 64px 0; }
body.ta-refresh .country-chip { border-radius: 999px; padding: 7px 14px; font-size: 13.5px; }
body.ta-refresh .ta-footer { background: #0b1120; padding-top: 64px; }
body.ta-refresh .ta-footer-col-title { font-size: 12.5px; letter-spacing: .1em; margin-bottom: 16px; }
body.ta-refresh .ta-footer-link { font-size: 14px; line-height: 1.5; }
body.ta-refresh .ta-footer-badge { border-radius: 10px; padding: 8px 12px; }

/* ── 14. WhatsApp button & phone action bar (markup in footer.php) ───── */
.ta-wa-float { position: fixed; right: 22px; bottom: 22px; z-index: 1025; display: inline-flex; align-items: center; gap: 9px; padding: 12px 18px 12px 14px; border-radius: 999px; background: #25d366; color: #fff; font-size: 14.5px; font-weight: 600; text-decoration: none; box-shadow: 0 10px 28px -8px rgba(37,211,102,.65), 0 4px 12px rgba(15,23,42,.18); transition: transform .2s, background .2s; }
.ta-wa-float i { font-size: 24px; line-height: 1; }
.ta-wa-float:hover { background: #1ebe5b; color: #fff; transform: translateY(-2px); }
.ta-wa-float:focus-visible { outline: 3px solid rgba(37,211,102,.45); outline-offset: 3px; }
body.ta-tpl-contact-us .ta-wa-float { bottom: 92px; }   /* clear of Google's reCAPTCHA badge */
.ta-mbar { display: none; }
@media (max-width: 767.98px) {
  .ta-wa-float { display: none; }
  .ta-mbar { display: flex; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1025; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--ta-card, #fff); border-top: 1px solid var(--ta-border); box-shadow: 0 -8px 24px rgba(15,23,42,.12); transform: translateY(110%); transition: transform .25s ease; }
  .ta-mbar.show { transform: none; }
  .ta-mbar a { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 11px 6px; border-radius: 10px; font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; min-height: 46px; }
  .ta-mbar .ta-mbar-icon { flex: 0 0 46px; padding: 0; font-size: 18px; }
  .ta-mbar .ta-mbar-wa { background: #25d366; color: #fff; font-size: 22px; }
  .ta-mbar .ta-mbar-call { border: 1px solid var(--ta-border); color: var(--ta-heading); }
  .ta-mbar .ta-mbar-demo { border: 1px solid var(--ta-primary); color: var(--ta-primary); }
  .ta-mbar .ta-mbar-trial { background: #10b981; color: #fff; }
  body.ta-has-mbar { padding-bottom: 72px; }
  body.ta-menu-open .ta-mbar { transform: translateY(110%); }
}

/* ── 15. Phones & tablets ────────────────────────────────────────────── */
@media (max-width: 991.98px) {
  body.ta-refresh :is(.ta-ind-hero, .mod-page-hero) { padding: 56px 0 52px; }
  body.ta-refresh :is(.page-hero, .plan-hero) { padding: 60px 0 52px; }
  body.ta-refresh :is(.section, .ta-section, .ta-section-alt, .ta-ind-section, .ta-new-section, .ta-faq-section, .ta-vid-section, .mod-tx-section, .ta-extras-section) { padding-top: 64px; padding-bottom: 64px; }
  body.ta-refresh .section-header { margin-bottom: 36px; }
  body.ta-refresh .ta-feature-row { gap: 28px; }
  body.ta-refresh .ta-feature-row + .ta-feature-row { margin-top: 48px; }
}
@media (max-width: 575.98px) {
  body.ta-refresh :is(.ta-ind-hero, .mod-page-hero) { padding: 40px 0 40px; }
  body.ta-refresh :is(.page-hero, .plan-hero) { padding: 44px 0 40px; }
  body.ta-refresh :is(.section, .ta-section, .ta-section-alt, .ta-ind-section, .ta-new-section, .ta-faq-section, .ta-vid-section, .mod-tx-section, .ta-extras-section) { padding-top: 48px; padding-bottom: 48px; }
  body.ta-refresh .ta-highlight-strip { padding: 40px 0; }
  body.ta-refresh .section-header { margin-bottom: 26px; }
  body.ta-refresh :is(.section-header, .ta-section-heading) h2 { font-size: 26px; }
  body.ta-refresh :is(.section-header, .ta-section-heading) p { font-size: 15.5px; }
  body.ta-refresh .ta-ind-hero .lead, body.ta-refresh .page-hero p, body.ta-refresh .plan-hero p { font-size: 16px; }
  body.ta-refresh :is(.ta-ind-cta, .mod-cta-btns) { flex-direction: column; align-items: stretch; }
  body.ta-refresh :is(.ta-ind-cta, .mod-cta-btns) > a { width: 100%; justify-content: center; }
  body.ta-refresh .ta-ind-chips { gap: 6px; }
  body.ta-refresh .ta-ind-chips span { font-size: 12.5px; padding: 5px 10px; }
  body.ta-refresh .ta-feature-row + .ta-feature-row { margin-top: 36px; }
  body.ta-refresh .mod-tx-content h3 { font-size: 22px; }
  body.ta-refresh .mod-tx-content p, body.ta-refresh .mod-tx-content ul li { font-size: 15px; }

  /* Long grids of similar cards become one swipeable row: the same cards, a fraction of the scrolling */
  body.ta-refresh :is(.ta-new-grid, .ta-pain-grid, .ta-growth-grid, .ta-trust-grid, .plan-features-grid, .values-grid),
  body.ta-refresh:not(.ta-tpl-apps) .ta-app-grid {
    display: grid; grid-auto-flow: column; grid-auto-columns: 84%; grid-template-columns: none !important;
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
    gap: 12px; margin-left: -12px; margin-right: -12px; padding: 4px 12px 16px; scroll-padding-inline: 12px; scrollbar-width: none;
  }
  body.ta-refresh :is(.ta-new-grid, .ta-pain-grid, .ta-growth-grid, .ta-trust-grid, .plan-features-grid, .values-grid, .ta-app-grid) > * { scroll-snap-align: start; min-width: 0; }
  body.ta-refresh :is(.ta-new-grid, .ta-pain-grid, .ta-growth-grid, .ta-trust-grid, .plan-features-grid, .values-grid, .ta-app-grid)::-webkit-scrollbar { display: none; }
  body.ta-refresh .row:has(> [class*="col-"] > .ta-extra-card) {
    flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
    margin-left: -12px; margin-right: -12px; padding: 4px 6px 16px; scrollbar-width: none;
  }
  body.ta-refresh .row:has(> [class*="col-"] > .ta-extra-card)::-webkit-scrollbar { display: none; }
  body.ta-refresh .row:has(> [class*="col-"] > .ta-extra-card) > [class*="col-"] { flex: 0 0 84%; max-width: 84%; scroll-snap-align: center; }
  body.ta-refresh .ta-swipe-hint { display: flex; }

  /* Footer: two link columns side by side, brand block on top */
  body.ta-refresh .ta-footer { padding-top: 44px; }
}
/* "Swipe" hint under a swipeable row (added by site-refresh.js) */
.ta-swipe-hint { display: none; align-items: center; justify-content: center; gap: 6px; margin: -4px 0 0; font-size: 12.5px; color: var(--ta-muted); }
.ta-swipe-hint i { font-size: 11px; }

/* Tables that are wider than the phone scroll inside their own box */
@media (max-width: 767.98px) {
  body.ta-refresh .ta-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -12px; padding: 0 12px; }
}

@media (prefers-reduced-motion: reduce) {
  body.ta-refresh :is(.ta-extra-card, .plan-feature-card, .enterprise-card, .step-card, .value-card, .ta-new-card, .ta-app-card, .ta-growth-card, .feature-list-item):hover { transform: none; }
}

/* ── 17. Videos: one player + the list of the page's films ──────────────
   (pages/shared/videos.php ta_video_theatre; switching in site-refresh.js) */
body.ta-refresh .ta-theatre { display: grid; grid-template-columns: minmax(0, 1.85fr) minmax(300px, 1fr); background: var(--ta-card); border: 1px solid var(--ta-border); border-radius: 20px; box-shadow: var(--tr-shadow); overflow: hidden; }
body.ta-refresh .ta-theatre.is-single { grid-template-columns: minmax(0, 1fr); max-width: 920px; margin: 0 auto; }
body.ta-refresh .ta-theatre-stage { min-width: 0; scroll-margin-top: 88px; }
body.ta-refresh .ta-theatre-stage .ta-vid { border: 0; border-radius: 0; box-shadow: none; background: transparent; transform: none !important; display: block; }
body.ta-refresh .ta-theatre-stage .ta-vid[hidden] { display: none; }
body.ta-refresh .ta-theatre-stage .ta-vid-frame { border-radius: 0; }
body.ta-refresh .ta-theatre-stage .ta-vid-play img { object-position: center top; }
body.ta-refresh .ta-theatre-stage .ta-vid-play:hover img { transform: scale(1.015); }
body.ta-refresh .ta-theatre-stage .ta-vid-btn { width: 84px; height: 58px; font-size: 24px; border-radius: 16px; }
body.ta-refresh .ta-theatre-stage .ta-vid-body { padding: 20px 26px 24px; gap: 8px; }
body.ta-refresh .ta-theatre-stage .ta-vid-title { font-size: clamp(19px, 1.9vw, 24px); }
body.ta-refresh .ta-theatre-stage .ta-vid-blurb { font-size: 15.5px; }
body.ta-refresh .ta-theatre-stage .ta-vid-meta { justify-content: flex-start; gap: 16px; margin-top: 6px; }
/* our own poster (ta_video_poster_html): module screens fanned out on the brand gradient, and a "Start here" label */
body.ta-refresh .ta-vid-collage { position: absolute; inset: 0; display: block; overflow: hidden;
  background: radial-gradient(70% 90% at 15% 20%, rgba(16,185,129,.28), transparent 60%), radial-gradient(70% 90% at 90% 10%, rgba(99,140,255,.35), transparent 60%), linear-gradient(135deg, #0c1a3d 0%, #1e4496 70%, #142d6b 100%); }
body.ta-refresh .ta-vid-play .ta-vid-collage img,
body.ta-refresh .ta-tl-thumb .ta-vid-collage img { position: absolute; width: 56%; height: auto; object-fit: initial; border-radius: 3.2% / 5%; box-shadow: 0 18px 40px rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.18); transition: transform .5s ease; }
body.ta-refresh .ta-vid-collage img:nth-child(1) { left: 3%; top: 12%; transform: rotate(-6deg); }
body.ta-refresh .ta-vid-collage img:nth-child(2) { right: 3%; top: 9%; transform: rotate(5deg); }
body.ta-refresh .ta-vid-collage img:nth-child(3) { left: 22%; top: 34%; z-index: 1; transform: none; }
body.ta-refresh .ta-vid-play:hover .ta-vid-collage img:nth-child(1) { transform: rotate(-7deg) translate(-6px, -4px); }
body.ta-refresh .ta-vid-play:hover .ta-vid-collage img:nth-child(2) { transform: rotate(6deg) translate(6px, -4px); }
body.ta-refresh .ta-tl-thumb .ta-vid-collage img { box-shadow: 0 4px 10px rgba(0,0,0,.4); border-radius: 3px; }
body.ta-refresh .ta-vid-cap { position: absolute; left: 16px; top: 16px; z-index: 2; display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; background: rgba(255,255,255,.95); color: #0f172a; font: 700 12.5px/1 var(--font-body); box-shadow: 0 6px 18px rgba(0,0,0,.25); pointer-events: none; }
body.ta-refresh .ta-vid-cap i { color: #f59e0b; }
body.ta-refresh .ta-vid-frame .ta-vid-btn, body.ta-refresh .ta-vid-frame .ta-vid-dur { z-index: 2; }

/* the list column: exactly as tall as the player; the list scrolls inside it, the demo card sits at its foot */
body.ta-refresh .ta-theatre-side { position: relative; min-height: 0; border-left: 1px solid var(--ta-border); background: var(--ta-surface); }
body.ta-refresh .ta-theatre-side-in { position: absolute; inset: 0; display: flex; flex-direction: column; }
body.ta-refresh .ta-theatre-head { margin: 0; padding: 16px 18px 12px; font: 700 12px/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--ta-muted); display: flex; align-items: center; gap: 8px; }
body.ta-refresh .ta-theatre-head i { color: var(--ta-play, #ff0033); }
body.ta-refresh .ta-theatre-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 2px 10px 18px; display: flex; flex-direction: column; gap: 4px; scrollbar-width: thin;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent); }
body.ta-refresh .ta-theatre-foot { flex: 0 0 auto; padding: 12px 14px 14px; border-top: 1px solid var(--ta-border); display: flex; flex-direction: column; gap: 10px; }
body.ta-refresh .ta-theatre-cta { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--ta-card); border: 1px solid var(--ta-border); }
body.ta-refresh .ta-theatre-cta b { display: block; font: 700 14px/1.3 var(--font-head); color: var(--ta-heading); }
body.ta-refresh .ta-theatre-cta small { display: block; font-size: 12.5px; line-height: 1.4; color: var(--ta-muted); }
body.ta-refresh .ta-theatre-cta a { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 9px 13px; border-radius: 9px; background: var(--ta-primary); color: #fff; font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; }
body.ta-refresh .ta-theatre-cta a:hover { background: var(--ta-primary-dark); color: #fff; }
body.ta-refresh .ta-theatre-yt { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--ta-body); text-decoration: none; }
body.ta-refresh .ta-theatre-yt i { color: var(--ta-play, #ff0033); font-size: 17px; }
body.ta-refresh .ta-theatre-yt:hover { color: var(--ta-heading); }
body.ta-refresh .ta-tl-item { display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 8px; border: 0; border-radius: 12px; background: transparent; color: inherit; text-align: left; cursor: pointer; transition: background .15s, box-shadow .15s; }
body.ta-refresh .ta-tl-item:hover { background: var(--ta-card); }
body.ta-refresh .ta-tl-item[aria-pressed="true"] { background: var(--ta-card); box-shadow: inset 3px 0 0 var(--ta-primary), 0 1px 3px rgba(15,23,42,.08); }
body.ta-refresh .ta-tl-item:focus-visible { outline: 3px solid rgba(30,68,150,.35); outline-offset: 1px; }
body.ta-refresh .ta-tl-thumb { position: relative; flex: 0 0 128px; aspect-ratio: 16 / 9; border-radius: 9px; overflow: hidden; background: #0b1020; }
body.ta-refresh .ta-tl-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
body.ta-refresh .ta-tl-dur { position: absolute; right: 5px; bottom: 5px; padding: 3px 5px; border-radius: 4px; background: rgba(0,0,0,.8); color: #fff; font: 600 11.5px/1 var(--font-body); }
body.ta-refresh .ta-tl-txt { min-width: 0; display: flex; flex-direction: column; gap: 3px; padding-top: 1px; }
body.ta-refresh .ta-tl-txt b { font: 600 14px/1.35 var(--font-head); color: var(--ta-heading); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
body.ta-refresh .ta-tl-txt small { font-size: 12.5px; line-height: 1.45; color: var(--ta-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
body.ta-refresh .ta-tl-now { display: none; font-style: normal; font-size: 12px; font-weight: 600; color: var(--ta-primary); align-items: center; gap: 5px; }
body.ta-refresh .ta-tl-item[aria-pressed="true"] .ta-tl-now { display: inline-flex; }
body.ta-refresh .ta-tl-item[aria-pressed="true"] .ta-tl-txt small { display: none; }

/* two or three films: equal cards that fill the row */
body.ta-refresh .ta-vid-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
body.ta-refresh .ta-vid-duo.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.ta-refresh .ta-vid-duo .ta-vid { border-radius: 18px; }
body.ta-refresh .ta-vid-duo .ta-vid-body { padding: 18px 22px 22px; }
body.ta-refresh .ta-vid-duo .ta-vid-title { font-size: 18px; }
body.ta-refresh .ta-vid-duo .ta-vid-blurb { font-size: 14.5px; }
body.ta-refresh .ta-vid-duo .ta-vid-meta { justify-content: flex-start; gap: 14px; }
body.ta-refresh .ta-vid-duo .ta-vid-play img { object-position: center top; }

/* a few Shorts sit in the middle instead of against the left edge */
body.ta-refresh .ta-shorts-row { justify-content: safe center; }
body.ta-refresh .ta-shorts-head { justify-content: center; }

@media (max-width: 991.98px) {
  body.ta-refresh .ta-theatre { grid-template-columns: minmax(0, 1fr); }
  body.ta-refresh .ta-vid-duo { gap: 16px; }
  body.ta-refresh .ta-theatre-side { border-left: 0; border-top: 1px solid var(--ta-border); }
  body.ta-refresh .ta-theatre-side-in { position: static; }
  body.ta-refresh .ta-theatre-head { padding: 14px 16px 10px; }
  body.ta-refresh .ta-theatre-list { -webkit-mask-image: none; mask-image: none; }
  body.ta-refresh .ta-theatre-list { flex-direction: row; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; padding: 0 12px 14px; gap: 10px; scrollbar-width: none; }
  body.ta-refresh .ta-theatre-list::-webkit-scrollbar { display: none; }
  body.ta-refresh .ta-tl-item { flex: 0 0 220px; flex-direction: column; gap: 8px; scroll-snap-align: start; background: var(--ta-card); box-shadow: 0 1px 3px rgba(15,23,42,.08); }
  body.ta-refresh .ta-tl-thumb { flex: none; width: 100%; }
  body.ta-refresh .ta-tl-item[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--ta-primary); }
  body.ta-refresh .ta-theatre-stage .ta-vid-body { padding: 16px 18px 18px; }
}
@media (max-width: 767.98px) {
  /* phones: the cards become one swipeable row */
  body.ta-refresh .ta-vid-duo, body.ta-refresh .ta-vid-duo.cols-3 { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 86%; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; margin: 0 -12px; padding: 4px 12px 16px; scrollbar-width: none; }
  body.ta-refresh .ta-vid-duo::-webkit-scrollbar { display: none; }
  body.ta-refresh .ta-vid-duo > .ta-vid { scroll-snap-align: start; }
}
@media (max-width: 575.98px) {
  body.ta-refresh .ta-theatre { border-radius: 16px; margin-left: -4px; margin-right: -4px; }
  body.ta-refresh .ta-tl-item { flex-basis: 72%; }
  body.ta-refresh .ta-theatre-stage .ta-vid-btn { width: 64px; height: 44px; font-size: 18px; border-radius: 12px; }
  body.ta-refresh .ta-vid-cap { left: 10px; top: 10px; padding: 6px 10px; font-size: 11.5px; }
}

/* ── 16. Dark mode ───────────────────────────────────────────────────── */
html[data-theme="dark"] body.ta-refresh {
  --tr-shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px -14px rgba(0,0,0,.55);
  --tr-shadow-lift: 0 24px 54px -20px rgba(0,0,0,.7);
  --tr-hero: linear-gradient(135deg, #070f24 0%, #142f6e 62%, #0d1f4d 100%);
  --tr-frame: #16203a;
}
html[data-theme="dark"] body.ta-refresh .ta-navbar { background: rgba(11,17,32,.9); }
html[data-theme="dark"] body.ta-refresh .countries-section { background: radial-gradient(800px 300px at 50% 0%, rgba(82,116,212,.16), transparent 70%), #080e1d; }
html[data-theme="dark"] body.ta-refresh .ta-footer { background: #070b16; }
html[data-theme="dark"] .ta-mbar .ta-mbar-trial { background: #059669; }