/* ============================================================
   TARGETVEST — VSL landing page
   ------------------------------------------------------------
   Palette + type lifted from targetvest.com:
     page      #14161d      surface   #333747
     hairline  #484d61      divider   #2f3341
     green     #55e2a3      green-dk  #3fa678  (button fill)
     text      #d8dce9      muted     #9aa5b7 / #7d85a1
     type      Lexend (variable axis 100-900)
   ============================================================ */

:root {
  /* Surfaces */
  --bg: #14161d;
  --surface: #333747;
  --hairline: #484d61;
  --divider: #2f3341;

  /* Brand green — accents, numerals, highlights */
  --main: #55e2a3;
  --main-dark: #3fa678;

  /* Text */
  --text: #ffffff;
  --text-body: #d8dce9;
  --text-muted: #9aa5b7;
  --text-dim: #7d85a1;

  --radius: 6px;
  --container: 1280px;

  /* Shared column width: the headline and the video are the same width, and
     the headline is sized to break onto exactly 3 lines at this width. */
  --content-w: 960px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  margin: 0 !important;
}

body {
  font-family: "Lexend", sans-serif;
  color: var(--text-body);
  background: var(--bg);
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

.container {
  width: min(var(--container), calc(100% - 48px));
  margin-inline: auto;
}

h1,
h2,
h3 {
  font-family: "Lexend", sans-serif;
}

/* ============================================================
   FONT LOCK
   ------------------------------------------------------------
   Divi — like most parent themes — declares font-family on body,
   headings, paragraphs, links and buttons, often from its dynamic
   "et-core-unified" stylesheet that loads after this one. Those
   selectors outrank the component rules below, so Lexend is
   re-asserted here for this template's own elements.

   Scoped deliberately by container: the Vidalytics embed is never
   touched, because the player ships its own icon font and forcing
   a family onto it would break the control glyphs. (The in-player
   CTA button sets Lexend explicitly further down — that one is a
   text button, so it is safe.)
   ============================================================ */

body.tv-vsl-page,
body.tv-vsl-page .countdown-bar-inner :is(span, b, i, a),
body.tv-vsl-page .vsl-title :is(h1, h2, h3, p, span, strong, em, a),
body.tv-vsl-page .offer-expired :is(h2, p, div, span),
body.tv-vsl-page .vsl-cta :is(a, button, span, p),
body.tv-vsl-page .site-footer :is(h2, h3, p, a, li, span, div) {
  font-family: "Lexend", sans-serif !important;
}

/* Utility: the countdown script toggles this to hide the video while the
   offer is expired. */
.is-hidden {
  display: none !important;
}

/* ============================================================
   BUTTON — solid green, TargetVest style
   ============================================================ */

.main-cta,
.vsl-cta a,
.vsl-cta button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 40px;
  background: var(--main-dark);
  color: var(--bg);
  border: 0;
  border-radius: var(--radius);
  outline: 2px solid var(--main-dark);
  outline-offset: 2px;
  font-family: "Lexend", sans-serif;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition:
    background 0.2s ease,
    outline-color 0.2s ease,
    transform 0.2s ease;
}

.main-cta:hover,
.vsl-cta a:hover,
.vsl-cta button:hover {
  background: var(--main);
  outline-color: var(--main);
  transform: translateY(-1px);
}

/* ============================================================
   VSL LAYOUT — single centered column
   ============================================================ */

/* Tight above and below the headline: the video plus the in-player CTA that
   appears under it have to stay reachable without scrolling, so the vertical
   rhythm here is deliberately compressed. */
.vsl-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 1.8vw, 22px);
  padding: clamp(16px, 2vw, 24px) 0 clamp(40px, 6vw, 72px);
  text-align: center;
}

.vsl-inner {
  width: min(var(--content-w), calc(100% - 48px));
  margin-inline: auto;
}

/* ---- Evergreen countdown — slim full-width top bar ---- */

.vsl-countdown-bar {
  width: 100%;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid var(--divider);
}

/* Grid so the timer sits dead-centre in the bar regardless of how wide the
   logo is: [logo][timer][empty]. The empty third column mirrors the first. */
