/* The telescope. A round view of the sky with a graduated rim; the four plans sit on its compass points. */
.sc-head{justify-self:end;max-width:21rem}
.sc-head h2{font-size:clamp(2.2rem,3vw,3.1rem);margin:0 0 18px}
.sc-head .lede{font-size:1.02rem;text-shadow:0 1px 18px rgba(4,11,22,.8)}
/* wider than the site's usual limit: on big monitors that limit squeezed the plan details into a sliver */
.plans-wrap{max-width:1660px}
/* the outer columns match, so the telescope sits on the exact centre of the screen */
.sc-stage{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:clamp(44px,3.6vw,58px);align-items:center;min-height:calc(100vh - 130px)}
.sc-lens{position:relative;width:min(72vh,42vw,740px);aspect-ratio:1;margin:0 auto;padding:0;container:lens/inline-size}
.sc-view{position:absolute;inset:3.6%;border-radius:50%;overflow:hidden;isolation:isolate;background:#02060e;box-shadow:inset 0 0 90px 30px rgba(0,0,0,.72)}
.sc-view::after{content:"";position:absolute;inset:0;z-index:5;border-radius:50%;pointer-events:none;background:radial-gradient(circle at 50% 50%,transparent 62%,rgba(1,4,10,.82) 100%),linear-gradient(150deg,rgba(255,255,255,.06),transparent 26%)}
.sc-field{position:absolute;inset:-12%;width:124%;height:124%;z-index:0}
/* soft edges, so a view drifting across the lens reads as a patch of sky and not a rectangle */
.plate{position:absolute;inset:0;z-index:1;will-change:transform}
.pl-sky,.plate.plus .pl-art,.plate.pro .pl-art{-webkit-mask-image:radial-gradient(circle closest-side,#000 74%,transparent 100%);mask-image:radial-gradient(circle closest-side,#000 74%,transparent 100%)}
.pl-sky{position:absolute;inset:0;background-repeat:no-repeat;background-size:cover}
.plate.free .pl-sky{background:none}
.plate.starter .pl-sky{background-image:radial-gradient(60% 50% at 62% 42%,rgba(52,88,150,.34),transparent 72%)}
.plate.plus .pl-sky{opacity:.62;background-image:radial-gradient(52% 44% at 66% 36%,rgba(66,106,178,.3),transparent 72%),radial-gradient(50% 42% at 30% 70%,rgba(176,129,63,.08),transparent 74%),url(../assets/sky.jpg);background-size:auto,auto,auto 210%;background-position:0 0,0 0,62% 34%;background-blend-mode:screen}
.plate.pro .pl-sky{background-image:radial-gradient(60% 52% at 48% 48%,rgba(212,174,104,.3),transparent 74%),radial-gradient(44% 40% at 74% 28%,rgba(92,126,190,.34),transparent 72%),url(../assets/sky.jpg);background-size:auto,auto,auto 190%;background-position:0 0,0 0,40% 58%;background-blend-mode:screen}
.plate.pro .pl-sky::after{content:"";position:absolute;inset:0;background:radial-gradient(46% 42% at 46% 50%,rgba(240,196,120,.5),transparent 72%),radial-gradient(30% 26% at 74% 30%,rgba(212,174,104,.26),transparent 74%),radial-gradient(34% 28% at 24% 74%,rgba(176,129,63,.3),transparent 74%);mix-blend-mode:screen}
.plate.plus .pl-art{opacity:.82}
.plate.pro .pl-art{filter:brightness(1.32) contrast(1.08) saturate(1.12) drop-shadow(0 0 12px rgba(237,203,141,.34))}
.pl-bear{position:absolute;inset:7%}
.pl-art{position:absolute;inset:0;width:100%;height:100%;display:block;mix-blend-mode:screen;user-select:none}
.pl-line{fill:none;stroke-linecap:round;stroke-linejoin:round}
.pl-line.free{stroke:#c8ced8;stroke-width:2.2;opacity:.6;filter:blur(.9px)}
.pl-line.starter{stroke:var(--gold-hi);stroke-width:3.4;filter:drop-shadow(0 0 6px rgba(237,203,141,.45))}
.c-lines line{stroke:rgba(237,203,141,.62);stroke-width:1.5}
.c-stars circle{fill:#ffefcf;stroke:none}
.pl-nodes{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.pl-leads line{stroke:rgba(244,241,233,.42);stroke-width:1.2;vector-effect:non-scaling-stroke;stroke-dasharray:1 5;stroke-linecap:round}
.n-hit{fill:transparent;pointer-events:all;cursor:pointer}
.n-body{transform:scale(var(--s));transform-origin:0 0;transition:transform .3s var(--ease)}
.n-halo{mix-blend-mode:screen;animation:n-breathe 2.8s ease-in-out infinite;animation-delay:var(--d)}
.n-star{fill:#fff}
.n.lit .n-body{transform:scale(calc(var(--s) * 1.42))}
.n.lit .n-halo{animation:n-flare 1.5s ease-in-out infinite}
@keyframes n-breathe{50%{opacity:.68}}
@keyframes n-flare{0%,100%{opacity:1}50%{opacity:.72}}
.pl-labels{position:absolute;inset:0;z-index:6;pointer-events:none}
.pl-lab{position:absolute;width:max-content;max-width:10.5em;pointer-events:auto;cursor:default;font-family:var(--serif);font-weight:400;font-synthesis:none;letter-spacing:.005em;-webkit-text-stroke:.28px currentColor;font-size:clamp(1.12rem,1.36vw,1.3rem);line-height:1.16;color:#fffdf7;text-shadow:0 1px 10px #02060e,0 0 4px #02060e,0 0 2px #02060e;transition:color .25s var(--ease),text-shadow .25s var(--ease)}
.pl-lab.lit{color:#fff;animation:lab-glim 1.5s ease-in-out infinite}
@keyframes lab-glim{0%,100%{text-shadow:0 0 6px #fff,0 0 16px rgba(255,233,189,1),0 0 34px rgba(237,203,141,.95),0 0 60px rgba(237,203,141,.6)}50%{text-shadow:0 0 3px #fff,0 0 10px rgba(255,233,189,.8),0 0 22px rgba(237,203,141,.6),0 0 40px rgba(237,203,141,.3)}}
.pl-lab.c{transform:translate(-50%,-50%);text-align:center}.pl-lab.l{transform:translateY(-50%)}.pl-lab.r{transform:translate(-100%,-50%);text-align:right}

.sc-rim{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.sc-rim .r1{fill:none;stroke:var(--gold);stroke-width:1.6}.sc-rim .r2{fill:none;stroke:var(--line2);stroke-width:1}.sc-rim .r3{fill:none;stroke:var(--gold);stroke-width:1.4;opacity:.7}
.sc-rim .ticks line{stroke:rgba(212,174,104,.42);stroke-width:1;vector-effect:non-scaling-stroke}.sc-rim .ticks line.big{stroke:var(--gold-hi)}
.sc-compass{position:absolute;inset:0;pointer-events:none;--pw:108px;--ph:62px;--pgap:6px;--ppad:9px 8px 7px;--pname:13.5px;--ptrack:.06em;--pprice:18px;--pout:26%}
/* The four plans on the rim are the same control as the effort switch beside the telescope: the same glass, corners and lettering, the
   light that follows the pointer, and the sunrise on the one that is chosen. Each stands alone, so each carries the rim and depth the
   switch has as a group. The light is written out here, not taken from --lg-light: that is set once on :root, where the pointer's
   place and --lg are still at rest, so a button that borrows it never lights. */
.sc-compass .sc-point{position:absolute;pointer-events:auto;isolation:isolate;flex-direction:column;gap:var(--pgap);width:var(--pw);min-height:var(--ph);padding:var(--ppad);border:1px solid transparent;border-radius:10px;color:var(--mist);
  background:radial-gradient(90px circle at var(--mx,50%) var(--my,50%),rgba(var(--gold-hi-rgb),calc(var(--lg,0) * .22)),transparent 72%) padding-box,var(--lg-sheen) padding-box,var(--lg-fill) padding-box,var(--lg-rim) border-box;
  box-shadow:var(--lg-depth);-webkit-backdrop-filter:blur(12px) saturate(1.4);backdrop-filter:blur(12px) saturate(1.4);
  transition:--lg .4s var(--lg-ease),border-color .5s var(--lg-ease),box-shadow .5s var(--lg-ease),transform .2s var(--lg-ease)}
.sc-point b{margin-right:calc(var(--ptrack) * -1);font:500 var(--pname)/1 var(--sans);letter-spacing:var(--ptrack);color:var(--mist);transition:color .25s var(--lg-ease)}   /* the effort switch's lettering; the margin takes back the space after the last letter, so the name sits on the centre */
.sc-point span{font:400 var(--pprice)/1 var(--serif);letter-spacing:.01em;text-transform:none;font-variant-numeric:lining-nums;color:var(--ivory);opacity:.9;transition:color .25s var(--lg-ease),opacity .25s var(--lg-ease)}   /* the price in the serif of the big price beside the telescope */
.sc-point.n{left:50%;top:0;transform:translate(-50%,-34%)}.sc-point.s{left:50%;bottom:0;transform:translate(-50%,34%)}.sc-point.e{right:0;top:50%;transform:translate(var(--pout),-50%)}.sc-point.w{left:0;top:50%;transform:translate(calc(var(--pout) * -1),-50%)}
/* under the pointer: the light comes up where the pointer is and the name brightens. Only where there is a pointer to follow; on a touch screen a hover would stay on the button last tapped. */
@media (hover:hover){
  .sc-compass .sc-point:hover{--lg:1;border-color:rgba(var(--gold-hi-rgb),.16)}
  .sc-point:hover b{color:var(--ivory)}.sc-point:hover span{opacity:1}
}
/* chosen: the sunrise along the top edge, as on the effort switch. Both parts are always there and fade, so the light leaves one plan as it comes up on the next. */
.sc-point::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:9px;pointer-events:none;background:radial-gradient(70% 90% at 50% 0%,rgba(var(--gold-hi-rgb),.2),transparent 70%);opacity:0;transition:opacity .55s var(--lg-ease)}
.sc-point::before{content:"";position:absolute;left:14%;right:14%;top:-1px;height:1px;pointer-events:none;background:linear-gradient(90deg,transparent,var(--gold-hi) 35%,#fff6e0 50%,var(--gold-hi) 65%,transparent);box-shadow:0 0 10px 1px rgba(var(--gold-hi-rgb),.55),0 4px 16px 2px rgba(var(--gold-hi-rgb),.18);opacity:0;transform:scaleX(.35);transition:opacity .45s var(--lg-ease),transform .7s var(--lg-ease)}
.sc-point[aria-checked=true]::after{opacity:1}
.sc-point[aria-checked=true]::before{opacity:1;transform:none}
.sc-compass .sc-point[aria-checked=true]{border-color:rgba(var(--gold-hi-rgb),.42);box-shadow:var(--lg-depth),0 0 34px -10px rgba(var(--gold-hi-rgb),.62)}
.sc-point[aria-checked=true] b,.sc-point[aria-checked=true] span{color:var(--gold-hi);opacity:1}
.sc-compass .sc-point:focus-visible{border-radius:10px;outline:1.5px solid var(--gold-hi);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.sc-point::before{transform:none}}
/* a small telescope gets the small buttons, whatever the window: at their full size they would cover the bear's nose and back */
@container lens (max-width:500px){.sc-compass{--pw:84px;--ph:52px;--pgap:5px;--ppad:7px 4px 5px;--pname:11px;--ptrack:.07em;--pprice:15.5px;--pout:30%}}

.sc-info{container-type:inline-size;text-shadow:0 1px 14px rgba(4,11,22,.95)}
.sc-name{margin:0;font:400 clamp(2.6rem,3.6vw,3.2rem)/1.04 var(--serif);color:var(--ivory)}
.sc-for{margin:8px 0 0;color:var(--mist);font-size:1.12rem;line-height:1.4}
.sc-price{display:flex;align-items:baseline;gap:9px;margin:16px 0 0}
.sc-price b{font:400 3rem/1 var(--serif);color:var(--ivory)}.sc-price span{color:var(--mist);font-size:1.08rem}
.sc-credits{margin:6px 0 0;color:var(--gold-hi);font-size:1.12rem;font-variant-numeric:tabular-nums}
.sc-effort{border:0;margin:16px 0 0;padding:0;border-top:1px solid var(--line2);min-width:0}
.sc-effort legend{float:left;width:100%;padding:14px 0 9px;color:var(--mist);font-size:1.08rem}
/* the effort switch: Polaris's segmented control */
.sc-seg{clear:both;display:inline-flex;width:100%;border:1px solid transparent;border-radius:10px;overflow:hidden;background:var(--lg-sheen) padding-box,var(--lg-fill) padding-box,var(--lg-rim) border-box;box-shadow:var(--lg-depth)}
.sc-seg label{position:relative;flex:1 1 auto;min-width:0;cursor:pointer;background-image:radial-gradient(90px circle at var(--mx,50%) var(--my,50%),rgba(var(--gold-hi-rgb),calc(var(--lg) * .22)),transparent 72%);transition:--lg .4s var(--lg-ease)}
.sc-seg label:hover{--lg:1}
.sc-seg label+label{border-left:1px solid var(--hair)}
.sc-seg input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.sc-seg span{position:relative;display:flex;align-items:center;justify-content:center;min-height:52px;padding:0 13px;font:500 13.5px/1 var(--sans);letter-spacing:.06em;white-space:nowrap;text-transform:uppercase;color:var(--mist);text-shadow:none;transition:color .25s var(--lg-ease)}
.sc-seg label:hover span{color:var(--ivory)}
.sc-seg input:checked+span{color:var(--gold-hi);background-image:radial-gradient(70% 90% at 50% 0%,rgba(var(--gold-hi-rgb),.2),transparent 70%)}
.sc-seg input:checked+span::before{content:"";position:absolute;left:14%;right:14%;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold-hi) 35%,#fff6e0 50%,var(--gold-hi) 65%,transparent);box-shadow:0 0 10px 1px rgba(var(--gold-hi-rgb),.55)}
.sc-seg input:focus-visible+span{outline:1.5px solid var(--gold-hi);outline-offset:-3px}
.sc-buys{margin-top:12px}.sc-big{margin:0;font:400 1.75rem/1.15 var(--serif);color:var(--ivory)}.sc-big.off{color:var(--mist)}.sc-small{margin:4px 0 0;color:var(--mist);font-size:1.08rem;line-height:1.4}
.sc-gets{margin-top:14px}
.sc-gets-h{margin:0 0 2px;color:var(--mist);font-size:1.08rem}
.sc-list{list-style:none;margin:0;padding:0;font-size:1.1rem;line-height:1.3;color:var(--ivory)}
.sc-list li{padding:6px 0;border-top:1px solid var(--line)}
.sc-list li:first-child{border-top:0}
.sc-info .sc-cta{width:100%;min-height:54px;margin-top:14px;font-size:13.5px;letter-spacing:.12em;text-shadow:none}
/* if the column is ever too narrow for the three efforts side by side, they stack instead of squeezing */
@container (max-width:292px){.sc-seg{flex-direction:column}.sc-seg label+label{border-left:0;border-top:1px solid var(--hair)}.sc-seg span{min-height:46px}}

@media (max-width:1340px){
  .sc-stage{grid-template-columns:1fr;gap:72px;min-height:0}
  .sc-head{justify-self:center;text-align:center;max-width:36rem}
  .sc-lens{width:min(100% - 100px,640px)}
  .sc-info{max-width:30rem;margin:0 auto;width:100%}
}
@media (max-width:640px){
  .pl-labels{display:none}.pl-leads{display:none}
  .sc-lens{width:calc(100% - 46px)}
  .sc-compass{--pw:84px;--ph:52px;--pgap:5px;--ppad:7px 4px 5px;--pname:11px;--ptrack:.07em;--pprice:15.5px;--pout:30%}
}
@media (prefers-reduced-motion:reduce){.plate.pro .n-star{animation:none}}

.ld-terms{margin:clamp(64px,7vw,104px) auto 0}
.sc-subject{margin:5px 0 0;color:var(--dim);font-size:.78rem;line-height:1.3}

/* The details sit under the heading, in view beside the telescope, instead of below it. */
.sc-side{justify-self:end;width:100%;max-width:21rem}
@media (min-width:1341px){
  .sc-side .sc-head{max-width:none}
  .sc-side .ld-terms{max-width:none;margin:24px 0 0;padding-top:18px;border-top:1px solid var(--line)}
  .sc-side .ld-terms p{margin:0 0 10px;font-size:.82rem;line-height:1.5}
  .sc-side .ld-terms em{font-size:.92rem}
  .sc-side .ld-terms #scNote{min-height:5lh}   /* room for the longest effort note, so the column doesn't shift when the effort changes */
  .sc-side .ld-terms .ld-fine{margin:12px 0 0;padding-top:10px;font-size:.76rem;line-height:1.45}
}
@media (max-width:1340px){
  .sc-side{display:contents}
  .sc-stage>.sc-side .ld-terms{order:1;width:100%;margin:0 auto}
}
.plans{padding-top:30vh}
/* The telescope holds in the middle of the screen while the page scrolls past, like the other scenes. */
@media (min-width:1341px) and (min-height:700px){
  .plans{padding-top:0}
  .plans-wrap{height:195vh}   /* the dust lands and the telescope comes up over the first .55 of a screen, then it holds */
  .sc-stage{position:sticky;top:0;height:100vh;min-height:0}
}
/* Narrower windows stack the section in one column, too tall to hold whole, so the telescope alone holds under the top bar, smaller so
   the details have room below it. They scroll up and dissolve just under it (home.js, plansAt). A phone held sideways is too short for this. */
@media (max-width:1340px) and (min-height:521px){
  .sc-lens{position:sticky;top:calc(86px + env(safe-area-inset-top));z-index:2;align-self:start;width:min(100% - 46px,640px,46vh);width:min(100% - 46px,640px,46svh)}
  .sc-stage{gap:56px}
}
@media (max-width:1340px) and (min-width:901px) and (min-height:521px){.sc-lens{top:calc(106px + env(safe-area-inset-top))}}   /* clear of the full menu and its ornament */
@media (max-width:1340px) and (min-height:521px) and (max-height:1100px){.pl-labels,.pl-leads{display:none}}   /* the lens is too small for its words here; the same list is just below */
/* a wide but short window keeps its three columns, and the telescope holds while the two beside it scroll */
@media (min-width:1341px) and (max-height:699px){
  .sc-lens{position:sticky;top:96px;align-self:start}
  .sc-stage{align-items:start}
}
/* laptop heights: the plan details tighten so all of them stay on screen, clear of the top bar */
@media (min-width:1341px) and (max-height:900px){
  .sc-name{font-size:2.3rem}.sc-for{margin-top:4px;font-size:1rem}
  .sc-price{margin-top:10px}.sc-price b{font-size:2.3rem}.sc-price span,.sc-credits{font-size:1rem}.sc-credits{margin-top:3px}
  .sc-effort{margin-top:10px}.sc-effort legend{padding:9px 0 6px;font-size:.96rem}.sc-seg span{min-height:40px;font-size:12px}
  .sc-buys{margin-top:8px}.sc-big{font-size:1.4rem}.sc-small{margin-top:2px;font-size:.94rem;line-height:1.3}
  .sc-info .sc-cta{min-height:44px;margin-top:10px;font-size:12px}
  .sc-gets{margin-top:9px}.sc-gets-h{font-size:.94rem}.sc-list{font-size:.94rem;line-height:1.25}.sc-list li{padding:3px 0}
  .sc-head h2{font-size:2.2rem;margin-bottom:12px}.sc-head .lede{font-size:.94rem}
}

/* Pressing a plan keeps it on the rim. The site-wide pressed style replaces transform, which here is what positions the button; without this it jumps from under the pointer and the click is lost. */
.sc-compass .sc-point:active{transition-duration:.1s}
.sc-compass .sc-point.n:active{transform:translate(-50%,-34%) translateY(1px) scale(.985)}
.sc-compass .sc-point.s:active{transform:translate(-50%,34%) translateY(1px) scale(.985)}
.sc-compass .sc-point.e:active{transform:translate(var(--pout),-50%) translateY(1px) scale(.985)}
.sc-compass .sc-point.w:active{transform:translate(calc(var(--pout) * -1),-50%) translateY(1px) scale(.985)}