/* Hero video thumbnail */
.hero-vid-btn {
  display: block;
  border: none;
  padding: 0;
  background: #0f1720;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(13,115,119,.18);
  cursor: pointer;
  width: 100%;
}
.hero-vid-btn:hover .hero-vid-circle { transform: scale(1.08); }
.hero-vid-btn:focus-visible { outline: 2px solid #0d7377; outline-offset: 3px; }
.hero-vid-inner { position: relative; padding-bottom: 56.25%; }
.hero-vid-inner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .9; display: block; }
.hero-vid-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.hero-vid-circle {
  width: 68px;
  height: 68px;
  background: rgba(255,255,255,.95);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 24px rgba(0,0,0,.28);
  transition: transform .18s;
}

/* Hero grid */
.int-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
@media(max-width:768px){
  .int-hero-grid { grid-template-columns: 1fr; gap: 32px; }
}
@media(max-width:767px){
  .htc-grid { grid-template-columns: 1fr!important; gap: 32px!important; }
}

/* Hero layout */
.connector-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.connector-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #f0fafa;
  border: 1.5px solid #b2e0e0;
  border-radius: 20px;
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 600;
  color: #0d7377;
  margin-bottom: 16px;
  letter-spacing: .2px;
}
.connector-badge svg { flex-shrink: 0; }

/* Why / pain section */
.why-section { background: var(--off); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 64px 0; }
.why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.why-pain { display: flex; flex-direction: column; gap: 20px; }
.why-pain-item { display: flex; gap: 16px; align-items: flex-start; }
.why-pain-icon { flex-shrink: 0; width: 38px; height: 38px; background: #f0fafa; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #0d7377; }
.why-pain-text h4 { font-size: 15px; font-weight: 600; color: var(--dark); margin-bottom: 4px; }
.why-pain-text p { font-size: 14px; color: var(--muted); line-height: 1.6; }
.why-answer { background: #fff; border: 1.5px solid var(--border); border-radius: 16px; padding: 32px; box-shadow: 0 4px 24px rgba(13,115,119,.07); }
.why-answer-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--teal); margin-bottom: 12px; }
.why-answer h3 { font-size: 22px; font-weight: 700; color: var(--dark); margin-bottom: 14px; line-height: 1.3; }
.why-answer p { font-size: 15px; color: var(--mid); line-height: 1.7; margin-bottom: 20px; }
.why-answer-proof { display: flex; flex-direction: column; gap: 10px; }
.why-proof-item { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--mid); }
.why-proof-item svg { flex-shrink: 0; color: var(--teal); }

/* Scope badge inline */
.scope-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  padding: 2px 8px;
  border-radius: 4px;
  vertical-align: middle;
  margin-left: 6px;
}
.scope-badge-base { background: #f0fafa; color: #0d7377; border: 1px solid #b2e0e0; }
.scope-badge-add { background: #fef9ec; color: #92400e; border: 1px solid #fcd34d; }

/* Account type mapping table */
.map-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.map-table th { background: var(--off); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); padding: 10px 14px; text-align: left; border: 1px solid var(--border); }
.map-table td { padding: 9px 14px; border: 1px solid var(--border); color: var(--mid); vertical-align: top; }
.map-table tr:hover td { background: #f8fcfc; }
.map-table .map-group { background: var(--off); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); padding: 8px 14px; }
.zoho-type { font-family: 'DM Mono', 'Courier New', monospace; font-size: 12.5px; color: var(--dark); }
.bc-type { font-weight: 600; color: var(--teal); }


/* Scope card grid */
.scope-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 8px; }
.scope-card { background: #fff; border: 1.5px solid var(--border); border-radius: 12px; padding: 22px 24px; }
.scope-card-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; margin-bottom: 12px; }
.scope-card-label-base { color: #0d7377; }
.scope-card-label-add { color: #92400e; }
.scope-card ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.scope-card li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--mid); }
.scope-card li svg { flex-shrink: 0; margin-top: 2px; }
.scope-card li strong { color: var(--dark); }

/* Responsive */
@media (max-width: 768px) {
  .connector-hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .why-grid { grid-template-columns: 1fr; gap: 32px; }
  .scope-grid { grid-template-columns: 1fr; }
}