.countdown-bar-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 12px clamp(20px, 4vw, 64px);
}

.countdown-bar-logo {
  justify-self: start;
  display: flex;
  align-items: center;
}

.countdown-bar-logo .site-logo {
  height: 28px;
  width: auto;
}

.countdown-bar-timer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 22px;
}

.countdown-bar-label {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.countdown-inline {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cd-unit {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
}

.cd-unit b {
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  color: var(--main);
  font-variant-numeric: tabular-nums;
}

.cd-unit i {
  font-style: normal;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
}

.cd-sep {
  font-size: 20px;
  line-height: 1;
  color: var(--hairline);
}

/* ---- Offer-expired notice ---- */

.offer-expired {
  width: min(620px, 100%);
  margin-inline: auto;
  padding: 26px 30px;
  border: 1px solid rgba(255, 138, 122, 0.35);
  border-radius: var(--radius);
  background: rgba(255, 138, 122, 0.07);
}

.offer-expired h2 {
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 700;
  line-height: 1.15;
  color: #ff8a7a;
  margin-bottom: 10px;
}

.offer-expired-body,
.offer-expired-body p {
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.6;
  color: var(--text-muted);
}

.offer-expired-body p + p {
  margin-top: 10px;
}

/* ---- Title ---- */

.vsl-title {
  width: 100%;
}

/* 38px is one step below the 40px at which this headline spills onto a 4th
   line at --content-w, so it stays 3 lines with a little room to spare. */
.vsl-title h1,
.vsl-title h2 {
  font-size: clamp(26px, 2.6vw, 38px);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--text);
  text-shadow: 0 0 40px rgba(85, 226, 163, 0.18);
}

/* Green highlight words — wrap them in <strong> or .highlight. */
.vsl-title strong,
.vsl-title .highlight {
  color: var(--main);
  font-weight: 700;
}

.vsl-title p {
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.6;
  color: var(--text-muted);
  margin-top: 18px;
}

/* ---- Vidalytics video ---- */

.vsl-video {
  width: 100%;
}

.vsl-embed {
  width: min(var(--content-w), calc(100% - 48px));
  margin-inline: auto;
  border-radius: var(--radius);
  overflow: hidden;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.5));
}

.vsl-embed > *,
.vsl-embed iframe,
.vsl-embed video {
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: auto;
}

/* Fallback 16:9 frame shown until the embed is filled in. */
.vsl-embed-placeholder {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  background: var(--surface);
  border: 1px solid var(--hairline);
  color: var(--text-dim);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---- CTA ---- */

.vsl-cta {
  width: 100%;
  display: flex;
  justify-content: center;
}

.vsl-cta p {
  margin: 0;
}

/* ============================================================
   VIDALYTICS IN-PLAYER CTA
   ------------------------------------------------------------
   Restyles the button Vidalytics renders below the video to match
   the TargetVest button.

   IMPORTANT — the player positions this button itself:
     .CallToAction__button {
       position: absolute; top: 50%; left: 50%;
       transform: translate(-50%, -50%); display: block;
     }
   so NOTHING here may touch position / top / left / transform /
   display. Overriding position turns the player's 50% offsets into
   relative shifts and throws the button off to the side. Only paint
   properties are set, and they carry !important because the player
   styles this button from its own stylesheet.

   Both class names are targeted: the player emits its internal
   .CallToAction__button plus the public .vidalytics-cta-button alias.
   ============================================================ */

.vidalytics-cta-button-container .vidalytics-cta-button,
.vidalytics-cta-button-container .CallToAction__button {
  background: var(--main-dark) !important;
  border: 0 !important;
  border-radius: var(--radius) !important;
  outline: 2px solid var(--main-dark) !important;
  outline-offset: 2px;
  color: var(--bg) !important;
  font-family: "Lexend", sans-serif !important;
  font-weight: 600 !important;
  text-transform: none;
  text-decoration: none !important;
  cursor: pointer;
  transition:
    background 0.2s ease,
    outline-color 0.2s ease;
}

.vidalytics-cta-button-container .vidalytics-cta-button:hover,
.vidalytics-cta-button-container .CallToAction__button:hover {
  background: var(--main) !important;
  outline-color: var(--main) !important;
}

/* ============================================================
   FOOTER
   ============================================================ */

.site-footer {
  background: var(--bg);
  border-top: 1px solid var(--hairline);
  padding: 24px clamp(20px, 4vw, 64px) 40px;
}

/* Footer content tracks the page column (same 1120px as .vsl-inner) instead
   of stretching to the viewport edges. */
.footer-inner {
  width: min(1120px, 100%);
  margin-inline: auto;
}

.footer-top {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: space-between;
  padding: 24px 0 32px;
}

.footer-brand .footer-logo {
  height: 32px;
  width: auto;
  margin-bottom: 28px;
}

.footer-tagline {
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 700;
  line-height: 1.25;
  color: var(--text-body);
}

.footer-legal-heading {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.footer-legal-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
}

.footer-legal-links a {
  font-size: 15px;
  color: var(--text-body);
  transition: color 0.2s ease;
}

.footer-legal-links a:hover {
  color: var(--main);
}

.footer-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 40px;
  align-items: center;
  border-top: 1px solid var(--divider);
  padding-top: 20px;
}

