/*
Theme Name: Poity Child
Theme URI: https://www.tevau.co/
Description: Child theme of Poity for tevau.co. Holds the custom CSS for the /faqs/ Help Center, /card/ product-page, /wallet/ page, /walletearn/ Earn-page, /finance/ page, /sign-up/ page, homepage and /about/ page revamps, their motion (counters, hero float, the homepage tabs auto-advance bar), plus a per-page full-bleed hero switch. The site-wide content grid is the live homepage box (kit 1830px, 60/30/15 gutters - see the Layout grid note below) and running text is capped at ~72ch. All parent-theme files remain untouched.
Author: tevau.co
Template: poity
Version: 1.11.3
Requires PHP: 7.4
License: GNU General Public License version 3.0
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Text Domain: poity-child
*/

/* ==========================================================================
   Revamp design system
   Eight page roots use it: .tv-help (post 908, /faqs/), .tv-card (post 3877,
   /card/), .tv-wallet (post 3884, /wallet/), .tv-earn (post 4668,
   /walletearn/), .tv-finance (post 5038, /finance/), .tv-signup (post 5471,
   /sign-up/), .tv-home (post 1405, the homepage) and .tv-about (post 366,
   /about/). Every rule is scoped to one of them so nothing leaks onto another
   page. Rules all pages share are written with
   :is(.tv-help, .tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about),
   rules a subset shares with
   :is(.tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) /
   :is(.tv-card, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) /
   :is(.tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) - same
   specificity as a single class, so the cascade is unchanged for the pages
   built earlier.
   Tokens mirror the Elementor kit + poity_set so the design stays on-brand.
   ========================================================================== */

/* ==========================================================================
   Layout grid (child theme 1.8.0, 14 Sep 2026) - documentation, no rules.
   THE STANDARD IS THE LIVE HOMEPAGE'S WIDE BOX (Honey, 14 Sep): the hero row
   of post 1405 (container 7462ca3) = boxed width 1830 px with 60 px sides
   (30 px tablet, 15 px mobile), which renders
     1366 -> 60..1306   1600 -> 60..1540   1920 -> 60..1860
     2560 -> 365..2195  375  -> 15..360
   It is NOT set in this file. It lives in two places:
     * the Elementor kit (post 3709, Site Settings -> Layout): content width
       1830 px on desktop AND tablet (the tablet default of 1024 would cap the
       box on 1072-1200 px viewports). The kit's container padding (24 px, 16
       mobile) is only the default inset of containers that set none - nested
       columns - it is NOT the page gutter.
     * the gutter, typed on every top-level section: sides 60 / 30 / 15 with
       the section's own top/bottom on each device. Elementor drops a
       dimensions control entirely when any side is empty, so all four sides
       must be typed; never a custom "boxed width".
   A boxed container's content box is then min(100% - 2 x gutter, 1830), the
   homepage hero box exactly. Heroes are FULL containers (edge-to-edge
   background) with the same gutters and a boxed .tv-hero-grid inside, so
   their content box is identical. The footer's content containers and its
   lime arc (post 97) carry the same gutters and inherit the kit width. The
   header pill (post 3478 / sticky 2167) is the theme's own: boxed width 1800,
   sides 20 (15 mobile) - byte-identical to live - which meets the homepage
   box only at 1920 (pill 20..1346 vs box 60..1306 at 1366, 380..2180 vs
   365..2195 at 2560), as it does on live.
   To build a new page on the grid: root full-width -> sections boxed, no
   width override, sides 60/30/15 -> structural grids full (side padding
   zeroed above) -> running text capped by the readability guard below. Check
   with design/build/layout-audit.py (and header-compare.py against live).
   The theme's own .wgl-container (blog single, archive, search, 404 -
   non-Elementor templates) is still the parent's fixed 1170 px.
   ========================================================================== */

.tv-help,
.tv-card,
.tv-wallet,
.tv-earn,
.tv-finance,
.tv-signup,
.tv-home,
.tv-about {
  --tv-lime: #C2F15E;
  --tv-lime-soft: #EAF9CE;
  --tv-lime-tint: #F4FCE6;
  --tv-ink: #232323;
  --tv-body: #484848;
  --tv-muted: #6E6E6E;
  --tv-line: #E4E7DF;
  --tv-card: #FFFFFF;
  --tv-radius: 16px;
  --tv-radius-lg: 22px;
  --tv-shadow: 0 2px 10px rgba(35, 35, 35, .05);
  --tv-shadow-lift: 0 10px 28px rgba(35, 35, 35, .10);
}

/* The theme page-title banner is replaced by the in-page hero on this page.
   The H1 text itself is unchanged - it moves into the hero heading widget. */
body.page-id-908 .page-header { display: none !important; }

/* The parent theme sets `#main { padding: 40px 0 }` sitewide (poity/css/main.css).
   That 40px strip of the body's #EBEBEB is deliberate elsewhere - it frames the
   floating header against the page - but on a page whose hero is a coloured band
   that has to run to the very top and sit behind the header, the grey reads as a
   gap. Pages opt out with the "Full-bleed hero" switch in Elementor's Page
   Settings (functions.php turns it into body.tv-fullbleed); the hero gets the
   40px back below 1024 so its content does not move, and above 1024 the hero is
   tall enough that shifting up 40px still clears the ~100px header comfortably.
   Set on /faqs/ (908), /card/ (3877), /wallet/ (3884), /walletearn/ (4668), /finance/ (5038), /sign-up/ (5471), the homepage (1405) and /about/ (366). */
body.tv-fullbleed #main { padding-top: 0; }

/* ---------- layout utilities (grid beats Elementor flex on specificity) --- */

/* Elementor gives every container 15px of side padding by default. Nested five
   deep (root > section > grid > column > tab content) that eats 90px of a 375px
   screen, so the structural containers give theirs up - the section containers
   below still set their own. */