/* ── Drill-through section ─────────────────────────────────── */
.drill-mock{display:flex;align-items:flex-start;gap:20px;overflow-x:auto;padding-bottom:8px}
.drill-panel{background:#0d1e2a;border-radius:12px;padding:20px;flex:1;min-width:220px;box-shadow:0 4px 24px rgba(0,0,0,.18)}
.drill-panel-wide{flex:1.7}
.drill-panel-label{font-size:11px;font-weight:700;color:#4ba9ad;text-transform:uppercase;letter-spacing:.06em;margin-bottom:14px}
.drill-report-row{display:flex;flex-direction:column;gap:2px}
.drill-report-row-inner{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border-radius:7px}
.drill-clickable{background:#1a3040;border-radius:6px;padding:4px 10px;color:#4fd8dd;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:5px}
.drill-click-hint{font-size:11px;opacity:.7}
.drill-muted-row .drill-account-val{color:#4a6070;font-size:13px}
.drill-muted-row .drill-account-name{color:#4a6070;font-size:13px}
.drill-account-name{font-size:13px;color:#c5d8e0;font-weight:500}
.drill-account-val{font-size:13px;color:#c5d8e0;font-weight:600}
.drill-arrow{font-size:28px;color:var(--teal);align-self:center;flex-shrink:0;padding:0 4px}
.drill-balances{display:flex;gap:12px;margin-bottom:14px;padding:10px 12px;background:#081420;border-radius:8px}
.drill-bal-item{display:flex;flex-direction:column;gap:2px;flex:1}
.drill-bal-label{font-size:10px;color:#6a8a98;text-transform:uppercase;letter-spacing:.05em}
.drill-bal-val{font-size:14px;color:#c5d8e0;font-weight:700}
.drill-teal{color:#4fd8dd}
.drill-teal-bold{color:#4fd8dd;font-weight:800}
.drill-rows{display:flex;flex-direction:column;gap:0}
.drill-row-head{display:grid;grid-template-columns:60px 1fr 1fr 70px;gap:6px;padding:4px 8px;font-size:10px;color:#4a6070;text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid #1a3040;margin-bottom:2px}
.drill-row{display:grid;grid-template-columns:60px 1fr 1fr 70px;gap:6px;padding:5px 8px;font-size:12px;color:#9ab8c4;border-radius:4px;align-items:center}
.drill-row:hover{background:#1a2e3a}
.drill-row-last{border-bottom:1px solid #1a3040}
.drill-date{color:#6a8a98;font-size:11px}
.drill-badge{font-size:10px;font-weight:700;padding:2px 6px;border-radius:4px;white-space:nowrap}
.drill-badge-cust{background:rgba(79,216,221,.15);color:#4fd8dd}
.drill-badge-vend{background:rgba(120,150,220,.15);color:#8aa0dc}
.drill-badge-exp{background:rgba(220,160,80,.15);color:#dca050}
.drill-badge-jnl{background:rgba(160,160,180,.12);color:#9898b0}
.drill-doc-link{color:#4ba9ad;font-size:11px;text-decoration:underline;cursor:pointer}
.drill-right{text-align:right}
.drill-pos{color:#4fd8dd}
.drill-neg{color:#e07070}
.drill-total-row{display:flex;justify-content:space-between;padding:8px 8px 0;font-size:13px;font-weight:700;color:#c5d8e0;border-top:1px solid #1a3040;margin-top:6px}
.drill-bullets{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:40px;align-items:stretch}
.drill-bullet{display:flex;align-items:flex-start;gap:14px;background:#fff;border:1px solid var(--border);border-radius:10px;padding:18px 20px;height:100%;box-sizing:border-box}
.drill-bullet-icon{font-size:20px;flex-shrink:0;margin-top:1px}
.drill-bullet strong{font-size:14px;color:var(--dark);display:block;margin-bottom:3px}
.drill-bullet span{font-size:13px;color:var(--muted);line-height:1.5}
@media(max-width:900px){.drill-mock{flex-direction:column}.drill-arrow{align-self:center;transform:rotate(90deg)}.drill-bullets{grid-template-columns:1fr}}