/* Scoped marketing illustration; no live Gateway connection. */
.gateway-preview { min-width:0; overflow:hidden; border:1px solid #3a6177; border-radius:26px; background:linear-gradient(140deg,#142638,#081121 70%); box-shadow:0 30px 90px #0005,0 0 60px #22d3ee0a; }
.gateway-preview * { box-sizing:border-box; }
.gateway-preview button { font:inherit; cursor:pointer; }
.gateway-preview button:focus-visible { outline:3px solid #a5f3fc; outline-offset:3px; }
.gw-top { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:20px; border-bottom:1px solid #32475f; }
.gw-brand { display:flex; align-items:center; gap:10px; }
.gw-brand img { flex-shrink:0; }
.gw-brand strong { display:block; color:#f5faff; font-size:18px; }
.gw-brand span { display:block; margin-top:4px; color:#b2cadd; font-size:13px; }
.gw-demo-label { flex-shrink:0; padding:5px 9px; border:1px solid #446176; border-radius:20px; color:#c7d9e7; font-size:12px; }
.gw-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; padding:16px 20px 0; }
.gw-tabs button { min-height:42px; padding:8px 5px; border:1px solid #344d63; border-radius:9px; background:#0b192a; color:#bacee0; font-size:13px; line-height:1.4; }
.gw-tabs button[aria-pressed="true"] { color:#b9fbff; background:#16404b; border-color:#5bd9e7; box-shadow:inset 0 0 18px #22d3ee13; }
.gw-tabs button:hover { border-color:#76c5d2; }
.gw-network { padding:20px 20px 14px; }
.gw-overlay { display:flex; align-items:center; justify-content:center; gap:7px; color:#a8dcdf; font-size:12px; line-height:1.5; }
.gw-overlay svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.6; }
.gw-route { display:grid; grid-template-columns:90px 1fr 90px 1fr 90px; align-items:center; margin-top:18px; }
.gw-node { text-align:center; color:#c6d7e6; }
.gw-node > svg { display:block; width:47px; height:47px; margin:auto; padding:9px; border:1px solid #3b5771; border-radius:14px; background:#182b42; fill:none; stroke:#9acdf7; stroke-width:1.5; }
.gw-node > span { display:block; min-height:34px; margin-top:7px; font-size:12px; line-height:1.4; }
.gw-hub > svg { width:60px; height:60px; padding:13px; background:#123b49; border-color:#67d9e4; stroke:#9bf5fc; box-shadow:0 0 28px #22d3ee22; }
.gw-hub > span { color:#a0f2fb; }
.gw-wire { position:relative; height:2px; margin-bottom:36px; background:#324e64; }
.gw-wire::after { content:''; position:absolute; right:-1px; top:-3px; width:7px; height:7px; border-top:1px solid #5d8ca2; border-right:1px solid #5d8ca2; transform:rotate(45deg); }
.gw-wire i { position:absolute; width:7px; height:7px; border-radius:50%; left:0; top:-2px; background:#6ae8f8; box-shadow:0 0 12px #67e8f9; opacity:0; }
.gateway-preview[data-playing="true"] .gw-in i { animation:gw-travel 1.5s linear infinite; }
.gateway-preview[data-playing="true"][data-phase="3"][data-outcome="allow"] .gw-out i { animation:gw-travel 1.5s linear infinite; background:#70e9ab; }
.gateway-preview[data-playing="true"][data-phase="1"] .gw-hub > svg { animation:gw-pulse 1.4s ease-in-out infinite; }
.gateway-preview[data-outcome="block"][data-phase="3"] .gw-target { opacity:.45; }
.gateway-preview[data-outcome="block"][data-phase="3"] .gw-out { background:#884354; }
.gateway-preview[data-outcome="hold"][data-phase="3"] .gw-out { background:#997e37; }
.gw-request { padding:0 20px 16px; }
.gw-eyebrow { display:block; color:#90dce9; font-size:11px; font-weight:800; letter-spacing:.08em; line-height:1.5; }
.gw-request h3 { min-height:44px; margin:7px 0 5px; color:white; font-size:23px; line-height:1.35; letter-spacing:-.025em; }
.gw-request p { min-height:48px; margin:0; color:#bdcfdf; font-size:14px; line-height:1.7; }
.gw-checks { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; padding:0 20px 16px; }
.gw-check { display:grid; grid-template-columns:18px minmax(0,1fr); align-items:center; gap:3px 6px; padding:9px 10px; border:1px solid #30485f; border-radius:9px; background:#0b1927; color:#d0e0ec; font-size:12px; line-height:1.5; transition:background .35s,border-color .35s; }
.gw-check small { grid-column:2; color:#8eaabe; font-size:11px; }
.gw-check-icon { grid-row:span 2; color:#8ba1b3; font-size:18px; font-weight:800; }
.gw-check[data-state="pass"] { border-color:#2d6959; background:#10332d66; }
.gw-check[data-state="pass"] .gw-check-icon { color:#79edb4; }
.gw-check[data-state="block"] { border-color:#93475a; background:#48233277; }
.gw-check[data-state="block"] .gw-check-icon { color:#ff96a9; }
.gw-check[data-state="hold"] { border-color:#92793d; background:#48391a77; }
.gw-check[data-state="hold"] .gw-check-icon { color:#f9d780; }
.gw-result { min-height:204px; margin:0 20px; padding:16px; border:1px solid #426579; border-radius:14px; background:#10273a; transition:background .4s,border-color .4s; }
.gw-result-top { display:flex; align-items:center; gap:10px; color:#bdeef6; }
.gw-result-top > span:first-child { display:grid; flex-shrink:0; width:27px; height:27px; place-items:center; border:1px solid currentColor; border-radius:50%; font-size:18px; }
.gw-result-top strong { flex:1; color:inherit; font-size:16px; line-height:1.4; }
.gw-result-top > span:last-child { font-size:12px; color:#bfd0df; }
.gw-result p { margin:10px 0 12px; color:#d2deea; font-size:14px; line-height:1.65; }
.gw-receipt { padding-top:10px; border-top:1px solid #ffffff18; color:#aac5d6; font-size:12px; line-height:1.65; }
.gw-result[data-gw-tone="allow"] { border-color:#3b9978; background:#13372e; }
.gw-result[data-gw-tone="allow"] .gw-result-top { color:#9af2bf; }
.gw-result[data-gw-tone="block"] { border-color:#9b5167; background:#372333; }
.gw-result[data-gw-tone="block"] .gw-result-top { color:#ffb3c2; }
.gw-result[data-gw-tone="hold"] { border-color:#a98a45; background:#37301f; }
.gw-result[data-gw-tone="hold"] .gw-result-top { color:#f8dc97; }
.gw-controls { display:flex; align-items:center; flex-wrap:wrap; gap:9px; padding:16px 20px 10px; }
.gw-controls button { min-height:40px; border:1px solid #425f76; border-radius:8px; padding:8px 10px; color:#d1eaf2; background:#13273a; font-size:12px; }
.gw-controls button:hover { border-color:#67d9e4; }
.gw-controls > span { margin-left:auto; color:#a4bdd0; font-size:12px; }
.gw-caption { padding:0 20px 18px; margin:0; color:#9cb4c9; font-size:12px; line-height:1.7; }
.gw-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.gw-noscript { padding:18px 20px; color:#c7dce9; font-size:14px; }
@keyframes gw-travel { 0%{left:0;opacity:0} 15%,85%{opacity:1} 100%{left:100%;opacity:0} }
@keyframes gw-pulse { 50%{box-shadow:0 0 35px #22d3ee66;transform:scale(1.04)} }
@media(min-width:1081px) { .agentic-hero { gap:38px; grid-template-columns:minmax(0,1fr) minmax(460px,1fr); } }
@media(max-width:600px) {
 .gw-top { padding:16px; gap:8px; }
 .gw-brand strong { font-size:17px; }
 .gw-brand span { font-size:12px; }
 .gw-demo-label { max-width:92px; font-size:11px; text-align:center; }
 .gw-tabs { padding-inline:16px; }
 .gw-tabs button { min-height:46px; font-size:12px; }
 .gw-network { padding-inline:16px; }
 .gw-route { grid-template-columns:76px 1fr 76px 1fr 76px; }
 .gw-node > span { font-size:11px; }
 .gw-request { padding-inline:16px; }
 .gw-request h3 { font-size:22px; }
 .gw-checks { padding-inline:16px; }
 .gw-check { padding:8px; font-size:12px; }
 .gw-result { margin-inline:16px; min-height:230px; }
 .gw-controls { padding-inline:16px; }
 .gw-caption { padding-inline:16px; }
}
@media(prefers-reduced-motion:reduce) { .gateway-preview *, .gateway-preview *::before, .gateway-preview *::after { animation:none!important; transition:none!important; } }

/* Give the hero illustration room to explain the full decision chain. */
@media(min-width:1280px) {
 .agentic-hero { width:min(1440px,calc(100vw - 64px)); left:50%; transform:translateX(-50%); grid-template-columns:minmax(0,.93fr) minmax(580px,1.07fr); gap:48px; }
 .hero-console.gateway-preview { max-width:none; }
 .gw-top { padding:24px; }
 .gw-brand strong { font-size:21px; }
 .gw-brand span, .gw-demo-label { font-size:14px; }
 .gw-tabs { padding:20px 24px 0; gap:9px; }
 .gw-tabs button { min-height:46px; font-size:14px; }
 .gw-network { padding:24px 28px 18px; }
 .gw-overlay { font-size:14px; }
 .gw-route { grid-template-columns:110px 1fr 110px 1fr 110px; margin-top:22px; }
 .gw-node > svg { width:54px; height:54px; }
 .gw-hub > svg { width:72px; height:72px; padding:16px; }
 .gw-node > span { font-size:14px; }
 .gw-request { padding:0 24px 20px; }
 .gw-eyebrow { font-size:12px; }
 .gw-request h3 { font-size:27px; }
 .gw-request p, .gw-result p { font-size:16px; }
 .gw-checks { padding:0 24px 20px; gap:9px; }
 .gw-check { font-size:14px; padding:11px 12px; }
 .gw-check small { font-size:12px; }
 .gw-result { margin-inline:24px; min-height:224px; padding:20px; }
 .gw-result-top strong { font-size:19px; }
 .gw-receipt { font-size:14px; }
 .gw-controls { padding:18px 24px 12px; }
 .gw-controls button, .gw-controls > span, .gw-caption { font-size:13px; }
 .gw-caption { padding:0 24px 22px; }
}

.agentic-hero { align-items:start; }

/* Compact the complete card for laptop-height windows without nested scrolling. */
@media(min-width:1081px) and (max-height:900px) {
 .agentic-hero { width:min(1320px,calc(100vw - 48px)); left:50%; transform:translateX(-50%); grid-template-columns:minmax(0,1fr) minmax(500px,1fr); gap:36px; padding-top:8px; }
 .hero-console.gateway-preview { max-width:620px; }
 .gw-top { padding:10px 16px; }
 .gw-brand strong { font-size:17px; }
 .gw-brand span { margin-top:2px; font-size:12px; }
 .gw-demo-label { font-size:11px; }
 .gw-tabs { padding:10px 16px 0; gap:5px; }
 .gw-tabs button { min-height:31px; padding:5px; font-size:12px; }
 .gw-network { padding:10px 18px 6px; }
 .gw-overlay { font-size:11px; }
 .gw-route { grid-template-columns:90px 1fr 90px 1fr 90px; margin-top:8px; }
 .gw-node > svg { width:34px; height:34px; padding:6px; border-radius:10px; }
 .gw-hub > svg { width:42px; height:42px; padding:9px; }
 .gw-node > span { min-height:20px; margin-top:4px; font-size:11px; }
 .gw-wire { margin-bottom:22px; }
 .gw-request { padding:0 16px 9px; }
 .gw-eyebrow { font-size:10px; }
 .gw-request h3 { min-height:0; margin:4px 0; font-size:21px; }
 .gw-request p { min-height:0; font-size:13px; line-height:1.5; }
 .gw-checks { grid-template-columns:repeat(3,minmax(0,1fr)); padding:0 16px 10px; gap:5px; }
 .gw-check { padding:5px 7px; grid-template-columns:14px minmax(0,1fr); gap:1px 4px; font-size:11px; line-height:1.35; }
 .gw-check small { font-size:10px; }
 .gw-check-icon { font-size:15px; }
 .gw-result { margin:0 16px; min-height:138px; padding:10px 12px; }
 .gw-result-top { gap:8px; }
 .gw-result-top strong { font-size:15px; }
 .gw-result-top > span:first-child { width:22px; height:22px; font-size:15px; }
 .gw-result p { margin:7px 0; font-size:13px; line-height:1.5; }
 .gw-receipt { padding-top:7px; font-size:11px; line-height:1.5; }
 .gw-controls { padding:9px 16px 7px; gap:7px; }
 .gw-controls button { min-height:31px; padding:5px 8px; font-size:11px; }
 .gw-controls > span { font-size:11px; }
 .gw-caption { padding:0 16px 10px; font-size:10px; line-height:1.5; }
}

@media(min-width:1081px) and (max-height:900px) {
 .gw-top { padding:9px 16px; line-height:1.3; }
 .gw-brand strong, .gw-brand span { line-height:1.3; }
 .gw-tabs button { min-height:28px; padding:4px; line-height:1.3; }
 .gw-network { padding:6px 16px 4px; }
 .gw-route { margin-top:4px; }
 .gw-hub > svg { width:36px; height:36px; padding:7px; }
 .gw-node > span { min-height:14px; line-height:1.3; margin-top:3px; }
 .gw-wire { margin-bottom:17px; }
 .gw-request { padding-bottom:7px; }
 .gw-eyebrow { display:none; }
 .gw-request h3 { font-size:20px; }
 .gw-checks { padding-bottom:9px; }
 .gw-check { position:relative; min-height:30px; padding:5px 7px; font-size:12px; line-height:1.3; }
 .gw-check small { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
 .gw-check-icon { grid-row:auto; }
 .gw-controls { padding-top:7px; padding-bottom:6px; }
}