/*
 * Video intercom catalogue depth layer.
 * Scope is deliberately limited to .video-intercom-page so other pages keep
 * their existing layout and facts unchanged.
 */
.video-intercom-page {
  --video-paper: #fbfaf7;
  --video-warm: #f4efe8;
  --video-ink: #101b24;
  --video-muted: #62707c;
  --video-copper: #c86b31;
  --video-line: #ddcfc2;
  --video-shadow: 0 16px 38px rgba(24, 31, 37, .09), 0 3px 10px rgba(24, 31, 37, .045);
  --video-shadow-lift: 0 24px 52px rgba(24, 31, 37, .14), 0 6px 14px rgba(24, 31, 37, .06);
  background: var(--video-paper);
}

.video-intercom-page .page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-bottom: 2px solid var(--video-copper);
  background:
    radial-gradient(circle at 82% 22%, rgba(71, 112, 131, .24), transparent 32%),
    linear-gradient(145deg, #0b1720 0%, #15232d 54%, #101b24 100%);
  box-shadow: 0 18px 38px rgba(8, 17, 24, .18);
}

.video-intercom-page .page-hero::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 28px 28px;
  content: "";
  opacity: .42;
  pointer-events: none;
}

.video-intercom-page .page-hero::after {
  position: absolute;
  z-index: -1;
  top: -390px;
  right: -190px;
  width: 760px;
  height: 760px;
  border: 1px solid rgba(191, 215, 222, .13);
  border-radius: 50%;
  box-shadow: 0 0 0 34px rgba(191, 215, 222, .025), 0 0 0 68px rgba(191, 215, 222, .018);
  content: "";
  pointer-events: none;
}

.video-intercom-page .page-hero .hero-content {
  position: relative;
  z-index: 1;
}

.video-intercom-page .page-hero .hero-badge {
  border-color: rgba(214, 228, 232, .3);
  background: rgba(255, 255, 255, .085);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .11), 0 5px 14px rgba(0, 0, 0, .08);
}

.video-intercom-page .page-hero h1 {
  max-width: 980px;
  letter-spacing: -.035em;
  text-shadow: 0 2px 16px rgba(0, 0, 0, .18);
}

.video-intercom-page .page-hero .hero-sub {
  max-width: 760px;
  color: #c3d2dc;
}

.video-intercom-page .page-hero .btn-primary-jbss,
.video-intercom-page .page-hero .btn-tg {
  box-shadow: 0 9px 20px rgba(0, 0, 0, .18);
}

.video-intercom-page .model-facts-reserved {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 16% 16%, rgba(200, 107, 49, .075), transparent 30%),
    linear-gradient(135deg, #f7f2eb 0%, #fbfaf7 72%);
}

.video-intercom-page .model-facts-reserved::before,
.video-intercom-page .video-line-choice::before,
.video-intercom-page .video-channel-matrix::before,
.video-intercom-page .video-partner-section::before,
.video-intercom-page .video-architecture-section::before,
.video-intercom-page .video-faq-section::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(200, 107, 49, .42) 22%, rgba(200, 107, 49, .08) 78%, transparent 100%);
  content: "";
  pointer-events: none;
}

.video-intercom-page .model-facts-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(310px, .78fr);
  gap: clamp(32px, 6vw, 76px);
  align-items: center;
}

.video-intercom-page .model-facts-card {
  border: 1px solid var(--video-line);
  border-left: 3px solid var(--video-copper);
  border-radius: 0 12px 12px 0;
  background: linear-gradient(150deg, rgba(255, 255, 255, .95), rgba(249, 245, 239, .96));
  box-shadow: var(--video-shadow);
}

.video-intercom-page .model-facts-card strong {
  color: var(--video-ink);
}

.video-intercom-page .video-line-choice {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 85% 14%, rgba(218, 175, 136, .12), transparent 29%),
    linear-gradient(180deg, #f4efe8 0%, #f8f4ee 100%);
}

.video-intercom-page .video-line-choice .section-head,
.video-intercom-page .video-architecture-section .section-head {
  max-width: 850px;
}

