/* The still page: what a visitor sees when the motion does not run (scripts blocked, reduced motion, ?still=1). The boot script adds `js` to <html> only when the
   motion runs, so "no js class" IS the still page and every rule here sits under `html:not(.js)`: with `js` on, none of this applies and the page computes as before.
   The mockup got this look from its own script (c_motion.js, the `still` branch, with the stylesheet's reduced-motion block forced on); here the server writes the
   state each scene rests in (data-rest="off" on what is not shown, `on` on the first tab, and so on) and this file does the rest.
   Rules that repeat a rule of the other stylesheets (the reduced-motion block) are written under :where(html:not(.js)): the prefix then adds no specificity, so each wins
   or loses against the section rules exactly as the original did. Rules that replace what the script set inline (opacity, transforms, sizes) use plain html:not(.js).
   OLDER BROWSERS (brief section 7.1: Chrome and Edge 100+, Safari 15, iOS 15, Firefox ESR). What the scaling and the dots need is new (container units, tan(atan2()),
   mod(), round(), :has(), zoom, scroll-initial-target), so every rule that uses one sits inside an @supports for that very feature (test/render-still.test.mjs holds
   this) and the rule before it is the plain fallback: each replica frame scaled by a fixed number for its band of widths (no scrolling in it); the report pages at a fixed
   size; the 400 dots and their labels left out (the key, the figures and the lists stay); no scrolling to a frame's banner (it shows from its top). Every section is
   readable without any of them (node scripts/compare-still.mjs --legacy loads this file with every @supports block taken out and checks it). */

/* ---------- 1. the reduced-motion block: every step of a scene on the page at once, in order, and no looping movement ---------- */
:where(html:not(.js)) .sc-in{height:auto;min-height:0;padding:96px var(--m) 30px}
:where(html:not(.js)) .sc-copy>.cp{grid-area:auto;margin-bottom:30px}
:where(html:not(.js)) #reveal.jig{animation:none}
:where(html:not(.js)) .tk{animation:none}
:where(html:not(.js)) .cue .cb,:where(html:not(.js)) .scue svg{animation:none}
:where(html:not(.js)) .pk .pl-g,:where(html:not(.js)) .pk .pl-h,:where(html:not(.js)) .em,:where(html:not(.js)) .pk.em-open .em,:where(html:not(.js)) .pk.em-open .pl-h{transition:none}

/* ---------- 2. what the server marked as not shown at rest (a showcase picture that is not the first, the frame of a step that is not the last) ---------- */
html:not(.js) [data-rest="off"]{opacity:0;visibility:hidden}

/* ---------- 3. a replica in its frame: drawn at its own width, scaled to the box it sits in (what fitScaled did) ---------- */
/* fallback: a fixed scale for each band of widths (--s = the narrowest frame the band can have, in px, over the replica's own width, in px: a plain number divided by a plain number,
   which every browser can do). The numbers are the frames' widths measured at each band's lower edge: --fw most frames, --fo the opening's, --fp its phone frame. A frame that
   would scroll does not (a scaled replica would leave its scrollable height unscaled). A replica of a width that is not listed shows at its natural width, clipped by its frame. */
