@font-face {
  font-family: "Nunito Sans Local";
  src: url("public/assets/fonts/nunito-sans-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Nunito Sans Local";
  src: url("public/assets/fonts/nunito-sans-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Nunito Sans Local";
  src: url("public/assets/fonts/nunito-sans-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}

:root {
  --cl7-bg: #11131b;
  --cl7-panel: #1b1f2b;
  --cl7-panel-soft: #222939;
  --cl7-border: #2f3b52;
  --cl7-green: #188d45;
  --cl7-green-dark: #106d34;
  --cl7-green-soft: #1fa257;
  --cl7-text: #f4f7ff;
  --cl7-text-soft: #c2c8d8;
  --cl7-accent: #ffd440;
  --cl7-shadow: 0 14px 30px rgba(5, 10, 20, 0.35);
  --cl7-radius: 16px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(circle at 12% 14%, #263d58 0%, #161a27 36%, #10131c 100%);
  color: var(--cl7-text);
  font-family: "Nunito Sans Local", "Segoe UI", sans-serif;
  line-height: 1.55;
}

a {
  color: #9adfbc;
}

.cl7-site {
  min-height: 100vh;
}

.cl7-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: 308px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  padding: 16px 14px 14px;
  background: linear-gradient(180deg, #178640 0%, #146e35 38%, #0f5229 100%);
  box-shadow: 10px 0 26px rgba(7, 15, 11, 0.35);
  z-index: 30;
}

.cl7-sidebar-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4px 0 2px;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.cl7-sidebar-logo img {
  width: 100%;
  max-width: 252px;
  height: auto;
  display: block;
  object-fit: contain;
  filter: none;
}

.cl7-sidebar-actions {
  display: grid;
  gap: 8px;
}

.cl7-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  padding: 10px 16px;
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.cl7-btn:hover,
.cl7-btn:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.24);
}

.cl7-btn-primary {
  background: linear-gradient(180deg, #ffd966 0%, #f8ba1e 100%);
  color: #1f1706;
}

.cl7-btn-outline {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(245, 255, 242, 0.55);
  color: #f7fff6;
}

.de-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px;
  border-radius: var(--cl7-radius);
  background: rgba(12, 41, 20, 0.52);
  border: 1px solid rgba(213, 241, 216, 0.2);
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.de-sidebar-nav a {
  color: #ebffed;
  text-decoration: none;
  padding: 8px 10px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1.28;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid transparent;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.de-sidebar-nav a:hover,
.de-sidebar-nav a:focus-visible {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(226, 248, 227, 0.28);
}

.cl7-sidebar-note {
  margin: auto 0 0;
  padding: 14px;
  border-radius: 14px;
  background: rgba(5, 20, 12, 0.42);
  color: #d9f8dd;
  font-size: 0.83rem;
}

.cl7-main {
  --cl7-main-pad-inline: clamp(16px, 2.2vw, 30px);
  --cl7-main-section-gap: 20px;
  margin-left: 308px;
  padding: clamp(16px, 2.2vw, 30px) var(--cl7-main-pad-inline) 16px;
}

.cl7-main-inner {
  max-width: 1520px;
  margin: 0 auto;
}

.cl7-top-alert {
  margin: 0;
  padding: 9px 16px;
  border-radius: 10px;
  background: #0e6f31;
  color: #d7f3df;
  font-size: 0.84rem;
}

.cl7-top-strip {
  margin-top: 18px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(160, 220, 175, 0.28);
}

.cl7-top-strip-main {
  background: #239245;
  padding: 16px clamp(12px, 2vw, 24px);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
}

.cl7-top-strip-brand img {
  width: min(280px, 100%);
  height: auto;
  border-radius: 0;
  box-shadow: none;
}

.cl7-login-mock {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.cl7-login-mock input {
  width: clamp(170px, 17vw, 220px);
  border: 0;
  background: #f1f3f5;
  border-radius: 8px;
  padding: 13px 12px;
  font: inherit;
  color: #202630;
}

.cl7-login-mock button {
  min-width: 140px;
  border: 2px solid rgba(255, 255, 255, 0.55);
  background: #127d3a;
  color: #ecffe8;
  padding: 12px 16px;
  font: inherit;
  font-weight: 800;
  letter-spacing: 0.08em;
  border-radius: 8px;
}

.cl7-login-help {
  width: 100%;
  text-align: right;
  color: #ecffef;
  font-size: 0.85rem;
}

.cl7-top-strip-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  background: #ffffff;
  padding: 8px 10px;
}

.cl7-top-strip-nav span {
  color: #171b24;
  text-transform: uppercase;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 6px 10px;
  border-radius: 8px;
}

.cl7-top-strip-nav span.is-active {
  background: #188d45;
  color: #ffffff;
}

.cl7-hero {
  margin-top: 0;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  min-height: 380px;
  height: clamp(320px, 36vw, 430px);
  box-shadow: var(--cl7-shadow);
}

.cl7-hero picture {
  position: absolute;
  inset: 0;
  display: block;
}

.cl7-hero img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cl7-hero-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 3vw, 28px);
  background: linear-gradient(90deg, rgba(7, 14, 28, 0.65), rgba(9, 18, 38, 0.32) 45%, rgba(8, 18, 32, 0.58));
}

.cl7-hero-card {
  max-width: 620px;
  width: min(90%, 620px);
  text-align: center;
  background: rgba(11, 18, 31, 0.74);
  border: 1px solid rgba(163, 194, 255, 0.22);
  border-radius: 18px;
  padding: clamp(16px, 2.2vw, 24px);
  backdrop-filter: blur(2px);
}

.cl7-hero-card h1 {
  margin: 0 0 12px;
  line-height: 1.2;
  font-size: clamp(1.55rem, 2.8vw, 2.5rem);
}

.cl7-hero-card p {
  margin: 0 0 16px;
  font-size: 1.03rem;
  color: #e5e9f4;
}

.cl7-main section {
  margin-top: var(--cl7-main-section-gap);
  margin-bottom: var(--cl7-main-section-gap);
}

/* Keep first content block top gap equal to main inline padding */
.cl7-main-inner > :first-child {
  margin-top: 0;
}

.cl7-card {
  background: linear-gradient(160deg, #171c2a 0%, #141925 100%);
  border: 1px solid var(--cl7-border);
  border-radius: var(--cl7-radius);
  padding: clamp(14px, 2vw, 22px);
  box-shadow: var(--cl7-shadow);
}

.cl7-accordion button {
  width: 100%;
  border: 1px solid rgba(170, 245, 192, 0.36);
  border-radius: 14px;
  background: linear-gradient(180deg, #1a9d49 0%, #157c3c 100%);
  color: #f4fff4;
  font: inherit;
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 14px 16px;
  text-align: left;
}

.cl7-accordion ul {
  margin: 12px 0 0;
  padding: 12px;
  list-style: none;
  border-radius: 12px;
  background: #121f17;
  border: 1px solid rgba(128, 193, 142, 0.26);
  columns: 2;
  column-gap: 18px;
}

.cl7-accordion li {
  margin-bottom: 8px;
}

.cl7-accordion a {
  color: #d8f8dc;
  text-decoration: none;
  font-weight: 700;
}

.cl7-section-head {
  margin: 0 0 12px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.cl7-section-head h2 {
  margin: 0;
  font-size: clamp(1.4rem, 2vw, 2rem);
  line-height: 1.2;
}

.cl7-slots-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}

.cl7-slot-card {
  position: relative;
  aspect-ratio: 432 / 580;
  min-height: 0;
  border-radius: 13px;
  overflow: hidden;
  border: 0;
  box-shadow: 0 12px 22px rgba(0, 0, 0, 0.34);
  transition: box-shadow 0.2s ease, outline-color 0.2s ease;
  background: radial-gradient(circle at 24% 16%, #25324d 0%, #0f1625 52%, #0b1020 100%);
  outline: 1px solid transparent;
}

.cl7-slot-card:hover,
.cl7-slot-card.is-active {
  box-shadow: 0 18px 34px rgba(2, 7, 16, 0.56);
  outline-color: rgba(168, 207, 255, 0.34);
}

.cl7-slot-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.cl7-slot-reveal {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.8);
  color: #ffffff;
  background: rgba(6, 10, 18, 0.56);
  font-size: 1.15rem;
  font-weight: 800;
  cursor: pointer;
}

.cl7-slot-actions {
  position: absolute;
  inset: auto 8px 8px;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 6px;
  border-radius: 12px;
  background: rgba(8, 14, 28, 0.68);
  border: 1px solid rgba(173, 206, 255, 0.18);
  backdrop-filter: blur(4px);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.cl7-slot-card.is-active .cl7-slot-actions {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.cl7-slot-card.is-active .cl7-slot-reveal {
  display: none;
}

.cl7-slot-actions a,
.cl7-slot-actions button {
  min-height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
  transition: filter 0.2s ease, box-shadow 0.2s ease;
}

.cl7-slot-actions a:hover,
.cl7-slot-actions button:hover,
.cl7-slot-actions a:focus-visible,
.cl7-slot-actions button:focus-visible {
  filter: brightness(1.06);
  box-shadow: 0 8px 14px rgba(0, 0, 0, 0.32);
}

.cl7-slot-actions a {
  background: linear-gradient(180deg, #ffe98d 0%, #ffc831 46%, #ef9f11 100%);
  color: #271c05;
}

.cl7-slot-actions button {
  background: linear-gradient(180deg, #2ec66b 0%, #1d954e 100%);
  color: #f3fff6;
}

.cl7-overview-table,
.cl7-pay-table {
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid #30415b;
  background: #121724;
}

.cl7-overview-table th,
.cl7-overview-table td,
.cl7-pay-table th,
.cl7-pay-table td {
  text-align: left;
  padding: 11px 12px;
  border-bottom: 1px solid #29344b;
}

.cl7-overview-table th,
.cl7-pay-table th {
  width: 40%;
  color: #ebf2ff;
  font-weight: 700;
  background: rgba(32, 42, 61, 0.7);
}

.cl7-overview-table tr:last-child th,
.cl7-overview-table tr:last-child td,
.cl7-pay-table tr:last-child th,
.cl7-pay-table tr:last-child td {
  border-bottom: 0;
}

.cl7-rich p,
.cl7-rich ul,
.cl7-rich ol {
  margin-top: 0;
  margin-bottom: 12px;
  color: var(--cl7-text-soft);
}

.cl7-rich ul,
.cl7-rich ol {
  padding-left: 18px;
}

.cl7-rich strong {
  color: #f7fbff;
}

.cl7-cta-banner {
  position: relative;
  min-height: clamp(210px, 24vw, 280px);
  border-radius: var(--cl7-radius);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.cl7-cta-banner img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  display: block;
}

.cl7-cta-content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 1.8vw, 18px);
}

.cl7-cta-content-inner {
  width: min(90%, 520px);
  text-align: center;
  background: rgba(13, 20, 35, 0.76);
  border: 1px solid rgba(167, 199, 252, 0.22);
  border-radius: 14px;
  padding: clamp(12px, 1.8vw, 18px);
  display: grid;
  gap: 10px;
}

.cl7-cta-content-inner h3 {
  margin: 0;
  line-height: 1.18;
  font-size: clamp(1.12rem, 1.55vw, 1.42rem);
}

.cl7-cta-content-inner p {
  margin: 0;
  color: #d8def0;
  max-width: 42ch;
  margin-inline: auto;
  line-height: 1.34;
  font-size: clamp(0.96rem, 1.05vw, 1.05rem);
}

.cl7-cta-content-inner .cl7-btn {
  width: fit-content;
  max-width: min(100%, 300px);
  min-width: 0;
  min-height: 44px;
  padding: 10px 18px;
  font-size: clamp(1rem, 1.4vw, 1.08rem);
  line-height: 1.15;
  letter-spacing: 0.01em;
  box-shadow: 0 10px 20px rgba(8, 12, 20, 0.24);
  justify-self: center;
}

.cl7-auth-stack {
  display: grid;
  gap: 18px;
}

.cl7-auth-shot {
  margin: 0;
  display: grid;
  justify-items: center;
  gap: 10px;
}

.cl7-auth-shot img {
  width: min(100%, 640px);
  height: auto;
  object-fit: contain;
  display: block;
  border-radius: 14px;
  border: 1px solid rgba(175, 198, 235, 0.2);
  box-shadow: var(--cl7-shadow);
}

.cl7-auth-shot figcaption {
  color: #d2dbef;
  font-size: 0.95rem;
}

.cl7-grid-two {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cl7-pros,
.cl7-cons {
  background: #131a28;
  border: 1px solid #2a3550;
  border-radius: 14px;
  padding: 14px;
}

.cl7-pros h3,
.cl7-cons h3 {
  margin: 0 0 10px;
}

.cl7-pros ul,
.cl7-cons ul {
  margin: 0;
  padding-left: 18px;
}

.cl7-pay-layout {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cl7-calc-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cl7-calc-grid label {
  display: grid;
  gap: 7px;
  font-weight: 700;
  color: #e8f0ff;
}

.cl7-calc-grid input {
  width: 100%;
  border-radius: 10px;
  border: 1px solid #395278;
  background: #101624;
  color: #edf5ff;
  font: inherit;
  padding: 10px;
}

#qtd-calcolatore .cl7-calc-result {
  margin-top: 20px;
  background: #0f3421;
  border: 1px solid #2f8f5e;
  border-radius: 12px;
  padding: 14px;
}

/* Preserve clear rhythm between calculator result card and following text. */
#qtd-calcolatore .cl7-calc-result + :is(p, ul, ol, div, section, article) {
  margin-top: clamp(16px, 2vw, 24px);
}

/* Keep spacing after payments table layout before the next text block. */
#qtd-pagamenti .cl7-pay-layout + :is(p, ul, ol, div, section, article) {
  margin-top: clamp(16px, 2vw, 24px);
}

.cl7-calc-result p {
  margin: 0;
}

.cl7-calc-value {
  display: inline-block;
  margin-top: 4px;
  font-size: 1.28rem;
  font-weight: 800;
  color: #bff6d0;
}

.cl7-faq details {
  border: 1px solid #30415f;
  border-radius: 12px;
  background: #121a29;
  margin-bottom: 10px;
}

.cl7-faq summary {
  cursor: pointer;
  font-weight: 700;
  padding: 12px 14px;
  list-style: none;
}

.cl7-faq summary::-webkit-details-marker {
  display: none;
}

.cl7-faq .cl7-answer {
  padding: 0 14px 13px;
  color: #c7d1e6;
}

.cl7-demo-modal[hidden] {
  display: none;
}

.cl7-demo-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(5, 9, 16, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.cl7-demo-dialog {
  width: min(960px, 100%);
  background: #121927;
  border: 1px solid #3a4f72;
  border-radius: 16px;
  padding: 14px;
  box-shadow: var(--cl7-shadow);
  display: grid;
  gap: 10px;
}

.cl7-demo-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.cl7-demo-top h3 {
  margin: 0;
}

.cl7-demo-close {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid #7288ad;
  background: #1a2539;
  color: #f9fbff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.cl7-demo-frame {
  border: 0;
  width: 100%;
  min-height: 62vh;
  border-radius: 10px;
}

.cl7-footer {
  margin-top: 20px;
  border-top: 1px solid #32435e;
  padding-top: 16px;
  padding-bottom: 6px;
  color: #c7d2ea;
  font-size: 0.92rem;
}

.cl7-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-bottom: 8px;
}

.cl7-footer-links a {
  color: #e5efff;
}

.cl7-footer-meta {
  margin: 0;
}

.cl7-floating-banner[hidden] {
  display: none;
}

.cl7-floating-banner {
  position: fixed;
  left: max(10px, calc(308px + 10px));
  right: 10px;
  bottom: 10px;
  z-index: 95;
  background: linear-gradient(110deg, #17a049, #106c33);
  border: 1px solid rgba(236, 255, 236, 0.42);
  border-radius: 13px;
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.36);
  padding: 12px 46px 12px 12px;
}

.cl7-floating-banner p {
  margin: 0 0 8px;
  color: #f4fff5;
  font-weight: 700;
}

.cl7-floating-banner .cl7-btn {
  min-height: 46px;
  min-width: 212px;
}

.cl7-floating-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: rgba(7, 25, 14, 0.52);
  color: #ffffff;
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
}

:where(main, [data-main-content], [role="main"], .cp-main, .rb-main)
  :is(table, [class*="table"], [class*="grid"], [class*="slot"], [class*="review"], [class*="banner"], [data-review-slider], [data-cta-banner])
  + :is(p, ul, ol, div, section, article):not([data-slot-card]):not(.cl7-slot-card) {
  margin-top: clamp(16px, 2vw, 24px);
}

@media (max-width: 1220px) {
  .cl7-sidebar {
    width: 272px;
  }

  .cl7-main {
    margin-left: 272px;
  }

  .cl7-floating-banner {
    left: max(10px, calc(272px + 8px));
  }
}

@media (max-width: 1023px) {
  .cl7-sidebar {
    position: sticky;
    width: 100%;
    inset: 0 0 auto;
    padding: 14px;
    box-shadow: none;
    border-bottom: 1px solid rgba(233, 255, 233, 0.24);
  }

  .de-sidebar-nav,
  .cl7-sidebar-note {
    display: none;
  }

  .cl7-sidebar-logo {
    justify-content: center;
    width: 100%;
    max-width: 100%;
    padding: 2px 0 0;
    margin: 0 auto;
  }

  .cl7-sidebar-logo img {
    width: min(238px, 72vw);
    height: auto;
  }

  .cl7-sidebar-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cl7-main {
    --cl7-main-section-gap: var(--cl7-main-pad-inline);
    margin-left: 0;
    padding-top: var(--cl7-main-pad-inline);
  }

  .cl7-top-strip-main {
    grid-template-columns: 1fr;
    padding: 12px;
  }

  .cl7-login-mock {
    display: none;
  }

  .cl7-accordion ul {
    columns: 1;
  }

  .cl7-top-strip-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 6px 8px;
  }

  .cl7-top-strip-nav span {
    white-space: nowrap;
    font-size: 0.72rem;
    padding: 5px 8px;
  }

  .cl7-hero {
    height: clamp(430px, 118vw, 560px);
    min-height: clamp(430px, 118vw, 560px);
  }

  .cl7-hero-card {
    width: min(94%, 520px);
    padding: 14px;
  }

  .cl7-hero-card h1 {
    font-size: clamp(1.18rem, 5.2vw, 1.6rem);
  }

  .cl7-hero-card p {
    font-size: 0.93rem;
    margin-bottom: 12px;
  }

  .cl7-slots-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .cl7-grid-two,
  .cl7-pay-layout,
  .cl7-calc-grid {
    grid-template-columns: 1fr;
  }

  .cl7-overview-table,
  .cl7-pay-table {
    font-size: 0.86rem;
  }

  .cl7-overview-table th,
  .cl7-overview-table td,
  .cl7-pay-table th,
  .cl7-pay-table td {
    padding: 8px 8px;
    word-break: break-word;
  }

  /* Mobile CTA guard: overlay card must stay fully inside banner bounds. */
  .cl7-cta-banner {
    min-height: clamp(260px, 72vw, 332px);
  }

  .cl7-cta-content {
    padding: 8px;
    align-items: center;
  }

  .cl7-cta-content-inner {
    width: min(94%, 500px);
    max-width: 500px;
    max-height: none;
    padding: 12px 10px;
    gap: 8px;
    overflow: visible;
  }

  .cl7-cta-content-inner h3 {
    font-size: clamp(1.02rem, 4.5vw, 1.22rem);
  }

  .cl7-cta-content-inner p {
    font-size: clamp(0.88rem, 3.5vw, 0.98rem);
    line-height: 1.33;
  }

  .cl7-cta-content-inner .cl7-btn {
    width: fit-content;
    max-width: min(100%, 240px);
    min-height: 40px;
    padding: 8px 14px;
    font-size: clamp(0.92rem, 3.6vw, 1rem);
    line-height: 1.15;
  }

  .cl7-demo-modal {
    padding: 0;
  }

  .cl7-demo-dialog {
    width: 100%;
    min-height: 100vh;
    border-radius: 0;
    border: 0;
    padding: 12px;
  }

  .cl7-demo-frame {
    min-height: 74vh;
  }

  .cl7-floating-banner {
    left: 8px;
    right: 8px;
    bottom: 8px;
    padding-right: 42px;
  }

  .cl7-floating-banner .cl7-btn {
    min-width: 0;
    width: 100%;
  }
}