.video-intercom-page .decision-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid var(--video-line);
  border-radius: 15px;
  background: linear-gradient(180deg, #fff 0%, #fcfbf9 100%);
  box-shadow: var(--video-shadow);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.video-intercom-page .decision-card::before,
.video-intercom-page .video-partner-section .card-jbss::before,
.video-intercom-page .video-architecture-section .card-jbss::before {
  position: absolute;
  top: 0;
  right: 14px;
  left: 14px;
  height: 3px;
  border-radius: 0 0 6px 6px;
  background: linear-gradient(90deg, var(--video-copper), rgba(200, 107, 49, .2));
  content: "";
}

.video-intercom-page .decision-card:hover,
.video-intercom-page .decision-card:focus-visible {
  border-color: rgba(200, 107, 49, .48);
  box-shadow: var(--video-shadow-lift);
  transform: translateY(-6px);
}

.video-intercom-page .decision-card-media {
  display: block;
  height: 294px;
  padding: 18px;
  border-bottom: 1px solid #e6ddd4;
  background:
    radial-gradient(circle at 50% 40%, rgba(255, 255, 255, .95), rgba(236, 240, 241, .86)),
    linear-gradient(135deg, #f4f1ec, #e8edef);
}

.video-intercom-page .decision-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 13px 14px rgba(16, 27, 36, .18));
}

.video-intercom-page .decision-card > .label-tag,
.video-intercom-page .decision-card > h3,
.video-intercom-page .decision-card > p,
.video-intercom-page .decision-card > .decision-card-cta {
  margin-right: 26px;
  margin-left: 26px;
}

.video-intercom-page .decision-card > .label-tag { margin-top: 22px; }
.video-intercom-page .decision-card > h3 { margin-top: 12px; }
.video-intercom-page .decision-card > p { color: var(--video-muted); }
.video-intercom-page .decision-card-cta { display: inline-block; margin-bottom: 26px; font-weight: 700; }

.video-intercom-page .video-channel-matrix {
  position: relative;
  isolation: isolate;
  background: var(--video-paper);
}

.video-intercom-page .video-channel-media {
  overflow: hidden;
  border: 1px solid #d9cfc5;
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--video-shadow-lift);
}

.video-intercom-page .video-channel-media img {
  display: block;
  width: 100%;
  height: auto;
  background: linear-gradient(135deg, #f5f1eb, #e8edef);
}

.video-intercom-page .video-channel-media .hero-media-caption {
  margin: 0;
  padding: 12px 16px 14px;
  border-left: 3px solid var(--video-copper);
  color: #53616d;
  background: #fff;
}

.video-intercom-page .video-channel-matrix .compare-table {
  overflow: hidden;
  border: 1px solid var(--video-line);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--video-shadow);
  border-collapse: separate;
  border-spacing: 0;
}

.video-intercom-page .video-channel-matrix .compare-table thead th {
  color: #fff;
  background: linear-gradient(135deg, #b85f29, #d77b3a);
}

.video-intercom-page .video-channel-matrix .compare-table tbody tr:last-child td,
.video-intercom-page .video-channel-matrix .compare-table tbody tr:last-child th {
  background: #fbf0e6;
  color: #854d2e;
  font-weight: 700;
}

.video-intercom-page .video-channel-matrix .compare-table {
  box-shadow: 0 24px 54px rgba(16, 27, 36, .15), 0 6px 16px rgba(16, 27, 36, .06);
}

.video-intercom-page .video-channel-matrix .compare-table tbody tr:not(:last-child):hover th,
.video-intercom-page .video-channel-matrix .compare-table tbody tr:not(:last-child):hover td {
  background: rgba(248, 238, 229, .62);
}

.video-intercom-page .video-partner-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 90% 12%, rgba(200, 107, 49, .08), transparent 28%),
    linear-gradient(180deg, #f4efe8 0%, #f8f4ee 100%);
}

.video-intercom-page .video-partner-section .card-jbss,
.video-intercom-page .video-architecture-section .card-jbss {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--video-line);
  border-radius: 13px;
  background: linear-gradient(145deg, #fff 0%, #fcfaf7 100%);
  box-shadow: var(--video-shadow);
  transition: transform .2s ease, box-shadow .2s ease;
}

.video-intercom-page .video-partner-section .card-jbss:hover,
.video-intercom-page .video-architecture-section .card-jbss:hover {
  box-shadow: var(--video-shadow-lift);
  transform: translateY(-4px);
}

.video-intercom-page .decision-card::after,
.video-intercom-page .video-partner-section .card-jbss::after,
.video-intercom-page .video-architecture-section .card-jbss::after {
  position: absolute;
  inset: 1px;
  border: 1px solid rgba(255, 255, 255, .68);
  border-radius: inherit;
  content: "";
  pointer-events: none;
}

.video-intercom-page .video-architecture-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #fff;
}

.video-intercom-page .video-faq-section {
  position: relative;
  isolation: isolate;
  background: linear-gradient(180deg, #fbfaf7 0%, #f4efe8 100%);
}

.video-intercom-page .video-faq-section .faq-list {
  overflow: hidden;
  border: 1px solid var(--video-line);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--video-shadow);
}

.video-intercom-page .video-faq-section .faq-item {
  margin: 0;
  border: 0;
  border-bottom: 1px solid #e8dfd7;
  border-radius: 0;
  box-shadow: none;
}

