/* #open: claim, sub, buttons, the showcase window with its tabs. */
/* ---------- 0. the opening: the showcase ---------- */
#open .sc-in{grid-template-rows:1fr}
.hero-copy{grid-column:1/6;position:relative;z-index:3}
.bmk{height:62px;display:flex;align-items:center;margin:0 0 30px}
.bmk .an-logo{height:100%;max-width:100%}
.bmk .an-t{font:700 clamp(40px,4.2vw,62px)/1 var(--disp);letter-spacing:-.025em;color:var(--brand)}
.bmk-g .an-t{border-bottom:3px solid var(--brand);padding-bottom:6px}
#claim{margin:0;font:700 clamp(32px,3.5vw,54px)/1.05 var(--disp);letter-spacing:-.022em;color:var(--ink);text-wrap:balance}
#claim>div[aria-hidden],.h2>div[aria-hidden]{padding:0 .14em .16em 0;margin:0 -.14em -.16em 0}
#sub{margin:22px 0 0;max-width:28em;font:400 clamp(16px,1.25vw,18px)/1.55 var(--sans);color:var(--text)}
.acts{display:flex;flex-wrap:wrap;align-items:center;gap:14px 14px;margin-top:30px}
.shw{grid-column:6/13;position:relative;align-self:center;height:calc(100vh - 190px);min-height:520px;max-height:740px;display:flex;flex-direction:column}
.shw-for{margin:0 0 12px;text-align:right;font:500 15px/1.3 var(--sans);color:var(--grey)}
.shw-for b{color:var(--ink);font-weight:650}
.shw-view{position:relative;flex:1;min-height:0}
.js .shw-view .frame{opacity:0;visibility:hidden}
.shw-view .frame .fview{background:#fff}
.shw-view .prn{position:absolute;inset:0;background:#E9E5DC;border-radius:10px;box-shadow:0 0 0 1px var(--line),var(--sh);overflow:hidden;display:flex;align-items:center;justify-content:center}
.js .shw-view .prn{opacity:0;visibility:hidden}
/* A slow start. The claim, the header, the independence line, the first picture and its tabs, caption and label are held back until `go` so that they arrive in the mockup's order (base.css). When `go` is late
   they fade in by themselves, as a CSS animation of opacity (the one thing a busy main thread cannot hold up), starting --slow-in after the first style is applied. If `go` comes
   while they are fading, sections/opening.js carries on from the opacity they have reached and finishes the opening from there (no restart, no snap); if it comes before the fade
   begins (a normal connection) none of this is seen and the approved sequence plays. --slow-in is the one value for the delay: 2.5 s is later than `go` on an ordinary 4G connection
   (40 ms, 500 KB/s: about 1.2 s with the page compressed, about 2.9 s sent plain) so that connection gets the sequence, and sooner than a slow phone's 5 s or more. The first picture is
   scaled by the sum still.css does, in container units, since fit.js has not run (a browser without them waits for `go` as before). */
:root{--slow-in:2.5s}
@keyframes slowIn{to{opacity:1}}
html.js:not(.go) .hero-copy>*,html.js:not(.go) .rh,html.js:not(.go) .hero-q,html.js:not(.go) #shwTabs,html.js:not(.go) #shwCap,html.js:not(.go) #shwFor{animation:slowIn .6s ease-out var(--slow-in) forwards}
@supports (container-type:inline-size) and (width:calc(1px * tan(atan2(1px,1px)))){
  html.js:not(.go) #shwView>.frame:not([data-rest="off"]){visibility:visible;animation:slowIn .6s ease-out var(--slow-in) forwards}
  html.js:not(.go) #shwView>.frame:not([data-rest="off"]) .fview{container-type:inline-size}
  html.js:not(.go) #shwView>.frame:not([data-rest="off"]) .scaled{--k:tan(atan2(100cqw,var(--w)));transform:translateY(calc(var(--y,0px) * var(--k) * -1)) scale(var(--k))}
}
.shw-tabs{display:flex;gap:6px 22px;margin-top:16px;flex-wrap:wrap}
.shw-tabs button{all:unset;box-sizing:border-box;cursor:pointer;position:relative;padding:9px 0 12px;font:600 14px/1.2 var(--sans);color:var(--grey);transition:color .2s}
.shw-tabs button:hover{color:var(--ink)}
.shw-tabs button.on{color:var(--ink)}
.shw-tabs button::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:2px;background:var(--line2)}
.shw-tabs button i{position:absolute;left:0;bottom:0;height:3px;width:100%;border-radius:2px;background:var(--red);transform:scaleX(0);transform-origin:0 50%;z-index:1}
.shw-cap{margin:6px 0 0;min-height:24px;font:400 15px/1.5 var(--sans);color:var(--text)}
.shw-view .frame.shm{left:0;right:0;margin:0 auto;width:min(100%,540px)}
.hp-note{position:absolute;z-index:3;font:500 14px/1.35 var(--sans);color:var(--ink);background:#fff;box-shadow:0 0 0 1px var(--line),0 10px 24px rgba(20,22,26,.08);padding:9px 12px;border-radius:4px;white-space:nowrap}
@media (max-width:959px){
  #open .sc-in{padding-top:92px;padding-bottom:20px}
  .hero-copy{margin-bottom:6px}
  .bmk{height:44px;margin-bottom:20px}
  .shw{height:auto;min-height:0;max-height:none;margin-top:28px}
  .shw-view{height:min(96vw,420px);flex:none}
  .shw-tabs{gap:2px 18px}
  .shw-tabs button{font-size:14px}
  .hero-q{display:flex;margin-top:26px}
}

/* touch: the showcase tabs are 44 tall with 8px between rows, and 44 wide however short the word is (6px of invisible padding each side, taken back by the margin, with the
   underline kept to the word; the columns are 22px apart so the boxes are 10px apart) */
@media (pointer:coarse){
  .shw-tabs{gap:8px 22px}
  .shw-tabs button{min-width:44px;padding:15.5px 6px 12px;margin:0 -6px;text-align:center}
  .shw-tabs button::after,.shw-tabs button i{left:6px;right:6px;width:auto}
}
@media (min-width:960px) and (max-height:699px){
  .shw{min-height:0;height:calc(100vh - var(--hh) - 64px)}
}
@media (min-width:960px) and (max-height:699px){@supports (height:100dvh){.shw{height:calc(100dvh - var(--hh) - 64px)}}}