/* Tora Pro in space (captain 2026-10-18, after Lusion's Zero Tech: "an intergalactic, interstellar, space-style
   scene that's on brand and shows the prices very simply, with a little parallax and a little dot matrix, the Tora
   logo playing on the dot matrix"; physics pass the same evening). A sky that is itself the dot matrix, a planet whose surface is the site's dot
   matrix (assets/pro-dots.js draws the sky's dots and the twinkling ones that read as stars, the planet and the Tora
   icon flying over it), a sunrise on its rim, and the price said once, simply, in the sky above. */
/* the sky starts from the page's dark at the top, so Everything in Tora runs into it with no edge, and ends in the
   planet's dark at the foot, where Privacy's sky begins */
.pro{background:linear-gradient(#141414,#070a10 30svh,#05080d)!important;padding-bottom:0!important}
.pro .pro-pin{background:radial-gradient(120% 70% at 50% 100%,rgb(11 22 38 / .9),rgb(6 10 18 / .4) 55%,transparent 80%)!important}
.ps-sky{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
/* the planet's body hides the stars behind it; pro-dots.js sets its size and place (--pr, --ptop, --rise) */
/* the planet's body, a little larger than the disk so its edge is a soft atmosphere rather than a crisp line (captain
   2026-10-19: "why do we have such sharp lines"): the dark body to the limb at 92.6%, then thin lit air fading out */
.ps-planet{position:absolute;left:50%;top:calc(var(--ptop,64%) - var(--pr,1200px) * .08);width:calc(var(--pr,1200px) * 2.16);aspect-ratio:1;border-radius:50%;
  transform:translate(-50%,var(--rise,0px));will-change:transform;
  background:radial-gradient(closest-side,#05080d 84%,#08101a 90%,#0e1b2b 92.6%,rgb(52 86 124 / .32) 93.6%,rgb(52 86 124 / .12) 96%,rgb(52 86 124 / 0) 100%)}
/* the sunrise just behind the rim, and the thin lit air along the horizon */
.ps-glow{position:absolute;left:0;right:0;top:var(--ptop,64%);height:0;transform:translateY(var(--rise,0px))}
.ps-glow::before{content:"";position:absolute;left:62%;top:0;width:min(70vw,64rem);height:min(30vw,24rem);transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,rgb(170 205 235 / .5),rgb(110 160 210 / .2) 35%,rgb(80 130 190 / .06) 65%,transparent)}
.ps-glow::after{content:"";position:absolute;left:62%;top:0;width:.5rem;height:.5rem;border-radius:50%;transform:translate(-50%,-50%);
  background:#fff;box-shadow:0 0 1rem .4rem rgb(255 255 255 / .85),0 0 3rem 1.2rem rgb(170 205 235 / .55),0 0 8rem 3rem rgb(110 160 210 / .25)}
/* the dots fade out at the scene's foot over the planet's dark body, which Privacy's sky starts from, so the
   two sections meet with no edge */
.pro canvas.pro-dots{z-index:1!important;mix-blend-mode:normal!important;-webkit-mask:linear-gradient(#000 74%,transparent 98%)!important;mask:linear-gradient(#000 74%,transparent 98%)!important}
/* the price, simply, in the sky: the wordmark, the price, the switch, the button */
.pro .pro-stage{position:absolute!important;left:0;right:0;top:clamp(5.5rem,13svh,8.5rem);z-index:2;display:flex!important;justify-content:center;width:100%!important;max-width:none!important;margin:0!important}
.pro .pro-stage{height:auto!important;align-items:flex-start!important}
.pro .pro-core{transform:none!important;container-type:normal!important;width:max-content;max-width:calc(100vw - 2.5rem);display:grid!important;justify-items:center}
.pro .pro-offer{position:relative!important;left:auto!important;top:auto!important;translate:none!important;margin-top:clamp(1.25rem,2.5svh,2rem)}
.pro .pro-title{font-size:clamp(2.5rem,4.6vw,4.5rem)!important}
/* how it is billed sits beside the price, under "a month", so the price and its billing read as one; the number and
   its label each as wide as their longest, the number set to the right, so picking Yearly never shifts the row under
   the pointer */
.pro .pro-price b{min-width:4.3em;text-align:right}
.pro .pro-price small{display:grid;white-space:nowrap;text-align:left;line-height:1.3;align-self:center;min-width:9.4em}
.pro .pro-billed{font-size:inherit;color:inherit}
/* not one tall column (captain 2026-10-22: "too vertically stacked ... it already feels like it's so high up on the
   screen. I want it to be a little bit more centered"): the lockup, then one row of the switch, the price and the
   button, then the founding line, the whole block centred a little above the middle of the screen (40svh), so the planet's
   horizon (pro-dots.js keeps it under the stage) still has room below it */
.pro .pro-stage{top:40svh;transform:translateY(-50%)}
@media(min-width:1024px){
  .pro .pro-offer:not(#\#){max-width:none;grid-template-columns:auto auto auto;align-items:center;column-gap:clamp(2rem,3vw,2.75rem);row-gap:0;margin-top:clamp(1.75rem,4svh,2.75rem)}
  .pro .pro-price,.pro .pro-cta{margin:0}
  .pro .pro-founding-line{grid-column:1 / -1;margin-top:clamp(1.25rem,2.6svh,1.75rem)}
}
/* the passage into the light (captain 2026-10-18: the planet "carries us into another dimension, the light
   dimension"; 2026-10-19: "travel through dark clouds into lighter clouds", see the planet go, no flash). pro-dots.js
   sets --pd from 0 to 1 over the last half of the pin. The planet rises and dims (pro-dots.js), dark storm clouds
   rise over it, then the same clouds lighten while the pale sky comes up behind them, and the section ends in the
   colour Privacy's sky begins with. Only opacity and transform change. */
.ps-light{position:absolute;inset:0;opacity:clamp(0,calc((var(--pd,0) - .66) / .34),1);
  /* its foot is exactly the colour Privacy starts with, so the two sections meet with no line (captain 2026-10-19) */
  background:linear-gradient(rgb(232 237 242 / 0) 62%,#e8edf2 99%),radial-gradient(90% 70% at 60% 30%,#e9eef3,#dfe6ee 55%,#d6dee8)}
/* a very faint grain over the pale sky dithers its gradients, so none of them can band */
.ps-light::after{content:"";position:absolute;inset:0;background:url(brand/grain-tile.png) 0 0/64px 64px;opacity:.05;mix-blend-mode:overlay}
/* a deep steel dusk under the dark clouds, so the sky is not black behind them */
.ps-dusk{position:absolute;inset:0;opacity:clamp(0,calc((var(--pd,0) - .15) * 2),1);
  background:linear-gradient(#141c27,#223042 50%,#2f3f53)}
/* the clouds: one bank of puffs, dark first and lightening as you go on (two copies cross-fade, the dark one on
   top), rising from below over the planet and filling the screen */
.ps-clouds,.ps-clouds-dark{position:absolute;left:-12%;right:-12%;bottom:-10%;height:120%;z-index:2;pointer-events:none;
  transform:translate3d(0,calc((1 - min(1,var(--pd,0) * 1.6)) * 70%),0)}
.ps-clouds-dark{z-index:2;opacity:calc(clamp(0,calc((var(--pd,0) - .1) * 3),1) * (1 - clamp(0,calc((var(--pd,0) - .58) / .42),1)))}
.ps-clouds{z-index:1;opacity:calc(clamp(0,calc((var(--pd,0) - .52) * 2.1),1) * (1 - clamp(0,calc((var(--pd,0) - .66) / .34),1)))}
/* pro-dots.js paints each bank into a canvas once, with a dither, so no streaks */
.ps-clouds canvas,.ps-clouds-dark canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.pro .pro-stage{z-index:3!important}
/* The fixed price is occluded by the rising planet and cloud bank. */
.pro .pro-stage{opacity:1;translate:none;scale:1;--pb:1;--po:1}
.pro .pro-offer{opacity:1!important;pointer-events:auto}
.pro .pro-title{scale:1}
.pro-behind-planet{position:absolute;inset:0;z-index:3}
.pro .ps-clouds,.pro .ps-clouds-dark{z-index:4}
.pro canvas.pro-clouds-front{display:none;position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none}
.pro-gl canvas.pro-clouds-front{display:block}
/* The CSS fallback uses the same cloud banks, then Privacy's pale sky covers the distant price. */
.pro:not(.pro-gl) .pro-pin::before{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;background:#e8edf2;
  opacity:clamp(0,calc((var(--pd,0) - .6) / .3),1)}
@media(prefers-reduced-motion:reduce){.pro-behind-planet{mask-image:none!important}.privacy2 :is(.p2-flow,.p2-front){display:none}}
/* the light comes from the sunrise: it swells over the horizon before the whole sky turns pale */
.ps-glow{opacity:calc(1 - clamp(0,calc(var(--pd,0) * 2.2),1))}
html:has(.pro.in-light) .bottom-blur{opacity:0}
/* a phone's pin was 165svh, only about half a screen of scroll for the whole scene, so the planet raced and the
   passage came at once (captain 2026-10-19, on his iPhone); it is now longer */
@media(max-width:820px){.pro.pro{height:250svh!important}}
/* the passage into Privacy takes about three times the scroll it had, so it plays slowly however you scroll (captain
   2026-10-19 ~9:15pm: "we still get flash bang ... force the scroll speed to do something slower"); pro-dots.js keeps
   the planet's part as long as before. The page itself uses native scrolling. */
/* Approved passage length: the planet keeps moving while the cloud crossing has room to unfold. */
.pro.pro.pro{--pro-tail-cut:.2;height:500svh!important}
@media(max-width:820px){.pro.pro.pro{height:580svh!important}}
/* the sky's WebGL canvas lies over the planet's dots and draws the passage's storm clouds and light itself; the CSS
   layers below stand in for it only without WebGL */
.pro canvas.pro-sky{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.pro-gl .ps-dusk,.pro-gl .ps-light,.pro-gl .ps-clouds,.pro-gl .ps-clouds-dark{display:none}
@media(max-width:820px){
  .pro .pro-title{font-size:clamp(2.25rem,11.5vw,3.1rem)!important}
  .ps-glow::before{width:120vw;height:50vw}
}

/* Privacy (captain 2026-10-18: the falling pillar is gone, "too close to Huly", and the clouds are light-mode
   clouds, not dark ones). The approved blue sky continues from Pro. Cached cloud layers in look26.js
   span the seam and part around the lock. */
.privacy2.is-light{background:linear-gradient(#e8edf2,#e2e9f0 30svh,#e9eef3 80%,#f3f5f8)!important;z-index:2}
.privacy2.is-light .p2-pin{background:transparent!important}
.privacy2.is-light .p2-pin::before{width:min(70rem,140vw)!important;height:min(70rem,140vw)!important;top:40%!important;
  background:radial-gradient(closest-side,rgb(255 255 255 / .62),rgb(240 245 250 / .42) 38%,rgb(225 234 243 / .2) 62%,transparent)!important}
.privacy2.is-light .privacy-lock{filter:drop-shadow(0 -2px 10px rgb(255 255 255 / calc(var(--p2-glow,0) * .4))) drop-shadow(0 18px 30px rgb(22 32 46 / .35))!important}

/* The cloud bank spans the section handoff, then clears the lock and copy. */
.privacy2 .p2-front{z-index:3}
/* White lower roads remain distinct from the blue sky (captain 2026-10-25). */
/* The fine concentric body lines need the same contrast against the blue sky. */

/* Both planet images are baked, including blur. Scrolling changes only pose and opacity. */
.pro-planet-layer{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none;mask-image:linear-gradient(#000 74%,transparent 98%)}
.pro-planet-art{position:absolute;left:0;top:0;will-change:transform,opacity}
.pro-planet-art img{position:absolute;inset:0;width:100%;height:100%}
.pro-planet-soft{opacity:0}
.pro canvas.pro-dots[hidden]{display:none}