/* hero · Concept G v2 hero: struck headline over a live desk of floating windows, switchable by industry.
   Self-contained: replaces G's inline .hero / .strike / .desk rules. Windows use parts/fw.css. */
.hero{position:relative;z-index:2;min-height:100vh;padding:112px 0 64px;overflow:hidden}
.hero-type{position:relative;z-index:3;text-align:center;display:flex;flex-direction:column;align-items:center;gap:22px}
.hero h1{font-size:clamp(54px,10vw,150px);letter-spacing:-.05em}
.hero-strike{position:relative;display:inline-block;color:var(--dimmer);font-size:.82em}
.hero-strike::after{content:"";position:absolute;left:-2%;right:-2%;top:52%;height:.06em;background:var(--coral);transform:scaleX(0);transform-origin:left;animation:hero-strike .6s var(--ease) .9s forwards}
@keyframes hero-strike{to{transform:scaleX(1)}}
.hero-l2{display:block}
/* the claim above the headline: a headline-style line, not a small caps label */
.hero-claim{margin:0;font-family:var(--display);font-weight:300;font-size:clamp(22px,2.2vw,32px);line-height:1.2;letter-spacing:-.01em;color:var(--blue);text-wrap:balance}
.hero .lede{text-align:center;text-wrap:pretty}
.hero .actions{justify-content:center}