:is(.tv-help, .tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about),
:is(.tv-help, .tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-grid-4,
:is(.tv-help, .tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-grid-2,
:is(.tv-help, .tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-split,
:is(.tv-help, .tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-band-grid,
:is(.tv-help, .tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-hero-grid,
.tv-help .tv-pop-col,
.tv-help .tv-group { padding-left: 0 !important; padding-right: 0 !important; }

/* These sit on "full" containers, whose children are direct descendants. */
:is(.tv-help, .tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-grid-4,
:is(.tv-help, .tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-grid-2,
:is(.tv-help, .tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-split,
:is(.tv-help, .tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-band-grid { display: grid !important; align-items: start; }

:is(.tv-help, .tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
:is(.tv-help, .tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 22px; }
:is(.tv-help, .tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-split { grid-template-columns: 268px minmax(0, 1fr); gap: 24px; }
:is(.tv-help, .tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-band-grid { grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; }

/* The hero row is a BOXED container, so Elementor wraps its children in
   .e-con-inner - the grid has to go on that wrapper, not on the outer element. */
:is(.tv-help, .tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-hero-grid > .e-con-inner {
  display: grid !important;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 32px;
  align-items: center;
}

@media (max-width: 1024px) {
  :is(.tv-help, .tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :is(.tv-help, .tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-split { grid-template-columns: minmax(0, 1fr); }
  :is(.tv-help, .tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-hero-grid > .e-con-inner { grid-template-columns: minmax(0, 1fr); }
  :is(.tv-help, .tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-hero-art { display: none; }
}

@media (max-width: 767px) {
  :is(.tv-help, .tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-grid-4,
  :is(.tv-help, .tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-grid-2,
  :is(.tv-help, .tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-band-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- hero ---------------------------------------------------------- */

:is(.tv-help, .tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-hero {
  background:
    radial-gradient(1100px 420px at 82% -10%, #E4F7C4 0%, rgba(228, 247, 196, 0) 62%),
    linear-gradient(180deg, #F2FBE4 0%, #FBFEF6 100%);
  border-radius: 0 0 var(--tv-radius-lg) var(--tv-radius-lg);
}

:is(.tv-help, .tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-eyebrow .elementor-heading-title {
  color: #5F8C18;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

:is(.tv-help, .tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-h1 .elementor-heading-title {
  font-size: 76px;
  line-height: 1.04;
  letter-spacing: -.03em;
  color: var(--tv-ink);
}

:is(.tv-help, .tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-lede { font-size: 17px; line-height: 1.62; color: var(--tv-body); max-width: 46ch; }

/* No in-hero affiliate disclosure on these pages (Honey, 11 Sep 2026): the boxed
   paragraph and then the one-line version were both removed. The disclosure lives in
   the footer and on /about/. */

/* ---------- search filter ------------------------------------------------- */

.tv-help .tv-search { max-width: 620px; }
.tv-help .tv-search__label {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--tv-ink);
  margin: 0 0 8px;
}
.tv-help .tv-search__field {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--tv-line);
  border-radius: 999px;
  padding: 7px 8px 7px 20px;
  box-shadow: var(--tv-shadow);
}
.tv-help .tv-search__field:focus-within {
  border-color: #A9DC5E;
  box-shadow: 0 0 0 4px rgba(194, 241, 94, .35);
}
.tv-help .tv-search__icon { flex: 0 0 auto; color: #8A8A8A; display: flex; }
/* The theme styles every input globally (28px bottom margin, fixed height,
   its own border and radius). Reset those inside the search pill. */
.tv-help .tv-search__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0 !important;
  outline: 0;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  font: inherit;
  font-size: 16px; /* 16px avoids the iOS zoom-on-focus jump */
  color: var(--tv-ink);
  margin: 0 !important;
  padding: 10px 0 !important;
  height: auto !important;
  line-height: 1.5;
}
.tv-help .tv-search__input::-webkit-search-cancel-button { display: none; }
.tv-help .tv-search__clear {
  flex: 0 0 auto;
  border: 0;
  border-radius: 999px;
  width: 40px;
  height: 40px;
  cursor: pointer;
  background: var(--tv-lime);
  color: var(--tv-ink);
  font-size: 18px;
  line-height: 1;
  display: none;
}
.tv-help .tv-search__clear:hover { background: #B4E84A; }
.tv-help .tv-search.is-filtering .tv-search__clear { display: block; }

.tv-help .tv-search__status {
  margin: 10px 2px 0;
  font-size: 14px;
  color: var(--tv-muted);
  min-height: 21px;
}
.tv-help .tv-search__status [hidden] { display: none !important; }

/* rows the filter has hidden */
.tv-help .tv-hidden-by-filter { display: none !important; }
/* a whole topic group with no surviving rows */
.tv-help .tv-group-empty { display: none !important; }

.tv-help mark.tv-hit { background: #E6F9BC; color: inherit; padding: 0 2px; border-radius: 3px; }

/* ---------- topic tiles --------------------------------------------------- */

.tv-help .tv-tile .elementor-widget-container { height: 100%; }
.tv-help .tv-tile .elementor-icon-box-wrapper {
  height: 100%;
  background: var(--tv-card);
  border: 1px solid var(--tv-line);
  border-radius: var(--tv-radius);
  padding: 22px 18px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.tv-help .tv-tile .elementor-icon-box-wrapper:hover {
  transform: translateY(-3px);
  box-shadow: var(--tv-shadow-lift);
  border-color: #CDE9A2;
}
/* Elementor centres a top-position icon box; the mockup left-aligns the tiles. */
.tv-help .tv-tile .elementor-icon-box-wrapper { text-align: left; }
.tv-help .tv-tile .elementor-icon-box-icon { margin-bottom: 12px; text-align: left; }
.tv-help .tv-tile .elementor-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--tv-lime-soft);
}
.tv-help .tv-tile .elementor-icon-box-title { margin: 0 0 4px; }
.tv-help .tv-tile .elementor-icon-box-title,
.tv-help .tv-tile .elementor-icon-box-title a { font-size: 16px; font-weight: 700; color: var(--tv-ink); }
.tv-help .tv-tile .elementor-icon-box-description { font-size: 13.5px; line-height: 1.5; color: var(--tv-muted); margin: 0; }

/* ---------- section headings --------------------------------------------- */

:is(.tv-help, .tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-sec-title .elementor-heading-title {
  font-size: 38px;
  line-height: 1.16;
  letter-spacing: -.03em;
  color: var(--tv-ink);
}
:is(.tv-help, .tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-sec-sub { font-size: 15.5px; color: var(--tv-muted); }
:is(.tv-help, .tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-sec-sub p { margin: 0; }

/* ---------- accordions ---------------------------------------------------- */

:is(.tv-help, .tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .elementor-accordion { border: 0; }

:is(.tv-help, .tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .elementor-accordion .elementor-accordion-item {
  background: var(--tv-card);
  border: 1px solid var(--tv-line) !important;
  border-radius: var(--tv-radius);
  margin-bottom: 10px;
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease;
}
:is(.tv-help, .tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .elementor-accordion .elementor-accordion-item:hover { border-color: #CDE9A2 !important; }

:is(.tv-help, .tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .elementor-tab-title {
  border: 0 !important;
  padding: 17px 20px;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--tv-ink);
  background: transparent;
}
:is(.tv-help, .tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .elementor-tab-title a { color: inherit; display: block; }
:is(.tv-help, .tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .elementor-tab-title.elementor-active {
  background: var(--tv-lime-tint);
  border-bottom: 1px solid var(--tv-line) !important;
}
:is(.tv-help, .tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .elementor-accordion-icon { color: #7C7C7C; width: auto; }
:is(.tv-help, .tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .elementor-tab-title.elementor-active .elementor-accordion-icon { color: var(--tv-ink); }

:is(.tv-help, .tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .elementor-tab-content {
  border: 0 !important;
  padding: 16px 20px 20px;
  font-size: 15px;
  line-height: 1.68;
  color: var(--tv-body);
  background: var(--tv-lime-tint);
}
:is(.tv-help, .tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .elementor-tab-content > :first-child { margin-top: 0; }
:is(.tv-help, .tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .elementor-tab-content > :last-child { margin-bottom: 0; }
:is(.tv-help, .tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .elementor-tab-content p { margin: 0 0 12px; }
:is(.tv-help, .tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .elementor-tab-content ul,
:is(.tv-help, .tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .elementor-tab-content ol { margin: 0 0 12px; padding-left: 20px; }
:is(.tv-help, .tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .elementor-tab-content li { margin-bottom: 6px; }
:is(.tv-help, .tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .elementor-tab-content a { color: #4F7A12; text-decoration: underline; text-underline-offset: 2px; }
:is(.tv-help, .tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .elementor-tab-content a:hover { color: var(--tv-ink); }

/* fee / limit tables inside answers */
:is(.tv-help, .tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 12px; }
:is(.tv-help, .tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-table { border-collapse: collapse; width: 100%; min-width: 460px; font-size: 14px; background: #fff; }
:is(.tv-help, .tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-table th,
:is(.tv-help, .tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-table td { border: 1px solid var(--tv-line); padding: 9px 12px; text-align: left; vertical-align: top; }
:is(.tv-help, .tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-table thead th { background: var(--tv-lime-soft); color: var(--tv-ink); font-weight: 700; }
:is(.tv-help, .tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-table tbody tr:nth-child(even) td { background: #FAFCF5; }

/* ---------- getting-started steps ---------------------------------------- */

:is(.tv-help, .tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-step {
  background: var(--tv-card);
  border: 1px solid var(--tv-line);
  border-radius: var(--tv-radius);
}
:is(.tv-help, .tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-step-num .elementor-heading-title {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--tv-lime);
  color: var(--tv-ink);
  font-size: 14px;
  font-weight: 800;
}
:is(.tv-help, .tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-step-title .elementor-heading-title { font-size: 17px; line-height: 1.3; color: var(--tv-ink); }
:is(.tv-help, .tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-step-body { font-size: 14px; line-height: 1.6; color: var(--tv-muted); }
:is(.tv-help, .tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-step-body p { margin: 0; }
:is(.tv-help, .tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-step-shot img {
  border-radius: 12px;
  border: 1px solid var(--tv-line);
  background: #F7F9F3;
}

/* ---------- topic index (the "All Help Topics" sidebar) ------------------- */

.tv-help .tv-topic-index {
  background: var(--tv-card);
  border: 1px solid var(--tv-line);
  border-radius: var(--tv-radius);
  padding: 10px;
  position: sticky;
  top: 110px;
}
.tv-help .tv-topic-index .elementor-icon-list-items { margin: 0; }
.tv-help .tv-topic-index .elementor-icon-list-item { margin-bottom: 2px; }
.tv-help .tv-topic-index .elementor-icon-list-item > a {
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--tv-body);
  transition: background .15s ease, color .15s ease;
}
.tv-help .tv-topic-index .elementor-icon-list-item > a:hover { background: var(--tv-lime-tint); color: var(--tv-ink); }
.tv-help .tv-topic-index .elementor-icon-list-icon { color: #6E9430; }

.tv-help .tv-topic-panel {
  background: var(--tv-card);
  border: 1px solid var(--tv-line);
  border-radius: var(--tv-radius);
}
.tv-help .tv-group-title .elementor-heading-title {
  font-size: 20px;
  line-height: 1.3;
  color: var(--tv-ink);
  scroll-margin-top: 120px;
}
.tv-help .tv-topic-panel .elementor-accordion .elementor-accordion-item { border-radius: 12px; }

/* ---------- help / CTA bands --------------------------------------------- */

:is(.tv-help, .tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-band-help {
  background: linear-gradient(180deg, #EFFAD9 0%, #E7F6C9 100%);
  border: 1px solid #D8EDB2;
  border-radius: var(--tv-radius-lg);
}
:is(.tv-help, .tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-band-cta {
  background:
    radial-gradient(700px 260px at 88% 0%, #E4F7C4 0%, rgba(228, 247, 196, 0) 70%),
    linear-gradient(180deg, #FBFEF6 0%, #F2FBE4 100%);
  border: 1px solid #E2EFCB;
  border-radius: var(--tv-radius-lg);
}
:is(.tv-help, .tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-band-title .elementor-heading-title { font-size: 32px; line-height: 1.18; letter-spacing: -.03em; color: var(--tv-ink); }
:is(.tv-help, .tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-band-body { font-size: 15px; color: var(--tv-body); }
:is(.tv-help, .tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-band-body p { margin: 0; }

/* buttons: keep the theme shape, force readable contrast on lime */
:is(.tv-help, .tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-btn .elementor-button {
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  padding: 15px 28px;
}
:is(.tv-help, .tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-btn-primary .elementor-button { background: var(--tv-ink); color: #fff; }
:is(.tv-help, .tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-btn-primary .elementor-button:hover { background: #000; color: #fff; }
:is(.tv-help, .tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-btn-lime .elementor-button { background: var(--tv-lime); color: var(--tv-ink); }
:is(.tv-help, .tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-btn-lime .elementor-button:hover { background: #B4E84A; color: var(--tv-ink); }
:is(.tv-help, .tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-btn-ghost .elementor-button {
  background: #fff;
  color: var(--tv-ink);
  border: 1px solid var(--tv-line);
}
:is(.tv-help, .tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-btn-ghost .elementor-button:hover { background: #F6F9F0; border-color: #CDE9A2; }

/* ---------- responsive ---------------------------------------------------- */

@media (max-width: 1200px) {
  :is(.tv-help, .tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-h1 .elementor-heading-title { font-size: 56px; }
  :is(.tv-help, .tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-sec-title .elementor-heading-title { font-size: 32px; }
  .tv-help .tv-topic-index { position: static; }
}

/* The theme header is .wgl-theme-header.header_overlap - absolutely positioned
   over the top of the content, ~95-100px tall. On desktop the hero is
   vertically centred so it clears on its own; below 1024 it does not, so the
   hero has to reserve the space itself or the eyebrow disappears under it. */
@media (max-width: 1024px) {
  /* 112 + the 40px given up by #main above, so hero content stays put */
  :is(.tv-help, .tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-hero { padding-top: 152px !important; }
}

@media (max-width: 767px) {
  /* Tighten the hero so the CTA stays above the fold on a 375x812 screen. */
  :is(.tv-help, .tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-hero { padding-top: 144px !important; padding-bottom: 28px !important; }
  :is(.tv-help, .tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-hero > .e-con-inner > .e-con,
  :is(.tv-help, .tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-hero > .e-con-inner { gap: 12px; }
  :is(.tv-help, .tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-lede { font-size: 15px; line-height: 1.5; }
  .tv-help .tv-search__label { font-size: 13px; margin-bottom: 6px; }
  :is(.tv-help, .tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-btn .elementor-button { padding: 13px 24px; }

  :is(.tv-help, .tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-h1 .elementor-heading-title { font-size: 38px; line-height: 1.1; }
  :is(.tv-help, .tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-sec-title .elementor-heading-title { font-size: 26px; }
  :is(.tv-help, .tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-band-title .elementor-heading-title { font-size: 24px; }
  :is(.tv-help, .tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-lede { font-size: 16px; max-width: none; }

  .tv-help .tv-search__field { padding: 6px 6px 6px 16px; }
  .tv-help .tv-search__clear { width: 36px; height: 36px; }

  :is(.tv-help, .tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .elementor-tab-title { padding: 15px 16px; font-size: 15px; }
  :is(.tv-help, .tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .elementor-tab-content { padding: 14px 16px 18px; }

  /* Let the fee and limit tables reflow instead of side-scrolling on a phone. */
  :is(.tv-help, .tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-table { min-width: 0; font-size: 13px; }
  :is(.tv-help, .tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-table th,
  :is(.tv-help, .tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-table td { padding: 8px 9px; }

  /* nothing on this page may push the viewport sideways */
  :is(.tv-help, .tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) img { height: auto; max-width: 100%; }
}

/* ==========================================================================
   /card/ - product page (post 3877). Root class .tv-card.
   Shares the tokens, hero, section-heading, accordion, table, step, band and
   button rules above; everything below is specific to the card page.
   ========================================================================== */

/* ---------- layout additions --------------------------------------------- */

:is(.tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-grid-3,
:is(.tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-split-2,
:is(.tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-hero-btns,
:is(.tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-eyebrow-row { padding-left: 0 !important; padding-right: 0 !important; }

:is(.tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-grid-3,
:is(.tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-split-2 { display: grid !important; align-items: start; }
:is(.tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
:is(.tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-split-2 { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px; align-items: center; }
:is(.tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-split-2.tv-split-2-rev { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }

@media (max-width: 1024px) {
  :is(.tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-split-2,
  :is(.tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-split-2.tv-split-2-rev { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  :is(.tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-split-2 > .tv-media-col { order: -1; }
}
@media (max-width: 767px) {
  :is(.tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-grid-3 { grid-template-columns: minmax(0, 1fr); }
}

/* Anchor targets ("Compare cards" jumps to the table) must clear the floating header. */
:is(.tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-sec { scroll-margin-top: 110px; }

/* ---------- hero ---------------------------------------------------------- */

.tv-card .tv-hero-card .tv-h1 .elementor-heading-title { font-size: 60px; line-height: 1.06; }

:is(.tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-hero-btns { display: flex !important; flex-direction: row !important; flex-wrap: wrap; gap: 12px; }
:is(.tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-hero-btns > .elementor-widget { width: auto; }
:is(.tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-hero-trust { font-size: 14px; font-weight: 600; color: var(--tv-ink); }
:is(.tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-hero-trust p { margin: 0; }

/* Phone artwork with the metal card tucked behind its lower-left corner. */
.tv-card .tv-hero-art { position: relative; padding-left: 0 !important; padding-right: 0 !important; }
.tv-card .tv-hero-phone { width: 66%; margin-left: auto; margin-right: 6%; }
.tv-card .tv-hero-phone img { width: 100%; height: auto; }
.tv-card .tv-hero-cardart {
  position: absolute;
  left: 0;
  bottom: 9%;
  width: 52%;
  transform: rotate(-11deg);
  filter: drop-shadow(0 18px 28px rgba(35, 35, 35, .28));
}
.tv-card .tv-hero-cardart img { width: 100%; height: auto; border-radius: 6%/9%; }

/* ---------- stats strip --------------------------------------------------- */

:is(.tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-stat {
  background: var(--tv-card);
  border: 1px solid var(--tv-line);
  border-radius: var(--tv-radius);
  padding: 16px 18px !important;
}
:is(.tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-stat-num .elementor-heading-title { font-size: 28px; line-height: 1.1; font-weight: 800; color: var(--tv-ink); letter-spacing: -.02em; }
:is(.tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-stat-label .elementor-heading-title { font-size: 13.5px; line-height: 1.4; font-weight: 600; color: var(--tv-muted); }

/* ---------- tier cards ---------------------------------------------------- */

.tv-card .tv-tier-grid { align-items: stretch; }
.tv-card .tv-tier {
  background: var(--tv-card);
  border: 1px solid var(--tv-line);
  border-radius: var(--tv-radius-lg);
  padding: 22px 20px 20px !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.tv-card .tv-tier:hover { transform: translateY(-3px); box-shadow: var(--tv-shadow-lift); border-color: #CDE9A2; }
.tv-card .tv-tier-name .elementor-heading-title { font-size: 20px; line-height: 1.25; color: var(--tv-ink); }
.tv-card .tv-tier-tag { font-size: 14px; color: var(--tv-muted); }
.tv-card .tv-tier-tag p { margin: 0; }
.tv-card .tv-tier-price .elementor-heading-title { font-size: 34px; line-height: 1; font-weight: 800; color: var(--tv-ink); letter-spacing: -.02em; }
.tv-card .tv-tier-per { font-size: 12.5px; color: var(--tv-muted); }
.tv-card .tv-tier-per p { margin: 0; }
.tv-card .tv-tier-img img { width: 100%; height: auto; border-radius: 12px; box-shadow: 0 10px 24px rgba(35, 35, 35, .16); }
.tv-card .tv-tier-img { margin: 6px 0 4px; }
.tv-card .tv-tier-perks { margin-top: 2px; }
.tv-card .tv-tier-perks .elementor-icon-list-items { margin: 0; }
.tv-card .tv-tier-perks .elementor-icon-list-item { margin-bottom: 8px; align-items: flex-start; }
.tv-card .tv-tier-perks .elementor-icon-list-icon { width: 18px; margin-top: 3px; }
.tv-card .tv-tier-perks .elementor-icon-list-icon i { color: #4F7A12; font-size: 13px; }
.tv-card .tv-tier-perks .elementor-icon-list-text { font-size: 14px; line-height: 1.45; color: var(--tv-body); padding-left: 8px; }
.tv-card .tv-tier > .elementor-widget-button { margin-top: auto; padding-top: 10px; }
.tv-card .tv-tier-gold { border-color: #E4D3A3; background: linear-gradient(180deg, #FFFDF5 0%, #FFFFFF 60%); }
.tv-card .tv-tier-metal { border-color: #D6D6D6; }

/* block buttons (tier cards) */
:is(.tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-btn-block .elementor-button-wrapper,
:is(.tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-btn-block .elementor-button { display: flex; width: 100%; justify-content: center; }

/* ---------- ways to spend ------------------------------------------------- */

:is(.tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-way {
  background: var(--tv-card);
  border: 1px solid var(--tv-line);
  border-radius: var(--tv-radius);
  padding: 20px 18px !important;
  height: 100%;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
:is(.tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-way:hover { transform: translateY(-3px); box-shadow: var(--tv-shadow-lift); border-color: #CDE9A2; }
:is(.tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-way-icon .elementor-icon-wrapper { text-align: left; }
:is(.tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-way-icon .elementor-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--tv-lime-soft);
  color: var(--tv-ink);
  font-size: 20px;
}
:is(.tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-way-icon .elementor-icon:hover { color: var(--tv-ink); }
:is(.tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-way-title .elementor-heading-title { font-size: 17px; line-height: 1.3; color: var(--tv-ink); }
:is(.tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-way-body { font-size: 14px; line-height: 1.55; color: var(--tv-muted); }
:is(.tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-way-body p { margin: 0; }
:is(.tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-way-body a { color: #4F7A12; text-decoration: underline; text-underline-offset: 2px; }

/* the three limit statements that sat under the old advantage tiles */
.tv-card .tv-facts-label .elementor-heading-title { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #5F8C18; }
.tv-card .tv-fact {
  background: var(--tv-lime-tint);
  border: 1px solid #E2EFCB;
  border-radius: 14px;
  padding: 16px 18px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--tv-body);
}
.tv-card .tv-fact p { margin: 0; }
.tv-card .tv-fact strong { color: var(--tv-ink); }

/* merchant chips */
:is(.tv-card, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-sub-title .elementor-heading-title { font-size: 26px; line-height: 1.2; letter-spacing: -.02em; color: var(--tv-ink); }
:is(.tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-chips .elementor-icon-list-items { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
:is(.tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-chips .elementor-icon-list-item {
  margin: 0;
  padding: 7px 14px;
  border: 1px solid var(--tv-line);
  border-radius: 999px;
  background: #fff;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--tv-ink);
}
:is(.tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-chips .elementor-icon-list-item:after { display: none; }
:is(.tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-chips .elementor-icon-list-icon { display: none; }
:is(.tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-chips .elementor-icon-list-text { padding: 0; }

/* ---------- virtual / controls split sections ----------------------------- */

:is(.tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-eyebrow-row { display: flex !important; flex-direction: row !important; flex-wrap: wrap; align-items: center; gap: 10px; }
:is(.tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-eyebrow-row > .elementor-widget { width: auto; }
:is(.tv-card, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-pill .elementor-heading-title {
  display: inline-block;
  background: var(--tv-lime);
  color: var(--tv-ink);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}
:is(.tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-h3 .elementor-heading-title { font-size: 18px; line-height: 1.3; color: var(--tv-ink); }
:is(.tv-card, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-list .elementor-icon-list-items { margin: 0; }
:is(.tv-card, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-list .elementor-icon-list-item { margin-bottom: 8px; align-items: flex-start; }
:is(.tv-card, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-list .elementor-icon-list-icon { width: 18px; margin-top: 4px; }
:is(.tv-card, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-list .elementor-icon-list-icon i { color: #4F7A12; font-size: 13px; }
:is(.tv-card, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-list .elementor-icon-list-text { font-size: 15px; line-height: 1.5; color: var(--tv-body); padding-left: 8px; }
:is(.tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-media img { width: 100%; height: auto; border-radius: var(--tv-radius-lg); }
:is(.tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-media-shadow img { box-shadow: var(--tv-shadow-lift); }

.tv-card .tv-control {
  background: var(--tv-card);
  border: 1px solid var(--tv-line);
  border-radius: 14px;
  padding: 16px 16px 14px !important;
  height: 100%;
}
.tv-card .tv-control-title .elementor-heading-title { font-size: 15.5px; line-height: 1.3; color: var(--tv-ink); }
.tv-card .tv-control-body { font-size: 14px; line-height: 1.5; color: var(--tv-muted); }
.tv-card .tv-control-body p { margin: 0; }

.tv-card .tv-note {
  background: var(--tv-lime-tint);
  border: 1px solid #E2EFCB;
  border-radius: 14px;
  padding: 14px 16px !important;
}
.tv-card .tv-note-title .elementor-heading-title { font-size: 15px; color: var(--tv-ink); }
.tv-card .tv-note-body { font-size: 14px; line-height: 1.5; color: var(--tv-body); }
.tv-card .tv-note-body p { margin: 0; }

/* ---------- Apple Pay / Google Pay band ----------------------------------- */

.tv-card .tv-band-apple {
  background:
    radial-gradient(700px 260px at 90% 100%, #E4F7C4 0%, rgba(228, 247, 196, 0) 70%),
    linear-gradient(180deg, #F2FBE4 0%, #EAF9CE 100%);
  border: 1px solid #D8EDB2;
  border-radius: var(--tv-radius-lg);
}
.tv-card .tv-band-apple .tv-media img { border-radius: 16px; }

/* ---------- fee / limit / comparison tables (html widgets) ---------------- */

:is(.tv-card, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-tables { font-size: 15px; line-height: 1.6; color: var(--tv-body); }
:is(.tv-card, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-tables .tv-h3 { font-size: 22px; line-height: 1.25; letter-spacing: -.02em; color: var(--tv-ink); margin: 28px 0 10px; }
:is(.tv-card, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-tables p { margin: 0 0 12px; }
:is(.tv-card, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-tables a { color: #4F7A12; text-decoration: underline; text-underline-offset: 2px; }
:is(.tv-card, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-tables a:hover { color: var(--tv-ink); }
:is(.tv-card, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-tables .tv-fn { font-size: 13px; line-height: 1.5; color: var(--tv-muted); margin: 8px 0 0; }
:is(.tv-card, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-tables ul { margin: 0 0 12px; padding-left: 20px; }
:is(.tv-card, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-tables li { margin-bottom: 6px; }

/* the wide tables keep their columns and scroll inside their wrapper on phones,
   which keeps the page itself from ever scrolling sideways */
:is(.tv-card, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-table-wrap { margin: 0; }
:is(.tv-card, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-table.tv-table-wide { min-width: 640px; }
:is(.tv-card, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-table.tv-table-compare { min-width: 760px; }
:is(.tv-card, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-table th,
:is(.tv-card, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-table td { padding: 11px 14px; text-align: center; }
:is(.tv-card, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-table th:first-child,
:is(.tv-card, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-table td:first-child { text-align: left; font-weight: 600; color: var(--tv-ink); }
:is(.tv-card, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-table thead th { text-align: center; }
:is(.tv-card, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-table thead th:first-child { text-align: left; }
:is(.tv-card, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-table thead .tv-bin th { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #5F8C18; background: #F4FCE6; }
:is(.tv-card, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-table small { display: block; font-size: 12px; color: var(--tv-muted); font-weight: 400; }
:is(.tv-card, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-table .tv-yes { color: #3D6A0A; font-weight: 700; }
:is(.tv-card, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-table .tv-yes:before { content: "\2713"; display: inline-block; margin-right: 6px; }
:is(.tv-card, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-table .tv-no { color: #A5A5A5; }
:is(.tv-card, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-table .tv-cta-row td { background: #FAFCF5; padding-top: 14px; padding-bottom: 14px; }
:is(.tv-card, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-tbtn {
  display: inline-block;
  border-radius: 999px;
  background: var(--tv-ink);
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 700;
  font-size: 13.5px;
  padding: 10px 18px;
  white-space: nowrap;
}
:is(.tv-card, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-tbtn:hover { background: #000; color: #fff; }

.tv-card .tv-callout {
  margin: 16px 0 0;
  padding: 14px 18px;
  background: var(--tv-lime-tint);
  border: 1px solid #E2EFCB;
  border-radius: 14px;
}
.tv-card .tv-callout p { margin: 0; }
.tv-card .tv-callout strong { color: var(--tv-ink); }

.tv-card .tv-aside {
  margin-top: 20px;
  padding: 18px 20px;
  background: var(--tv-card);
  border: 1px solid var(--tv-line);
  border-radius: var(--tv-radius);
}
.tv-card .tv-aside .tv-h3 { margin-top: 0; font-size: 18px; }
.tv-card .tv-aside > :last-child { margin-bottom: 0; }

/* ---------- FAQ ----------------------------------------------------------- */

:is(.tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-faq-intro { font-size: 15px; color: var(--tv-muted); }
:is(.tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-faq-intro p { margin: 0; }
:is(.tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-faq-more { margin-top: 6px; }

/* ---------- responsive ---------------------------------------------------- */

@media (max-width: 1200px) {
  .tv-card .tv-hero-card .tv-h1 .elementor-heading-title { font-size: 48px; }
  .tv-card .tv-tier-price .elementor-heading-title { font-size: 30px; }
}

@media (max-width: 767px) {
  .tv-card .tv-hero-card .tv-h1 .elementor-heading-title { font-size: 34px; line-height: 1.1; }
  :is(.tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-hero-btns { gap: 10px; }
  :is(.tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-hero-trust { font-size: 13px; }
  :is(.tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-stat { padding: 14px 16px !important; }
  :is(.tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-stat-num .elementor-heading-title { font-size: 24px; }
  :is(.tv-card, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-sub-title .elementor-heading-title { font-size: 22px; }
  :is(.tv-card, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-tables { font-size: 14px; }
  :is(.tv-card, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-tables .tv-h3 { font-size: 19px; }
  :is(.tv-card, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-table.tv-table-wide,
  :is(.tv-card, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-table.tv-table-compare { font-size: 13px; }
  :is(.tv-card, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-table th,
  :is(.tv-card, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-table td { padding: 9px 10px; }
}

/* ---------- header clearance, art sizing, small overrides ----------------- */

/* Above 1024 the hero grid is vertically centred and the copy column is the taller
   one, so it has to reserve the header height itself (below 1024 the shared hero
   rules already do this). */
@media (min-width: 1025px) {
  .tv-card .tv-hero-card { padding-top: 150px !important; padding-bottom: 64px !important; }
}
.tv-card .tv-hero-phone { width: 80%; margin-right: 0; }
.tv-card .tv-hero-cardart { width: 50%; bottom: 6%; left: -2%; }

:is(.tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-way-icon .elementor-icon,
:is(.tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-way-icon .elementor-icon i,
:is(.tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-way-icon .elementor-icon svg { color: #3D6A0A; fill: #3D6A0A; }

.tv-card .tv-control-kicker .elementor-heading-title { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #5F8C18; }

:is(.tv-card, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-table-wrap { margin-bottom: 14px; }
:is(.tv-card, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-table.tv-table-perks { min-width: 0; }

/* the open answer's title reads as ink, not lime, on this page */
:is(.tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .elementor-tab-title.elementor-active,
:is(.tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .elementor-tab-title.elementor-active a { color: var(--tv-ink); }

:is(.tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-media-phone img { border-radius: 0; box-shadow: none; }
:is(.tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-media-phone { max-width: 420px; margin: 0 auto; }

@media (max-width: 767px) {
  :is(.tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tv-card .tv-hero-card .tv-h1 .elementor-heading-title { font-size: 31px; }
  :is(.tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-media-phone { max-width: 300px; }
}

/* ==========================================================================
   /wallet/ - wallet page (post 3884). Root class .tv-wallet.
   Shares the tokens, hero, section-heading, accordion, table, step, band and
   button rules with both other pages, and the layout utilities, hero buttons,
   stats strip, icon tiles, chips, media and FAQ-intro rules with /card/
   (scoped :is(.tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) above). Everything below is wallet-only.
   ========================================================================== */

/* ---------- hero ---------------------------------------------------------- */

/* Above 1024 the hero grid is vertically centred and the phone is the taller
   column, so the hero reserves the header height itself (below 1024 the shared
   hero rules already do this). */
@media (min-width: 1025px) {
  .tv-wallet .tv-hero-wallet { padding-top: 150px !important; padding-bottom: 64px !important; }
}
.tv-wallet .tv-hero-wallet .tv-h1 .elementor-heading-title { font-size: 66px; line-height: 1.06; }
/* "Spend Anywhere" was already the lime line of the old double heading; kept, but
   dark enough to pass 3:1 on the pale hero (#C2F15E itself is 1.2:1). */
.tv-wallet .tv-h1 .tv-accent { color: #5F9E17; }

/* Phone artwork (5429, the wallet home screen) with two real app records -
   "Deposit +1000 USDT" and "Top up the Card -1000 USDT" - floating over its edges. */
.tv-wallet .tv-hero-art { position: relative; padding-left: 0 !important; padding-right: 0 !important; }
.tv-wallet .tv-hero-phone { width: 56%; margin: 0 auto; }
.tv-wallet .tv-hero-phone img { width: 100%; height: auto; filter: drop-shadow(0 26px 40px rgba(35, 35, 35, .22)); }
.tv-wallet .tv-hero-chip { position: absolute; width: 58%; max-width: 310px; }
.tv-wallet .tv-hero-chip img { width: 100%; height: auto; border-radius: 12px; filter: drop-shadow(0 10px 22px rgba(35, 35, 35, .12)); }
.tv-wallet .tv-hero-chip-1 { left: 0; top: 17%; transform: rotate(-4deg); }
.tv-wallet .tv-hero-chip-2 { right: 0; bottom: 15%; transform: rotate(3deg); }

/* the ghost button's play icon: the theme paints button SVGs white */
.tv-wallet .tv-btn-ghost .elementor-button-icon svg { fill: currentColor; width: 12px; height: 12px; }
.tv-wallet .tv-btn-ghost .elementor-button-icon { display: inline-flex; align-items: center; }

/* ---------- section intros / feature tiles ------------------------------- */

.tv-wallet .tv-sec-intro { font-size: 15.5px; line-height: 1.62; color: var(--tv-body); max-width: 78ch; }
.tv-wallet .tv-sec-intro p { margin: 0; }
.tv-wallet .tv-feature-grid,
.tv-wallet .tv-ways-grid,
.tv-wallet .tv-people-grid { margin-top: 8px; }
.tv-wallet .tv-sec-close { margin-top: 6px; }
.tv-wallet .tv-way-body strong { color: var(--tv-ink); }

/* ---------- the wallet -> card -> everyday band --------------------------- */

.tv-wallet .tv-band-flow {
  background: linear-gradient(180deg, #F7FCEF 0%, #EFF9DF 100%);
  border: 1px solid #DDEFC0;
  border-radius: var(--tv-radius-lg);
}
.tv-wallet .tv-flow-grid {
  display: grid !important;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 32px;
  align-items: center;
}
.tv-wallet .tv-band-flow .tv-sec-title .elementor-heading-title { font-size: 34px; }
.tv-wallet .tv-tagline .elementor-heading-title { font-size: 20px; line-height: 1.3; font-weight: 600; color: #4F7A12; }
.tv-wallet .tv-flow-cards { gap: 22px; align-items: stretch; }
.tv-wallet .tv-flow-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--tv-line);
  border-radius: var(--tv-radius);
  padding: 16px 14px 14px !important;
  text-align: center;
}
/* the arrow between the cards lives in the grid gap */
.tv-wallet .tv-flow-card + .tv-flow-card::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid #4F7A12;
  border-bottom: 2px solid #4F7A12;
  transform: translate(0, -50%) rotate(-45deg);
}
.tv-wallet .tv-flow-title .elementor-heading-title { font-size: 16px; line-height: 1.3; color: var(--tv-ink); }
.tv-wallet .tv-flow-sub .elementor-heading-title { font-size: 12.5px; line-height: 1.4; font-weight: 500; color: var(--tv-muted); }
.tv-wallet .tv-flow-img { margin-top: 6px; }
.tv-wallet .tv-flow-img .elementor-widget-container,
.tv-wallet .tv-flow-img .elementor-widget-container > a { display: flex; align-items: center; justify-content: center; height: 200px; width: 100%; }
.tv-wallet .tv-flow-img img { max-width: 100%; height: auto; }
.tv-wallet .tv-flow-img-phone img { height: 200px; width: auto; }
.tv-wallet .tv-flow-img-card img { width: 86%; border-radius: 10px; box-shadow: 0 10px 24px rgba(35, 35, 35, .16); }
.tv-wallet .tv-flow-img-photo img { width: 100%; height: 200px; object-fit: cover; border-radius: 12px; }

/* ---------- security ------------------------------------------------------ */

/* Elementor's own `.e-con > .elementor-widget { max-width: 100% }` outranks the shared
   .tv-media-phone cap, so the phone is sized on the image itself. */
.tv-wallet .tv-security .tv-media-phone img { display: block; width: 100%; max-width: 340px; height: auto; margin: 0 auto; }
.tv-wallet .tv-security-grid { gap: 12px; }
.tv-wallet .tv-security-grid .tv-way { padding: 16px 16px 14px !important; }
.tv-wallet .tv-security-grid .tv-way-title .elementor-heading-title { font-size: 15.5px; }
.tv-wallet .tv-security-grid .tv-way-icon .elementor-icon { width: 40px; height: 40px; border-radius: 12px; font-size: 17px; }
.tv-wallet .tv-trust-chips { margin-top: 2px; }
.tv-wallet .tv-trust-chips .elementor-icon-list-icon { display: inline-flex; width: auto; margin-right: 7px; }
.tv-wallet .tv-trust-chips .elementor-icon-list-icon i { color: #4F7A12; font-size: 13px; }
.tv-wallet .tv-trust-chips .elementor-icon-list-item { background: var(--tv-lime-tint); border-color: #E2EFCB; }

/* ---------- lifestyle tiles ---------------------------------------------- */

.tv-wallet .tv-person {
  background: var(--tv-card);
  border: 1px solid var(--tv-line);
  border-radius: var(--tv-radius);
  padding: 0 0 16px !important;
  overflow: hidden;
  height: 100%;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.tv-wallet .tv-person:hover { transform: translateY(-3px); box-shadow: var(--tv-shadow-lift); border-color: #CDE9A2; }
.tv-wallet .tv-person-img img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.tv-wallet .tv-person-title,
.tv-wallet .tv-person-body { padding-left: 16px; padding-right: 16px; }
.tv-wallet .tv-person-title { margin-top: 6px; }
.tv-wallet .tv-person-title .elementor-heading-title { font-size: 16px; line-height: 1.3; color: var(--tv-ink); }
.tv-wallet .tv-person-body { font-size: 13.5px; line-height: 1.5; color: var(--tv-muted); }
.tv-wallet .tv-person-body p { margin: 0; }

/* ---------- CTA band with two stacked, equal-width buttons ---------------- */

:is(.tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-band-btns { padding: 0 !important; display: flex !important; flex-direction: column !important; gap: 10px; }
:is(.tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-band-body a,
.tv-wallet .tv-sec-sub a { color: #4F7A12; text-decoration: underline; text-underline-offset: 2px; }
:is(.tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-band-body a:hover,
.tv-wallet .tv-sec-sub a:hover { color: var(--tv-ink); }

/* ---------- responsive ---------------------------------------------------- */

@media (max-width: 1200px) {
  .tv-wallet .tv-hero-wallet .tv-h1 .elementor-heading-title { font-size: 52px; }
}

@media (max-width: 1024px) {
  .tv-wallet .tv-flow-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}

@media (max-width: 767px) {
  .tv-wallet .tv-hero-wallet .tv-h1 .elementor-heading-title { font-size: 34px; line-height: 1.1; }
  .tv-wallet .tv-flow-card + .tv-flow-card::before { left: 50%; top: -17px; transform: translate(-50%, 0) rotate(45deg); }
  .tv-wallet .tv-flow-img .elementor-widget-container,
  .tv-wallet .tv-flow-img .elementor-widget-container > a { height: 180px; }
  .tv-wallet .tv-flow-img-phone img { height: 180px; }
  .tv-wallet .tv-flow-img-photo img { height: 180px; }
  .tv-wallet .tv-band-flow .tv-sec-title .elementor-heading-title { font-size: 26px; }
  .tv-wallet .tv-tagline .elementor-heading-title { font-size: 17px; }
  .tv-wallet .tv-security .tv-media-phone img { max-width: 280px; }
  .tv-wallet .tv-security-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   /walletearn/ - Earn page (post 4668). Root class .tv-earn.
   Shares the tokens, hero, section-heading, accordion, table, step, band and
   button rules with the other three pages, the layout utilities, hero buttons,
   stats strip, icon tiles, chips, media and FAQ-intro rules with /card/ and
   /wallet/ (scoped :is(.tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) above), the check-list
   and comparison-table rules with /card/ (:is(.tv-card, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about)) and the
   stacked band buttons with /wallet/ (:is(.tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about)). Everything
   below is earn-only.
   ========================================================================== */

/* ---------- hero ---------------------------------------------------------- */

/* Above 1024 the hero grid is vertically centred and the phone is the taller
   column, so the hero reserves the header height itself (below 1024 the shared
   hero rules already do this). */
@media (min-width: 1025px) {
  .tv-earn .tv-hero-earn { padding-top: 150px !important; padding-bottom: 64px !important; }
}
/* The H1 is the old page's H1 string, unchanged ("Turn your unused crypto into
   hourly earnings") - long enough that it sits one step below the other heroes. */
.tv-earn .tv-hero-earn .tv-h1 .elementor-heading-title { font-size: 58px; line-height: 1.06; }

/* Phone artwork: 4731 is a raw screenshot of the app's Earn tab (no device frame in
   the file - it is the homepage's image), so the frame is drawn here. 5709, the
   "Conservative Growth" card cut from the old hero's Redeem screen, floats over
   its lower-left corner exactly as the old image-layers widget stacked it. */
.tv-earn .tv-hero-art { position: relative; padding-left: 0 !important; padding-right: 0 !important; }
.tv-earn .tv-hero-phone { width: 54%; margin: 0 auto 0 6%; }
.tv-earn .tv-hero-phone img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 34px;
  border: 9px solid #1C1C1C;
  background: #1C1C1C;
  box-shadow: 0 26px 40px rgba(35, 35, 35, .22);
}
.tv-earn .tv-hero-chip { position: absolute; right: 0; bottom: 14%; width: 50%; max-width: 280px; transform: rotate(3deg); }
.tv-earn .tv-hero-chip img { width: 100%; height: auto; border-radius: 14px; filter: drop-shadow(0 12px 24px rgba(35, 35, 35, .16)); }

/* the ghost button's arrow icon: the theme paints button SVGs white */
.tv-earn .tv-btn-ghost .elementor-button-icon svg { fill: currentColor; width: 12px; height: 12px; }
.tv-earn .tv-btn-ghost .elementor-button-icon { display: inline-flex; align-items: center; }

/* ---------- facts strip --------------------------------------------------- */

/* the "*" on the first tile points here */
.tv-earn .tv-stat-note { font-size: 12.5px; line-height: 1.5; color: var(--tv-muted); margin-top: 2px; }
.tv-earn .tv-stat-note p { margin: 0; }

/* ---------- key features (check-list + product screen) -------------------- */

.tv-earn .tv-features .tv-list { margin-top: 4px; }
.tv-earn .tv-features .tv-list .elementor-icon-list-text { font-size: 16px; }
/* Elementor's own `.e-con > .elementor-widget { max-width: 100% }` outranks the shared
   .tv-media-phone cap, so the phone is sized on the image itself. */
.tv-earn .tv-features .tv-media-phone img { display: block; width: 100%; max-width: 300px; height: auto; margin: 0 auto; }

/* ---------- how it works (3 steps with the app screens) ------------------- */

.tv-earn .tv-how-grid { margin-top: 8px; align-items: stretch; }
.tv-earn .tv-step { overflow: hidden; }
.tv-earn .tv-step-kicker .elementor-heading-title { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #5F8C18; }
/* Each step shows the top of its app screen in a fixed-height window, like the
   mockup's cropped phones; the rest of the screenshot is clipped, not squashed. */
.tv-earn .tv-step-shot { margin-top: auto; padding-top: 6px; }
.tv-earn .tv-step-shot .elementor-widget-container {
  height: 210px;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid #E2EFCB;
  background: linear-gradient(180deg, #F4FCE6 0%, #EAF9CE 100%);
  padding: 18px 0 0;
}
.tv-earn .tv-step-shot img {
  display: block;
  width: 64%;
  max-width: 230px;
  height: auto;
  margin: 0 auto;
  border: 0;
  border-radius: 26px 26px 0 0;
  background: transparent;
  box-shadow: 0 10px 24px rgba(35, 35, 35, .14);
}
/* 4643 is a raw screenshot (no device frame in the file) - give it one */
.tv-earn .tv-step-shot-raw img { border: 7px solid #1C1C1C; border-bottom: 0; background: #1C1C1C; }

/* ---------- rewards estimator --------------------------------------------- */

.tv-earn .tv-band-est {
  background: linear-gradient(180deg, #F7FCEF 0%, #EFF9DF 100%);
  border: 1px solid #DDEFC0;
  border-radius: var(--tv-radius-lg);
}
.tv-earn .tv-est-grid {
  display: grid !important;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 28px;
  align-items: center;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.tv-earn .tv-band-est .tv-sec-title .elementor-heading-title { font-size: 34px; }

/* The widget: an Elementor HTML widget whose labels are real DOM text; only the
   number inside [data-tv-result] is written by earn-estimator.js. */
.tv-earn .tv-est { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 14px; align-items: stretch; }
.tv-earn .tv-est__form,
.tv-earn .tv-est__result {
  background: #fff;
  border: 1px solid var(--tv-line);
  border-radius: var(--tv-radius);
  padding: 18px 18px 16px;
  box-shadow: var(--tv-shadow);
}
.tv-earn .tv-est__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tv-earn .tv-est__label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--tv-ink);
  margin: 0 0 6px;
  padding: 0;
}
.tv-earn .tv-est__control {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--tv-line);
  border-radius: 12px;
  padding: 0 12px;
}
.tv-earn .tv-est__control:focus-within { border-color: #A9DC5E; box-shadow: 0 0 0 4px rgba(194, 241, 94, .35); }
/* The theme styles every input globally (28px bottom margin, fixed height, its own
   border and radius) - reset those inside the estimator. */
.tv-earn .tv-est__input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  border: 0 !important;
  outline: 0;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  font: inherit;
  font-size: 16px; /* 16px avoids the iOS zoom-on-focus jump */
  font-weight: 700;
  color: var(--tv-ink);
  margin: 0 !important;
  padding: 12px 0 !important;
  height: auto !important;
  line-height: 1.4;
  -moz-appearance: textfield;
  appearance: textfield;
}
.tv-earn .tv-est__input::-webkit-outer-spin-button,
.tv-earn .tv-est__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tv-earn .tv-est__unit { flex: 0 0 auto; font-size: 13px; font-weight: 600; color: var(--tv-muted); }
.tv-earn .tv-est__hint { font-size: 12.5px; line-height: 1.45; color: var(--tv-muted); margin: 10px 0 0; }
.tv-earn .tv-est__period { border: 0; margin: 14px 0 0; padding: 0; min-width: 0; }
.tv-earn .tv-est__period legend { padding: 0; }
.tv-earn .tv-est__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tv-earn .tv-est__chip { position: relative; margin: 0; cursor: pointer; }
.tv-earn .tv-est__chip input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}
.tv-earn .tv-est__chip span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px; /* touch target */
  padding: 0 18px;
  border: 1px solid var(--tv-line);
  border-radius: 999px;
  background: #fff;
  font-size: 14px;
  font-weight: 600;
  color: var(--tv-ink);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.tv-earn .tv-est__chip:hover span { border-color: #CDE9A2; background: #F6F9F0; }
.tv-earn .tv-est__chip input:checked + span { background: var(--tv-ink); color: #fff; border-color: var(--tv-ink); }
.tv-earn .tv-est__chip input:focus-visible + span { box-shadow: 0 0 0 4px rgba(194, 241, 94, .5); }

.tv-earn .tv-est__result { display: flex; flex-direction: column; justify-content: center; }
.tv-earn .tv-est__result-label { font-size: 13px; font-weight: 600; color: var(--tv-muted); margin: 0 0 4px; }
.tv-earn .tv-est__result-value { font-size: 34px; line-height: 1.1; font-weight: 800; letter-spacing: -.02em; color: #3D6A0A; }
.tv-earn .tv-est__cur { font-size: 20px; font-weight: 700; }
.tv-earn .tv-est--invalid .tv-est__result-value { color: var(--tv-muted); }
.tv-earn .tv-est__formula { font-size: 13px; line-height: 1.5; color: var(--tv-body); margin: 10px 0 0; }
.tv-earn .tv-est__note { font-size: 12.5px; line-height: 1.5; color: var(--tv-muted); margin: 6px 0 0; }

/* ---------- comparison table + before-you-subscribe tiles ----------------- */

.tv-earn .tv-compare-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 36px;
  align-items: start;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.tv-earn .tv-compare-grid > .e-con { padding-left: 0 !important; padding-right: 0 !important; }
.tv-earn .tv-tables { margin-top: 4px; }
/* three short columns - the table reflows on a phone instead of side-scrolling */
.tv-earn .tv-table.tv-table-vs { min-width: 0; }
.tv-earn .tv-table.tv-table-vs thead th:last-child { background: var(--tv-lime); }
.tv-earn .tv-risk-grid { gap: 12px; margin-top: 4px; }
.tv-earn .tv-risk-grid .tv-way { padding: 16px 16px 14px !important; }
.tv-earn .tv-risk-grid .tv-way-title .elementor-heading-title { font-size: 15.5px; }
.tv-earn .tv-risk-grid .tv-way-icon .elementor-icon { width: 40px; height: 40px; border-radius: 12px; font-size: 17px; }
.tv-earn .tv-risk-grid .tv-way-body { font-size: 13.5px; }

/* ---------- FAQ intro link ------------------------------------------------ */

.tv-earn .tv-faq-intro a,
.tv-earn .tv-sec-sub a { color: #4F7A12; text-decoration: underline; text-underline-offset: 2px; }
.tv-earn .tv-faq-intro a:hover,
.tv-earn .tv-sec-sub a:hover { color: var(--tv-ink); }

/* ---------- responsive ---------------------------------------------------- */

@media (max-width: 1200px) {
  .tv-earn .tv-hero-earn .tv-h1 .elementor-heading-title { font-size: 48px; }
}

@media (max-width: 1024px) {
  .tv-earn .tv-est-grid,
  .tv-earn .tv-compare-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}

@media (max-width: 767px) {
  .tv-earn .tv-hero-earn .tv-h1 .elementor-heading-title { font-size: 32px; line-height: 1.1; }
  /* "Up to 4.49%" has to stay on one line in the 2 x 2 strip */
  .tv-earn .tv-stat-num .elementor-heading-title { font-size: 21px; white-space: nowrap; }
  .tv-earn .tv-features .tv-media-phone img { max-width: 260px; }
  .tv-earn .tv-step-shot .elementor-widget-container { height: 180px; }
  .tv-earn .tv-band-est .tv-sec-title .elementor-heading-title { font-size: 26px; }
  .tv-earn .tv-est,
  .tv-earn .tv-est__fields { grid-template-columns: minmax(0, 1fr); }
  .tv-earn .tv-est__form,
  .tv-earn .tv-est__result { padding: 16px 14px 14px; }
  .tv-earn .tv-est__result-value { font-size: 30px; }
  .tv-earn .tv-risk-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   /finance/ - Finance page (post 5038). Root class .tv-finance.
   Shares the tokens, hero, section-heading, accordion, table, step, band and
   button rules with the other four pages, the layout utilities, hero buttons,
   stats strip, icon tiles, chips, media and FAQ-intro rules with /card/,
   /wallet/ and /walletearn/ (scoped :is(.tv-card, .tv-wallet, .tv-earn,
   .tv-finance) above), the pill / check-list / table rules with /card/ and
   /walletearn/ (:is(.tv-card, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about)) and the stacked band
   buttons with /wallet/ and /walletearn/ (:is(.tv-wallet, .tv-earn,
   .tv-finance)). Everything below is finance-only.
   ========================================================================== */

/* ---------- hero ---------------------------------------------------------- */

/* Above 1024 the hero grid is vertically centred and the phone is the taller
   column, so the hero reserves the header height itself (below 1024 the shared
   hero rules already do this). */
@media (min-width: 1025px) {
  .tv-finance .tv-hero-finance { padding-top: 150px !important; padding-bottom: 64px !important; }
}
.tv-finance .tv-hero-finance .tv-h1 .elementor-heading-title { font-size: 62px; line-height: 1.06; }

/* Phone artwork: 5712, the app's Finance Home tab (Beta tag, total assets,
   Featured U.S. Stocks) cut from the old page's own screenshot 5073. One phone,
   no overlapping panels. */
.tv-finance .tv-hero-art { position: relative; padding-left: 0 !important; padding-right: 0 !important; }
.tv-finance .tv-hero-phone { width: 56%; margin: 0 auto; }
.tv-finance .tv-hero-phone img { width: 100%; height: auto; filter: drop-shadow(0 26px 40px rgba(35, 35, 35, .22)); }

/* the ghost button's arrow icon: the theme paints button SVGs white */
.tv-finance .tv-btn-ghost .elementor-button-icon svg { fill: currentColor; width: 12px; height: 12px; }
.tv-finance .tv-btn-ghost .elementor-button-icon { display: inline-flex; align-items: center; }

/* the "Beta" pill next to the eyebrow reads as a label, not a button */
.tv-finance .tv-eyebrow-row .tv-pill .elementor-heading-title { letter-spacing: .04em; text-transform: uppercase; }

/* ---------- section intros / footnotes ----------------------------------- */

.tv-finance .tv-sec-intro { font-size: 15.5px; line-height: 1.62; color: var(--tv-body); max-width: 78ch; }
.tv-finance .tv-sec-intro p { margin: 0; }
.tv-finance .tv-sec-intro a,
.tv-finance .tv-sec-sub a,
.tv-finance .tv-faq-intro a,
.tv-finance .tv-fn-text a,
.tv-finance .tv-note-text a { color: #4F7A12; text-decoration: underline; text-underline-offset: 2px; }
.tv-finance .tv-sec-intro a:hover,
.tv-finance .tv-sec-sub a:hover,
.tv-finance .tv-faq-intro a:hover,
.tv-finance .tv-fn-text a:hover,
.tv-finance .tv-note-text a:hover { color: var(--tv-ink); }
.tv-finance .tv-fn-text { font-size: 12.5px; line-height: 1.5; color: var(--tv-muted); }
.tv-finance .tv-fn-text p { margin: 0; }
.tv-finance .tv-note-text {
  background: var(--tv-lime-tint);
  border: 1px solid #E2EFCB;
  border-radius: 14px;
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--tv-body);
}
.tv-finance .tv-note-text p { margin: 0; }
.tv-finance .tv-feature-grid,
.tv-finance .tv-how-grid,
.tv-finance .tv-risk-grid,
.tv-finance .tv-gap-grid { margin-top: 8px; }
.tv-finance .tv-way-body strong { color: var(--tv-ink); }

/* ---------- stock tiles (an inline icon-list, names only, no prices) ------ */

.tv-finance .tv-stocks .elementor-icon-list-items {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 4px 0 0;
}
.tv-finance .tv-stocks .elementor-icon-list-item {
  display: flex;
  align-items: center;
  min-height: 52px;
  margin: 0;
  padding: 10px 14px;
  border: 1px solid var(--tv-line);
  border-radius: 14px;
  background: #fff;
  font-size: 15px;
  font-weight: 700;
  color: var(--tv-ink);
  box-shadow: var(--tv-shadow);
}
.tv-finance .tv-stocks .elementor-icon-list-item::before {
  content: "";
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--tv-lime);
  margin-right: 10px;
}
.tv-finance .tv-stocks .elementor-icon-list-item:after { display: none; }
.tv-finance .tv-stocks .elementor-icon-list-text { padding: 0; }

/* Elementor's own `.e-con > .elementor-widget { max-width: 100% }` outranks the shared
   .tv-media-phone cap, so the phones are sized on the image itself. */
.tv-finance .tv-media-phone img { display: block; width: 100%; max-width: 300px; height: auto; margin: 0 auto; }
.tv-finance .tv-media-cap { font-size: 12.5px; line-height: 1.5; color: var(--tv-muted); text-align: center; }
.tv-finance .tv-media-cap p { margin: 0; }

/* ---------- portfolio at a glance ----------------------------------------- */

.tv-finance .tv-show-grid {
  display: grid !important;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr) minmax(0, .9fr);
  gap: 20px;
  align-items: center;
  margin-top: 8px;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.tv-finance .tv-show-col { padding-left: 0 !important; padding-right: 0 !important; }
.tv-finance .tv-show-phones {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center;
  align-items: flex-start;
  gap: 14px;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.tv-finance .tv-show-phone { width: 46%; max-width: 230px; }
.tv-finance .tv-show-phone img { width: 100%; height: auto; filter: drop-shadow(0 18px 30px rgba(35, 35, 35, .18)); }
.tv-finance .tv-show-phone + .tv-show-phone { margin-top: 36px; }

/* ---------- 5x24 band ------------------------------------------------------ */

.tv-finance .tv-band-hours {
  background: linear-gradient(180deg, #F7FCEF 0%, #EFF9DF 100%);
  border: 1px solid #DDEFC0;
  border-radius: var(--tv-radius-lg);
}
.tv-finance .tv-hours-grid {
  display: grid !important;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: 36px;
  align-items: center;
}
/* The band keeps its own 34px (18px on phones) side padding - it is the grid's
   COLUMNS that give up Elementor's default 15px, not the band. */
.tv-finance .tv-hours-grid > .e-con { padding-left: 0 !important; padding-right: 0 !important; }
.tv-finance .tv-big .elementor-heading-title {
  font-size: 64px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.03em;
  color: #3D6A0A;
}
.tv-finance .tv-band-hours .tv-sec-title .elementor-heading-title { font-size: 32px; }
.tv-finance .tv-hours-tiles .tv-way { padding: 16px 16px 14px !important; height: auto; }
.tv-finance .tv-hours-tiles .tv-way-title .elementor-heading-title { font-size: 15.5px; }
.tv-finance .tv-hours-tiles .tv-way-icon .elementor-icon { width: 40px; height: 40px; border-radius: 12px; font-size: 17px; }

/* ---------- ownership ------------------------------------------------------ */

.tv-finance .tv-own-grid { padding-left: 0 !important; padding-right: 0 !important; }
.tv-finance .tv-fact {
  background: var(--tv-lime-tint);
  border: 1px solid #E2EFCB;
  border-radius: 14px;
  padding: 16px 18px !important;
}
.tv-finance .tv-fact-title .elementor-heading-title { font-size: 15.5px; line-height: 1.3; color: var(--tv-ink); margin-bottom: 4px; }
.tv-finance .tv-fact-body { font-size: 14.5px; line-height: 1.55; color: var(--tv-body); }
.tv-finance .tv-fact-body p { margin: 0 0 6px; }
.tv-finance .tv-fact-body p:last-child { margin-bottom: 0; }
.tv-finance .tv-fact-body strong { color: var(--tv-ink); }
.tv-finance .tv-quotes .elementor-icon-list-icon i { color: #9BBF5A; font-size: 12px; }
.tv-finance .tv-quotes .elementor-icon-list-text { color: var(--tv-body); }

/* ---------- the USDT -> Tevau Finance -> U.S. stocks strip ---------------- */

.tv-finance .tv-flow {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin-top: 8px;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.tv-finance .tv-flow-node {
  position: relative;
  background: #fff;
  border: 1px solid var(--tv-line);
  border-radius: var(--tv-radius);
  padding: 18px 14px !important;
  text-align: center;
  box-shadow: var(--tv-shadow);
}
.tv-finance .tv-flow-node:nth-child(2) { background: var(--tv-lime); border-color: var(--tv-lime); }
/* the arrow between the nodes lives in the grid gap */
.tv-finance .tv-flow-node + .tv-flow-node::before {
  content: "";
  position: absolute;
  left: -19px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid #4F7A12;
  border-bottom: 2px solid #4F7A12;
  transform: translate(0, -50%) rotate(-45deg);
}
.tv-finance .tv-flow-label .elementor-heading-title { font-size: 18px; line-height: 1.3; font-weight: 800; color: var(--tv-ink); }

/* ---------- fees ----------------------------------------------------------- */

.tv-finance .tv-tables { margin-top: 0; }
.tv-finance .tv-table.tv-table-fees { min-width: 0; }
.tv-finance .tv-table.tv-table-fees th,
.tv-finance .tv-table.tv-table-fees td { text-align: left; }
.tv-finance .tv-table.tv-table-fees td:last-child { font-weight: 700; color: var(--tv-ink); }
.tv-finance .tv-table.tv-table-fees .tv-group th {
  background: #F4FCE6;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #5F8C18;
}
.tv-finance .tv-table.tv-table-fees small { font-weight: 400; }

/* ---------- risk tiles ---------------------------------------------------- */

.tv-finance .tv-risk-grid { gap: 12px; }
.tv-finance .tv-risk-grid .tv-way { padding: 16px 16px 14px !important; }
.tv-finance .tv-risk-grid .tv-way-title .elementor-heading-title { font-size: 15.5px; }
.tv-finance .tv-risk-grid .tv-way-icon .elementor-icon { width: 40px; height: 40px; border-radius: 12px; font-size: 17px; }
.tv-finance .tv-risk-grid .tv-way-body { font-size: 13.5px; }
.tv-finance .tv-risk .tv-note-text { margin-top: 12px; }

/* ---------- cross-border band --------------------------------------------- */

.tv-finance .tv-band-borders {
  background:
    radial-gradient(700px 260px at 90% 100%, #E4F7C4 0%, rgba(228, 247, 196, 0) 70%),
    linear-gradient(180deg, #F2FBE4 0%, #EAF9CE 100%);
  border: 1px solid #D8EDB2;
  border-radius: var(--tv-radius-lg);
}
.tv-finance .tv-band-borders { padding-left: 34px !important; padding-right: 34px !important; }
.tv-finance .tv-band-borders > .e-con { padding-left: 0 !important; padding-right: 0 !important; }
.tv-finance .tv-band-borders .tv-band-btns { min-width: 240px; }

/* ---------- CTA band with the Beta welcome screen ------------------------- */

.tv-finance .tv-cta-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.1fr) auto minmax(0, .55fr);
  gap: 28px;
  align-items: center;
}
.tv-finance .tv-cta-grid > .e-con { padding-left: 0 !important; padding-right: 0 !important; }
.tv-finance .tv-cta-grid .tv-band-btns { min-width: 240px; }
.tv-finance .tv-cta-art { padding-left: 0 !important; padding-right: 0 !important; }
.tv-finance .tv-cta-phone img { display: block; width: 100%; max-width: 220px; height: auto; margin: 0 auto; filter: drop-shadow(0 18px 30px rgba(35, 35, 35, .18)); }

/* ---------- responsive ---------------------------------------------------- */

@media (max-width: 1200px) {
  .tv-finance .tv-hero-finance .tv-h1 .elementor-heading-title { font-size: 50px; }
  .tv-finance .tv-big .elementor-heading-title { font-size: 54px; }
}

@media (max-width: 1024px) {
  .tv-finance .tv-show-grid,
  .tv-finance .tv-hours-grid,
  .tv-finance .tv-cta-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .tv-finance .tv-show-phones { order: -1; }
  .tv-finance .tv-cta-art { display: none; }
}

@media (max-width: 767px) {
  .tv-finance .tv-hero-finance .tv-h1 .elementor-heading-title { font-size: 34px; line-height: 1.1; }
  .tv-finance .tv-stocks .elementor-icon-list-items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .tv-finance .tv-stocks .elementor-icon-list-item { min-height: 46px; padding: 8px 12px; font-size: 14px; }
  .tv-finance .tv-media-phone img { max-width: 260px; }
  .tv-finance .tv-show-phone + .tv-show-phone { margin-top: 24px; }
  .tv-finance .tv-band-hours .tv-sec-title .elementor-heading-title { font-size: 26px; }
  .tv-finance .tv-big .elementor-heading-title { font-size: 44px; }
  .tv-finance .tv-flow { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .tv-finance .tv-flow-node + .tv-flow-node::before { left: 50%; top: -17px; transform: translate(-50%, 0) rotate(45deg); }
  .tv-finance .tv-risk-grid { grid-template-columns: minmax(0, 1fr); }
  .tv-finance .tv-band-borders { padding-left: 18px !important; padding-right: 18px !important; }
  .tv-finance .tv-band-borders .tv-band-btns,
  .tv-finance .tv-cta-grid .tv-band-btns { min-width: 0; }
}





/* ==========================================================================
   /sign-up/ - Sign-up page (post 5471). Root class .tv-signup.
   Shares the tokens, hero, section-heading, accordion, band and button rules
   with the other five pages, the layout utilities, hero buttons, stats strip,
   icon tiles, chips, media and FAQ-intro rules with /card/, /wallet/,
   /walletearn/ and /finance/ (scoped :is(.tv-card, .tv-wallet, .tv-earn,
   .tv-finance, .tv-signup) above) and the stacked band buttons with /wallet/,
   /walletearn/ and /finance/. Everything below is sign-up-only.
   ========================================================================== */

/* ---------- hero ---------------------------------------------------------- */

/* Above 1024 the hero grid is vertically centred and the phone is the taller
   column, so the hero reserves the header height itself (below 1024 the shared
   hero rules already do this). */
@media (min-width: 1025px) {
  .tv-signup .tv-hero-signup { padding-top: 150px !important; padding-bottom: 60px !important; }
}
/* This page has NO theme header at the top (live and staging alike: post 5471
   carries mb_customize_header_layout = custom / mb_header_content_type = custom
   with nothing selected, so the theme emits an empty .wgl-site-header and only
   the sticky header, which appears on scroll). The theme marks a page that has
   an overlapping header with `.wgl-theme-header.header_overlap`; when that class
   is absent nothing floats over the hero, so the clearance is not needed and the
   hero starts higher. Restoring the header on the page (one theme-metabox change)
   brings the class back and these rules stop applying by themselves. */
.wgl-theme-header:not(.header_overlap) ~ #main .tv-signup .tv-hero-signup { padding-top: 76px !important; }
@media (max-width: 1024px) {
  .wgl-theme-header:not(.header_overlap) ~ #main .tv-signup .tv-hero-signup { padding-top: 60px !important; }
}
@media (max-width: 767px) {
  .wgl-theme-header:not(.header_overlap) ~ #main .tv-signup .tv-hero-signup { padding-top: 48px !important; }
}
/* The H1 is the old page's H1 string, unchanged ("Sign Up for Tevau"); the
   mockup's headline sits under it as the sub-head, so the H1 is one step smaller
   than the other heroes. */
.tv-signup .tv-hero-signup .tv-h1 .elementor-heading-title { font-size: 58px; line-height: 1.06; }
.tv-signup .tv-subhead .elementor-heading-title {
  font-size: 28px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -.02em;
  color: #3D6A0A;
}

/* Phone artwork: 5429, the app's wallet home screen (a real screenshot with its
   device frame), with the plastic card face 5701 tucked behind its lower-right
   corner, as the mockup pairs a phone with a card. */
.tv-signup .tv-hero-art { position: relative; padding-left: 0 !important; padding-right: 0 !important; }
.tv-signup .tv-hero-phone { width: 50%; margin: 0 auto 0 4%; position: relative; z-index: 2; }
.tv-signup .tv-hero-phone img { width: 100%; height: auto; filter: drop-shadow(0 26px 40px rgba(35, 35, 35, .22)); }
.tv-signup .tv-hero-cardart {
  position: absolute;
  right: 0;
  bottom: 9%;
  width: 56%;
  z-index: 1;
  transform: rotate(-12deg);
  filter: drop-shadow(0 18px 28px rgba(35, 35, 35, .24));
}
.tv-signup .tv-hero-cardart img { width: 100%; height: auto; }

/* the hero chips show their icon (the shared .tv-chips rule hides icons); Elementor's
   inline-list item margin (emitted into the page CSS) is reset so two chips fit a
   phone row */
.tv-signup .tv-chips .elementor-icon-list-item { margin: 0 !important; }
.tv-signup .tv-hero-chips { margin-top: 2px; }
.tv-signup .tv-hero-chips .elementor-icon-list-item { padding: 6px 12px; font-size: 13px; }
.tv-signup .tv-hero-chips .elementor-icon-list-icon { display: inline-flex; width: auto; margin-right: 7px; }
.tv-signup .tv-hero-chips .elementor-icon-list-icon i { color: #4F7A12; font-size: 12px; }

/* the ghost button's download icon: the theme paints button SVGs white */
.tv-signup .tv-btn-ghost .elementor-button-icon svg { fill: currentColor; width: 12px; height: 12px; }
.tv-signup .tv-btn-ghost .elementor-button-icon { display: inline-flex; align-items: center; }

/* ---------- section intros ----------------------------------------------- */

.tv-signup .tv-sec-intro { font-size: 15.5px; line-height: 1.62; color: var(--tv-body); max-width: 78ch; }
.tv-signup .tv-sec-intro p { margin: 0; }
.tv-signup .tv-steps-grid,
.tv-signup .tv-product-grid,
.tv-signup .tv-security-grid,
.tv-signup .tv-need-grid { margin-top: 8px; align-items: stretch; }
.tv-signup .tv-benefit-grid { margin-top: 12px; align-items: stretch; }
.tv-signup .tv-way-body strong { color: var(--tv-ink); }

/* ---------- 3 steps (icon tiles) + the "Spend Freely. Live Fully." close --- */

.tv-signup .tv-steps-close {
  padding-left: 0 !important;
  padding-right: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center;
  gap: 10px;
}
.tv-signup .tv-tagline .elementor-heading-title {
  font-size: 24px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--tv-ink);
  text-align: center;
}

/* ---------- what you unlock: product tiles + the four benefit tiles -------- */

.tv-signup .tv-product { display: flex; flex-direction: column; }
.tv-signup .tv-way-link { margin-top: auto; padding-top: 4px; font-size: 14px; font-weight: 700; }
.tv-signup .tv-way-link p { margin: 0; }
.tv-signup .tv-way-link a { color: #3D6A0A; text-decoration: none; }
.tv-signup .tv-way-link a::after { content: " \2192"; }
.tv-signup .tv-way-link a:hover { text-decoration: underline; text-underline-offset: 2px; color: var(--tv-ink); }

.tv-signup .tv-benefit {
  background: var(--tv-lime-tint);
  border: 1px solid #E2EFCB;
  border-radius: var(--tv-radius);
  padding: 18px 18px 16px !important;
  height: 100%;
}
.tv-signup .tv-benefit-title .elementor-heading-title { font-size: 16px; line-height: 1.3; color: var(--tv-ink); }
.tv-signup .tv-benefit-body { font-size: 14px; line-height: 1.5; color: var(--tv-body); }
.tv-signup .tv-benefit-body p { margin: 0; }

/* ---------- security ------------------------------------------------------ */

/* Elementor's own `.e-con > .elementor-widget { max-width: 100% }` outranks the shared
   .tv-media-phone cap, so the phone is sized on the image itself. */
.tv-signup .tv-security .tv-media-phone img { display: block; width: 100%; max-width: 340px; height: auto; margin: 0 auto; }
.tv-signup .tv-security-grid { gap: 12px; }
.tv-signup .tv-security-grid .tv-way { padding: 16px 16px 14px !important; }
.tv-signup .tv-security-grid .tv-way-title .elementor-heading-title { font-size: 15.5px; }
.tv-signup .tv-security-grid .tv-way-icon .elementor-icon { width: 40px; height: 40px; border-radius: 12px; font-size: 17px; }
.tv-signup .tv-trust-chips { margin-top: 2px; }
.tv-signup .tv-trust-chips .elementor-icon-list-icon { display: inline-flex; width: auto; margin-right: 7px; }
.tv-signup .tv-trust-chips .elementor-icon-list-icon i { color: #4F7A12; font-size: 13px; }
.tv-signup .tv-trust-chips .elementor-icon-list-item { background: var(--tv-lime-tint); border-color: #E2EFCB; }

/* ---------- before you start (five compact icon rows) --------------------- */

.tv-signup .tv-grid-5 {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.tv-signup .tv-need {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start;
  gap: 12px;
  background: var(--tv-card);
  border: 1px solid var(--tv-line);
  border-radius: 14px;
  padding: 14px 14px !important;
}
.tv-signup .tv-need > .elementor-widget-icon { width: auto; flex: 0 0 auto; }
.tv-signup .tv-need-text { padding: 0 !important; flex: 1 1 auto; min-width: 0; }
.tv-signup .tv-need-icon .elementor-icon-wrapper { text-align: left; }
.tv-signup .tv-need-icon .elementor-icon,
.tv-signup .tv-need-icon .elementor-icon i,
.tv-signup .tv-need-icon .elementor-icon svg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #3D6A0A;
  fill: #3D6A0A;
}
.tv-signup .tv-need-icon .elementor-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--tv-lime-soft); font-size: 15px; }
.tv-signup .tv-need-title .elementor-heading-title { font-size: 14.5px; line-height: 1.3; color: var(--tv-ink); }
.tv-signup .tv-need-body { font-size: 13px; line-height: 1.45; color: var(--tv-muted); }
.tv-signup .tv-need-body p { margin: 0; }

/* ---------- CTA band: copy | button + store badges | desktop QR ----------- */

.tv-signup .tv-cta-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.15fr) minmax(250px, .75fr) auto;
  gap: 28px;
  align-items: center;
}
/* The band keeps its own 34px (18px on phones) side padding - it is the grid's
   COLUMNS that give up Elementor's default 15px, not the band. */
.tv-signup .tv-cta-grid > .e-con { padding-left: 0 !important; padding-right: 0 !important; }
.tv-signup .tv-stores-label .elementor-heading-title { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #5F8C18; margin-top: 4px; }
.tv-signup .tv-store-badges { display: flex !important; flex-direction: row !important; flex-wrap: wrap; gap: 10px; padding: 0 !important; }
.tv-signup .tv-store-badges > .elementor-widget { width: auto; }
.tv-signup .tv-store-badge img { display: block; height: 44px; width: auto; border-radius: 8px; }
.tv-signup .tv-store-badge a:hover img { opacity: .88; }

/* The QR is emitted by the child theme ([tv_qr_go] -> qr-go-tevau.svg) and encodes
   the absolute live sign-up link, so scans stay attributed wherever the page is served. */
.tv-signup .tv-cta-qr { padding: 0 !important; }
.tv-signup .tv-qr .tv-qr-svg {
  display: block;
  width: 136px;
  height: 136px;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--tv-line);
  border-radius: 14px;
  box-shadow: var(--tv-shadow);
  shape-rendering: crispEdges;
}
.tv-signup .tv-qr-label .elementor-heading-title { font-size: 12.5px; line-height: 1.4; color: var(--tv-muted); text-align: center; max-width: 150px; margin: 0 auto; }

/* ---------- responsive ---------------------------------------------------- */

@media (max-width: 1200px) {
  .tv-signup .tv-hero-signup .tv-h1 .elementor-heading-title { font-size: 46px; }
  .tv-signup .tv-subhead .elementor-heading-title { font-size: 24px; }
  .tv-signup .tv-grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
  .tv-signup .tv-cta-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .tv-signup .tv-cta-qr { display: none; }
  .tv-signup .tv-grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .tv-signup .tv-hero-signup .tv-h1 .elementor-heading-title { font-size: 34px; line-height: 1.1; }
  .tv-signup .tv-subhead .elementor-heading-title { font-size: 20px; }
  .tv-signup .tv-hero-chips .elementor-icon-list-items { gap: 6px; }
  .tv-signup .tv-hero-chips .elementor-icon-list-item { padding: 4px 9px; font-size: 12px; }
  .tv-signup .tv-tagline .elementor-heading-title { font-size: 20px; }

  /* On a phone the stacked sections would run long, so the icon tiles (steps,
     products, security cards) become icon-left rows: the icon sits in a 40px
     column and the title / body / link stack beside it. */
  .tv-signup .tv-steps-grid .tv-way,
  .tv-signup .tv-product-grid .tv-way,
  .tv-signup .tv-security-grid .tv-way {
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 4px;
    align-items: start;
    padding: 14px 14px 12px !important;
  }
  .tv-signup .tv-steps-grid .tv-way > .elementor-widget-icon,
  .tv-signup .tv-product-grid .tv-way > .elementor-widget-icon,
  .tv-signup .tv-security-grid .tv-way > .elementor-widget-icon { grid-column: 1; grid-row: 1 / span 4; }
  .tv-signup .tv-steps-grid .tv-way > .elementor-widget:not(.elementor-widget-icon),
  .tv-signup .tv-product-grid .tv-way > .elementor-widget:not(.elementor-widget-icon),
  .tv-signup .tv-security-grid .tv-way > .elementor-widget:not(.elementor-widget-icon) { grid-column: 2; }
  .tv-signup .tv-steps-grid .tv-way-icon .elementor-icon,
  .tv-signup .tv-product-grid .tv-way-icon .elementor-icon,
  .tv-signup .tv-security-grid .tv-way-icon .elementor-icon { width: 40px; height: 40px; border-radius: 12px; font-size: 17px; }
  .tv-signup .tv-product-grid .tv-way-title .elementor-heading-title,
  .tv-signup .tv-steps-grid .tv-way-title .elementor-heading-title { font-size: 16px; }
  .tv-signup .tv-product-grid .tv-way-body,
  .tv-signup .tv-security-grid .tv-way-body { font-size: 13.5px; line-height: 1.5; }
  .tv-signup .tv-way-link { padding-top: 2px; }
  .tv-signup .tv-benefit { padding: 14px 14px 12px !important; }
  .tv-signup .tv-benefit-grid { gap: 10px; }

  /* the Security Code screenshot shows its dialog through a fixed-height window
     instead of the whole 2:1 phone - the widget wrapper is the window (the image
     widget's wrapper shrink-wraps its img, so the window cannot be the img itself)
     and the rest of the screen is clipped, not squashed */
  .tv-signup .tv-security .tv-media-phone .elementor-widget-container {
    display: block;
    width: 100%;
    max-width: 300px;
    height: 230px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid var(--tv-line);
    background: #F7F9F3;
  }
  .tv-signup .tv-security .tv-media-phone img { display: block; width: 100%; max-width: none; height: auto; margin-top: -160px; }
  .tv-signup .tv-security-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .tv-signup .tv-benefit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .tv-signup .tv-benefit { padding: 12px 12px 10px !important; }
  .tv-signup .tv-benefit-title .elementor-heading-title { font-size: 14.5px; }
  .tv-signup .tv-benefit-body { font-size: 13px; line-height: 1.45; }
  .tv-signup .tv-grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .tv-signup .tv-need { padding: 12px 12px !important; gap: 10px; }
  .tv-signup .tv-need-icon .elementor-icon { width: 32px; height: 32px; font-size: 13px; }
  .tv-signup .tv-need-title .elementor-heading-title { font-size: 13.5px; }
  .tv-signup .tv-need-body { font-size: 12.5px; }
  .tv-signup .tv-store-badge img { height: 40px; }
}

/* ==========================================================================
   Motion (child theme 1.6.0) - the six revamped pages.
   Two things only, both measured against the original theme build on
   /download/ (14 Sep 2026, handover section 18):
     1. stats-strip counters (/card/, /wallet/, /sign-up/): stats-counter.js
        counts each server-rendered number up once when its tile enters the
        viewport - 1200 ms, linear, like the theme's wgl-counter. The rules here
        only reserve width so the count never moves anything: tabular figures on
        the number (Poppins has no tabular table, so this is pixel-neutral) and an
        inline box the script sizes to the final value. The box is layout-
        contained, so the digits changing inside it can never re-lay the prefix
        and suffix beside it (Chrome scores even a sub-pixel re-layout of those
        text runs as layout shift). The digits are right-aligned in the box like
        the reference, so the odd intermediate value that is a hair wider than
        the final one spills into the empty space on the left, never into the
        suffix.
     2. hero float: the phone and card/chip artwork drift up and down with a
        CSS transform only - the theme's own float vocabulary (image_upDown,
        2 s alternate = 4 s cycle, 10-20 px peak to peak, ease) slowed a touch.
        Phone and card run the same period, the card 1.4 s behind, so they are
        offset in phase; both start from translateY(0), so the first frame is
        the static page. No opacity, no JS. Off below 768 px (the art is hidden
        below 1024 anyway) and under prefers-reduced-motion.
   ========================================================================== */

/* ---------- counters: width reservation only ------------------------------ */

:is(.tv-card, .tv-wallet, .tv-signup, .tv-home, .tv-about) .tv-stat-grid .tv-stat-num .elementor-heading-title { font-variant-numeric: tabular-nums; }
:is(.tv-card, .tv-wallet, .tv-signup, .tv-home, .tv-about) .tv-stat-num .tv-counting { white-space: nowrap; }
:is(.tv-card, .tv-wallet, .tv-signup, .tv-home, .tv-about) .tv-stat-num .tv-count {
  display: inline-block;
  vertical-align: top; /* on the baseline an inline box grows the line box (6 px at 24 px); top-aligned with the same line-height it does not */
  text-align: right;
  white-space: nowrap;
  contain: layout;
  font-variant-numeric: tabular-nums;
}

/* ---------- hero float ---------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) and (min-width: 768px) {
  @keyframes tv-float-phone {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
  }
  @keyframes tv-float-card {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-14px); }
  }
  .tv-help .tv-hero-art img,
  :is(.tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-hero-art .tv-hero-phone img {
    animation: tv-float-phone 4.4s ease-in-out infinite;
    will-change: transform;
  }
  :is(.tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .tv-hero-art :is(.tv-hero-cardart, .tv-hero-chip) img {
    animation: tv-float-card 4.4s ease-in-out 1.4s infinite;
    will-change: transform;
  }
  /* the second wallet record chip trails the first */
  .tv-wallet .tv-hero-art .tv-hero-chip-2 img { animation-delay: 2.6s; }
}
/* ==========================================================================
   Readability guard (child theme 1.8.0, 14 Sep 2026) - the six revamped pages.
   With the content box at the homepage's 1830 px, a paragraph in a full-width
   column could run 1,700 px wide. Running text is therefore capped at ~72
   characters of its own font size: paragraphs and lists inside text-editor
   widgets, and inside accordion answers. Deliberately NOT capped: headings and
   hero titles (heading widgets), cards/tiles (their columns are narrower than
   72ch anyway), tables (block-level siblings of the paragraphs, untouched),
   icon lists, grids and images. Every centred paragraph on the six pages sits
   inside a card narrower than 72ch (checked 14 Sep), so no auto-margin rule
   is needed; a centred stand-alone paragraph wider than 72ch would need
   margin-inline: auto added here. The heroes' lede keeps its tighter 46ch;
   the section intros come down from 78ch to the same 72ch.
   ========================================================================== */

:is(.tv-help, .tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .elementor-widget-text-editor p,
:is(.tv-help, .tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .elementor-widget-text-editor ul,
:is(.tv-help, .tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .elementor-widget-text-editor ol,
:is(.tv-help, .tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .elementor-tab-content > p,
:is(.tv-help, .tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .elementor-tab-content > ul,
:is(.tv-help, .tv-card, .tv-wallet, .tv-earn, .tv-finance, .tv-signup, .tv-home, .tv-about) .elementor-tab-content > ol { max-width: 72ch; }

:is(.tv-wallet, .tv-finance, .tv-signup) .tv-sec-intro { max-width: 72ch; }

/* ==========================================================================
   / - the homepage (post 1405). Root class .tv-home.
   Shares the tokens, hero, section-heading, accordion, band and button rules
   with the other six pages, the layout utilities, hero buttons, stats strip,
   icon tiles, chips, media and FAQ-intro rules with /card/, /wallet/,
   /walletearn/, /finance/ and /sign-up/ (the :is(.tv-card, ..., .tv-signup,
   .tv-home) families above) and the stacked band buttons with /wallet/,
   /walletearn/, /finance/ and /sign-up/. Everything below is homepage-only:
   the hero art (phone + metal card + Earn card), the four product tabs
   (Elementor's native Tabs widget - styled through its own controls, laid out
   here; the desktop auto-advance progress bar), the ecosystem flow, the card
   fan, the guides column and the dark closing band.
   ========================================================================== */

/* ---------- hero ---------------------------------------------------------- */

/* Above 1024 the hero grid is vertically centred and the phone is the taller
   column, so the hero reserves the header height itself (below 1024 the shared
   hero rules already do this). */
@media (min-width: 1025px) {
  .tv-home .tv-hero-home { padding-top: 150px !important; padding-bottom: 64px !important; }
}
/* The H1 is the old page's H1, unchanged: four text nodes, each in its own span
   ("Tevau — " / "Spend USDT Anywhere " / "with Your " / "Crypto Card"). The brand
   fragment stands on its own line as it did before; the last fragment keeps the
   old page's green accent. Long for a hero H1, so one step down from the others. */
.tv-home .tv-hero-home .tv-h1 .elementor-heading-title { font-size: 56px; line-height: 1.06; }
.tv-home .tv-hero-home .tv-h1 .elementor-heading-title > span:first-child { display: block; }
.tv-home .tv-h1 .elementor-heading-title .tv-accent { color: #5F9E17; }
/* the mockup's headline, as the sub-head under the H1 */
.tv-home .tv-subhead .elementor-heading-title {
  font-size: 28px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -.02em;
  color: #3D6A0A;
}

/* Phone artwork: 5429, the app's wallet home screen (a real screenshot with its
   device frame), the metal card face 5702 tucked behind its upper-right corner and
   the "Conservative Growth / +4.49%" Earn card 5709 floating over its lower-left -
   wallet, card and Earn in one picture, as the mockup pairs a phone with a card and
   two floating product cards. "by Tevau" (the old avatar strip's caption) sits
   under it as the caption. */
.tv-home .tv-hero-art { position: relative; padding-left: 0 !important; padding-right: 0 !important; }
.tv-home .tv-hero-phone { width: 46%; margin: 0 auto; position: relative; z-index: 2; }
.tv-home .tv-hero-phone img { width: 100%; height: auto; filter: drop-shadow(0 26px 40px rgba(35, 35, 35, .22)); }
.tv-home .tv-hero-cardart {
  position: absolute;
  right: 0;
  top: 5%;
  width: 46%;
  z-index: 1;
  transform: rotate(9deg);
  filter: drop-shadow(0 18px 28px rgba(35, 35, 35, .24));
}
.tv-home .tv-hero-cardart img { width: 100%; height: auto; border-radius: 6%/9%; }
.tv-home .tv-hero-chip { position: absolute; left: 0; bottom: 16%; width: 44%; max-width: 300px; z-index: 3; transform: rotate(-4deg); }
.tv-home .tv-hero-chip img { width: 100%; height: auto; border-radius: 14px; filter: drop-shadow(0 12px 24px rgba(35, 35, 35, .16)); }
.tv-home .tv-hero-by { margin-top: 10px; font-size: 12.5px; color: var(--tv-muted); text-align: center; }
.tv-home .tv-hero-by p { margin: 0; }
/* the Earn card trails the metal card, so the three pieces never bob in step */
@media (prefers-reduced-motion: no-preference) and (min-width: 768px) {
  .tv-home .tv-hero-art .tv-hero-chip img { animation-delay: 2.6s; }
}

/* the old page's highlighter pills ("by Tevau", "spend crypto like cash", "Visa")
   keep their theme classes but read in the page's lime, not the theme's purple */
.tv-home span.highlighter.primary,
.tv-home span.highlighter.quaternary,
.tv-home span.highlighter.tertiary { background: var(--tv-lime); color: var(--tv-ink); }
.tv-home span.highlighter.quaternary { background: var(--tv-lime-soft); }

/* the hero chips show their icon (the shared .tv-chips rule hides icons); Elementor's
   inline-list item margin (emitted into the page CSS) is reset so the four fit a
   phone row */
.tv-home .tv-chips .elementor-icon-list-item { margin: 0 !important; }
.tv-home .tv-hero-chips { margin-top: 2px; }
.tv-home .tv-hero-chips .elementor-icon-list-item { padding: 6px 12px; font-size: 13px; }
.tv-home .tv-hero-chips .elementor-icon-list-icon { display: inline-flex; width: auto; margin-right: 6px; }
.tv-home .tv-hero-chips .elementor-icon-list-icon i { color: #4F7A12; font-size: 12px; }

/* the ghost button's arrow icon: the theme paints button SVGs white */
.tv-home .tv-btn-ghost .elementor-button-icon svg { fill: currentColor; width: 12px; height: 12px; }
.tv-home .tv-btn-ghost .elementor-button-icon { display: inline-flex; align-items: center; }

/* ---------- section helpers ---------------------------------------------- */

.tv-home .tv-sec-intro { font-size: 15.5px; line-height: 1.62; color: var(--tv-body); max-width: 72ch; }
.tv-home .tv-sec-intro p { margin: 0; }
.tv-home .tv-sec-intro strong { color: var(--tv-ink); }
.tv-home .tv-center .elementor-heading-title { text-align: center; }
.tv-home .tv-sec-sub.tv-center,
.tv-home .tv-sec-intro.tv-center { text-align: center; margin-left: auto; margin-right: auto; }
.tv-home .tv-sec-intro.tv-center p { margin-left: auto; margin-right: auto; }
.tv-home .tv-fn-text { font-size: 12.5px; line-height: 1.5; color: var(--tv-muted); }
.tv-home .tv-fn-text p { margin: 0; }
.tv-home .tv-way-link { font-size: 14px; font-weight: 700; }
.tv-home .tv-way-link p { margin: 0; }
.tv-home .tv-way-link a { color: #3D6A0A; text-decoration: none; }
.tv-home .tv-way-link a::after { content: " \2192"; }
.tv-home .tv-way-link a:hover { text-decoration: underline; text-underline-offset: 2px; color: var(--tv-ink); }
.tv-home .tv-way-body strong { color: var(--tv-ink); }

/* ---------- what do you want to do: the four product tiles ---------------- */

.tv-home .tv-product-grid { margin-top: 12px; align-items: stretch; }
.tv-home .tv-product { display: flex; flex-direction: column; }
.tv-home .tv-product .tv-way-link { margin-top: auto; padding-top: 4px; }

/* ---------- One Account. One Financial Ecosystem. (the flow band) --------- */

.tv-home .tv-band-eco {
  background: linear-gradient(180deg, #F7FCEF 0%, #EFF9DF 100%);
  border: 1px solid #DDEFC0;
  border-radius: var(--tv-radius-lg);
}
.tv-home .tv-band-eco .tv-sec-title .elementor-heading-title { font-size: 34px; }
.tv-home .tv-flow {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  padding: 0 !important;
  margin-top: 14px;
}
.tv-home .tv-flow-node { position: relative; padding: 0 !important; text-align: center; }
/* the arrow between the nodes lives in the grid gap */
.tv-home .tv-flow-node + .tv-flow-node::before {
  content: "";
  position: absolute;
  left: -20px;
  top: 24px;
  width: 11px;
  height: 11px;
  border-right: 2px solid #4F7A12;
  border-bottom: 2px solid #4F7A12;
  transform: rotate(-45deg);
}
.tv-home .tv-flow-icon .elementor-icon-wrapper { text-align: center; }
.tv-home .tv-flow-icon .elementor-icon,
.tv-home .tv-flow-icon .elementor-icon i,
.tv-home .tv-flow-icon .elementor-icon svg { color: #3D6A0A; fill: #3D6A0A; }
.tv-home .tv-flow-icon .elementor-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #DDEFC0;
  font-size: 22px;
}
.tv-home .tv-flow-title .elementor-heading-title { font-size: 17px; line-height: 1.3; color: var(--tv-ink); }
.tv-home .tv-flow-sub { font-size: 13.5px; line-height: 1.45; color: var(--tv-muted); }
.tv-home .tv-flow-sub p { margin: 0; max-width: none; }

/* ---------- the four product tabs ----------------------------------------- */

/* One native Elementor Tabs widget. The tab-title colours, radius, padding, gap
   and typography are the widget's own settings (Elementor emits them into the
   page CSS); only the layout of the panels is here. All four panels are in the
   HTML - Elementor's own stylesheet shows the active one and hides the rest. */
.tv-home .tv-tabs { margin-top: 16px; }
/* Auto-advance (tabs-autoplay.js, child theme 1.10.0): the script only toggles two
   state classes on the widget - .tv-auto while it is armed, .tv-auto-running while
   the 7 s cycle counts. The progress bar is drawn here in CSS alone: a lime line
   along the bottom of the active pill that fills over 7 s, linear (the counters'
   timing), frozen while the script is paused (hover, focus, off-screen, hidden
   tab) and gone the moment the visitor picks a tab. Desktop only, never under
   reduced motion - the same gates the script has. */
@media (min-width: 1025px) and (prefers-reduced-motion: no-preference) {
  @keyframes tv-tab-progress {
    from { width: 0; }
    to { width: 100%; }
  }
  .tv-home .tv-tabs.tv-auto .e-n-tab-title { position: relative; overflow: hidden; }
  .tv-home .tv-tabs.tv-auto .e-n-tab-title[aria-selected="true"]::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 0;
    background: var(--tv-lime);
    animation: tv-tab-progress 7s linear forwards;
    animation-play-state: paused;
    pointer-events: none;
  }
  .tv-home .tv-tabs.tv-auto.tv-auto-running .e-n-tab-title[aria-selected="true"]::after { animation-play-state: running; }
}
.tv-home .tv-panel {
  background: var(--tv-card);
  border: 1px solid var(--tv-line);
  border-radius: var(--tv-radius-lg);
  box-shadow: var(--tv-shadow);
}
.tv-home .tv-panel-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 40px;
  align-items: center;
  padding: 0 !important;
}
.tv-home .tv-panel-copy,
.tv-home .tv-panel-media { padding: 0 !important; }
.tv-home .tv-panel-icon .elementor-icon-wrapper { text-align: left; }
.tv-home .tv-panel-icon .elementor-icon,
.tv-home .tv-panel-icon .elementor-icon i,
.tv-home .tv-panel-icon .elementor-icon svg { color: #3D6A0A; fill: #3D6A0A; }
.tv-home .tv-panel-icon .elementor-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--tv-lime-soft);
  font-size: 15px;
}
.tv-home .tv-panel-title .elementor-heading-title { font-size: 30px; line-height: 1.15; letter-spacing: -.02em; color: var(--tv-ink); }
.tv-home .tv-panel-title .elementor-heading-title span.highlighter { padding: 1px .18em; border-radius: 10px; }
.tv-home .tv-panel-body { font-size: 15.5px; line-height: 1.62; color: var(--tv-body); }
.tv-home .tv-panel-body p { margin: 0; }
.tv-home .tv-panel-body strong { color: var(--tv-ink); }
.tv-home .tv-panel-sub { font-size: 16px; line-height: 1.4; font-weight: 600; color: #4F7A12; }
.tv-home .tv-panel-sub p { margin: 0; }
.tv-home .tv-earn-steps p { line-height: 1.75; }
.tv-home .tv-earn-steps strong { color: var(--tv-ink); }

/* check-lists: text-editor lists (so the wallet page's exact strings, inline
   <strong> included, are reused) drawn as the other pages' check icon-lists */
.tv-home .tv-checklist ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-width: 72ch; }
.tv-home .tv-checklist li { position: relative; padding-left: 26px; font-size: 15px; line-height: 1.5; color: var(--tv-body); }
.tv-home .tv-checklist li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 2px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--tv-lime-soft);
  color: #3D6A0A;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tv-home .tv-checklist li strong { color: var(--tv-ink); }
.tv-home .tv-checklist-sm li { font-size: 14px; }

.tv-home .tv-panel-cta { padding: 0 !important; display: flex !important; flex-direction: row !important; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 4px; }
.tv-home .tv-panel-cta > .elementor-widget { width: auto; }
.tv-home .tv-use { padding: 0 !important; }
.tv-home .tv-use-label .elementor-heading-title { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #5F8C18; }

/* Elementor's own `.e-con > .elementor-widget { max-width: 100% }` outranks any
   widget-level cap, so the phones are sized on the image itself. */
.tv-home .tv-panel-phone img { display: block; width: 100%; max-width: 300px; height: auto; margin: 0 auto; filter: drop-shadow(0 22px 34px rgba(35, 35, 35, .2)); }

/* wallet: the Records screen with the two real app records floating over it */
.tv-home .tv-wallet-art { position: relative; padding: 0 !important; }
.tv-home .tv-panel-chip { position: absolute; width: 54%; max-width: 300px; z-index: 2; }
.tv-home .tv-panel-chip img { width: 100%; height: auto; border-radius: 12px; filter: drop-shadow(0 10px 22px rgba(35, 35, 35, .14)); }
.tv-home .tv-panel-chip-1 { left: 0; top: 16%; transform: rotate(-4deg); }
.tv-home .tv-panel-chip-2 { right: 0; bottom: 14%; transform: rotate(3deg); }

/* card: the four app crops fanned, metal in front */
.tv-home .tv-cardfan { position: relative; height: 340px; padding: 0 !important; }
.tv-home .tv-cardface { position: absolute; width: 56%; max-width: 330px; }
.tv-home .tv-cardface img,
.tv-home .tv-cardface a img { width: 100%; height: auto; border-radius: 6%/9%; box-shadow: 0 16px 30px rgba(35, 35, 35, .22); }
.tv-home .tv-cardface-1 { left: 0; top: 0; transform: rotate(-10deg); z-index: 1; }
.tv-home .tv-cardface-2 { left: 14%; top: 13%; transform: rotate(-4deg); z-index: 2; }
.tv-home .tv-cardface-3 { right: 0; top: 6%; transform: rotate(9deg); z-index: 3; }
.tv-home .tv-cardface-4 { left: 24%; bottom: 0; transform: rotate(3deg); z-index: 4; }
.tv-home .tv-cardlegend { padding: 0 !important; display: flex !important; flex-direction: row !important; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
.tv-home .tv-cardlegend > .elementor-widget { width: auto; }
.tv-home .tv-tier-chips .elementor-icon-list-item { padding: 5px 11px; font-size: 12.5px; background: var(--tv-lime-tint); border-color: #E2EFCB; }
.tv-home .tv-cardtypes { margin-top: 26px; gap: 16px; }
.tv-home .tv-cardtype {
  background: var(--tv-lime-tint);
  border: 1px solid #E2EFCB;
  border-radius: var(--tv-radius);
  padding: 18px 18px 16px !important;
}
.tv-home .tv-cardtype-title .elementor-heading-title { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #5F8C18; }
.tv-home .tv-cardtype-sub { font-size: 16px; line-height: 1.35; font-weight: 700; color: var(--tv-ink); }
.tv-home .tv-cardtype-sub p { margin: 0; }

/* earn: the yield screen beside the facts card */
.tv-home .tv-earn-art,
.tv-home .tv-fin-art { padding: 0 !important; display: flex !important; flex-direction: row !important; align-items: center; gap: 18px; }
.tv-home .tv-earn-art > .elementor-widget-image,
.tv-home .tv-fin-art > .elementor-widget-image { flex: 0 0 40%; width: 40%; }
.tv-home .tv-earn-phone img,
.tv-home .tv-fin-phone img { max-width: 220px; }
.tv-home .tv-earncard {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--tv-card);
  border: 1px solid var(--tv-line);
  border-radius: var(--tv-radius-lg);
  box-shadow: var(--tv-shadow-lift);
  padding: 20px 20px 18px !important;
}
.tv-home .tv-earncard-apr .elementor-heading-title { font-size: 40px; line-height: 1; font-weight: 800; letter-spacing: -.02em; color: #3D6A0A; }
.tv-home .tv-earncard-label .elementor-heading-title { font-size: 13px; font-weight: 600; color: var(--tv-muted); }
.tv-home .tv-earncard-rows { padding: 12px 0 0 !important; margin-top: 8px; border-top: 1px solid var(--tv-line); }
.tv-home .tv-earnfact { padding: 0 !important; display: flex !important; flex-direction: row !important; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.tv-home .tv-earnfact > .elementor-widget { width: auto; }
.tv-home .tv-earnfact-num .elementor-heading-title { font-size: 16px; font-weight: 800; color: var(--tv-ink); white-space: nowrap; }
.tv-home .tv-earnfact-label .elementor-heading-title { font-size: 13.5px; font-weight: 500; color: var(--tv-muted); }

/* finance: the Finance Home screen beside the stock names (names only, no prices) */
.tv-home .tv-fin-stocks { flex: 1 1 auto; min-width: 0; padding: 0 !important; }
.tv-home .tv-stocks .elementor-icon-list-items { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.tv-home .tv-stocks .elementor-icon-list-item {
  display: inline-flex;
  align-items: center;
  margin: 0 !important;
  padding: 8px 12px;
  border: 1px solid var(--tv-line);
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--tv-ink);
  box-shadow: var(--tv-shadow);
}
.tv-home .tv-stocks .elementor-icon-list-item::before { content: ""; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 999px; background: var(--tv-lime); margin-right: 9px; }
.tv-home .tv-stocks .elementor-icon-list-item:after { display: none; }
.tv-home .tv-stocks .elementor-icon-list-icon { display: none; }
.tv-home .tv-stocks .elementor-icon-list-text { padding: 0; }

/* ---------- Apple Pay band (the /card/ band, reused) ---------------------- */

.tv-home .tv-band-apple {
  background:
    radial-gradient(700px 260px at 90% 100%, #E4F7C4 0%, rgba(228, 247, 196, 0) 70%),
    linear-gradient(180deg, #F2FBE4 0%, #EAF9CE 100%);
  border: 1px solid #D8EDB2;
  border-radius: var(--tv-radius-lg);
}
.tv-home .tv-apple-media { padding: 0 !important; }
.tv-home .tv-apple-img img { display: block; width: 100%; max-width: 300px; height: auto; margin: 0 auto; border-radius: 16px; }
/* the shared .tv-band-grid rule zeroes a band's side padding (the /finance/ fix,
   handover 16.14): the band re-declares its 34 px (40 on the closing band) and
   only its columns give up Elementor's default inset */
.tv-home .tv-band-borders { padding-left: 34px !important; padding-right: 34px !important; }
.tv-home .tv-band-final.tv-band-borders { padding-left: 40px !important; padding-right: 40px !important; }
.tv-home .tv-band-borders > .e-con { padding-left: 0 !important; padding-right: 0 !important; }

/* ---------- Why Choose Tevau? (the two old trust sections, one clean one) -- */

.tv-home .tv-why-sub a { color: #4F7A12; text-decoration: underline; text-underline-offset: 2px; }
.tv-home .tv-why-sub a:hover { color: var(--tv-ink); }
.tv-home .tv-grid-5 {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-top: 14px;
  align-items: stretch;
}
.tv-home .tv-why-tile { padding: 18px 18px 16px !important; }
.tv-home .tv-why-tile .tv-way-title .elementor-heading-title { font-size: 16px; }
.tv-home .tv-why-foot { padding: 0 !important; display: flex !important; flex-direction: row !important; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: 18px; }
.tv-home .tv-why-foot > .elementor-widget { width: auto; }
.tv-home .tv-trust-chips .elementor-icon-list-icon { display: inline-flex; width: auto; margin-right: 7px; }
.tv-home .tv-trust-chips .elementor-icon-list-icon i { color: #4F7A12; font-size: 13px; }
.tv-home .tv-trust-chips .elementor-icon-list-item { background: var(--tv-lime-tint); border-color: #E2EFCB; }

/* ---------- Guides & FAQs ------------------------------------------------- */

.tv-home .tv-guides-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: 32px;
  align-items: start;
  padding: 0 !important;
  margin-top: 12px;
}
.tv-home .tv-guides-faq,
.tv-home .tv-guides-learn { padding: 0 !important; }
.tv-home .tv-guides-h .elementor-heading-title { font-size: 20px; line-height: 1.25; color: var(--tv-ink); }
.tv-home .tv-faq-more { margin-top: 10px; }
.tv-home .tv-latest-h { margin-top: 10px; }
.tv-home .tv-learn-list ul,
.tv-home .tv-latest ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-width: none; }
.tv-home .tv-learn-list li a,
.tv-home .tv-latest li a {
  display: block;
  padding: 12px 40px 12px 14px;
  position: relative;
  background: var(--tv-card);
  border: 1px solid var(--tv-line);
  border-radius: 14px;
  color: var(--tv-ink);
  font-size: 14.5px;
  line-height: 1.35;
  font-weight: 700;
  text-decoration: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.tv-home .tv-learn-list li a::after,
.tv-home .tv-latest li a::after { content: "\2192"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: #4F7A12; }
.tv-home .tv-learn-list li a:hover,
.tv-home .tv-latest li a:hover { border-color: #CDE9A2; box-shadow: var(--tv-shadow-lift); }
.tv-home .tv-learn-list strong { font-weight: 700; }
.tv-home .tv-latest .tv-latest-title { display: block; }
.tv-home .tv-latest .tv-latest-date { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 500; color: var(--tv-muted); }
.tv-home .tv-latest .tv-latest-empty { margin: 0; font-size: 14px; color: var(--tv-muted); }

/* ---------- the closing band ---------------------------------------------- */

.tv-home .tv-band-final {
  background:
    radial-gradient(900px 320px at 100% 0%, rgba(194, 241, 94, .28) 0%, rgba(194, 241, 94, 0) 65%),
    #232323;
  border: 1px solid #2E2E2E;
  border-radius: var(--tv-radius-lg);
}
.tv-home .tv-band-final .tv-eyebrow .elementor-heading-title { color: var(--tv-lime); }
.tv-home .tv-band-final .tv-band-title .elementor-heading-title { color: #fff; }
.tv-home .tv-band-final .tv-band-body { color: #D9DDD3; }
.tv-home .tv-band-final .tv-fn-text { color: #A9AEA3; }
.tv-home .tv-cta-actions { padding: 0 !important; display: flex !important; flex-direction: row !important; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 6px; }
.tv-home .tv-cta-actions > .elementor-widget { width: auto; }
.tv-home .tv-cta-side { padding: 0 !important; text-align: right; }
/* "One Card / Endless Possibilities. / From Crypto / to Your Lifestyle" - the old
   tagline's four text nodes, one per line (the decor images between them are gone) */
.tv-home .tv-cta-tagline .elementor-heading-title { font-size: 30px; line-height: 1.15; font-weight: 800; letter-spacing: -.02em; color: var(--tv-lime); text-align: right; }
.tv-home .tv-cta-tagline .elementor-heading-title > span { display: block; }
.tv-home .tv-cta-tagline .elementor-heading-title > span:nth-child(2),
.tv-home .tv-cta-tagline .elementor-heading-title > span:nth-child(4) { color: #fff; }

/* ---------- responsive ---------------------------------------------------- */

@media (max-width: 1200px) {
  .tv-home .tv-hero-home .tv-h1 .elementor-heading-title { font-size: 48px; }
  .tv-home .tv-panel-grid { gap: 28px; }
  .tv-home .tv-grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
  .tv-home .tv-panel-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .tv-home .tv-guides-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .tv-home .tv-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 18px; }
  .tv-home .tv-flow-node:nth-child(3)::before { display: none; }
}

@media (max-width: 767px) {
  .tv-home .tv-hero-home .tv-h1 .elementor-heading-title { font-size: 34px; line-height: 1.1; }
  .tv-home .tv-subhead .elementor-heading-title { font-size: 20px; }
  .tv-home .tv-band-eco .tv-sec-title .elementor-heading-title { font-size: 26px; }
  .tv-home .tv-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
  .tv-home .tv-flow-node + .tv-flow-node::before { display: none; }
  .tv-home .tv-flow-icon .elementor-icon { width: 48px; height: 48px; font-size: 18px; }
  .tv-home .tv-panel-title .elementor-heading-title { font-size: 24px; }
  .tv-home .tv-panel-body { font-size: 15px; }
  /* the four product chips on one row of the 313 px hero column: text only, the icons go */
  .tv-home .tv-hero-chips .elementor-icon-list-items { gap: 6px; }
  .tv-home .tv-hero-chips .elementor-icon-list-item { padding: 5px 10px; font-size: 12.5px; }
  .tv-home .tv-hero-chips .elementor-icon-list-icon { display: none; }
  .tv-home .tv-use-chips .elementor-icon-list-item { padding: 5px 10px; font-size: 12.5px; }
  /* the tab bar keeps its four labels on one 375 px row; the icons go, the labels stay */
  .tv-home .tv-tabs .e-n-tab-icon { display: none; }
  .tv-home .tv-panel-phone img { max-width: 240px; }
  .tv-home .tv-cardfan { height: 250px; }
  .tv-home .tv-cardface { width: 60%; }
  .tv-home .tv-earn-art,
  .tv-home .tv-fin-art { flex-direction: column !important; align-items: stretch; }
  .tv-home .tv-earn-art > .elementor-widget-image,
  .tv-home .tv-fin-art > .elementor-widget-image { flex: 0 0 auto; width: 100%; }
  .tv-home .tv-earncard-apr .elementor-heading-title { font-size: 34px; }
  .tv-home .tv-grid-5 { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  /* "What do you want to do?" tiles on phones: icon and heading share a row (icon
     left, heading centred beside it), the description and link sit below */
  .tv-home .tv-product {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 12px;
    row-gap: 8px;
  }
  .tv-home .tv-product > .elementor-widget-icon { grid-column: 1; width: auto; }
  .tv-home .tv-product > .tv-way-title { grid-column: 2; }
  .tv-home .tv-product > .tv-way-body,
  .tv-home .tv-product > .tv-way-link { grid-column: 1 / -1; }
  .tv-home .tv-product .tv-way-link { margin-top: 0; padding-top: 0; }
  .tv-home .tv-product .tv-way-icon .elementor-icon { width: 40px; height: 40px; border-radius: 12px; font-size: 17px; }
  /* every CTA centred on phones: the button rows, the stand-alone buttons and the
     text-link CTAs (desktop alignment untouched); the hero chips follow the hero
     buttons so the hero does not read half-centred */
  .tv-home .tv-hero-btns,
  .tv-home .tv-panel-cta,
  .tv-home .tv-cta-actions,
  .tv-home .tv-cardlegend,
  .tv-home .tv-why-foot { justify-content: center; }
  .tv-home .tv-hero-chips .elementor-icon-list-items { justify-content: center; }
  .tv-home .elementor-widget-button .elementor-button-wrapper { text-align: center; }
  .tv-home .tv-btn-row { align-items: center; }
  .tv-home .tv-way-link,
  .tv-home .tv-panel-cta .tv-fn-text,
  .tv-home .tv-cta-actions .tv-fn-text { text-align: center; }
  .tv-home .tv-band-borders,
  .tv-home .tv-band-final.tv-band-borders { padding-left: 18px !important; padding-right: 18px !important; }
  .tv-home .tv-cta-side { text-align: left; }
  .tv-home .tv-cta-tagline .elementor-heading-title { font-size: 22px; text-align: left; }
}

/* ==========================================================================
   /about/ - the About page (post 366). Root class .tv-about.
   about-v1.1 (15 Sep 2026, later): the layout re-based on design/mockups/
   about-mockup.png once it reached the repo - content, links and every
   guardrail of v1 unchanged. about-v1.2 (16 Sep): Honey's three
   corrections - one "Go-To" band in the "Our goal" slot, the cover tiles with
   a product visual, the relationship band with its white card. about-v1.3
   (16 Sep, later): three more corrections - the cover tiles' icon moved
   beside the title instead of above it, the "Go-To" band re-cut into three
   real columns (heading | paragraphs | a tall review card, replacing the
   two-column shape that left the right side visibly empty), and the two
   handwritten mockup taglines restored beside the hero and closing-band
   composites (the closing band's art column widened to fit one in). Shares the tokens, hero, section-heading,
   accordion, band and button rules with the other seven pages, the layout
   utilities, hero buttons, icon tiles, chips, steps, media and intro rules
   with /card/, /wallet/, /walletearn/, /finance/, /sign-up/ and the homepage
   (the :is(.tv-card, ..., .tv-home, .tv-about) families above). Everything
   below is About-only: the hero art (phone + four floating product
   mini-cards) and trust strip, the side layouts (heading column left, content
   right) the mockup uses for most sections, the pale-green cover panel, the
   numbered research steps with arrows, the five principle tiles, the wide
   relationship panel, the question cards, the use-case tiles and the closing
   band with its secondary /go/ line.
   ========================================================================== */

/* The theme page-title banner is replaced by the in-page hero on this page (post
   meta mb_page_title_switch = off). The H1 text itself is unchanged - "About
   Tevau.co" moves into the hero heading widget. Belt-and-braces in case the meta
   is not carried across on deploy (the /faqs/ precedent). */
body.page-id-366 .page-header { display: none !important; }

/* ---------- hero ---------------------------------------------------------- */

/* Above 1024 the hero grid is vertically centred and the art column is the taller
   one, so the hero reserves the header height itself (below 1024 the shared hero
   rules already do this). */
@media (min-width: 1025px) {
  .tv-about .tv-hero-about { padding-top: 150px !important; padding-bottom: 64px !important; }
}
/* "About Tevau.co" is short, so the H1 sits between the homepage's 56 and the
   shared 76; the old page's "Everything You Need to Know About Tevau" title is
   the sub-head under it (its three text nodes kept as three spans). */
.tv-about .tv-hero-about .tv-h1 .elementor-heading-title { font-size: 64px; line-height: 1.04; }
.tv-about .tv-subhead .elementor-heading-title {
  font-size: 28px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -.02em;
  color: #3D6A0A;
}
/* the lede is the one independence line; the old intro paragraph follows it */
.tv-about .tv-hero-intro { font-size: 15.5px; line-height: 1.62; color: var(--tv-body); max-width: 62ch; }
.tv-about .tv-hero-intro p { margin: 0; }
.tv-about .tv-hero-intro a { color: #4F7A12; text-decoration: underline; text-underline-offset: 2px; }
.tv-about .tv-hero-intro a:hover { color: var(--tv-ink); }

/* The trust strip under the CTAs (mockup): four small labels with icons in one
   bordered pill row - an icon-list widget, so every label is real text. The
   mockup's first label carried the word "affiliate"; here it is the hands-on fact. */
.tv-about .tv-trust-strip { margin-top: 6px; }
.tv-about .tv-trust-strip .elementor-icon-list-items {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 0;
  margin: 0;
  padding: 5px 6px;
  background: rgba(255, 255, 255, .7);
  border: 1px solid var(--tv-line);
  border-radius: 14px;
}
.tv-about .tv-trust-strip .elementor-icon-list-item {
  display: inline-flex;
  align-items: center;
  margin: 0 !important;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--tv-body);
  white-space: nowrap;
}
.tv-about .tv-trust-strip .elementor-icon-list-item + .elementor-icon-list-item { border-left: 1px solid var(--tv-line); }
/* below 1400 the hero copy column is ~650 px, short of the four labels in one row:
   the strip becomes a 2 x 2 block (the separators go) */
@media (max-width: 1400px) {
  .tv-about .tv-trust-strip .elementor-icon-list-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 4px; padding: 6px 8px; }
  .tv-about .tv-trust-strip .elementor-icon-list-item { padding: 3px 6px; }
  .tv-about .tv-trust-strip .elementor-icon-list-item + .elementor-icon-list-item { border-left: 0; }
}
.tv-about .tv-trust-strip .elementor-icon-list-item:after { display: none; }
.tv-about .tv-trust-strip .elementor-icon-list-icon { display: inline-flex; width: auto; margin-right: 7px; }
.tv-about .tv-trust-strip .elementor-icon-list-icon i,
.tv-about .tv-trust-strip .elementor-icon-list-icon svg { color: #4F7A12; fill: #4F7A12; font-size: 12px; width: 12px; height: 12px; }
.tv-about .tv-trust-strip .elementor-icon-list-text { padding: 0; }

/* Hero art (mockup): the app's wallet home screen 5429 in the middle with the four
   product mini-cards floating around it - Card top-left, Wallet bottom-left, Earn
   top-right, Finance bottom-right. Each mini-card is a library crop with its nav
   word as the label: Wallet 5771 (the Wallet Assets card cut from 5429), Card 5701
   (the plastic card face, the card we use), Earn 5709 (the Conservative Growth
   card), Finance 5772 (the Finance Home card cut from 5712, no stock prices). No
   lifestyle photo, no handwriting decor. */
.tv-about .tv-hero-art { position: relative; padding-left: 0 !important; padding-right: 0 !important; }
.tv-about .tv-hero-phone { width: 44%; margin: 0 auto; position: relative; z-index: 2; }
.tv-about .tv-hero-phone img { width: 100%; height: auto; filter: drop-shadow(0 26px 40px rgba(35, 35, 35, .22)); }
/* the minis' wrapper covers the art so the four can sit on its corners; it takes no
   height of its own - the phone sets the hero height, as on the other pages */
.tv-about .tv-hero-minis { position: absolute; inset: 0; padding: 0 !important; display: block !important; z-index: 3; pointer-events: none; }
.tv-about .tv-mini {
  position: absolute;
  width: 31%;
  max-width: 190px;
  pointer-events: auto;
  background: var(--tv-lime-tint);
  border: 1px solid #E2EFCB;
  border-radius: 14px;
  padding: 10px 10px 8px !important;
  box-shadow: var(--tv-shadow-lift);
}
.tv-about .tv-mini-card { left: 0; top: 7%; transform: rotate(-3deg); }
.tv-about .tv-mini-wallet { left: 3%; bottom: 9%; transform: rotate(2deg); }
.tv-about .tv-mini-earn { right: 0; top: 5%; transform: rotate(3deg); }
.tv-about .tv-mini-finance { right: 3%; bottom: 10%; transform: rotate(-2deg); }
.tv-about .tv-mini-label .elementor-heading-title {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #5F8C18;
  margin: 0 0 6px 2px;
}
.tv-about .tv-mini-img img { display: block; width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--tv-line); background: #fff; }
.tv-about .tv-mini-card .tv-mini-img img { border: 0; border-radius: 6%/9%; box-shadow: 0 8px 18px rgba(35, 35, 35, .16); }
/* the four mini-cards float like the other pages' card/chip art (the shared 4.4 s
   cycle), each on its own phase so they never bob in step; the phone gets the
   shared float rule. The float is a translateY on top of the tilt above. */
@media (prefers-reduced-motion: no-preference) and (min-width: 768px) {
  @keyframes tv-float-mini-a { 0%, 100% { transform: rotate(-3deg) translateY(0); } 50% { transform: rotate(-3deg) translateY(-12px); } }
  @keyframes tv-float-mini-b { 0%, 100% { transform: rotate(2deg) translateY(0); } 50% { transform: rotate(2deg) translateY(-12px); } }
  @keyframes tv-float-mini-c { 0%, 100% { transform: rotate(3deg) translateY(0); } 50% { transform: rotate(3deg) translateY(-12px); } }
  @keyframes tv-float-mini-d { 0%, 100% { transform: rotate(-2deg) translateY(0); } 50% { transform: rotate(-2deg) translateY(-12px); } }
  .tv-about .tv-mini { will-change: transform; animation: tv-float-mini-a 4.4s ease-in-out 1.4s infinite; }
  .tv-about .tv-mini-wallet { animation-name: tv-float-mini-b; animation-delay: 2.6s; }
  .tv-about .tv-mini-earn { animation-name: tv-float-mini-c; animation-delay: 2s; }
  .tv-about .tv-mini-finance { animation-name: tv-float-mini-d; animation-delay: 3.2s; }
}

/* v1.3: the restored handwritten tagline (mockup: upper right of the mini-card grid),
   bleeding slightly past the art column into the section's own gutter - hidden with the
   rest of the hero art below 1024 (the shared hero-art rule) */
.tv-about .tv-hero-tagline {
  position: absolute;
  top: 30%;
  right: -46px;
  width: 190px;
  z-index: 4;
  transform: rotate(-8deg);
  pointer-events: none;
}
/* a %-based right offset would grow with the wider hero-art box at large viewports and clip
   against the browser edge (seen at 1920) - a fixed offset keeps it beside the mini-card grid
   at every width instead; pull it in further past 2400px where the kit itself is centred with
   room to spare */
@media (min-width: 2401px) {
  .tv-about .tv-hero-tagline { right: 40px; }
}
.tv-about .tv-hero-tagline img { display: block; width: 100%; height: auto; }

/* ---------- section helpers ---------------------------------------------- */

.tv-about .tv-sec-intro { font-size: 15.5px; line-height: 1.62; color: var(--tv-body); max-width: 72ch; }
.tv-about .tv-sec-intro p { margin: 0 0 12px; }
.tv-about .tv-sec-intro p:last-child { margin-bottom: 0; }
.tv-about .tv-sec-intro strong { color: var(--tv-ink); }
.tv-about .tv-sec-intro a { color: #4F7A12; text-decoration: underline; text-underline-offset: 2px; }
.tv-about .tv-sec-intro a:hover { color: var(--tv-ink); }
.tv-about .tv-h1 .elementor-heading-title .tv-accent,
.tv-about .tv-sec-title .elementor-heading-title .tv-accent { color: #5F9E17; }
.tv-about .tv-fn-text { font-size: 12.5px; line-height: 1.5; color: var(--tv-muted); }
.tv-about .tv-fn-text p { margin: 0; }
.tv-about .tv-way-link { font-size: 14px; font-weight: 700; }
.tv-about .tv-way-link p { margin: 0; }
.tv-about .tv-way-link a { color: #3D6A0A; text-decoration: none; }
.tv-about .tv-way-link a::after { content: " \2192"; }
.tv-about .tv-way-link a:hover { text-decoration: underline; text-underline-offset: 2px; color: var(--tv-ink); }
.tv-about .tv-way-body strong { color: var(--tv-ink); }
.tv-about .tv-tile-grid { align-items: stretch; }
.tv-about .tv-tile { display: flex; flex-direction: column; }
.tv-about .tv-tile .tv-way-link { margin-top: auto; padding-top: 4px; }
/* the ghost button's arrow icon: the theme paints button SVGs white */
.tv-about .tv-btn-ghost .elementor-button-icon svg { fill: currentColor; width: 12px; height: 12px; }
.tv-about .tv-btn-ghost .elementor-button-icon { display: inline-flex; align-items: center; }

/* The mockup's section shape: a heading column on the left (title + one line), the
   content on the right. The two columns are plain containers; the grid goes on
   their parent. Stacks below 1024. */
.tv-about .tv-side {
  display: grid !important;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: 28px 36px;
  align-items: start;
  padding: 0 !important;
}
.tv-about .tv-side-head,
.tv-about .tv-side-body { padding: 0 !important; }
.tv-about .tv-side-head .tv-sec-title .elementor-heading-title { font-size: 34px; }
.tv-about .tv-side-head .tv-sec-sub { margin-top: 2px; }
.tv-about .tv-side-body > .tv-grid-4,
.tv-about .tv-side-body > .tv-grid-3 { margin-top: 0; }

/* ---------- Why Tevau.co is the Go-To Tevau Resource (the "Our goal" band) - v1.3 --- */

/* the old page's second heading, its sub-line, the three "Who We Are" paragraphs and the
   UCardCrypto review line - one pale-lime band in the brief's "Our goal" slot. v1.2 laid
   this out as the mockup's generic heading-left/content-right shape, which left the review
   note narrow and the right side visibly empty beside it (Honey's correction). v1.3: a
   genuine three-column row - heading, the three paragraphs, and the review as a tall card
   filling the third column (not the side() helper - the body needs two real columns, so
   this section is built bespoke; see build-about-v1.py). Two columns <=1024, one <=767. */
.tv-about .tv-band-why {
  background: linear-gradient(180deg, #F7FCEF 0%, #EFF9DF 100%);
  border: 1px solid #DDEFC0;
  border-radius: var(--tv-radius-lg);
}
.tv-about .tv-why-side {
  grid-template-columns: minmax(0, 280px) minmax(0, 1fr) minmax(0, 260px);
  align-items: stretch;
  gap: 28px 32px;
}
.tv-about .tv-review-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--tv-card);
  border: 1px solid var(--tv-line);
  border-radius: var(--tv-radius);
  padding: 20px 20px !important;
}
.tv-about .tv-review-card .tv-review-icon .elementor-icon-wrapper { text-align: left; }
.tv-about .tv-review-card .tv-review-icon .elementor-icon,
.tv-about .tv-review-card .tv-review-icon .elementor-icon i,
.tv-about .tv-review-card .tv-review-icon .elementor-icon svg { color: #3D6A0A; fill: #3D6A0A; }
.tv-about .tv-review-card .tv-review-icon .elementor-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--tv-lime-soft);
  font-size: 19px;
  margin-bottom: 2px;
}
.tv-about .tv-review-card .tv-note-label .elementor-heading-title { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #5F8C18; }
.tv-about .tv-review-card .tv-note-body { font-size: 14.5px; line-height: 1.6; color: var(--tv-body); }
.tv-about .tv-review-card .tv-note-body p { margin: 0; }
.tv-about .tv-review-card .tv-note-body a { color: #4F7A12; text-decoration: underline; text-underline-offset: 2px; }
.tv-about .tv-review-card .tv-note-body a:hover { color: var(--tv-ink); }

/* ---------- What we cover: the pale-green panel --------------------------- */

/* v1.2 (Honey's correction 2): the mockup's tile - icon, title, the page's own
   sentence and "Learn more" on the left, a small product visual on the right.
   Three across from 1600 px (the mockup's 3 x 2), two across (2 x 3) on laptops,
   where a 285 px tile could not hold a sentence beside a visual. */
.tv-about .tv-band-cover {
  background: linear-gradient(180deg, #F7FCEF 0%, #EFF9DF 100%);
  border: 1px solid #DDEFC0;
  border-radius: var(--tv-radius-lg);
}
.tv-about .tv-cover-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 0 !important;
  align-items: stretch;
}
@media (min-width: 1600px) {
  .tv-about .tv-cover-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.tv-about .tv-cover-tile {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 118px;
  gap: 14px;
  align-items: center;
  padding: 18px 18px 16px !important;
}
.tv-about .tv-cover-tile > .e-con { padding: 0 !important; }
.tv-about .tv-cover-copy { min-height: 100%; }
/* v1.3 (Honey's correction 1): icon left of the title on one row, vertically centred, at
   every width including 375 (was icon above the title); description stays below the row */
.tv-about .tv-cover-head { display: flex; align-items: center; }
.tv-about .tv-cover-head .tv-way-icon { flex: 0 0 auto; }
.tv-about .tv-cover-visual { justify-content: center; }
.tv-about .tv-cover-img img { display: block; width: 100%; max-width: 118px; height: auto; border-radius: 10px; border: 1px solid var(--tv-line); background: #fff; }
.tv-about .tv-cover-tile:first-child .tv-cover-img img { border: 0; border-radius: 6%/9%; box-shadow: 0 8px 18px rgba(35, 35, 35, .16); }
/* the Help Center tile's visual: three small rows (the mockup's list) */
.tv-about .tv-cover-list { width: 100%; }
.tv-about .tv-cover-list .elementor-icon-list-items { display: flex; flex-direction: column; gap: 5px; margin: 0; }
.tv-about .tv-cover-list .elementor-icon-list-item {
  display: flex;
  align-items: center;
  margin: 0 !important;
  padding: 5px 8px;
  background: #fff;
  border: 1px solid var(--tv-line);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--tv-ink);
  white-space: nowrap;
}
.tv-about .tv-cover-list .elementor-icon-list-item:after { display: none; }
.tv-about .tv-cover-list .elementor-icon-list-icon { display: inline-flex; width: auto; margin-right: 6px; }
.tv-about .tv-cover-list .elementor-icon-list-icon i,
.tv-about .tv-cover-list .elementor-icon-list-icon svg { color: #4F7A12; fill: #4F7A12; font-size: 10px; width: 10px; height: 10px; }
.tv-about .tv-cover-list .elementor-icon-list-text { padding: 0; }

/* ---------- How we research: four numbered steps with arrows -------------- */

.tv-about .tv-steps {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px;
  padding: 0 !important;
  margin-top: 8px;
  align-items: stretch;
}
.tv-about .tv-step { position: relative; height: 100%; text-align: center; align-items: center; }
/* the number badge sits on the tile's top edge, the arrow in the grid gap */
.tv-about .tv-step .tv-step-num { position: absolute; top: -15px; left: 14px; }
.tv-about .tv-step + .tv-step::before {
  content: "";
  position: absolute;
  left: -19px;
  top: 50%;
  width: 11px;
  height: 11px;
  border-right: 2px solid #4F7A12;
  border-bottom: 2px solid #4F7A12;
  transform: translateY(-50%) rotate(-45deg);
}
.tv-about .tv-step-icon .elementor-icon-wrapper { text-align: center; }
.tv-about .tv-step-icon .elementor-icon,
.tv-about .tv-step-icon .elementor-icon i,
.tv-about .tv-step-icon .elementor-icon svg { color: #3D6A0A; fill: #3D6A0A; }
.tv-about .tv-step-icon .elementor-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--tv-lime-soft);
  font-size: 19px;
}
.tv-about .tv-step .tv-step-title .elementor-heading-title { text-align: center; font-size: 16.5px; }
.tv-about .tv-step .tv-step-body { text-align: center; }
.tv-about .tv-step .tv-step-body p { margin-left: auto; margin-right: auto; }

/* ---------- Editorial principles: five tiles ------------------------------ */

/* five tiles with two-sentence bodies (the old tabs' text): three across (3 + 2)
   beside the heading column, five across only where each tile keeps ~250 px
   (1800 px viewports and up) */
.tv-about .tv-grid-5 {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding-left: 0 !important;
  padding-right: 0 !important;
  align-items: stretch;
}
@media (min-width: 1800px) {
  .tv-about .tv-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.tv-about .tv-principle { padding: 18px 18px 16px !important; }
/* the old tab titles, emoji included, as each tile's tag line */
.tv-about .tv-principle-tag .elementor-heading-title { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #5F8C18; }
.tv-about .tv-principle .tv-way-title .elementor-heading-title { font-size: 16px; }
.tv-about .tv-principle .tv-way-body p { margin: 0 0 8px; }
.tv-about .tv-principle .tv-way-body p:last-child { margin-bottom: 0; }

/* ---------- Our relationship with Tevau ----------------------------------- */

/* v1.2 (Honey's correction 3), the mockup's band: pale-green, heading + the
   independence line in the heading column; on the right a white card -
   handshake icon | bold line + supporting line | one lime button */
.tv-about .tv-band-rel {
  background: linear-gradient(180deg, #F7FCEF 0%, #EFF9DF 100%);
  border: 1px solid #DDEFC0;
  border-radius: var(--tv-radius-lg);
}
.tv-about .tv-rel-side { align-items: center; }
.tv-about .tv-rel-side .tv-side-head .tv-band-body { font-size: 15px; line-height: 1.6; color: var(--tv-body); }
.tv-about .tv-rel-side .tv-side-head .tv-band-body p { margin: 0; }
.tv-about .tv-rel-card {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 18px 22px;
  align-items: center;
  background: var(--tv-card);
  border: 1px solid var(--tv-line);
  border-radius: var(--tv-radius-lg);
  box-shadow: var(--tv-shadow);
}
.tv-about .tv-rel-card > .e-con { padding: 0 !important; }
.tv-about .tv-rel-bold .elementor-heading-title { font-size: 17px; line-height: 1.3; font-weight: 700; color: var(--tv-ink); }
.tv-about .tv-rel-support { font-size: 14px; line-height: 1.55; color: var(--tv-muted); max-width: 54ch; }
.tv-about .tv-rel-support p { margin: 0; }
.tv-about .tv-rel-icon .elementor-icon-wrapper { text-align: left; }
.tv-about .tv-rel-icon .elementor-icon,
.tv-about .tv-rel-icon .elementor-icon i,
.tv-about .tv-rel-icon .elementor-icon svg { color: #3D6A0A; fill: #3D6A0A; }
.tv-about .tv-rel-icon .elementor-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background: var(--tv-lime-soft);
  font-size: 26px;
}
.tv-about .tv-rel-cta { align-items: flex-end; }

/* ---------- Questions we help answer: icon-left cards --------------------- */

.tv-about .tv-question {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 6px;
  align-items: start;
}
.tv-about .tv-question > .elementor-widget-icon { grid-column: 1; grid-row: 1 / span 2; width: auto; }
.tv-about .tv-question > .tv-way-title { grid-column: 2; }
.tv-about .tv-question > .tv-way-body { grid-column: 2; }
.tv-about .tv-question > .tv-way-link { grid-column: 2; margin-top: auto; padding-top: 4px; }
.tv-about .tv-question .tv-way-title .elementor-heading-title { font-size: 16px; }
.tv-about .tv-question .tv-way-icon .elementor-icon { width: 42px; height: 42px; border-radius: 12px; font-size: 18px; }

/* ---------- Real-world use cases ------------------------------------------ */

.tv-about .tv-usecase-grid { align-items: stretch; }
.tv-about .tv-usecase {
  background: var(--tv-card);
  border: 1px solid var(--tv-line);
  border-radius: var(--tv-radius);
  overflow: hidden;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.tv-about .tv-usecase:hover { transform: translateY(-3px); box-shadow: var(--tv-shadow-lift); border-color: #CDE9A2; }
/* the photo fills a 16:9 window whatever its own ratio (the four are 500x290,
   710x660, 800x533 and 500x500) - the mockup's short photo band */
.tv-about .tv-usecase-img img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: center; }
.tv-about .tv-usecase-img.tv-usecase-img-top img { object-position: center top; }
/* icon | title + body, the old button label as the link below (mockup anatomy) */
.tv-about .tv-usecase-copy {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 6px;
  align-items: start;
  flex: 1 1 auto;
  padding: 14px 16px 14px !important;
}
.tv-about .tv-usecase-copy > .elementor-widget-icon { grid-column: 1; grid-row: 1 / span 2; width: auto; }
.tv-about .tv-usecase-copy > .tv-way-title { grid-column: 2; }
.tv-about .tv-usecase-copy > .tv-way-body { grid-column: 2; }
.tv-about .tv-usecase-copy > .tv-way-link { grid-column: 2; margin-top: auto; padding-top: 6px; }
.tv-about .tv-usecase-copy .tv-way-icon .elementor-icon { width: 40px; height: 40px; border-radius: 999px; font-size: 16px; }
.tv-about .tv-usecase .tv-way-title .elementor-heading-title { font-size: 16px; }

/* ---------- the closing band ---------------------------------------------- */

/* copy left, the phone + plastic card art right (no links - the /go/ budget is
   spent), the three buttons and then the secondary /go/ line under them */
.tv-about .tv-band-borders { padding-left: 34px !important; padding-right: 34px !important; }
.tv-about .tv-band-borders > .e-con { padding-left: 0 !important; padding-right: 0 !important; }
/* v1.3: widened 300 -> 500px so the restored tagline has room beside the phone; the phone
   and card keep their exact original pixel footprint (fixed px + a left offset instead of
   %/margin-auto, which would have just slid the phone to the new right edge). The copy
   column gives up width it was not using - its text is capped at 62ch either way. */
.tv-about .tv-band-cta.tv-band-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 500px); gap: 32px; }
.tv-about .tv-cta-actions { padding: 0 !important; display: flex !important; flex-direction: row !important; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 8px; }
.tv-about .tv-cta-actions > .elementor-widget { width: auto; }
.tv-about .tv-cta-secondary { padding: 0 !important; display: flex !important; flex-direction: row !important; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 10px; }
.tv-about .tv-cta-secondary > .elementor-widget { width: auto; }
.tv-about .tv-cta-secondary .tv-fn-text { font-size: 13.5px; color: var(--tv-body); }
.tv-about .tv-band-cta .tv-band-body { max-width: 62ch; }
.tv-about .tv-cta-art { position: relative; padding: 0 !important; min-height: 230px; }
.tv-about .tv-cta-phone { width: 150px; margin: 0 0 0 150px; position: relative; z-index: 2; }
.tv-about .tv-cta-phone img { width: 100%; height: auto; filter: drop-shadow(0 20px 32px rgba(35, 35, 35, .2)); }
.tv-about .tv-cta-card { position: absolute; left: 0; bottom: 8%; width: 174px; z-index: 1; transform: rotate(-9deg); filter: drop-shadow(0 16px 26px rgba(35, 35, 35, .22)); }
.tv-about .tv-cta-card img { width: 100%; height: auto; border-radius: 6%/9%; }
/* v1.3: the restored handwritten tagline (mockup: upper right of the phone/card composite) */
.tv-about .tv-cta-tagline { position: absolute; top: 2%; right: 4px; width: 170px; z-index: 3; transform: rotate(-8deg); pointer-events: none; }
.tv-about .tv-cta-tagline img { display: block; width: 100%; height: auto; }

/* ---------- responsive ---------------------------------------------------- */

@media (max-width: 1200px) {
  .tv-about .tv-hero-about .tv-h1 .elementor-heading-title { font-size: 52px; }
  .tv-about .tv-side { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 24px 28px; }
  .tv-about .tv-side-head .tv-sec-title .elementor-heading-title { font-size: 30px; }
  .tv-about .tv-side-body > .tv-grid-4,
  .tv-about .tv-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tv-about .tv-step:nth-child(3)::before { display: none; }
}

@media (max-width: 1024px) {
  .tv-about .tv-side { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  /* v1.3: the "why" band's three columns become two - heading atop the paragraphs on the
     left, the review card spanning both rows on the right (still a "tall" card) */
  .tv-about .tv-why-side { grid-template-columns: minmax(0, 1fr) minmax(0, 280px); gap: 20px; }
  .tv-about .tv-why-side .tv-side-head { grid-column: 1; grid-row: 1; }
  .tv-about .tv-why-side .tv-why-paras { grid-column: 1; grid-row: 2; }
  .tv-about .tv-why-side .tv-review-card { grid-column: 2; grid-row: 1 / span 2; }
  .tv-about .tv-rel-card { grid-template-columns: auto minmax(0, 1fr); }
  .tv-about .tv-rel-card > .tv-rel-cta { grid-column: 1 / -1; }
  .tv-about .tv-rel-cta { align-items: flex-start; }
  .tv-about .tv-band-cta.tv-band-grid { grid-template-columns: minmax(0, 1fr); }
  .tv-about .tv-cta-art { display: none; }
}

@media (max-width: 767px) {
  .tv-about .tv-hero-about .tv-h1 .elementor-heading-title { font-size: 38px; line-height: 1.08; }
  .tv-about .tv-subhead .elementor-heading-title { font-size: 20px; }
  .tv-about .tv-side-head .tv-sec-title .elementor-heading-title { font-size: 26px; }
  .tv-about .tv-band-rel .tv-band-title .elementor-heading-title { font-size: 22px; }
  .tv-about .tv-band-borders { padding-left: 18px !important; padding-right: 18px !important; }
  /* v1.3: the "why" band's three/two columns collapse to one, in reading order */
  .tv-about .tv-why-side { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .tv-about .tv-why-side .tv-side-head,
  .tv-about .tv-why-side .tv-why-paras,
  .tv-about .tv-why-side .tv-review-card { grid-column: 1; grid-row: auto; }
  /* v1.3: the two taglines would crowd the composites at this width (belt-and-braces -
     both are already hidden with the rest of the hero/CTA art at <=1024) */
  .tv-about .tv-hero-tagline,
  .tv-about .tv-cta-tagline { display: none !important; }
  /* the trust strip's 2 x 2 block, labels allowed to wrap in a 160 px cell */
  .tv-about .tv-trust-strip .elementor-icon-list-item { white-space: normal; align-items: flex-start; font-size: 11.5px; }
  .tv-about .tv-trust-strip .elementor-icon-list-icon { margin-top: 2px; }
  /* two columns on phones for the 4-card rows, the cover grid, the steps and the
     use-case tiles (the mobile page was 11,410 px stacked one-up); the principle
     tiles keep one column - their bodies are the old tabs' two sentences */
  .tv-about .tv-side-body > .tv-grid-4,
  .tv-about .tv-cover-grid,
  .tv-about .tv-questions-grid,
  .tv-about .tv-usecase-grid,
  .tv-about .tv-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tv-about .tv-grid-5 { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .tv-about .tv-tile,
  .tv-about .tv-step { padding: 14px 12px 12px !important; }
  .tv-about .tv-tile .tv-way-icon .elementor-icon,
  .tv-about .tv-question .tv-way-icon .elementor-icon { width: 36px; height: 36px; border-radius: 11px; font-size: 15px; }
  .tv-about .tv-way-title .elementor-heading-title,
  .tv-about .tv-question .tv-way-title .elementor-heading-title,
  .tv-about .tv-usecase .tv-way-title .elementor-heading-title { font-size: 14.5px; }
  .tv-about .tv-way-body,
  .tv-about .tv-step-body { font-size: 13px; line-height: 1.5; }
  .tv-about .tv-way-link { font-size: 13px; }
  /* the icon-left cards go icon-above in a 166 px column */
  .tv-about .tv-question,
  .tv-about .tv-usecase-copy { grid-template-columns: minmax(0, 1fr); }
  .tv-about .tv-question > .elementor-widget-icon,
  .tv-about .tv-usecase-copy > .elementor-widget-icon { grid-row: auto; }
  .tv-about .tv-question > .tv-way-title,
  .tv-about .tv-question > .tv-way-body,
  .tv-about .tv-question > .tv-way-link,
  .tv-about .tv-usecase-copy > .tv-way-title,
  .tv-about .tv-usecase-copy > .tv-way-body,
  .tv-about .tv-usecase-copy > .tv-way-link { grid-column: 1; }
  .tv-about .tv-usecase-copy { padding: 12px 12px 12px !important; }
  .tv-about .tv-usecase-copy .tv-way-icon .elementor-icon { width: 34px; height: 34px; font-size: 14px; }
  /* steps: the badge inside the tile, no arrows between two-up tiles */
  .tv-about .tv-steps { margin-top: 14px; }
  .tv-about .tv-step .tv-step-num { top: -13px; left: 10px; }
  .tv-about .tv-step + .tv-step::before { display: none; }
  .tv-about .tv-step-icon .elementor-icon { width: 38px; height: 38px; font-size: 16px; }
  .tv-about .tv-step .tv-step-title .elementor-heading-title { font-size: 14.5px; }
  /* every CTA centred on phones - the homepage rule (handover 20.11 item 3):
     the hero buttons + trust strip, the relationship panel, the closing band's
     buttons and secondary line, and every text-link CTA; desktop untouched */
  .tv-about .tv-hero-btns,
  .tv-about .tv-cta-actions,
  .tv-about .tv-cta-secondary { justify-content: center; }
  .tv-about .tv-trust-strip .elementor-icon-list-items { width: 100%; }
  .tv-about .elementor-widget-button .elementor-button-wrapper { text-align: center; }
  .tv-about .tv-btn-row { align-items: center; }
  .tv-about .tv-way-link,
  .tv-about .tv-cta-secondary .tv-fn-text { text-align: center; }
  /* the cover tiles two-up keep the copy only (the visual is decoration) */
  .tv-about .tv-cover-tile { grid-template-columns: minmax(0, 1fr); padding: 14px 12px 12px !important; }
  .tv-about .tv-cover-visual { display: none !important; }
  /* the relationship card stacks and centres */
  .tv-about .tv-rel-card { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .tv-about .tv-rel-icon .elementor-icon-wrapper { text-align: center; }
  .tv-about .tv-rel-bold .elementor-heading-title { text-align: center; }
  .tv-about .tv-rel-support { margin-left: auto; margin-right: auto; }
  .tv-about .tv-rel-side .tv-side-head .tv-band-body { text-align: center; }
  .tv-about .tv-rel-cta { align-items: center; }
}