/* Click2Call-specific product scenes only. The design system is inherited
   unchanged from subdomain.to's complete marketing stylesheets. */
.marketing-site .scene-widget { background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(9,19,33,.34)),url('/marketing/scenes/customer-onboarding.webp') center/cover no-repeat; }
.marketing-site .scene-routing { background:linear-gradient(180deg,rgba(17,24,42,.08),rgba(17,24,42,.42)),url('/marketing/scenes/developer-stream.webp') center/cover no-repeat; }
.marketing-site .scene-live { background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(17,24,42,.32)),url('/marketing/scenes/domain-live.webp') center/cover no-repeat; }

.marketing-site :is(.browser-fragment,.routing-fragment,.connected-fragment) { position:relative; z-index:2; width:min(86%,500px); overflow:hidden; border:1px solid rgba(255,255,255,.6); border-radius:17px; background:rgba(255,255,255,.94); box-shadow:0 22px 50px rgba(26,39,55,.22); }
.marketing-site .browser-bar { display:flex; height:38px; align-items:center; gap:5px; padding:0 13px; border-bottom:1px solid #e4e7ec; background:#fafbfc; }
.marketing-site .browser-bar i { width:6px; height:6px; border-radius:50%; background:#cbd0d9; }
.marketing-site .browser-bar small { margin-left:10px; color:#8991a2; font:8px var(--font-mono); }
.marketing-site .browser-page { position:relative; min-height:225px; padding:38px; background:linear-gradient(145deg,#fff,#f4f1ea); }
.marketing-site .fake-copy { display:block; width:65%; height:18px; border-radius:5px; background:#1c2638; }
.marketing-site .fake-copy.short { width:42%; height:9px; margin-top:13px; background:#cbd0d8; }
.marketing-site .browser-page button { position:absolute; right:18px; bottom:18px; display:flex; align-items:center; gap:10px; border:0; border-radius:14px; padding:12px 14px; background:var(--navy); color:#fff; font-size:9px; }
.marketing-site .browser-page button b { padding:8px 10px; border-radius:9px; background:var(--pink); }

.marketing-site .fragment-label { padding:15px 18px; border-bottom:1px solid #e2e5eb; color:#7e8799; font:700 9px var(--font-mono); letter-spacing:.09em; }
.marketing-site .agent-row { display:grid; grid-template-columns:36px 1fr auto; align-items:center; gap:11px; margin:0 16px; padding:13px 3px; border-bottom:1px solid #e6e8ed; }
.marketing-site .agent-row > i { display:grid; width:34px; height:34px; place-items:center; border-radius:10px; background:#eef1f6; color:#647086; font:700 9px var(--font-mono); font-style:normal; }
.marketing-site .agent-row span strong,.marketing-site .agent-row span small { display:block; }
.marketing-site .agent-row span strong { color:var(--navy); font-size:11px; }
.marketing-site .agent-row span small { margin-top:2px; color:var(--pink); font-size:8px; }
.marketing-site .agent-row > b { display:grid; width:22px; height:22px; place-items:center; border-radius:50%; background:#fff0f4; color:var(--pink); font:700 8px var(--font-mono); }
.marketing-site .agent-row.muted { opacity:.5; }
.marketing-site .routing-mode { display:flex; align-items:center; justify-content:space-between; margin:14px 16px 0; padding:11px; border-radius:10px; background:#f1f3f7; }
.marketing-site .routing-mode span { color:#9298a6; font:650 8px var(--font-mono); }
.marketing-site .routing-mode strong { color:var(--navy); font-size:10px; }

.marketing-site .connected-people { display:grid; grid-template-columns:1fr 1.3fr 1fr; align-items:center; padding:38px 20px 28px; text-align:center; }
.marketing-site .connected-people > span i { display:grid; width:54px; height:54px; margin:auto; place-items:center; border-radius:50%; background:#eef0f4; color:var(--navy); font:700 15px var(--font-mono); font-style:normal; }
.marketing-site .connected-people > span:last-child i { background:var(--navy); color:#fff; }
.marketing-site .connected-people small { display:block; margin-top:7px; color:#838b99; font-size:8px; }
.marketing-site .connected-people > b { display:grid; justify-items:center; color:var(--navy); }
.marketing-site .connected-people > b em { width:70%; height:2px; margin-bottom:15px; background:linear-gradient(90deg,var(--pink),#ff9db8); }
.marketing-site .connected-people > b strong { font:700 17px var(--font-mono); }
.marketing-site .connected-meta { display:grid; grid-template-columns:1fr 1fr; margin:0 16px 14px; overflow:hidden; border:1px solid #e2e5eb; border-radius:10px; }
.marketing-site .connected-meta span { display:grid; gap:5px; padding:12px; color:#939aaa; font:650 8px var(--font-mono); }
.marketing-site .connected-meta span:first-child { border-right:1px solid #e2e5eb; }
.marketing-site .connected-meta b { color:#354055; }

.marketing-site .code-workbench { overflow:hidden; border:1px solid rgba(255,255,255,.13); border-radius:22px; background:rgba(11,16,29,.78); box-shadow:0 30px 80px rgba(0,0,0,.28),0 0 0 8px rgba(255,255,255,.035); }
.marketing-site .stack-code-bar { display:flex; min-height:48px; align-items:center; justify-content:space-between; padding:0 20px; border-bottom:1px solid rgba(255,255,255,.09); color:#8f98ab; font:9px var(--font-mono); }
.marketing-site .stack-code-bar > span { display:flex; gap:5px; }
.marketing-site .stack-code-bar i { width:7px; height:7px; border-radius:50%; background:#495268; }
.marketing-site .stack-code-bar b { margin-left:30px; font-weight:500; }
.marketing-site .stack-code-bar button { border:0; background:transparent; color:#aeb6c7; cursor:pointer; font:9px var(--font-mono); }
.marketing-site .code-workbench pre { margin:0; padding:35px; overflow:auto; color:#f0c98f; font:13px/1.8 var(--font-mono); }
.marketing-site .code-response { display:grid; grid-template-columns:1fr auto auto; gap:20px; padding:16px 20px; border-top:1px solid rgba(255,255,255,.09); color:#8f98ab; font:9px var(--font-mono); }
.marketing-site .code-response span:first-child { display:flex; align-items:center; gap:8px; color:#d9dfea; }
.marketing-site .code-response i { width:7px; height:7px; border-radius:50%; background:var(--pink); }
.marketing-site .code-response b { color:#ff7ca1; }

.marketing-site .pricing-page .page-hero { background:linear-gradient(90deg,rgba(245,242,236,.97),rgba(245,242,236,.7)),url('/marketing/scenes/support-pricing-cascade.webp') center/cover no-repeat; }
.marketing-site .contact-page .page-hero { background:linear-gradient(90deg,rgba(245,242,236,.97),rgba(245,242,236,.7)),url('/marketing/scenes/support-contact-paper-waves.webp') center/cover no-repeat; }
.marketing-site .developer-page .page-hero { background:linear-gradient(90deg,rgba(245,242,236,.97),rgba(245,242,236,.68)),url('/marketing/scenes/product-developers-clearing.webp') center/cover no-repeat; }