/* Shared behavior and responsive layout. The original desktop palette and
   typography are in styles.css; all diagram text below is real HTML. */
.site-shell { width:100%; max-width:1800px; margin:auto; }
.site-header { gap:24px; }
.brand { color:#0e2233; flex-shrink:0; }
.brand svg { flex-shrink:0; }
.primary-nav { flex-wrap:wrap; justify-content:flex-end; }
.primary-nav [aria-current=page] { color:#14647a; text-underline-offset:6px; text-decoration:underline; }
.primary-nav .button { color:white; }
.content-grid > *, .flex-row > * { min-width:0; }
.button { text-align:center; line-height:1.5; transition:filter .15s; }
.button:hover { filter:brightness(1.12); }
.hero-visual svg { width:100%; height:auto; }
.heading, .card-heading { overflow-wrap:break-word; }
[id] { scroll-margin-top:20px; }
.editable-diagram { font-size:14px; line-height:1.55; width:100%; }
.diagram-pair { display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.diagram-panel { padding:28px; border-radius:16px; border:1px solid #cfe7ea; }
.diagram-panel.light { background:#f4f9fa; color:#0e2233; }
.diagram-panel.dark { background:#0c2233; color:#fff; border-color:#294b5b; }
.diagram-panel h3:not(.diagram-eyebrow) { font-size:clamp(22px,2.1vw,29px); font-weight:800; line-height:1.2; margin:8px 0 24px; }
.diagram-panel h4 { font-size:14px; font-weight:800; letter-spacing:.08em; margin-bottom:14px; color:#57d0d8; }
.diagram-eyebrow { font-size:13px; line-height:1.5; font-weight:800; letter-spacing:.18em; color:#14647a; }
.dark .diagram-eyebrow { color:#57d0d8; }
.diagram-box { padding:15px; border:1px solid #b8d2d9; background:white; border-radius:10px; text-align:center; }
.diagram-box strong { display:block; font-weight:800; font-size:14px; line-height:1.45; }
.diagram-box span { display:block; color:#35505c; margin-top:5px; font-size:13px; line-height:1.5; }
.dark .diagram-box { background:#152e3d; border-color:#305364; }
.dark .diagram-box strong { color:#57d0d8; }
.dark .diagram-box span { color:#a8c7d1; }
.diagram-stack { display:flex; flex-direction:column; gap:12px; }
.uncontrolled-flow { display:grid; grid-template-columns:1fr 28px 1.2fr; gap:8px; align-items:center; }
.diagram-arrow { color:#2fa8bc; font-size:28px; text-align:center; display:block; }
.diagram-arrow small { font-size:12px; display:block; }
.diagram-arrow.vertical { line-height:1.6; color:#f0a34e; }
.missing { margin-top:20px; border:1px dashed #d98729; border-radius:10px; padding:18px; }
.missing strong { color:#a66613; font-size:13px; }
.missing ul { margin:8px 0 0; padding-left:20px; columns:2; color:#35505c; }
.diagram-result { font-style:italic; color:#905608; margin-top:20px; font-size:13px; }
.dark .diagram-result { color:#ffb35a; }
.dark .authority-box { border-color:#f0a34e; }
.dark .authority-box strong { color:#ffb35a; }
.loop-steps { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; }
.loop-steps .diagram-box { padding:12px 7px; position:relative; }
.loop-steps .diagram-box strong { font-size:12px; }
.loop-steps .diagram-box span { font-size:11px; }
.loop-steps .diagram-box:not(:last-child)::after { content:'›'; position:absolute; right:-9px; top:40%; color:#57d0d8; font-size:20px; }
.loop-return { border-bottom:1px dashed #57d0d8; padding:14px 5px; text-align:center; color:#a8c7d1; font-size:12px; }
.security-boundary { border:1px dashed #57d0d8; padding:18px; border-radius:12px; margin-top:22px; text-align:center; }
.security-boundary > strong { color:#57d0d8; font-size:13px; }
.security-boundary p { color:#a8c7d1; margin-top:8px; font-size:12px; }
.control-labels { display:grid; grid-template-columns:1fr 1fr; gap:70px; font-weight:800; letter-spacing:.12em; color:#57d0d8; margin:22px 0 14px; font-size:13px; }
.control-labels span:first-child { color:#ffb35a; }
.control-matrix { display:flex; flex-direction:column; gap:14px; }
.control-row { display:grid; grid-template-columns:1fr 50px 1fr; gap:10px; align-items:center; }
.control-row .diagram-box { text-align:left; }
.control-row .fear strong { color:#ffb35a; }
.control-row .control { border-color:#2fa8bc; }
.diagram-caption { font-style:italic; text-align:center; color:#14647a; margin-top:26px; }
.dark .diagram-caption { color:#57d0d8; }
.pipe-flow { display:grid; grid-template-columns:1fr 40px 1fr; gap:10px; align-items:center; }
.server-trio { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:20px 0; }
.server-trio .diagram-box { padding:12px 9px; }
.server-trio .untrusted { border:1px dashed #d98729; }
.server-trio .untrusted span { color:#a66613; }
.diagram-list { padding-left:20px; color:#35505c; margin:12px 0; }
.diagram-list li + li { margin-top:6px; }
.dark .diagram-list { color:#a8c7d1; }
.gateway { border:2px solid #2fa8bc; border-radius:14px; padding:20px; }
.gateway .diagram-box { text-align:left; margin-top:7px; padding:9px 12px; }
.gateway .diagram-box strong, .gateway .diagram-box span { display:inline; font-size:13px; }
.gateway .diagram-box strong::after { content:' — '; }
.value-layout { display:grid; grid-template-columns:1.8fr 1fr; gap:26px; align-items:center; margin-top:22px; }
.value-layout .security-boundary { margin:0; }
.gateway-network { display:grid; grid-template-columns:1fr 1.2fr 1fr; gap:15px; align-items:center; }
.gateway-center { position:relative; display:flex; flex-direction:column; align-items:center; gap:8px; }
.gateway-center strong { font-size:12px; letter-spacing:.07em; }
.gateway-center span { color:#a8c7d1; font-size:11px; }
.gateway-mark { width:150px; height:auto; }
.value-benefits .diagram-box { text-align:left; }

@media (max-width:1200px) {
  .site-header { padding:20px 32px; }
  .primary-nav { gap:22px; font-size:14px; }
  .page-section { padding-left:32px; padding-right:32px; }
  .home-hero { gap:28px; }
  .loop-steps { grid-template-columns:1fr; }
  .loop-steps .diagram-box { text-align:left; padding:10px 14px; }
  .loop-steps .diagram-box strong { font-size:14px; }
  .loop-steps .diagram-box span { font-size:13px; }
  .loop-steps .diagram-box:not(:last-child)::after { content:'↓'; right:50%; top:auto; bottom:-17px; font-size:14px; }
  .server-trio { grid-template-columns:1fr; }
  .value-layout { grid-template-columns:1fr; }
}
@media (max-width:950px) {
  .site-header { flex-wrap:wrap; }
  .primary-nav { width:100%; justify-content:flex-start; gap:14px 24px; }
  .home-hero { flex-direction:column; align-items:stretch; }
  .hero-copy, .hero-visual { flex:auto; width:100%; }
  .hero-visual { max-width:650px; margin:12px auto 0; }
  .grid-six { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .grid-four { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .diagram-pair { grid-template-columns:1fr; }
  .loop-steps { grid-template-columns:repeat(5,minmax(0,1fr)); }
  .loop-steps .diagram-box { text-align:center; padding:12px 7px; }
  .loop-steps .diagram-box:not(:last-child)::after { content:'›'; right:-9px; top:40%; bottom:auto; font-size:20px; }
  .server-trio { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:640px) {
  .site-header { padding:20px; gap:18px; }
  .primary-nav { gap:14px 18px; font-size:14px; }
  .primary-nav a { min-height:34px; display:inline-flex; align-items:center; }
  .primary-nav .button { padding:10px 16px; }
  .page-section { padding:48px 20px; }
  .page-section.hero { padding-top:44px; padding-bottom:44px; }
  .heading { font-size:30px; line-height:1.17; }
  .hero h1 { font-size:38px; }
  .grid-two, .grid-three, .grid-four, .grid-six { grid-template-columns:1fr; }
  .flex-row { flex-wrap:wrap; gap:16px; }
  .panel { padding:22px; }
  .button { max-width:100%; overflow-wrap:anywhere; }
  .editable-diagram { font-size:14px; }
  .diagram-panel { padding:22px 16px; }
  .diagram-pair { gap:18px; }
  .diagram-eyebrow { font-size:12px; letter-spacing:.12em; }
  .diagram-panel h3:not(.diagram-eyebrow) { font-size:24px; }
  .uncontrolled-flow { grid-template-columns:1fr; }
  .uncontrolled-flow > .diagram-arrow { transform:rotate(90deg); }
  .missing ul { columns:1; }
  .loop-steps { grid-template-columns:1fr; gap:16px; }
  .loop-steps .diagram-box { text-align:left; padding:14px; }
  .loop-steps .diagram-box:not(:last-child)::after { content:'↓'; right:50%; top:auto; bottom:-19px; font-size:16px; }
  .loop-return, .security-boundary p { font-size:13px; }
  .control-labels { display:none; }
  .control-matrix { margin-top:22px; gap:26px; }
  .control-row { grid-template-columns:1fr; gap:3px; }
  .control-row .diagram-arrow { transform:rotate(90deg); }
  .server-trio { grid-template-columns:1fr; }
  .gateway { padding:16px 12px; }
  .value-layout { gap:20px; }
  .gateway-network { grid-template-columns:1fr; }
  .gateway-center { padding:12px 0; }
  .gateway-center strong { font-size:14px; }
  .gateway-center span { font-size:13px; }
  .diagram-box span { font-size:14px; }
  .diagram-caption { font-size:14px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .button { transition:none; } }

.pdf-view{display:inline-flex;align-items:center;justify-content:center;padding:12px 20px;border:1px solid currentColor;border-radius:8px;font-weight:700;margin-left:12px}.pdf-download{display:inline-flex;align-items:center;justify-content:center}.pdf-view:focus-visible,.pdf-download:focus-visible{outline:3px solid #d98729;outline-offset:4px}@media(max-width:640px){.pdf-view{margin:12px 0 0}.pdf-view,.pdf-download{width:100%}}
.pdf-view{color:#fff;flex-shrink:0;white-space:nowrap}.pdf-download{flex-shrink:0;white-space:nowrap}