.footer-contact-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--text-muted);
}

/* The rounded square each contact icon sits in. */
.footer-contact-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: var(--radius);
  background: var(--surface);
}

/* The two icon SVGs have different aspect ratios (31x24, 26x32), so cap them
   rather than forcing a square, which would distort both. */
.footer-contact-icon img {
  width: auto;
  height: auto;
  max-width: 16px;
  max-height: 16px;
}

.footer-contact a {
  color: var(--main);
  transition: opacity 0.2s ease;
}

.footer-contact a:hover {
  opacity: 0.8;
}

/* ============================================================
   REVEAL ANIMATION
   ============================================================ */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.65s ease,
    transform 0.65s ease;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================
   SHORT VIEWPORTS — keep the in-player CTA above the fold
   ------------------------------------------------------------
   The video is 16:9 at --content-w, and Vidalytics adds a 200px
   band below it for the CTA button. At the full 960px column the
   bottom of that band lands ~974px down the page, which is below
   the fold on a laptop. These rules shrink the shared column (and
   the headline with it, so it still breaks onto 3 lines) as the
   viewport gets shorter.

   Measured bottom edge of the video + CTA band:
     960px column -> 974px    820px column -> 874px
     900px column -> 933px    760px column -> 833px
     860px column -> 903px    720px column -> 803px

   Delete this block to keep the video at full size everywhere and
   let the CTA fall below the fold on short screens.
   ============================================================ */

@media (max-height: 950px) {
  :root {
    --content-w: 820px;
  }

  .vsl-title h1,
  .vsl-title h2 {
    font-size: clamp(24px, 2.2vw, 32px);
  }
}

@media (max-height: 880px) {
  :root {
    --content-w: 760px;
  }

  .vsl-title h1,
  .vsl-title h2 {
    font-size: clamp(24px, 2vw, 30px);
  }
}

@media (max-height: 820px) {
  :root {
    --content-w: 720px;
  }

  .vsl-title h1,
  .vsl-title h2 {
    font-size: clamp(23px, 1.9vw, 28px);
  }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 680px) {
  .container {
    width: min(100% - 32px, var(--container));
  }

  .vsl-inner {
    width: calc(100% - 32px);
  }

  /* Keep the video off the screen edges — same 16px gutter as .vsl-inner,
     so the embed lines up with the title above it. */
  .vsl-embed {
    width: calc(100% - 32px);
  }

  .countdown-bar-inner {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 10px;
    padding: 11px 16px;
  }

  .countdown-bar-logo {
    justify-self: center;
  }

  .countdown-bar-timer {
    gap: 6px 14px;
  }

  .countdown-bar-label {
    font-size: 12px;
  }

  .cd-unit b {
    font-size: 19px;
  }

  .cd-sep {
    font-size: 17px;
  }

  .footer-top {
    flex-direction: column;
    gap: 32px;
  }
}