/* home page – light theme (7 Oct); the hero stage rules follow hero-stage.css */
.hero{position:relative;min-height:100vh;min-height:100svh;padding:calc(var(--nav) + 40px) 0 60px;display:flex;align-items:center;overflow-x:clip}
.hero .phero__bg::before{width:900px;height:900px;left:-300px;top:-300px}
.hero__in{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:24px;align-items:center;width:100%}
.hero__hw{display:flex;flex-direction:column}
.hero__h{display:flex;flex-direction:column;margin:0;font-size:clamp(40px,4.9vw,76px);line-height:1.02;font-weight:800;letter-spacing:-.022em}
.hero__h .line{display:block}
.hero__type{display:block;min-height:1.05em;white-space:nowrap}
.caret{color:var(--orange);font-weight:400;animation:blink 1s steps(1) infinite}
.hero.is-off .caret{animation:none}
@keyframes blink{50%{opacity:0}}
.hero .lead{margin:26px 0 30px}
.hsearch{display:flex;align-items:center;gap:14px;width:100%;max-width:600px;height:64px;padding:0 16px 0 20px;border-radius:18px;border:1px solid var(--line2);background:var(--surface-solid);color:var(--muted);font-size:16px;text-align:left;box-shadow:0 10px 30px -18px rgba(var(--ink-rgb),.35);transition:border-color .2s,background .2s,box-shadow .2s}
.hsearch:hover{border-color:rgba(245,132,31,.5);background:var(--surface-solid);box-shadow:0 0 0 5px rgba(245,132,31,.1),0 10px 30px -18px rgba(var(--ink-rgb),.35)}
.hsearch svg{width:22px;height:22px;fill:none;stroke:var(--muted);stroke-width:2;flex:none}
.hsearch__ph{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hero__chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:16px;font-size:13px}
.hero__act{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;margin-top:22px}
.hero__shop{padding:12px 20px}
.hero__note{font-size:13px;color:var(--dim)}
/* the stage: the real box + module photos (hero-stage.css .hs) in a fixed-height column; the layers are sized in cqh */
.hero__stage{position:relative;height:min(76vh,680px);min-height:470px;margin:10px 0}
/* floating badges: solid panels (no backdrop blur – SPEC budget), the bob only while the hero is on screen; they drift against
   the photos on pointer (translate – the bob animates transform, so both compose) */
.hfloat{position:absolute;z-index:3;display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:16px;background:var(--surface-solid);border:1px solid var(--line);font-size:13px;color:var(--muted);box-shadow:0 18px 40px -20px rgba(var(--ink-rgb),.4),0 1px 2px rgba(var(--ink-rgb),.06);animation:bob 7s ease-in-out infinite;translate:calc(var(--px,0) * -14px) calc(var(--py,0) * -10px);transition:translate .9s var(--ease)}
/* (the high-tier glass variant of .hfloat is gone – solid panels on every tier) */
.hfloat b{font-size:22px;color:var(--text);font-weight:800}
.hfloat--a{left:0;top:9%}.hfloat--b{right:0;top:0;animation-delay:-2.5s}
/* the pulse ring is a pseudo-element animated with transform / opacity only (SPEC budget: no infinite box-shadow animation) */
.pulse{position:relative;flex:none;width:9px;height:9px;border-radius:50%;background:var(--green)}
.pulse::after{content:"";position:absolute;inset:0;border-radius:50%;background:rgba(61,220,132,.6);animation:pl 2s infinite}
@keyframes pl{0%{opacity:.8;transform:scale(1)}70%,100%{opacity:0;transform:scale(3.2)}}
@keyframes bob{50%{transform:translateY(-12px)}}
.hero.is-off .hfloat,.hero.is-off .pulse::after{animation:none}html.user-idle .hfloat,html.user-idle .pulse::after{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.pulse::after{animation:none;opacity:0}}
.scroll-cue{position:absolute;left:50%;bottom:22px;width:26px;height:42px;margin-left:-13px;border-radius:14px;border:2px solid var(--line2)}
.scroll-cue span{position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--orange);animation:cue 1.8s infinite}
.hero.is-off .scroll-cue span{animation:none}
@keyframes cue{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(14px)}}
/* a 3D stage waiting for its WebGL context (home-gl.js) shows its still */
.stage3d.gl-wait{background:center/contain no-repeat var(--fallback,none)}
.stage3d.gl-wait::before{display:none}
.stage3d canvas{transition:opacity .5s var(--ease)}
.stage3d.gl-wait canvas{opacity:0}

/* inside – the module splits into five layers. The section is tall and the stage sticks (no JS pin): page-home.js maps the
   section's scroll position to turn / split / caption. Desktop: 2200 px of scroll; phones: 170 % of the screen height. */
.inside{position:relative;height:calc(100vh + 2200px);height:calc(100svh + 2200px)}
.inside__pin{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden}
.inside__in{display:grid;grid-template-columns:.9fr 1.1fr;gap:30px;align-items:center;width:100%}
.inside__stage{position:relative;height:min(80vh,760px);min-height:440px}
.inside__meta{display:flex;align-items:center;gap:8px;margin:18px 0 0;font:700 12px/1 Inter,sans-serif;letter-spacing:.14em;color:var(--dim)}
.inside__meta b{font:800 15px/1 Inter,sans-serif;letter-spacing:.04em;color:var(--orange2);font-variant-numeric:tabular-nums}
.inside__meta i{font-style:normal}
.inside__bar{position:relative;flex:1;height:3px;margin-left:12px;border-radius:3px;background:var(--line);overflow:hidden}
.inside__bar i{position:absolute;inset:0;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,var(--orange),var(--blue2))}
/* the layer list: titles in a column, the description of the current layer in one caption box under it (cross-fade, no
   height animation) */