.video-intercom-page .video-faq-section .faq-item:last-child { border-bottom: 0; }
.video-intercom-page .video-faq-section .faq-item summary { min-height: 66px; padding: 18px 22px; }

.video-intercom-page .video-cta-section {
  background: linear-gradient(180deg, #f4efe8 0%, #fbfaf7 100%);
}

.video-intercom-page .video-cta-section .cta-section {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(200, 107, 49, .22);
  box-shadow: 0 24px 55px rgba(16, 27, 36, .2), 0 6px 14px rgba(16, 27, 36, .08);
}

.video-intercom-page .video-cta-section .cta-section::before {
  position: absolute;
  top: -120px;
  right: -80px;
  width: 360px;
  height: 360px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.video-intercom-page .video-cta-section .cta-section > * { position: relative; z-index: 1; }

.video-intercom-page a:focus-visible,
.video-intercom-page button:focus-visible,
.video-intercom-page summary:focus-visible {
  outline: 3px solid rgba(200, 107, 49, .48);
  outline-offset: 3px;
}

/* Hero aligned with the current solution-page system. */
.video-intercom-page .page-hero {
  position: relative;
  isolation: isolate;
  min-height: 470px;
  padding: clamp(82px, 8vw, 116px) 0 88px !important;
  border-bottom: 4px solid var(--video-copper);
  background:
    radial-gradient(circle at 84% 18%, rgba(200, 107, 49, .23), transparent 27%),
    radial-gradient(circle at 40% 108%, rgba(65, 133, 143, .22), transparent 42%),
    linear-gradient(118deg, #0e1820 0%, #152732 55%, #233c43 100%);
  box-shadow: none;
}

.video-intercom-page .page-hero::before {
  z-index: -1;
  opacity: .34;
  background-image:
    linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .72) 58%, transparent 100%);
}

.video-intercom-page .page-hero::after {
  top: auto;
  right: -240px;
  bottom: -430px;
  width: 650px;
  height: 650px;
  border-color: rgba(226, 157, 107, .4);
  box-shadow: 0 0 0 28px rgba(226, 157, 107, .06), 0 0 100px rgba(200, 107, 49, .12);
}

.video-intercom-page .page-hero .hero-content { max-width: 1060px; }

.video-intercom-page .page-hero .hero-badge {
  color: rgba(247, 250, 250, .92);
  background: rgba(255, 255, 255, .09);
  border-color: rgba(255, 255, 255, .2);
  box-shadow: none;
}

.video-intercom-page .page-hero h1 {
  max-width: 980px;
  color: #fff !important;
  font-size: clamp(2.25rem, 4.7vw, 4.2rem);
  line-height: 1.06;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.video-intercom-page .page-hero .hero-sub {
  max-width: 760px;
  color: rgba(241, 245, 246, .8) !important;
  font-size: clamp(1rem, 1.35vw, 1.13rem) !important;
  line-height: 1.75 !important;
}

.video-intercom-page .page-hero .btn-primary-jbss {
  background: var(--video-copper) !important;
  border-color: var(--video-copper) !important;
  box-shadow: 0 12px 26px rgba(200, 107, 49, .27);
}

.video-intercom-page .page-hero .btn-primary-jbss:hover {
  background: #a95224 !important;
  border-color: #a95224 !important;
  transform: translateY(-2px);
}

.video-intercom-page .page-hero .btn-tg {
  color: #f6f9fa !important;
  border-color: rgba(255, 255, 255, .34) !important;
  background: rgba(255, 255, 255, .05) !important;
}

@media (max-width: 767.98px) {
  .video-intercom-page .page-hero { min-height: 0; padding: 64px 0 68px !important; }
  .video-intercom-page .page-hero::after { right: -300px; top: auto; bottom: -350px; width: 520px; height: 520px; }
  .video-intercom-page .page-hero h1 { font-size: clamp(2rem, 10vw, 3rem); letter-spacing: -.025em; }
  .video-intercom-page .model-facts-grid { grid-template-columns: 1fr; gap: 28px; }
  .video-intercom-page .decision-card-media { height: 230px; }
  .video-intercom-page .video-channel-matrix .col-lg-7 { min-width: 0; overflow-x: auto; }
  .video-intercom-page .video-channel-matrix .compare-table {
    display: table;
    width: 660px;
    min-width: 660px;
  }
  .video-intercom-page .video-faq-section .faq-item summary { min-height: 60px; padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .video-intercom-page .decision-card,
  .video-intercom-page .video-partner-section .card-jbss,
  .video-intercom-page .video-architecture-section .card-jbss { transition: none; }
}