/* Original A1 footage, with diagrams available as supporting explanations. */




.tech-jump{border-bottom:1px solid var(--line)}
.tech-jump .wrap{display:flex;gap:36px;flex-wrap:wrap}
.tech-jump a{display:flex;align-items:center;gap:18px;padding-block:20px;font-size:.875rem}
.tech-jump a:hover{color:var(--link)}
.tech-jump svg{width:15px;height:15px;transform:rotate(90deg);color:var(--link)}
/* .tech-section carries no padding-block of its own: these sections had drifted
   to 76px/82px while the two plain .section blocks lower down the same page
   stayed on the site ladder (110 / 87 / 63), so one page ran two rhythms. */
.tech-section>.wrap>h2{font-size:clamp(2.65rem,4.3vw,4.35rem);margin-bottom:36px}
.tech-video-tabs{display:flex;gap:30px;border-bottom:1px solid #34434b;margin-bottom:28px;width:calc((100% - 52px)*.68)}
.tech-video-tabs button{position:relative;background:none;border:0;color:#9dafb9;font-size:1rem;padding:0 0 14px;min-width:95px;min-height:44px;text-align:center}
.tech-video-tabs button[aria-selected=true]{color:#fff}
.tech-video-tabs button[aria-selected=true]:after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:2px;background:var(--cyan)}
.tech-video-tabs button:hover{color:#fff}
.tech-video-layout{display:grid;grid-template-columns:minmax(0,2.125fr) minmax(0,1fr);gap:52px;align-items:start}
.tech-video-layout[hidden]{display:none}
.tech-module-intro{margin-bottom:40px;max-width:none}
.tech-module{width:100%}
/* technology.js measures the export and sets the exact height; these are only
   the reserved space before that runs, so each band sits just above the tallest
   the module actually renders there — never below, or a scripting failure would
   clip it. */
.tech-module-frame{display:block;width:100%;border:0;height:1000px;background:var(--paper)}
@media(min-width:850px){.tech-module-frame{height:1250px}}
@media(min-width:1000px){.tech-module-frame{height:800px}}
.tech-footage{min-width:0}
.tech-player{aspect-ratio:16/9;background:#071015;position:relative;overflow:hidden}
.tech-player iframe,.tech-player video{position:absolute;inset:0;display:block;width:100%;height:100%;border:0}
.tech-player video{object-fit:cover} /* No frame: the 1px rim read as a black border on light sections (Vivian, 5 Oct). */
/* The poster covers the native initial-play UI; playback uses native controls. */
.tech-start{position:absolute;inset:0;z-index:1;background:#071015}
.tech-start[hidden]{display:none}
.tech-start>img{display:block;width:100%;height:100%;object-fit:contain}
.tech-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;height:min(25%,192px);aspect-ratio:1;padding:0;border:0;border-radius:50%;background:rgba(0,0,0,.3);color:#00a5e5;cursor:pointer}
.tech-play[hidden]{display:none}
.tech-play svg{display:block;width:100%;height:100%;transform:translateX(3%)}
@media(hover:hover) and (pointer:fine){.tech-play svg{filter:drop-shadow(0 0 0 transparent);transition:filter .15s}.tech-play:hover svg{filter:drop-shadow(0 0 4px currentColor)}}
.tech-play:focus-visible{outline:2px solid var(--cyan);outline-offset:5px}
.tech-footage figcaption{font-size:.875rem;line-height:1.6;color:var(--sub);padding-top:14px;max-width:670px}
.dark .tech-footage figcaption{color:#aebec6}
.tech-video-copy{padding-top:4px}
.tech-video-copy h3{font-size:1.5rem;letter-spacing:-.025em;line-height:1.2;margin-bottom:20px}
.tech-video-copy p{font-size:1rem;line-height:1.7}
.tech-video-copy p+p{margin-top:19px}
.tech-video-copy .text-link{margin-top:20px}
.tech-safety-copy p+h3{margin-top:26px}
.tech-explainer{margin-top:38px;border-block:1px solid var(--line)}
.dark .tech-explainer{border-color:#34434b}
.tech-explainer summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:21px;cursor:pointer;font-size:1rem}
.tech-explainer summary::-webkit-details-marker{display:none}
.tech-explainer summary>span{width:18px;height:18px;flex:none;position:relative;color:var(--link)}
.dark .tech-explainer summary>span{color:#54c2ed}
.tech-explainer summary>span:before,.tech-explainer summary>span:after{content:'';position:absolute;inset:8px 1px; background:currentColor;height:1px}
.tech-explainer summary>span:after{transform:rotate(90deg)}
.tech-explainer[open] summary>span:after{transform:none}
.tech-explainer summary:hover{color:var(--link)}
.dark .tech-explainer summary:hover{color:#54c2ed}
.tech-explainer-content{padding-bottom:28px}
/* The sensing module sits in a narrower column here than on the A1 page, so its
   tabs stack instead of spreading across a row. Scoped to .tech-explainer, which
   exists on this page and on international/es/cn; the A1 pages load neither and are
   untouched. */
.tech-explainer .stage-tabs{flex-direction:column;align-items:flex-start;gap:0;padding-bottom:0;border-bottom:0}
.tech-explainer .stage-note{margin-top:8px;max-width:34em;color:rgba(255,255,255,.68)}
.tech-explainer .stage-note+.stage-tab{margin-top:38px}
/* The explainer opens directly under the video tabs, so its diagram lines up
   with the player above it: same columns, gap, top alignment and 16:9 as
   .tech-video-layout, at that layout's breakpoints rather than .sensing-split's
   own 900px collapse, which this beats on specificity. */
.tech-explainer .sensing-split{grid-template-columns:minmax(0,2.125fr) minmax(0,1fr);gap:52px;align-items:start}
.tech-explainer .stage-frame{aspect-ratio:16/9}
.tech-explainer .stage-tabs{margin-top:4px}
@media(max-width:1000px){.tech-explainer .sensing-split{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:32px}}
@media(max-width:780px){.tech-explainer .sensing-split{grid-template-columns:1fr;gap:28px}.tech-explainer .stage-tabs{margin-top:0}}
/* The sensing explainer closes without a rule. Scoped to #sensing so the shadow-room
   explainer in #uv-c -- still present on international/es/cn -- keeps its own. */
#sensing .tech-explainer{border-bottom:0}

.tech-shadow-study .exposure-photo{max-width:600px;margin-inline:auto}
.tech-shadow-study .exposure-photo-frame{background:#071015}
.tech-shadow-study .exposure-photo img{width:100%;height:auto;object-fit:contain}
@media(min-width:1500px){.tech-video-copy{padding-top:14px}}
@media(max-width:1000px){.tech-video-layout{gap:32px;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}.tech-video-tabs{width:calc((100% - 32px)*.6154)}.tech-jump .wrap{gap:25px}.tech-jump a{gap:12px}}
@media(max-width:780px){.tech-jump .wrap{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}.tech-jump a{justify-content:space-between;padding-block:14px;font-size:.8125rem}.tech-video-layout{grid-template-columns:1fr;gap:28px}.tech-video-tabs{width:100%}.tech-section>.wrap>h2{margin-bottom:29px}.tech-video-copy{padding:0;max-width:600px}.tech-video-copy h3{margin-bottom:15px}.tech-video-copy p+p{margin-top:15px}.tech-footage figcaption{padding-top:11px}.tech-explainer{margin-top:30px}.tech-explainer summary{font-size:.9375rem}}
@media(max-width:780px){/* Spread the three tabs across the bar instead of a fixed gap: at 375px the
   buttons total 244px in a 331px bar, and a gap large enough to look spaced
   there wraps "Navigation" onto a second line at 320px. space-between uses
   whatever room exists, with 12px as the floor. */
.tech-video-tabs{gap:12px;justify-content:space-between}.tech-video-tabs button{min-width:0;flex-shrink:0;white-space:nowrap}}
/* ADIS: approved reporting photograph, then three full-width reporting points. */
#adis .adis-reporting-intro{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,72px);align-items:center}
#adis .adis-reporting-intro>.feature-copy{min-width:0}
#adis .adis-reporting-photo{margin:0;min-width:0;aspect-ratio:16/9;overflow:hidden}
#adis .adis-reporting-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 55%}
#adis .adis-reporting-body{min-width:0;margin-top:48px}
#adis .three-lines{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:36px;margin-top:0;border-color:#34474f}
#adis .three-lines>div{display:block;min-width:0;padding-block:24px;border-color:#34474f}
#adis .three-lines>div h3{margin-bottom:14px}
#adis .adis-reporting-body>.text-link{margin-top:24px}
@media(max-width:850px){
  #adis .adis-reporting-intro{grid-template-columns:minmax(0,1fr);gap:28px}
  #adis .adis-reporting-body{margin-top:32px}
  #adis .three-lines{grid-template-columns:minmax(0,1fr);gap:0}
}

#adis .adis-connectivity-note{font-size:1rem;line-height:1.7;max-width:760px;margin-top:24px}
/* Hairline per cell rather than one rule across the grid, matching
   .industry-challenges. First row only: the cells already carry a
   border-bottom, so a top border on row two would sit on row one's and read as
   2px -- there is no row gap to separate them. Multi-column layout only; below
   850px the grid is a single column and every top border would double. */
@media(min-width:851px){#adis .three-lines{border-top:0}#adis .three-lines:not(.two-col)>div:nth-child(-n+3){border-top:1px solid #34474f}}
/* The U.S. page carries four cards, which orphan one in a three-column grid.
   .two-col is opt-in so the other editions, which still list six, keep three
   columns off the same stylesheet. The first-row hairline follows the count. */
#adis .three-lines.two-col{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(56px,7vw,112px)}
@media(min-width:851px){#adis .three-lines.two-col>div:nth-child(-n+2){border-top:1px solid #34474f}}
@media(max-width:1100px){#adis .three-lines.two-col{grid-template-columns:1fr;border-top:1px solid #34474f}#adis .three-lines.two-col>div{border-top:0!important}}
/* The intro sits beside the heading rather than under it, in the site's own
   .editorial-split. The 40px before the module now belongs to the split as a
   whole: the paragraph's own margin sat inside its grid cell, where it showed
   only when that column happened to be the taller of the two. The injected
   iframe rule in technology.js is calibrated to this 40px, so the gap the
   module sees is unchanged. Only this edition has the module -- international/es/cn
   keep a photo and their own copy in #uv-c, and match neither selector. */
#uv-c .editorial-split{grid-template-columns:1fr 1.15fr;margin-bottom:24px}
#uv-c.section{padding-bottom:20px}
/* Keep the size this heading already had as a full-width h2, and drop
   .editorial-split's 500px cap, so the authored <br> still sets the two lines
   instead of the column re-wrapping "Position. Duration." at wide viewports. */
#uv-c .editorial-split h2{font-size:clamp(2.65rem,4.3vw,4.35rem);max-width:none}
#uv-c .tech-module-intro{margin-bottom:0}
/* ...and above 1250px that intro lines up with the simulator's own right-hand
   panel instead of starting ~92px to its left. The panel begins a flat 748px
   from the iframe's left edge wherever it sits beside the board (measured 748
   at 1250 / 1320 / 1366 / 1440 / 1600 -- the board is a fixed width) and ends
   flush with the wrap, so 648px + the 100px gap puts the paragraph on exactly
   that track: both edges line up and the column ends up the panel's own width
   (481px at 1366, 548px at 1440, 652px at 1600).
   Below ~1225 the simulator's flex row wraps and the panel goes full width, so
   there is nothing to align to and a fixed 648px would squeeze the paragraph --
   hence the 1250px floor, and the 1fr 1.15fr split above still applies under
   it. es/cn carry a photo here, not the module, and have no .editorial-split
   in this section, so neither rule reaches them. */
@media(min-width:1250px){#uv-c .editorial-split{grid-template-columns:648px minmax(0,1fr)}}