/* Reference-approved scenic fidelity. Flat icons belong in controls, not hero art. */
.hero-scene .scene,.page-art .scene,.last-invitation .scene{
 opacity:1!important;filter:none!important;
 mask-image:none!important;mix-blend-mode:normal!important;
}
.hero-scene .scene{right:-5%;bottom:-5%;width:min(90%,1130px);height:84%}
.hero-scene .scene img,.page-art .scene img{filter:none!important;mix-blend-mode:normal!important;opacity:1!important;object-fit:cover!important}
.page-art .scene{inset:0!important;opacity:1!important}
.page-art .art-foreground,.page-art-route,.hero-contours{display:none!important}
/* No second, unrelated squiggle should compete with an actual mountain trail. */
.hero-outer-route{display:none!important}
.page-hero.path .page-art .scene,.page-hero.about .page-art .scene,
.page-hero.faq .page-art .scene,.page-hero.membership .page-art .scene{
 transform:none!important;opacity:1!important;
}
[data-theme="dark"] .hero-scene .scene,[data-theme="dark"] .page-art .scene{opacity:1!important}
[data-theme="dark"] .scene img.dark{filter:none!important;mix-blend-mode:normal!important}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .hero-scene .scene,:root:not([data-theme="light"]) .page-art .scene{opacity:1!important}
:root:not([data-theme="light"]) .scene img.dark{filter:none!important;mix-blend-mode:normal!important}}
/* Homepage art retains its full detail. A separate gradient protects the
   approved headline and body copy; never fade, blur or mask the actual WebP. */