/* switcher row */
.hero-stage{position:relative;margin-top:64px}
.hero-bar{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 28px;flex-wrap:wrap;margin-bottom:18px}
.hero-pick{display:flex;flex-direction:column;align-items:flex-start;gap:14px;min-width:0}
/* the prompt that tells people the chips are buttons */
.hero-ask{margin:0;font-family:var(--display);font-weight:300;font-size:clamp(22px,2.2vw,32px);line-height:1.15;letter-spacing:-.01em;color:#fff}
.hero-ask span{color:var(--blue)}
.hero-chips{display:flex;align-items:center;gap:6px;padding:4px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.03)}
.hero-hand{width:20px;height:20px;margin:0 2px 0 10px;color:var(--blue)}
.hero-chip{position:relative;isolation:isolate;height:36px;padding:0 17px;border-radius:999px;border:0;background:transparent;color:rgba(255,255,255,.8);font:600 14px var(--body);cursor:pointer;white-space:nowrap;transition:background var(--t-text) ease-in-out,color var(--t-text) ease-in-out}
.hero-chip:hover{color:#fff;background:rgba(255,255,255,.09)}
.hero-chip[aria-pressed="true"]{background:#fff;color:var(--navy)}
.hero-chip:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
/* the active chip fills with blue until the desk switches on its own */
.hero-chip.cue-active::after{top:0;height:auto;z-index:-1;opacity:1;background:linear-gradient(90deg,rgba(25,165,255,.1),rgba(25,165,255,.3));box-shadow:inset -2px 0 0 #19A5FF}
/* the chip that just gave up the desk lets its blue fill fade with its white instead of dropping it in one frame */
.hero-chip.hero-was::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(25,165,255,.1),rgba(25,165,255,.3));box-shadow:inset -2px 0 0 #19A5FF;transform-origin:left;transform:scaleX(var(--hero-was,1));animation:hero-was var(--t-text) ease-in-out forwards}
@keyframes hero-was{to{opacity:0}}
/* the hint keeps the size of its longest line (hero.js lays every line it can show into one grid cell, unseen), so the
   desk under it never moves when the words change */
.hero-hint{font-size:16px;color:var(--dim);max-width:26em;align-items:end;text-wrap:balance}
.hero-hint b{color:#fff;font-weight:600}
/* crossfading text (hero.js): the old words ease out while the new ones ease in over the same spot */
.hero-xf{display:grid;grid-template-columns:minmax(0,1fr)}
.hero-xf > *{grid-area:1/1;min-width:0}
.hero-xf-size{visibility:hidden}
.hero-xf-in{animation:hero-xf-in var(--t-text) ease-in-out both}
.hero-xf-was{animation:hero-xf-was var(--t-text) ease-in-out forwards;pointer-events:none}
@keyframes hero-xf-in{from{opacity:0;transform:translateY(.15em)}}
@keyframes hero-xf-was{to{opacity:0;transform:translateY(-.15em)}}
.hero-foot{margin-top:18px;text-align:center;font-size:12px;letter-spacing:.04em;color:var(--dimmer)}

/* the desk: one browser tab */
.hero-desk.desk{position:relative;height:clamp(600px,52vw,760px);margin:0;z-index:2}
.hero-desk.desk .tab{inset:0 0 52px 0}
.hero-desk .tabbar .url,.hero-desk .tabbar .tb-title{display:grid;justify-items:start}
.hero-live{position:static;flex:none;margin:0 6px 0 12px;display:flex;align-items:center;gap:8px;font-size:12px;color:var(--dim);white-space:nowrap;min-width:0}
.hero-live-t{min-width:0}
.hero-live-t > *{overflow:hidden;text-overflow:ellipsis}
.hero-dot{width:7px;height:7px;flex:none;border-radius:50%;background:#3cb98a;box-shadow:0 0 0 0 rgba(60,185,138,.55)}
.hero-on .hero-dot{animation:hero-pulse 2s ease-out infinite}
@keyframes hero-pulse{0%{box-shadow:0 0 0 0 rgba(60,185,138,.55)}100%{box-shadow:0 0 0 8px rgba(60,185,138,0)}}
.hero-counter .hero-zero{display:inline-block}
.hero-counter .hero-zero.hero-pop{animation:hero-pop var(--t-in) var(--ease-io)}
@keyframes hero-pop{0%{color:#fff;transform:scale(1)}40%{color:var(--blue);transform:scale(1.16)}100%{color:#fff;transform:scale(1)}}
.hero-counter button:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* windows: .win is the draggable shell from site.css, .fw draws the chrome */
.hero-desk.desk .win{width:var(--w,30%);background:none;border:0;border-radius:9px;box-shadow:none;overflow:visible;color:#1d2433}
.hero-desk.desk .win.top,.hero-desk.desk .win.dragging{box-shadow:none}
.hero-desk .win .fw{transition:box-shadow .25s,transform .25s var(--ease)}
.hero-desk .win.top .fw,.hero-desk .hero-ghost.top .fw{box-shadow:0 50px 110px rgba(0,0,0,.6),0 4px 14px rgba(0,0,0,.3),0 0 0 1px rgba(25,165,255,.45)}
.hero-desk .win.dragging .fw{box-shadow:0 70px 140px rgba(0,0,0,.7),0 6px 18px rgba(0,0,0,.35),0 0 0 2px rgba(25,165,255,.7);transform:scale(1.012)}
.hero-desk .win:focus{outline:none}
.hero-desk .win:focus-visible .fw{box-shadow:0 0 0 3px var(--blue),0 40px 90px rgba(0,0,0,.55)}
/* one type scale across the desk: window width still nudges the size, but only between 9.4px and 12px */
.hero-desk .fw-in{font-size:clamp(9.4px,calc(3.2px + 100cqw / 48),12px)}
.hero-desk .fw-bar{cursor:grab}
/* switching sets is one crossfade, the same for an automatic switch and a visitor's pick (timings live in hero.js and
   come from the site tokens). The new windows ease in, a few px low and a touch small, staggered back to front; the old
   ones stay where they are, above them, as .hero-ghost (no longer windows to site.js, so they never count, drag or
   reopen; never re-inserted, so nothing inside them replays) and ease out from what they show a beat later, so each
   spot always holds one window or the other. Replaces site.css's .win popin for this desk only. */
.hero-desk.desk .win{--hero-dy:10px;--hero-s:.985;opacity:0;transform:translateY(var(--hero-dy)) scale(var(--hero-s))}
.hero-desk.desk .win.in{animation:hero-in var(--t-in) var(--ease-io) both}
@keyframes hero-in{to{opacity:1;transform:none}}   /* starts from the resting style above */
/* first load: the same entrance, a little longer and from a little lower, with the long stagger site.js gives it */
.hero-desk.desk .win.hero-first{--hero-dy:24px;--hero-s:.975}
.hero-desk.desk .win.in.hero-first{animation-duration:.9s;animation-timing-function:var(--ease-soft)}
.hero-desk .hero-ghost{position:absolute;border-radius:9px;color:#1d2433;user-select:none;pointer-events:none;animation:hero-out var(--t-out) var(--ease-io) forwards}
@keyframes hero-out{to{opacity:0;transform:translateY(-6px) scale(.985)}}

/* close control: the window's x, a real button */
.hero-desk .fw-ctl{opacity:1;gap:.75em}
.hero-desk .fw-ctl i{opacity:.55}
.hero-desk .fw-ctl .c{appearance:none;-webkit-appearance:none;display:block;position:relative;width:1.7em;height:1.7em;margin:0 -.45em 0 -.2em;padding:0;border:0;border-radius:50%;background:transparent;color:inherit;opacity:.6;cursor:pointer;font:inherit}
.hero-desk .fw-ctl .c::before,.hero-desk .fw-ctl .c::after{content:"";position:absolute;left:50%;top:50%;width:.95em;height:2px;background:currentColor;transform:translate(-50%,-50%) rotate(45deg)}
.hero-desk .fw-ctl .c::after{transform:translate(-50%,-50%) rotate(-45deg)}
.hero-desk .fw-ctl .c:hover{opacity:1;background:#ff5f57;color:#fff}
.hero-desk .fw-ctl .c:focus-visible{opacity:1;outline:2px solid var(--blue);outline-offset:1px}

/* window content helpers */
.hero-desk button.fw-btn{border:0;font-family:inherit;cursor:pointer;transition:background .2s,transform .15s}
.hero-desk button.fw-btn:hover{background:#0d4ea6}
.hero-desk button.fw-btn:active{transform:scale(.97)}
.hero-desk button.fw-btn:disabled{background:#8a94a6;cursor:default}
.hero-desk button.fw-btn.ghost:hover{background:#f4f6fa;color:#3b4456}
.hero-desk button.fw-btn.ghost:disabled{background:#fff;color:#c7cfdb;border-color:#e3e8f0}
.hero-desk button.fw-btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.hero-on .hero-desk .hero-act:not(:disabled){animation:hero-ring 2.4s ease-out infinite}
/* the desk presses its own action button once per industry when the visitor has not: a hand taps it, the button dips */
.hero-desk button.fw-btn.hero-act{position:relative}
/* The hand sits on the window, not in the button, so the button's new label never restarts it. hero.js sets its left,
   top and font-size from the button. 1.5 s: it glides in (0 to .54 s), presses (.54 to .81 s, the press lands at .6 s),
   rests, then fades away by 1.5 s. */
.hero-tap{position:absolute;z-index:2;width:2.6em;height:2.6em;color:#0B2B66;pointer-events:none;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35));animation:hero-tap 1.5s linear forwards}
.hero-tap path{fill:#fff}
@keyframes hero-tap{
  0%{opacity:0;transform:translate(1.4em,1.2em);animation-timing-function:cubic-bezier(.45,0,.2,1)}
  36%{opacity:1;transform:none;animation-timing-function:ease-in-out}
  44%{transform:translate(-.08em,-.12em) scale(.88);animation-timing-function:ease-in-out}
  54%{transform:none}
  72%{opacity:1;transform:none;animation-timing-function:ease-in-out}
  100%{opacity:0;transform:translate(.5em,.6em)}}
/* a visitor's own press while the hand is on its way: the hand just fades */
.hero-tap.hero-tap-off{animation:hero-tap-off var(--t-text) ease-in-out forwards}
@keyframes hero-tap-off{to{opacity:0}}
.hero-desk button.fw-btn.hero-press{animation:hero-dip .4s ease-in-out}
@keyframes hero-dip{35%{transform:scale(.93);background:#0d4ea6}}
@keyframes hero-ring{0%{box-shadow:0 0 0 0 rgba(25,165,255,.6)}70%,100%{box-shadow:0 0 0 .7em rgba(25,165,255,0)}}
.hero-desk .fw-f.hero-sp2{grid-column:span 2}
.hero-desk .fw-f.hero-sp3{grid-column:span 3}
.hero-desk .fw-f.hero-link{color:#1f6fa8}
.hero-desk .fw-grid td .chip{font-size:.92em;padding:.05em .5em}
.hero-desk .fw-grid tr.sel td .chip{box-shadow:0 0 0 1px rgba(255,255,255,.5)}
.hero-desk .fw-grid tr.hero-new td{animation:fwflash 1.4s ease-out}
.hero-desk .fw-grid tr.sel td.fw-hl{animation-name:hero-selflash}
@keyframes hero-selflash{0%{background:#19A5FF}100%{background:#0d4ea6}}
.hero-desk .chip.hero-chpop{animation:hero-chpop .7s var(--ease)}
@keyframes hero-chpop{0%{transform:scale(1);box-shadow:0 0 0 0 rgba(25,165,255,.7)}35%{transform:scale(1.18)}100%{transform:scale(1);box-shadow:0 0 0 .6em rgba(25,165,255,0)}}
.hero-desk .fw-body.hero-flush{padding:0}
.hero-desk .fw-foot b{color:#1d2433}
.hero-tot{margin-left:auto;font-variant-numeric:tabular-nums}
.hero-tot + .fw-btn{margin-left:.4em}
.hero-desk .fw-foot .chip{font-size:.92em}
.hero-desk .fw-h{display:flex;align-items:baseline;justify-content:space-between;gap:1em}
.hero-desk .fw-h small{font-size:.7em;color:#8a94a6}
.hero-mut{color:#8a94a6}
.hero-kpi{display:flex;align-items:baseline;gap:.6em;margin:.1em 0 .5em}
.hero-kpi b{font-size:2.1em;font-weight:300;letter-spacing:-.02em;color:#1d2433;font-variant-numeric:tabular-nums;line-height:1.1}
.hero-kpi span{font-size:.85em;color:#5a6478}
.hero-kpi .hero-up{margin-left:auto;font-size:.8em;font-weight:600;color:#2e9e5b}
.hero-svg{display:block;width:100%;height:auto;overflow:visible}
.hero-svg text{font-family:"Segoe UI","Open Sans",Arial,sans-serif}
.hero-svg .hero-bar-r{transition:y .6s var(--ease),height .6s var(--ease)}
.hero-split{display:grid;grid-template-columns:38% 1fr;gap:.8em;align-items:start}
.hero-img{border-radius:6px;background:linear-gradient(160deg,#eef2f8,#dfe6f1);aspect-ratio:1;display:grid;place-items:center;overflow:hidden}
.hero-img svg{width:78%;height:auto}
.hero-tags{display:flex;gap:.35em;flex-wrap:wrap;margin-top:.1em}
.hero-desk .chip.hero-ol{background:#fff;color:#1565c0;box-shadow:inset 0 0 0 1px #9cc0ea}

/* storefront product page (commerce) */
.hero-addr{display:flex;align-items:center;gap:.5em;margin:.55em .9em 0;padding:.3em .7em;border-radius:99px;background:#f1f4f9;color:#5a6478;font-size:.78em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero-addr i{flex:none;width:.7em;height:.8em;border:1.5px solid #8a94a6;border-radius:.2em .2em .15em .15em;position:relative;top:.05em}
.hero-pdp{display:flex;flex-direction:column;align-items:flex-start;gap:.35em;min-width:0}
.hero-pdp small{font-size:.72em;letter-spacing:.08em;text-transform:uppercase;color:#8a94a6;font-weight:600}
.hero-pdp b{font-size:1.15em;font-weight:600;color:#1d2433;line-height:1.2}
.hero-price{font-size:1.25em;font-weight:300;color:#1d2433;font-variant-numeric:tabular-nums}
.hero-sw{display:flex;gap:.35em}
.hero-sw i{width:1em;height:1em;border-radius:50%;box-shadow:0 0 0 1px #fff,0 0 0 2px #c7cfdb}
.hero-sw i:first-child{box-shadow:0 0 0 1px #fff,0 0 0 2px #1565c0}
.hero-stock{display:flex;align-items:center;gap:.4em;font-size:.82em;color:#2e9e5b;font-weight:600;font-variant-numeric:tabular-nums;border-radius:3px;padding:0 .2em;margin-left:-.2em}
.hero-stock i{width:.5em;height:.5em;border-radius:50%;background:#3cb98a}
.hero-cart{display:inline-flex;align-items:center;justify-content:center;width:100%;height:2.2em;border-radius:4px;background:#1d2433;color:#fff;font-weight:600;font-size:.85em}

/* check lists */
.hero-list{list-style:none;margin:0;padding:0;font-size:.92em}
.hero-list li{display:flex;align-items:center;gap:.6em;padding:.42em 0;border-bottom:1px solid #eef1f6}
.hero-list li:last-child{border-bottom:0}
.hero-list li span:last-child{margin-left:auto;color:#8a94a6;font-size:.9em;font-variant-numeric:tabular-nums}
.hero-cb{flex:none;width:1.05em;height:1.05em;border:1.5px solid #9aa5b8;border-radius:3px;position:relative;transition:background .3s,border-color .3s}
.hero-cb.on{background:#1565c0;border-color:#1565c0}
.hero-cb.on::after{content:"";position:absolute;left:.3em;top:.08em;width:.28em;height:.55em;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.hero-todo li.done .hero-lt{color:#8a94a6;text-decoration:line-through}
.hero-prog{height:.45em;border-radius:99px;background:#e3e8f0;overflow:hidden;margin:.2em 0 .6em}
.hero-prog i{display:block;height:100%;width:var(--p,0%);background:#1565c0;border-radius:inherit;transition:width .6s var(--ease)}

/* timelines (dock doors, technicians) */
.hero-gantt{font-size:.82em}
.hero-gh,.hero-gr{display:grid;grid-template-columns:5.6em 1fr;align-items:center}
.hero-gh{color:#8a94a6;margin-bottom:.25em}
.hero-gh div{display:flex;justify-content:space-between}
.hero-gr{border-top:1px solid #eef1f6;height:2.35em}
.hero-gr > span{color:#3b4456;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero-gt{position:relative;height:1.75em;background:repeating-linear-gradient(90deg,#eef1f6 0 1px,transparent 1px calc(100% / var(--n,6)))}
.hero-gt i{position:absolute;top:0;bottom:0;border-radius:3px;font-style:normal;color:#fff;font-weight:600;font-size:.92em;padding:0 .45em;display:flex;align-items:center;white-space:nowrap;overflow:hidden;background:#2a4c86}
.hero-gt i.b{background:#1565c0}.hero-gt i.g{background:#3cb98a}.hero-gt i.y{background:#e6c13a;color:#3b2f00}.hero-gt i.s{background:#8a94a6}
.hero-gt i.hero-new{animation:hero-grow .7s var(--ease) both;transform-origin:left}
@keyframes hero-grow{from{transform:scaleX(0);opacity:0}to{transform:none;opacity:1}}
.hero-now{position:absolute;top:-.2em;bottom:-.2em;width:2px;background:#19A5FF;border-radius:2px}

/* events timeline */
.hero-ev{list-style:none;margin:0;padding:0 0 0 1.1em;position:relative;font-size:.88em}
.hero-ev::before{content:"";position:absolute;left:.32em;top:.6em;bottom:.6em;width:2px;background:#e3e8f0}
.hero-ev li{position:relative;padding:.3em 0 .35em}
.hero-ev li::before{content:"";position:absolute;left:-1.02em;top:.75em;width:.6em;height:.6em;border-radius:50%;background:#fff;border:2px solid #9aa5b8;box-sizing:border-box}
.hero-ev li:first-child::before{background:#1565c0;border-color:#1565c0}
.hero-ev b{font-weight:600;color:#1d2433}
.hero-ev span{display:block;color:#8a94a6;font-size:.9em}
.hero-ev li.hero-new{animation:fwflash 1.4s ease-out}

/* rooms board */
.hero-rooms{display:grid;grid-template-columns:repeat(3,1fr);gap:.45em}
.hero-room{border:1px solid #e3e8f0;border-left:.3em solid #c7cfdb;border-radius:4px;padding:.4em .5em;font-size:.82em;line-height:1.3;min-height:3.4em;transition:border-color .4s,background .4s}
.hero-room b{display:block;font-size:.9em;color:#8a94a6;font-weight:600}
.hero-room span{display:block;color:#1d2433;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero-room.busy{border-left-color:#1565c0;background:#f4f8fe}
.hero-room.clean{border-left-color:#e6c13a}
.hero-wait{display:flex;justify-content:space-between;font-size:.85em;color:#5a6478;margin-top:.55em}
.hero-wait b{color:#1d2433}

/* shipping label */
.hero-label{border:1.5px solid #1d2433;border-radius:3px;font-size:.86em;line-height:1.3;color:#111}
.hero-label > div{padding:.45em .6em;border-bottom:1.5px solid #1d2433}
.hero-label > div:last-child{border-bottom:0}
.hero-label small{display:block;font-size:.72em;letter-spacing:.08em;font-weight:700;color:#444}
.hero-label strong{font-size:1.05em}
.hero-lrow{display:flex;justify-content:space-between;align-items:center;gap:.5em}
.hero-lbig{font-size:2em;font-weight:800;letter-spacing:-.02em;line-height:1}
.hero-label svg{display:block;width:100%;height:3.6em}
.hero-trk{text-align:center;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.86em;letter-spacing:.06em;margin-top:.2em}

/* aging bars */
.hero-hbars{display:grid;gap:.4em;font-size:.85em}
.hero-hbars div{display:grid;grid-template-columns:4.4em 1fr 5.4em;align-items:center;gap:.5em}
.hero-hbars span:first-child{color:#5a6478}
.hero-hbars i{display:block;height:1em;border-radius:2px;background:#2a4c86;width:var(--v);transition:width .6s var(--ease)}
.hero-hbars span:last-child{text-align:right;font-variant-numeric:tabular-nums}

/* narrow windows drop optional columns */
@container (max-width:300px){.hero-o{display:none!important}}

/* reveal sizes */
/* laptop heights: shrink the headline a little and tighten the gaps so the industry prompt and chips sit above the fold */
@media (min-width:901px) and (max-height:1000px){
  .hero{padding-top:96px}
  .hero h1{font-size:clamp(54px,min(10vw,14vh),150px)}
  .hero-type{gap:18px}
  .hero-stage{margin-top:36px}
}
@media (max-width:1100px){
  .hero-hint{max-width:none}   /* on its own row under the chips here, so every line fits on one */
  .hero-desk.desk{height:680px}
  .hero-desk.desk .win{width:min(calc(var(--w,30%) * 1.16),94%)}
  .hero-live{display:none}
}
@media (max-width:900px){
  .hero{padding-top:110px}
  .hero-strike{font-size:.62em;white-space:nowrap}
  .hero-stage{margin-top:48px}
  .hero-desk.desk{height:600px}
}
@media (max-width:600px){
  .hero{padding-bottom:48px}
  .hero-stage{margin-top:40px}
  .hero-bar{margin-bottom:12px;gap:10px}
  .hero-pick{width:calc(100% + 48px);margin-inline:-24px;gap:12px}
  .hero-ask{padding-inline:24px}
  .hero-ask span{display:block}
  /* the chips scroll sideways on phones; the padding keeps the light ring and the breathing chip from being clipped */
  .hero-scroll{width:100%;overflow-x:auto;scrollbar-width:none;padding:7px 24px}
  .hero-scroll::-webkit-scrollbar{display:none}
  .hero-chips{flex:none;width:max-content}
  .hero-hand{margin-left:8px}
  .hero-chip{height:34px;padding:0 13px;font-size:13px}
  .hero-hint{font-size:15px}
  .hero-desk.desk{height:700px}
  .hero-desk.desk .win{width:var(--w-sm,86%)}
  .hero-desk .fw-in{font-size:max(10.2px,calc(100cqw / 29))}
  .hero-desk{--tb-strip:28px;--tb-tool:30px}
  .hero-desk .tb-tab{flex-basis:170px;font-size:11px}
  .hero-desk .tb-omni{font-size:11px;padding:0 10px}
  .hero-counter{gap:10px;font-size:12px}
  .hero-counter button{padding:0 11px}
  .hero-foot{font-size:11px;margin-top:14px}
  /* phone cascade: the next window starts about 28px below a title bar, so the headline number sits on one short line and is never cut through */
  .hero-desk .hero-kpi{margin:0 0 .45em;line-height:1}
  .hero-desk .hero-kpi b{font-size:1.3em;line-height:1}
}
@media (prefers-reduced-motion:reduce){
  .hero-strike::after{transform:scaleX(1)}
  .hero-desk .win .fw{transition:none}
  .hero-desk.desk .win,.hero-desk.desk .win.in{opacity:1;transform:none;animation:none}
  .hero-tap,.hero-desk button.fw-btn.hero-press,.hero-xf-in,.hero-chip.hero-was::after{animation:none}
  .hero-xf-was,.hero-chip.hero-was::after{display:none}
}