/* Product-specific diagrams and layouts. Shared page components live in styles.css. */
.product-meta-row{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:18px 32px;margin-top:26px}
.product-meta-row .hero-meta{margin:0}
.product-meta-row .motion-toggle{font-size:11px;white-space:nowrap}
.product-visual-section{padding:12px 0 30px}
.product-art-label{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 28px;border-bottom:1px solid var(--border);font:10px var(--font-mono);letter-spacing:1.2px;color:var(--muted)}
.product-art-label span:last-child{font-size:9px;color:var(--accent)}
.product-art-footnote{padding:18px 28px;border-top:1px solid var(--border);font-size:13px;color:var(--muted);line-height:1.65}
.product-demo-layout{display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;gap:70px}
.product-demo-copy h2{margin:20px 0 28px;font-size:clamp(40px,5.3vw,74px);line-height:1.06;letter-spacing:-3px}
.product-demo-copy>p:not(.eyebrow){max-width:430px;margin-bottom:20px;color:var(--muted);font-size:16px;line-height:1.75}
.product-demo-copy .text-link{margin-top:10px}
.product-demo-layout .network-lab{width:100%;transform:none}
.product-crosslink{display:flex;align-items:center;justify-content:space-between;gap:40px;margin-top:48px;padding:34px 38px;border:1px solid var(--border);border-radius:20px;background:var(--surface)}
.product-crosslink h3{margin:8px 0;font-size:24px;line-height:1.25;letter-spacing:-.6px}
.product-crosslink p:not(.eyebrow){max-width:640px;color:var(--muted);font-size:15px;line-height:1.7}
.product-crosslink .button{flex-shrink:0}
/* Live: data travelling through a labelled, illustrative workflow. */
.live-pipeline{overflow:hidden;border:1px solid var(--border);border-radius:24px;background:radial-gradient(ellipse at 50% 45%,#21405244,transparent 60%),var(--surface);box-shadow:0 32px 100px #0003}
.pipeline-stages{display:grid;grid-template-columns:1fr 40px 1fr 40px 1.15fr;align-items:start;gap:8px;padding:45px 34px 35px}
.pipeline-stages h3{margin-top:28px;font-size:19px;letter-spacing:-.5px}
.pipeline-stages p{margin-top:8px;max-width:255px;color:var(--muted);font-size:15px;line-height:1.75}
.pipeline-stage-number{display:block;margin-bottom:28px;font:10px var(--font-mono);letter-spacing:1px;color:var(--accent)}
.switch-stack{height:188px;display:flex;flex-direction:column;justify-content:center;gap:13px;padding-right:3px;perspective:600px}
.pipeline-switch{display:flex;align-items:center;gap:5px;min-height:47px;padding:12px 11px;background:linear-gradient(150deg,#26384d,#142033);border:1px solid #476077;border-radius:6px;box-shadow:0 8px 0 #101927,0 12px 22px #0004;transform:rotateY(12deg)}
.pipeline-switch>span{flex:1;font:7px var(--font-mono);color:#c6d4e6;letter-spacing:.2px}
.pipeline-switch i{width:10px;height:10px;position:relative;background:#091423;border:1px solid #59748b;border-radius:1px}
.pipeline-switch i::after{content:'';position:absolute;top:-5px;left:2px;width:3px;height:2px;background:var(--accent);box-shadow:0 0 7px #47d8d188;animation:product-link-pulse 4s ease-in-out infinite}
.pipeline-switch:nth-child(2) i::after{animation-delay:1.1s}.pipeline-switch:nth-child(3) i::after{animation-delay:2.2s}
.pipeline-connector{position:relative;display:flex;align-items:center;justify-content:center;height:188px;margin-top:38px;color:var(--accent)}
.pipeline-connector::before{content:'';height:1px;position:absolute;left:0;right:0;top:50%;background:#3f6678}
.pipeline-connector b{z-index:1;padding:3px;background:#162839;font-weight:400}
.pipeline-connector>span{position:absolute;left:0;top:calc(50% - 2px);height:4px;width:5px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent);animation:product-data-flow 3.5s ease-in-out infinite}
.pipeline-core{position:relative;height:188px;display:grid;place-items:center}
.pipeline-core>strong{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;width:112px;height:112px;border:1px solid #4c7e8d;border-radius:26px;background:linear-gradient(140deg,#2d465b,#172639);box-shadow:0 20px 45px #0005,inset 0 1px 0 #d1fbff1c;color:#f1f6fb;font-size:39px;letter-spacing:-2px}
.pipeline-core>strong>span{font:9px var(--font-mono);color:var(--accent);letter-spacing:4px;margin-top:2px;margin-left:4px}
.core-orbit{position:absolute;width:174px;height:174px;border:1px solid #4b849933;border-radius:50%}.core-orbit.orbit-two{width:220px;height:220px;border-color:#4b84991a}
.core-node{position:absolute;width:5px;height:5px;background:var(--accent);border-radius:50%;box-shadow:0 0 12px #47d8d188;animation:product-link-pulse 4s ease-in-out infinite}.node-one{top:10px;left:calc(50% - 2px)}.node-two{bottom:48px;left:calc(50% - 79px);animation-delay:1.3s}.node-three{bottom:48px;right:calc(50% - 79px);animation-delay:2.6s}
.pipeline-workbook{height:188px;display:flex;flex-direction:column;overflow:hidden;border:1px solid #43647b;border-radius:10px;background:#142234;box-shadow:0 14px 25px #0003;transform:perspective(600px) rotateY(-5deg)}
.workbook-heading{display:flex;align-items:center;gap:7px;padding:13px 10px;font:9px var(--font-mono);border-bottom:1px solid #35475c;color:#d2e1ef}.workbook-heading>span{color:var(--accent);font-size:14px}.workbook-heading b{margin-left:auto;border:1px solid #466c78;border-radius:3px;padding:3px;font-size:7px;color:var(--accent)}
.workbook-grid{display:grid;grid-template-columns:1fr .85fr 1fr;flex:1;font:8px var(--font-mono);color:#a8bccc}.workbook-grid>*{padding:6px 7px;border-bottom:1px solid #2d3e51;border-right:1px solid #2d3e51;white-space:nowrap}.workbook-grid strong{background:#1c3041;font-weight:400;color:var(--accent)}
.workbook-tabs{display:flex;gap:2px;padding:4px 5px;font:7px var(--font-mono);color:#a5b9ce}.workbook-tabs>span{padding:4px 8px;border:1px solid #354b62;border-radius:3px 3px 0 0}.workbook-tabs>span:first-child{color:var(--accent);border-bottom:1px solid var(--accent)}
/* Hardware: the existing board language, expanded into a field-unit scene. */
.hardware-product-scene{overflow:hidden;border:1px solid var(--border);border-radius:24px;background:radial-gradient(ellipse at 32% 42%,#28475a55,transparent 62%),var(--surface);box-shadow:0 32px 100px #0003}
.hardware-scene-layout{display:grid;grid-template-columns:1.1fr .25fr 1fr;align-items:center;max-width:850px;margin:auto;padding:38px 40px 48px;min-height:420px}
.hardware-board-stage{display:grid;position:relative;place-items:center;height:320px;perspective:700px}
.hardware-board-stage .pi-board{position:relative;inset:auto;width:228px;height:160px;transform:rotate(-12deg) rotateY(7deg);background:linear-gradient(135deg,#1b5a68,#153541);border:1px solid #548899;box-shadow:10px 18px 0 #0c202d,10px 20px 0 #315669,20px 36px 55px #0005;border-radius:12px}
.hardware-board-stage .board-label{color:#b6dbe2;font-size:16px;position:absolute;left:20px;top:20px;line-height:1.4}.hardware-board-stage .board-label b{font-size:8px;letter-spacing:2px;font-weight:400}.hardware-board-stage .board-chip{position:absolute;left:94px;top:59px;width:52px;height:50px;background:linear-gradient(135deg,#344451,#14212b);border:1px solid #628290;box-shadow:0 0 0 6px #496b7744}
.hardware-board-stage .board-pins{position:absolute;left:19px;bottom:15px;width:116px;height:12px;background:repeating-linear-gradient(90deg,#aac4c1 0 3px,#122f3a 3px 8px);border:3px solid #102a35}
.hardware-board-stage .board-ports{position:absolute;right:-8px;top:15px;display:flex;flex-direction:column;gap:7px}.hardware-board-stage .board-ports i{display:block;width:33px;height:35px;background:linear-gradient(135deg,#94a3af,#465b6b);border:1px solid #b9c8cf;box-shadow:3px 5px 0 #263b48}.hardware-board-stage .board-ports i:last-child{height:43px;background:linear-gradient(135deg,#93a8b7,#3d5365)}
.hardware-board-stage .board-led{position:absolute;left:18px;top:auto;bottom:40px;width:5px;height:5px;background:var(--accent);border-radius:50%;box-shadow:0 0 13px var(--accent);animation:product-link-pulse 4s ease-in-out infinite}
.hardware-orbit{position:absolute;width:275px;height:275px;border:1px solid #518b9b2a;border-radius:50%;transform:rotateX(50deg);pointer-events:none}.hardware-orbit.orbit-two{width:355px;height:355px;border-color:#518b9b15}
.hardware-board-caption{position:absolute;bottom:10px;font:10px var(--font-mono);letter-spacing:2px;color:var(--muted)}
.hardware-wireless{position:relative;display:flex;align-items:center;justify-content:center;gap:7px;height:90px}
.hardware-wireless>span{width:12px;height:12px;border:1px solid #47d8d166;border-left-color:transparent;border-bottom-color:transparent;border-radius:50%;transform:rotate(45deg);animation:product-link-pulse 4s ease-in-out infinite}.hardware-wireless>span:nth-child(2){width:22px;height:22px;animation-delay:.7s}.hardware-wireless>span:nth-child(3){width:34px;height:34px;animation-delay:1.4s}
.hardware-wireless>p{position:absolute;bottom:-12px;white-space:nowrap;font:8px var(--font-mono);color:var(--muted);letter-spacing:1px}
.hardware-phone{position:relative;justify-self:center;width:192px;padding:27px 9px 12px;background:linear-gradient(135deg,#354253,#121b2a);border:1px solid #536274;border-radius:28px;box-shadow:10px 25px 40px #0006;transform:rotate(5deg)}
.phone-speaker{position:absolute;top:11px;left:76px;height:4px;width:38px;background:#0a1421;border-radius:10px}
.phone-screen{overflow:hidden;min-height:265px;border-radius:9px 9px 18px 18px;background:#0c1626;border:1px solid #293f53;padding:14px 10px 8px}
.phone-header{display:flex;align-items:center;justify-content:space-between;padding:4px 0 12px;color:#eff9fb;font-size:22px;font-weight:600}.phone-header>span{font:7px var(--font-mono);color:var(--accent)}
.phone-result{margin-top:7px;padding:11px 9px;border:1px solid #2d455b;background:#18283b;border-radius:7px}.phone-result>span{display:block;font:6px var(--font-mono);letter-spacing:.5px;color:#9db8c7}.phone-result>strong{display:block;margin-top:5px;font:12px var(--font-mono);color:#e4f0f8}.phone-line{height:3px;width:88%;background:#3a596d;margin-top:9px}.phone-line.short{width:58%;margin-top:6px}.phone-bottom{display:flex;justify-content:space-between;gap:5px;margin-top:14px;font:6px var(--font-mono);color:#b0c4d3}.phone-bottom>span:first-child{color:var(--accent)}
.hardware-build-panel{display:grid;grid-template-columns:1.1fr 1fr;gap:60px;padding:56px;border:1px solid var(--border);border-radius:24px;background:var(--surface)}
.hardware-build-panel h2{font-size:clamp(36px,4.5vw,60px);line-height:1.07;letter-spacing:-2px;margin:20px 0}.hardware-build-panel>div>p:not(.eyebrow){color:var(--muted);font-size:15px;line-height:1.75;max-width:450px}.hardware-build-panel .hero-actions{justify-content:flex-start;flex-wrap:wrap;margin-top:28px}
.hardware-build-checklist{align-self:center}.hardware-build-checklist>p{margin-bottom:18px}.hardware-build-checklist dl>div{padding:18px 0;border-bottom:1px solid var(--border);display:grid;grid-template-columns:1fr 1.15fr;gap:16px;font-size:13px}.hardware-build-checklist dt{color:var(--muted)}.hardware-build-checklist dd{color:var(--text)}
@keyframes product-link-pulse{0%,100%{opacity:.45}45%{opacity:1}65%{opacity:.65}}
@keyframes product-data-flow{0%{transform:translateX(0);opacity:0}20%{opacity:1}80%{opacity:1}100%{transform:translateX(34px);opacity:0}}
@media(min-width:1000px){.product-desktop .product-hero{padding-bottom:30px}.product-desktop .action-section{padding-top:40px}}
@media(max-width:1050px){.pipeline-stages{grid-template-columns:1fr 24px 1fr 24px 1.1fr;padding:35px 22px}.pipeline-switch{padding:10px 7px;gap:3px}.pipeline-switch>span{font-size:6px}.pipeline-switch i{width:8px;height:9px}.workbook-grid{font-size:7px}.workbook-grid>*{padding:6px 4px}.workbook-heading{font-size:7px}.core-orbit.orbit-two{width:190px;height:190px}.product-demo-layout{gap:36px}.hardware-build-panel{padding:36px;gap:35px}}
@media(max-width:760px){.product-demo-layout{grid-template-columns:1fr;gap:35px}.product-demo-copy>p:not(.eyebrow){max-width:580px}.product-demo-copy h2{letter-spacing:-2px}.pipeline-stages{grid-template-columns:1fr;gap:0;padding:28px}.pipeline-stages>div:not(.pipeline-connector){display:grid;grid-template-columns:1fr 1fr;column-gap:24px;align-items:center}.pipeline-stage-number{grid-column:1/-1;margin-bottom:15px}.pipeline-stages h3{margin-top:0;grid-column:2;grid-row:2;align-self:end;padding-bottom:10px}.pipeline-stages p{grid-column:2;grid-row:3;margin-top:0;align-self:start}.pipeline-stages .switch-stack,.pipeline-stages .pipeline-core,.pipeline-stages .pipeline-workbook{grid-column:1;grid-row:2/4;width:100%}.pipeline-connector{height:50px;margin-top:8px;transform:rotate(90deg);justify-self:start;width:40px;margin-left:calc(25% - 20px)}.pipeline-switch>span{font-size:7px}.pipeline-switch i{width:9px}.workbook-grid{font-size:8px}.pipeline-stages p{font-size:15px}.pipeline-core>strong{width:95px;height:95px;font-size:34px}.core-orbit{width:155px;height:155px}.core-orbit.orbit-two{width:185px;height:185px}.node-one{top:15px}.node-two{left:calc(50% - 70px)}.node-three{right:calc(50% - 70px)}.product-crosslink{flex-direction:column;align-items:flex-start;gap:22px;padding:28px}.hardware-scene-layout{padding:20px 24px 28px;min-height:340px}.hardware-board-stage .pi-board{transform:scale(.8) rotate(-12deg);width:210px}.hardware-board-stage{height:260px}.hardware-orbit{width:220px;height:220px}.hardware-orbit.orbit-two{width:275px;height:275px}.hardware-phone{transform:scale(.86) rotate(5deg)}.hardware-board-caption{font-size:8px;bottom:4px}.hardware-build-panel{grid-template-columns:1fr;gap:36px}}
@media(max-width:500px){.product-art-label{padding:18px;align-items:flex-start;flex-direction:column;gap:9px;font-size:9px}.product-art-footnote{padding:16px 18px;font-size:12px}.pipeline-stages{padding:26px 18px}.pipeline-stages>div:not(.pipeline-connector){grid-template-columns:1fr;gap:0}.pipeline-stage-number{margin-bottom:17px}.pipeline-stages .switch-stack,.pipeline-stages .pipeline-core,.pipeline-stages .pipeline-workbook{grid-column:1;grid-row:auto;width:100%;max-width:285px;justify-self:center}.pipeline-stages h3{grid-column:1;grid-row:auto;margin-top:22px;font-size:22px}.pipeline-stages p{grid-column:1;grid-row:auto;margin-top:8px;max-width:none;font-size:15px}.pipeline-connector{height:60px;justify-self:center;margin-left:0;margin-top:4px}.pipeline-core{height:170px}.pipeline-switch>span{font-size:8px}.pipeline-switch i{width:15px;height:12px}.workbook-grid{font-size:9px}.workbook-grid>*{padding:7px 8px}.workbook-heading{font-size:9px}.workbook-tabs{font-size:8px}.hardware-scene-layout{grid-template-columns:1fr 1fr;gap:0;padding:14px 6px 24px}.hardware-wireless{display:none}.hardware-board-stage{height:270px;width:160px;justify-self:center}.hardware-board-stage .pi-board{transform:scale(.64) rotate(-12deg)}.hardware-phone{transform:scale(.72) rotate(5deg);margin:-35px -30px}.hardware-orbit{width:150px;height:150px}.hardware-orbit.orbit-two{width:190px;height:190px}.hardware-board-caption{font-size:7px;letter-spacing:1px;bottom:15px}.hardware-build-panel{padding:26px 22px}.hardware-build-checklist dl>div{grid-template-columns:1fr;gap:5px;padding:14px 0}.hardware-build-panel .hero-actions{align-items:flex-start;gap:20px}.product-meta-row{gap:15px}.product-meta-row .hero-meta{line-height:1.9}.product-crosslink h3{font-size:22px}}
@media(prefers-reduced-motion:reduce){.pipeline-switch i::after,.pipeline-connector>span,.core-node,.hardware-board-stage .board-led,.hardware-wireless>span{animation:none!important}}
.motion-paused .pipeline-switch i::after,.motion-paused .pipeline-connector>span,.motion-paused .core-node,.motion-paused .hardware-board-stage .board-led,.motion-paused .hardware-wireless>span,.page-hidden .pipeline-switch i::after,.page-hidden .pipeline-connector>span,.page-hidden .core-node,.page-hidden .hardware-board-stage .board-led,.page-hidden .hardware-wireless>span{animation-play-state:paused!important}

.product-subnav .container>div{display:flex;align-items:center;flex-wrap:wrap;gap:12px 24px}
@media(max-width:500px){.product-subnav .container>div{gap:10px 18px}}
@media(max-width:650px){.product-page .footer-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 24px}}
@media(max-width:360px){.hardware-scene-layout{grid-template-columns:repeat(2,minmax(0,1fr));min-height:275px}.hardware-board-stage{width:130px;height:235px}.hardware-board-stage .pi-board{transform:scale(.54) rotate(-12deg)}.hardware-phone{transform:scale(.62) rotate(5deg);margin:-48px -40px}.hardware-orbit{width:130px;height:130px}.hardware-orbit.orbit-two{width:160px;height:160px}}