/* site-b.css - shared late-cascade styles (journey2 + reveal-net + floats), extracted
   from the 4 pages. Loads after the locale overrides, exactly like the inline blocks did. */

/* ===== JOURNEY v2 - cinematic full-bleed descent (01 highest, 05 lowest, like the water) ===== */
.journey .j-track{gap:22px;margin-top:64px;align-items:start}
.journey .j-step{position:relative;aspect-ratio:1/1.9;border-radius:18px;overflow:hidden;padding:0;background:#0b2036;border:1px solid rgba(255,255,255,.14);-webkit-backdrop-filter:none;backdrop-filter:none}
.journey .j-step .ji{position:absolute;inset:0;height:100%;margin:0;border-radius:0;transition:transform 1.1s var(--ease);will-change:transform}
html:not(.mfx-on) .journey .j-step:hover .ji{transform:scale(1.07)}
.journey .j-step:focus-visible .ji{transform:scale(1.07)}
.journey .j-step .ji img{width:100%;height:100%;object-fit:cover}
/* readable type always; scrim deepens on hover */
.journey .j-step::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(8,24,40,.92) 0%,rgba(8,24,40,.52) 40%,rgba(8,24,40,0) 72%);pointer-events:none}
.journey .j-step::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(8,24,40,.94) 0%,rgba(8,24,40,.55) 44%,rgba(8,24,40,.08) 78%);opacity:0;transition:opacity .55s var(--ease);pointer-events:none}
.journey .j-step:hover::after,.journey .j-step:focus-visible::after{opacity:1}
.journey .j-step .jb{position:absolute;inset-inline:0;bottom:0;z-index:2;padding:22px 22px 24px;text-align:start}
.journey .j-step .jn{font-family:var(--display);font-size:46px;line-height:1;letter-spacing:.1em;color:#fff;opacity:.5;margin-bottom:10px}
.journey .j-step h3{font-size:clamp(23px,1.9vw,29px);margin-bottom:0;color:#fff;text-wrap:balance}
.journey .j-step .jb p{margin-top:10px;color:#d9e5f0;font-size:15.5px;line-height:1.62;opacity:0;transform:translateY(12px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.journey .j-step:hover .jb p,.journey .j-step:focus-visible .jb p{opacity:1;transform:none}
.journey .j-step:focus-visible{outline:2px solid var(--glacial);outline-offset:3px}
@media(hover:none){.journey .j-step .jb p{opacity:1;transform:none}}
/* the descent + staggered entrance, desktop only */
@media(min-width:761px){
  .journey .j-step:nth-child(2){margin-top:30px}
  .journey .j-step:nth-child(3){margin-top:60px}
  .journey .j-step:nth-child(4){margin-top:90px}
  .journey .j-step:nth-child(5){margin-top:120px}
  .journey .j-step[data-reveal]{transform:translateY(64px) scale(.965)}
  .journey .j-step.is-in[data-reveal]{transform:none}
  .journey .j-step.is-in[data-reveal]{transition-duration:1.1s}
  .journey .j-step.is-in:nth-child(2){transition-delay:.13s}
  .journey .j-step.is-in:nth-child(3){transition-delay:.26s}
  .journey .j-step.is-in:nth-child(4){transition-delay:.39s}
  .journey .j-step.is-in:nth-child(5){transition-delay:.52s}
}
@media(max-width:760px){
  .journey .j-step{aspect-ratio:4/5;width:100%}
  .journey .j-step .jb p{opacity:1;transform:none}
  .journey .j-step .ji{position:absolute;inset:0;height:100%}
  .journey .j-step .jb{padding:20px 22px 22px}
  .journey .j-step h3{font-size:27px}
  .journey .j-step .jb p{font-size:16px}
}
@media(prefers-reduced-motion:reduce){.journey .j-step .ji,.journey .j-step::after,.journey .j-step .jb p{transition:none}.journey .j-step .jb p{opacity:1;transform:none}.journey .j-step[data-reveal]{transform:none}}
html.a11y-stop-motion .journey .j-step:hover .ji{transform:none}
html.mfx-on #scrollProgress{width:100%;transform:scaleX(0);transform-origin:var(--sp-origin,left) center}
.sec-more{margin-top:18px;font-weight:600}
.sec-more a{color:var(--glacial-deep,#15648F);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}
.sec-more a:hover{color:var(--magenta,#E11A86)}

/* ===== anon-1916 ===== */

body.menu-open #a11yTrigger,body.menu-open #a11yPanel,body.menu-open #cookieBanner{display:none!important}
/* floating buttons fade in only after load + first scroll */
#a11yTrigger{transition:opacity .5s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease)}
body:not(.fabs-ready) #a11yTrigger{opacity:0;visibility:hidden;pointer-events:none}
@media(max-width:600px){body.cookie-open #a11yPanel{display:none!important}body.cookie-open #a11yTrigger{inset-block-end:calc(168px + env(safe-area-inset-bottom))!important}}
#a11yTrigger{inset-inline-start:auto!important;inset-inline-end:22px!important}
@media(min-width:641px){#a11yPanel{inset-inline-start:auto!important;inset-inline-end:22px!important}}

/* ===== PREMIUM PASS =========================================================
   Late-cascade refinement layer. Every rule here is either a correction of a
   measured defect or one of the four upgrades signed off for review. Lives in
   site-b because it must win over the locale blocks and site-a alike. */

/* --- 1 - TYPOGRAPHY ------------------------------------------------------ */
/* Headings inherited the body's 1.65 line-height, which is body leading applied
   to display type. The journey cards showed it worst: 26px text on 40px of lead. */
h3,.j-step h3,.journey .j-step h3,.lead-ok h3{line-height:1.16}
h4{line-height:1.25}
/* Stop orphan words on headings. In Hebrew a single trailing word reads as a
   typo more than it does in Latin, so this is worth the reflow cost. */
:is(h1,h2,h3,.manifesto .big,.sec-head h2,.everyday-copy h2,.awards h2,.contact h2,.hero h1){text-wrap:balance}
:is(p,.lede,.sec-head p,.min-why p,.manifesto p,.everyday-copy p,.faq-a p){text-wrap:pretty}
/* Counters ran proportional figures, so digits slid sideways on every tick while
   animating up to 95.7 / 1,450. Tabular figures hold the column. */
:is(.cn,.source-num,.drop .v,.awards .count b,.min-table td,.cmp-val,.bl-n,.pd-stat b,.tb-item b,.rc-size){
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* --- 2 - VERTICAL RHYTHM ------------------------------------------------- */
/* Section padding sat between 50px and 65px across the whole page, so a chapter
   opening breathed exactly like a dense data table. Now they differ by design. */
#manifesto,#journey,#contact{padding-block:var(--s-8)}
#awards,#drops,#range{padding-block:var(--s-7)}
#analysis,#compare{padding-block:var(--s-6)}
#faq{padding-block:var(--s-6)}
.sec-head{margin-bottom:var(--s-5)}

/* --- 4b - HERO OPENS ON SCROLL ------------------------------------------- */
/* Starts as a framed plate and expands to full bleed over the first stretch of
   scroll. Defaults to fully open so a JS failure degrades to today's hero. */
.hero{--hero-open:1;
  clip-path:inset(calc((1 - var(--hero-open)) * 1.4vw) round calc((1 - var(--hero-open)) * 26px))}
@media(max-width:760px){.hero{clip-path:inset(calc((1 - var(--hero-open)) * 2.6vw) round calc((1 - var(--hero-open)) * 18px))}}

@media(prefers-reduced-motion:reduce){.hero{--hero-open:1}}
html.a11y-stop-motion .hero{--hero-open:1}