html:not(.js){--fw:280;--fo:280;--fp:280}
@media (min-width:360px){html:not(.js){--fw:320;--fo:320;--fp:320}}
@media (min-width:400px){html:not(.js){--fw:360;--fo:360;--fp:360}}
@media (min-width:480px){html:not(.js){--fw:440;--fo:440;--fp:440}}
@media (min-width:560px){html:not(.js){--fw:520;--fo:520;--fp:520}}
@media (min-width:640px){html:not(.js){--fw:560;--fo:560;--fp:540}}
@media (min-width:768px){html:not(.js){--fw:672;--fo:672;--fp:540}}
@media (min-width:840px){html:not(.js){--fw:744;--fo:744;--fp:540}}
@media (min-width:910px){html:not(.js){--fw:814;--fo:814;--fp:540}}
@media (min-width:960px){html:not(.js){--fw:568;--fo:494;--fp:494}}
@media (min-width:1100px){html:not(.js){--fw:661;--fo:576;--fp:540}}
@media (min-width:1280px){html:not(.js){--fw:781;--fo:681;--fp:540}}
@media (min-width:1440px){html:not(.js){--fw:824;--fo:718;--fp:540}}
html:not(.js) .scaled[data-w="1200"]{--n:1200}
html:not(.js) .scaled[data-w="1440"]{--n:1440}
html:not(.js) .scaled[data-w="640"]{--n:640}
html:not(.js) .scaled{--s:calc(var(--fw) / var(--n));transform:translateY(calc(var(--y,0px) * var(--s) * -1)) scale(var(--s))}
html:not(.js) .sh .scaled{--s:calc(var(--fo) / var(--n))}
html:not(.js) .shm .scaled{--s:calc(var(--fp) / var(--n))}
html:not(.js) .fscroll>.scaled{position:relative}
html:not(.js) .fview.scrolls{overflow:hidden}
@supports (container-type:inline-size) and (width:calc(1px * tan(atan2(1px,1px)))){
  html:not(.js) .fview:not(.scrolls),html:not(.js) .fscroll,html:not(.js) .tps.own{container-type:inline-size}
  html:not(.js) .scaled{--k:tan(atan2(100cqw,var(--w)));transform:translateY(calc(var(--y,0px) * var(--k) * -1)) scale(var(--k))}
}
/* a frame that scrolls is scaled by zoom (a transform would leave its scrollable height unscaled) and the visitor can scroll on from where it rests (not the display frames) */
@supports (zoom:1) and (container-type:inline-size) and (width:calc(1px * tan(atan2(1px,1px)))){
  html:not(.js) .fscroll>.scaled{display:flow-root;transform:none;zoom:var(--k)}
  html:not(.js) .fview.scrolls{overflow-y:auto}
  html:not(.js) .fa .fview.scrolls,html:not(.js) .fm .fview.scrolls{overflow:hidden}
}

/* ---------- 4. the opening: the first tab's bar is full ---------- */
html:not(.js) .shw-tabs button.on i{transform:scaleX(1)}

/* ---------- 5. hubs: the last step shows its hub whole, which takes the wall of headlines away ---------- */
html:not(.js) #wall .wl{opacity:0}

/* ---------- 6. frames the motion scrolls by itself: the newsletter to its banner, the whitepaper to its key findings (without it a frame shows from its top) ---------- */
@supports (scroll-initial-target:nearest){
  html:not(.js) .fm .ml-ban,html:not(.js) .wpf2 .wp-kf{scroll-initial-target:nearest}
  html:not(.js) .fm .fview.scrolls{scroll-padding-top:calc(6px + 25%)}
  html:not(.js) .wpf2 .fview.scrolls{scroll-padding-top:6px}
}

/* ---------- 7. stacked copy: every step but the last was left 8px up when the motion handed over to the next (copyTo: y -8); readers on a phone rests on the
   third step (the market step is not played), so the copy block left behind is the fourth, not the third ---------- */
@supports selector(:has(*)){
  html:not(.js) .sc-copy>.cp:has(~.cp){transform:translateY(-8px)}
  @media (max-width:959px){
    html:not(.js) #readers .cp[data-k="2"]{transform:none}
    html:not(.js) #readers .cp[data-k="3"]{transform:translateY(-8px)}
  }
}

/* ---------- 8. the advert slots: filled (the motion wipes the brand's advert over the grey placeholder and fades the placeholder's size label) ---------- */
html:not(.js) .slot .dim{opacity:0}

/* ---------- 9. the report: each A4 page fitted whole into its box (what fitScaled did: k = the smaller of the two fits, less 4px each side) ---------- */
/* fallback: a fixed size for each width (a desktop page is 370 x 524, a phone's 240 x 340) */
html:not(.js) .rep-pg{width:370px;height:524px}
html:not(.js) .rep-sc{transform:scale(.4666)}
@media (max-width:959px){
  html:not(.js) .rep-pg{width:240px;height:340px}
  html:not(.js) .rep-sc{transform:scale(.3028)}
}
@supports (container-type:size) and (width:calc(1px * tan(atan2(1px,1px)))){
  html:not(.js) .rep-st{container-type:size}
  html:not(.js) .rep-pg{--k:min(tan(atan2(100cqw - 8px,794px)),tan(atan2(100cqh - 8px,1123px)));width:calc(794px * var(--k));height:calc(1123px * var(--k))}
  html:not(.js) .rep-sc{transform:scale(var(--k))}
}

