/* Demo, contact and proof components. Uses the tokens from site.css. */

/* ── Section label on dark backgrounds ── */
.section-label-dark { background: rgba(10, 158, 143, 0.15); border-color: rgba(10, 158, 143, 0.3); color: #4dd9cb; }

/* ── Text link beside the main buttons ── */
.hero-wa-link {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
  font-size: 0.9rem; font-weight: 600; color: #0b6b35; text-decoration: none;
}
.hero-wa-link:hover { text-decoration: underline; }
.hero-wa-link i { font-size: 1.1rem; color: #1fa851; }

/* ── Hero proof: a real sample estimate ── */
.proof-card {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.proof-head { background: var(--navy); color: #fff; padding: 16px 22px; }
.proof-kicker { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #7fded3; }
.proof-title { font-size: 1.05rem; font-weight: 700; margin-top: 4px; }
.proof-size { font-size: 0.82rem; color: rgba(255, 255, 255, 0.75); margin-top: 2px; }
.proof-body { padding: 8px 22px 4px; }
.proof-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.proof-table th { text-align: start; font-weight: 500; color: var(--muted); padding: 9px 0; border-bottom: 1px solid var(--border); }
.proof-table td { text-align: end; font-weight: 600; color: var(--navy); padding: 9px 0; border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; white-space: nowrap; }
.proof-table tr.is-strong th, .proof-table tr.is-strong td { color: var(--navy); font-weight: 700; }
.proof-total {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  margin: 12px 22px 0; padding: 14px 16px; background: var(--teal-light); border-radius: 10px;
}
.proof-total span { font-size: 0.82rem; color: var(--muted); }
.proof-total strong { font-size: 1.25rem; color: var(--teal-dark); font-variant-numeric: tabular-nums; white-space: nowrap; }
.proof-flow {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 16px 22px 6px;
  font-size: 0.78rem; font-weight: 600; color: var(--navy);
}
.proof-flow span { background: var(--bg2); border: 1px solid var(--border); border-radius: 100px; padding: 4px 11px; }
.proof-flow i { color: var(--teal); font-size: 0.7rem; }
.proof-note { padding: 6px 22px 18px; font-size: 0.78rem; color: var(--muted2); line-height: 1.5; }
.proof-note a { color: var(--teal-dark); font-weight: 600; }

/* ── Walkthrough: numbered steps ── */
.walk-steps { list-style: none; counter-reset: walk; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 44px; padding: 0; }
.walk-step {
  counter-increment: walk; position: relative; background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px 22px 22px 66px; text-align: start;
}
[dir="rtl"] .walk-step { padding: 22px 66px 22px 22px; }
.walk-step::before {
  content: counter(walk); position: absolute; inset-inline-start: 20px; top: 20px;
  width: 32px; height: 32px; border-radius: 50%; background: var(--teal-dark); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.9rem;
}
.walk-step h3 { font-size: 0.98rem; font-weight: 700; color: var(--navy); margin-bottom: 6px; }
.walk-step p { font-size: 0.86rem; color: var(--muted); line-height: 1.6; }
.walk-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 36px; }

/* ── Product video (shown only when a video is configured) ── */
.demo-video { position: relative; max-width: 880px; margin: 44px auto 0; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: var(--navy); box-shadow: var(--shadow-lg); }
.demo-video[hidden] { display: none; }
.demo-video-poster {
  position: absolute; inset: 0; width: 100%; border: 0; cursor: pointer; color: #fff; font: inherit;
  background: linear-gradient(140deg, var(--navy) 0%, #0a2535 100%) center / cover no-repeat;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
}
.demo-video-poster[hidden] { display: none; }
.demo-video-poster .demo-play { pointer-events: none; }
.demo-video-poster:hover .demo-play, .demo-video-poster:focus-visible .demo-play { transform: scale(1.08); }
.demo-video-poster:focus-visible { outline: 3px solid var(--teal); outline-offset: -3px; }
.demo-video-poster span { font-weight: 600; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5); }
.demo-video-stage video, .demo-video-stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.demo-video.is-loading::after {
  content: ''; position: absolute; top: 50%; left: 50%; width: 36px; height: 36px; margin: -18px;
  border: 3px solid rgba(255, 255, 255, 0.25); border-top-color: #fff; border-radius: 50%; animation: demo-spin 0.8s linear infinite;
}
@keyframes demo-spin { to { transform: rotate(360deg); } }
.demo-video-error { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center; color: #fff; }
.demo-video-error[hidden] { display: none; }

/* ── Who is behind it ── */
.trust-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: start; margin-top: 8px; }
.trust-copy p { color: var(--muted); line-height: 1.75; margin-bottom: 14px; }
.trust-copy a { color: var(--teal-dark); font-weight: 600; }
.trust-facts { list-style: none; padding: 0; margin: 0; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.trust-facts li { display: flex; gap: 14px; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.trust-facts li:last-child { border-bottom: 0; }
.trust-facts i { color: var(--teal); margin-top: 3px; width: 18px; text-align: center; }
.trust-facts strong { display: block; color: var(--navy); font-size: 0.92rem; }
.trust-facts span { display: block; color: var(--muted); font-size: 0.84rem; line-height: 1.55; margin-top: 2px; }

/* ── Linked industry cards ── */
a.industry-card { text-decoration: none; display: block; }
.industry-more { display: inline-block; margin-top: 10px; font-size: 0.78rem; font-weight: 600; color: var(--teal-dark); }

/* ── Pricing detail ── */
.price-terms { max-width: 820px; margin: 36px auto 0; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.price-terms table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.price-terms caption { text-align: start; padding: 16px 20px; font-weight: 700; color: var(--navy); background: var(--bg2); border-bottom: 1px solid var(--border); }
.price-terms th { text-align: start; width: 34%; padding: 13px 20px; color: var(--navy); font-weight: 600; vertical-align: top; border-bottom: 1px solid var(--border); }
.price-terms td { padding: 13px 20px; color: var(--muted); line-height: 1.6; border-bottom: 1px solid var(--border); }
.price-terms tr:last-child th, .price-terms tr:last-child td { border-bottom: 0; }
.price-cta { text-align: center; margin-top: 32px; }
.price-cta p { color: var(--muted); margin-bottom: 14px; }
.price-cta .btn { margin: 4px; }

/* ── Estimator follow-up ── */
.est-next { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.est-next-title { font-weight: 700; color: var(--navy); font-size: 0.95rem; }
.est-next-text { font-size: 0.84rem; color: var(--muted); margin: 4px 0 12px; line-height: 1.55; }
.est-uses { list-style: none; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin-top: 18px; font-size: 0.86rem; color: var(--muted); }
.est-uses i { color: var(--teal); margin-inline-end: 6px; }

/* ── Demo request form ── */
.lead-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; position: relative; z-index: 1; }
.lead-copy h2 { color: #fff; font-size: clamp(1.8rem, 3.6vw, 2.5rem); margin-bottom: 14px; }
.lead-copy > p { color: rgba(255, 255, 255, 0.75); font-size: 1.02rem; line-height: 1.7; }
.lead-points { list-style: none; padding: 0; margin: 22px 0 28px; }
.lead-points li { display: flex; gap: 10px; color: rgba(255, 255, 255, 0.88); font-size: 0.93rem; padding: 5px 0; }
.lead-points i { color: #4dd9cb; margin-top: 4px; }
.lead-copy > p.lead-direct-title { color: rgba(255, 255, 255, 0.7); font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 12px; }
.lead-direct { display: flex; flex-direction: column; gap: 10px; }
.lead-direct .contact-card { padding: 12px 16px; min-width: 0; max-width: 340px; width: 100%; }
.lead-form { background: var(--bg); border-radius: 16px; padding: 30px; box-shadow: var(--shadow-lg); }
.lead-form h3 { font-size: 1.2rem; color: var(--navy); margin-bottom: 18px; }
.lead-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.lead-field { margin-bottom: 14px; }
.lead-field label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.lead-optional { font-weight: 400; color: var(--muted2); }
.lead-field input, .lead-field select, .lead-field textarea {
  width: 100%; padding: 12px; font: inherit; font-size: 1rem; color: var(--text);
  background: var(--bg); border: 1px solid var(--border-hi); border-radius: 10px;
}
.lead-field textarea { resize: vertical; min-height: 84px; }
.lead-field input:focus-visible, .lead-field select:focus-visible, .lead-field textarea:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; border-color: var(--teal); }
.lead-field [aria-invalid="true"] { border-color: #be123c; }
/* Hidden without moving it off to one side, which would add sideways scrolling on right-to-left pages. */
.lead-hp { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.lead-submit { width: 100%; justify-content: center; font-size: 1rem; padding: 15px 24px; }
.lead-submit:disabled { opacity: 0.6; cursor: progress; transform: none; }
.lead-privacy { font-size: 0.78rem; color: var(--muted2); margin-top: 12px; text-align: center; }
.lead-privacy a { color: var(--teal-dark); }
.lead-status { margin-top: 14px; padding: 12px 14px; border-radius: 10px; font-size: 0.9rem; line-height: 1.55; background: var(--bg2); color: var(--muted); }
.lead-status[hidden], .lead-fallback[hidden] { display: none; }
.lead-status.is-error { background: #fff1f2; color: #9f1239; border: 1px solid #fecdd3; }
.lead-status.is-ok { background: var(--teal-light); color: #065f55; border: 1px solid var(--teal-mid); font-weight: 600; }
.lead-fallback { margin-top: 12px; }
.lead-fallback .btn { width: 100%; justify-content: center; }

/* ── Scheduling dialog ── */
.booking-dialog { width: min(760px, 94vw); height: min(760px, 90vh); padding: 0; border: 0; border-radius: 16px; overflow: hidden; }
.booking-dialog::backdrop { background: rgba(10, 22, 40, 0.6); }
.booking-dialog iframe { width: 100%; height: 100%; border: 0; }
.booking-close { position: absolute; top: 8px; inset-inline-end: 10px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--navy); color: #fff; font-size: 1.3rem; line-height: 1; cursor: pointer; }

/* ── Phone bar: demo and WhatsApp always within reach ── */
.sticky-cta { display: none; }

@media (max-width: 980px) {
  .trust-grid, .lead-grid { grid-template-columns: 1fr; gap: 36px; }
  .walk-steps { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .walk-steps { grid-template-columns: 1fr; }
  .lead-row { grid-template-columns: 1fr; gap: 0; }
  .lead-form { padding: 22px 18px; }
  .lead-direct .contact-card { max-width: none; }
  .price-terms th, .price-terms td { display: block; width: auto; }
  .price-terms th { border-bottom: 0; padding-bottom: 2px; }
  .price-terms td { padding-top: 2px; }
  .proof-table { font-size: 0.82rem; }

  .sticky-cta {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, 0.97);
    border-top: 1px solid var(--border); box-shadow: 0 -4px 16px rgba(15, 32, 64, 0.08);
    transition: transform 0.2s;
  }
  .sticky-cta.is-hidden { transform: translateY(110%); }
  .sticky-cta .btn { justify-content: center; padding: 12px 10px; font-size: 0.88rem; box-shadow: none; }
  body:has(.sticky-cta) { padding-bottom: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  .demo-video.is-loading::after { animation: none; }
  .sticky-cta { transition: none; }
}

/* ── Small helpers ── */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.compliance-item h3 { font-size: 0.92rem; font-weight: 700; color: var(--navy); margin-bottom: 4px; }
.compliance-item a, .price-terms a, .faq-cta a:not(.btn), .trust-facts a { color: var(--teal-dark); font-weight: 600; }
.compliance-item .compliance-h { font-size: 0.92rem; font-weight: 700; color: var(--navy); margin-bottom: 4px; line-height: 1.35; }
.cmp-table th.cmp-feature { font-weight: 600; color: var(--navy); background: transparent; text-align: start; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.cmp-table tbody tr:last-child th { border-bottom: none; }

/* ── Phone fixes ── */
.industry-grid > * { min-width: 0; }
.industry-card h3, .industry-card p, .industry-more { overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .hero-badge { margin-bottom: 14px; }
  .hero h1 { font-size: 1.85rem; line-height: 1.2; margin-bottom: 14px; }
  .hero-sub { font-size: 0.98rem; margin-bottom: 8px; }
  .hero-sub-industry { margin-bottom: 18px; }
}
.industry-card h3 { font-size: 0.9rem; font-weight: 700; color: var(--navy); line-height: 1.35; margin-bottom: 6px; }

/* ── Trial buttons stay hidden until sign-up is configured ── */
[data-trial-cta][hidden] { display: none !important; }

/* ── Hero: links under the main buttons ── */
.hero-more { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 14px; }
.hero-more .hero-wa-link { margin-top: 0; }
.hero-text-link { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9rem; font-weight: 600; color: var(--navy); text-decoration: none; }
.hero-text-link:hover { text-decoration: underline; }
.hero-text-link i { color: var(--teal); }

/* ── Cloud offer above the dedicated prices ── */
.cloud-offer {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  max-width: 820px; margin: 36px auto 0; padding: 24px 28px; background: var(--teal-light);
  border: 1px solid var(--teal-mid); border-radius: var(--radius);
}
.cloud-offer > div { flex: 1 1 380px; }
.cloud-offer h3 { font-size: 1.1rem; font-weight: 700; color: var(--navy); margin-bottom: 6px; }
.cloud-offer p { font-size: 0.9rem; color: var(--muted); line-height: 1.65; }
.pricing-subhead { text-align: center; font-size: 1.25rem; font-weight: 700; color: var(--navy); margin: 44px 0 8px; }

/* ── Menu ── */
/* Links stay on one line. Below 1120px there is no room for all of them, so
   the menu button takes over there (it used to appear only on phones, and
   the links wrapped onto two lines in between). */
.nav-inner { max-width: 1240px; gap: 10px; }
.nav-logo { flex-shrink: 0; }
.nav-links { flex-wrap: nowrap; }
.nav-links a { white-space: nowrap; padding: 7px 11px; }
.nav-links a.nav-cta { padding: 9px 16px !important; margin-inline-start: 6px; margin-left: 0; margin-right: 0; }
.lang-switcher { flex-shrink: 0; }
.nav-mobile-toggle { padding: 10px; margin-inline-start: 4px; }

@media (max-width: 1120px) {
  .nav-links { display: none; }
  .nav-mobile-toggle { display: block; }
  .nav-inner { gap: 6px; }
  .lang-switcher { margin-inline-start: auto; }
  /* The open menu: one link per row, the trial button full width. */
  .nav-links[style*="flex"] a { padding: 12px 10px; font-size: 1rem; }
  .nav-links[style*="flex"] a.nav-cta { text-align: center; margin: 8px 0 0; }
}
@media (max-width: 640px) {
  .nav-logo img { height: 60px; }
}