.hero-scene::after{
 content:"";position:absolute;inset:0;pointer-events:none;
 background:linear-gradient(90deg,#FBF8F3 0%,rgba(251,248,243,.98) 22%,rgba(251,248,243,.88) 41%,rgba(251,248,243,.48) 61%,transparent 82%);
}
:root[data-theme="dark"] .hero-scene::after{
 background:linear-gradient(90deg,#102733 0%,rgba(16,39,51,.99) 22%,rgba(16,39,51,.92) 40%,rgba(16,39,51,.47) 65%,transparent 85%);
}
@media(prefers-color-scheme:dark){
 :root:not([data-theme="light"]) .hero-scene::after{
  background:linear-gradient(90deg,#102733 0%,rgba(16,39,51,.99) 22%,rgba(16,39,51,.92) 40%,rgba(16,39,51,.47) 65%,transparent 85%);
 }
}
@media(max-width:760px){
 .hero-scene::after{
  background:linear-gradient(180deg,#FBF8F3 0%,rgba(251,248,243,.98) 33%,rgba(251,248,243,.75) 53%,transparent 78%);
 }
 :root[data-theme="dark"] .hero-scene::after{
  background:linear-gradient(180deg,#102733 0%,rgba(16,39,51,.98) 33%,rgba(16,39,51,.75) 53%,transparent 78%);
 }
}
@media(max-width:760px) and (prefers-color-scheme:dark){
 :root:not([data-theme="light"]) .hero-scene::after{
  background:linear-gradient(180deg,#102733 0%,rgba(16,39,51,.98) 33%,rgba(16,39,51,.75) 53%,transparent 78%);
 }
}
/* Six non-sequential areas: structured constellation rather than a huge dotted ellipse. */
.path-map-section .shell{display:block;max-width:1200px}
.path-map-section .shell>div:first-child{max-width:780px}
.path-map-section h2{max-width:none}
.path-map-section .orbit{
 height:auto;max-width:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
 gap:13px;margin:28px 0 0;padding:0;
}
.path-map-section .orbit-line,.path-map-section .orbit-center{display:none!important}
.path-map-section .orbit-item,.path-map-section .orbit-item:nth-of-type(n){
 position:relative!important;left:auto!important;top:auto!important;
 width:100%;max-width:none;min-height:125px;
 display:flex;gap:16px;align-items:center;padding:20px 19px;
 border:1px solid var(--line);border-radius:18px;
 background:linear-gradient(135deg,var(--surface),var(--sb-site-sage));
 text-decoration:none;box-shadow:var(--sb-site-shadow);
}
.path-map-section .orbit-item:nth-of-type(3n+2){background:linear-gradient(135deg,var(--surface),var(--sb-site-stone))}
.path-map-section .orbit-item:nth-of-type(3n){background:var(--surface)}
.path-map-section .orbit-item strong{text-decoration:none;font:400 clamp(19px,2vw,23px)/1.25 var(--serif);color:var(--ink);max-width:none}
.path-map-section .orbit-item span{font:13px/1.5 var(--sans);max-width:26ch;text-decoration:none}
.path-map-section .orbit-item .sb-illustration{width:62px;height:65px;flex:none}
.path-map-section .orbit-item:hover{border-color:var(--gold);transform:translateY(-2px)}
.path-map-section .orbit-item:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
/* Path landing: let the six real categories do the explaining. */
.page-hero.path .shell{min-height:0!important;display:block;padding-top:44px;padding-bottom:18px}
.page-hero.path .shell>div:first-child{max-width:850px}
.page-hero.path h1{font-size:clamp(40px,6vw,64px);max-width:17ch}
.page-hero.path .page-art{display:none!important}
.page-hero.path + .section{padding-top:16px}
.page-hero.path + .section .section-head{margin-bottom:14px}
.page-hero.path + .section .areas-grid{gap:15px}
.page-hero.path + .section .area-detail{padding:22px}
.page-hero.path + .section .area-detail .sb-illustration{height:62px;width:62px;margin-bottom:10px}
/* Story leads with the human motivation, rather than a credential thesis. */
.page-hero.about .shell{min-height:0!important;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);padding-top:50px;padding-bottom:35px}
.page-hero.about h1{max-width:16ch;font-size:clamp(40px,5vw,65px)}
.page-hero.about .page-art{height:275px}
.page-hero.about + .section{padding-top:33px}
@media(max-width:980px){
 .path-map-section .orbit{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
 .hero-scene .scene{width:140%;right:-34%;height:56%;bottom:0}
 .page-hero.path .shell{padding-top:32px;padding-bottom:14px}
 .page-hero.about .shell{display:block;padding-top:29px;padding-bottom:18px}
 .page-hero.about .page-art{height:180px;margin:8px 0 0}
 .path-map-section .orbit{grid-template-columns:1fr;gap:10px;margin-top:17px}
 .path-map-section .orbit-item,.path-map-section .orbit-item:nth-of-type(n){min-height:82px;padding:12px 15px}
 .path-map-section .orbit-item .sb-illustration{width:51px;height:54px}
}
@media(prefers-reduced-motion:reduce){.orbit-item{transition:none!important}}

/* Final homepage scenic composition: avoid hard edge at laptop widths.
   The image keeps its pixels intact; only the scene's outside edge blends. */
.hero-scene .scene {
  right:-3%!important;
  bottom:-5%!important;
  width:min(73%,1040px)!important;
  height:83%!important;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.45) 12%,#000 28%)!important;
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.45) 12%,#000 28%)!important;
}
.last-invitation .scene {
  right:-2%!important;
  bottom:-12%!important;
  width:min(66%,880px)!important;
  height:103%!important;
  opacity:.54!important;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 32%),linear-gradient(0deg,#000 78%,transparent 100%)!important;
  mask-image:linear-gradient(90deg,transparent 0%,#000 32%),linear-gradient(0deg,#000 78%,transparent 100%)!important;
  mask-composite:intersect!important;
}
@media(min-width:761px) and (max-width:1130px) {
  .hero-scene .scene {
    width:72%!important;right:-7%!important;bottom:-2%!important;height:78%!important;
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 38%)!important;
    mask-image:linear-gradient(90deg,transparent 0%,#000 38%)!important;
  }
  .hero-scene::after {
    background:linear-gradient(90deg,#FBF8F3 0%,rgba(251,248,243,.99) 29%,rgba(251,248,243,.84) 49%,transparent 82%);
  }
  :root[data-theme="dark"] .hero-scene::after{
    background:linear-gradient(90deg,#102733 0%,rgba(16,39,51,.99) 29%,rgba(16,39,51,.89) 50%,transparent 86%);
  }
}
@media(max-width:760px) {
  .hero-scene .scene {
    right:-25%!important;bottom:0!important;width:130%!important;height:55%!important;
    -webkit-mask-image:linear-gradient(0deg,#000 66%,transparent 100%)!important;
    mask-image:linear-gradient(0deg,#000 66%,transparent 100%)!important;
  }
  .last-invitation .scene{
    width:100%!important;right:-25%!important;bottom:-6%!important;height:55%!important;
    opacity:.4!important;
    -webkit-mask-image:linear-gradient(0deg,#000 45%,transparent 100%)!important;
    mask-image:linear-gradient(0deg,#000 45%,transparent 100%)!important;
  }
}
@media(min-width:761px) and (max-width:1130px) and (prefers-color-scheme:dark){
 :root:not([data-theme="light"]) .hero-scene::after{
   background:linear-gradient(90deg,#102733 0%,rgba(16,39,51,.99) 29%,rgba(16,39,51,.89) 50%,transparent 86%);
 }
}

/* Marketing Path: six real categories should be the first substantive content,
   not a second-screen generic introduction. */
.page-hero.path .shell{
 padding-top:23px!important;
 padding-bottom:6px!important;
}
.page-hero.path .page-art{display:none!important}
.page-hero.path .eyebrow{margin-bottom:9px!important}
.page-hero.path h1{
 font:400 clamp(33px,4.6vw,53px)/1.15 var(--serif)!important;
 max-width:none!important;
 margin:0 0 9px!important;
}
.page-hero.path .lede{
 max-width:75ch!important;font-size:15px!important;
 line-height:1.55!important;margin-bottom:12px!important;
}
.page-hero.path .button{min-height:42px!important;padding:10px 19px!important}
.page-hero.path + .section{
 padding-top:8px!important;
}
.page-hero.path + .section .section-head{
 display:flex;gap:22px;align-items:end;
 margin:0 0 14px!important;
}
.page-hero.path + .section .section-head h2{
 font-size:clamp(25px,3.3vw,35px)!important;
}
.page-hero.path + .section .areas-grid{
 gap:12px!important;
}
.page-hero.path + .section .area-detail{
 padding:19px!important;min-height:150px;
}
/* Actual site boundaries stay visible, but the art never competes with links. */
.last-invitation .shell,.last-invitation .shell :is(h2,p,a){
 position:relative;z-index:1;
}
@media(max-width:760px){
 .page-hero.path .shell{padding-top:17px!important;padding-bottom:5px!important}
 .page-hero.path h1{font-size:35px!important}
 .page-hero.path .lede{font-size:13px!important;margin-bottom:10px!important}
 .page-hero.path + .section .section-head{display:block}
 .page-hero.path + .section .section-head h2{font-size:26px!important;margin:5px 0!important}
 .page-hero.path + .section .section-head>p{font-size:12.5px!important;line-height:1.5!important}
 .page-hero.path + .section .area-detail{min-height:105px;padding:15px!important}
}

/* N8/N9/N10 + O18: final responsive marketing compositions. */
@media(min-width:761px) and (max-width:1100px){
 .hero .shell{
   display:grid!important;grid-template-columns:minmax(0,1fr)!important;
   align-items:start!important;gap:20px!important;
   min-height:0!important;padding-top:45px!important;
   padding-bottom:72px!important;
 }
 .hero{min-height:0!important}
 .hero-copy{
   max-width:min(100%,680px)!important;
   width:100%!important;margin:0 auto!important;
 }
 .hero-copy h1{
   max-width:15ch!important;font-size:clamp(51px,6vw,67px)!important;
 }
 .hero-devices{
   width:min(100%,510px)!important;max-width:510px!important;
   height:560px!important;margin:0 auto!important;
   transform:none!important;
 }
 .hero-sidenote{
   bottom:-5px!important;z-index:3!important;
   display:block!important;width:95%!important;
   margin:auto!important;padding:9px 15px!important;
   background:var(--paper)!important;
   border:1px solid var(--line)!important;
   border-radius:12px!important;
   font-size:12px!important;line-height:1.4!important;
   color:var(--ink)!important;
 }
}
.hero-devices .hero-sidenote{
 color:var(--ink)!important;
 text-shadow:none!important;
}
@media(min-width:1101px){
 .hero-sidenote{
   background:var(--paper)!important;
   border-radius:12px!important;
   border:1px solid var(--line)!important;
   bottom:-14px!important;
   margin:0 5%!important;
   padding:9px 12px!important;
   line-height:1.5!important;font-size:11px!important;
 }
}
/* Actual six area cards are the first content on the marketing Path page. */
.page-hero.path{display:none!important}
.page-hero.path + .section{padding:32px 0 55px!important}
.page-hero.path + .section .section-head{
 position:relative!important;isolation:isolate;
 padding:26px 20px 29px!important;
 margin-bottom:15px!important;min-height:174px;
 border-radius:15px!important;
 border:1px solid var(--line);
 background:var(--surface);
 overflow:hidden;
}
.page-hero.path + .section .section-head::before{
 content:"";position:absolute;pointer-events:none;z-index:-1;
 right:-2%;top:-12%;height:125%;width:48%;
 background:url('sb-alpine-main-day.svg') center 42% / cover no-repeat;
 -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 36%);
 mask-image:linear-gradient(90deg,transparent 0%,#000 36%);
 opacity:.64;
}
.page-hero.path + .section .section-head>div{
 position:relative;z-index:1;max-width:60%;
}
.page-hero.path + .section .section-head>p{
 position:relative;z-index:1;max-width:28ch;
 font-size:13px!important;line-height:1.5!important;
 margin:0!important;
}
:root[data-theme="dark"] .page-hero.path + .section .section-head::before{
 background-image:url('sb-alpine-main-night.svg');
 opacity:.65;
}
@media(prefers-color-scheme:dark){
 :root:not([data-theme="light"]) .page-hero.path + .section .section-head::before{
  background-image:url('sb-alpine-main-night.svg');opacity:.65;
 }
}
/* Closing invite: the illustrated path lives behind a fade, not the copy. */
.last-invitation{
 isolation:isolate!important;background:var(--paper);
 padding:80px 0 85px!important;
}
.last-invitation .scene{
 right:-5%!important;bottom:-5%!important;
 width:60%!important;height:110%!important;
 opacity:.56!important;
 -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 45%),linear-gradient(0deg,#000 85%,transparent 100%)!important;
 mask-image:linear-gradient(90deg,transparent 0%,#000 45%),linear-gradient(0deg,#000 85%,transparent 100%)!important;
 mask-composite:intersect!important;
}
.last-invitation::after{
 content:"";position:absolute;z-index:0;inset:0;pointer-events:none;
 background:linear-gradient(90deg,var(--paper) 0%,var(--paper) 39%,transparent 89%);
}
.last-invitation .shell{position:relative!important;z-index:2!important}
.last-invitation h2{
 font-size:clamp(34px,4vw,51px)!important;
 max-width:19ch!important;
 margin-left:auto!important;margin-right:auto!important;
 line-height:1.18!important;
 text-wrap:balance!important;
}
.last-invitation p:not(.eyebrow){
 max-width:42ch!important;margin:0 auto 25px!important;
 color:var(--ink)!important;text-wrap:pretty;
}
@media(max-width:760px){
 .hero-sidenote{
  display:block!important;position:relative!important;bottom:auto!important;
  margin:13px auto 0!important;width:min(100%,365px)!important;
  background:var(--paper)!important;border:1px solid var(--line)!important;
  border-radius:12px!important;padding:10px 12px!important;
  font-size:11px!important;line-height:1.5!important;
 }
 .page-hero.path + .section{padding:19px 0 46px!important}
 .page-hero.path + .section .section-head{
  min-height:124px!important;padding:18px 15px!important;
  display:block!important;
 }
 .page-hero.path + .section .section-head::before{
  width:65%!important;right:-25%!important;opacity:.44!important;
 }
 .page-hero.path + .section .section-head>div{max-width:78%!important}
 .page-hero.path + .section .section-head>p{
  font-size:12px!important;max-width:88%!important;
  margin:7px 0 0!important;
 }
 .last-invitation{padding:64px 0!important}
 .last-invitation .scene{
  width:100%!important;right:-30%!important;
  top:0!important;bottom:auto!important;height:100%!important;
  opacity:.27!important;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 70%),linear-gradient(0deg,#000 82%,transparent 100%)!important;
  mask-image:linear-gradient(90deg,transparent 0%,#000 70%),linear-gradient(0deg,#000 82%,transparent 100%)!important;
  mask-composite:intersect!important;
 }
 .last-invitation::after{
  background:linear-gradient(90deg,var(--paper) 0%,var(--paper) 44%,transparent 100%);
 }
 .last-invitation h2{max-width:18ch!important;font-size:36px!important}
 .eyebrow{font-size:10px!important;letter-spacing:.14em!important;line-height:1.5!important}
}
.path-map-section .shell{
 margin-left:auto!important;margin-right:auto!important;
 box-sizing:border-box!important;max-width:1200px!important;
}
.path-map-section .orbit{
 transform:none!important;margin-left:0!important;margin-right:0!important;padding:0!important;
}

/* Round 3: scenic calm and typographic consistency. */
.page-hero.path + .section .section-head{isolation:isolate!important;background:var(--surface)!important}
.page-hero.path + .section .section-head::before{opacity:.25!important;width:44%!important;right:-1%!important}
.page-hero.path + .section .section-head>p{max-width:54ch!important;min-width:0!important;position:relative;z-index:2;color:var(--ink)!important;background:var(--surface)!important;padding:9px 12px!important;border:1px solid var(--line);border-radius:10px;line-height:1.55!important}
.page-hero.path + .section .section-head>div{max-width:100%!important}
.hero-scene .scene{-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 34%),linear-gradient(0deg,transparent 0%,#000 24%)!important;mask-image:linear-gradient(90deg,transparent 0%,#000 34%),linear-gradient(0deg,transparent 0%,#000 24%)!important;mask-composite:intersect!important}
:is(.hero,.section,.last-invitation,.page-hero) :is(h1,h2,h3){text-wrap:balance!important;hyphens:none!important;word-break:normal!important}
:is(.hero,.section,.last-invitation,.page-hero) p{text-wrap:pretty}
.why-me{background:var(--panel)!important;color:var(--ink)!important}
:root[data-theme="dark"] .why-me{background:#233E4B!important;color:#F5F1E7!important}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .why-me{background:#233E4B!important;color:#F5F1E7!important}}
@media(min-width:761px) and (max-width:1100px){
 .hero .shell{grid-template-columns:minmax(0,1fr) minmax(0,.9fr)!important;gap:16px!important;align-items:center!important;min-height:675px!important}
 .hero-copy{max-width:520px!important;margin:0!important}
 .hero-copy h1{font-size:clamp(43px,4.7vw,60px)!important;max-width:15ch!important}
 .hero-copy .lede{font-size:14px!important;line-height:1.6!important}
 .hero-devices{transform:scale(.79)!important;transform-origin:top center!important;width:485px!important;max-width:100%!important;height:520px!important;margin:65px 0 0!important}
 .hero .device.first{left:0!important;top:41px!important}
 .hero .device.second{right:0!important;top:0!important}
 .hero-sidenote{bottom:0!important;font-size:11px!important;max-width:460px!important;margin:0 auto!important}
 .path-map-section .orbit-item strong{hyphens:none!important;font-size:19px!important;text-wrap:balance}
}
@media(max-width:760px){
 .hero .shell{overflow:visible!important}
 .hero-devices{width:min(100%,340px)!important;height:430px!important;margin:20px auto 58px!important;overflow:visible!important}
 .hero .device{width:185px!important;height:392px!important;max-width:54vw!important;border-width:5px!important}
 .hero .device.first{left:0!important;top:27px!important}
 .hero .device.second{right:0!important;top:0!important}
 .hero-sidenote{position:absolute!important;top:calc(100% + 11px)!important;left:0!important;right:0!important;bottom:auto!important;max-width:340px!important;margin:auto!important;padding:9px 12px!important}
 .page-hero.path + .section .section-head{min-height:0!important;padding:17px 15px 15px!important}
 .page-hero.path + .section .section-head>p{max-width:100%!important;margin:8px 0 0!important;font-size:12px!important}
 .hero-scene .scene{-webkit-mask-image:linear-gradient(0deg,transparent 0%,#000 22%,#000 74%,transparent 100%)!important;mask-image:linear-gradient(0deg,transparent 0%,#000 22%,#000 74%,transparent 100%)!important}
 .path-map-section .orbit-item strong{font-size:20px!important;word-break:normal!important;hyphens:none!important}
}