/* owner (6 Oct): layer names only, no caption sentences – the caption slot (--cap) is gone */
.inside__sub{display:flex;align-items:center;gap:10px;margin:14px 0 0;font-size:14px}
.mono-h{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:-.01em;font-size:.82em}
.b19__fact{margin-top:12px;max-width:640px;font-size:14.5px}
.layers{--cap:0px;position:relative;list-style:none;margin:30px 0 0;padding:0 0 var(--cap);display:flex;flex-direction:column;gap:4px;counter-reset:l}
.layers li{display:flex;align-items:baseline;gap:14px;padding:11px 18px;border-radius:14px;border:1px solid transparent;color:var(--dim);counter-increment:l;transition:background-color .35s,border-color .35s}
.layers li::before{content:counter(l,decimal-leading-zero);flex:none;font:800 13px Inter,sans-serif;color:var(--dim);transition:color .3s}
.layers li b{display:block;font-size:18px;color:var(--muted);transition:color .3s}
.layers li span{position:absolute;left:0;right:0;bottom:0;height:calc(var(--cap) - 14px);display:flex;align-items:center;padding:14px 20px;border-radius:16px;background:var(--card);border:1px solid var(--line2);font-size:15px;line-height:1.5;color:var(--text);opacity:0;transform:translateY(10px);transition:opacity .35s,transform .45s var(--ease);pointer-events:none}
.layers li.is-on{background:var(--surface-solid);border-color:var(--line2);box-shadow:0 10px 24px -18px rgba(var(--ink-rgb),.3)}
.layers li.is-on::before{color:var(--orange2)}.layers li.is-on b{color:var(--text)}
.layers li.is-on span{opacity:1;transform:none}
/* the 3D labels follow the caption: the described layer's label is lit, the others dim */
#insideStage .s3d-tag{transition:opacity .25s,filter .3s,background-color .3s,color .3s}
.inside[data-k] #insideStage .s3d-tag{filter:opacity(.34)}
.inside[data-k] #insideStage svg line{stroke-opacity:.3}
.inside[data-k="0"] #insideStage .s3d-tag:nth-of-type(1),.inside[data-k="1"] #insideStage .s3d-tag:nth-of-type(2),.inside[data-k="2"] #insideStage .s3d-tag:nth-of-type(3),
.inside[data-k="3"] #insideStage .s3d-tag:nth-of-type(4),.inside[data-k="4"] #insideStage .s3d-tag:nth-of-type(5){filter:none;background:var(--orange);border-color:transparent;color:#1b0d00;font-weight:700}
.inside[data-k="0"] #insideStage svg g:nth-of-type(1) line,.inside[data-k="1"] #insideStage svg g:nth-of-type(2) line,.inside[data-k="2"] #insideStage svg g:nth-of-type(3) line,
.inside[data-k="3"] #insideStage svg g:nth-of-type(4) line,.inside[data-k="4"] #insideStage svg g:nth-of-type(5) line{stroke-opacity:1}
.inside[data-k] #insideStage .s3d-tag:nth-of-type(n)::before{transition:background-color .3s}
.inside[data-k="0"] #insideStage .s3d-tag:nth-of-type(1)::before,.inside[data-k="1"] #insideStage .s3d-tag:nth-of-type(2)::before,.inside[data-k="2"] #insideStage .s3d-tag:nth-of-type(3)::before,
.inside[data-k="3"] #insideStage .s3d-tag:nth-of-type(4)::before,.inside[data-k="4"] #insideStage .s3d-tag:nth-of-type(5)::before{background:#1b0d00;box-shadow:0 0 0 3px rgba(27,13,0,.25)}
/* reduced motion: a plain section, every layer listed with its text, the module shown split */
.inside--static{height:auto;padding:100px 0}
.inside--static .inside__pin{position:relative;height:auto}
.inside--static .layers{padding-bottom:0}
.inside--static .layers li{flex-wrap:wrap}
.inside--static .layers li span{position:static;height:auto;width:100%;padding:4px 0 0 34px;background:none;border:0;opacity:1;transform:none}
.inside--static .inside__meta{display:none}

/* statement */
.words{max-width:1040px;margin:0 auto;font-size:clamp(26px,3.8vw,52px);font-weight:700;line-height:1.2;letter-spacing:-.025em;text-align:center}
.words span{opacity:.15}.words.is-static span{opacity:1}

