/* ──────────────────────────────────────────────────────────────
   Tavvlo — Products mega-dropdown
   Sits inside the Webflow dropdown shell (.nav-link-dropdown >
   .dropdown-nav > .dropdown-content-wrap > .dropdown-content >
   .dropdown-inner-content), so open/close behaviour and the panel
   chrome come from webflow.js + the exported Webflow CSS.
   Everything below is scoped to .tv-prod-* so it can never collide
   with a future Webflow re-export.
   ────────────────────────────────────────────────────────────── */

/* The template's inner panel is a 3-column row built for the "Pages"
   mega-menu. We stack it instead: product grid, then a footer strip. */
.dropdown-inner-content.tv-prod-inner {
  flex-flow: column;
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: 14px;
  padding: 18px;
  width: 640px;
  max-width: 100%;
}

.tv-prod-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
}

.tv-prod-item {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 14px;
  border: 1px solid var(--color-palette--strok-1, #ffffff14);
  border-radius: 14px;
  background-color: #ffffff05;
  text-decoration: none;
  transition: background-color .22s ease, border-color .22s ease, transform .22s ease;
}

.tv-prod-item:hover,
.tv-prod-item:focus-visible {
  background-color: #ffffff0d;
  border-color: #88ef5659;
  transform: translateY(-2px);
  outline: none;
}

.tv-prod-ico {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid #88ef5633;
  border-radius: 11px;
  background-color: #88ef561f;
  color: var(--color-palette--primary, #88ef56);
  transition: background-color .22s ease;
}

.tv-prod-item:hover .tv-prod-ico { background-color: #88ef5630; }

.tv-prod-ico svg { width: 19px; height: 19px; display: block; }

.tv-prod-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

.tv-prod-name {
  margin: 0;
  color: var(--color-palette--text-primary, #fff);
  font-family: Inter, sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 120%;
  letter-spacing: -.01em;
}

.tv-prod-desc {
  margin: 0;
  color: var(--color-palette--text-secondary, #bdbdbd);
  font-family: Inter, sans-serif;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 145%;
  opacity: .82;
}

/* Footer strip — reuses the template's dropdown-button-block look. */
.tv-prod-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--color-palette--strok-1, #ffffff14);
  border-radius: 12px;
  background-color: #252525;
}

.tv-prod-foot-text {
  margin: 0;
  color: var(--color-palette--text-secondary, #bdbdbd);
  font-family: Inter, sans-serif;
  font-size: 12.5px;
  line-height: 140%;
}

.tv-prod-foot-link {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-palette--primary, #88ef56);
  font-family: Inter, sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.tv-prod-foot-link:hover { text-decoration: underline; }

/* ── Responsive ──────────────────────────────────────────────
   At <=991px the Webflow dropdown goes static inside the collapsed
   mobile menu, so the panel has to shrink to the menu width. */
@media screen and (max-width: 991px) {
  /* .dropdown-content-wrap centres its child, which makes .dropdown-content
     shrink-to-fit — so width:100% on the panel resolves against nothing and
     the card grid pushes the panel wider than the collapsed menu. Stretch the
     chain so the panel can never exceed the mobile menu width. */
  /* .nav-menu is padded 15px on the left and 0 on the right when collapsed,
     so balance it here or the panel's right border sits off-screen. */
  .tv-prod-dropdown .dropdown-content-wrap { align-items: stretch; width: 100%; padding-right: 15px; }
  .tv-prod-dropdown .dropdown-content { width: 100%; }

  .dropdown-inner-content.tv-prod-inner {
    width: 100%;
    min-width: 0;
    padding: 14px;
  }

  .tv-prod-item { min-width: 0; }
}

@media screen and (max-width: 767px) {
  .tv-prod-grid { grid-template-columns: 1fr; }
  .tv-prod-foot { flex-direction: column; align-items: flex-start; }
}

/* ── Product page bits (shared by the four product pages) ──── */
.tv-pp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}

.tv-pp-card {
  padding: 26px;
  border: 1px solid var(--color-palette--strok-1, #ffffff14);
  border-radius: 18px;
  background-color: #ffffff05;
  transition: border-color .22s ease, background-color .22s ease;
}

.tv-pp-card:hover { border-color: #88ef5640; background-color: #ffffff08; }

.tv-pp-card-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 16px;
  border: 1px solid #88ef5633;
  border-radius: 12px;
  background-color: #88ef561f;
  color: var(--color-palette--primary, #88ef56);
}

.tv-pp-card-ico svg { width: 21px; height: 21px; display: block; }

.tv-pp-card-title {
  margin: 0 0 10px;
  color: #fff;
  font-family: Inter, sans-serif;
  font-size: 19px;
  font-weight: 600;
  line-height: 125%;
  letter-spacing: -.02em;
}

.tv-pp-card-text {
  margin: 0;
  color: var(--color-palette--text-secondary, #bdbdbd);
  font-family: Inter, sans-serif;
  font-size: 14.5px;
  line-height: 160%;
}

.tv-pp-list { margin: 14px 0 0; padding: 0; list-style: none; }

.tv-pp-list li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 9px;
  color: var(--color-palette--text-secondary, #bdbdbd);
  font-family: Inter, sans-serif;
  font-size: 14.5px;
  line-height: 155%;
}

.tv-pp-list li:last-child { margin-bottom: 0; }

.tv-pp-list li:before {
  content: "";
  position: absolute;
  left: 6px;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-palette--primary, #88ef56);
}

/* Chip row — used for "what it analyses" style enumerations. */
.tv-pp-chips { display: flex; flex-wrap: wrap; gap: 9px; }

.tv-pp-chip {
  padding: 8px 15px;
  border: 1px solid var(--color-palette--strok-1, #ffffff14);
  border-radius: 999px;
  background-color: #ffffff05;
  color: var(--color-palette--text-secondary, #bdbdbd);
  font-family: Inter, sans-serif;
  font-size: 13.5px;
  line-height: 100%;
  white-space: nowrap;
}

.tv-pp-chip.accent { border-color: #88ef5640; color: var(--color-palette--primary, #88ef56); }

/* Question bubbles for the chat product page. */
.tv-pp-ask {
  padding: 13px 18px;
  border: 1px solid var(--color-palette--strok-1, #ffffff14);
  border-radius: 14px 14px 14px 4px;
  background-color: #ffffff08;
  color: #fff;
  font-family: Inter, sans-serif;
  font-size: 14.5px;
  line-height: 145%;
}

.tv-pp-section-lead {
  max-width: 720px;
  margin: 0 0 34px;
  color: var(--color-palette--text-secondary, #bdbdbd);
  font-family: Inter, sans-serif;
  font-size: 16px;
  line-height: 165%;
}

.tv-pp-stack { display: flex; flex-direction: column; gap: 60px; }

/* Plain section wrapper — .about-section carries a background image that
   we only want on the first content block of a page. */
.tv-pp-section { width: 100%; padding: 92px 0; overflow: hidden; }
.tv-pp-section.tight { padding-top: 0; }

.tv-pp-head { max-width: 780px; margin-bottom: 42px; }
/* .badge is display:flex, so it stretches unless the parent constrains it —
   elsewhere on the site it sits in an align-items:flex-start column. */
.tv-pp-head .badge { width: -moz-fit-content; width: fit-content; margin-bottom: 18px; }
.tv-pp-head .section-title { margin: 0 0 16px; }
.tv-pp-head .tv-pp-section-lead { margin-bottom: 0; }

/* Two-column split used for Reviews vs Complaints. */
.tv-pp-split { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.tv-pp-panel {
  padding: 32px;
  border: 1px solid var(--color-palette--strok-1, #ffffff14);
  border-radius: 20px;
  background-color: #ffffff05;
}

.tv-pp-panel-title {
  margin: 0 0 6px;
  color: #fff;
  font-family: Inter, sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 120%;
  letter-spacing: -.02em;
}

/* Rating spread row (5★ … 1★). */
.tv-pp-stars { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

.tv-pp-star {
  flex: 1 1 90px;
  padding: 14px;
  border: 1px solid var(--color-palette--strok-1, #ffffff14);
  border-radius: 12px;
  background-color: #ffffff05;
  text-align: center;
  color: var(--color-palette--text-secondary, #bdbdbd);
  font-family: Inter, sans-serif;
  font-size: 13px;
  line-height: 130%;
}

.tv-pp-star b {
  display: block;
  margin-bottom: 4px;
  color: var(--color-palette--primary, #88ef56);
  font-size: 17px;
  font-weight: 600;
}

/* Closing CTA band. */
.tv-pp-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 44px;
  border: 1px solid #88ef5633;
  border-radius: 22px;
  background-color: #88ef560d;
}

.tv-pp-cta-title {
  margin: 0 0 8px;
  color: #fff;
  font-family: Inter, sans-serif;
  font-size: 28px;
  font-weight: 600;
  line-height: 118%;
  letter-spacing: -.03em;
}

.tv-pp-cta-text {
  margin: 0;
  max-width: 520px;
  color: var(--color-palette--text-secondary, #bdbdbd);
  font-family: Inter, sans-serif;
  font-size: 15px;
  line-height: 160%;
}

.tv-pp-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.tv-pp-btn {
  display: inline-flex;
  align-items: center;
  padding: 14px 28px;
  border: 1px solid var(--color-palette--primary, #88ef56);
  border-radius: 11px;
  background-color: var(--color-palette--primary, #88ef56);
  color: #0a0a0a;
  font-family: Inter, sans-serif;
  font-size: 14.5px;
  font-weight: 700;
  text-decoration: none;
  transition: opacity .2s ease;
}

.tv-pp-btn:hover { opacity: .88; }

.tv-pp-btn.ghost {
  border-color: #ffffff2e;
  background-color: #0000;
  color: #fff;
  font-weight: 600;
}

.tv-pp-btn.ghost:hover { border-color: #ffffff5c; opacity: 1; }

@media screen and (max-width: 991px) {
  .tv-pp-section { padding: 64px 0; }
  .tv-pp-split { grid-template-columns: 1fr; }
  .tv-pp-panel { padding: 24px; }
  .tv-pp-cta { padding: 32px; }
}