/* Scoped refinements: preserve the existing page width and visual language. */
#problem .scene-caption h3{font-size:calc((45.54px) * 0.9)}
#capture .io-knowledge{position:relative;isolation:isolate;grid-template-columns:minmax(180px,.65fr) minmax(180px,.8fr) minmax(0,1.4fr);column-gap:28px;align-items:start}
.io-flow-links{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;color:#6b8b9c;z-index:-1}
.io-flow-links path{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-dasharray:2 5;vector-effect:non-scaling-stroke}
#capture .io-input-grid{grid-template-columns:1fr;gap:8px}
#capture .io-input-grid .io-tile{min-height:54px;padding:10px 18px;flex-direction:row;justify-content:flex-start;gap:16px;background:#eef3f5}
#capture .io-input-grid .io-tile svg{width:28px;height:30px;flex:none}
#capture .io-input-grid .io-tile span{font-size:14px;text-align:left}
#capture .io-input h3{font-size:calc((24px) * 0.9);line-height:1.175;min-height:60px;margin-bottom:12px}#capture .io-output h3{font-size:calc((24px) * 0.9);line-height:1.175;min-height:60px;margin-bottom:12px}
#capture .io-robot-hub{align-self:center;justify-self:center;padding:0;width:100%;max-width:270px;height:auto;overflow:visible;gap:0;transform:none;opacity:1;animation:none}
#capture .io-robot-hub svg{width:100%;height:auto;max-height:none;transform:none}
#capture .io-robot-hub strong{font-family:Doto,monospace;font-size:25px;font-weight:800;color:#405f71;margin-top:8px}
#capture .io-group{margin-top:12px}
#capture .io-group:first-of-type{margin-top:0}
#capture .io-group h4{font-size:calc((17px) * 0.9);letter-spacing:0}
#capture .io-group .io-tile{opacity:1;transform:none;animation:none}
#understand .comparison-pair figcaption{font-size:calc((18px) * 0.9);line-height:1.222;font-weight:500;min-height:44px;gap:12px;flex-wrap:wrap;align-content:center;margin-bottom:16px}
#understand .comparison-pair figcaption>span{display:inline-flex;align-items:center;font-family:inherit;font-size:calc((16px) * 0.9);font-weight:700;letter-spacing:.06em;padding:7px 11px;border-radius:6px;background:#dfe4e7;color:#283e4b}
#understand .comparison-pair .output-heading figcaption>span{background:#294d60;color:#fff}
.waitlist-benefits{list-style:none;margin:26px auto 0;padding:0;max-width:820px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;text-align:left}
.waitlist-benefits li{display:flex;align-items:flex-start;gap:12px;min-width:0}
.waitlist-benefits svg{width:26px;height:26px;flex:none;color:#315b70;margin-top:2px}
.waitlist-benefits strong{display:block;font-size:calc((16px) * 0.9);font-weight:600;line-height:1.316}
.waitlist-benefits span{display:block;font-size:13px;line-height:1.41;color:#455562;margin-top:5px}
@media(max-width:1023px){
 #problem .scene-caption h3{font-size:calc((26.1px) * 0.9)}
 #capture .io-knowledge{grid-template-columns:minmax(160px,.7fr) minmax(100px,.55fr) minmax(0,1.3fr);column-gap:16px}
 #capture .io-input h3{font-size:calc((20px) * 0.9);min-height:52px}#capture .io-output h3{font-size:calc((20px) * 0.9);min-height:52px}
 #capture .io-input-grid .io-tile{padding:9px 12px;gap:10px}
 #capture .io-robot-hub strong{font-size:21px}
 #understand .comparison-pair figcaption{font-size:calc((17px) * 0.9)}
}
@media(max-width:700px){
 #capture .io-knowledge{grid-template-columns:minmax(0,1fr) minmax(100px,.8fr);column-gap:32px;row-gap:32px}
 #capture .io-input{grid-column:1}
 #capture .io-robot-hub{grid-column:2;grid-row:1;width:100%;max-width:190px}
 #capture .io-output{grid-column:1/-1}
 #capture .io-input h3{min-height:0;margin-bottom:18px}#capture .io-output h3{min-height:0;margin-bottom:18px}
 #capture .io-input-grid{gap:7px}
 #capture .io-input-grid .io-tile{min-height:48px;padding:8px 10px;gap:10px}
 #capture .io-input-grid .io-tile svg{width:23px;height:26px}
 #capture .io-input-grid .io-tile span{font-size:12px}
 #capture .io-output .io-group-grid{gap:6px}
 #capture .io-output .io-tile span{font-size:12px}
 #understand .comparison-pair figcaption{font-size:calc((16px) * 0.9);min-height:40px;gap:9px}
 #understand .comparison-pair figcaption>span{font-size:calc((14px) * 0.9);padding:6px 9px}
 .waitlist-benefits{grid-template-columns:1fr;max-width:310px;gap:19px;margin-top:26px}
 .waitlist-benefits strong{font-size:calc((15px) * 0.9)}
 .waitlist-benefits span{font-size:13px}
}
@media(prefers-reduced-motion:reduce){.io-flow-links path{animation:none}}

/* Keep labels and format tabs on one shared desktop header row. */
@media(min-width:1024px){
 #understand .comparison-pair>figure>figcaption{height:56px;min-height:56px;margin:0;padding:0;align-content:center}
 #understand .comparison-pair .output-heading{height:56px;min-height:56px;margin:0;display:flex;flex-direction:row;gap:10px;align-items:center;justify-content:space-between}
 #understand .comparison-pair .output-heading figcaption{height:44px;min-height:44px;margin:0;white-space:nowrap;flex-wrap:nowrap;align-content:center;gap:10px}
 #understand .comparison-pair .output-tabs{justify-content:flex-end;align-items:center;margin:0;flex-shrink:0;flex-wrap:nowrap;gap:5px}
 #understand .comparison-pair .output-tabs button{padding:7px 9px}
}

/* Three examples share a single card with accessible topic tabs. */
#understand .learning-carousel{position:relative;background:#f0f2f2;border:1px solid var(--line);border-radius:16px;padding:28px}
#understand .learning-carousel .understanding-example{background:none;border:0;border-radius:0;padding:0;margin:0}
#understand .learning-topic-tabs{display:flex;align-items:center;gap:22px;max-width:62%;margin-bottom:26px;min-height:42px}
#understand .learning-topic-tabs button{display:flex;align-items:baseline;gap:9px;font:inherit;font-size:calc((24px) * 0.9);line-height:1.222;white-space:nowrap;color:#6c777d;background:none;border:0;border-bottom:2px solid transparent;padding:4px 0 8px;cursor:pointer}
#understand .learning-topic-tabs button span{font-size:calc((13px) * 0.9);color:#6c777d}
#understand .learning-topic-tabs button[aria-selected="true"]{color:#191c1f;border-bottom-color:#294d60}
#understand .learning-topic-tabs button:focus-visible{outline:2px solid #698a9d;outline-offset:5px}
#understand .example-title{margin:0}
#understand .example-title h3{display:none}
#understand .example-title p{position:absolute;right:28px;top:34px;max-width:36%;margin:0;text-align:right;line-height:1.41}
@media(max-width:1023px){
 #understand .learning-carousel{padding:20px}
 #understand .learning-topic-tabs{max-width:none;gap:18px;margin-bottom:16px;flex-wrap:wrap}
 #understand .learning-topic-tabs button{font-size:calc((20px) * 0.9)}
 #understand .example-title p{position:static;max-width:none;text-align:left;margin:0 0 20px}
}
@media(max-width:600px){
 #understand .learning-carousel{padding:16px}
 #understand .learning-topic-tabs{gap:14px;align-items:stretch;flex-wrap:nowrap}
 #understand .learning-topic-tabs button{font-size:calc((14px) * 0.9);white-space:normal;flex-direction:column;gap:4px;text-align:left;min-height:52px;flex:1}
 #understand .learning-topic-tabs button span{font-size:calc((12px) * 0.9)}
}

/* Distinct spacing levels: sections separate; headings stay with their content. */
main{--module-gap:72px;--module-edge-space:36px;--content-gap:20px}
main>section.section:not(.hero){padding-top:var(--module-edge-space);padding-bottom:var(--module-edge-space)}
main>#problem{padding-top:var(--module-gap)}
main>#share.software-ecosystem{padding-top:var(--module-edge-space);padding-bottom:var(--module-edge-space);margin-top:0;margin-bottom:0}
main>section .section-head{margin-bottom:var(--content-gap)}
#problem #scene-tabs{margin-top:0;margin-bottom:var(--content-gap)}
#share .ecosystem-wall{margin-top:var(--content-gap)}
#device .hardware-story.handsfree-story{margin-top:var(--module-gap)}
#device .handsfree-story .handsfree-heading{margin-bottom:var(--content-gap)}
#privacy .privacy-grid{margin-top:var(--content-gap);margin-bottom:0}
#waitlist>p:first-of-type{margin-top:var(--content-gap)}
#waitlist form{margin-top:var(--content-gap)}
#waitlist .faq{margin-top:var(--module-gap);padding-top:var(--content-gap)}
@media(max-width:1023px){
 main{--module-gap:48px;--module-edge-space:24px;--content-gap:16px}
}

/* Section shortcuts follow the page order and stay compact in the desktop header. */
@media(min-width:1024px){header{gap:24px}header #main-nav{gap:20px;align-items:center}header #main-nav a{white-space:nowrap}}
@media(max-width:1023px){header #main-nav.mobile-open{max-height:calc(100dvh - 76px);overflow-y:auto;overscroll-behavior:contain}}