/* ---------- 10. the readers: the dots rest where the last step puts them (c_motion.js dotPos). From 960px that is a column for each market, below it a column for each
   company type. The server dealt the dots (--mg/--mn market and place in it, --tg/--tn company type and place) and counted the groups and rows (--mG --mR --tG --tR, on the stage).
   Fallback: the 400 dots and their labels are left out (the key, the figures and the lists beside them stay) ---------- */
html:not(.js) #readers .dkey{opacity:1}
html:not(.js) #dots{display:none}
@supports (container-type:size) and (width:mod(5px,3px)) and (width:round(down,5px,3px)){
  html:not(.js) #dots{display:block}
  html:not(.js) #readers .sc-stage{container-type:size;--W:100cqw;--H:calc(100cqh - 40px)}
  html:not(.js) #dots .dot{width:calc(var(--p1) * .66);height:calc(var(--p1) * .66)}
  html:not(.js) #dots .dlab{opacity:1}
  @media (min-width:960px){
    html:not(.js) #readers .sc-stage{--G:var(--mG);--R:var(--mR);--wide:4;--gapu:1.6;--lab:84px;
      --p1:min(16px,var(--W) / (var(--G) * var(--wide) + (var(--G) - 1) * var(--gapu)),(var(--H) - var(--lab) - 40px) / var(--R));
      --cw:calc(var(--wide) * var(--p1));--gp:calc(var(--gapu) * var(--p1));
      --x0:calc((var(--W) - (var(--G) * var(--cw) + (var(--G) - 1) * var(--gp))) / 2);
      --base:min(var(--H) - var(--lab),(var(--H) - var(--lab)) / 2 + var(--R) * var(--p1) / 2 + 20px)}
    html:not(.js) #dots .dot{left:calc(var(--x0) + var(--mg) * (var(--cw) + var(--gp)) + mod(var(--mn),4) * var(--p1));top:calc(var(--base) - (round(down,var(--mn) / 4,1) + 1) * var(--p1))}
    html:not(.js) #dots .dot.mf{background:#C8102E}
    html:not(.js) #dots .dlab.dt,html:not(.js) #dots .dlab.dt .pc .apac-i{visibility:hidden;opacity:0}
  }
  @media (max-width:959px){
    html:not(.js) #readers .sc-stage{--G:var(--tG);--R:var(--tR);--wide:8;--gapu:3.2;--lab:70px;
      --p1:min(16px,var(--W) / (var(--G) * var(--wide) + (var(--G) - 1) * var(--gapu)),(var(--H) - var(--lab) - 40px) / var(--R));
      --cw:calc(var(--wide) * var(--p1));--gp:calc(var(--gapu) * var(--p1));
      --x0:calc((var(--W) - (var(--G) * var(--cw) + (var(--G) - 1) * var(--gp))) / 2);
      --base:min(var(--H) - var(--lab),(var(--H) - var(--lab)) / 2 + var(--R) * var(--p1) / 2 + 20px)}
    html:not(.js) #dots .dot{left:calc(var(--x0) + var(--tg) * (var(--cw) + var(--gp)) + mod(var(--tn),8) * var(--p1));top:calc(var(--base) - (round(down,var(--tn) / 8,1) + 1) * var(--p1))}
    html:not(.js) #dots .dot.tf{background:#C8102E}
    html:not(.js) #dots .dlab.dm,html:not(.js) #dots .dlab.dm .pc .apac-i{visibility:hidden;opacity:0}
  }
  html:not(.js) #dots .dlab{left:calc(var(--x0) + var(--i) * (var(--cw) + var(--gp)));top:calc(var(--base) + 12px);width:calc(var(--cw) + var(--gp) * .8)}
  html:not(.js) #readers .dkey{left:var(--x0);top:calc(var(--base) + var(--lab) + 4px)}
}

/* the print list: every position has lit up by the last step */
html:not(.js) .plist li{color:var(--ink)}

/* the objective: every phrase the recommendations answer is picked out (the motion draws the highlight in, --a 0 to 1) */
html:not(.js) mark.kw{--a:1}

/* the package price and the saving: nobody can press reveal here, so the real figures show and the blurred stand-ins go (packages.css hides the real ones when scripts run) */
html:not(.js) .bl{display:none!important}