/* Beyond App Studios — "Studio" theme. Loaded after beyond.css and replaces the Meadow layer.
   Same language as the home page: light ground, Bricolage Grotesque + Figtree, rounded soft surfaces.
   Each app page opens on a live hero drawn from the app's own idea (a map for Volta, a pitch for GolOlur…),
   on a flat field of the app's own pastel. No black blocks: the dark sections become the app's colour. */

:root{
  --bg:#f7f8fa; --surface:#eef0f4; --paper:#fbfcfd; --ink:#15171c; --muted:#5b6270;
  --display:"Bricolage Grotesque","Avenir Next Condensed","Helvetica Neue",Arial,sans-serif;
  --text:"Figtree","Avenir Next","Helvetica Neue",Arial,system-ui,sans-serif;
  --mono:"Figtree","Avenir Next",Arial,sans-serif;
  --step-head:clamp(2.4rem,1.2rem + 4.2vw,5.2rem);
  --step-big:clamp(3rem,1rem + 7vw,8rem);
  --step-huge:clamp(4.4rem,.5rem + 13vw,14rem);
  --r-card:28px; --r-ctrl:999px;
  --tint:#eef0f4; --tint-2:#e3e7ee; --line:#15171c;
}
.acc-piery{--tint:#e2f3e6;--tint-2:#cfe9d6}
.acc-bridge{--tint:#e6f0e9;--tint-2:#d3e5d9}
.acc-volta{--tint:#fde9e1;--tint-2:#f9d6c8}
.acc-browser{--tint:#ece6fb;--tint-2:#ddd3f7}
.acc-notchy{--tint:#f8e4ec;--tint-2:#f0cfdc}
.acc-gol{--tint:#dff0f3;--tint-2:#c9e5ea}
.acc-pod{--tint:#e3e9fb;--tint-2:#cfd9f6}
.acc-home{--accent:#d8352b;--accent-ink:#fff;--tint:#fde6e3;--tint-2:#f9d2cd}

html{background:var(--bg)}
body{background:var(--bg);color:var(--ink);font-family:var(--text);letter-spacing:-.003em;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--display);text-transform:none;font-weight:700;letter-spacing:-.035em;line-height:.95;text-wrap:balance}
h3{letter-spacing:-.025em}
.lead{letter-spacing:-.01em}
.micro{font:600 .875rem/1.25 var(--text);letter-spacing:0;text-transform:none}

/* ---------- no ticker; nav is a plain bar like the home page */
.ticker{display:none}
.nav{background:var(--bg);transition:background-color .35s,box-shadow .35s}
.nav.over{background:transparent}
.nav.solid{background:rgba(247,248,250,.94);box-shadow:0 1px 0 rgba(21,23,28,.06)}
.nav .brand b{font:700 1.3rem/1 var(--display);text-transform:none;letter-spacing:-.03em}
.links a{font-weight:500;text-transform:none;letter-spacing:0}
.links a[aria-current="page"]{color:var(--accent)}
.lang-btn{border-radius:999px;background:#e3e7ee;color:var(--ink)}
.lang-btn:hover{background:var(--ink);color:#fff}
.menu-btn{border-radius:999px}
@media (max-width:960px){.links{background:var(--paper);color:var(--ink);box-shadow:0 20px 40px -20px rgba(21,23,28,.25)}}

/* ---------- the concept hero */
.scene{position:relative;height:calc(100vh - 64px);height:calc(100svh - 64px);min-height:620px;overflow:hidden;color:var(--ink);isolation:isolate;background:var(--tint);margin:0 clamp(8px,1.2vw,16px);border-radius:0 0 36px 36px}
.scene-art{position:absolute;inset:0;z-index:-1;pointer-events:none;transform:translateY(calc(var(--sp,0) * 10%)) scale(calc(1 + var(--sp,0) * .08))}
.scene-art canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.scene-art .layer{position:absolute;inset:0}
.scene-in{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 var(--gut) 40px;gap:0;transform:translateY(calc(var(--sp,0) * -16%));opacity:calc(1 - var(--sp,0) * 1.5)}
.scene .kicker{display:inline-flex;align-items:center;gap:8px;margin-bottom:clamp(14px,2vw,22px);padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.72);color:var(--ink)}
.scene .kicker::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent)}
.scene h1{font-size:var(--step-huge);font-weight:800;letter-spacing:-.055em;line-height:.86;margin:0;max-width:14ch;color:var(--ink)}
.scene .tagline{font:600 clamp(1.15rem,.9rem + 1vw,1.75rem)/1.2 var(--text);letter-spacing:-.02em;margin-top:clamp(14px,1.8vw,24px);max-width:30ch;color:var(--ink)}
.scene .btns{justify-content:center;margin-top:clamp(24px,3vw,40px);margin-bottom:0}
.scene .btn{background:var(--accent);color:var(--accent-ink);border-radius:999px;box-shadow:none}
.scene .btn:hover{background:var(--ink);color:#fff}
.scene .btn.alt{background:rgba(255,255,255,.8);color:var(--ink);box-shadow:none}
.scene .btn.alt:hover{background:#fff;color:var(--ink)}
.scene .btn[aria-disabled="true"]:hover{background:var(--accent);color:var(--accent-ink)}
.scene-foot{position:absolute;left:0;right:0;bottom:22px;display:flex;justify-content:center;color:var(--ink);opacity:calc(.8 - var(--sp,0) * 2)}
.scene-foot span{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.6)}
.scene-foot span::before{content:"";width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-3px)}
.motion .scene-foot span{animation:bob 2.2s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(5px)}}
.scene.short{height:62vh;min-height:460px}
@media (max-width:640px){
  .scene{min-height:560px;margin:0 8px;border-radius:0 0 28px 28px}
  .scene .btns{flex-direction:column;align-items:stretch;width:min(100%,340px)}
}
.scene h1 .app-ic{display:block;height:auto;width:clamp(76px,8vw,120px);aspect-ratio:1;border-radius:22.5%;margin:0 auto clamp(14px,1.6vw,22px);box-shadow:0 18px 40px -16px rgba(21,23,28,.35)}
/* opening motion */
.motion .scene .kicker,.motion .scene h1,.motion .scene .tagline,.motion .scene .btns{animation:rise 1s cubic-bezier(.2,.8,.2,1) both}
.motion .scene .kicker{animation-delay:.05s}.motion .scene h1{animation-delay:.12s}.motion .scene .tagline{animation-delay:.3s}.motion .scene .btns{animation-delay:.44s}
.motion .scene h1 .app-ic{animation:pop .9s cubic-bezier(.2,.8,.2,1.25) .2s both}
@keyframes rise{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.4) rotate(-10deg)}to{opacity:1;transform:none}}

/* hero text sits on a soft plate when the concept is busy behind it */
.scene-in::before{content:"";position:absolute;left:50%;top:50%;width:min(92vw,980px);height:min(70%,560px);transform:translate(-50%,-50%);background:radial-gradient(closest-side,var(--tint) 55%,transparent);z-index:-1;pointer-events:none}

/* ---------- concept pieces built in DOM */
.c-dock{position:absolute;left:50%;bottom:clamp(28px,6vh,64px);transform:translateX(-50%);display:flex;align-items:flex-end;gap:10px;padding:10px 14px;border-radius:26px;background:rgba(255,255,255,.62);box-shadow:0 20px 50px -24px rgba(21,60,35,.45);pointer-events:auto}
.c-dock img{display:block;width:var(--s,58px);height:var(--s,58px);border-radius:23%;transform:translateY(calc(var(--lift,0) * -1px))}
.c-dock .w{width:var(--s,58px);height:var(--s,58px);border-radius:16px;background:#fff;display:grid;place-items:center;font:800 calc(var(--s,58px) * .3)/1 var(--display);color:var(--ink);letter-spacing:-.04em}
.c-dock .w.wide{width:calc(var(--s,58px) * 2.3);grid-template-columns:auto 1fr;gap:8px;padding:0 10px;font:600 calc(var(--s,58px) * .2)/1.15 var(--text);text-align:left}
.c-dock .w.wide i{width:calc(var(--s,58px) * .62);height:calc(var(--s,58px) * .62);border-radius:9px;background:#1f8f4e}
.c-dock .sep{width:2px;align-self:stretch;margin:6px 2px;background:rgba(21,23,28,.15);border-radius:2px}
@media (max-width:760px){.c-dock .hide-s{display:none}}

.c-notch{position:absolute;left:50%;top:0;transform:translateX(-50%);height:44px;width:200px;background:#0d0d10;border-radius:0 0 22px 22px;display:flex;align-items:center;gap:12px;padding:0 16px;overflow:hidden;transition:width .7s cubic-bezier(.2,.8,.2,1),height .7s cubic-bezier(.2,.8,.2,1),border-radius .7s}
.c-notch.open{width:min(520px,86vw);height:118px;border-radius:0 0 34px 34px}
.c-notch img{width:72px;height:72px;border-radius:14px;opacity:0;transform:scale(.6);transition:opacity .4s .25s,transform .5s .25s}
.c-notch .meta{flex:1;color:#fff;text-align:left;opacity:0;transition:opacity .4s .3s;font:600 15px/1.3 var(--text)}
.c-notch .meta small{display:block;color:#b8b8c4;font-weight:500}
.c-notch .bars{display:flex;gap:3px;align-items:center;height:30px;opacity:0;transition:opacity .4s .3s}
.c-notch .bars i{width:4px;border-radius:3px;background:#ff5f8f;height:30%}
.c-notch.open img,.c-notch.open .meta,.c-notch.open .bars{opacity:1;transform:none}
.c-shelf{position:absolute;left:50%;top:150px;transform:translateX(-50%);display:flex;gap:14px}
.c-shelf b{display:block;width:54px;height:66px;border-radius:10px;background:#fff;box-shadow:0 16px 30px -16px rgba(80,20,40,.4);position:relative}
.c-shelf b::after{content:"";position:absolute;left:10px;right:10px;top:12px;height:6px;border-radius:3px;background:var(--tint-2);box-shadow:0 12px 0 var(--tint-2),0 24px 0 var(--tint-2)}

.c-float{position:absolute;border-radius:16px;box-shadow:0 20px 40px -22px rgba(30,40,90,.5);will-change:transform}

/* ---------- intro under the hero */
.ahero{background:var(--bg);color:var(--ink)}
.ahero .wrap{min-height:0;padding-block:clamp(64px,8vw,128px) clamp(40px,6vw,80px)}
.ahero .mark{color:var(--muted)}
.ahero .mark img{border-radius:14px}
.ahero .lead{font-size:var(--step-lead);max-width:34ch;color:var(--ink)}
.ahero .note{color:var(--muted);opacity:1}
.ahero.wide .head-row{grid-template-columns:minmax(0,1fr);gap:20px;max-width:900px}
.ahero.wide .ahero-pic{margin-top:clamp(32px,4vw,64px)}
.phone{border-radius:44px;box-shadow:0 40px 80px -40px rgba(21,23,28,.4)}
.mac{border-radius:24px;overflow:hidden;box-shadow:0 40px 80px -40px rgba(21,23,28,.4)}

/* ---------- surfaces: rounded and soft; the old ink blocks take the app's colour */
.btn{border-radius:999px;font-weight:600;letter-spacing:-.005em}
.btn.alt{box-shadow:inset 0 0 0 1.5px currentColor}
.sec{position:relative}
.sec[style*="var(--surface)"],.sec.alt{background:var(--tint)!important;border-radius:var(--r-card);margin-inline:clamp(8px,1.2vw,16px)}
.on-ink{background:var(--accent);color:var(--accent-ink);border-radius:36px;margin:0 clamp(8px,1.2vw,16px)}
.on-ink .muted,.on-ink .note,.on-ink p{color:inherit}
.on-ink .muted{opacity:.82}
.on-ink .btn{background:#fff;color:var(--ink)}
.on-ink .btn:hover{background:var(--ink);color:#fff}
.on-ink .btn.alt{background:transparent;color:inherit;box-shadow:inset 0 0 0 1.5px currentColor}
.on-ink + .on-ink{margin-top:12px}
.field{border-radius:var(--r-card)}
.plain-note{border-radius:22px}
.row{border-radius:20px}
.faq details{border-radius:20px;background:var(--paper)}
.tl li{border-radius:16px}
.exh-pic{border-radius:var(--r-card);overflow:hidden}
.wk-pic,.stage,.stage .wk-pic{border-radius:var(--r-card)}
.idx-row{border-radius:16px}
.idx-row b{text-transform:none;letter-spacing:-.035em;font-weight:800}
.wk-name,.wk-hl{text-transform:none}
.stage-name{text-transform:none;letter-spacing:-.045em}
.state{text-transform:none;letter-spacing:-.04em}
.verbs h3{letter-spacing:-.045em}
.close h2{letter-spacing:-.05em}
.mailbig{text-transform:none;letter-spacing:-.04em}
.pref-tab{border-radius:18px}
.pref-tab b,.cap h3,.exh h3,.rule h3,.why3 h3,.points h3,.loop{text-transform:none}
.sp,.parkdemo,.island-demo,.wing,.glass-demo,.vid{border-radius:var(--r-card);overflow:hidden}
.portrait img{border-radius:var(--r-card)}
.person img{border-radius:22px}
.tour-count{border-radius:999px}
.cap-img,.tour-phone{border-radius:44px}
.loop span+span::before{border-radius:4px}

/* ---------- footer: the app's name big, the menu beside it; no landscape */
.foot{background:var(--tint);border-radius:36px 36px 0 0;overflow:hidden;margin:clamp(8px,1.4vw,20px) clamp(8px,1.2vw,16px) 0}
.foot-pic{display:none}
.foot-menu nav a{text-transform:none;letter-spacing:-.035em;font-family:var(--display);font-weight:700}
.foot-big{padding:0 var(--gut) 12px;font:800 clamp(4.5rem,17vw,17rem)/.8 var(--display);letter-spacing:-.06em;color:var(--accent);white-space:nowrap;overflow:hidden}
.foot-big span{display:inline-block}

/* scroll-driven entrances that studio.js adds */
.st-rise{will-change:transform}
@media (prefers-reduced-motion:reduce){.scene-art,.scene-in{transform:none!important;opacity:1!important}}