/* Foundworks Studio page (/studio). Page-scoped: every class starts with st- (the Rivera preview inside the mock
   app uses rv-). Loaded after site.css on this page only.
   The page uses scroll-linked motion but never pins: nothing is sticky, nothing holds the viewport, and the page
   always scrolls natively. The finished state of everything is the default markup and CSS; studio.js arms the
   moments it animates. No JS, reduced motion and ?still all show the finished page. */

[data-page="studio"]{--st-blue:#4589FF;--st-acc:#1F49D8}

/* ======================= the greeting ======================= */
/* The F is the metal F (metal.js). The overlay (.st-mark) holds the artboard brackets, the marquee and the snap
   guides, laid over the F's own box with the shader's math: F height = 0.8 * ms * H, centre = H/2 - my * H.
   studio.js writes --H (innerHeight, the canvas height), --my and --ms from FWMetal.home(); these are the defaults. */
.st-hero{position:relative;height:100vh;height:100svh;min-height:540px;overflow-x:clip;
  --H:100vh;--my:.15;--ms:.46;--t:1;
  --fh:calc(var(--ms) * .8 * var(--H));--fw:calc(var(--fh) * .646419);
  --ftop:calc(var(--H) * .5 - var(--my) * var(--H) - var(--fh) * .5)}
@supports (height:100svh){.st-hero{--H:100svh}}
@media (max-aspect-ratio:9/10){.st-hero{--my:.18;--ms:.40}}
.st-fast .st-hero{--t:.273}
.st-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46%;pointer-events:none;background:linear-gradient(0deg,rgba(5,6,8,.86),rgba(5,6,8,.5) 55%,rgba(5,6,8,0))}
/* a dark bed under the words, so they read over the liquid */
.st-greet::before{content:"";position:absolute;left:50%;top:-34%;width:min(1100px,150%);height:190%;transform:translateX(-50%);z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(5,6,8,.82),rgba(5,6,8,.6) 55%,rgba(5,6,8,0))}
.st-mark{position:absolute;z-index:1;left:calc(50% - var(--fw) / 2);top:var(--ftop);width:var(--fw);height:var(--fh);pointer-events:none;
  transform:translate3d(var(--mk-dx,0px),var(--mk-dy,0px),0)}
.st-mk{display:block;width:100%;height:100%;overflow:visible}
.st-mk-f{fill:var(--paper)}
html.js .st-mk-f{display:none}
html.js.st-flat .st-mk-f{display:inline}
.st-bk rect{fill:var(--st-blue)}
.st-mq{fill:none;stroke:var(--st-blue);stroke-width:1;vector-effect:non-scaling-stroke;opacity:0}
.st-gd line,.st-gd path{fill:none;stroke:var(--st-blue);stroke-width:1;vector-effect:non-scaling-stroke;opacity:0}
.st-greet{position:absolute;z-index:2;left:var(--gut);right:var(--gut);top:calc(var(--ftop) + var(--fh) + clamp(22px,3.4vh,40px));text-align:center}
.st-word{display:flex;justify-content:center;align-items:center;gap:.95em;font:600 clamp(12px,min(4.3vw,calc(1.9vw + 10px)),28px)/1 var(--mono);letter-spacing:.3em;text-transform:uppercase;color:var(--paper)}
.st-word span{margin-right:-.3em}
.st-word .s{font-weight:400}
.st-word i{display:block;width:1px;height:1.15em;background:rgba(246,241,234,.34)}
.st-ed{display:flex;justify-content:center;align-items:center;gap:16px;margin-top:clamp(16px,2.2vh,22px);font:500 11px/1 var(--mono);letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}
.st-ed .st-tg{font-size:11px}
.st-lede{margin:clamp(16px,2.4vh,24px) auto 0;max-width:46ch;font-size:clamp(15.5px,1.25vw,18.5px);line-height:1.55;color:var(--muted);text-wrap:balance}
.st-cue{position:absolute;z-index:2;left:50%;bottom:clamp(22px,4.5vh,44px);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:14px;pointer-events:none}
.st-cue span{font:500 10.5px/1 var(--mono);letter-spacing:.3em;text-transform:uppercase;color:var(--dim);white-space:nowrap}
.st-cue i{position:relative;display:block;width:1px;height:28px;overflow:hidden;background:var(--line-2)}
.st-cue i::after{content:"";position:absolute;inset:0;background:var(--paper);transform:translate3d(0,-100%,0)}
@media (prefers-reduced-motion:no-preference){html:not(.st-still) .st-cue i::after{animation:st-cue 2.4s var(--ease) calc(2.6s * var(--t)) infinite}}
@keyframes st-cue{0%{transform:translate3d(0,-100%,0)}65%,100%{transform:translate3d(0,100%,0)}}
.st-skip{position:absolute;z-index:3;right:var(--gut);bottom:clamp(22px,4.5vh,44px);font:500 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--dim);padding:8px 0;transition:color .2s}
.st-skip:hover{color:var(--paper)}
@media (max-width:640px){.st-skip{bottom:auto;top:calc(var(--nav) + 12px);opacity:0;pointer-events:none}.st-skip:focus-visible{opacity:1;pointer-events:auto}}

/* the edition tag. Under 48 px tall it is a hairline box in Plex Mono Regular (logo graft 2); .st-plate is the
   bracketed tag for larger sizes. */
.st-tg{display:inline-flex;align-items:center;justify-content:center;height:2.4em;padding:0 .78em 0 1.08em;font:400 1em/1 var(--mono);letter-spacing:.3em;text-transform:uppercase;color:var(--paper);box-shadow:inset 0 0 0 1px rgba(246,241,234,.36);white-space:nowrap}

/* the greeting's timeline: plain CSS, so it starts with the first paint; studio.js runs the metal on the same clock
   and fast-forwards everything on the first wheel, touch, key or click. --t shrinks it on a second visit. */
@keyframes st-mq{0%{transform:scale(.001);opacity:0}12%{opacity:.85}100%{transform:none;opacity:.85}}
@keyframes st-out{from{opacity:.85}to{opacity:0}}
@keyframes st-gx{from{transform:scaleX(0)}}
@keyframes st-gy{from{transform:scaleY(0)}}
@keyframes st-flash{0%{opacity:0}16%{opacity:.9}100%{opacity:0}}
@keyframes st-track{from{opacity:0;letter-spacing:.4em;transform:translate3d(0,14px,0)}}
@keyframes st-rise{from{opacity:0;transform:translate3d(0,10px,0)}}
@keyframes st-fade{from{opacity:0}}
@keyframes st-bar{0%{transform:translate(184.6px,-285.5px);opacity:0}35%{opacity:1}}
@keyframes st-stem{0%{transform:translate(-184.6px,285.5px);opacity:0}35%{opacity:1}}
@media (prefers-reduced-motion:no-preference){
  html:not(.st-still) .st-mq{transform-box:fill-box;transform-origin:0 0;animation:st-mq calc(.5s * var(--t)) cubic-bezier(.3,.7,.1,1) calc(.15s * var(--t)) both,st-out calc(.4s * var(--t)) ease calc(1.05s * var(--t)) both}
  html:not(.st-still) .st-bk-tl .h{transform-box:fill-box;transform-origin:0 0;animation:st-gx calc(.4s * var(--t)) var(--ease) calc(.2s * var(--t)) both}
  html:not(.st-still) .st-bk-tl .v{transform-box:fill-box;transform-origin:0 0;animation:st-gy calc(.4s * var(--t)) var(--ease) calc(.2s * var(--t)) both}
  html:not(.st-still) .st-bk-br .h{transform-box:fill-box;transform-origin:100% 100%;animation:st-gx calc(.4s * var(--t)) var(--ease) calc(.5s * var(--t)) both}
  html:not(.st-still) .st-bk-br .v{transform-box:fill-box;transform-origin:100% 100%;animation:st-gy calc(.4s * var(--t)) var(--ease) calc(.5s * var(--t)) both}
  html:not(.st-still) .st-gd .g1,html:not(.st-still) .st-gd .g5{animation:st-flash calc(.5s * var(--t)) linear calc(.95s * var(--t)) both}
  html:not(.st-still) .st-gd .g3,html:not(.st-still) .st-gd .g4{animation:st-flash calc(.45s * var(--t)) linear calc(1s * var(--t)) both}
  html:not(.st-still) .st-gd .g2,html:not(.st-still) .st-gd .g6,html:not(.st-still) .st-gd .g7{animation:st-flash calc(.5s * var(--t)) linear calc(1.05s * var(--t)) both}
  html:not(.st-still) .st-word{animation:st-track calc(.65s * var(--t)) var(--ease) calc(.95s * var(--t)) both}
  html:not(.st-still) .st-ed{animation:st-rise calc(.5s * var(--t)) var(--ease) calc(1.3s * var(--t)) both}
  html:not(.st-still) .st-lede{animation:st-rise calc(.5s * var(--t)) var(--ease) calc(1.38s * var(--t)) both}
  html:not(.st-still) .st-cue>span,html:not(.st-still) .st-cue>i,html:not(.st-still) .st-skip{animation:st-fade .6s ease calc(2.2s * var(--t)) both}
  html.st-flat:not(.st-still) .st-mk-f .bar{animation:st-bar .8s cubic-bezier(.16,.9,.24,1) calc(.28s * var(--t)) both}
  html.st-flat:not(.st-still) .st-mk-f .stem{animation:st-stem .8s cubic-bezier(.16,.9,.24,1) calc(.45s * var(--t)) both}
}
/* While the page drives the metal from the scroll, its fade must not lag behind. */
.st-scroll #metal{transition:none}

/* ======================= the app window sweeps through ======================= */
.st-sweep{position:relative;overflow-x:clip;padding:clamp(24px,6vh,72px) 0 clamp(64px,10vh,120px);
  background:radial-gradient(56% 42% at 50% 52%,rgba(69,137,255,.13),rgba(69,137,255,0) 72%),linear-gradient(180deg,rgba(5,6,8,.86) 0,var(--bg) 220px)}
.st-app-wrap{position:relative;max-width:1200px;margin:0 auto;perspective:1800px}
.st-app{position:relative;transform-origin:50% 100%}
.st-abk{position:absolute;z-index:2;width:clamp(28px,4vw,56px);height:clamp(28px,4vw,56px);pointer-events:none;transform:scale(var(--abk,1))}
.st-abk.tl{left:-14px;top:-14px;border-top:3px solid var(--st-blue);border-left:3px solid var(--st-blue);transform-origin:0 0}
.st-abk.br{right:-14px;bottom:-14px;border-bottom:3px solid var(--st-blue);border-right:3px solid var(--st-blue);transform-origin:100% 100%}

