/* A recording studio, from first take to final handoff. */
:root { --ink-0:#090b0d; --ink-1:#101315; --ink-2:#171b1e; --ink-3:#1b2023; --fg:#f6f5f2; --fg-2:#abaeb0; --fg-3:#929799; --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.13); --sc-canvas:#090b0d; --sc-surface:#101315; --sc-ink:#f6f5f2; --sc-ink-soft:#abaeb0; }
body { background:#090b0d; }
h1,h2,h3 { font-weight:500; letter-spacing:-.035em; }
.nav { background:rgba(9,11,13,.84); backdrop-filter:blur(18px); }
.nav .btn { border-radius:100px; }
.btn { border-radius:100px; }
.btn-p { box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 6px 22px rgba(0,0,0,.18); }
.btn:hover { transform:translateY(-2px); }
.btn:active { transform:translateY(0); }
.sc-grain { opacity:.025; }
.studio-home .sec { padding-block:clamp(5rem,8vw,8rem); }
.studio-home .hd { max-width:46rem; margin-bottom:3rem; }
.studio-home .hd h2 { font-size:clamp(2.15rem,3.4vw,3.1rem); font-weight:500; }
.studio-home .lede { font-size:1.06rem; max-width:53ch; line-height:1.6; }
.studio-home h3 { font-weight:500; }
.muted { color:#969da1; }
.text-link { display:inline-flex; gap:1.8rem; align-items:center; color:var(--fg); font-size:.91rem; font-weight:500; padding-block:.5rem; }
.text-link span { transition:transform 200ms; color:var(--accent-lift); }
.text-link:hover span { transform:translate(3px,-3px); }
.record-dot,.studio-label i { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 9px rgba(255,67,56,.22); flex-shrink:0; }
.studio-label { display:flex; align-items:center; gap:.65rem; font-size:.78rem; color:var(--fg-3); letter-spacing:.025em; }

/* The opening scene leaves the message room to breathe. */
.studio-home .hero--scene { height:185svh; }
.studio-home .scene { height:100svh; min-height:660px; }
.studio-home .scene__frame { transform:translateY(calc((1 - var(--hp,0)) * 210px)) scale(1.04); object-position:50% 58%; }
.studio-home .scene__shade { background:linear-gradient(180deg,#090b0d 0%,rgba(9,11,13,.94) 10%,rgba(9,11,13,.78) 30%,rgba(9,11,13,.14) 63%,rgba(9,11,13,.08) 78%,#090b0d 100%); }
.studio-home .hero__content { top:3.1rem; width:min(60rem,94%); padding-top:0; }
.studio-home .hero__title { font-size:clamp(3.5rem,5.7vw,5.2rem); font-weight:500; line-height:1.03; letter-spacing:-.047em; }
.studio-home .hero__title em { font-style:normal; color:var(--accent); }
.studio-home .hero__sub { max-width:34rem; margin:1.3rem auto 0; font-size:1.12rem; line-height:1.5; color:#c4c7c9; }
.studio-home .hero__cta { margin-top:1.65rem; gap:.7rem; }
.studio-home .hero__cta .btn { height:3.35rem; padding-inline:1.5rem; font-size:.94rem; }
.studio-home .scene__hint { bottom:2.1rem; font-size:.65rem; color:#b1b5b7; }
.studio-home .scene__tl { bottom:1.5rem; width:min(66rem,92%); }
.studio-home .scene__tl .tl { height:7.3rem; background:rgba(11,15,18,.9); backdrop-filter:blur(14px); border-radius:.9rem; }
.scene__mobile-cue { display:none; }
.studio-proof { padding:1.25rem 0; display:flex; gap:2rem; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); color:var(--fg-3); font-size:.82rem; }
.studio-proof > span:first-child { color:var(--fg); display:flex; align-items:center; gap:.65rem; }
.studio-home .studio-intro { padding-block:6rem 2.5rem; }
.studio-intro .wrap { display:grid; grid-template-columns:1.2fr .8fr; align-items:center; gap:4rem; }
.studio-intro h2 { font-size:clamp(1.9rem,2.7vw,2.5rem); line-height:1.2; }
.studio-intro p { max-width:40ch; font-size:1rem; line-height:1.7; color:var(--fg-2); }

/* One real product surface, selected by a clear, keyboard accessible tab. */
.studio-tabs,.company-tabs { display:flex; padding:.4rem; background:#14181b; border:1px solid var(--line); border-radius:100px; width:max-content; max-width:100%; margin:0 auto 2rem; gap:.3rem; }
.studio-tabs button,.company-tabs button { padding:.8rem 1.5rem; border-radius:100px; display:flex; gap:.65rem; align-items:center; color:var(--fg-2); font-size:.87rem; white-space:nowrap; transition:background 230ms,color 230ms,box-shadow 230ms; }
.studio-tabs button:hover,.company-tabs button:hover { color:white; background:rgba(255,255,255,.035); }
.studio-tabs [aria-selected="true"],.company-tabs [aria-selected="true"] { background:#343b40; color:white; box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 2px 5px #0005; }
.studio-tabs .tab-index { font:500 .61rem var(--mono); color:#737d84; }
.studio-tabs [aria-selected="true"] .tab-index { color:var(--accent-lift); }
.tour-panels { border:1px solid var(--line-2); border-radius:1.8rem; background:#0e1214; padding:.5rem; box-shadow:0 0 0 5px #ffffff02,0 30px 80px -45px #000; }
.tour-panel { display:grid; grid-template-columns:.9fr 1.1fr; min-height:32rem; }
.tour-panel[hidden] { display:none !important; }
.tour-panel.is-active { animation:tour-in 400ms cubic-bezier(.2,.7,.2,1) both; }
@keyframes tour-in { from { opacity:.3; transform:translateY(8px); } to { opacity:1; transform:none; } }
.tour-copy { padding:2.8rem; display:flex; flex-direction:column; align-items:flex-start; }
.tour-copy h3 { font-size:clamp(2rem,2.75vw,2.6rem); line-height:1.1; margin-top:3rem; }
.tour-copy p { color:var(--fg-2); margin-top:1.3rem; max-width:38ch; font-size:1rem; line-height:1.65; }
.tour-copy .text-link { margin-top:1.3rem; }
.tour-meta { margin-top:auto; padding-top:2rem; color:var(--fg-3); font-size:.73rem; }
.studio-stage { position:relative; isolation:isolate; overflow:hidden; border-radius:1.3rem; background:#11171b url('../media/studio-20260904/recording-studio.webp') center/cover no-repeat; perspective:1100px; min-width:0; }
.studio-stage::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(8,12,16,.13),transparent 70%,rgba(0,0,0,.5)); z-index:-1; }
.stage-grid { position:absolute; inset:0; z-index:-1; opacity:.09; background:repeating-linear-gradient(90deg,transparent 0 49px,#cfd8dd 50px,transparent 51px); mask-image:linear-gradient(transparent,black); }
.product-plane { position:absolute; left:10%; top:19%; width:80%; transform:rotateY(-12deg) rotateX(6deg) rotateZ(-3deg); transform-style:preserve-3d; border:1px solid #ffffff26; border-radius:.85rem; background:#0d1114; box-shadow:2px 3px 0 #30373b,7px 10px 0 -4px #141a1e,14px 30px 50px #0009; transition:transform 650ms cubic-bezier(.2,.7,.25,1); }
.product-plane::before { content:""; position:absolute; inset:-10px; border:1px solid #ffffff0a; border-radius:1.2rem; pointer-events:none; }
.product-plane img { display:block; position:relative; width:100%; height:auto; max-height:27rem; object-fit:contain; padding:.4rem; border-radius:.85rem; }
.studio-stage:hover .product-plane { transform:rotateY(-6deg) rotateX(3deg) rotateZ(-1deg) translateY(-5px); }
.stage-record .product-plane { top:35%; left:6%; width:88%; transform:rotateY(-13deg) rotateX(10deg) rotateZ(-4deg); }
.stage-edit .product-plane { width:58%; left:23%; top:7%; }
.stage-edit .product-plane img { max-height:25rem; }
.stage-personalise .product-plane { width:66%; left:17%; top:12%; }
.stage-personalise .product-plane img { max-height:24rem; }
.stage-convert .product-plane { width:83%; left:8%; top:27%; transform:rotateY(11deg) rotateX(6deg) rotateZ(3deg); }
.annotation { position:absolute; left:7%; bottom:12%; max-width:86%; display:flex; align-items:center; gap:.7rem; padding:.85rem 1.05rem; font-size:.8rem; color:#e1e4e5; background:rgba(31,38,43,.93); border:1px solid #ffffff25; border-radius:.65rem; box-shadow:0 10px 30px #0005; backdrop-filter:blur(14px); transform:rotate(-1deg); }
.annotation-dot { width:7px; height:7px; background:var(--accent); border-radius:50%; flex:0 0 auto; }
.annotation::before { content:""; position:absolute; left:1.3rem; bottom:100%; height:25px; width:1px; background:linear-gradient(transparent,#ff7168); }
.stage-caption { position:absolute; bottom:1.15rem; right:1.4rem; color:#8b9196; font-size:.66rem; }

/* A stable recording, with a changing company in the playback. */
.personal-section { background:linear-gradient(#090b0d,#0d1114 35%,#090b0d); }
.company-mark { width:1.35rem; height:1.35rem; border:1px solid #ffffff20; border-radius:.4rem; display:grid; place-items:center; font-size:.67rem; }
.personal-console { border:1px solid var(--line-2); background:#101619; border-radius:1.6rem; padding:.5rem; box-shadow:0 30px 100px #0004; }
.console-top { height:3rem; padding:0 1.4rem; display:flex; align-items:center; justify-content:space-between; font-size:.7rem; color:var(--fg-3); }
.console-top > span:first-child { color:var(--fg); display:flex; gap:.6rem; align-items:center; }
.console-counter { font-family:var(--mono); }
.personal-preview { min-height:34rem; position:relative; overflow:hidden; isolation:isolate; border-radius:1.1rem; perspective:1300px; background:#10171a url('../media/studio-20260904/recording-studio.webp') center/cover; --company-color:#a98ef2; }
[data-company-demo="leadfuze"] .personal-preview { --company-color:#64c5ec; }
[data-company-demo="moxby"] .personal-preview { --company-color:#f08e78; }
.viewer-browser { position:absolute; top:11%; left:8%; width:67%; border:1px solid #ffffff30; border-radius:.85rem; overflow:hidden; background:#121419; transform:rotateY(9deg) rotateX(4deg) rotateZ(-2deg); box-shadow:-3px 4px 0 #2f353a,-10px 14px 0 -6px #1b242a,0 40px 80px #0008; transition:transform 550ms; }
.browser-bar { display:flex; align-items:center; justify-content:space-between; background:#21282c; height:2.4rem; padding:0 1rem; color:#bdc3c8; font-size:.64rem; }
.window-dots { color:#687279; font-size:.6rem; letter-spacing:3px; }
.example-site { height:21rem; background:radial-gradient(ellipse at 80% 65%,color-mix(in srgb,var(--company-color) 18%,transparent),transparent 65%),#121218; color:#f7f7fa; position:relative; padding:1.5rem 2rem; overflow:hidden; transition:background 300ms; }
.example-brand { font:600 1.25rem var(--disp); letter-spacing:-.04em; }
.example-site-content { margin-top:3.1rem; position:relative; z-index:1; }
.example-site-content > span:first-child { font-size:.66rem; color:var(--company-color); letter-spacing:.025em; }
.example-site h3 { margin-top:.7rem; font-size:2.45rem; max-width:15ch; line-height:1.1; white-space:pre-line; }
.example-action { display:inline-flex; align-items:center; gap:1.5rem; margin-top:1.4rem; font-size:.68rem; border-bottom:1px solid var(--company-color); padding-bottom:.45rem; }
.example-shapes { position:absolute; right:4%; bottom:11%; width:30%; height:64%; perspective:400px; }
.example-shapes span { position:absolute; inset:0; border:1px solid color-mix(in srgb,var(--company-color) 60%,transparent); border-radius:1.2rem; transform:rotateY(-28deg) rotateZ(19deg); background:linear-gradient(150deg,color-mix(in srgb,var(--company-color) 17%,transparent),transparent); }
.example-shapes span:nth-child(2) { transform:translate(-15%,8%) rotateY(-28deg) rotateZ(19deg); }
.example-shapes span:nth-child(3) { transform:translate(-30%,16%) rotateY(-28deg) rotateZ(19deg); }
.example-player { height:2.35rem; display:flex; align-items:center; gap:.8rem; padding:0 1rem; background:#192025; font:500 .63rem var(--mono); }
.example-player > div { flex:1; height:3px; border-radius:2px; background:#ffffff1a; }
.example-player i { display:block; width:23%; height:100%; background:var(--accent); }
.caption-card { position:absolute; left:17%; bottom:9%; width:52%; padding:1rem 1.5rem; background:rgba(24,30,35,.97); border:1px solid #ffffff2b; border-radius:.8rem; transform:rotate(-1deg); box-shadow:0 15px 50px #000a; }
.caption-card > span:first-child { font-size:.63rem; color:#9aa4ab; }
.caption-card p { font-size:1rem; line-height:1.5; margin-top:.45rem; }
.caption-card strong { color:var(--company-color); border-bottom:1px solid var(--company-color); font-weight:500; }
.caption-wave { display:block; margin-top:.6rem; color:var(--accent); font-size:.68rem; letter-spacing:2px; }
.personal-aside { position:absolute; width:22%; right:3%; top:20%; transform:rotateY(-10deg) rotateZ(4deg); }
.personal-aside img { max-height:21rem; border-radius:.5rem; border:1px solid #ffffff30; box-shadow:10px 15px 30px #0009; }
.personal-aside > span { display:block; font-size:.64rem; color:#cad0d3; padding-top:1rem; }
.personal-timeline { max-width:65rem; padding:1.3rem 2rem .8rem; margin:auto; position:relative; }
.personal-timeline img { max-height:7rem; object-fit:contain; width:100%; border-radius:.5rem; }
.timeline-note { display:flex; align-items:center; gap:.6rem; justify-content:center; padding-top:.8rem; color:var(--fg-2); font-size:.72rem; }
.timeline-note i { width:14px; height:3px; background:var(--accent); }
.demo-disclosure { text-align:center; font-size:.7rem; color:var(--fg-3); margin-top:1rem; }
.personal-preview.is-changing .viewer-browser { animation:viewer-in 380ms cubic-bezier(.2,.7,.25,1) both; }
@keyframes viewer-in { from { opacity:.55; filter:blur(3px); translate:0 7px; } to { opacity:1; filter:none; translate:0 0; } }

/* Roomy stacked cards. Each image occupies a lit space inside the studio. */
.studio-stack .stack { gap:0; padding-top:.5rem; }
.studio-stack .deck { top:calc(5.5rem + var(--deck-index,0) * 16px); height:34rem; min-height:0; background:#101416; margin-bottom:3.5rem; border-radius:1.7rem; grid-template-columns:1fr 1fr; }
.studio-stack .deck__copy { padding:3.2rem; }
.studio-stack .deck__title { margin-top:3.3rem; font-size:2.55rem; font-weight:500; max-width:17ch; }
.studio-stack .deck__p { max-width:38ch; font-size:1rem; line-height:1.65; }
.studio-stack .deck__media { margin:.5rem; border-radius:1.2rem; height:auto; }
.studio-stack .deck__media img { position:relative; inset:auto; height:auto; object-fit:contain; padding:.3rem; }
.stage-share .product-plane { top:24%; left:5%; width:91%; }
.stage-measure .product-plane { width:94%; left:4%; top:34%; transform:rotateY(12deg) rotateX(8deg) rotateZ(3deg); }
.stage-create .product-plane { width:70%; left:17%; top:14%; }
.studio-stack .annotation { bottom:12%; font-size:.74rem; }

/* Integrations and use cases continue the story without another scroll hold. */
.connect-layout { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; }
.connect-copy h2,.faq-layout h2 { font-size:2.8rem; line-height:1.1; }
.connect-copy > p { margin-top:1.6rem; }
.connection-names { display:flex; flex-wrap:wrap; gap:.8rem 1.3rem; padding-block:1.5rem; font-weight:500; font-size:.86rem; color:#d2d6d8; }
.connect-stage { height:37rem; }
.connect-stage .product-plane { width:69%; left:17%; top:12%; transform:rotateY(-14deg) rotateZ(3deg); }
.connect-stage .product-plane img { max-height:27rem; }
.keys-note { margin-top:2.2rem; max-width:24rem; padding:1rem; background:#111619; border:1px solid var(--line); border-radius:.8rem; }
.keys-note img { border-radius:.4rem; }
.keys-note p { font-size:.72rem; color:var(--fg-3); margin-top:.8rem; }
.usecase-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2.5rem; }
.usecase-grid a { display:block; padding-top:1.4rem; border-top:1px solid #ffffff25; transition:border-color 200ms; }
.usecase-grid a:hover { border-color:var(--accent); color:var(--fg); }
.usecase-grid a > span { display:flex; justify-content:space-between; font-size:.75rem; color:var(--fg-3); }
.usecase-grid a b { color:var(--accent-lift); font-weight:400; }
.usecase-grid h3 { font-size:1.8rem; max-width:19ch; margin-top:1.7rem; }
.usecase-grid p { font-size:.94rem; color:var(--fg-2); margin-top:1rem; max-width:36ch; }
.more-usecases { display:flex; flex-wrap:wrap; gap:1rem 1.7rem; padding-top:2.4rem; margin-top:2.5rem; border-top:1px solid var(--line); font-size:.77rem; }
.more-usecases > span { color:var(--fg-3); }
.faq-layout { display:grid; grid-template-columns:.8fr 1.2fr; gap:5rem; }
.faq-layout .lede { margin-top:1.4rem; }
.faq-layout .text-link { margin-top:1.5rem; }
.faq-items details { border-top:1px solid var(--line-2); }
.faq-items details:last-child { border-bottom:1px solid var(--line-2); }
.faq-items summary { padding:1.4rem 0; display:flex; justify-content:space-between; gap:1.5rem; align-items:center; font-size:1rem; cursor:pointer; list-style:none; }
.faq-items summary::-webkit-details-marker { display:none; }
.faq-items summary span { font-size:1.6rem; font-weight:400; color:var(--fg-3); transition:transform 180ms; }
.faq-items details[open] summary span { transform:rotate(45deg); }
.faq-items details > p { color:var(--fg-2); font-size:.94rem; line-height:1.7; padding:0 2.5rem 1.5rem 0; }

/* The studio resolves at the footer on every page. */
.close-sec { padding:7rem 0 !important; background:linear-gradient(180deg,#090b0d 0%,rgba(9,11,13,.26) 35%,rgba(9,11,13,.2) 65%,#090b0d 100%),url('../media/studio-20260904/recording-studio.webp') center/cover; }
.close-in { display:flex; flex-direction:column; align-items:center; text-align:center; gap:2rem; min-height:18rem; justify-content:center; }
.close-copy { max-width:41rem; }
.close-copy h2 { font-weight:500; font-size:clamp(2.5rem,4.2vw,4rem); line-height:1.08; }
.close-copy .lede { max-width:37rem; margin:1.5rem auto 0; font-size:1rem; color:#bdc2c4; }
.close-acts { flex-direction:row; justify-content:center; gap:.75rem; }
.foot { background:#090b0d; }

/* Feature pages use the same photographic stage with a clear focal point. */
.phero { padding-top:8rem; }
.phero h1 { max-width:21ch; font-weight:500; font-size:clamp(2.5rem,4.4vw,4.2rem); }
.phero .lede { max-width:58ch; font-size:1.08rem; line-height:1.65; }
.phero-meta { color:var(--fg-3); }
.feature-evidence { position:relative; }
.feature-evidence__image { background:#10171b url('../media/studio-20260904/recording-studio.webp') center/cover; padding:3.5rem 3rem; perspective:1200px; overflow:hidden; min-height:22rem; border-radius:1.4rem; }
.feature-evidence__image > img { transform:rotateY(-9deg) rotateX(4deg) rotateZ(-2deg); max-width:88%; max-height:36rem; height:auto; width:auto; border:1px solid #ffffff2a; border-radius:.65rem; box-shadow:5px 7px 0 -3px #3b4145,20px 25px 55px #0009; transition:transform 500ms; }
.feature-evidence__image:hover > img { transform:rotateY(-3deg) rotateX(1deg) rotateZ(0); }
.feature-evidence:nth-child(even) .feature-evidence__image > img { transform:rotateY(9deg) rotateZ(2deg); }
.feature-evidence figcaption { padding:.85rem .2rem; color:#b1b8bc; font-size:.79rem; line-height:1.5; }
.sample-note,.enlarge-note { font-size:.69rem; color:var(--fg-3); }
.product-framed { padding:2rem !important; border-radius:1.25rem; background:#10171b url('../media/studio-20260904/recording-studio.webp') center/cover !important; perspective:1000px; }
.product-framed > img { width:100%; max-height:38rem; object-fit:contain; transform:rotateY(-6deg) rotateZ(-1.5deg); border-radius:.6rem; box-shadow:10px 20px 40px #0008; }
.page .phero-media:not(.feature-evidence) { border-radius:1.4rem; }
.phero-media:not(.feature-evidence) { background:#10171b url('../media/studio-20260904/recording-studio.webp') center/cover; padding:2.5rem; perspective:1200px; }
.phero-media:not(.feature-evidence) > img { max-height:38rem; object-fit:contain; border-radius:.7rem; transform:rotateY(-5deg) rotateZ(-1deg); box-shadow:10px 22px 45px #0008; }

@media (max-width:1000px) {
 .tour-copy,.studio-stack .deck__copy { padding:2.2rem; }
 .tour-copy h3,.studio-stack .deck__title { font-size:2.15rem; }
 .connect-layout,.faq-layout { gap:2.5rem; }
 .studio-intro .wrap { gap:2.5rem; }
 .example-site h3 { font-size:2.1rem; }
}
@media (max-width:760px) {
 .studio-home .sec { padding-block:4rem; }
 .studio-home .hd { margin-bottom:2rem; }
 .studio-intro .wrap,.connect-layout,.faq-layout { grid-template-columns:1fr; gap:2rem; }
 .studio-home .studio-intro { padding-block:4rem 0; }
 .studio-intro p { max-width:52ch; }
 .tour-panel { grid-template-columns:1fr; min-height:0; }
 .tour-copy { padding:1.8rem; }
 .tour-copy h3 { margin-top:1.5rem; }
 .tour-copy p { max-width:50ch; margin-top:1rem; }
 .tour-copy .text-link { margin-top:.7rem; }
 .tour-meta { padding-top:1.2rem; font-size:.68rem; }
 .tour-stage { height:26rem; }
 .stage-edit .product-plane { width:48%; left:26%; top:6%; }
 .stage-edit .product-plane img { max-height:20rem; }
 .stage-personalise .product-plane { width:57%; left:22%; top:8%; }
 .stage-personalise .product-plane img { max-height:19rem; }
 .studio-tabs button { padding:.8rem 1rem; }
 .personal-preview { min-height:29rem; }
 .viewer-browser { left:6%; width:78%; top:10%; }
 .example-site { height:17rem; }
 .example-site-content { margin-top:2rem; }
 .example-site h3 { font-size:1.9rem; }
 .personal-aside { display:none; }
 .caption-card { width:75%; left:18%; bottom:7%; }
 .personal-timeline { padding:1rem .6rem .6rem; }
 .personal-timeline img { min-height:3rem; object-fit:cover; object-position:left; }
 .connect-stage { height:30rem; }
 .connect-stage .product-plane { width:57%; left:24%; top:8%; }
 .connect-stage .product-plane img { max-height:23rem; }
 .keys-note { max-width:100%; }
 .usecase-grid { grid-template-columns:1fr; gap:2rem; }
 .usecase-grid h3 { max-width:30ch; margin-top:1rem; font-size:1.7rem; }
 .usecase-grid p { max-width:48ch; margin-top:.7rem; }
 .more-usecases { margin-top:2rem; padding-top:1.5rem; gap:.9rem 1.25rem; }
 .close-sec { padding-block:5rem !important; }
 .feature-evidence__image { padding:2.3rem 1.2rem; min-height:18rem; }
 .feature-evidence__image > img { max-width:96%; max-height:32rem; }
 .product-framed { padding:1.5rem !important; }
}
@media (max-width:600px) {
 .studio-home .hero--scene { height:124svh; }
 .studio-home .scene { min-height:0; height:96svh; }
 .studio-home .hero__content { top:auto; width:100%; padding:6.4rem 4% .8rem; }
 .studio-home .hero__title { font-size:clamp(2.9rem,12vw,3.8rem); line-height:1.04; }
 .studio-home .hero__sub { max-width:31ch; font-size:1rem; margin-top:1.2rem; }
 .studio-home .hero__cta { margin-top:1.5rem; gap:.55rem; }
 .studio-home .hero__cta .btn { padding-inline:.7rem; height:3.1rem; font-size:.81rem; }
 .studio-home .scene__frame { transform:scale(1.16); margin:1.6rem 0 auto; object-position:center; }
 .studio-home .scene__shade { background:linear-gradient(transparent 65%,#090b0d 100%); }
 .studio-proof { display:grid; grid-template-columns:1fr 1fr; gap:.8rem; padding-block:1.2rem; font-size:.65rem; }
 .studio-proof > span:first-child { grid-column:1/-1; font-size:.77rem; }
 .studio-home .hd h2 { font-size:2rem; }
 .studio-home .hd.center { text-align:left; }
 .studio-home .hd.center .lede { margin-left:0; }
 .studio-home .lede { font-size:.97rem; }
 .studio-intro h2 { font-size:1.85rem; }
 .studio-tabs { width:100%; padding:.3rem; gap:.1rem; margin-bottom:1.25rem; }
 .studio-tabs button { flex:1; justify-content:center; padding:.7rem .3rem; font-size:.77rem; gap:0; }
 .tab-index { display:none; }
 .tour-panels { border-radius:1.25rem; padding:.35rem; }
 .tour-copy { padding:1.5rem 1.2rem 1.6rem; }
 .tour-copy h3 { font-size:2rem; }
 .tour-copy p { font-size:.94rem; line-height:1.6; }
 .studio-label { font-size:.72rem; }
 .tour-stage { height:23rem; border-radius:.95rem; }
 .stage-record .product-plane { top:34%; }
 .stage-edit .product-plane { width:61%; left:20%; }
 .stage-edit .product-plane img { max-height:18rem; }
 .stage-personalise .product-plane { width:69%; left:16%; }
 .stage-personalise .product-plane img { max-height:17.5rem; }
 .annotation { font-size:.69rem; padding:.75rem .8rem; bottom:10%; }
 .stage-caption { font-size:.58rem; bottom:.7rem; right:1rem; }
 .company-tabs { width:100%; padding:.3rem; gap:.1rem; margin-bottom:1.2rem; }
 .company-tabs button { padding:.65rem .5rem; flex:1; justify-content:center; gap:.35rem; font-size:.77rem; }
 .company-mark { width:1.15rem; height:1.15rem; font-size:.55rem; }
 .console-top { padding:0 .6rem; height:2.7rem; font-size:.57rem; }
 .console-top > span:nth-child(2) { max-width:8rem; text-align:center; }
 .personal-console { border-radius:1.2rem; padding:.3rem; }
 .personal-preview { min-height:27rem; border-radius:.8rem; }
 .viewer-browser { top:11%; left:4%; width:89%; transform:rotateY(5deg) rotateZ(-2deg); }
 .browser-bar { padding:0 .7rem; height:1.9rem; font-size:.6rem; }
 .window-dots { font-size:.44rem; letter-spacing:1px; }
 .example-site { padding:1.25rem 1.25rem; height:16rem; }
 .example-brand { font-size:1rem; }
 .example-site-content { margin-top:1.8rem; }
 .example-site-content > span:first-child { font-size:.59rem; }
 .example-site h3 { font-size:1.8rem; max-width:15ch; }
 .example-action { font-size:.62rem; }
 .example-shapes { opacity:.55; right:0; }
 .caption-card { left:8%; width:86%; padding:.8rem 1rem; bottom:7%; }
 .caption-card p { font-size:.88rem; }
 .caption-card > span:first-child { font-size:.57rem; }
 .caption-wave { font-size:.55rem; margin-top:.5rem; }
 .timeline-note { font-size:.62rem; text-align:center; }
 .demo-disclosure { font-size:.64rem; line-height:1.5; text-align:left; }
 .studio-stack .deck { position:sticky; top:calc(5rem + var(--deck-index,0) * 8px); display:flex; flex-direction:column; height:36rem; margin-bottom:2rem; border-radius:1.25rem; }
 .studio-stack .deck__copy { padding:1.65rem 1.5rem 1.4rem; min-height:18.2rem; flex:0 0 auto; order:0; }
 .studio-stack .deck__title { font-size:2rem; margin-top:1.3rem; max-width:20ch; }
 .studio-stack .deck__p { font-size:.9rem; line-height:1.6; margin-top:.85rem; }
 .studio-stack .deck__foot { padding-top:.6rem; }
 .studio-stack .deck__foot .text-link { font-size:.78rem; }
 .studio-stack .deck__media { flex:1; height:auto; min-height:14rem; margin:0 .4rem .4rem; border-radius:.9rem; }
 .studio-stack .annotation { bottom:8%; font-size:.63rem; padding:.6rem .7rem; }
 .stage-share .product-plane { top:14%; width:80%; left:10%; }
 .stage-measure .product-plane { top:30%; }
 .stage-create .product-plane { top:6%; width:49%; left:25%; }
 .stage-create .product-plane img { max-height:12.2rem; }
 .connect-copy h2,.faq-layout h2 { font-size:2.1rem; }
 .connect-stage { height:27rem; }
 .connect-stage .product-plane { width:73%; left:14%; top:7%; }
 .connect-stage .product-plane img { max-height:21rem; }
 .faq-items summary { font-size:.92rem; padding-block:1.2rem; }
 .faq-items details > p { font-size:.88rem; }
 .close-copy h2 { font-size:2.6rem; }
 .close-acts { flex-direction:column; width:100%; max-width:22rem; }
 .close-acts .btn { width:100%; }
 .close-copy .lede { font-size:.92rem; max-width:31ch; }
 .close-sec { background-position:center,right center; }
 .phero { padding-top:6.4rem; }
 .phero h1 { font-size:2.5rem; max-width:18ch; }
 .phero .lede { font-size:1rem; }
 .phero .crumb { font-size:.63rem; }
 .feature-evidence__image { min-height:15rem; padding:2rem .9rem; }
 .feature-evidence__image > img { max-height:29rem; }
}
@media (max-height:700px) and (max-width:600px) {
 .studio-stack .deck { position:relative; top:0; height:auto; min-height:35rem; }
 .studio-stack .deck__media { min-height:16rem; }
}
@media (max-width:900px) and (max-height:560px) {
 .studio-stack .deck { position:relative; top:0; height:auto; min-height:29rem; }
}
/* Keep the complete studio frame visible while the scroll plays it, even below browser chrome. */
@media (max-width:600px), (max-width:900px) and (max-height:560px) {
 .studio-home .hero--scene { height:calc(var(--scene-height, 100svh) + 85svh); }
 .studio-home .scene { position:sticky; top:var(--scene-top, 0px); display:flex; flex-direction:column; height:auto; min-height:0; }
 .studio-home .hero__content { position:relative; left:auto; top:auto; width:100%; transform:none; opacity:1; order:1; padding:3.1rem 4% 1.6rem; }
 .studio-home .scene__frame { position:relative; inset:auto; order:2; width:100%; height:auto; max-height:calc(100svh - 10.5rem); object-fit:contain; margin:0; transform:none; flex-shrink:0; }
 .studio-home .scene__shade { display:none; }
 .scene__mobile-cue { display:grid; grid-template-columns:1fr auto; align-items:center; gap:.85rem; order:3; padding:1.1rem 5% 1.5rem; font-size:.72rem; color:var(--fg-3); }
 .scene__mobile-cue > span { display:flex; gap:.6rem; align-items:center; }
 .scene__mobile-cue strong { color:var(--fg); font-weight:500; }
 .scene__progress { grid-column:1/-1; height:2px; overflow:hidden; background:#ffffff20; }
 .scene__progress i { display:block; height:100%; background:var(--accent); transform:scaleX(0); transform-origin:left; }
}
@media (prefers-reduced-motion:reduce) {
 .studio-home .hero--scene { height:auto; }
 .studio-home .scene { position:relative; top:0; }
 .scene__mobile-cue { display:none; }
 .studio-home .scene__frame { transform:none; }
 .studio-home .hero__content { opacity:1; }
 .tour-panel.is-active,.personal-preview.is-changing .viewer-browser { animation:none; }
 .product-plane,.product-plane:hover,.studio-stage:hover .product-plane,.feature-evidence__image > img,.feature-evidence__image:hover > img { transition:none; }
 .studio-stack .deck { position:relative; top:0; }
}