/* One platform boundary; people, client apps, and data sources sit outside it. */
.platform-overview { background:var(--wick-color-sky-pale,#DCE6F2); padding-block:56px; }
.platform-overview :is(h2,h3,p) { margin:0; }
.platform-overview-intro { display:grid; grid-template-columns:1fr 1.18fr; gap:70px; align-items:center; }
.platform-overview-intro h2 { font-size:clamp(34px,3.2vw,48px); line-height:1.08; letter-spacing:-.04em; font-weight:800; }
.platform-overview-intro p { max-width:60ch; font-size:18px; line-height:1.6; color:#24272D; }
.platform-overview .platform-pipeline { position:relative; max-width:1120px; margin:40px auto 0; }
.platform-external-deck { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; align-items:center; margin:0 26px 42px; padding-top:32px; }
.platform-person { position:relative; z-index:3; display:flex; align-items:center; justify-content:center; gap:18px; min-width:0; }
.platform-person-icon { flex:none; width:88px; height:88px; }
.platform-person-icon img { display:block; width:100%; height:100%; object-fit:contain; }
.platform-person-icon svg { display:block; width:100%; height:100%; }
.platform-overview .platform-person h3 { font-size:22px; font-weight:800; line-height:1.2; }
.platform-overview .platform-person p { margin-top:6px; font-size:14px; line-height:1.4; color:#3B3E43; }
.platform-overview .platform-entry-card { position:relative; z-index:3; display:flex; flex-wrap:wrap; align-items:center; gap:14px; min-width:0; min-height:76px; padding:16px 20px; border:1.5px solid #0B0D10; background:#FBF8F2; box-shadow:3px 3px 0 #0B0D10; }
.platform-overview :is(.platform-entry-icons,.gateway-protocol-icons,.input-audience-asset-icons,.input-capability-tool-icons,.input-preparation-icons) { display:flex; align-items:center; flex:none; gap:9px; }
.platform-overview :is(.platform-entry-icons,.gateway-protocol-icons,.input-audience-asset-icons,.input-capability-tool-icons,.input-preparation-icons) :is(img,svg) { display:block; flex:none; width:27px; height:27px; }
.platform-overview h3,.platform-overview .input-capability-tools { font-size:18px; font-weight:700; line-height:1.3; letter-spacing:-.015em; }
.platform-wick-layer { position:relative; padding:26px; border:1.5px solid #0B0D10; background:#F5F1EA; box-shadow:5px 5px 0 #0B0D10; }
.platform-overview .platform-wick-heading { margin:0 0 20px; position:relative; z-index:3; font-size:23px; font-weight:800; line-height:1.2; letter-spacing:-.025em; }
.platform-wick-heading img { display:block; width:76px; height:auto; }
.platform-wick-heading span { position:absolute; left:50%; transform:translateX(-50%); width:max-content; max-width:44%; color:#555960; font-size:14px; line-height:1.4; text-align:center; }
.platform-access-deck { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin-bottom:30px; }
.platform-access-deck .platform-entry-gateway { grid-column:2 / 4; }
.platform-overview .platform-access-deck .platform-entry-card { background:#FBF8F2; }
.platform-overview .input-capabilities { position:relative; z-index:3; border:1.5px solid #0B0D10; background:#FBF8F2; box-shadow:3px 3px 0 #0B0D10; }
.platform-overview :is(.input-capabilities-heading,.input-capability-tools,.input-audience-assets) { display:grid; grid-template-columns:110px minmax(0,1fr) 40px; align-items:center; gap:18px; min-height:70px; padding:13px 20px; }
.platform-overview :is(.input-capability-tools,.input-audience-assets) { border-bottom:1px solid #DDD3C4; }
.platform-overview :is(.input-capabilities-heading,.input-capability-tools) a { display:grid; place-items:center; width:40px; height:40px; border:1.5px solid #0B0D10; background:#FFE45C; color:#0B0D10; box-shadow:3px 3px 0 #0B0D10; font-size:24px; line-height:1; }
.platform-overview :is(.input-capabilities-heading,.input-capability-tools) a:hover { background:#FFEB85; }
.platform-overview a:focus-visible { outline:2px solid #0B0D10; outline-offset:5px; }
.platform-source-deck { padding:42px 26px 0; }
.platform-source-cards { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.platform-overview .platform-source-card { position:relative; z-index:3; display:flex; align-items:center; gap:12px; min-height:64px; min-width:0; padding:14px 16px; border:1.5px solid #0B0D10; background:#FBF8F2; box-shadow:3px 3px 0 #0B0D10; }
.platform-overview .platform-source-card h3 { font-size:16px; }
.platform-source-card img { display:block; flex:none; width:30px; height:30px; }
.platform-flow-lines { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; z-index:2; }
.platform-flow-line { fill:none; stroke:#0B0D10; stroke-width:3; stroke-linejoin:round; stroke-linecap:round; }
.platform-flow-pulse { fill:none; stroke:#74A9E8; stroke-width:5; stroke-linecap:round; stroke-dasharray:6 94; stroke-dashoffset:6; opacity:0; animation:platform-route-pulse 12s linear infinite; }
@keyframes platform-route-pulse { 0%,20% { opacity:0; stroke-dashoffset:6; } 22% { opacity:1; } 42% { opacity:1; stroke-dashoffset:-100; } 44%,100% { opacity:0; stroke-dashoffset:-100; } }
@media(max-width:1100px) {
  .platform-overview-intro { gap:40px; }
  .platform-overview .platform-entry-card { gap:10px; padding:16px; }
  .platform-overview .platform-person { gap:12px; }
  .platform-person-icon { width:46px; height:56px; }
}
@media(max-width:980px) {
  .platform-overview { padding-block:58px; }
  .platform-overview-intro { grid-template-columns:1fr 1fr; gap:30px; }
  .platform-external-deck,.platform-access-deck { gap:18px; }
  .platform-overview :is(.platform-entry-icons,.gateway-protocol-icons,.input-audience-asset-icons,.input-capability-tool-icons,.input-preparation-icons) { gap:6px; }
  .platform-overview :is(.platform-entry-icons,.gateway-protocol-icons,.input-audience-asset-icons,.input-capability-tool-icons,.input-preparation-icons) :is(img,svg) { width:24px; height:24px; }
  .platform-overview :is(.input-capabilities-heading,.input-capability-tools,.input-audience-assets) { grid-template-columns:90px minmax(0,1fr) 40px; gap:14px; }
  .platform-overview .platform-person h3 { font-size:19px; }
  .platform-overview .platform-person p { font-size:12px; }
  .platform-source-cards { gap:14px; }
  .platform-overview .platform-source-card { gap:8px; padding:12px; }
  .platform-source-card h3 { font-size:14px; }
}
@media(max-width:760px) {
  .platform-overview { padding-block:44px; }
  .platform-overview-intro { grid-template-columns:1fr; gap:20px; }
  .platform-overview-intro p { font-size:17px; }
  .platform-overview .platform-pipeline { margin-top:30px; }
  .platform-external-deck { grid-template-columns:1fr 1fr; gap:14px; margin:0 16px 36px; padding-top:0; }
  .platform-person { grid-column:1 / -1; padding-bottom:20px; }
  .platform-person-icon { width:44px; height:50px; }
  .platform-overview .platform-person p { font-size:14px; }
  .platform-person br { display:none; }
  .platform-overview .platform-external-deck .platform-entry-card { flex-direction:column; align-items:flex-start; gap:12px; min-height:94px; padding:14px 12px; }
  .platform-wick-layer { padding:18px 16px 4px; }
  .platform-wick-heading { gap:14px; margin-bottom:22px; }
  .platform-wick-heading img { width:60px; }
  .platform-wick-heading span { display:none; }
  .platform-access-deck { grid-template-columns:1fr 1fr; gap:14px; margin-bottom:30px; }
  .platform-access-deck .platform-entry-gateway { grid-column:auto; }
  .platform-overview .platform-access-deck .platform-entry-card { flex-direction:column; align-items:flex-start; justify-content:center; min-height:110px; padding:14px 10px; }
  .platform-overview h3,.platform-overview .input-capability-tools { font-size:14px; }
  .platform-overview :is(.input-capabilities-heading,.input-capability-tools,.input-audience-assets) { grid-template-columns:74px minmax(0,1fr) 32px; gap:8px; padding:16px 0; }
  .platform-overview :is(.input-capabilities-heading,.input-capability-tools) a { width:32px; height:40px; font-size:22px; }
  .platform-overview :is(.input-audience-asset-icons,.input-capability-tool-icons,.input-preparation-icons) { gap:2px; }
  .platform-overview :is(.input-audience-asset-icons,.input-capability-tool-icons,.input-preparation-icons) :is(img,svg) { width:23px; height:23px; }
  .platform-source-deck { padding:36px 16px 0; }
  .platform-source-cards { grid-template-columns:1fr 1fr; gap:14px; }
  .platform-overview .platform-source-card { min-height:78px; flex-wrap:wrap; padding:12px; }
}
@media(prefers-reduced-motion:reduce) { .platform-flow-pulse { display:none; animation:none; } }

/* Rich exploration appears only when the reader chooses an access surface. */
.platform-overview .platform-entry-card[data-platform-popover] { cursor:pointer; color:#0B0D10; text-align:left; font-family:inherit; }
.platform-entry-name { font-size:18px; font-weight:700; line-height:1.3; letter-spacing:-.015em; }
.platform-overview .platform-entry-card[data-platform-popover]:is(:hover,:focus-visible,[aria-expanded="true"]) { background:#FFF4BC; }
.platform-overview .platform-entry-card[data-platform-popover]:focus-visible { outline:3px solid #0B0D10; outline-offset:5px; }
.platform-rich-popover { position:absolute; z-index:30; left:50%; transform:translateX(-50%); width:min(760px,100%); display:grid; grid-template-columns:minmax(0,1fr); align-items:start; gap:18px; padding:28px 32px 24px; border:2px solid #0B0D10; background:#FBF8F2; box-shadow:8px 8px 0 #0B0D10; }
.platform-rich-popover[hidden] { display:none; }
.platform-rich-popover::before { content:''; position:absolute; top:-11px; left:calc(var(--popover-pointer,50%) - 10px); width:18px; height:18px; transform:rotate(45deg); background:#FBF8F2; border-left:2px solid #0B0D10; border-top:2px solid #0B0D10; }
.platform-popover-copy { width:100%; max-width:620px; margin:0 auto; text-align:center; }
.platform-overview .platform-popover-copy h3 { font-size:31px; line-height:1.08; letter-spacing:-.035em; font-weight:850; margin:0 0 12px; }
.platform-overview .platform-popover-copy > p { max-width:58ch; margin:0 auto 12px; font-size:15px; line-height:1.55; color:#24272D; }
.platform-popover-close { position:absolute; z-index:5; right:12px; top:10px; display:grid; place-items:center; width:32px; height:32px; border:1.5px solid #0B0D10; background:#FBF8F2; color:#0B0D10; font:500 25px/1 Inter,sans-serif; cursor:pointer; }
.platform-popover-close:hover { background:#E9E1D5; }
.platform-popover-link { display:inline-flex; align-items:center; gap:18px; padding-bottom:3px; border-bottom:3px solid #FFE45C; color:#0B0D10; font-size:15px; font-weight:800; }
.platform-popover-animation { width:100%; min-width:0; }
.platform-popover-animation .gateway-demo { max-width:none; }
.platform-popover-animation .gateway-scene { aspect-ratio:800 / 380; }
.platform-popover-animation :is(.gateway-chat-shell,.gateway-wick-panel) { top:3%; }
.platform-popover-animation .gateway-mcp-gate { top:43%; }
.platform-popover-animation .gateway-motion-caption { min-height:28px; margin-top:8px; }
.platform-popover-animation .gateway-motion-toggle { min-height:28px; padding-block:0; }


/* The hotspot marks the rich rollover, rather than ordinary navigation links. */
.platform-overview .diagram-hotspot { position:absolute; z-index:4; top:-8px; right:-8px; display:block; width:17px; height:17px; border:2px solid #0B0D10; border-radius:50%; background:#FFE45C; pointer-events:none; }
.diagram-hotspot::after { content:''; position:absolute; width:4px; height:4px; top:50%; left:50%; transform:translate(-50%,-50%); border-radius:50%; background:#0B0D10; }
.diagram-hotspot::before { content:''; position:absolute; inset:-3px; border:1.5px solid #0B0D10; border-radius:50%; opacity:0; animation:diagram-hotspot-pulse 3.6s ease-out infinite; }
.platform-overview .platform-entry-card[data-platform-popover] .diagram-hotspot { top:11px; right:11px; }
.platform-overview :is(.input-capabilities-heading,.input-capability-tools) a { position:relative; }
@keyframes diagram-hotspot-pulse { 0%,55%,100% { transform:scale(1); opacity:0; } 8% { opacity:.65; } 45% { transform:scale(1.85); opacity:0; } }
.platform-entry-frontier[aria-expanded="true"] .diagram-hotspot::before,
.platform-overview a:hover .diagram-hotspot::before { animation:none; opacity:0; }
@media(prefers-reduced-motion:reduce) { .diagram-hotspot::before { animation:none; } }

.platform-rich-popover[data-placement="above"]::before { top:auto; bottom:-11px; transform:rotate(225deg); }
.platform-rich-popover[data-placement="floating"]::before { display:none; }
.platform-overview .capability-explainer-trigger { position:relative; grid-column:1 / 3; display:grid; grid-template-columns:110px minmax(0,1fr); align-items:center; gap:18px; width:100%; min-height:44px; padding:0 34px 0 0; border:0; background:transparent; color:#0B0D10; text-align:left; font:inherit; font-weight:700; cursor:pointer; }
.platform-overview .capability-explainer-trigger .diagram-hotspot { right:8px; top:13px; }
.platform-overview .capability-explainer-trigger:is(:hover,:focus-visible,[aria-expanded="true"]) { color:#0B0D10; }
.platform-overview .capability-explainer-trigger:is(:hover,[aria-expanded="true"]) > span:nth-child(2) { text-decoration:underline; text-decoration-color:#FFE45C; text-decoration-thickness:4px; text-underline-offset:5px; }
.platform-overview .capability-explainer-trigger:focus-visible { outline:2px solid #0B0D10; outline-offset:5px; }
[data-platform-popover][aria-expanded="true"] .diagram-hotspot::before { animation:none; opacity:0; }
.platform-analytics-popover .hero-collage { width:350px; max-width:100%; margin:0 auto; }
.platform-analytics-popover .collage-person { display:block; }
.platform-overview .platform-analytics-popover .folder-pocket h3 { position:absolute; top:72%; left:8%; right:8%; margin:0; font-size:2.5cqw; text-align:center; line-height:1.2; font-weight:750; letter-spacing:-.025em; }