/* brands – "Explore our brands" slider: styles live in explore.css; home-only fixes for touch screens below */
#brands .xp-host{min-height:487px}
@media (max-width:760px){#main>#brands{padding-top:40px}}   /* the sticky stack above already ends with its resting space */
@media (min-width:1025px) and (hover:hover){#brands{padding-top:64px}}   /* the pinned stack above already ends in its own nav row */

/* models track */
.arrows{display:flex;gap:8px}
.arrows .icon-btn{width:44px;height:44px}
.track{--edge:max(var(--gut),calc((100% - var(--wrap))/2 + var(--gut)));display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px var(--edge) 26px;scroll-padding-inline:var(--edge);scrollbar-width:none;cursor:grab;-webkit-user-select:none;user-select:none}
.track::-webkit-scrollbar{display:none}.track.is-drag{cursor:grabbing;scroll-snap-type:none}
.mcard{--rx:0deg;--ry:0deg;--px:0;--py:0;position:relative;flex:0 0 270px;scroll-snap-align:start;border-radius:var(--r2);background:var(--surface-solid);border:1px solid var(--line);overflow:hidden;transition:transform .5s var(--ease),border-color .3s,box-shadow .45s var(--ease)}
.mcard.is-tilt{transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry))}   /* flat at rest – no permanent 3D layer per card */
.mcard:hover{transform:perspective(900px) translateY(-6px) rotateX(var(--rx)) rotateY(var(--ry));border-color:rgba(47,123,224,.45)}
.mcard.is-tilt{transition:transform .14s linear,border-color .3s,box-shadow .45s var(--ease)}
.mcard:has(.stg):hover{border-color:color-mix(in srgb,var(--glow,#2f7be0) 50%,transparent);box-shadow:0 30px 50px -36px rgba(var(--ink-rgb),.35)}
.mcard__img{aspect-ratio:1;overflow:hidden;display:grid;place-items:center}.mcard__img:not(.stg){background:#fff}
.mcard__img:not(.stg) img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}.mcard:hover .mcard__img:not(.stg) img{transform:scale(1.07)}
/* popular models on a studio stage: larger product, floating, parallax against the tilt (page-home.js sets --px/--py) */
.mcard__img--stage{--h:80cqw;--t:8.5cqw}
.mcard .stg__p{transform:translate(calc(-50% + var(--px) * 5cqw),calc(-1 * var(--lift) + var(--py) * 3cqw));animation:mfloat 6s var(--d,0s) ease-in-out infinite}
.mcard .stg__r{transform:translate(calc(-50% + var(--px) * 5cqw),calc(var(--lift) - var(--py) * 3cqw)) scaleY(-1);animation:mfloatR 6s var(--d,0s) ease-in-out infinite}
.mcard .stg__logo{translate:calc(var(--px) * -6px) calc(var(--py) * -6px)}
.mcard .stg::before{translate:calc(var(--px) * -3cqw) calc(var(--py) * -3cqw)}
.mcard.is-tilt .stg__p,.mcard.is-tilt .stg__r{transition:transform .14s linear,filter .6s var(--ease),opacity .6s}
@keyframes mfloat{50%{translate:0 -1.4cqw}}@keyframes mfloatR{50%{translate:0 1.4cqw}}
html:not([data-q=high]) .mcard .stg__p,html:not([data-q=high]) .mcard .stg__r{animation:none}   /* 16 tiles × 2 floating layers = 32 running animations in one strip (measured 7 Oct) – the parts float on the high tier only */
html[data-q=high] .mcard .stg::after{animation:mshadow 6s var(--d,0s) ease-in-out infinite}@keyframes mshadow{50%{opacity:.7}}   /* the breathing floor shadow (a third animated element per card) only on the high tier */
#models.is-off .mcard .stg__p,#models.is-off .mcard .stg__r,#models.is-off .mcard .stg::after{animation:none}   /* off screen: no animation at all (a paused one keeps its compositor layer) */
html.user-idle .mcard .stg__p,html.user-idle .mcard .stg__r,html.user-idle .mcard .stg::after{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.mcard .stg__p,.mcard .stg__r,.mcard .stg::after{animation:none}.mcard,.mcard:hover{transform:none}}
.mcard__ph{width:100%;height:100%;display:grid;place-items:center;background:radial-gradient(circle at 30% 20%,var(--ph1),var(--ph2) 70%)}.mcard__ph svg{width:40%}
.mcard__b{padding:16px 18px 20px}.mcard__b small{display:block;font-size:12px;color:var(--dim);margin-bottom:4px;text-transform:uppercase;letter-spacing:.1em;font-weight:700}
.mcard__b h3{font-size:17px;line-height:1.25}.mcard__b span{display:block;margin-top:8px;color:var(--orange2);font-size:13px;font-weight:600}

/* tiers */
.tiers{display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;align-items:center}
.tiers__l .lead{margin-top:16px}
.tabs{display:flex;flex-wrap:wrap;gap:6px;margin-top:28px}
@media (min-width:1101px){.tabs{flex-wrap:nowrap}.tabs button{padding:10px 13px}}
.tabs button{min-height:44px;border:1px solid var(--line);background:var(--card);border-radius:999px;padding:10px 15px;font-weight:600;font-size:14.5px;color:var(--muted);white-space:nowrap;transition:background-color .25s,color .25s,border-color .25s}
.tabs button[aria-selected="true"]{background:linear-gradient(135deg,var(--orange),#ff9d3f);color:#1b0d00;border-color:transparent}
.panels{position:relative;min-height:260px}
.panel{position:absolute;inset:0 0 auto 0;padding:34px;border-radius:var(--r2);background:linear-gradient(140deg,rgba(47,123,224,.07),rgba(245,132,31,.05));border:1px solid var(--line);opacity:0;visibility:hidden;transform:translateY(12px) scale(.98);transition:opacity .45s var(--ease),transform .45s var(--ease),visibility .45s}
.panel.is-on{position:relative;opacity:1;visibility:visible;transform:none}
.panel h3{font-size:26px;margin:16px 0 12px}.panel p{color:var(--muted)}.tlink{display:inline-flex;align-items:center;min-height:44px;margin-top:10px;color:var(--orange2);font-weight:600}

/* steps – B19 process deck (assets/sec-steps.js sets data-mode): "pin" = pinned horizontal process with a glowing head
   (≥1025 px with hover), "row" = the same row, static (reduced motion / Save-Data), "deck" = sticky stacking deck (phones, touch) */
.b19{--rail-y:30px;--cards-y:78px;--ray:96px;--halo:190px}
.b19__top{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.b19__top .sec-h{margin-bottom:0}
.b19__ctr{display:flex;align-items:baseline;gap:8px;margin:0 0 4px;font:700 12px/1 Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);white-space:nowrap}
.b19__ctr b{font:800 clamp(44px,4.6vw,64px)/.9 Inter,sans-serif;letter-spacing:-.04em;color:var(--text);font-variant-numeric:tabular-nums}
.b19__ctr i{font-style:normal}
.b19__ctr b.is-tick{animation:b19-tick .5s var(--ease)}
@keyframes b19-tick{from{opacity:.15;transform:translateY(12px)}}
.b19__list{list-style:none;margin:0;padding:0}
.b19 .step{position:relative;min-width:0}
.step__card{position:relative;display:flex;flex-direction:column;gap:12px;height:100%;padding:26px 26px 22px;border-radius:var(--r2);background:var(--surface-solid);border:1px solid var(--line);
  transition:opacity .55s var(--ease),transform .55s var(--ease),border-color .5s,background .5s,box-shadow .5s,filter .45s,scale .45s var(--ease)}
.step__top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.step__n{font:800 13px/1 Inter,sans-serif;letter-spacing:.14em;color:var(--orange2);transition:color .4s}
.step__ic{flex:none;width:42px;height:42px;fill:none;stroke:var(--blue);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:stroke .4s,transform .6s var(--ease)}
.step__ic .o{stroke:var(--orange2);transition:stroke .4s}
.b19 .step h3{font-size:22px}
.b19 .step p{color:var(--muted);font-size:15px;line-height:1.55}
.step__f{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 14px;margin-top:auto;padding-top:6px}
.step__tag{display:inline-flex;align-items:center;padding:6px 11px;border-radius:999px;background:var(--card);border:1px solid var(--line);font:600 12px/1.2 Inter,sans-serif;color:var(--muted)}
.step__a{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:6px 0;border:0;background:none;color:var(--orange2);font-weight:700;font-size:14px;transition:color .2s,gap .25s var(--ease)}
.step__a:hover{color:var(--text);gap:10px}
.step__node{position:absolute;z-index:2;width:12px;height:12px;border-radius:50%;background:var(--bg);box-shadow:inset 0 0 0 2px var(--line2);transition:box-shadow .4s,background .4s}
.step.is-on .step__node{background:var(--orange);box-shadow:0 0 0 4px rgba(245,132,31,.18)}
/* the glowing head: flickering core + halo; two light rays rotate (5 s) and breathe 1 → 2× (20 s); idle / off-screen = paused */
.b19__head{--hot:0;position:absolute;left:0;top:50%;width:0;height:0;pointer-events:none;will-change:transform}
.b19__halo{position:absolute;left:calc(var(--halo) / -2);top:calc(var(--halo) / -2);width:var(--halo);height:var(--halo);border-radius:50%;
  background:radial-gradient(circle,rgba(245,132,31,.3),rgba(245,132,31,.1) 36%,rgba(47,123,224,.05) 55%,transparent 70%);opacity:calc(.6 + var(--hot) * .4);transform:scale(calc(.85 + var(--hot) * .3))}
.b19__rays{position:absolute;left:0;top:0;width:0;height:0;animation:b19-spin 5s linear infinite,b19-breathe 20s ease-in-out infinite}
.b19__rays i{position:absolute;left:calc(var(--ray) / -2);top:-1px;width:var(--ray);height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,rgba(245,132,31,.8) 50%,transparent)}
.b19__rays i+i{left:calc(var(--ray) * -.32);width:calc(var(--ray) * .64);rotate:90deg;background:linear-gradient(90deg,transparent,rgba(47,123,224,.7) 50%,transparent)}
.b19__core{position:absolute;left:-7px;top:-7px;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle,#fff 35%,#ffd6a8 62%,var(--orange));
  box-shadow:0 0 10px 3px rgba(245,132,31,.5),0 0 28px 8px rgba(245,132,31,.25);animation:b19-flicker 3.4s linear infinite}
@keyframes b19-spin{to{rotate:360deg}}
@keyframes b19-breathe{50%{scale:2}}
@keyframes b19-flicker{0%,100%{opacity:1}5%{opacity:.8}7%{opacity:1}22%{opacity:.92}24%{opacity:1}46%{opacity:.74}47%{opacity:.98}49%{opacity:.84}51%{opacity:1}77%{opacity:.9}79%{opacity:1}}
html.user-idle .b19__head *,.b19.is-off .b19__head *{animation-play-state:paused}
/* desktop: one horizontal row under a line; pinned, the cards are wider than the window and the track slides */
@media (min-width:1025px) and (hover:hover){
  .b19__vp{position:relative;overflow:hidden;margin-top:22px;container-type:inline-size}
  @supports (overflow:clip){.b19__vp{overflow:visible;overflow-x:clip}}   /* clip sideways only: the head's glow may spill above the line */
  .b19__track{position:relative;max-width:var(--wrap);margin:0 auto;padding:var(--cards-y) var(--gut) 30px}
  .b19__rail{position:absolute;top:var(--rail-y);left:0;width:100%;height:2px;border-radius:2px;background:var(--line)}
  .b19__fill{position:absolute;inset:0;border-radius:inherit;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,rgba(245,132,31,.3),var(--orange) 60%,#ffd2a0)}
  .b19__list{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
  .b19 .step__node{left:24px;top:calc(var(--rail-y) - var(--cards-y) - 6px)}
  .b19 .step__node::after{content:"";position:absolute;left:5px;top:16px;width:2px;height:calc(var(--cards-y) - var(--rail-y) - 16px);border-radius:2px;background:linear-gradient(var(--line2),transparent);transition:background .4s}
  .b19 .step.is-on .step__node::after{background:linear-gradient(rgba(245,132,31,.85),transparent)}
  .b19:not([data-mode=pin]) .b19__ctr{display:none}
  .b19:not([data-mode=pin]) .step__card{padding:22px 20px 20px}
  .b19:not([data-mode=pin]) .step p{font-size:14.5px}
  .b19:not([data-mode=pin]) .b19__fill{transform:scaleX(1)}
  .b19[data-mode=pin] .b19__pin{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:calc(var(--nav) + 18px) 0 24px}
  .b19[data-mode=pin] .b19__top{width:100%}
  .b19[data-mode=pin] .b19__track{width:max-content;max-width:none;margin:0;padding-inline:max(var(--gut),calc((100vw - var(--wrap)) / 2 + var(--gut)));padding-inline:max(var(--gut),calc((100cqw - var(--wrap)) / 2 + var(--gut)));will-change:transform}
  .b19[data-mode=pin] .b19__list{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:clamp(300px,27vw,392px);gap:28px}
  .b19[data-mode=pin] .step:not(.is-on) .step__card{opacity:.38}
  .b19[data-mode=pin] .step__card>:not(.step__node){transition:translate .7s var(--ease)}
  .b19[data-mode=pin] .step:not(.is-on) .step__card>:not(.step__node){translate:0 12px}
  .b19[data-mode=pin] .step:not(.is-on) .step__n{color:var(--dim)}
  .b19[data-mode=pin] .step:not(.is-on) :is(.step__ic,.step__ic .o){stroke:var(--dim)}
  .b19[data-mode=pin] .step.is-cur .step__ic{transform:translateY(-3px) scale(1.06)}
  .b19 .step.is-cur .step__card{border-color:rgba(245,132,31,.5);background:linear-gradient(160deg,rgba(245,132,31,.08),rgba(47,123,224,.05) 62%,var(--surface-solid));box-shadow:0 30px 60px -40px rgba(var(--ink-rgb),.35)}
}
/* phones, tablets, touch: CSS sticky stacking deck – the card on top lights up and carries the head, the ones under it dim */
@media (max-width:1024px),(hover:none){
  .b19{--ray:58px;--halo:120px}
  .b19__ctr,.b19__rail{display:none}
  .b19__track{max-width:var(--wrap);margin:0 auto;padding:28px var(--gut) 0}
  .b19__list{padding-bottom:6vh}
  .b19 .step{position:sticky;top:calc(var(--nav) + 14px + var(--i) * 12px);max-width:760px;margin:0 0 18px}
  .b19 .step__card{padding:22px 22px 20px;background:var(--surface-solid);box-shadow:0 -16px 36px -26px rgba(var(--ink-rgb),.35);transform-origin:50% 0}
  .b19 .step__top{padding-left:24px}
  .b19 .step__node{left:22px;top:37px}
  .b19 .step__node .b19__head{left:50%;--hot:.35}
  .b19[data-mode=deck] .step.is-past .step__card{filter:brightness(.6) saturate(.75);scale:.95}
  .b19[data-mode=deck] .step.is-cur .step__card{border-color:rgba(245,132,31,.5);background:linear-gradient(160deg,rgba(245,132,31,.08),rgba(47,123,224,.05) 62%,transparent),var(--surface-solid)}
  .b19[data-mode=deck] .step:not(.is-cur) .b19__head{visibility:hidden}
  .b19[data-mode=deck] .step:not(.is-cur) .b19__head *{animation-play-state:paused}
}
@media (max-width:600px){.b19 .step h3{font-size:20px}.b19 .step p{font-size:14.5px}}

/* latest B2B insights – three blog cards with typographic covers */
.ins{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.icard{position:relative;display:flex;flex-direction:column;border-radius:var(--r2);background:var(--surface-solid);border:1px solid var(--line);overflow:hidden;transition:transform .35s var(--ease),border-color .3s,background-color .3s}
.icard:hover{transform:translateY(-5px);border-color:rgba(47,123,224,.45)}
.icard__cv{position:relative;display:grid;place-items:center;aspect-ratio:16/8;overflow:hidden;
  background:radial-gradient(120% 90% at 85% 0%,rgba(245,132,31,.14),transparent 55%),radial-gradient(90% 120% at 0% 100%,rgba(47,123,224,.14),transparent 60%),var(--bg2)}
.icard__cv::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(var(--ink-rgb),.05) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--ink-rgb),.05) 1px,transparent 1px);background-size:28px 28px;-webkit-mask:radial-gradient(70% 90% at 50% 50%,#000,transparent);mask:radial-gradient(70% 90% at 50% 50%,#000,transparent)}
.icard__cv svg{position:relative;width:64px;height:64px;fill:none;stroke:var(--orange3);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .6s var(--ease)}
.icard:hover .icard__cv svg{transform:scale(1.08) rotate(-3deg)}
.icard__n{position:absolute;left:20px;bottom:12px;font:800 44px/1 Inter,sans-serif;font-style:normal;letter-spacing:-.04em;color:rgba(var(--ink-rgb),.08)}
.icard__b{display:flex;flex-direction:column;gap:10px;flex:1;padding:22px 24px 24px}
.icard__b small{font:700 12px Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--blue2)}
.icard__b h3{font-size:19px;line-height:1.3}
.icard__p{font-size:14.5px;line-height:1.55;color:var(--muted)}
.icard__go{margin-top:auto;padding-top:6px;color:var(--orange2);font-weight:700}

/* guides */
.ggrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.gcard{position:relative;display:flex;flex-direction:column;gap:10px;min-height:210px;padding:26px;border-radius:var(--r2);background:var(--surface-solid);border:1px solid var(--line);overflow:hidden;transition:transform .35s var(--ease),border-color .3s,background .3s}
.gcard:hover{transform:translateY(-5px);border-color:rgba(47,123,224,.45)}
.gcard small{font:700 12px Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--blue2)}.gcard p{color:var(--muted);font-size:14px}
.gcard .arr{margin-top:auto;color:var(--orange2);font-weight:700}

/* recently viewed: four cards in one row (phones: two) */
#recentGrid{grid-template-columns:repeat(4,minmax(0,1fr))}

@media (max-width:1100px){.ggrid{grid-template-columns:repeat(2,1fr)}.ins{grid-template-columns:repeat(2,minmax(0,1fr))}.ins .icard:nth-child(3){display:none}}
@media (max-width:900px){
  /* hero: the box + module photo comes first (nothing clipped – the row takes its own aspect ratio), the headline, search and
     popular chips under it */
  .hero{min-height:0;display:block;padding:calc(var(--nav) + 12px) 0 28px}
  .hero__in,.tiers{grid-template-columns:minmax(0,1fr)}
  .hero__in{gap:6px}
  .hero__h{font-size:clamp(34px,10.2vw,48px)}
  .hero__type{font-size:clamp(28px,8.4vw,40px)}
  .hero .lead{margin:14px 0 18px;font-size:16px}

  .hero__chips .chip{min-height:44px;padding:0 15px}
  .hero__act{margin-top:16px}
  .hero__stage{order:-1;height:auto;min-height:0;aspect-ratio:1/1.02;max-height:min(52svh,440px);margin:0 0 14px}
  .hfloat{padding:9px 12px;font-size:12px;border-radius:14px}.hfloat b{font-size:18px}
  .hfloat--a{top:0;left:0}.hfloat--b{right:0;top:0}   /* both above the photos – never over the box's badge */
  .scroll-cue{display:none}
  /* inside: the stage fills the pinned screen between headline and caption; one caption at a time (cross-fade) */
  .inside{height:270vh;height:270svh}
  .inside__pin{height:100vh;height:100svh;align-items:stretch;padding:calc(var(--nav) + 10px) 0 14px}
  /* the phone "Buy on ShopApex" bar (site.js) is fixed at the bottom: the layer caption keeps clear of it */
  html.shopbar-on .inside__pin{padding-bottom:calc(14px + 62px + env(safe-area-inset-bottom,0px))}
  .inside .wrap.inside__in{display:flex;flex-direction:column;gap:0;height:100%}
  .inside__copy{display:contents}
  .inside__copy>.eyebrow{margin-bottom:8px}
  .inside__copy>h2{font-size:clamp(26px,7.6vw,36px);text-align:center}
  .inside__stage{order:1;flex:1 1 auto;height:auto;min-height:0;margin:6px calc(-1 * var(--gut)) 8px;width:calc(100% + 2 * var(--gut))}
  .layers{order:2;display:grid;margin:0;padding:0;gap:0}
  .layers li{grid-area:1/1;display:block;position:relative;padding:14px 16px 14px 52px;border-color:var(--line2);background:var(--surface-solid);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .35s,transform .45s var(--ease),visibility 0s .35s}
  .layers li::before{position:absolute;left:16px;top:16px}
  .layers li.is-on{opacity:1;visibility:visible;transform:none;border-color:rgba(245,132,31,.5);background:var(--surface-solid);transition:opacity .35s,transform .45s var(--ease),visibility 0s}
  .layers li span{position:static;height:auto;display:block;padding:0;margin-top:5px;border:0;background:none;font-size:14.5px;line-height:1.45;opacity:1;transform:none}
  .inside__meta{order:3;align-self:stretch;margin-top:10px}
  #insideStage .s3d-tag{font-size:12px}
  .inside--static{height:auto}
  .inside--static .inside__pin{height:auto}
  .inside--static .inside__stage{flex:none;height:60vh}
  .inside--static .layers{display:flex;flex-direction:column;gap:8px}
  .inside--static .layers li{grid-area:auto;opacity:1;visibility:visible;transform:none}
}
@media (max-width:600px){
  #main>.section{padding-top:84px}
  #brands .xp-host{min-height:459px}.ggrid{grid-template-columns:1fr}.hsearch{height:56px}.hsearch .kbd{display:none}.mcard{flex-basis:220px}
  .ins{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 calc(-1 * var(--gut));padding:4px var(--gut) 8px;scroll-padding-inline:var(--gut)}
  .ins::-webkit-scrollbar{display:none}
  .ins .icard{flex:0 0 84%;scroll-snap-align:start}.ins .icard:nth-child(3){display:flex}
  .icard__b{padding:18px 18px 20px}.icard__b h3{font-size:17px}
  #recentGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tabs{gap:6px}.tabs button{padding:10px 13px;font-size:14px}
  .panel{padding:24px 22px}.panel h3{font-size:22px}
}

/* hero entrance after the logo intro */
html.is-in .hero__copy>*{animation:hero-rise 1s var(--ease) both}
html.is-in .hero__copy>:nth-child(2){animation-delay:.08s}html.is-in .hero__copy>:nth-child(3){animation-delay:.16s}html.is-in .hero__copy>:nth-child(4){animation-delay:.24s}html.is-in .hero__copy>:nth-child(5){animation-delay:.32s}html.is-in .hero__copy>:nth-child(6){animation-delay:.4s}html.is-in .hero__copy>:nth-child(7){animation-delay:.46s}html.is-in .hero__copy>:nth-child(8){animation-delay:.52s}
html.is-in .hfloat{animation:hero-pop .8s .5s var(--ease) both,bob 7s 1.3s ease-in-out infinite}
@keyframes hero-rise{from{opacity:0;transform:translateY(34px)}}
@keyframes hero-pop{from{opacity:0;transform:translateY(16px) scale(.94)}}
@media (prefers-reduced-motion:reduce){html.is-in .hero__copy>*,html.is-in .hfloat{animation:none}}

/* brand slider: glowing brand marks (top-right circle + chip) – the glow is a static filter (no endless filter animation) */
#brandX .xpc__media{-webkit-clip-path:circle(46% at 84% 11%);clip-path:circle(46% at 84% 11%)}
#brandX .xpc:hover .xpc__media,#brandX .xpc:focus-visible .xpc__media,#brandX .xpc.is-on .xpc__media{-webkit-clip-path:circle(105% at 84% 11%);clip-path:circle(105% at 84% 11%)}
#brandX .xpc__media::before{background:radial-gradient(circle at 46% 54%,color-mix(in srgb,var(--glow,var(--tint)) 14%,transparent),transparent 62%)}
.xlogo{position:absolute;z-index:3;left:34%;top:20%;display:grid;place-items:center;width:38%;transform-origin:70% 30%;color:color-mix(in srgb,var(--glow) 78%,var(--text));opacity:.9;transform:scale(.92);transition:opacity .6s var(--ease),transform .9s var(--ease)}
.xlogo .xlogo__m{display:block;width:100%;height:auto}
.xlogo--samsung,.xlogo--oppo{width:50%;left:28%}.xlogo--motorola{width:44%}
.xlogo .xlogo__m--word{font:800 clamp(30px,3.2vw,44px)/1 Inter,sans-serif;letter-spacing:-.04em;color:color-mix(in srgb,var(--glow) 65%,var(--text))}
.xpc:hover .xlogo,.xpc:focus-visible .xlogo,.xpc.is-on .xlogo{opacity:1;transform:scale(1.18)}
#brandX .xpc__chip{color:color-mix(in srgb,var(--tint) 70%,var(--text))}
#brandX .xpc__chip .xbm{width:30px;height:30px}
#brandX .xpc__chip .xbm--samsung,#brandX .xpc__chip .xbm--motorola,#brandX .xpc__chip .xbm--oppo{width:44px;height:44px}
#brandX .xpc__chip .xbm--word{font:800 12px/1 Inter,sans-serif;letter-spacing:-.02em}
#brandX .xpc:hover .xpc__chip,#brandX .xpc:focus-visible .xpc__chip,#brandX .xpc.is-on .xpc__chip{background:var(--tint);color:#0b1324;box-shadow:0 0 0 6px color-mix(in srgb,var(--tint) 18%,transparent)}
@media (prefers-reduced-motion:reduce){.xlogo,.xpc:hover .xlogo{transition:none}}
/* touch screens: a vertical swipe that starts on the progress bar scrolls the page (P0-5); the centred card reveals its
   details with opacity / transform only, at a fixed card height – no grid-row animation, no layout shift (P1-12) */
@media (hover:none),(pointer:coarse){
  #brandX .xp__bar{touch-action:pan-y}
  #brandX .xpc__more{grid-template-rows:1fr;transition:none}
}

/* B32 phone motion set – hero play pill (in the action row next to "Buy on ShopApex") + latest parts as one gliding row
   (assets/autostrip.js / autostrip.css) */
.hplay{display:none}
@media (max-width:900px){
  .hplay{display:flex;align-items:center;gap:10px;min-height:44px;padding:4px 16px 4px 4px;border:1px solid var(--line2);border-radius:999px;background:var(--surface-solid);color:var(--text);box-shadow:0 14px 30px -14px rgba(var(--ink-rgb),.4);-webkit-tap-highlight-color:transparent}
  .hplay__b{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--orange),#ff9d3f);transition:transform .3s var(--ease)}
  .hplay__b svg{width:16px;height:16px;margin-left:2px;fill:#1b0d00}
  .hplay:active .hplay__b{transform:scale(.93)}
  .hplay__t{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;white-space:nowrap}
  .hplay__t small{font-size:12px;font-weight:500;color:var(--muted)}.hplay__t small:empty{display:none}
  html.is-in .hplay{animation:hero-pop .8s .6s var(--ease) both}
  /* a row from the first paint (not only once autostrip.js has loaded) – no grid-to-row jump */
  #latest{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none;margin:0 calc(-1 * var(--gut));padding:6px var(--gut) 20px;scroll-padding-inline:var(--gut)}
  #latest::-webkit-scrollbar{display:none}
  #latest>.pcard{flex:0 0 min(44vw,230px)}
  #latest~.as-foot{padding:0}
  #track~.as-foot{margin-top:0}
  #brandX .as-foot--in{margin-top:-4px}
  .as-btn{width:44px;height:44px}
}
/* small type on phones: card badges and labels stay ≥ 12 px (P2-16) */
@media (max-width:600px){#latest .pcard:has(.stg) .badge,#recentGrid .pcard:has(.stg) .badge{font-size:12px;padding:5px 8px 5px 7px;letter-spacing:0}}
@media (prefers-reduced-motion:reduce){html.is-in .hplay{animation:none}}

/* ---------- render budget (7 Oct, owner: "flow like butter") ----------
   Sections below the fold render only near the viewport (content-visibility:auto): while the visitor is elsewhere they cost no style
   recalc, layout, paint or compositor layers. contain-intrinsic-size = the measured heights at 1440 / 390 (the scrollbar and the
   ScrollTrigger positions of the pinned scenes above do not move before a section's first render; Chrome remembers the real size
   after that). The sticky / pinned scenes (reel, inside, stack, race) and the brand slider are left alone on purpose. */
#models,#latestSec,#warehouse,#world{content-visibility:auto}
#models{contain-intrinsic-size:auto 662px}#latestSec{contain-intrinsic-size:auto 1157px}#warehouse{contain-intrinsic-size:auto 1537px}#world{contain-intrinsic-size:auto 882px}
@media (max-width:900px){#models{contain-intrinsic-size:auto 714px}#latestSec{contain-intrinsic-size:auto 649px}#warehouse{contain-intrinsic-size:auto 1322px}#world{contain-intrinsic-size:auto 1183px}}

/* ---- the four live badges as prominent cards (owner, 8 Oct: "more visible") ---- */
.usp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;list-style:none;margin:22px 0 4px;padding:0}
.usp li{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;background:var(--surface-solid);border:1px solid var(--line);box-shadow:0 10px 30px -22px rgba(var(--ink-rgb),.35);font-size:15px;font-weight:700;color:var(--text);letter-spacing:-.01em}
.usp__i{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,var(--orange),#ff9d3f);color:#1b0d00}
.usp__i svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:900px){.usp{margin:16px 0 0;gap:8px}.usp li{padding:10px 12px;font-size:14px;border-radius:14px}.usp__i{width:34px;height:34px}}
/* ---- brand strip under the film: the marks of the brands we stock slide slowly (transform only; rests off screen / idle) ---- */
.bstrip{position:relative;padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg);overflow:hidden}
.bstrip__vp{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.bstrip__track{display:flex;align-items:center;gap:64px;width:max-content;padding:0 32px;animation:bstrip 48s linear infinite}
.bstrip.is-off .bstrip__track,html.user-idle .bstrip__track{animation-play-state:paused}
.bstrip__b{display:flex;align-items:center;gap:12px;color:var(--text);opacity:.8;transition:opacity .3s}.bstrip__b:hover{opacity:1}
.bstrip__b .bmark,.bstrip__b svg{height:28px;width:auto;max-width:120px;display:block}
.bstrip__n{font-size:15px;font-weight:700;letter-spacing:-.01em;white-space:nowrap}
@keyframes bstrip{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.bstrip__track{animation:none;flex-wrap:wrap;width:auto;justify-content:center;gap:28px 40px}}
@media (max-width:600px){.bstrip{padding:16px 0}.bstrip__track{gap:40px;animation-duration:32s}.bstrip__b .bmark,.bstrip__b svg{height:22px}.bstrip__n{font-size:13px}}

/* the four claims inside the film section (owner, 9 Oct: "in the first section") */
.reel__usp{margin:22px 0 0;max-width:640px}
.reel__usp li{font-size:14.5px;padding:11px 13px}
.reel__usp .usp__i{width:36px;height:36px}
@media (max-width:900px){.reel__usp{margin:14px auto 0;max-width:520px;gap:8px}.reel__usp li{padding:9px 11px;font-size:13.5px;border-radius:12px}.reel__usp .usp__i{width:30px;height:30px}.reel__usp .usp__i svg{width:17px;height:17px}
  .reel--turn .reel__usp{gap:6px}.reel--turn .reel__usp li{padding:7px 10px;font-size:13px}.reel--turn .reel__usp .usp__i{width:26px;height:26px}.reel--turn .reel__usp .usp__i svg{width:15px;height:15px}}
@media (max-width:360px){.reel__usp{grid-template-columns:1fr}.reel__usp li{padding:6px 10px}}
/* short desktop viewports (1366×768 laptops): the film copy column stays clear of the header */
@media (min-width:901px) and (max-height:840px){
  .reel__h{font-size:clamp(38px,4.6vw,60px)}.reel__lead{margin:14px 0 18px;font-size:17px}.reel__act{gap:12px}.reel__copy{padding-bottom:0}
  .reel__usp{margin:14px 0 0}.reel__usp li{padding:8px 11px;font-size:13.5px}.reel__usp .usp__i{width:30px;height:30px}.reel__usp .usp__i svg{width:17px;height:17px}}
/* phones with the sticky film view: the hero below repeats the figures, the first view keeps the room for the four claims */
@media (max-width:900px){.reel--turn .reel__lead{display:none}.reel--turn .reel__usp{margin:12px auto 0}.reel--turn .reel__act{gap:10px}}
@media (max-width:900px) and (max-height:700px){.reel--turn .reel__now{display:none}.reel--turn .reel__h{font-size:clamp(30px,8.5vw,40px)}.reel--turn .reel__usp li{padding:6px 9px;font-size:12.5px}}
/* the sticky nav overlays the top of the film view: centre the copy in the area below it; very short views drop the "On screen" line */
@media (min-width:901px) and (max-height:760px){.reel__now{display:none}}
@media (max-width:900px){.reel--turn .reel__now{display:none}.reel--turn .reel__sticky{padding-bottom:6px}}
@media (min-width:901px) and (max-height:840px){.reel__lead{display:none}}

/* the brand strip rides at the bottom of the film view (owner, 9 Oct: visible without scrolling); the sticky view reserves its height */
.bstrip--reel{position:absolute;left:0;right:0;bottom:0;z-index:5;padding:13px 0;border-bottom:0;background:rgba(var(--bg-rgb),.8)}
.bstrip--reel .bstrip__b .bmark,.bstrip--reel .bstrip__b svg{height:24px}.bstrip--reel .bstrip__n{font-size:14px}
@media (min-width:901px){.reel__sticky{--pt:var(--strip);--pb:52px;padding-top:var(--pt);padding-bottom:var(--pb)}   /* top: the strip pushes the view under the nav at the page top; bottom: room for the brand strip */}
@media (max-width:900px){.bstrip--reel{padding:9px 0}.bstrip--reel .bstrip__track{gap:30px;animation-duration:30s}.bstrip--reel .bstrip__b{gap:8px}.bstrip--reel .bstrip__b .bmark,.bstrip--reel .bstrip__b svg{height:20px}.bstrip--reel .bstrip__n{font-size:12.5px}}

/* brand strip marks in the brand colours (owner, 9 Oct) */
.bstrip__b{opacity:1}.bstrip__b .bmark{color:var(--bc,currentColor)}