/* ======================= the tour: five normal-flow chapters ======================= */
.st-tour{position:relative;background:var(--bg);padding:clamp(40px,7vh,90px) 0 clamp(80px,12vh,140px)}
.st-tour-head{max-width:760px}
.st-tour-head .k{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.st-tour-head .k::before{content:"";width:28px;height:1px;background:var(--blue)}
.st-tour-head .lede{margin-top:24px}
.st-beats-wrap{position:relative;margin-top:clamp(64px,10vh,120px)}
.st-rail{position:absolute;left:5px;top:0;bottom:0;width:1px;background:var(--line-2);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(180deg,transparent,#000 6%,#000 94%,transparent)}
.st-rail i{position:absolute;inset:0;background:var(--blue);transform-origin:50% 0;transform:scaleY(var(--rail,0))}
.st-beats{list-style:none;margin:0;padding:0;display:grid;gap:clamp(96px,15vh,170px)}
.st-beat{display:grid;grid-template-columns:316px minmax(0,1fr);gap:56px;align-items:center;scroll-margin-top:calc(var(--nav) + 24px)}
.st-txt{position:relative;padding-left:40px}
.st-n{position:relative;display:flex;align-items:center;gap:12px;font:500 11.5px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--paper)}
.st-n span{color:var(--dim)}
.st-node{position:absolute;left:-40px;top:50%;width:11px;height:11px;margin-top:-5.5px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line-2)}
.st-node::after{content:"";position:absolute;inset:0;background:var(--blue);transform:scale(var(--node,1));transition:transform .5s var(--ease)}
.st-txt h3{margin-top:22px;font-weight:300;font-size:clamp(30px,2.7vw,42px);line-height:1.06;letter-spacing:-.03em;color:var(--paper);text-wrap:balance}
.st-say{margin-top:18px;color:var(--muted);font-size:17px;line-height:1.6;max-width:38ch}
.st-meta{margin-top:24px;font:500 11.5px/1.5 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--blue-2)}
.st-made{margin-top:clamp(64px,10vh,110px);padding-top:22px;border-top:1px solid var(--line);display:flex;gap:10px 22px;align-items:baseline;flex-wrap:wrap;font:400 11.5px/1.6 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.st-made .tlink{font:500 11.5px/1 var(--mono);letter-spacing:.14em}
@media (max-width:1239px){
  .st-beat{grid-template-columns:minmax(0,1fr);gap:34px}
  .st-txt{max-width:640px}
  .st-shot{margin-left:40px}
}
@media (max-width:640px){
  .st-rail,.st-node{display:none}
  .st-txt{padding-left:0}
  .st-shot{margin-left:0}
  .st-beats{gap:88px}
  .st-txt h3{margin-top:16px}
}

/* ======================= the Studio Core window (HTML and CSS) =======================
   Each screen is laid out in em at a fixed design size: 1em is 1/96 of the window's width (1/112 for the big
   window), so the whole window scales with its column and the text stays real, sharp text. Below 760 px the
   window shows a focus crop of the step instead, at a readable size. */
.st-shot{position:relative;container-type:inline-size;min-width:0}
.st-win{--ink:#161616;--mut:#5F6368;--dimc:#8A8F96;--ln:#E5E0D8;--fld:#D9D4CB;--ws:#F5F3EF;--cvb:#ECE8E1;--acc:#1F49D8;--ok:#24A148;
  position:relative;overflow:hidden;font-size:10px;font-size:calc(100cqw / 96);line-height:1.45;font-family:var(--sans);color:var(--ink);background:var(--ws);text-align:left;
  box-shadow:0 0 0 1px var(--line-2),0 50px 100px -30px rgba(0,0,0,.78),0 0 110px -40px rgba(69,137,255,.3);
  pointer-events:none;-webkit-user-select:none;user-select:none}
.st-win.st-xl{font-size:calc(100cqw / 112)}
:where(.st-win) :where(p,ul,ol,h4,h5){margin:0;padding:0;list-style:none}
.st-win .ph{line-height:1}
/* window chrome */
.st-tb{position:relative;height:2.8em;display:flex;align-items:center;gap:.7em;padding:0 1.3em;background:#1A1D23;border-bottom:1px solid rgba(255,255,255,.06)}
.st-tb i{width:1em;height:1em;border-radius:50%;background:#3A3E46}
.st-tb span{position:absolute;left:50%;transform:translateX(-50%);font:400 1.1em/1 var(--mono);letter-spacing:.06em;color:#8E939C;white-space:nowrap}
.st-top{height:4.6em;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1.6em;padding:0 1.6em;background:#0B0C0E;color:#F2F3F5;border-bottom:1px solid rgba(255,255,255,.06)}
.st-id{display:flex;align-items:center;gap:.9em;min-width:0}
.st-fi{width:1.5em;height:2.32em;fill:var(--paper);flex:none}
.st-id-t{display:flex;flex-direction:column;gap:.42em}
.st-id-t b{font:600 .95em/1 var(--mono);letter-spacing:.3em;text-transform:uppercase;color:var(--paper)}
.st-id-t>span{display:flex;align-items:center;gap:.55em;font:400 .95em/1 var(--mono);letter-spacing:.3em;text-transform:uppercase;color:#B4B9C1}
.st-id .st-tg{font-size:.78em;height:1.9em;padding:0 .5em 0 .8em;letter-spacing:.24em}
.st-trk{display:flex;align-items:center;gap:.5em}
.st-trk i{width:3em;height:.4em;background:#393939}
.st-trk i.d{background:#78A9FF}
.st-trk i.c{background:var(--paper)}
.st-trk span{margin-left:.7em;font:500 1.1em/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#C6C9CE;white-space:nowrap}
.st-acts{justify-self:end;display:flex;align-items:center;gap:.8em}
.st-sw{display:inline-flex;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.st-sw b{padding:.55em .95em;font:500 1.15em/1 var(--sans);color:#8E939C;transition:background .11s cubic-bezier(.2,0,.38,.9),color .11s cubic-bezier(.2,0,.38,.9)}
.st-sw b.on,.st-sw.ph b:first-child{background:rgba(255,255,255,.1);color:var(--paper)}
.st-sw.ph.on b:first-child{background:transparent;color:#8E939C}
.st-sw.ph.on b:last-child{background:rgba(255,255,255,.1);color:var(--paper)}
.st-gb{padding:.6em 1.05em;font:500 1.15em/1 var(--sans);color:#F2F3F5;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);white-space:nowrap}
.st-pb{padding:.65em 1.25em;font:600 1.15em/1 var(--sans);background:var(--acc);color:#fff;white-space:nowrap;transition:transform .11s cubic-bezier(.2,0,.38,.9),background .11s}
.st-pb.press,.st-btn.press{transform:scale(.96);background:#173AB0}
.st-live{display:flex;align-items:center;gap:.5em;font:500 1.1em/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#6FDC8C}
.st-live i{width:.75em;height:.75em;border-radius:50%;background:#42BE65;box-shadow:0 0 0 .3em rgba(66,190,101,.18)}
/* workspace */
.st-ws{position:relative;display:flex;height:52.6em}
.st-xl .st-ws{height:56.6em}
.st-lp{flex:none;width:24em;display:flex;flex-direction:column;background:#fff;border-right:1px solid var(--ln);padding:2.2em 2em}
.st-ip{flex:none;width:26em;display:flex;flex-direction:column;background:#fff;border-left:1px solid var(--ln);padding:2.2em 2em}
.st-cv{position:relative;flex:1;min-width:0;padding:2.4em;background:var(--cvb);overflow:hidden}
.st-pv{position:relative;width:100%;height:100%;overflow:hidden;background:#fff;box-shadow:0 0 0 1px var(--ln),0 1.2em 3.2em -1.2em rgba(22,22,22,.2)}
.st-lb{font:500 1.05em/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--dimc);margin-bottom:1.3em}
.st-lb~.st-lb{margin-top:2.2em}
.st-pages li,.st-secs li{display:flex;align-items:center;gap:.7em;padding:.62em .75em;font:400 1.3em/1.2 var(--sans);color:var(--ink)}
.st-pages li.on,.st-secs li.on{background:#EEF2FE;color:var(--acc);box-shadow:inset .18em 0 0 var(--acc)}
.st-secs li em{margin-left:auto;font:500 .78em/1 var(--mono);font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:#B54708;background:#FDEBDD;padding:.35em .5em}
.st-grip{flex:none;width:.6em;height:1em;background:radial-gradient(circle,#B9B4AC .09em,transparent .11em) 0 0/.3em .3em;opacity:.9}
.st-btn{display:inline-flex;align-items:center;justify-content:center;padding:.95em 1.4em;font:600 1.3em/1 var(--sans);background:var(--acc);color:#fff;white-space:nowrap;transition:transform .11s cubic-bezier(.2,0,.38,.9),background .11s}
.st-mute{font:400 1.15em/1 var(--mono);color:var(--dimc);letter-spacing:.06em}
.st-lp-foot{margin-top:auto;font:400 1.2em/1.5 var(--sans);color:var(--mut)}
/* checks: a green tick, or an open ring while armed */
.st-ticks li,.st-checks li{position:relative;padding:.72em 0 .72em 2.1em;font:400 1.3em/1.3 var(--sans);color:var(--ink);border-bottom:1px solid #F0ECE6}
.st-ticks li::before,.st-checks li::before{content:"";position:absolute;left:0;top:50%;width:1.15em;height:1.15em;margin-top:-.575em;border-radius:50%;background:var(--ok);transition:background .26s cubic-bezier(.2,0,.38,.9),box-shadow .26s}
.st-ticks li::after,.st-checks li.ok::after{content:"";position:absolute;left:.41em;top:50%;width:.3em;height:.56em;margin-top:-.38em;border:solid #fff;border-width:0 .14em .14em 0;transform:rotate(45deg);transition:opacity .2s}
.st-checks li.todo{color:#B54708}
.st-checks li.todo::before{background:transparent;box-shadow:inset 0 0 0 .14em #F0A35E}
.st-ip-h{font:500 1.6em/1.2 var(--sans);color:var(--ink);margin:-.4em 0 .9em}
.st-ip-note{margin-top:1.4em;font:400 1.2em/1.5 var(--sans);color:var(--mut)}
.st-ip .st-btn{margin-top:auto;align-self:flex-start}

/* ----- the Rivera preview (Rivera's own tokens: navy, orange, Public Sans) ----- */
.rv{position:relative;font-family:"Public Sans",var(--sans);color:#0C1B2E;background:#fff;line-height:1.4}
.rv-hdr{position:relative;z-index:1;display:flex;align-items:center;gap:1.8em;height:5em;padding:0 2.4em;background:#fff;border-bottom:1px solid #DCE3EB}
.rv-logo{display:flex;align-items:center;gap:.55em;font:800 1.2em/1 "Public Sans",var(--sans);letter-spacing:-.01em;color:#0F2B4C;white-space:nowrap}
.rv-logo i{position:relative;flex:none;width:1.45em;height:1.45em;background:#0F2B4C;border-radius:.18em}
.rv-logo i::after{content:"";position:absolute;left:.42em;top:.3em;width:.5em;height:.7em;border:solid #F26A1B;border-width:0 0 .16em .16em}
.rv-nav{margin-left:auto;display:flex;gap:1.7em;font:600 .95em/1 "Public Sans",var(--sans);color:#3A485C;white-space:nowrap}
.rv-hdr>.rv-btn{margin-left:auto}
.rv-nav+.rv-btn{margin-left:0}
.rv-btn{display:inline-flex;align-items:center;font:700 .95em/1 "Public Sans",var(--sans);padding:.95em 1.25em;background:#F26A1B;color:#fff;border-radius:.4em;white-space:nowrap}
.rv-btn.o{background:transparent;box-shadow:inset 0 0 0 1px rgba(255,255,255,.72)}
.rv-hero{position:relative;display:flex;align-items:center;min-height:29em;padding:3.6em 2.4em;color:#fff;
  background:linear-gradient(90deg,rgba(10,31,56,.95) 0%,rgba(10,31,56,.8) 40%,rgba(10,31,56,.12) 78%),url(/media/studio/rivera-desk.webp) 62% 50%/cover #24364F}
.rv-hero-in{position:relative;max-width:32em}
.rv-pill{display:inline-flex;align-items:center;gap:.55em;padding:.5em .9em;font:600 .9em/1 "Public Sans",var(--sans);border-radius:2em;background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.24)}
.rv-pill i{width:.6em;height:.6em;border-radius:50%;background:#F26A1B}
.rv-h1{margin:.45em 0 0;font:800 2.9em/1.04 "Public Sans",var(--sans);letter-spacing:-.025em;max-width:11.5em;text-wrap:balance}
.rv-sub{margin-top:.8em;font:400 1.12em/1.5 "Public Sans",var(--sans);color:rgba(255,255,255,.86);max-width:26em}
.rv-ctas{display:flex;gap:.8em;margin-top:1.8em}
.rv-svc,.rv-rev,.rv-area{padding:3.2em 2.4em}
.rv-rev{background:#F2F5F8}
.rv-k{display:flex;align-items:center;gap:.6em;font:700 .8em/1 "Public Sans",var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#DE5A0C}
.rv-k::before{content:"";width:1.6em;height:.16em;background:#F26A1B}
.rv-h2{margin:.55em 0 0;font:800 1.75em/1.12 "Public Sans",var(--sans);letter-spacing:-.02em;color:#0F2B4C}
.rv-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1em;margin-top:1.7em}
.rv-cards>div{display:flex;flex-direction:column;gap:.35em;padding:1.3em;border:1px solid #DCE3EB;border-radius:.5em;background:#fff}
.rv-cards b{font:700 1.05em/1.25 "Public Sans",var(--sans);color:#0C1B2E}
.rv-cards span{font:400 .9em/1.4 "Public Sans",var(--sans);color:#5A6778}
.rv-cards em{margin-top:.45em;font:800 1.25em/1 "Public Sans",var(--sans);font-style:normal;color:#0F2B4C}
.rv-cards .rv-ph{border:1px dashed var(--acc);background:rgba(31,73,216,.035);min-height:9.5em}
.rv-ph i{font-size:1.3em;color:var(--acc)}
.rv-ph b{color:var(--acc)}
.rv-area{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2em;align-items:center}
.rv-towns{display:flex;flex-wrap:wrap;gap:.55em;margin-top:1.4em}
.rv-towns span{padding:.5em .95em;font:600 .95em/1 "Public Sans",var(--sans);border-radius:2em;background:#F2F5F8;color:#0F2B4C}
.rv-map{position:relative;height:13em;border-radius:.5em;overflow:hidden;background:linear-gradient(#DCE3EB 1px,transparent 1px) 0 0/2.4em 2.4em,linear-gradient(90deg,#DCE3EB 1px,transparent 1px) 0 0/2.4em 2.4em,#EEF2F6}
.rv-map::before{content:"";position:absolute;left:18%;top:-10%;width:60%;height:120%;border-radius:50%;background:rgba(242,106,27,.08);box-shadow:inset 0 0 0 1px rgba(242,106,27,.35)}
.rv-map i{position:absolute;left:var(--x);top:var(--y);width:1.1em;height:1.1em;margin:-.55em;border-radius:50%;background:#F26A1B;box-shadow:0 0 0 .25em #fff}
.rv-foot{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:1.6em 2em;padding:2.6em 2.4em 2.4em;background:#0A1F38;font:400 .95em/1.4 "Public Sans",var(--sans);color:rgba(255,255,255,.78)}
.rv-foot .rv-logo{color:#fff}
.rv-foot .rv-logo i{background:#163B66}
.rv-credit{position:relative;justify-self:start;grid-column:1 / -1;display:inline-flex;align-items:center;gap:.5em;font:400 .88em/1 "Public Sans",var(--sans);color:rgba(255,255,255,.7)}
.rv-credit svg{width:.7em;height:1.08em;fill:currentColor}
.rv-credit em{display:none}

/* ----- 01 Answer ----- */
.st-qs{counter-reset:q}
.st-qs li{position:relative;counter-increment:q;padding:.75em .6em .75em 2.4em;font:400 1.3em/1.25 var(--sans);color:var(--mut);border-bottom:1px solid #F0ECE6;transition:color .24s cubic-bezier(.2,0,.38,.9),background .24s cubic-bezier(.2,0,.38,.9)}
.st-qs li::before{content:counter(q);position:absolute;left:.6em;top:50%;transform:translateY(-50%);font:500 .8em/1 var(--mono);color:var(--dimc)}
.st-qs li em{font-style:normal;color:var(--dimc);font-size:.85em;margin-left:.3em}
.st-qs li.ok{color:var(--ink)}
.st-qs li.ok::before{content:"";left:.75em;width:.32em;height:.62em;margin-top:-.08em;border:solid var(--ok);border-width:0 .14em .14em 0;transform:translateY(-50%) rotate(45deg)}
.st-qs li.cur{color:var(--acc);font-weight:500;background:#EEF2FE;box-shadow:inset .18em 0 0 var(--acc)}
.st-qs li.cur::before{color:var(--acc)}
.st-cv-q{display:flex;justify-content:center;align-items:flex-start;padding:2.6em 3em}
.st-card{width:100%;max-width:60em;background:#fff;padding:2.6em 3em 2.4em;box-shadow:0 0 0 1px var(--ln),0 1.2em 3em -1.6em rgba(22,22,22,.18)}
.st-card-h{font:500 2.1em/1.15 var(--sans);letter-spacing:-.015em;color:var(--ink)}
.st-card-s{margin-top:.45em;font:400 1.25em/1.3 var(--sans);color:var(--mut)}
.st-field{margin-top:2.1em}
.st-field .st-lb{margin-bottom:1em}
.st-rows{display:grid;gap:.6em}
.st-row{display:grid;grid-template-columns:minmax(0,1fr) 12em;gap:.6em}
.st-in{display:flex;align-items:center;height:2.55em;padding:0 .85em;font:400 1.3em/1 var(--sans);color:var(--ink);background:#FBFAF8;box-shadow:inset 0 0 0 1px var(--fld);white-space:nowrap;overflow:hidden}
.st-in-p{color:var(--mut)}
.st-in-p b{font-weight:500;color:var(--ink)}
.st-add{margin-top:.8em;font:500 1.2em/1 var(--sans);color:var(--acc)}
.st-chips{display:flex;flex-wrap:wrap;gap:.55em}
.st-chip{padding:.7em .95em;font:500 1.25em/1 var(--sans);color:var(--mut);box-shadow:inset 0 0 0 1px var(--fld);transition:background .11s cubic-bezier(.2,0,.38,.9),color .11s cubic-bezier(.2,0,.38,.9),box-shadow .11s cubic-bezier(.2,0,.38,.9)}
.st-chip.on{background:#EEF2FE;color:var(--acc);box-shadow:inset 0 0 0 1px var(--acc)}
.st-chip.add{color:var(--acc);box-shadow:none;outline:1px dashed #C9C3B9;outline-offset:-1px}
.st-opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6em}
.st-opt{display:flex;align-items:center;gap:.6em;padding:.95em .95em;font:500 1.25em/1 var(--sans);color:var(--ink);box-shadow:inset 0 0 0 1px var(--fld);white-space:nowrap;transition:box-shadow .24s cubic-bezier(.2,0,.38,.9),background .24s cubic-bezier(.2,0,.38,.9)}
.st-opt i{font-size:1.15em;color:var(--mut)}
.st-opt.on{background:#EEF2FE;box-shadow:inset 0 0 0 2px var(--acc)}
.st-opt.on i{color:var(--acc)}
.st-card-foot{display:flex;align-items:center;justify-content:space-between;gap:1em;margin-top:2.3em;padding-top:1.8em;border-top:1px solid #F0ECE6}

/* ----- 02 Build ----- */
.st-ready{display:flex;align-items:center;gap:.6em;margin-top:auto;font:500 1.3em/1.3 var(--sans);color:var(--ink);transition:opacity .4s cubic-bezier(.4,.14,.3,1)}
.st-ready i{flex:none;width:.7em;height:.7em;border-radius:50%;background:var(--ok);box-shadow:0 0 0 .3em rgba(36,161,72,.15)}
.st-prog{position:absolute;left:0;right:0;top:0;z-index:3;height:.22em;background:rgba(31,73,216,.12);opacity:0;transition:opacity .4s ease}
.st-prog i{position:absolute;inset:0;background:var(--acc);transform-origin:0 50%}
.st-strip{position:absolute;left:0;top:0;width:100%}
.st-pv-build .st-strip{transform:translate3d(0,-33em,0)}
.st-pv-build .rv-hero{min-height:26em}

/* ----- 03 Edit ----- */
.st-pv-edit .rv-hero-e{min-height:42.8em;align-items:center}
.st-pv-edit .rv-hero-in{max-width:none}
.st-pv-edit .rv-h1{font-size:2.7em}
.st-pv-edit .rv-nav{display:none}
.st-pv-edit .st-sel{margin-top:2.7em}
.st-sel{position:relative;margin:.9em -.45em 0;padding:.25em .45em .3em;outline:1px solid var(--st-blue);outline-offset:0;transition:outline-color .24s cubic-bezier(.2,0,.38,.9)}
.st-sel .rv-h1{margin:0}
.st-sel>i{position:absolute;width:1.5em;height:1.5em;pointer-events:none;transition:transform .24s cubic-bezier(.2,0,.38,.9),opacity .24s}
.st-sel>i.tl{left:-.55em;top:-.55em;border-top:.32em solid var(--st-blue);border-left:.32em solid var(--st-blue);transform-origin:0 0}
.st-sel>i.br{right:-.55em;bottom:-.55em;border-bottom:.32em solid var(--st-blue);border-right:.32em solid var(--st-blue);transform-origin:100% 100%}
.st-sel-t{position:absolute;left:-.05em;top:-2.25em;padding:.4em .6em;font:500 .9em/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;background:var(--st-blue);color:#fff;transition:opacity .24s}
.rv-new{margin-top:.75em;font:600 1.25em/1.4 "Public Sans",var(--sans);color:#fff}
.rv-new.hl{animation:st-hl .6s ease both}
@keyframes st-hl{from{background:rgba(120,169,255,.5)}to{background:rgba(120,169,255,0)}}
.st-ask{margin-top:auto;padding:1.2em;background:#FBFAF8;box-shadow:inset 0 0 0 1px var(--fld);transition:box-shadow .24s cubic-bezier(.2,0,.38,.9)}
.st-ask .st-lb{margin-bottom:.9em}
.st-ask.on{box-shadow:inset 0 0 0 2px var(--acc);background:#fff}
.st-ask-in{min-height:2.9em;font:400 1.3em/1.45 var(--sans);color:var(--ink)}
.st-ask-f{display:flex;align-items:center;justify-content:space-between;margin-top:.9em}
.st-ask-f span{font:400 1.05em/1 var(--mono);letter-spacing:.06em;color:var(--dimc)}
.st-ask-f i{display:flex;align-items:center;justify-content:center;width:2.4em;height:2.4em;font-size:1.15em;background:var(--acc);color:#fff;transition:transform .11s cubic-bezier(.2,0,.38,.9)}
.st-ask.send .st-ask-f i{transform:scale(.88)}
.st-ask-m{display:none}
.st-fl{margin-bottom:1.6em}
.st-fl>p:first-child{margin-bottom:.6em;font:500 1em/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dimc)}
.st-fl-in{padding:.7em .8em;font:400 1.25em/1.4 var(--sans);color:var(--ink);background:#FBFAF8;box-shadow:inset 0 0 0 1px var(--fld);transition:box-shadow .24s cubic-bezier(.2,0,.38,.9)}
.st-fl-in.on{box-shadow:inset 0 0 0 2px var(--acc);background:#fff}
.st-fl:first-of-type .st-fl-in{min-height:4.2em}
.st-sws{display:flex;gap:.7em;padding:.2em}
.st-sws i{width:2.3em;height:2.3em;background:var(--c)}
.st-sws i.on{box-shadow:0 0 0 .2em #fff,0 0 0 .34em var(--acc)}
.st-photo{display:flex;align-items:center;gap:1em}
.st-photo span{position:relative;width:9em;height:5.8em;background:url(/media/studio/rivera-desk.webp) 60% 50%/cover #24364F}
.st-photo span i{position:absolute;left:66%;top:56%;width:1em;height:1em;margin:-.5em;border-radius:50%;box-shadow:0 0 0 .16em #fff,0 0 0 .3em rgba(0,0,0,.25)}
.st-photo b{font:500 1.2em/1 var(--sans);color:var(--acc)}
.st-cursor,.st-ring{display:none}
.fx-armed .st-cursor,.fx-armed .st-ring{display:block}
.st-cursor{position:absolute;left:0;top:0;z-index:5;width:1.8em;height:2.4em;fill:var(--paper);stroke:#161616;stroke-width:1.4px;stroke-linejoin:round;filter:drop-shadow(0 .2em .3em rgba(0,0,0,.25));
  transform:translate3d(var(--cx,60em),var(--cy,46em),0);transition:transform .7s cubic-bezier(.4,.14,.3,1),opacity .3s}
.st-ring{position:absolute;left:0;top:0;z-index:4;width:3em;height:3em;margin:-1.5em 0 0 -1.5em;border-radius:50%;border:1px solid var(--st-blue);opacity:0;transform:translate3d(var(--rx,0),var(--ry,0),0) scale(.6)}
.st-ring.go{animation:st-ring .24s cubic-bezier(0,0,.3,1) both}
@keyframes st-ring{from{opacity:1;transform:translate3d(var(--rx,0),var(--ry,0),0) scale(.6)}to{opacity:0;transform:translate3d(var(--rx,0),var(--ry,0),0) scale(1.5)}}

/* ----- 04 Phone ----- */
.st-cv-ph{display:flex;align-items:center;justify-content:center;padding:2.2em}
.st-wide{position:absolute;inset:2.4em;overflow:hidden;background:#fff;box-shadow:0 0 0 1px var(--ln);opacity:1;clip-path:inset(0 0 0 0);transition:clip-path .5s cubic-bezier(.4,.14,.3,1),opacity .3s ease}
.st-wide .rv-hero{min-height:44em}
.st-wide.shrink{clip-path:inset(0 calc(50% - 11.2em) 0 calc(50% - 11.2em))}
.st-wide.on{opacity:0}
.st-phone{position:relative;width:22.4em;height:100%;max-height:48.4em;padding:.6em;background:#0B0C0F;box-shadow:0 0 0 1px rgba(0,0,0,.2),0 2em 4em -1.6em rgba(22,22,22,.4);transition:opacity .3s ease}
.rv-m{height:100%;overflow:hidden}
.rv-m .rv-hdr{height:4.4em;padding:0 1.3em;gap:1em}
.rv-ic{margin-left:auto;display:flex;align-items:center;justify-content:center;width:2.9em;height:2.9em;border-radius:.4em;background:#F26A1B;color:#fff;font-size:1em}
.rv-ic i{font-size:1.3em}
.rv-m .rv-hero{min-height:0;height:15em;padding:0;background:linear-gradient(0deg,rgba(10,31,56,.35),rgba(10,31,56,0) 55%),url(/media/studio/rivera-phone.webp) 40% 50%/cover #24364F}
.rv-mbody{padding:1.5em 1.3em 6em}
.rv-m .rv-pill{background:#FDEBDD;color:#B54708;box-shadow:none}
.rv-m .rv-h1{margin-top:.45em;font-size:2.1em;line-height:1.08;color:#0F2B4C}
.rv-m .rv-sub{margin-top:.5em;font-size:1.1em;color:#3A485C}
.rv-m .rv-k{margin-top:1.8em}
.rv-li{display:flex;align-items:baseline;justify-content:space-between;gap:1em;padding:.85em 0;border-bottom:1px solid #DCE3EB}
.rv-li b{font:600 1.05em/1.3 "Public Sans",var(--sans)}
.rv-li em{font:800 1.05em/1 "Public Sans",var(--sans);font-style:normal;color:#0F2B4C;white-space:nowrap}
.rv-bar{position:absolute;left:.75em;right:.75em;bottom:.75em;height:3.9em;display:flex;align-items:center;justify-content:center;gap:.5em;border-radius:.5em;background:#F26A1B;color:#fff;font:700 1.15em/1 "Public Sans",var(--sans);box-shadow:0 0 0 .75em #fff,0 -1.6em 1.2em -.2em rgba(255,255,255,.9)}
.rv-bar i{font-size:1.1em}
.st-phone .rv{height:100%}
.st-phone .rv-m{position:relative}

/* ----- 05 Publish ----- */
.st-pub{width:36em}
.st-pv-pub{--pvh:47.8em}
.st-pv-pub .st-strip{transition:transform .8s cubic-bezier(.4,.14,.3,1)}
.st-pv-pub .st-strip.on{transform:translate3d(0,calc(-100% + var(--pvh)),0)}
.st-pv-pub .rv-hero{min-height:22em}
.st-po{margin-bottom:1em;padding:1.35em 1.5em;box-shadow:inset 0 0 0 1px var(--fld)}
.st-po.on{background:#F7F9FF;box-shadow:inset 0 0 0 2px var(--acc)}
.st-po-h{display:flex;align-items:center;gap:.7em;font:600 1.4em/1.2 var(--sans);color:var(--ink)}
.st-radio{flex:none;width:1em;height:1em;border-radius:50%;box-shadow:inset 0 0 0 .1em #B9B4AC}
.st-po.on .st-radio{background:var(--acc);box-shadow:inset 0 0 0 .1em var(--acc),inset 0 0 0 .3em #fff}
.st-addr{display:flex;align-items:center;gap:.55em;margin-top:1em;padding:.7em .8em;font:500 1.15em/1 var(--mono);color:var(--ink);background:#fff;box-shadow:inset 0 0 0 1px var(--fld);white-space:nowrap}
.st-addr i{color:var(--acc);font-size:1.1em}
.st-po-l{margin-top:.85em;font:500 1.2em/1 var(--sans);color:var(--acc)}
.st-po-s{margin-top:.6em;font:400 1.2em/1.5 var(--sans);color:var(--mut)}
.st-up{margin-top:1.5em}
.st-up-bar{display:block;position:relative;height:.22em;background:#E5E0D8;overflow:hidden}
.st-up-bar i{position:absolute;inset:0;background:var(--acc);transform-origin:0 50%}
.st-up-s{margin-top:.85em;font:500 1em/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dimc)}
.st-up-s span{transition:color .24s}
.st-up.on .st-up-s span,.st-up-s span.lit{color:var(--ink)}
.st-up.on .st-up-s span:last-child,.st-up-s span.lit:last-child{color:var(--ok)}
.st-done{display:flex;align-items:center;gap:.6em;margin-top:1.3em;font:500 1.25em/1.3 var(--sans);color:var(--ink);transition:opacity .4s cubic-bezier(.4,.14,.3,1)}
.st-done i{flex:none;width:.7em;height:.7em;border-radius:50%;background:#42BE65;box-shadow:0 0 0 .3em rgba(66,190,101,.18)}
.st-credit{transition:box-shadow .4s}
.st-credit.on{box-shadow:0 0 0 .45em #0A1F38,0 0 0 .55em var(--st-blue)}
.st-credit.on em{display:block;position:absolute;left:100%;top:50%;margin-left:1.3em;transform:translateY(-50%);padding:.45em .6em;font:500 .9em/1 var(--mono);font-style:normal;letter-spacing:.12em;text-transform:uppercase;background:var(--st-blue);color:#fff;white-space:nowrap}

/* ----- the big window (the sweep): editor at rest ----- */
.st-xl .st-lp{width:22em}
.st-xl .st-ip{width:25em}
.st-xl .st-pv .rv-hero{min-height:27em}

/* ----- armed states: motion.js adds .fx-armed before a screen plays (studio.js registers each chapter as a moment) ----- */
.fx-armed .st-chip,.fx-armed .st-opt{transition-duration:.11s,.11s,.11s}
.fx-armed .st-ticks li{transition:color .26s}
.fx-armed .st-ticks li:not(.on){color:var(--dimc)}
.fx-armed .st-ticks li:not(.on)::before{background:transparent;box-shadow:inset 0 0 0 .1em #C9C3B9}
.fx-armed .st-ticks li:not(.on)::after{opacity:0}
.fx-armed .st-ticks li.busy::before{background:transparent;box-shadow:inset 0 0 0 .12em #DCE3F8;border:.12em solid transparent;border-top-color:var(--acc);animation:st-spin .7s linear infinite}
@keyframes st-spin{to{transform:rotate(360deg)}}
.fx-armed .st-ready:not(.on),.fx-armed .st-done:not(.on){opacity:0}
.fx-armed .st-prog:not(.on){opacity:1}
.fx-armed .st-prog i{transform:scaleX(0)}
.fx-armed .st-prog.run i{animation:st-grow 2.6s var(--fx-x-std) both}
@keyframes st-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.fx-armed .rv-sec{transition:opacity .4s cubic-bezier(.4,.14,.3,1),transform .4s cubic-bezier(.4,.14,.3,1)}
.fx-armed .rv-sec:not(.on){opacity:0;transform:translate3d(0,.8em,0)}
.fx-armed .rv-sec.ghost{opacity:1;transform:none;background:#F7F9FF;box-shadow:inset 0 0 0 1px rgba(31,73,216,.45)}
.fx-armed .rv-sec.ghost>*{opacity:0}
.fx-armed .st-sel:not(.on){outline-color:transparent}
.fx-armed .st-sel:not(.on)>i{transform:scale(0);opacity:0}
.fx-armed .st-sel:not(.on) .st-sel-t{opacity:0}
.fx-armed .rv-new:not(.on){display:none}
.fx-armed .st-selall{background:rgba(120,169,255,.42)}
.fx-armed .st-ask:not(.on){box-shadow:inset 0 0 0 1px var(--fld);background:#FBFAF8}
.fx-armed .st-wide:not(.on){opacity:1}
.fx-armed .st-phone:not(.on){opacity:0}
.fx-armed .st-up:not(.on) .st-up-bar i{transform:scaleX(0)}
.fx-armed .st-up.run .st-up-bar i{animation:st-grow 1.6s var(--fx-x-std) both}
.fx-armed .st-live:not(.on){display:none}
.rv-h1 .fx-caret::after{width:.06em;background:#78A9FF}

/* ----- focus crops: under 760 px a window shows the part of the step that matters, at a readable size ----- */
@container (max-width:759px){
  .st-win{font-size:clamp(5.5px,calc(100cqw / 46),10.5px)}
  .st-tb{height:2.6em}
  .st-tb span{font-size:1.15em}
  .st-top{grid-template-columns:1fr auto;height:4.4em}
  .st-trk,.st-gb{display:none}
  .st-ws{height:auto;flex-direction:column}
  .st-lp,.st-ip{width:auto;border:0}
  .st-cv{flex:none}
  [data-beat="phone"] .st-cv{flex:1}
  .st-cursor,.st-ring,.fx-armed .st-cursor,.fx-armed .st-ring{display:none}
  /* 01: the question card */
  [data-beat="answer"] .st-lp{display:none}
  .st-cv-q{padding:1.6em}
  .st-card{padding:2em 1.8em}
  .st-row{grid-template-columns:minmax(0,1fr) 10em}
  .st-opts{grid-template-columns:minmax(0,1fr)}
  /* 02: the preview builds, the list below it */
  [data-beat="build"] .st-cv{height:40em;padding:1.6em}
  [data-beat="build"] .st-lp{order:2;padding:1.8em}
  .st-pv-build .st-strip{transform:translate3d(0,-31em,0)}
  .st-pv-build .rv-hdr .rv-nav,.st-pv .rv-hdr .rv-nav{display:none}
  .st-pv .rv-cards{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .st-pv .rv-cards>div:nth-child(3){display:none}
  .st-pv .rv-area{grid-template-columns:minmax(0,1fr)}
  .st-pv .rv-map{display:none}
  [data-beat="build"] .st-ready{margin-top:1.2em}
  /* 03: the hero being edited, and the Ask Studio box */
  [data-beat="edit"] .st-lp,[data-beat="edit"] .st-ip{display:none}
  [data-beat="edit"] .st-cv{display:flex;flex-direction:column;gap:1.4em;padding:1.6em}
  .st-pv-edit{height:34em}
  .st-pv-edit .rv-hero-e{min-height:29em;padding:2.4em 2em}
  .st-pv-edit .rv-h1{font-size:2.5em}
  .st-ask-m{display:block;margin:0}
  /* 04: the phone and its checks, side by side */
  [data-beat="phone"] .st-ws{flex-direction:row;height:44em}
  [data-beat="phone"] .st-lp{width:21em;padding:1.8em 1.4em}
  [data-beat="phone"] .st-ticks li{font-size:1.2em}
  [data-beat="phone"] .st-lp-foot{display:none}
  .st-cv-ph{padding:1.4em}
  .st-wide{inset:1.4em}
  .st-phone{width:19.4em;max-height:41.2em}
  /* 05: the publish choices first, then the footer with the credit */
  [data-beat="publish"] .st-ip{order:1;padding:1.8em}
  [data-beat="publish"] .st-cv{order:2;height:17em;padding:1.6em}
  .st-pv-pub{--pvh:13.8em}
  .st-credit.on em{position:static;display:inline-block;transform:none;margin-left:.8em}
  /* the big window: just the page */
  .st-xl .st-lp,.st-xl .st-ip{display:none}
  .st-xl .st-ws{height:auto}
  .st-xl .st-cv{padding:1.6em}
  .st-xl .st-pv{height:44em}
  .st-xl .st-pv .rv-hero{min-height:26em}
}
@container (min-width:760px) and (max-width:1000px){
  .st-xl .st-ip{display:none}
}
@container (max-width:759px){
  .st-win.st-xl{font-size:clamp(5px,calc(100cqw / 56),10.5px)}
}

/* ======================= the information sections (house style) ======================= */
.st-sec{border-top:1px solid var(--line)}
.st-sec .sec-head .k,.st-dl .k{display:flex;align-items:center;gap:14px}
.st-sec .sec-head .k::before,.st-dl .k::before{content:"";width:28px;height:1px;background:var(--blue)}
.st-steps{margin-top:8px}
.st-step-h{margin:16px 0 10px;font-weight:400;font-size:clamp(22px,2vw,30px);line-height:1.15;letter-spacing:-.02em;color:var(--paper)}
.st-steps .hm-track i{transform:scaleX(var(--line-p,1))}
.st-steps .hm-node i{transform:scale(var(--node-p,1));transition:transform .5s var(--ease)}
@media (max-width:899px){.st-steps .hm-track i{transform:scaleY(var(--line-p,1))}}
/* compare: the shared fx-cmp table (motion.css) with the Studio Core column highlighted; the price row stands out */
.fx-cmp .st-tg{font-size:10.5px;color:var(--blue-2);box-shadow:inset 0 0 0 1px rgba(120,169,255,.5)}
.fx-cmp .st-cmp-p td{padding-top:24px;padding-bottom:24px}
.fx-cmp .st-cmp-p b{font-weight:300;font-size:clamp(26px,2.6vw,38px);letter-spacing:-.03em;color:var(--paper);margin-right:6px}
.st-cmp-foot{display:flex;align-items:baseline;justify-content:space-between;gap:12px 28px;flex-wrap:wrap;margin-top:28px}
.st-cmp-foot p{color:var(--muted);max-width:60ch}

/* pricing */
.st-price{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.9fr);gap:clamp(32px,4vw,72px);align-items:start}
.st-plan{position:relative;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);padding:clamp(28px,3.4vw,52px)}
.st-plan::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--blue)}
.st-plan-top{display:flex;justify-content:space-between;align-items:flex-end;gap:24px 40px;flex-wrap:wrap}
.st-plan .plan-name{margin-top:22px}
.st-plan .plan-price{margin-top:0;text-align:right}
.st-plan .plan-price .per{max-width:30ch;margin-left:auto}
.st-plate{position:relative;display:inline-flex;align-items:center;height:52px;padding:0 20px 0 26px;font:500 17px/1 var(--mono);letter-spacing:.34em;text-transform:uppercase;color:var(--paper)}
.st-plate::before,.st-plate::after{content:"";position:absolute;width:16px;height:16px}
.st-plate::before{left:0;top:0;border-top:3px solid var(--st-blue);border-left:3px solid var(--st-blue)}
.st-plate::after{right:0;bottom:0;border-bottom:3px solid var(--st-blue);border-right:3px solid var(--st-blue)}
.st-plan-list{columns:2;column-gap:36px;margin-top:34px}
.st-plan-list li{break-inside:avoid}
.st-plan-foot{display:flex;align-items:center;gap:20px 30px;flex-wrap:wrap;margin-top:36px}
.st-also{padding-top:6px}
.st-also dl{margin:22px 0 0;border-top:1px solid var(--line)}
.st-also dl>div{display:grid;grid-template-columns:118px minmax(0,1fr);gap:14px;padding:18px 0;border-bottom:1px solid var(--line)}
.st-also dt{font:500 11px/1.9 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.st-also dd{margin:0}
.st-also dd b{display:block;font-weight:400;font-size:19px;color:var(--paper);letter-spacing:-.01em}
.st-also dd>span{display:block;margin-top:4px;font-size:14.5px;line-height:1.55;color:var(--muted)}
.st-also dd a{color:var(--text);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px}
.st-also dd a:hover{text-decoration-color:var(--blue)}
.st-also-note{margin-top:18px;font-size:14px;color:var(--dim)}
@media (max-width:1000px){
  .st-price{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .st-plan-list{columns:1}
  .st-plan .plan-price{text-align:left}
  .st-plan .plan-price .per{margin-left:0}
}

/* download */
.st-dl{padding:clamp(96px,14vh,160px) 0}
.st-dl-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,110px);align-items:start}
.st-dl .display{font-size:clamp(40px,5.4vw,88px);max-width:12ch}
.st-dl-icon{width:88px;height:88px;margin:-10px 0 26px -9px}
.st-dl-btns{margin-top:36px;gap:12px}
.st-dl .btn.off{opacity:1;cursor:default;background:rgba(246,241,234,.06);color:var(--paper);box-shadow:inset 0 0 0 1px rgba(246,241,234,.26)}
.st-dl .btn.ghost.off{background:transparent;color:var(--muted);box-shadow:inset 0 0 0 1px var(--line-2)}
.st-dl .dl-meta{margin-top:18px}
.st-dl-alt{margin-top:26px}
.st-mobile{margin-top:28px;padding:20px 22px;box-shadow:inset 0 0 0 1px var(--line-2)}
.st-mobile p{color:var(--text);margin-bottom:16px;max-width:40ch}
.st-mobile[hidden],.st-early[hidden],.st-dl-steps[hidden],.st-dl-btns[hidden]{display:none}

.st-early .avail-h{margin:0 0 26px}
.st-dl-steps{margin-top:6px}
@media (max-width:900px){.st-dl-grid{grid-template-columns:minmax(0,1fr)}}

/* ======================= the tour: a progress line on each caption fills while its screen plays (W4 A) ======================= */
.st-txt::before,.st-txt::after{content:"";position:absolute;left:40px;right:0;top:-20px;height:2px}
.st-txt::after{background:var(--line)}
.st-txt::before{z-index:1;background:var(--blue);transform:scaleX(0);transform-origin:0 50%}
.st-beat.fx-running .st-txt::before{animation:st-cap var(--fx-len) linear both}
.st-beat.fx-done .st-txt::before{transform:scaleX(1)}
@keyframes st-cap{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (max-width:640px){.st-txt::before,.st-txt::after{left:0}}

/* ======================= S4 the result: a circle opens from the Live dot onto the finished site (no pin) ======================= */
.st-site{position:relative;background:var(--bg)}
.st-site-iris{position:relative;min-height:110vh;padding:clamp(80px,12vh,130px) 0 clamp(72px,10vh,110px);
  clip-path:circle(calc(var(--p,1) * var(--p,1) * 140vmax) at 50% 14%);background:radial-gradient(90% 60% at 50% 0%,#14335F,#0A1F38 48%,#06111F)}
.st-site-chip{display:flex;align-items:center;gap:10px;width:max-content;max-width:100%;margin:0 auto;padding:10px 16px;font:500 12px/1.2 var(--mono);letter-spacing:.08em;color:#CDEFD7;background:rgba(5,6,8,.45);box-shadow:inset 0 0 0 1px rgba(66,190,101,.42)}
.st-site-chip i{flex:none;width:9px;height:9px;border-radius:50%;background:#42BE65;box-shadow:0 0 0 4px rgba(66,190,101,.2)}
.st-site-head{max-width:860px;margin:44px auto 0;text-align:center}
.st-site-head .k{color:#AFC3E3}
.st-site-head .h2{margin-top:20px}
.st-site-head .lede{margin:22px auto 0;color:#B3BFD1}
.st-site-shots{position:relative;max-width:1120px;margin:clamp(40px,7vh,72px) auto 0;padding-right:clamp(48px,9vw,130px)}
.st-bro{background:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.14),0 40px 120px -40px rgba(0,0,0,.75)}
.st-bro-bar{position:relative;height:30px;display:flex;align-items:center;gap:7px;padding:0 12px;background:#1A1D23}
.st-bro-bar i{width:10px;height:10px;border-radius:50%;background:#3A3E46}
.st-bro-bar span{position:absolute;left:50%;transform:translateX(-50%);padding:5px 14px;font:400 11.5px/1 var(--mono);color:#9AA0A9;background:#0F1115;white-space:nowrap}
.st-bro img,.st-pho img{width:100%;height:auto}
.st-pho{position:absolute;right:0;bottom:-9%;width:clamp(150px,21%,240px);padding:7px;border-radius:24px;background:#0B0C0F;
  box-shadow:0 0 0 1px rgba(255,255,255,.14),0 40px 90px -30px rgba(0,0,0,.85);transform:translate3d(0,calc((1 - var(--p,1)) * 6%),0)}
.st-pho img{border-radius:17px}
.st-site-strip{display:flex;align-items:center;flex-wrap:wrap;gap:14px 28px;padding:28px 0;border-bottom:1px solid var(--line)}
.st-site-strip>p:first-child{font:400 11.5px/1.6 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.st-site-p{margin-left:auto;color:var(--text)}
.st-site-p b{font-weight:300;font-size:28px;letter-spacing:-.02em;color:var(--paper);margin-right:4px}
@media (max-width:760px){
  .st-site-iris{min-height:0;clip-path:circle(calc(var(--p,1) * var(--p,1) * 170vmax) at 50% 6%)}
  .st-site-shots{max-width:290px;padding:0}
  .st-bro{display:none}
  .st-pho{position:relative;right:auto;bottom:auto;width:100%}
  .st-site-p{margin-left:0}
}

/* ======================= S7 what's in it: an accordion beside a tilted screen (W6) ======================= */
.st-acc{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,72px);align-items:center}
.st-acc-list{display:flex;flex-direction:column;gap:8px}
.st-acc-item{position:relative;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow var(--fx-moderate-02) var(--fx-std)}
.st-acc-item.is-open{box-shadow:inset 0 0 0 1px var(--line-2)}
.st-acc-item h3{margin:0;font:inherit}
.st-acc-item [data-acc-btn]{position:relative;display:block;width:100%;padding:21px 24px;text-align:left;font-size:clamp(17px,1.35vw,19px);font-weight:500;line-height:1.3;color:var(--paper)}
.st-acc-item:not(.is-open) [data-acc-btn]{color:var(--muted)}
.st-acc-item:not(.is-open) [data-acc-btn]:hover{color:var(--text)}
.st-acc-item .fx-bar{left:24px;right:auto;width:64px;background:transparent}
.st-acc-item.is-open .fx-bar{background:var(--line)}
.st-acc-item .fx-acc-body>div>p:first-child{padding:0 24px 22px;color:var(--muted);font-size:16px;line-height:1.6}
.st-acc-item [data-acc-slot]:empty{display:none}
.st-acc-item [data-acc-slot]{padding:0 14px 16px}
.st-acc-media{position:relative}
@media (min-width:760px){.st-acc .st-tilt{--tilt-y:-8deg}}
.st-acc-ctl{position:absolute!important;right:0;bottom:-54px;width:42px;height:42px;padding:0!important;justify-content:center}
@media (max-width:1000px){.st-acc{grid-template-columns:minmax(0,1fr)}}
@media (max-width:759px){.st-acc-media:not(:has(>*)){display:none}.st-acc-ctl{position:static!important;justify-self:end}}
@media (max-width:640px){
  .st-acc-item [data-acc-btn]{padding:18px}
  .st-acc-item .fx-acc-body>div>p:first-child{padding:0 18px 16px}
  .st-acc-item .fx-bar{left:18px}
  .st-acc-item [data-acc-slot]{padding:0 10px 12px}
}
/* the panel mocks: Studio Core's own panels, 64em wide */
.st-win.p64{font-size:calc(100cqw / 64)}
.st-pw{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 25em;min-height:38em;background:#fff}
.st-pw1{grid-template-columns:minmax(0,1fr)}
.st-pc{position:relative;display:flex;flex-direction:column;min-width:0;padding:2em 2.2em;background:#fff}
.st-pc2{background:#FCFBF9;border-left:1px solid var(--ln)}
.st-hint{font:400 1.15em/1.45 var(--sans);color:var(--mut)}
.st-pw .st-gb{color:var(--ink);box-shadow:inset 0 0 0 1px var(--fld);background:#fff}
.st-btn.sm,.st-gb.sm{padding:.75em 1em;font-size:1.15em}
.st-gb.sm{display:inline-flex;align-items:center;gap:.45em;font-weight:500}
.st-fr{display:flex;align-items:center;gap:.6em;margin-top:.9em}
.st-fr .st-in{flex:1;min-width:0}
.st-lb2{margin-top:1.8em}
.st-lb b{font-weight:500}
/* 1 facts only you know */
.st-cnt{margin-left:.5em;padding:.2em .5em;background:#DEFBE6;color:#0E6027}
.fx-armed .st-cnt.todo{background:#FDEBDD;color:#B54708}
.st-fill{margin-top:1.4em;padding:1.2em 1.3em;background:#fff;box-shadow:inset 0 0 0 1px var(--fld);transition:opacity var(--fx-moderate-02) var(--fx-std)}
.st-fill>p:first-child{display:flex;justify-content:space-between;align-items:baseline;gap:1em;font:500 1.3em/1.3 var(--sans);color:var(--ink)}
.st-fill small{font:400 .8em/1.3 var(--sans);color:var(--dimc);white-space:nowrap}
.st-fill em{display:none;font:500 .95em/1 var(--mono);font-style:normal;letter-spacing:.12em;text-transform:uppercase;padding:.5em .6em;white-space:nowrap}
.st-fill.ok em{display:inline-block;color:#0E6027;background:#DEFBE6}
.st-fill.rmd em{display:inline-block;color:var(--mut);background:#F2F0EC}
.st-fill.ok [data-btn],.st-fill.rmd [data-btn]{display:none}
.st-fill.rmd{opacity:.55}
.st-fill.rmd .st-in{background:#F7F5F1}
.st-fill .st-in.on{box-shadow:inset 0 0 0 2px var(--acc);background:#fff}
.st-pc2 .st-ip-h{display:flex;align-items:center;gap:.6em}
.st-okb{display:inline-flex;width:1.5em;height:1.5em;border-radius:50%;background:var(--ok)}
.st-okb svg{width:100%;height:100%;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.st-okb.pop{animation:st-pop var(--fx-slow-01) var(--fx-x-in) both}
.st-okb.pop svg{animation:st-tick var(--fx-slow-01) var(--fx-x-in) .12s both}
@keyframes st-pop{from{opacity:0;transform:scale(.5)}}
@keyframes st-tick{from{stroke-dashoffset:1}}
.st-pgo{margin-top:auto;align-self:flex-start}
.fx-armed .st-okb:not(.on){opacity:0}
.fx-armed .st-pgo:not(.on){background:#C9C3B9}
.fx-armed .st-checks li[data-c]:not(.on){color:#B54708}
.fx-armed .st-checks li[data-c]:not(.on)::before{background:transparent;box-shadow:inset 0 0 0 .14em #F0A35E}
.fx-armed .st-checks li[data-c]:not(.on)::after{opacity:0}
/* 2 Ask Studio */
.st-pvc{padding:1.6em;background:var(--cvb)}
.st-pvc .st-pv{height:auto}
.st-hv{min-height:24em}
.st-hv::after{content:"";position:absolute;inset:0;background:rgba(3,10,20,.62);opacity:0;transition:opacity var(--fx-moderate-02) var(--fx-std)}
.st-hv.dk::after{opacity:1}
.st-hv .rv-hero-in{z-index:1}
.st-askp .st-lb{display:flex;align-items:center;justify-content:space-between}
.st-askp kbd{font:400 .9em/1 var(--mono);padding:.2em .4em;box-shadow:inset 0 0 0 1px var(--fld);color:var(--mut)}
.st-thr{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:.8em;margin-bottom:1.2em}
.st-msg{max-width:94%;padding:.7em .9em;font:400 1.2em/1.45 var(--sans)}
.st-msg.you{align-self:flex-end;background:var(--ink);color:#fff}
.st-msg.st{align-self:flex-start;background:#F7F5F1;box-shadow:inset 0 0 0 1px var(--ln);color:var(--ink)}
.st-chg{display:flex;justify-content:space-between;gap:1em;margin-top:.5em;padding-top:.5em;border-top:1px solid var(--ln);font-size:.92em;color:var(--mut)}
.st-chg b{font-weight:500;color:var(--acc)}
.st-askp .st-ask{margin-top:0}
.st-ask-in [data-ph]:empty::before{content:attr(data-ph);color:var(--dimc)}
.st-meter{display:flex;justify-content:space-between;gap:1em;margin-top:1em;font:400 1.05em/1 var(--mono);color:var(--dimc)}
.st-meter b{font-weight:500;color:var(--ink)}
.fx-armed [data-you]:not(.on),.fx-armed [data-rep]:not(.on){display:none}
.fx-armed .st-msg.on{animation:st-in var(--fx-moderate-02) var(--fx-std) both}
@keyframes st-in{from{opacity:0;transform:translate3d(0,.5em,0)}}
/* 3 photos */
.st-phc{gap:1.2em}
.st-focal{position:relative;overflow:hidden;aspect-ratio:16/10;background:#24364F}
.st-focal img,.st-crop img{display:block;width:100%;height:100%;object-fit:cover}
.st-lite{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;transition:opacity var(--fx-slow-01) var(--fx-std)}
.st-lite.on{opacity:.12}
.st-fp{position:absolute;inset:0;transform:translate3d(calc((var(--fx) - .5) * 100%),calc((var(--fy) - .5) * 100%),0);transition:transform var(--fx-slow-02) var(--fx-x-std)}
.st-fp::after{content:"";position:absolute;left:50%;top:50%;width:2.4em;height:2.4em;margin:-1.2em;border-radius:50%;box-shadow:0 0 0 .2em #fff,0 0 0 .36em rgba(0,0,0,.3),inset 0 0 0 .5em rgba(31,73,216,.35)}
.st-range{--v:.571;position:relative;display:block;height:.3em;margin:.2em .6em .6em 0;background:#E5E0D8}
.st-range i{position:absolute;inset:0;background:var(--acc);transform-origin:0 50%;transform:scaleX(var(--v));transition:transform var(--fx-slow-01) var(--fx-x-std)}
.st-range b{position:absolute;inset:0;transform:translateX(calc(var(--v) * 100%));transition:transform var(--fx-slow-01) var(--fx-x-std)}
.st-range b::after{content:"";position:absolute;left:0;top:50%;width:1.2em;height:1.2em;margin:-.6em;border-radius:50%;background:#fff;box-shadow:0 0 0 .15em var(--acc),0 .2em .4em rgba(0,0,0,.2)}
.fx-armed .st-range:not(.on){--v:.43}
.st-crop{position:relative;display:block;width:8em;height:13.4em;overflow:hidden;margin:.3em 0 0 .4em;box-shadow:0 0 0 .45em #0B0C0F;border-radius:.6em}
.st-crop img{position:absolute;left:0;top:0;width:auto;height:100%;max-width:none;aspect-ratio:16/10;transform:translate3d(calc(4em - var(--fx) * 21.44em),0,0);transition:transform var(--fx-slow-02) var(--fx-x-std)}
/* 4 set up for Google */
.st-sh-t{font:500 1.9em/1.2 var(--sans);color:var(--ink)}
.st-sh-t+.st-hint{margin-top:.3em}
.st-fld{margin-top:1.4em}
.st-fld>p:first-child{display:flex;justify-content:space-between;margin-bottom:.5em;font:500 1.1em/1 var(--sans);color:var(--ink)}
.st-fld em{font:400 .95em/1 var(--mono);font-style:normal;color:var(--dimc)}
.st-ta{min-height:4.6em}
.st-gp{margin-top:1.4em;padding:1.1em 1.3em;background:#FAFAF8;box-shadow:inset 0 0 0 1px var(--ln)}
.st-gp b{display:block;font:500 1.35em/1.3 var(--sans);color:#1A3BB0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-gp span{display:block;margin-top:.15em;font:400 1.05em/1.3 var(--mono);color:var(--mut)}
.st-gp p{margin-top:.35em;font-size:1.1em;line-height:1.45;color:var(--mut)}
.st-chk1{display:flex;align-items:center;gap:.6em;margin-top:1.3em;font:500 1.2em/1.3 var(--sans);color:var(--ink)}
.st-chk1 i{position:relative;flex:none;width:1.15em;height:1.15em;border-radius:50%;background:var(--ok);transition:background .26s}
.st-chk1 i::after{content:"";position:absolute;left:.41em;top:.22em;width:.3em;height:.56em;border:solid #fff;border-width:0 .14em .14em 0;transform:rotate(45deg)}
.fx-armed .st-chk1:not(.on) i{background:transparent;box-shadow:inset 0 0 0 .1em #C9C3B9}
.fx-armed .st-chk1:not(.on) i::after{opacity:0}
.fx-armed [data-d]{transition:opacity var(--fx-moderate-02) var(--fx-std)}
.fx-armed [data-d]:not(.on){opacity:0}
/* 5 leads */
.st-leads{display:flex;flex-direction:column;border-top:1px solid var(--ln)}
.st-lead{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.25em 1em;padding:1em .2em;border-bottom:1px solid var(--ln)}
.st-lead b{font:500 1.25em/1.3 var(--sans);color:var(--ink)}
.st-lead b em{margin-right:.6em;padding:.3em .45em;font:500 .7em/1 var(--mono);font-style:normal;letter-spacing:.1em;text-transform:uppercase;vertical-align:.15em;background:var(--acc);color:#fff}
.st-lead time{font:400 1.05em/1.3 var(--mono);color:var(--dimc)}
.st-lead span{grid-column:1 / -1;font-size:1.15em;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-lead.nw{padding-left:.9em;background:#F5F8FF;box-shadow:inset .18em 0 0 var(--acc)}
.fx-armed .st-lead.nw:not(.on){display:none}
.fx-armed .st-lead.nw.on{animation:st-in var(--fx-moderate-02) var(--fx-x-in) both}
.st-mail{align-self:flex-start;display:flex;align-items:center;gap:.5em;margin-top:auto;padding:.75em 1em;font:500 1.15em/1.3 var(--sans);background:var(--ink);color:#fff;transition:opacity var(--fx-moderate-02) var(--fx-std),transform var(--fx-moderate-02) var(--fx-x-in)}
.fx-armed .st-mail:not(.on){opacity:0;transform:translate3d(0,.6em,0)}
.st-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6em}
.st-stats span{display:flex;flex-direction:column;gap:.25em;font-size:1.05em;color:var(--mut)}
.st-stats b{font:500 1.7em/1.1 var(--mono);color:var(--ink)}
.st-spark{width:100%;height:auto;margin:1.8em 0 .6em;overflow:visible}
.st-spark path{fill:none;stroke:var(--acc);stroke-width:1.5;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.st-spark.go path{animation:st-draw .8s var(--fx-x-std) both}
@keyframes st-draw{from{stroke-dashoffset:1}}
/* 6 your domain */
.st-drow{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.4em 1em;margin-top:1.4em;padding:1.1em 1.3em;box-shadow:inset 0 0 0 1px var(--ln)}
.st-drow>p:first-child{display:flex;align-items:center;gap:.8em;font:500 1.3em/1.3 var(--sans);color:var(--ink)}
.st-drow [data-check]{grid-column:2;grid-row:1 / span 2}
.st-drow.live [data-check]{visibility:hidden}
.st-tag{font:500 .76em/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:.4em .5em;color:#8E6A00;background:#FCF4D6}
.st-tag.ok{color:#0E6027;background:#DEFBE6}
.st-rec{width:100%;margin-top:1em;border-collapse:collapse;font-size:1.1em}
.st-rec th{text-align:left;padding:.6em .8em;font:500 .82em/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dimc);border-bottom:1px solid var(--ln)}
.st-rec td{padding:.65em .8em;font-family:var(--mono);color:var(--ink);border-bottom:1px solid #F0ECE6}
.st-ftm{display:flex;align-items:center;justify-content:space-between;gap:1em;margin:auto -2.2em -2em;padding:1.3em 2.2em;background:#0A1F38;color:rgba(255,255,255,.78)}
.st-ftm .rv-logo{color:#fff}
.st-ftm .rv-logo i{background:#163B66}
.st-ftm .st-credit{display:inline-flex;align-items:center;gap:.5em;font:400 1.05em/1 "Public Sans",var(--sans);color:rgba(255,255,255,.75)}
.st-ftm .st-credit svg{width:.7em;height:1.08em;fill:currentColor}
.fx-armed .st-drow:not(.on),.fx-armed .st-rec:not(.on){opacity:0}
.fx-armed .st-drow,.fx-armed .st-rec{transition:opacity var(--fx-moderate-02) var(--fx-std)}
.fx-armed .st-pc .st-in.on{box-shadow:inset 0 0 0 2px var(--acc);background:#fff}
/* the panels keep their 64em layout down to a 520 px column, then stack at a readable size (inside the open item on phones) */
@container (max-width:759px){.st-win.p64{font-size:calc(100cqw / 64)}}
@container (max-width:519px){
  .st-win.p64{font-size:clamp(5.5px,calc(100cqw / 40),10.5px)}
  .st-pw{grid-template-columns:minmax(0,1fr);min-height:0}
  .st-pc{padding:1.6em}
  .st-pc2{border-left:0;border-top:1px solid var(--ln)}
  .st-phc .st-hint,.st-pc2 .st-checks li:not([data-c]),.st-pvc .rv-hdr,.st-lead:last-child,.st-ftm .rv-logo{display:none}
  .st-hv{min-height:16em}
  .st-hv .rv-h1{font-size:2.3em}
  .st-thr{margin-top:.6em}
  .st-ftm{margin-top:1.6em}
}

/* ======================= reduced motion: the finished screens, no tweens ======================= */
@media (prefers-reduced-motion:reduce){
  .st-win *{transition:none!important}
}

/* print: the stacked final states, no stage */
@media print{
  .st-hero{height:auto;min-height:0;padding:40px 0}
  .st-mark,.st-cue,.st-skip{display:none}
  .st-greet{position:static}
  .st-app{transform:none!important;opacity:1!important}
}

/* Studio product presentation, October 2026. Normal document flow throughout. */
body[data-page="studio"]{background:#050608}.sc-hero,.sc-section{position:relative;background:#050608}.sc-hero{overflow:hidden;padding-top:40px}body[data-page="studio"] #metal{display:none}.sc-product{display:flex;align-items:center;gap:12px;font-size:15px}.sc-product img{border-radius:8px}.sc-product b{font-size:10px;font-weight:500;margin-left:7px;padding:4px 7px;border:1px solid #555}.sc-product>a{margin-left:auto;font-size:12px;color:#b5b7bf}.sc-intro{display:grid;grid-template-columns:1.3fr 1fr;gap:70px;align-items:end;padding:64px 0 24px}.sc-intro h1{font-size:clamp(60px,7.9vw,114px);line-height:.99;letter-spacing:-.065em;font-weight:500;margin:0}.sc-intro h1 span{color:#8f9eb5}.sc-intro>div{padding:0 0 5px 25px}.sc-intro p{font-size:22px;line-height:1.4;margin:0 0 16px}.sc-intro .sc-muted{font-size:15px;color:#9b9fa8}.sc-intro .btn{margin-top:12px}.sc-availability{font-size:11px;color:#9097a3;display:block;margin-top:13px}.sc-theater{height:660px;position:relative;perspective:1800px;margin-top:28px}.sc-light{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 58%,#0767fa88,transparent 60%);pointer-events:none}.sc-grid{position:absolute;left:5%;right:5%;top:10%;bottom:-10%;background:linear-gradient(#5083d314 1px,transparent 1px),linear-gradient(90deg,#5083d314 1px,transparent 1px);background-size:64px 64px;transform:rotateX(60deg);mask-image:radial-gradient(ellipse,#000,transparent 70%)}.sc-hero-app{position:absolute;width:min(1040px,78vw);left:50%;top:60px;transform:translateX(-50%) perspective(1500px) rotateX(9deg) rotateY(-8deg) rotateZ(-2deg);transform-origin:50% 60%;will-change:transform}.sc-app{border:1px solid #56616e;border-radius:10px;overflow:hidden;box-shadow:0 45px 90px #000b,0 0 0 5px #ffffff05;background:#101318;container-type:inline-size}.sc-app-top{height:43px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;background:linear-gradient(#24282e,#191c22);font-size:10px;color:#c0c4cd;border-bottom:1px solid #34373e}.sc-app-top b{color:#828993;font-weight:400}.sc-dots{display:flex;gap:6px}.sc-dots i,.sc-browser-bar i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#69707b}.sc-dots i:first-child{background:#c46c68}.sc-dots i:nth-child(2){background:#c8ab62}.sc-dots i:nth-child(3){background:#6c9874}.sc-saved{color:#96bdab}.sc-app-body{display:grid;grid-template-columns:145px 1fr}.sc-sidebar{display:flex;flex-direction:column;gap:18px;padding:24px 13px 16px;font-size:10px;color:#9ca4b2;background:#11151b;position:relative}.sc-sidebar img{object-fit:contain;object-position:left;margin-bottom:18px}.sc-small{font:10px/1.4 'IBM Plex Mono',monospace;letter-spacing:.12em;color:#939ba9}.sc-sidebar .sc-selected{color:white;background:#232f44;margin:-8px -6px;padding:8px 6px;border-left:2px solid #287cff}.sc-sidebar hr{margin:0;border:0;border-top:1px solid #2d3036}.sc-sidebar-foot{margin-top:auto;padding-top:36px;font-size:9px;letter-spacing:.15em;display:flex;justify-content:space-between}.sc-sidebar-foot i{font-style:normal;color:#3777ff}.sc-canvas{padding:0 18px 22px;background:#1c2028;min-width:0}.sc-canvas-bar{height:43px;display:flex;align-items:center;justify-content:space-between;font-size:9px;color:#9197a2}.sc-site{background:#f6f3ed;color:#173934;font-family:'Public Sans',sans-serif;container-type:inline-size;text-align:left;overflow:hidden}.sc-site-nav{display:flex;justify-content:space-between;align-items:center;padding:3% 5%;font-size:1.2cqw;border-bottom:1px solid #18382d20;gap:10px}.sc-site-nav b{font-size:3cqw;line-height:1;letter-spacing:-.08em}.sc-site-nav b span{display:block;font-size:.7cqw;letter-spacing:.12em;margin-top:5px}.sc-site-nav em{font-style:normal;border-bottom:1px solid;padding-bottom:4px}.sc-site-hero{display:grid;grid-template-columns:1fr 1fr;padding:5%;gap:5%;align-items:center}.sc-site-eyebrow{font-size:1cqw;letter-spacing:.1em}.sc-site-hero h3{font-size:4.7cqw;letter-spacing:-.055em;line-height:1.08;font-weight:600;margin:7% 0 5%}.sc-site-hero p{font-size:1.3cqw;line-height:1.7;margin:0 0 8%;color:#4b6259}.sc-site-cta{display:inline-block;font-size:1.3cqw;background:#193f34;color:#fff;padding:4% 6%}.sc-site-hero img{aspect-ratio:.86;object-fit:cover;width:100%;height:auto;object-position:58%;border-radius:90px 90px 0 0}.sc-site-bottom{display:flex;justify-content:space-between;border-top:1px solid #17393430;padding:4% 5%;font-size:1.2cqw}.sc-floating{position:absolute;box-shadow:0 26px 65px #0009;border:1px solid #566477;will-change:transform}.sc-prompt{left:max(4%,calc(50% - 575px));top:350px;width:320px;padding:22px;background:linear-gradient(130deg,#232d40f5,#111824f5);border-radius:7px;transform:rotate(-3deg)}.sc-prompt p{font-size:15px;line-height:1.5;margin:12px 0 18px}.sc-prompt>div{font-size:11px;color:#bfc9db;padding-top:15px;border-top:1px solid #5b668343;display:flex;gap:8px;align-items:center}.sc-prompt>div>span{font-size:24px;color:#689dff}.sc-prompt i{font-style:normal;color:#95d3ac;margin-left:auto}.sc-float-phone,.sc-phone{width:190px;aspect-ratio:.49;background:#101319;padding:8px;border:2px solid #8a919a;border-radius:28px;overflow:hidden;transform:rotate(5deg);box-shadow:0 28px 65px #0009}.sc-float-phone{right:max(5%,calc(50% - 570px));top:190px}.sc-phone-notch{position:absolute;width:32%;height:12px;background:#101319;border-radius:0 0 11px 11px;left:34%;top:7px;z-index:2}.sc-phone .sc-site,.sc-float-phone .sc-site{height:100%;border-radius:19px;padding-top:14px}.sc-phone .sc-site-nav,.sc-float-phone .sc-site-nav{padding:7%}.sc-phone .sc-site-nav b,.sc-float-phone .sc-site-nav b{font-size:8cqw}.sc-phone .sc-site-nav b span,.sc-float-phone .sc-site-nav b span{font-size:2cqw}.sc-phone .sc-site-nav>span,.sc-float-phone .sc-site-nav>span{display:none}.sc-phone .sc-site-nav em,.sc-float-phone .sc-site-nav em{font-size:3cqw}.sc-phone .sc-site-hero,.sc-float-phone .sc-site-hero{display:flex;flex-direction:column;padding:10% 7%;align-items:stretch;gap:18px}.sc-phone .sc-site-eyebrow,.sc-float-phone .sc-site-eyebrow{font-size:2.5cqw}.sc-phone .sc-site-hero h3,.sc-float-phone .sc-site-hero h3{font-size:11cqw;margin:8% 0}.sc-phone .sc-site-hero p,.sc-float-phone .sc-site-hero p{font-size:3.2cqw}.sc-phone .sc-site-cta,.sc-float-phone .sc-site-cta{font-size:3cqw}.sc-phone .sc-site-hero img,.sc-float-phone .sc-site-hero img{aspect-ratio:1.5;border-radius:45px 45px 0 0}.sc-phone .sc-site-bottom,.sc-float-phone .sc-site-bottom{display:none}.sc-hero-bottom{display:flex;justify-content:space-between;padding-bottom:38px;color:#959daa;font-size:12px;border-bottom:1px solid #ffffff24}.sc-hero-bottom a{color:#d9e2f1}.sc-hero-bottom a span{margin-left:25px}.sc-section{padding:110px 0}.sc-section-head{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:48px}.sc-section-head h2{font-size:clamp(40px,4.6vw,68px);font-weight:400;letter-spacing:-.05em;line-height:1.07;margin:20px 0 0}.sc-section-head h2 span{color:#818b9e}.sc-section-head>p{font-size:16px;color:#a2aab9;line-height:1.7;max-width:390px}.sc-tabs{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid #ffffff30}.sc-tabs button{background:none;color:#8f98a9;border:0;border-bottom:2px solid transparent;text-align:left;font:inherit;font-size:13px;padding:18px 5px 22px;cursor:pointer;transition:color .2s}.sc-tabs button span{display:inline-block;margin-right:12px;font:10px 'IBM Plex Mono',monospace;color:#8f98a9}.sc-tabs button[aria-selected="true"]{color:white;border-color:#3d86ff}.sc-tabs button[aria-selected="true"] span{color:#6aa2ff}.sc-demo{display:grid;grid-template-columns:300px 1fr;min-height:550px;background:#0c1017;border:1px solid #2a313d;border-top:0}.sc-demo-controls{padding:30px;border-right:1px solid #29303b;position:relative;z-index:2}.sc-demo-controls h3{font-size:29px;letter-spacing:-.04em;line-height:1.15;margin:32px 0 20px;font-weight:400}.sc-demo-controls p:not(.sc-small){font-size:13px;line-height:1.6;color:#a4aebe}.sc-demo-controls label{display:block;font-size:11px;color:#bfc8d7;margin:24px 0 7px}.sc-demo-controls input:not([type=checkbox]),.sc-demo-controls select{display:block;width:100%;background:#141c29;border:1px solid #44516a;border-radius:0;color:#fff;font:12px 'IBM Plex Sans',sans-serif;padding:11px 10px}.sc-demo-controls .btn{margin-top:22px;font-size:12px;width:100%;justify-content:space-between;min-height:43px}.sc-demo-stage{display:flex;align-items:center;justify-content:center;position:relative;padding:30px;overflow:hidden;background:radial-gradient(ellipse at 50% 55%,#173776,#0b111e 75%);perspective:1200px}.sc-demo-window{width:100%;transition:transform .8s cubic-bezier(.2,.7,.2,1),width .8s cubic-bezier(.2,.7,.2,1);transform:perspective(1300px) rotateY(-5deg) rotateX(3deg)}.sc-demo .sc-app-body{grid-template-columns:100px 1fr}.sc-demo .sc-sidebar{font-size:8px;padding:17px 10px;gap:16px}.sc-demo .sc-sidebar img{width:65px;margin-bottom:10px}.sc-demo .sc-small{font-size:8px}.sc-demo .sc-app-top{font-size:8px;height:32px;padding:0 10px}.sc-demo .sc-canvas{padding:0 12px 15px}.sc-demo .sc-canvas-bar{font-size:8px;height:30px}.sc-demo .sc-dots i{width:5px;height:5px}.sc-demo .sc-sidebar-foot{padding-top:18px}.sc-demo .sc-site-hero h3{min-height:2.2em}.sc-tone,.sc-devices{display:flex;gap:7px;margin:20px 0}.sc-tone button,.sc-devices button,#sc-replay{font:11px 'IBM Plex Sans',sans-serif;background:#172033;color:#c4d2e9;border:1px solid #405373;padding:10px;cursor:pointer}.sc-devices button[aria-pressed=true]{color:#fff;border-color:#508bff;background:#204781}.sc-demo [hidden]{display:none!important}.sc-demo .sc-demo-note{font-size:11px!important;color:#78869a!important;margin-top:24px}.sc-demo-status{min-height:20px}.sc-checks{list-style:none;padding:0;margin-top:30px;font-size:12px;color:#b1d6bb;line-height:2.8}.sc-checks label{font-size:12px;margin:10px 0;line-height:1.7;cursor:pointer}.sc-checks input{accent-color:#347aff;vertical-align:middle}.sc-demo-window.is-phone{width:215px;transform:rotateY(-9deg) rotateZ(2deg)}.sc-demo-window.is-phone .sc-app{border-radius:27px;border:5px solid #687588;padding:7px;background:#11151a}.sc-demo-window.is-phone .sc-app-top,.sc-demo-window.is-phone .sc-sidebar,.sc-demo-window.is-phone .sc-canvas-bar{display:none}.sc-demo-window.is-phone .sc-app-body{display:block}.sc-demo-window.is-phone .sc-canvas{padding:0;background:none}.sc-demo-window.is-phone .sc-site{border-radius:15px;padding-top:14px;min-height:420px}.sc-demo-window.is-phone .sc-site-nav>span{display:none}.sc-demo-window.is-phone .sc-site-nav b{font-size:8cqw}.sc-demo-window.is-phone .sc-site-nav b span{font-size:2cqw}.sc-demo-window.is-phone .sc-site-nav em{font-size:3cqw}.sc-demo-window.is-phone .sc-site-hero{display:block;padding:8%}.sc-demo-window.is-phone .sc-site-eyebrow{font-size:2.4cqw}.sc-demo-window.is-phone .sc-site-hero h3{font-size:10cqw;min-height:0;margin:10% 0}.sc-demo-window.is-phone .sc-site-hero p{font-size:3cqw}.sc-demo-window.is-phone .sc-site-cta{font-size:3cqw}.sc-demo-window.is-phone .sc-site-hero img{aspect-ratio:1.4;margin-top:20px;border-radius:50px 50px 0 0}.sc-demo-window.is-phone .sc-site-bottom{display:none}.sc-build-curtain{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#0b1324;opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s;color:#dae6fa}.sc-build-curtain>span{font-size:70px;color:#75a9ff}.sc-build-curtain p{font-size:13px}.sc-build-curtain i{width:180px;height:2px;background:#488fff;transform-origin:left}.sc-demo.is-building .sc-build-curtain{opacity:1;visibility:visible}.sc-demo.is-building .sc-build-curtain i{animation:sc-build 1.2s ease-in-out both}.sc-demo.is-building .sc-build-curtain>span{animation:sc-turn 1.3s ease-in-out both}.sc-tour-foot{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-top:18px}.sc-tour-foot p,.sc-fiction{font-size:10px;color:#7e8898}.sc-responsive{background:#0a0e16;overflow:hidden;border-top:1px solid #1d283c;border-bottom:1px solid #1d283c}.sc-device-scene{height:600px;position:relative;perspective:1400px}.sc-desktop{position:absolute;left:4%;top:20px;width:82%;background:#222936;border:1px solid #6a7484;box-shadow:0 40px 90px #0009;transform:rotateY(7deg) rotateX(3deg);will-change:transform}.sc-browser-bar{height:34px;padding:0 12px;display:flex;gap:5px;align-items:center}.sc-browser-bar i{width:6px;height:6px}.sc-browser-bar span{margin:auto;background:#171d28;color:#a7b0c0;font-size:9px;padding:3px 70px}.sc-device-scene .sc-phone{position:absolute;right:2%;top:190px;width:210px;will-change:transform}.sc-detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:60px;margin-top:50px}.sc-detail-grid article{border-top:1px solid #34435c;padding-top:28px}.sc-detail-icon{font-size:35px;color:#77aaff}.sc-detail-grid h3{font-size:23px;font-weight:400;letter-spacing:-.025em;margin:28px 0 16px}.sc-detail-grid p{font-size:15px;color:#a2aabd;line-height:1.65}.sc-section button:focus-visible,.sc-section input:focus-visible,.sc-section select:focus-visible{outline:2px solid #a8cbff;outline-offset:4px}.sc-enter .sc-intro h1,.sc-enter .sc-intro>div{animation:sc-enter .9s cubic-bezier(.2,.7,.2,1) both}.sc-enter .sc-intro>div{animation-delay:.1s}.sc-enter .sc-hero-app{animation:sc-app-in 1.5s cubic-bezier(.2,.7,.2,1) both}.sc-enter .sc-prompt{animation:sc-prompt-in 1.3s .25s cubic-bezier(.2,.7,.2,1) both}.sc-enter .sc-float-phone{animation:sc-phone-in 1.4s .15s cubic-bezier(.2,.7,.2,1) both}@keyframes sc-enter{from{opacity:0;transform:translateY(25px)}to{opacity:1;transform:translateY(0)}}@keyframes sc-app-in{from{opacity:0;transform:translateX(-50%) translateY(90px) rotateX(20deg) rotateY(-15deg) rotateZ(-4deg)}to{opacity:1;transform:translateX(-50%) perspective(1500px) rotateX(9deg) rotateY(-8deg) rotateZ(-2deg)}}@keyframes sc-prompt-in{from{opacity:0;transform:translateY(70px) rotate(-8deg)}to{opacity:1;transform:rotate(-3deg)}}@keyframes sc-phone-in{from{opacity:0;transform:translateY(110px) rotate(12deg)}to{opacity:1;transform:rotate(5deg)}}@keyframes sc-build{from{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes sc-turn{from{transform:rotate(-90deg) scale(.6)}to{transform:rotate(0) scale(1)}}
@media(min-width:1500px){.sc-theater{height:710px}.sc-hero-app{top:70px}}
@media(max-width:1000px){.sc-intro{gap:25px}.sc-intro h1{font-size:8.5vw}.sc-intro>div{padding:0}.sc-intro p{font-size:19px}.sc-theater{height:550px}.sc-hero-app{width:84vw}.sc-float-phone{width:155px;right:3%;top:170px}.sc-prompt{width:270px;left:3%;top:320px}.sc-app-body{grid-template-columns:110px 1fr}.sc-sidebar{font-size:8px;gap:13px}.sc-sidebar img{width:75px}.sc-demo{grid-template-columns:260px 1fr}.sc-demo-controls{padding:25px}.sc-demo-stage{padding:20px}.sc-demo .sc-sidebar{display:none}.sc-demo .sc-app-body{grid-template-columns:1fr}.sc-section{padding:80px 0}.sc-device-scene{height:500px}.sc-detail-grid{gap:28px}}
@media(max-width:700px){.sc-hero{padding-top:22px}.sc-product{font-size:12px}.sc-product>a{display:none}.sc-intro{grid-template-columns:1fr;padding:42px 0 12px;gap:28px}.sc-intro h1{font-size:clamp(52px,12vw,80px)}.sc-intro p{font-size:20px;margin-bottom:11px}.sc-intro .sc-muted{font-size:14px}.sc-intro .btn{margin-top:7px}.sc-availability{display:inline-block;margin-left:12px;font-size:9px}.sc-theater{height:400px;margin-top:10px}.sc-hero-app{width:91vw;top:35px}.sc-app-top{height:27px;font-size:7px;padding:0 9px}.sc-app-top b,.sc-saved{display:none}.sc-dots i{width:5px;height:5px}.sc-app-body{grid-template-columns:60px 1fr}.sc-sidebar{padding:14px 5px;font-size:5px;gap:10px}.sc-sidebar img{width:44px;height:15px;margin-bottom:7px}.sc-sidebar .sc-small{font-size:4px;letter-spacing:.05em}.sc-sidebar-foot{font-size:5px;padding-top:12px}.sc-canvas{padding:0 8px 10px}.sc-canvas-bar{height:23px;font-size:5px}.sc-float-phone{width:105px;top:147px;right:5%;padding:4px;border-width:1px;border-radius:18px}.sc-float-phone .sc-site{border-radius:13px;padding-top:8px}.sc-phone-notch{height:8px;top:4px}.sc-prompt{width:218px;left:4%;top:226px;padding:14px;transform:rotate(-3deg)}.sc-prompt p{font-size:12px;margin:8px 0 12px}.sc-prompt>div{font-size:8px;padding-top:8px;gap:5px}.sc-prompt .sc-small{font-size:7px}.sc-prompt>div>span{font-size:18px}.sc-hero-bottom{font-size:10px;gap:24px;align-items:center;padding-bottom:28px}.sc-hero-bottom>span{max-width:130px}.sc-hero-bottom a{max-width:150px}.sc-hero-bottom a span{margin-left:8px}.sc-section{padding:64px 0}.sc-section-head{display:block;margin-bottom:30px}.sc-section-head h2{font-size:40px}.sc-section-head>p{font-size:14px;margin-top:23px}.sc-tabs{grid-template-columns:repeat(2,1fr);gap:0 18px}.sc-tabs button{font-size:11px;padding:16px 0}.sc-tabs button span{font-size:8px;margin-right:7px}.sc-demo{grid-template-columns:1fr}.sc-demo-controls{padding:25px;border-right:0;min-height:382px}.sc-demo-controls h3{font-size:29px;margin:20px 0 15px}.sc-demo-controls h3 br{display:none}.sc-demo-controls p:not(.sc-small){font-size:13px;max-width:500px}.sc-demo-controls label{margin-top:16px}.sc-demo-controls input:not([type=checkbox]),.sc-demo-controls select{font-size:14px;padding:12px}.sc-demo-controls .btn{width:auto;min-width:200px}.sc-demo-stage{height:310px;padding:16px;border-top:1px solid #2b3546}.sc-demo-window{max-width:500px}.sc-demo .sc-app-top{font-size:7px}.sc-demo .sc-canvas-bar{font-size:7px}.sc-demo-window.is-phone{width:138px}.sc-demo-window.is-phone .sc-site{min-height:258px;padding-top:7px}.sc-demo-window.is-phone .sc-site-hero img{margin-top:12px}.sc-tour-foot{align-items:start;gap:12px}.sc-tour-foot p{font-size:9px;margin:0;max-width:210px}#sc-replay{white-space:nowrap;font-size:10px;padding:8px}.sc-device-scene{height:350px;margin-top:35px}.sc-desktop{left:0;width:94%;top:0}.sc-browser-bar{height:22px}.sc-browser-bar span{padding:2px 30px;font-size:6px}.sc-device-scene .sc-phone{width:125px;top:128px;right:0;padding:5px;border-radius:20px}.sc-phone .sc-site{border-radius:13px;padding-top:8px}.sc-detail-grid{grid-template-columns:1fr;gap:32px;margin-top:28px}.sc-detail-grid article{padding-top:20px}.sc-detail-grid h3{margin:15px 0 12px;font-size:24px}.sc-detail-grid p{font-size:15px}.sc-detail-icon{font-size:28px}.sc-demo .sc-demo-status{margin:12px 0 0;min-height:0}}
@media(prefers-reduced-motion:reduce){.sc-hero *, .sc-section *{animation:none!important;transition:none!important;will-change:auto!important}.sc-hero-app{transform:translateX(-50%)}.sc-prompt,.sc-float-phone,.sc-desktop,.sc-device-scene .sc-phone,.sc-demo-window{transform:none}.sc-demo-window.is-phone{transform:none}}
/* Keep the fixed site navigation clear of the product lockup. */
.sc-hero{padding-top:112px}.sc-tour{scroll-margin-top:90px}.sc-tabs{scroll-margin-top:85px}.sc-demo-stage{height:550px}.sc-demo-window{max-width:780px}.sc-demo .sc-site-hero img{aspect-ratio:1.1}.sc-demo-window.is-phone .sc-site-hero img{aspect-ratio:1.4}
@media(max-width:700px){.sc-hero{padding-top:90px}.sc-demo-stage{height:310px}.sc-demo-window{max-width:500px}}
/* Build choreography reveals the actual page pieces in their reading order. */
.sc-demo-window{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.sc-build-curtain{inset:auto 24px 22px auto;display:grid;grid-template-columns:28px 1fr;gap:5px 10px;padding:14px 18px;border:1px solid #4a628e;background:#101b30;box-shadow:0 8px 30px #0008;pointer-events:none}
.sc-build-curtain>span{font-size:24px;grid-row:1/3}.sc-build-curtain p{font-size:10px;margin:0}.sc-build-curtain i{width:160px}.sc-demo.is-building .sc-build-curtain i{animation-duration:2s}.sc-demo.is-building .sc-site-nav{animation:sc-piece .6s .1s both}.sc-demo.is-building .sc-site-hero>div{animation:sc-piece .7s .35s both}.sc-demo.is-building .sc-site-hero img{animation:sc-piece .8s .65s both}.sc-demo.is-building .sc-site-bottom{animation:sc-piece .6s 1.05s both}@keyframes sc-piece{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.sc-demo-window{transition:none}.sc-demo.is-building *{animation:none!important}}
@media(max-width:700px){.sc-demo-controls input:not([type=checkbox]),.sc-demo-controls select{font-size:16px}}
/* Mac hardware, actual Core workspace cues, and upcoming iPhone concepts. */
.sc-mobile-link{display:block;font-size:11px;color:#9fc1ff;margin-top:22px}.sc-mobile-link span{margin-left:8px}.sc-macbook{padding:12px 12px 0;border:2px solid #6c737e;border-radius:19px 19px 9px 9px;background:linear-gradient(115deg,#5c636d,#16181c 12%,#08090b 85%,#626873);box-shadow:0 35px 90px #000b,0 0 0 1px #030405}.sc-macbook .sc-app{border:1px solid #343a44;border-radius:6px;box-shadow:none}.sc-mac-camera{position:absolute;z-index:3;width:82px;height:16px;top:11px;left:calc(50% - 41px);background:#080a0d;border-radius:0 0 7px 7px}.sc-mac-camera:after{content:"";position:absolute;left:50%;top:3px;width:5px;height:5px;border-radius:50%;background:radial-gradient(circle,#335375,#080c15 70%)}.sc-mac-chin{height:21px;font:8px/21px -apple-system,BlinkMacSystemFont,sans-serif;text-align:center;letter-spacing:.04em;color:#91959e}.sc-mac-base{position:absolute;top:100%;left:-7%;width:114%;height:26px;background:linear-gradient(90deg,#747b86,#c0c4cc 2%,#5d6570 8%,#87909e 50%,#525963 92%,#c5c9d1 98%,#666e7a);border-radius:2px 2px 50% 50%/2px 2px 13px 13px;box-shadow:0 5px 0 #232730,0 18px 24px #0008;border-top:2px solid #b5bdc9}.sc-mac-base i{position:absolute;width:15%;height:8px;left:42.5%;top:-2px;background:linear-gradient(#434951,#939ba6);border-radius:0 0 12px 12px}.sc-core-toolbar{background:#0b0d10;display:flex;align-items:center;gap:15px;height:40px;padding:0 15px;color:#828a97;font-size:8px;letter-spacing:.03em;border-bottom:1px solid #272d37}.sc-core-toolbar b{font-size:12px;color:#f0f0ed;margin-right:auto;white-space:nowrap}.sc-core-toolbar i{font-size:7px;font-style:normal;border:1px solid #777;padding:2px 4px;margin-left:7px;letter-spacing:.1em}.sc-core-toolbar .active{color:#e9ecee;border-top:2px solid #619eff;padding-top:3px}.sc-app .sc-sidebar{background:#f8f7f4;color:#4d525b;border-right:1px solid #dbd8d1}.sc-sidebar .sc-small{color:#7b7c80}.sc-sidebar .sc-selected{background:#e4eaff;color:#204fb2}.sc-sidebar img{filter:brightness(.2)}.sc-sidebar hr{border-color:#dad8d4}.sc-app .sc-canvas{background:#e9e6de}.sc-app .sc-canvas-bar{color:#646975}.sc-app .sc-site{box-shadow:0 3px 16px #00000014}.sc-demo .sc-core-toolbar{font-size:6px;gap:10px;height:30px;padding:0 10px}.sc-demo .sc-core-toolbar b{font-size:9px}.sc-demo-window.is-phone .sc-core-toolbar{display:none}.sc-float-phone,.sc-phone{background:linear-gradient(120deg,#84898f,#15171b 8%,#4e535b 90%,#afb3bb);border:1px solid #a0a6af;box-shadow:inset 0 0 0 2px #090b0e,0 28px 65px #0009}.sc-phone-notch{width:29%;left:35.5%;height:11px;top:14px;border-radius:20px}.sc-float-phone:after,.sc-phone:after{content:"";position:absolute;bottom:12px;left:35%;height:3px;width:30%;border-radius:4px;background:#141c23}.sc-desktop{border:10px solid #171b22;border-radius:15px 15px 5px 5px;box-shadow:0 35px 60px #0008}.sc-desktop:before{content:"";position:absolute;top:100%;left:-10px;right:-10px;height:43px;background:linear-gradient(120deg,#656f80,#373f4c 55%,#717d91);border-radius:0 0 9px 9px}.sc-desktop:after{content:"";position:absolute;top:calc(100% + 43px);width:30%;height:72px;left:35%;background:linear-gradient(100deg,#6c778a,#323a47 45%,#7f8a9b);clip-path:polygon(28% 0,72% 0,75% 77%,100% 95%,100% 100%,0 100%,0 95%,25% 77%)}.sc-mobile-section{background:radial-gradient(ellipse at 50% 61%,#14306c55,transparent 54%),#050608;overflow:hidden;padding-bottom:65px}.sc-mobile-heading{text-align:center;max-width:760px;margin:0 auto}.sc-coming{font:11px 'IBM Plex Mono',monospace;letter-spacing:.18em;color:#a7c8ff;display:flex;align-items:center;justify-content:center;gap:9px}.sc-coming span{width:6px;height:6px;background:#81b2ff;border-radius:50%;box-shadow:0 0 14px #357cff}.sc-mobile-heading h2{font-size:clamp(48px,6vw,86px);font-weight:400;line-height:1.04;letter-spacing:-.055em;margin:32px 0 25px}.sc-mobile-heading h2>span{color:#99a9c2}.sc-mobile-heading>p:last-child{font-size:18px;line-height:1.6;color:#adb6c5}.sc-iphone-gallery{height:720px;max-width:1080px;position:relative;margin:55px auto 0;perspective:1800px}.sc-iphone{position:absolute;width:294px;height:618px;padding:7px;background:linear-gradient(115deg,#c6cbd0 0%,#757b83 2%,#15181e 7%,#68717e 95%,#c2c7ce);border:1px solid #939ba8;border-radius:48px;box-shadow:inset 0 0 0 3px #191c23,0 35px 80px #000b;overflow:hidden;color:#f3f5fa;font-family:-apple-system,BlinkMacSystemFont,'IBM Plex Sans',sans-serif;container-type:inline-size;transform-style:preserve-3d}.sc-iphone:before{content:"";position:absolute;inset:8px;border-radius:40px;background:#080b11;z-index:0}.sc-iphone:after{content:"";position:absolute;inset:3px;border-radius:44px;border:1px solid #ffffff21;pointer-events:none}.sc-iphone-left{left:5%;top:58px;transform:rotateY(14deg) rotateZ(-9deg);z-index:1}.sc-iphone-center{left:calc(50% - 147px);top:8px;z-index:3}.sc-iphone-right{right:5%;top:58px;transform:rotateY(-14deg) rotateZ(9deg);z-index:2}.sc-ios-status{height:48px;position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;padding:0 22px;font-size:11px;font-weight:600}.sc-ios-status i{position:absolute;top:8px;left:calc(50% - 42px);height:25px;width:84px;background:#000;border-radius:19px;box-shadow:0 0 0 1px #151a23}.sc-ios-status i:after{content:"";position:absolute;right:10px;top:9px;width:6px;height:6px;background:#142137;border-radius:50%;box-shadow:inset 0 0 2px #5584b966}.sc-ios-app{position:relative;z-index:1;padding:0 16px;height:calc(100% - 49px);overflow:hidden;border-radius:0 0 37px 37px}.sc-ios-top{display:flex;align-items:center;gap:7px;height:44px;font-size:12px}.sc-ios-top img{border-radius:7px;width:24px;height:24px}.sc-ios-top>span{margin-left:auto;color:#75829b;letter-spacing:.08em}.sc-ios-copy{padding:16px 0 19px}.sc-ios-copy small,.sc-ios-metric>small{font-size:7px;letter-spacing:.12em;color:#7f8ca5}.sc-ios-copy h3{font-size:28px;line-height:1.1;letter-spacing:-.045em;font-weight:600;margin:13px 0 10px}.sc-ios-copy p{font-size:10px;color:#8190a8;margin:0}.sc-ios-metric{padding:15px;background:linear-gradient(125deg,#18243b,#111925);border:1px solid #2f3e59;border-radius:17px}.sc-ios-metric>div:not(.sc-ios-metric-foot){display:flex;align-items:center;justify-content:space-between;margin:12px 0 5px}.sc-ios-metric strong{font-size:31px;letter-spacing:-.055em}.sc-ios-metric em{font-style:normal;font-size:9px;color:#a1d6b2;background:#77cfa818;padding:5px 7px;border-radius:7px}.sc-ios-metric svg{display:block;width:100%;height:auto}.sc-ios-metric-foot{display:flex;justify-content:space-between;color:#72839c;font-size:7px}.sc-ios-list{margin-top:13px}.sc-ios-list>div{display:flex;align-items:center;gap:9px;padding:12px 0;border-bottom:1px solid #26334a}.sc-ios-list-icon{width:26px;height:26px;display:grid;place-items:center;background:#233d6b;border-radius:8px;color:#9ec1ff}.sc-ios-list b{display:block;font-size:10px;font-weight:500}.sc-ios-list small{display:block;font-size:8px;color:#73839c;margin-top:5px}.sc-ios-list i{margin-left:auto;color:#65768f;font-style:normal}.sc-ios-tabbar{display:flex;position:absolute;bottom:17px;left:16px;right:16px;justify-content:space-around;padding:12px 0;background:#131b2bdd;border:1px solid #34415a;border-radius:23px;backdrop-filter:blur(10px)}.sc-ios-tabbar>b{color:#7f8fa9;text-align:center;font-size:16px;line-height:1;font-weight:400}.sc-ios-tabbar>b:first-child{color:#8fb7ff}.sc-ios-tabbar span{display:block;font-size:7px;margin-top:6px}.sc-home-indicator{position:absolute;bottom:10px;left:34%;width:32%;height:4px;border-radius:4px;background:#e0e4ec;z-index:3}.sc-ios-web{border-radius:12px;background:#f4f2ed;color:#183e34;padding:14px;position:relative}.sc-ios-web>b{font-size:16px;letter-spacing:-.07em}.sc-ios-web img{width:100%;height:94px;object-fit:cover;border-radius:7px;margin:12px 0}.sc-ios-web h4{font-size:23px;letter-spacing:-.05em;line-height:1.05;margin:0 0 13px}.sc-ios-web>span{font-size:8px;border-bottom:1px solid #365b4d;padding-bottom:4px}.sc-ios-edit{position:relative;margin-top:12px;background:#1c2d4e;border:1px solid #3f5c8f;border-radius:13px;padding:10px;display:flex;gap:7px;align-items:center}.sc-ios-edit>span{font-size:23px;color:#9fc0ff}.sc-ios-edit p{font-size:9px;line-height:1.4;margin:0}.sc-ios-edit>b{border-radius:50%;background:#5587f3;color:#fff;width:23px;height:23px;flex-shrink:0;display:grid;place-items:center}.sc-ios-review{border:1px solid #384b66;border-radius:12px;overflow:hidden;position:relative;background:#172133}.sc-ios-review img{width:100%;height:145px;object-fit:cover}.sc-ios-review>div{padding:12px}.sc-ios-review b{display:block;font-size:11px}.sc-ios-review small{display:block;color:#8394ad;font-size:8px;margin-top:5px}.sc-ios-pin{position:absolute;top:72px;left:65%;background:#4c7df3;width:22px;height:22px;font-size:10px;border-radius:50%;display:grid;place-items:center;box-shadow:0 0 0 5px #5297ff55}.sc-ios-comment{padding:12px;margin-top:12px;border:1px solid #31415d;border-radius:12px;background:#121b2c}.sc-ios-comment b{display:flex;align-items:center;gap:6px;font-size:9px}.sc-ios-comment b span{display:grid;place-items:center;border-radius:50%;background:#324b77;color:#aacbff;width:20px;height:20px}.sc-ios-comment p{font-size:10px;line-height:1.5;margin:9px 0}.sc-ios-comment small{font-size:7px;color:#7c91b4}.sc-ios-review-btn{margin-top:11px;border:1px solid #325697;background:#183263;color:#b4ceff;border-radius:9px;font-size:9px;padding:11px;text-align:center}.sc-mobile-footer{display:flex;align-items:center;justify-content:center;gap:35px;flex-wrap:wrap;text-align:center}.sc-mobile-footer p{font-size:10px;color:#7d8ca4;line-height:1.65;margin:0}.sc-mobile-footer a{font-size:12px}.sc-quiet-button{background:none;color:#94a3ba;border:1px solid #3a4962;font:11px 'IBM Plex Sans',sans-serif;padding:10px 14px;cursor:pointer}.sc-iphone-gallery.is-revealing .sc-iphone-left{animation:sc-iphone-left 1.8s cubic-bezier(.2,.7,.2,1) both}.sc-iphone-gallery.is-revealing .sc-iphone-center{animation:sc-iphone-center 1.5s .12s cubic-bezier(.2,.7,.2,1) both}.sc-iphone-gallery.is-revealing .sc-iphone-right{animation:sc-iphone-right 1.8s .2s cubic-bezier(.2,.7,.2,1) both}.sc-iphone-gallery.is-revealing .sc-ios-chart-line{stroke-dasharray:300;animation:sc-chart 1.4s .75s ease both}.sc-iphone-gallery.is-revealing .sc-ios-edit{animation:sc-piece .8s 1.25s both}.sc-iphone-gallery.is-revealing .sc-ios-comment{animation:sc-piece .8s 1.5s both}@keyframes sc-iphone-left{from{opacity:0;transform:translateX(80px) translateY(75px) rotateY(28deg) rotateZ(-2deg)}to{opacity:1;transform:rotateY(14deg) rotateZ(-9deg)}}@keyframes sc-iphone-center{from{opacity:0;transform:translateY(100px) rotateX(8deg)}to{opacity:1;transform:translateY(0)}}@keyframes sc-iphone-right{from{opacity:0;transform:translateX(-80px) translateY(75px) rotateY(-28deg) rotateZ(2deg)}to{opacity:1;transform:rotateY(-14deg) rotateZ(9deg)}}@keyframes sc-chart{from{stroke-dashoffset:300}to{stroke-dashoffset:0}}
@media(max-width:1000px){.sc-core-toolbar{gap:9px;font-size:6px;height:32px}.sc-core-toolbar b{font-size:10px}.sc-iphone-gallery{transform:scale(.85);transform-origin:50% 0;width:1080px;left:50%;margin-left:-540px;height:650px}.sc-iphone-left{left:12%}.sc-iphone-right{right:12%}.sc-iphone-center{z-index:4}}
@media(max-width:700px){.sc-mobile-link{font-size:11px;margin-top:18px}.sc-macbook{padding:6px 6px 0;border-width:1px;border-radius:10px 10px 5px 5px}.sc-mac-camera{top:6px;width:38px;left:calc(50% - 19px);height:9px;border-radius:0 0 4px 4px}.sc-mac-camera:after{width:3px;height:3px;top:2px}.sc-mac-chin{height:12px;line-height:12px;font-size:5px}.sc-mac-base{height:12px;left:-4%;width:108%;box-shadow:0 3px 0 #232730,0 15px 20px #0008}.sc-mac-base i{height:5px}.sc-core-toolbar{font-size:3.8px;height:23px;padding:0 6px;gap:5px}.sc-core-toolbar b{font-size:6px}.sc-core-toolbar i{display:none}.sc-demo .sc-core-toolbar{font-size:4px;gap:5px;padding:0 6px;height:23px}.sc-demo .sc-core-toolbar b{font-size:6px}.sc-hero .sc-float-phone{top:175px}.sc-hero .sc-prompt{top:254px}.sc-hero .sc-theater{height:435px}.sc-desktop{border-width:5px;border-radius:8px 8px 2px 2px}.sc-desktop:before{left:-5px;right:-5px;height:22px}.sc-desktop:after{top:calc(100% + 22px);height:40px}.sc-mobile-heading h2{font-size:50px;margin:25px 0}.sc-mobile-heading>p:last-child{font-size:15px}.sc-coming{font-size:8px}.sc-iphone-gallery{width:850px;left:50%;margin-left:-425px;transform:scale(.58);height:440px;margin-top:36px}.sc-iphone-left{left:8%;top:76px;transform:rotateY(14deg) rotateZ(-9deg)}.sc-iphone-center{top:10px}.sc-iphone-right{right:8%;top:76px}.sc-mobile-footer{gap:20px;position:relative;margin-top:-40px}.sc-mobile-footer p{font-size:9px}.sc-mobile-section{padding-bottom:45px}.sc-iphone-gallery.is-revealing .sc-iphone-left,.sc-iphone-gallery.is-revealing .sc-iphone-right{animation-duration:1.4s}}
@media(prefers-reduced-motion:reduce){.sc-iphone-gallery *{animation:none!important}.sc-iphone-left{transform:rotateZ(-7deg)}.sc-iphone-right{transform:rotateZ(7deg)}}
.sc-film-section{background:#050608;padding-bottom:0}.sc-film-frame{position:relative;overflow:hidden;background:#000;border:1px solid #24334d;border-radius:3px}.sc-film-frame>img,.sc-film-frame>video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}.sc-film-caption{position:absolute;bottom:28px;left:30px;color:#fff}.sc-film-caption>span{font:8px 'IBM Plex Mono',monospace;letter-spacing:.15em;color:#a3b9d6}.sc-film-caption p{margin:8px 0 0;font-size:14px}.sc-film-note{font-size:10px;color:#73819a;margin:17px 0 0}.sc-film-toggle{position:absolute;bottom:25px;right:25px;width:40px;height:40px;display:grid;place-items:center;border:1px solid #5f738f;background:#101c31b8;border-radius:50%;color:#e6edff;font-size:13px;cursor:pointer}.sc-film-toggle:focus-visible{outline:2px solid #b0d0ff;outline-offset:4px}
@media(max-width:700px){.sc-film-caption{bottom:12px;left:14px}.sc-film-caption p{font-size:10px;margin-top:4px}.sc-film-caption>span{font-size:6px}.sc-film-note{font-size:9px;line-height:1.5}.sc-film-toggle{bottom:12px;right:12px;width:32px;height:32px;font-size:11px}}

#mobile,#tour{scroll-margin-top:76px}@media(max-width:700px){.sc-mobile-footer{margin-top:5px}.sc-iphone-gallery{height:470px}}

/* Keep every concept action above the iOS tab bar. */
.sc-iphone{height:660px}.sc-iphone-gallery{height:770px}.sc-ios-copy{padding:12px 0 15px}.sc-ios-review img{height:130px}@media(max-width:1000px){.sc-iphone-gallery{height:700px}}@media(max-width:700px){.sc-iphone-gallery{height:485px}}

.sc-ios-app{font-size:12px;line-height:1.4}.sc-ios-copy{font-size:10px;line-height:1.4}.sc-ios-copy small{display:block;line-height:1.4}.sc-ios-metric{font-size:10px;line-height:1.4}

/* Physical product presentation: material, contact shadow and genuine perspective. */
.sc-app{border-radius:14px;border:1px solid #b5bfcd88;box-shadow:0 1px 0 #fff8 inset,0 -1px 0 #04070c inset,0 2px 0 #18202e,0 5px 0 #10151f,0 6px 0 #556075,0 10px 20px #0008,0 40px 75px #000b,0 85px 130px #0009;position:relative}
.sc-app-top{background:linear-gradient(180deg,#414956f5,#242b36f5);height:44px;border-bottom:1px solid #080d15;box-shadow:0 1px 0 #ffffff18 inset;font-family:-apple-system,BlinkMacSystemFont,sans-serif;font-size:11px;color:#e5e9ef;position:relative;z-index:2}
.sc-dots{gap:7px}.sc-dots i{width:10px;height:10px;box-shadow:0 0 0 .5px #0007,inset 0 1px 1px #ffffff65,0 1px 2px #0005}.sc-dots i:first-child{background:#ff5f57}.sc-dots i:nth-child(2){background:#febc2e}.sc-dots i:nth-child(3){background:#28c840}
.sc-sidebar{background:linear-gradient(120deg,#e5eaf0ee,#d1d8e4f5);border-right:1px solid #aab4c577;box-shadow:inset 1px 0 0 #ffffff99}.sc-sidebar .sc-selected{border:1px solid #99b8e799;border-radius:6px;background:linear-gradient(#c6d9f3,#b9cdec);box-shadow:0 1px 1px #ffffff66 inset,0 2px 6px #7b8fa32b;color:#224674}
.sc-canvas{background:linear-gradient(135deg,#cfd6e1,#e0e4eb 40%,#bfc9d7)}.sc-canvas-bar{color:#596576;border-bottom:1px solid #bbc3ce}.sc-canvas>.sc-site{box-shadow:0 0 0 1px #7e899422,0 6px 12px #15243714,0 25px 40px #24374b28}
.sc-macbook{background:linear-gradient(125deg,#98a0ab,#252d38 9%,#111720 50%,#7e8797);border-color:#a3acbb;box-shadow:inset 0 1px 0 #e4e9f4,0 2px 0 #111824,0 5px 0 #5e6b80,0 9px 0 #101721,0 45px 70px #0009}
.sc-mac-base{height:29px;background:linear-gradient(180deg,#adb7c7 0%,#d1d9e5 7%,#79869a 14%,#465367 44%,#171f2c 82%,#4f6078 95%);box-shadow:0 3px 0 #101722,0 5px 0 #56667e,0 18px 20px #000a}
.sc-mac-base i{background:linear-gradient(#192436,#657389);box-shadow:inset 0 -1px 0 #c1c9d9}
.sc-prompt{border-radius:14px;border:1px solid #91a7ce88;background:linear-gradient(135deg,#354965f5,#111d30f5);box-shadow:inset 0 1px 0 #e3ecff45,0 2px 0 #172439,0 4px 0 #6680a04d,0 25px 40px #000b,0 55px 85px #0009;backdrop-filter:blur(20px)}
.sc-demo-stage{perspective:1500px;isolation:isolate;overflow:visible;background:radial-gradient(ellipse at 52% 50%,#23395166,transparent 67%)}
.sc-window-layer{position:absolute;left:8%;top:17%;width:84%;height:68%;border-radius:15px;border:1px solid #8ca9d650;background:linear-gradient(125deg,#24374eaa,#0b111faa);pointer-events:none;box-shadow:0 20px 45px #0007;transition:opacity .25s;z-index:-1}
.sc-window-layer:before{content:"";position:absolute;left:14px;top:13px;width:7px;height:7px;background:#7185a6;border-radius:50%;box-shadow:13px 0 #526985,26px 0 #3e5973}
.sc-window-layer-back{transform:translate3d(44px,-28px,-90px) rotateY(-12deg) rotateZ(-6deg)}.sc-window-layer-mid{transform:translate3d(-26px,24px,-45px) rotateY(-10deg) rotateZ(4deg)}
.sc-demo-window{transform:perspective(1400px) rotateY(-10deg) rotateX(5deg) rotateZ(-2deg);transform-origin:50% 50%;transition:transform .15s linear,width .55s cubic-bezier(.2,.7,.2,1)}
.sc-demo:focus-within .sc-demo-window{transform:perspective(1400px) rotateY(-3deg) rotateX(1deg)!important}.sc-demo-window.is-phone{transform:perspective(1400px) rotateY(-9deg) rotateZ(2deg)!important}
.sc-phone,.sc-float-phone{border-radius:30px;background:linear-gradient(110deg,#e3e8ed,#647184 2%,#151a23 6%,#39465b 92%,#b5c3d6 98%,#637186);border:1px solid #d0d7e2;box-shadow:inset 0 0 0 3px #080b10,inset -5px 0 3px #7389ad,4px 2px 0 #526780,7px 4px 0 #182438,9px 5px 0 #556b8b,0 35px 60px #000a,0 60px 95px #0008}
.sc-phone-notch{height:10px!important;width:26%!important;left:37%!important;top:13px!important;box-shadow:0 0 0 1px #141b25,inset -8px 0 0 #06080c}
.sc-phone-notch:after{content:"";position:absolute;right:5px;top:3px;width:4px;height:4px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#496794,#07101d 70%)}
.sc-desktop{box-shadow:0 0 0 1px #adb5c3,4px 2px 0 #6c7c93,8px 4px 0 #27364c,11px 6px 0 #53667f,0 35px 70px #000a;transform-origin:50% 80%}
.sc-scroll-hint{display:block;color:#7a8da9;font:9px 'IBM Plex Mono',monospace;letter-spacing:.17em;margin-top:30px}.sc-scroll-hint>span{display:inline-block;margin-left:14px;font-size:14px}
.sc-iphone-gallery.has-depth{width:100%;max-width:1400px;height:800px;margin:5px auto 0;left:auto;transform:none;perspective:none;isolation:isolate}
.sc-iphone-gallery.has-depth>[data-mobile-device]{visibility:hidden;pointer-events:none}
.sc-depth-canvas{display:block;position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.sc-iphone-gallery.has-depth:before{content:"";position:absolute;bottom:2%;left:10%;width:80%;height:20%;background:radial-gradient(ellipse,#1e365640,transparent 67%);transform:perspective(500px) rotateX(65deg);pointer-events:none}
.sc-mobile-section{background:radial-gradient(ellipse at 50% 67%,#17243688,transparent 52%),#050608}
@media(max-width:1000px){.sc-iphone-gallery.has-depth{height:680px}.sc-demo-stage{overflow:hidden}.sc-dots i{width:8px;height:8px}.sc-demo .sc-app-top{height:30px;font-size:7px}}
@media(max-width:700px){.sc-iphone-gallery.has-depth{width:calc(100% + 40px);margin-left:-20px;height:580px;margin-top:10px;left:0}.sc-app-top{height:24px;font-size:6px;padding:0 8px}.sc-dots{gap:4px}.sc-dots i{width:5px;height:5px}.sc-demo .sc-app-top{font-size:5px;height:25px}.sc-demo-window{transform:perspective(1200px) rotateY(-7deg) rotateX(4deg)}.sc-window-layer{display:none}.sc-mac-base{height:14px}.sc-phone,.sc-float-phone{box-shadow:inset 0 0 0 2px #080b10,2px 1px 0 #677b96,4px 2px 0 #162235,0 25px 40px #000a}.sc-scroll-hint{font-size:8px}.sc-mobile-footer{margin-top:0}}
@media(prefers-reduced-motion:reduce){.sc-demo-window{transform:none!important;transition:none}.sc-window-layer{transform:none;opacity:.35}.sc-hero-app{transform:translateX(-50%)!important}}

@media(prefers-reduced-motion:reduce){.sc-demo .sc-demo-window,.sc-demo:focus-within .sc-demo-window,.sc-demo-window.is-phone{transform:none!important;transition:none!important}}