/* ==========================================================================
   Monitoring Hardware (Preview) - Figma 6137:13856 "Monitoring Hardware - Redesign"
   Desktop (>=992px): every .hw-sec is one screen below the floating header (var(--fit-h));
   the inner box is laid out at Figma size (1520px) and js/hardware-preview.js sets --z so it
   fits both the width and the height. Below 992px the sections stack.
   ========================================================================== */
.hw { --ink:#14171c; --body:#1c2838; --line:#e1e3ef; --green:#58ae6a; --blue:#1353e9; --sky:#6285fb; --navy:#0d1758;
	font-family:'Plus Jakarta Sans',sans-serif; color:var(--body); background:#fff; overflow-x:clip; }
.hw *, .hw *::before, .hw *::after { box-sizing:border-box; }
.hw h1, .hw h2, .hw h3, .hw p, .hw ul, .hw ol { margin:0; padding:0; }
.hw ul, .hw ol { list-style:none; }
.hw img { display:block; max-width:none; }
.hw a { text-decoration:none !important; }
.hw-green { color:var(--green); } .hw-blue { color:#1332fa; } .hw-sky { color:var(--sky); } .hw-navy { color:var(--navy); } .hw-orange { color:#ff7f27; font-style:normal; }
.hw-grad-blue { background:linear-gradient(90deg,#0837bb,#1569fe); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hw-grad-sky { background:linear-gradient(180deg,#03a6f0,#0799d8); -webkit-background-clip:text; background-clip:text; color:transparent; font-style:normal; }

.hw-sec { position:relative; display:flex; align-items:center; justify-content:center; padding:24px 40px; }
.hw-in { width:1520px; flex:none; zoom:var(--z,1); }
.hw-center { text-align:center; display:flex; flex-direction:column; align-items:center; gap:24px; }
.hw-eyebrow { font-weight:700; font-size:24px; line-height:1.6; color:var(--sky); letter-spacing:.2px; }
.hw-eyebrow--blue { color:var(--blue); }
.hw-h2 { font-weight:700; font-size:48px; line-height:1.32; color:var(--ink); letter-spacing:-.2px; }
.hw-h2--slate { color:#3b3f59; }
.hw-p { font-weight:500; font-size:20px; line-height:1.64; color:var(--body); }
.hw-rule { display:flex; align-items:center; gap:10px; }
.hw-rule i { width:83px; height:4px; border-radius:32px; background:linear-gradient(90deg,#0837bb,#1569fe); transform-origin:left; }

/* Buttons */
.hw-btn { display:inline-flex; align-items:center; gap:24px; height:64px; border-radius:100px; font-weight:700; font-size:20px; line-height:1.64; letter-spacing:.2px; white-space:nowrap; transition:transform .25s, box-shadow .25s, background-color .25s; }
.hw-btn:hover { transform:translateY(-2px); box-shadow:0 14px 30px -14px rgba(13,23,88,.45); }
.hw-btn:focus-visible { outline:3px solid #6285fb; outline-offset:3px; }
.hw-btn__c { width:52px; height:52px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; transition:transform .25s; }
.hw-btn:hover .hw-btn__c { transform:translateX(3px); }
.hw-btn--green { background:var(--green); color:#fff !important; padding:6px 6px 6px 32px; }
.hw-btn--blue { background:var(--blue); color:#fff !important; padding:6px 6px 6px 12px; gap:12px; }
.hw-btn--line { border:1px solid var(--navy); color:var(--navy) !important; padding:16px 32px; }
.hw-btn--line:hover { background:#f3f5ff; }
.hw-btn--indigo { background:#3649a8; color:#fff !important; padding:16px 32px; font-size:24px; line-height:1.4; }
.hw-btn--indigo:hover { background:#2c3d93; }

/* 1. Hero */
.hw-hero { background:linear-gradient(180deg,#f7f9fc 0%,#fff 70%); }
.hw-hero__in { display:grid; grid-template-columns:640px 1fr; align-items:center; gap:40px; }
.hw-hero__text { display:flex; flex-direction:column; align-items:flex-start; gap:32px; }
.hw-hero__h1 { display:flex; flex-direction:column; font-weight:800; font-size:64px; line-height:1.24; color:var(--ink); letter-spacing:-.5px; }
.hw-hero__lead { font-weight:700; font-size:27px; line-height:1.6; color:var(--green); max-width:496px; }
.hw-hero__p { font-weight:500; font-size:20px; line-height:1.6; color:var(--body); max-width:496px; }
.hw-hero__text .hw-btn { margin-top:16px; }
.hw-hero__art { display:flex; flex-direction:column; align-items:center; }
.hw-kit { position:relative; width:833px; aspect-ratio:932/579; }
.hw-kit__img { position:absolute; left:0; top:-10.14%; width:102.61%; height:110.14%; object-fit:fill; }
.hw-kit__br { position:absolute; left:29.4%; width:1.7%; height:36%; border:2px solid #96cda3; border-left:0; border-radius:0 6px 6px 0; }
.hw-kit__br--1 { top:11.9%; } .hw-kit__br--2 { top:53.6%; }
.hw-kit__ln { position:absolute; height:2px; background:#96cda3; }
.hw-kit__ln--1 { left:31.1%; top:32.2%; width:3.1%; } .hw-kit__ln--2 { left:31.1%; top:73.9%; width:3.1%; } .hw-kit__ln--3 { left:76.6%; top:76.1%; width:8.1%; }
.hw-counts { display:flex; justify-content:space-between; width:881px; margin-top:0; background:#fff; border-radius:32px; }
.hw-counts li { width:225px; padding:8px 16px; display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline; text-align:center; }
.hw-counts li + li { border-left:1.2px solid #ebebeb; }
.hw-counts b, .hw-counts em { font-weight:800; font-size:48px; line-height:1.32; color:var(--green); font-style:normal; }
.hw-counts em { font-size:36px; margin-left:2px; }
.hw-counts span { flex-basis:100%; margin-top:16px; font-weight:500; font-size:20px; line-height:1.64; color:var(--body); }

/* 2. Strip */
.hw-strip__box { display:flex; align-items:flex-start; justify-content:center; gap:24px; padding:32px; background:#fff; border:1px solid var(--line); border-radius:60px; box-shadow:0 32px 27px -20px rgba(0,0,0,.04), 0 60px 40px -40px rgba(0,0,0,.03); }
.hw-strip__col { display:flex; flex-direction:column; align-items:center; gap:40px; }
.hw-strip__h { display:flex; align-items:center; gap:10px; font-weight:600; font-size:27px; line-height:1.48; color:var(--ink); white-space:nowrap; }
.hw-strip__hi { display:flex; padding:12px; border-radius:100px; } .hw-strip__hi--b { background:rgba(70,96,213,.12); } .hw-strip__hi--g { background:rgba(88,174,106,.12); }
.hw-strip__vr { width:2px; align-self:stretch; background:#ebebeb; }
.hw-pills { display:flex; gap:8px; }
.hw-pills li { display:flex; align-items:center; gap:16px; padding:8px 32px 8px 8px; background:#fff; border:1px solid var(--line); border-radius:100px; font-weight:600; font-size:20px; line-height:1.48; color:var(--ink); max-width:300px; transition:transform .25s, box-shadow .25s; }
.hw-pills li:hover { transform:translateY(-2px); box-shadow:0 10px 24px -14px rgba(13,23,88,.35); }
.hw-pills span { width:64px; height:64px; flex:none; border-radius:50%; display:flex; align-items:center; justify-content:center; }

/* 3. Platform */
.hw-plat__grid { display:flex; gap:64px; align-items:flex-start; }
.hw-plat__text { width:401px; flex:none; display:flex; flex-direction:column; gap:32px; }
.hw-plat .hw-eyebrow { white-space:nowrap; }
.hw-flow { flex:1; display:grid; grid-template-columns:repeat(4,1fr); gap:8px; padding-top:33px; counter-reset:none; }
.hw-flow__card { position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; padding:28px 20px 20px; background:#fff; border:1px solid var(--line); border-radius:32px; transition:transform .3s, box-shadow .3s, border-color .3s; }
.hw-flow__card:hover { transform:translateY(-4px); border-color:color-mix(in srgb,var(--c) 40%,#e1e3ef); box-shadow:0 22px 40px -26px color-mix(in srgb,var(--c) 70%,transparent); }
.hw-flow__ic { position:absolute; top:-33px; left:50%; transform:translateX(-50%); padding:8px; border-radius:100px; background:var(--cb); }
.hw-flow__ic > span { width:48px; height:48px; border-radius:50%; background:var(--c); display:flex; align-items:center; justify-content:center; }
.hw-flow__pre { font-weight:500; font-size:20px; line-height:1.64; }
.hw-flow__n { font-weight:800; font-size:38px; line-height:1.32; color:var(--c); }
.hw-flow__n em { font-style:normal; font-size:30px; }
.hw-flow__card h3 { margin-top:12px; font-weight:700; font-size:20px; line-height:1.48; color:var(--ink); }
.hw-flow__card p { margin-top:12px; text-align:left; align-self:stretch; font-weight:500; font-size:20px; line-height:1.64; }
.hw-flow__img { margin-top:auto; width:100%; height:200px; object-fit:contain; padding-top:12px; }
.hw-flow__arr { position:absolute; right:-37px; top:132px; width:50px; z-index:2; }
.hw-flow__arr img { width:100%; height:18px; }
.hw-note { margin:32px auto 0; width:max-content; display:flex; align-items:center; gap:8px; padding:24px 32px; background:rgba(98,133,251,.08); border:1px solid var(--line); border-radius:24px; }
.hw-note b { padding:8px 32px 8px 8px; font-weight:600; font-size:20px; line-height:1.48; color:var(--body); }
.hw-note i { width:1px; height:37px; background:#c1c3d3; }
.hw-note span { padding:8px 32px 8px 8px; font-weight:600; font-size:16px; line-height:1.48; }

/* 4. Deployment */
.hw-dep__grid { display:flex; gap:64px; align-items:flex-start; }
.hw-dep__text { width:523px; flex:none; display:flex; flex-direction:column; gap:32px; }
.hw-dep__text .hw-eyebrow { white-space:nowrap; }
.hw-dep__cards { flex:1; display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.hw-dep__cards li { display:flex; gap:32px; align-items:flex-start; padding:20px; background:#fff; border:1px solid var(--line); border-radius:32px; transition:transform .3s, box-shadow .3s; }
.hw-dep__cards li:hover { transform:translateY(-4px); box-shadow:0 22px 40px -28px rgba(88,174,106,.8); }
.hw-dep__ic { width:64px; height:64px; flex:none; border-radius:50%; background:rgba(88,174,106,.12); display:flex; align-items:center; justify-content:center; }
.hw-dep__cards li div { display:flex; flex-direction:column; gap:16px; }
.hw-dep__cards h3 { font-weight:700; font-size:27px; line-height:1.32; color:var(--ink); }
.hw-dep__cards p { font-weight:500; font-size:20px; line-height:1.64; }

/* 5. From Panel to Intelligence */
.hw-pti__grid { display:grid; grid-template-columns:600px 1fr; gap:40px; align-items:stretch; }
.hw-pti__art { position:relative; border-radius:32px; background:linear-gradient(180deg,#f6f7fb,rgba(246,247,251,0)); overflow:hidden; }
.hw-pti__img { position:absolute; inset:24px; width:calc(100% - 48px); height:calc(100% - 48px); object-fit:contain; opacity:0; transform:scale(.96); transition:opacity .6s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.hw-pti__img--white { mix-blend-mode:darken; }
.hw-pti__img.is-on { opacity:1; transform:none; }
.hw-pti__body { display:flex; flex-direction:column; gap:28px; }
.hw-pti__head { display:flex; flex-direction:column; gap:12px; }
.hw-pti__head .hw-p { margin-top:4px; }
.hw-pti__card { position:relative; display:flex; flex-direction:column; gap:28px; padding:32px 40px 36px; background:#fff; border:1px solid var(--line); border-radius:32px; }
.hw-pti__tabs { position:relative; display:grid; grid-template-columns:repeat(6,1fr); padding-bottom:24px; border-bottom:1px solid #ebebeb; }
.hw-pti__tabs button { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:6px; padding:0 4px; background:none; border:0; cursor:pointer; font:inherit; color:var(--body); }
.hw-pti__tabs button:focus-visible { outline:2px solid #6285fb; outline-offset:4px; border-radius:16px; }
.hw-pti__ti { position:relative; width:64px; height:64px; border-radius:50%; border:1px solid #c8c8d0; background:#fff; display:flex; align-items:center; justify-content:center; transition:border-color .3s, box-shadow .3s, transform .3s; }
.hw-pti__ti img { position:absolute; max-width:36px; max-height:32px; transition:opacity .3s; }
.hw-pti__ti .on { opacity:0; }
.hw-pti__tabs button:hover .hw-pti__ti { transform:translateY(-2px); border-color:#6285fb; }
.hw-pti__tabs b { font-weight:700; font-size:16px; line-height:1.64; }
.hw-pti__tl { font-weight:500; font-size:16px; line-height:1.64; text-align:center; }
.hw-pti__tabs [aria-selected=true] { color:var(--sky); }
.hw-pti__tabs [aria-selected=true] .hw-pti__ti { border-color:var(--sky); box-shadow:0 0 0 6px rgba(98,133,251,.12); }
.hw-pti__tabs [aria-selected=true] .on { opacity:1; } .hw-pti__tabs [aria-selected=true] .off { opacity:0; }
.hw-pti__tabs [aria-selected=true] .hw-pti__ti::after { content:""; position:absolute; bottom:-9px; left:50%; margin-left:-4px; border:5px solid transparent; border-top:6px solid var(--sky); border-bottom:0; }
.hw-pti__prog { position:absolute; left:calc(100% / 12); right:calc(100% / 12); top:32px; height:1px; background:repeating-linear-gradient(90deg,#c8c8d0 0 6px,transparent 6px 11px); }
.hw-pti__prog i { position:absolute; left:0; top:-1px; height:3px; width:calc(var(--p,0) * 100%); background:var(--sky); border-radius:3px; transition:width .6s cubic-bezier(.2,.7,.2,1); }
.hw-pti__panes { display:grid; }
.hw-pti__pane { grid-area:1/1; display:flex; flex-direction:column; gap:20px; }
.hw-pti__pane[hidden] { display:flex; visibility:hidden; }
.hw-pti__pane.is-on { animation:hwIn .5s ease both; }
.hw-pti__pane h3 { font-weight:700; font-size:27px; line-height:1.48; color:var(--ink); }
.hw-pti__txt { display:flex; flex-direction:column; gap:20px; font-weight:500; font-size:20px; line-height:1.64; color:var(--body); }
.hw-pti__txt b { font-weight:600; color:var(--ink); }
.hw-pti__txt[hidden] { display:none; }
.hw-pti__sub { display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid var(--line); }
.hw-pti__sub button { padding:12px 16px 16px; background:none; border:0; border-bottom:2px solid transparent; margin-bottom:-1px; cursor:pointer; font:700 24px/1.48 'Plus Jakarta Sans',sans-serif; color:rgba(20,23,28,.4); transition:color .25s, border-color .25s; }
.hw-pti__sub button:hover { color:var(--ink); }
.hw-pti__sub [aria-selected=true] { color:var(--ink); border-bottom-color:var(--sky); }
.hw-pti__sub button:focus-visible { outline:2px solid #6285fb; outline-offset:-2px; }
@keyframes hwIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }

/* 5b. Feature bar */
.hw-feats__bar { display:grid; grid-template-columns:repeat(4,1fr); gap:17px; padding:32px; background:#fff; border:1px solid #c1c3d3; border-radius:32px; }
.hw-feats__bar li { display:flex; gap:16px; align-items:flex-start; padding:8px; }
.hw-feats__bar span { width:64px; height:64px; flex:none; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.hw-feats__bar div { display:flex; flex-direction:column; gap:4px; font-weight:600; font-size:20px; line-height:1.48; color:var(--body); }
.hw-feats__bar b { font-weight:700; font-size:24px; }

/* 6. Specs */
.hw-spec { background:linear-gradient(180deg,#f6f7fb 0%,#fff 100%); }
.hw-spec .hw-p { color:rgba(28,40,56,.85); }
.hw-spec__tiles { margin-top:64px; display:grid; grid-template-columns:repeat(6,1fr); gap:24px; }
.hw-spec__tiles li { display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; padding:20px 24px 20px; background:#fff; border:1px solid var(--line); border-radius:32px; box-shadow:0 4px 33px rgba(98,133,251,.12); transition:transform .3s, box-shadow .3s; }
.hw-spec__tiles li:hover { transform:translateY(-5px); box-shadow:0 18px 40px rgba(98,133,251,.22); }
.hw-spec__tiles span { width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-bottom:12px; }
.hw-spec__tiles b { font-weight:700; font-size:24px; line-height:1.48; color:var(--navy); }
.hw-spec__tiles small { font-weight:500; font-size:20px; line-height:1.64; color:var(--body); }

.hw-comp__cards { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.hw-comp__cards > li { display:flex; gap:24px; padding:20px; background:#fff; border:1px solid var(--line); border-radius:32px; transition:transform .3s, box-shadow .3s; }
.hw-comp__cards > li:hover { transform:translateY(-4px); box-shadow:0 24px 44px -30px rgba(13,23,88,.5); }
.hw-comp__art { width:150px; flex:none; border-radius:32px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.hw-comp__art img { width:150px; height:190px; object-fit:contain; transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.hw-comp__cards > li:hover .hw-comp__art img { transform:scale(1.08); }
.hw-comp__body { display:flex; flex-direction:column; gap:12px; }
.hw-comp__body h3 { display:flex; align-items:center; gap:10px; font-weight:700; font-size:24px; line-height:1.4; color:var(--ink); }
.hw-comp__body h3 span { width:64px; height:64px; flex:none; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.hw-comp__body > p { padding:8px 0 16px; font-weight:600; font-size:20px; line-height:1.64; color:var(--ink); border-bottom:1px solid #ebebeb; }
.hw-comp__body ul { display:flex; flex-direction:column; gap:12px; padding-top:4px; }
.hw-comp__body ul li { display:flex; gap:8px; align-items:center; font-weight:500; font-size:18px; line-height:1.48; color:var(--ink); }
.hw-comp .hw-center { margin-top:48px; }

/* 7. Built for intelligence */
.hw-built .hw-p { max-width:906px; }
.hw-built__cards { margin-top:64px; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.hw-built__cards li { display:flex; flex-direction:column; gap:24px; padding:40px; background:#fff; border:1px solid var(--line); border-radius:32px; transition:transform .3s, box-shadow .3s; }
.hw-built__cards li:hover { transform:translateY(-4px); box-shadow:0 24px 44px -30px rgba(98,133,251,.8); }
.hw-built__cards span { width:64px; height:64px; border-radius:50%; background:rgba(98,133,251,.12); display:flex; align-items:center; justify-content:center; }
.hw-built__cards h3 { font-weight:700; font-size:27px; line-height:1.48; color:var(--ink); max-width:340px; }
.hw-built__cards p { margin-top:-12px; font-weight:500; font-size:20px; line-height:1.64; }

/* 8. Real-world deployment */
.hw-real__grid { display:grid; grid-template-columns:943px 1fr; gap:47px; align-items:center; }
.hw-real__art { position:relative; height:560px; border-radius:64px; }
.hw-real__bg { position:absolute; left:-204px; top:-54px; width:1919px; height:870px; max-width:none; object-fit:contain; object-position:left bottom; pointer-events:none; }
.hw-real__art { overflow:visible; }
.hw-real__stats { position:absolute; left:442px; top:154px; width:533px; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.hw-real__stats li { display:flex; flex-direction:column; gap:12px; padding:10px 20px; background:#fff; border:1px solid var(--line); border-radius:32px; box-shadow:0 32px 27px -24px rgba(0,0,0,.06); }
.hw-real__stats li > span:first-child { display:none; }
.hw-real__stats b { display:flex; align-items:center; gap:16px; padding:8px 0 0 8px; font-weight:700; font-size:20px; line-height:1.32; color:var(--ink); }
.hw-real__stats li > span:first-child + b::before { content:none; }
.hw-real__stats strong { font-weight:800; font-size:40px; line-height:1.32; color:var(--ink); }
.hw-real__stats strong em { font-style:normal; }
.hw-real__text { display:flex; flex-direction:column; gap:32px; padding:32px 0; }
.hw-real__band { margin:40px auto 0; width:1412px; display:flex; align-items:center; gap:24px; padding:32px 48px; background:rgba(98,133,251,.08); border-radius:32px; }
.hw-real__bi { width:80px; height:80px; flex:none; border-radius:60px; background:#fff; box-shadow:1px 4px 6.7px rgba(0,0,0,.07); display:flex; align-items:center; justify-content:center; }
.hw-real__band > div { flex:1; display:flex; flex-direction:column; gap:12px; line-height:1.4; }
.hw-real__band > div b { font-weight:700; font-size:24px; color:#0e1c63; }
.hw-real__band > div p { font-weight:500; font-size:20px; color:var(--body); }

/* 9. Plan */
.hw-plan__grid { display:grid; grid-template-columns:686px 1fr; gap:0; align-items:start; }
.hw-plan__text { position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:24px; padding-top:8px; }
.hw-plan__pill { display:inline-flex; align-items:center; gap:12px; padding:8px 16px; border-radius:100px; background:rgba(88,174,106,.08); font-weight:700; font-size:27px; line-height:1.48; color:var(--green); }
.hw-plan__h2 { font-weight:800; font-size:48px; line-height:1.24; color:#1a1c27; max-width:477px; }
.hw-plan__h2 span { color:#142577; }
.hw-plan__lead { margin-top:24px; font-weight:700; font-size:20px; line-height:1.6; color:#142577; max-width:506px; }
.hw-plan__p { font-weight:500; font-size:20px; line-height:1.6; color:rgba(28,40,56,.7); max-width:506px; }
.hw-plan__deco { position:absolute; left:453px; top:335px; width:278px; height:190px; pointer-events:none; }
.hw-plan__city { position:absolute; left:0; top:80px; width:278px; height:110px; }
.hw-plan__ell { position:absolute; left:108px; top:28px; width:68px; height:120px; }
.hw-plan__doc { position:absolute; left:132px; top:0; width:80px; height:80px; border-radius:60px; background:#fff; padding:16px; } .hw-plan__doc img { width:48px; height:48px; }
.hw-plan__ok { position:absolute; left:149px; top:116px; width:48px; height:48px; border-radius:60px; background:#fff; padding:4px; } .hw-plan__ok img { width:40px; height:40px; }
.hw-plan__text .hw-btn { margin-top:40px; }
.hw-plan__ben { margin-top:24px; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; width:686px; }
.hw-plan__ben li { display:flex; align-items:center; gap:12px; padding:8px; background:#fff; border-radius:12px; font-weight:500; font-size:18px; line-height:1.48; }
.hw-plan__card { display:flex; flex-direction:column; gap:24px; padding:32px; background:#fff; border:1px solid var(--line); border-radius:48px; box-shadow:0 32px 27px -20px rgba(0,0,0,.04), 0 80px 40px -40px rgba(0,0,0,.03); }
.hw-plan__flow { display:flex; align-items:flex-start; gap:12px; }
.hw-plan__st { flex:1; display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; }
.hw-plan__st > span { width:80px; height:80px; border-radius:60px; background:#fff; box-shadow:1px 4px 6.7px rgba(0,0,0,.07); display:flex; align-items:center; justify-content:center; transition:transform .4s, box-shadow .4s; }
.hw-plan__st b { width:30px; border-radius:100px; background:var(--green); color:#fff; font-weight:700; font-size:20px; line-height:1.48; }
.hw-plan__st em { font-style:normal; font-weight:700; font-size:16px; line-height:1.48; color:#081e5a; max-width:150px; }
.hw-plan__con { flex:1; height:80px; } .hw-plan__con img { width:100%; height:80px; }
.hw-plan__panes { position:relative; display:flex; gap:24px; align-items:stretch; }
.hw-plan__pane { flex:1; display:flex; flex-direction:column; gap:12px; padding:20px; border:1px solid var(--line); border-radius:32px; }
.hw-plan__pane--photos { flex:none; width:406px; }
.hw-plan__pane h3 { font-weight:700; font-size:20px; line-height:1.32; color:#081e5a; }
.hw-plan__pane > p { font-weight:600; font-size:16px; line-height:1.48; color:rgba(28,40,56,.7); }
.hw-plan__photos { margin-top:12px; width:318px; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.hw-plan__photos li { padding:10px; border:1px solid var(--line); border-radius:12px; display:flex; flex-direction:column; gap:12px; }
.hw-plan__photos li > img { width:100%; height:100px; object-fit:cover; border-radius:4px; }
.hw-plan__photos li > span { display:flex; justify-content:space-between; align-items:center; font-weight:700; font-size:16px; line-height:1.48; color:var(--navy); }
.hw-plan__arrow { position:absolute; left:382px; top:271px; width:48px; height:48px; z-index:1; }
.hw-plan__rec { flex:1; display:flex; gap:24px; margin-top:12px; }
.hw-plan__kit { flex:1; position:relative; overflow:hidden; min-height:230px; }
.hw-plan__kit img { position:absolute; left:-21.7%; top:0; width:144.75%; height:80.7%; object-fit:fill; }
.hw-plan__rec ul { flex:1; display:flex; flex-direction:column; gap:24px; }
.hw-plan__rec li { display:flex; align-items:center; gap:12px; font-weight:600; font-size:16px; line-height:1.48; color:var(--navy); }
.hw-plan__rec li span { width:40px; height:40px; flex:none; border-radius:50%; background:rgba(88,174,106,.08); display:flex; align-items:center; justify-content:center; }
.hw-plan__done { display:flex; align-items:center; gap:12px; padding:8px 24px; border-radius:24px; background:rgba(88,174,106,.08); font-weight:700; font-size:20px; line-height:1.64; letter-spacing:.2px; color:var(--green); }

/* ---------- Motion (JS-gated: nothing is hidden without JS) ---------- */
html.hw-js .hw-up { opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .8s cubic-bezier(.2,.7,.2,1); transition-delay:calc(var(--d,0) * 90ms); }
html.hw-js .hw-up.is-in { opacity:1; transform:none; }
html.hw-js .hw-rv { opacity:0; transform:translateY(.5em); filter:blur(6px); transition:opacity .8s ease, transform .9s cubic-bezier(.2,.7,.2,1), filter .8s ease; transition-delay:calc(var(--d,0) * 120ms); }
html.hw-js .hw-hero.is-in .hw-rv { opacity:1; transform:none; filter:none; }
html.hw-js .hw-kit__img { opacity:0; transform:translateY(30px) scale(.96); transition:opacity 1s ease .25s, transform 1.4s cubic-bezier(.2,.7,.2,1) .25s; }
html.hw-js .hw-hero.is-in .hw-kit__img { opacity:1; transform:none; }
html.hw-js .hw-kit__br, html.hw-js .hw-kit__ln { opacity:0; transition:opacity .6s ease 1.2s, clip-path .8s ease 1.2s; clip-path:inset(0 100% 0 0); }
html.hw-js .hw-hero.is-in .hw-kit__br, html.hw-js .hw-hero.is-in .hw-kit__ln { opacity:1; clip-path:inset(0 0 0 0); }
html.hw-js .hw-counts li { opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
html.hw-js .hw-counts li:nth-child(1) { transition-delay:1.1s; } html.hw-js .hw-counts li:nth-child(2) { transition-delay:1.25s; } html.hw-js .hw-counts li:nth-child(3) { transition-delay:1.4s; }
html.hw-js .hw-hero.is-in .hw-counts li { opacity:1; transform:none; }
html.hw-js .hw-rule i { transform:scaleX(0); transition:transform .9s cubic-bezier(.2,.7,.2,1) .3s; }
html.hw-js .is-in .hw-rule i, html.hw-js .hw-rule.is-in i { transform:none; }
/* data flowing along the platform arrows */
.hw-flow__arr::after { content:""; position:absolute; left:0; top:50%; width:8px; height:8px; margin-top:-4px; border-radius:50%; background:currentColor; color:#6285fb; opacity:0; }
.hw-plat.is-in .hw-flow__arr::after { animation:hwPulse 2.4s ease-in-out infinite; }
.hw-flow__card:nth-child(2) .hw-flow__arr::after { color:#9747ff; animation-delay:.8s !important; }
.hw-flow__card:nth-child(3) .hw-flow__arr::after { color:#58ae6a; animation-delay:1.6s !important; }
@keyframes hwPulse { 0% { left:0; opacity:0; } 15% { opacity:1; } 70% { left:calc(100% - 10px); opacity:1; } 100% { left:calc(100% - 10px); opacity:0; } }
.hw-plat.is-in .hw-flow__ic > span { animation:hwBob 3.2s ease-in-out infinite; }
.hw-flow__card:nth-child(2) .hw-flow__ic > span { animation-delay:.4s !important; } .hw-flow__card:nth-child(3) .hw-flow__ic > span { animation-delay:.8s !important; } .hw-flow__card:nth-child(4) .hw-flow__ic > span { animation-delay:1.2s !important; }
@keyframes hwBob { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-4px); } }
/* plan flow lights up in sequence */
.hw-plan.is-in .hw-plan__st > span { animation:hwGlow 4.8s ease-in-out infinite; }
.hw-plan__flow li:nth-child(3) > span { animation-delay:1.2s !important; } .hw-plan__flow li:nth-child(5) > span { animation-delay:2.4s !important; } .hw-plan__flow li:nth-child(7) > span { animation-delay:3.6s !important; }
@keyframes hwGlow { 0%,30%,100% { transform:none; box-shadow:1px 4px 6.7px rgba(0,0,0,.07); } 10% { transform:translateY(-4px); box-shadow:0 0 0 6px rgba(88,174,106,.15), 0 12px 24px -10px rgba(88,174,106,.6); } }
.hw-plan.is-in .hw-plan__ok { animation:hwPop .6s cubic-bezier(.3,1.6,.5,1) .6s both; }
@keyframes hwPop { from { transform:scale(0); } to { transform:none; } }
@media (prefers-reduced-motion:reduce) {
	html.hw-js .hw-up, html.hw-js .hw-rv, html.hw-js .hw-kit__img, html.hw-js .hw-kit__br, html.hw-js .hw-kit__ln, html.hw-js .hw-counts li, html.hw-js .hw-rule i { opacity:1 !important; transform:none !important; filter:none !important; clip-path:none !important; transition:none !important; }
	.hw *, .hw *::after { animation:none !important; }
	.hw-pti__img, .hw-pti__prog i { transition:none !important; }
}

/* ---------- Desktop: one screen per section ---------- */
@media (min-width:992px) {
	.hw-sec { min-height:var(--fit-h,calc(100svh - 84px)); }
	.hw-strip, .hw-feats { min-height:0; padding-block:clamp(24px,8vh,96px); }
	/* no-JS fallback scale (JS sets the exact --z) */
	.hw-in { --z:.6; }
	@media (min-width:1280px) { .hw-in { --z:.72; } }
	@media (min-width:1600px) { .hw-in { --z:.9; } }
	@media (min-width:1900px) and (min-height:860px) { .hw-in { --z:1; } }
	.hw-pti__art { min-height:560px; }
}

/* ---------- Tablet / phone: stacked ---------- */
@media (max-width:991px) {
	.hw-sec { padding:40px 20px; }
	.hw-hero { padding-top:24px; }
	.hw-in { width:100%; zoom:1; }
	.hw-eyebrow { font-size:14px; } .hw-h2 { font-size:30px; line-height:1.2; } .hw-p { font-size:16px; line-height:1.6; }
	.hw-btn { height:56px; font-size:16px; gap:14px; white-space:normal; } .hw-btn__c { width:44px; height:44px; } .hw-btn--indigo { font-size:17px; padding:12px 24px; }
	.hw-hero__in { grid-template-columns:1fr; gap:24px; }
	.hw-hero__text { gap:16px; }
	.hw-hero__h1 { font-size:40px; } .hw-hero__lead { font-size:20px; } .hw-hero__p { font-size:16px; }
	.hw-hero__text .hw-btn { margin-top:4px; }
	.hw-kit { width:100%; }
	.hw-counts { width:100%; }
	.hw-counts li { width:auto; flex:1; padding:6px 4px; }
	.hw-counts b { font-size:30px; } .hw-counts em { font-size:22px; } .hw-counts span { font-size:13px; margin-top:4px; line-height:1.3; }
	.hw-strip__box { flex-direction:column; align-items:stretch; border-radius:32px; padding:24px 16px; }
	.hw-strip__vr { width:auto; height:1px; }
	.hw-strip__col { gap:16px; }
	.hw-strip__h { font-size:18px; white-space:normal; }
	.hw-strip__hi { padding:8px; } .hw-strip__hi img { width:24px; height:24px; }
	.hw-pills { flex-direction:column; width:100%; }
	.hw-pills li { max-width:none; font-size:16px; padding-right:16px; }
	.hw-pills span { width:48px; height:48px; }
	.hw-plat__grid, .hw-dep__grid { flex-direction:column; gap:32px; }
	.hw-plat__text, .hw-dep__text { width:100%; gap:16px; }
	.hw-plat .hw-eyebrow, .hw-dep__text .hw-eyebrow { white-space:normal; }
	.hw-flow { grid-template-columns:1fr; gap:48px; width:100%; }
	.hw-flow__card p, .hw-flow__card h3, .hw-flow__pre { font-size:16px; }
	.hw-flow__img { height:160px; }
	.hw-flow__arr { right:auto; left:50%; top:auto; bottom:-36px; transform:translateX(-50%) rotate(90deg); width:30px; }
	.hw-note { width:auto; flex-wrap:wrap; padding:16px; }
	.hw-note b, .hw-note span { padding:4px; font-size:15px; } .hw-note i { display:none; } .hw-note img { width:32px; height:32px; }
	.hw-dep__cards { grid-template-columns:1fr; gap:16px; }
	.hw-dep__cards li { gap:16px; } .hw-dep__cards h3 { font-size:20px; } .hw-dep__cards p { font-size:16px; } .hw-dep__ic { width:52px; height:52px; } .hw-dep__ic img { width:30px; height:30px; }
	.hw-pti__grid { display:flex; flex-direction:column; gap:20px; }
	.hw-pti__body { display:contents; }
	.hw-pti__head { order:-1; }
	.hw-pti__art { height:300px; }
	.hw-pti__card { padding:16px; gap:16px; border-radius:24px; }
	.hw-pti__tabs { grid-template-columns:repeat(6,minmax(0,1fr)); padding-bottom:16px; }
	.hw-pti__ti { width:44px; height:44px; } .hw-pti__ti img { max-width:24px; max-height:22px; }
	.hw-pti__prog { top:22px; }
	.hw-pti__tabs b { font-size:13px; } .hw-pti__tl { font-size:10.5px; line-height:1.3; }
	.hw-pti__pane h3 { font-size:20px; } .hw-pti__txt { font-size:16px; gap:12px; }
	.hw-pti__sub button { font-size:15px; padding:10px 6px; min-height:44px; }
	.hw-feats__bar { grid-template-columns:1fr; padding:16px; gap:8px; }
	.hw-feats__bar div { font-size:15px; } .hw-feats__bar b { font-size:18px; } .hw-feats__bar span { width:52px; height:52px; }
	.hw-spec__tiles { grid-template-columns:1fr 1fr; gap:12px; margin-top:32px; }
	.hw-spec__tiles li { padding:14px 10px; border-radius:24px; } .hw-spec__tiles b { font-size:16px; } .hw-spec__tiles small { font-size:13px; }
	.hw-spec__tiles span { width:52px; height:52px; margin-bottom:0; } .hw-spec__tiles span img { width:30px; height:30px; }
	.hw-comp__cards { grid-template-columns:1fr; gap:16px; }
	.hw-comp__cards > li { gap:14px; padding:14px; }
	.hw-comp__art { width:96px; } .hw-comp__art img { width:96px; height:130px; }
	.hw-comp__body h3 { font-size:18px; } .hw-comp__body h3 span { width:44px; height:44px; } .hw-comp__body h3 span img { width:26px; height:26px; }
	.hw-comp__body > p { font-size:15px; } .hw-comp__body ul li { font-size:14px; }
	.hw-comp .hw-center { margin-top:24px; }
	.hw-built__cards { grid-template-columns:1fr; gap:16px; margin-top:32px; }
	.hw-built__cards li { padding:20px; gap:16px; } .hw-built__cards h3 { font-size:20px; } .hw-built__cards p { font-size:16px; margin-top:-8px; }
	.hw-real__grid { display:flex; flex-direction:column-reverse; gap:24px; }
	.hw-real__art { height:auto; border-radius:24px; overflow:hidden; }
	.hw-real__bg { position:static; width:100%; height:200px; object-fit:cover; object-position:30% 60%; border-radius:24px; }
	.hw-real__stats { position:static; width:100%; margin-top:12px; }
	.hw-real__stats b { font-size:15px; padding:4px 0 0; } .hw-real__stats strong { font-size:28px; }
	.hw-real__text { padding:0; gap:16px; }
	.hw-real__band { width:100%; flex-direction:column; align-items:flex-start; padding:20px; margin-top:24px; }
	.hw-real__band > div b { font-size:18px; } .hw-real__band > div p { font-size:15px; }
	.hw-plan__grid { grid-template-columns:1fr; gap:32px; }
	.hw-plan__text { gap:14px; }
	.hw-plan__pill { font-size:18px; } .hw-plan__h2 { font-size:32px; } .hw-plan__lead { margin-top:0; font-size:17px; } .hw-plan__p { font-size:16px; }
	.hw-plan__deco { display:none; }
	.hw-plan__text .hw-btn { margin-top:8px; }
	.hw-plan__ben { width:100%; grid-template-columns:1fr; margin-top:4px; } .hw-plan__ben li { font-size:15px; }
	.hw-plan__card { padding:16px; border-radius:28px; }
	.hw-plan__con { display:none; } .hw-plan__flow { gap:6px; }
	.hw-plan__st > span { width:52px; height:52px; } .hw-plan__st > span img { width:28px; height:28px; } .hw-plan__st b { font-size:14px; width:24px; } .hw-plan__st em { font-size:11.5px; }
	.hw-plan__panes { flex-direction:column; }
	.hw-plan__pane--photos { width:auto; }
	.hw-plan__photos { width:100%; }
	.hw-plan__arrow { display:none; }
	.hw-plan__rec { flex-direction:column; } .hw-plan__kit { min-height:180px; }
	.hw-plan__done { font-size:14px; padding:8px 12px; }
}
/* real-world stat cards: icon + label row, number below (Figma f_real) */
.hw-real__stats li { display:grid; grid-template-columns:40px 1fr; align-items:center; column-gap:12px; row-gap:8px; }
.hw-real__stats li > span:first-child { display:flex; width:40px; height:40px; border-radius:50%; align-items:center; justify-content:center; }
.hw-real__stats li > span:first-child img { width:22px; height:22px; }
.hw-real__stats b { padding:0; }
.hw-real__stats strong { grid-column:1/-1; }
.hw-real__text, .hw-real__band { position:relative; z-index:2; }
.hw-real__stats { z-index:2; }
.hw-real__art { z-index:1; }

/* Strip: same component as the Platform page "Works With Existing Infrastructure / Designed for Real Facilities"
   (page-platform-preview.php .pf-tech__cols + .pf-chips): two centred columns, divider, single-line chips that wrap as whole chips. */
.hw-strip__box { display:grid; grid-template-columns:1fr 2px 1fr; gap:40px; align-items:start; padding:40px 48px; border:0; border-radius:32px; box-shadow:0 0 0 1px rgba(28,40,56,.07), 0 1px 2px rgba(16,24,40,.04), 0 24px 48px -20px rgba(16,24,40,.14); }
.hw-strip__col { gap:28px; }
.hw-strip__h { font-weight:700; font-size:30px; letter-spacing:-.01em; color:#1c2838; gap:16px; }
.hw-strip__hi { padding:14px; }
.hw-strip__vr { width:2px; background:#e1e3ef; }
.hw-pills { flex-wrap:wrap; justify-content:center; gap:16px; }
.hw-pills li { max-width:none; white-space:nowrap; gap:14px; padding:10px 28px 10px 10px; border-color:rgba(28,40,56,.09); box-shadow:0 1px 2px rgba(16,24,40,.04); font-size:22px; }
.hw-pills li:hover { border-color:rgba(19,83,233,.22); }
.hw-pills span { width:56px; height:56px; }
@media (max-width:991px) {
	.hw-strip__box { grid-template-columns:1fr; gap:20px; padding:24px 16px; }
	.hw-strip__vr { width:auto; height:1px; }
	.hw-strip__h { font-size:18px; }
	.hw-pills { flex-direction:row; gap:8px; }
	.hw-pills li { white-space:normal; font-size:14px; padding:6px 14px 6px 6px; min-height:44px; }
	.hw-pills span { width:36px; height:36px; } .hw-pills span img { width:20px; height:20px; }
}
@media (min-width:992px) {
	.hw-strip__box { padding:32px 48px; gap:40px; }
	.hw-strip__col { gap:24px; }
	.hw-strip__h { font-size:26px; }
	.hw-strip__hi { padding:10px; }
	.hw-pills { gap:12px; }
	.hw-pills li { font-size:19px; gap:12px; padding:6px 22px 6px 6px; }
	.hw-pills span { width:44px; height:44px; } .hw-pills span img { width:24px; height:24px; }
}

/* ---------- Stepper polish: no black focus box; soft ring on the active icon, keyboard-only focus ring ---------- */
.hw-pti__tabs button:focus, .hw-pti__sub button:focus { outline:none !important; box-shadow:none; }
.hw-pti__tabs button:focus-visible { outline:none !important; }
.hw-pti__tabs button:focus-visible .hw-pti__ti { box-shadow:0 0 0 3px #fff, 0 0 0 5px rgba(98,133,251,.55); }
.hw-pti__sub button:focus-visible { outline:none !important; box-shadow:inset 0 0 0 2px rgba(98,133,251,.45); border-radius:10px 10px 0 0; }
.hw-pti__ti { border-color:#e1e3ef; background:#fff; }
.hw-pti__tabs [aria-selected=true] .hw-pti__ti { border-color:transparent; background:linear-gradient(180deg,#f3f6ff,#e9efff); box-shadow:0 0 0 6px rgba(98,133,251,.12), 0 10px 24px -8px rgba(98,133,251,.55); transform:translateY(-2px); }
.hw-pti__tabs [aria-selected=true] .hw-pti__ti::after { display:none; }

.hw-pti__art { position:relative; }
/* reserve the tallest sub-tab text so switching never changes the section height */
.hw-pti__pane, .hw-pti__pane[hidden] { display:grid; grid-template-columns:100%; align-content:start; }
.hw-pti__sub ~ .hw-pti__txt { grid-row:2; grid-column:1; }
.hw-pti__sub ~ .hw-pti__txt[hidden] { display:flex; visibility:hidden; }
/* the theme's [hidden]{display:none!important} collapsed inactive panes; keep them in the grid (invisible) so height is constant */
.hw-pti__panes > .hw-pti__pane[hidden] { display:grid !important; visibility:hidden; }
.hw-pti__pane > .hw-pti__sub ~ .hw-pti__txt[hidden] { display:flex !important; visibility:hidden; }

/* 6: dashboard comes forward */
.hw-stg__dash { position:absolute; left:4%; top:24%; width:92%; margin:0; border-radius:14px; overflow:hidden; background:#fff; box-shadow:0 0 0 1px rgba(13,23,88,.06), 0 30px 60px -20px rgba(13,23,88,.35); opacity:0; transform:translateY(6%) scale(.94); transition:opacity .8s ease, transform 1.1s cubic-bezier(.2,.7,.2,1); }
.hw-stg__dash img { position:relative; width:100%; height:auto; }
[data-scene="6"] .hw-stg__dash { opacity:1; transform:none; transition-delay:.4s; }
[data-scene="6"] .hw-stg__dash img { animation:hwKB2 10s ease-in-out infinite alternate 1.4s; transform-origin:30% 40%; }
@keyframes hwKB2 { from { transform:scale(1); } to { transform:scale(1.06); } }
.hw-stg__live { position:absolute; inset:0; background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%); background-size:250% 100%; opacity:0; }
[data-scene="6"] .hw-stg__live { opacity:1; animation:hwSheen 3.6s ease-in-out infinite 1.6s; }
@keyframes hwSheen { from { background-position:120% 0; } to { background-position:-120% 0; } }

/* ---------- Stage v3: Peter's step animations (Figma GIF fills) as crisp video + layered motion ---------- */
.hw-pti__art { display:flex; align-items:center; justify-content:center; padding:20px; background:radial-gradient(85% 75% at 55% 45%,#fff 0%,#fff 55%,#f3f6fc 100%); box-shadow:inset 0 0 0 1px #e8ebf4; overflow:hidden; }
.hw-vs { position:relative; height:100%; max-width:100%; aspect-ratio:1; margin:auto; }
.hw-vs__frame { position:absolute; inset:0; transition:transform 1.3s cubic-bezier(.65,0,.2,1), opacity .8s ease; }
/* steps 1-3: centre the panel; 4-5: slide right so the CT Hubs / Gateway have room, as in the reference */
.hw-pti__art:is([data-scene="1"],[data-scene="2"],[data-scene="3"]) .hw-vs__frame { transform:translateX(-13.7%) scale(1.06); }
.hw-vs__m { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply; opacity:0; transition:opacity .7s ease; background:#fff; }
.hw-vs__m.is-on { opacity:1; }
.hw-vs__fx { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.hw-vs__fx g { opacity:0; transition:opacity .6s ease; }
.hw-pti__art.is-held:is([data-scene="4"],[data-scene="5"]) .hw-vs__cond, .hw-pti__art.is-held[data-scene="5"] .hw-vs__cab, .hw-pti__art.is-held[data-scene="5"] .hw-vs__wv { opacity:1; }
.hw-vs__wv circle { fill:none; stroke:#6285fb; stroke-width:3; transform-box:fill-box; transform-origin:center; opacity:0; }
.hw-pti__art.is-held[data-scene="5"] .hw-vs__wv circle { animation:hwWave3 2.4s ease-out infinite; }
.hw-vs__wv circle:nth-child(2) { animation-delay:.8s !important; } .hw-vs__wv circle:nth-child(3) { animation-delay:1.6s !important; }
@keyframes hwWave3 { 0% { opacity:0; transform:scale(.4); } 20% { opacity:.9; } 100% { opacity:0; transform:scale(2.6); } }
.hw-vs__brk { position:absolute; left:49%; top:27.4%; width:29.1%; height:35.6%; border-radius:8px; opacity:0; overflow:hidden; box-shadow:0 0 0 2px rgba(88,174,106,.9), 0 0 26px 4px rgba(88,174,106,.3); transition:opacity .6s ease; }
.hw-vs__brk i { position:absolute; left:0; right:0; top:-30%; height:30%; background:linear-gradient(180deg,transparent,rgba(126,224,143,.35),transparent); }
.hw-pti__art.is-held[data-scene="2"] .hw-vs__brk { opacity:1; }
.hw-pti__art.is-held[data-scene="2"] .hw-vs__brk i { animation:hwSweep 2.4s ease-in-out infinite; }
[data-scene="6"] .hw-vs__frame { opacity:.16; }
.hw-pti__art:is([data-scene="1"],[data-scene="2"],[data-scene="3"]) .hw-vs__frame .hw-vs__m--1.is-on { animation:hwKB 9s ease-in-out infinite alternate; }
@media (prefers-reduced-motion:reduce) { .hw-vs *, .hw-vs__frame { animation:none !important; transition:none !important; } }
@media (max-width:991px) { .hw-pti__art { height:auto; padding:8px; } .hw-vs { height:auto; width:min(100%,380px); } }

@media (max-width:991px) { .hw-pti__art { height:auto; padding:12px; } .hw-stg { height:auto; width:min(100%,360px); } }
/* refinements after frame review */
[data-scene="6"] .hw-stg__dev { opacity:0; }
[data-scene="6"] .hw-stg__pan { opacity:.18; }
.hw-stg__dash { top:28%; }
.hw-stg__ct b { width:4.2%; margin:-2.1% 0 0 -2.1%; background:transparent; border:3px solid #58ae6a; box-shadow:0 0 0 2px rgba(255,255,255,.9), 0 0 14px rgba(88,174,106,.55); }
@keyframes hwKB { from { scale:1; } to { scale:1.03; } }
@keyframes hwSweep { from { top:-30%; } to { top:100%; } }
/* keep the stage exactly square inside whatever box the art column gives it */
@media (min-width:992px) {
	.hw-pti__art { container-type:size; }
	.hw-vs { width:min(100cqw,100cqh); height:min(100cqw,100cqh); max-width:none; aspect-ratio:auto; }
}

/* ---------- Step 6: dashboard on laptop + phone (Figma 9546:54062 "Live Usage", 2x) ---------- */
.hw-stg__dash { display:none; }
.hw-dv { position:absolute; inset:0; pointer-events:none; }
.hw-dv__lap { position:absolute; left:2%; right:2%; top:22%; opacity:0; transform:translateY(8%) scale(.96); transition:opacity .8s ease, transform 1.2s cubic-bezier(.2,.7,.2,1); filter:drop-shadow(0 26px 30px rgba(13,23,88,.22)); }
.hw-dv__lid { position:relative; margin:0 6%; padding:2.6% 2.4% 2.8%; border-radius:14px 14px 4px 4px; background:linear-gradient(180deg,#22262c,#0e1014); box-shadow:inset 0 0 0 1.5px #3a3f47, inset 0 0 0 3px #0b0c0f; }
.hw-dv__cam { position:absolute; left:50%; top:1.1%; width:5px; height:5px; margin-left:-2.5px; border-radius:50%; background:#2b3a4a; box-shadow:0 0 0 1px #1b1e23; }
.hw-dv__scr { position:relative; overflow:hidden; border-radius:3px; background:#fff; aspect-ratio:16/10; }
.hw-dv__scr img { display:block; width:100%; height:100%; object-fit:cover; object-position:left top; opacity:0; transform:scale(1.03); transition:opacity .9s ease, transform 1.4s cubic-bezier(.2,.7,.2,1); }
.hw-dv__base { position:relative; height:0; padding-bottom:3.4%; border-radius:0 0 18px 18px / 0 0 60% 60%; background:linear-gradient(180deg,#e9ebef 0%,#cfd3da 55%,#a9aeb7 100%); box-shadow:inset 0 1px 0 #fff; }
.hw-dv__base span { position:absolute; left:42%; right:42%; top:0; height:42%; border-radius:0 0 8px 8px; background:linear-gradient(180deg,#b9bec6,#d5d9df); }
.hw-dv__ph { position:absolute; right:3%; bottom:6%; width:23%; aspect-ratio:9/19.2; padding:2.2% 1.6%; border-radius:16% / 7.5%; background:linear-gradient(160deg,#30353d,#0c0e12); box-shadow:inset 0 0 0 1.5px #4a505a, inset 0 0 0 3px #0b0c0f, 0 24px 34px -10px rgba(13,23,88,.35); opacity:0; transform:translateY(14%) rotate(2deg); transition:opacity .8s ease, transform 1.2s cubic-bezier(.2,.7,.2,1); }
.hw-dv__scr--ph { aspect-ratio:auto; height:100%; border-radius:13% / 6%; }
.hw-dv__isl { position:absolute; left:50%; top:4%; width:30%; height:2.6%; transform:translateX(-50%); border-radius:20px; background:#06070a; z-index:2; }
.hw-dv__sheen { position:absolute; inset:0; background:linear-gradient(115deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,0) 38%); pointer-events:none; }
.hw-dv__live { position:absolute; left:8%; top:13%; display:flex; align-items:center; gap:6px; padding:4px 10px 4px 8px; border-radius:100px; background:#fff; box-shadow:0 6px 16px -6px rgba(13,23,88,.35); font:700 12px/1 'Plus Jakarta Sans',sans-serif; color:#14171c; opacity:0; transform:translateY(-6px); transition:opacity .6s ease 1.6s, transform .6s ease 1.6s; }
.hw-dv__live b { width:8px; height:8px; border-radius:50%; background:#58ae6a; box-shadow:0 0 0 0 rgba(88,174,106,.6); }
[data-scene="6"] .hw-dv__lap { opacity:1; transform:none; transition-delay:.3s; }
[data-scene="6"] .hw-dv__ph { opacity:1; transform:none; transition-delay:.7s; }
[data-scene="6"] .hw-dv__scr img { opacity:1; transform:none; transition-delay:1.1s; }
[data-scene="6"] .hw-dv__live { opacity:1; transform:none; }
[data-scene="6"] .hw-dv__live b { animation:hwTick 1.6s ease-out infinite 2s; }
@keyframes hwTick { 0% { box-shadow:0 0 0 0 rgba(88,174,106,.6); } 100% { box-shadow:0 0 0 9px rgba(88,174,106,0); } }
[data-scene="6"] .hw-vs__frame { opacity:.07; }
@media (prefers-reduced-motion:reduce) { .hw-dv * , .hw-dv__lap, .hw-dv__ph { transition:none !important; animation:none !important; } }
[data-scene="6"] .hw-vs__frame { opacity:0; }
.hw-dv__lap { top:15%; } .hw-dv__live { top:7%; } .hw-dv__ph { bottom:10%; }
/* ---------- Step 5: Ethernet patch cables CT Hub RJ45 -> Gateway ports A/B (overlay in 1080 frame coords) ---------- */
.hw-vs__cab { opacity:1 !important; }
.hw-vs__ethsh { fill:none; stroke:rgba(13,23,40,.28); stroke-width:6; stroke-linecap:round; filter:url(#hwEthSh); opacity:0; transition:opacity .5s ease; }
.hw-vs__ethc { fill:none; stroke:#5f6b7b; stroke-width:5.2; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1; }
.hw-vs__ethh { fill:none; stroke:#b9c3cf; stroke-width:1.4; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1; opacity:.9; }
.hw-pti__art.is-held[data-scene="5"] .hw-vs__ethc, .hw-pti__art.is-held[data-scene="5"] .hw-vs__ethh { stroke-dashoffset:0; transition:stroke-dashoffset 1.3s cubic-bezier(.5,0,.2,1) calc(var(--k) * .35s); }
.hw-pti__art.is-held[data-scene="5"] .hw-vs__ethsh { opacity:1; transition-delay:calc(1s + var(--k) * .35s); }
.hw-vs__plug { opacity:0; }
.hw-vs__plugi { transform-box:fill-box; transform-origin:center; transform:translate(0,-14px) scale(1.35); }
.hw-pti__art.is-held[data-scene="5"] .hw-vs__plug { opacity:1; transition:opacity .25s ease calc(1.25s + var(--k) * .35s); }
.hw-pti__art.is-held[data-scene="5"] .hw-vs__plugi { animation:hwPlugIn .55s cubic-bezier(.3,1.5,.5,1) both; animation-delay:calc(1.25s + var(--k) * .35s); }
@keyframes hwPlugIn { 0% { transform:translate(0,-14px) scale(1.35); } 70% { transform:translate(0,1px) scale(.97); } 85% { transform:translate(0,-.5px) scale(1.01); } 100% { transform:none; } }
.hw-vs__ethp { opacity:0; }
.hw-pti__art.is-held[data-scene="5"] .hw-vs__ethp { opacity:1; transition:opacity .4s ease 2.4s; }
.hw-pti__art:not(.is-held) .hw-vs__cab, .hw-pti__art:not([data-scene="5"]) .hw-vs__cab { visibility:hidden; }
@media (prefers-reduced-motion:reduce) { .hw-vs__plugi { animation:none !important; transform:none; } .hw-vs__ethc, .hw-vs__ethh { transition:none !important; } }
.hw-vs__fx .hw-vs__cab g.hw-vs__eth, .hw-vs__fx .hw-vs__cab g.hw-vs__plugi, .hw-vs__fx .hw-vs__plug g { opacity:1; transition:none; }

/* ---------- Step 6 v8: larger devices, crisp Live Usage screen with slow zoom/pan so the numbers are readable ---------- */
.hw-dv__lap { left:0; right:0; top:5%; } .hw-dv__lid { margin:0 2.5%; padding:2.2% 2% 2.4%; }
.hw-dv__ph { width:18%; right:.5%; bottom:3%; } .hw-dv__live { top:auto; bottom:6%; left:3%; }
.hw-dv__pan { position:absolute; left:0; top:0; width:990px; height:610px; transform-origin:0 0; transform:scale(var(--fit,.38)); will-change:transform; }
.hw-dv__scr .hw-dv__pan img { width:990px; height:610px; object-fit:fill; transform:none; }

/* ---------- Step 6 v9: devices laid out over the whole art card (not the square video stage), centered as a group ---------- */
.hw-pti__art > .hw-dv { position:absolute; inset:14px; container-type:size; }
.hw-dv__box { position:absolute; left:50%; top:50%; width:min(100cqw, 120cqh); aspect-ratio:1/.83; transform:translate(-50%,-50%); }
.hw-dv__box .hw-dv__lap { left:0; right:0; top:0; }
.hw-dv__box .hw-dv__ph { width:17.5%; right:.5%; bottom:0; top:auto; }
.hw-dv__box .hw-dv__live { left:2%; bottom:3%; top:auto; }

/* ---------- Step 6 v10: fixed full Live Usage view with subtle live movement (values tick, bars breathe, chart dot, live dot, donut sheen) ---------- */
@font-face { font-family:'HwNunitoNum'; src:url(../fonts/hardware/nunito-num.woff) format('woff'); font-weight:200 1000; font-display:block; }
.hw-lv { position:absolute; inset:0; font-family:'HwNunitoNum',Nunito,sans-serif; }
.hw-lv > * { position:absolute; }
.hw-lv__v { background:#fff; color:#21a038; font-weight:800; font-size:11px; line-height:15px; text-align:right; font-variant-numeric:tabular-nums; transition:color .6s; }
.hw-lv__t { font-size:14px; line-height:19px; }
.hw-lv__pc { background:#fff; color:#21a038; font-weight:700; font-size:11.5px; line-height:16px; padding:0 2px 0 1px; min-width:38px; font-variant-numeric:tabular-nums; transition:transform 1.8s ease; }
.hw-lv__bar { background:#21a038; border-radius:1px; transform-origin:0 50%; transition:transform 1.8s ease; }
.hw-lv__live { display:flex; align-items:center; gap:4px; font-size:9px; font-weight:800; color:#21a038; letter-spacing:.02em; }
.hw-lv__live b { width:6px; height:6px; border-radius:50%; background:#21c040; box-shadow:0 0 0 0 rgba(33,192,64,.5); }
[data-scene="6"] .hw-lv__live b { animation:hwLvDot 2.4s ease-out infinite; }
@keyframes hwLvDot { 0% { box-shadow:0 0 0 0 rgba(33,192,64,.5); } 100% { box-shadow:0 0 0 6px rgba(33,192,64,0); } }
.hw-lv__ch { overflow:visible; }
.hw-lv__trail { fill:none; stroke:#7ee08f; stroke-width:2.2; stroke-linecap:round; stroke-dasharray:.12 1; stroke-dashoffset:.12; opacity:.75; }
[data-scene="6"] .hw-lv__trail { animation:hwLvTrail 7s linear infinite; }
@keyframes hwLvTrail { 0% { stroke-dashoffset:.12; opacity:0; } 8% { opacity:.75; } 90% { opacity:.75; } 100% { stroke-dashoffset:-.9; opacity:0; } }
.hw-lv__dot circle { fill:#25a332; } .hw-lv__dot .hw-lv__halo { fill:rgba(37,163,50,.22); }
.hw-lv__ring { fill:none; stroke:#fff; stroke-width:21; stroke-dasharray:6 94; opacity:0; }
[data-scene="6"] .hw-lv__ring { animation:hwLvRing 9s ease-in-out infinite; }
@keyframes hwLvRing { 0% { stroke-dashoffset:0; opacity:0; } 20% { opacity:.16; } 80% { opacity:.16; } 100% { stroke-dashoffset:-100; opacity:0; } }
@media (prefers-reduced-motion:reduce) { .hw-lv *, .hw-lv__trail, .hw-lv__ring { animation:none !important; transition:none !important; } .hw-lv__dot, .hw-lv__trail, .hw-lv__ring { display:none; } }
.hw-lv__cov { background:#fff; }