/* One visual language: a timeline, scene markers and layered recording surfaces. */
.story-flow { position:relative; --rail-left:max(1.3rem, calc((100% - var(--sc-maxw)) / 2 + 1.75rem)); }
.story-spine { position:absolute; top:0; bottom:0; left:var(--rail-left); width:1px; background:linear-gradient(transparent,#ffffff15 3%,#ffffff15 95%,transparent); pointer-events:none; z-index:2; }
.story-spine::before { content:""; position:absolute; inset:0 auto 0 -4px; width:9px; background:repeating-linear-gradient(transparent 0 15px,#aab6bb24 15px 16px,transparent 16px 32px); mask-image:linear-gradient(transparent,#000 4%,#000 95%,transparent); }
.story-spine i { position:absolute; top:0; left:-3px; width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 5px #ff433813,0 0 20px #ff433860; transform:translateY(var(--story-y,0px)); }
.story-flow > .sec { scroll-margin-top:5rem; }
.chapter-slate { display:flex; align-items:center; gap:1rem; margin-bottom:2.6rem; color:#a0a7ac; font:400 .64rem var(--mono); letter-spacing:.12em; text-transform:uppercase; }
.chapter-number { position:relative; display:grid; place-items:center; width:2rem; height:2rem; flex-shrink:0; border:1px solid #ffffff23; background:#14191c; border-radius:.55rem; color:#d1d5d8; box-shadow:0 3px 0 #080b0d; transition:color 300ms,border-color 300ms; }
.chapter-number::before { content:""; position:absolute; top:50%; right:100%; width:var(--sc-gutter); height:1px; background:linear-gradient(90deg,transparent,#ffffff23); }
.chapter-slate.is-current .chapter-number { border-color:#ff645975; color:#ff8177; }
.chapter-name { white-space:nowrap; }
.chapter-ruler { position:relative; flex:1; height:.75rem; margin-left:.3rem; border-bottom:1px solid #ffffff13; background:repeating-linear-gradient(90deg,#ffffff20 0 1px,transparent 1px 8px); mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); }
.chapter-ruler::after { content:""; position:absolute; inset:0 0 3px; background:#090b0d; }
.chapter-slate > em { font:inherit; color:#65727a; letter-spacing:.06em; }
.studio-home .studio-tour .hd,.studio-home .personal-section .hd { margin-inline:auto; }

/* The intro acts as an edit decision: one take flows into several personal versions. */
.story-flow .studio-intro { padding-top:5.5rem; }
.story-flow .studio-intro .wrap { position:relative; }
.story-flow .studio-intro .wrap::after { content:""; position:absolute; bottom:-2rem; right:var(--sc-gutter); width:9rem; height:1.8rem; border-right:1px solid #ff78664a; border-bottom:1px solid #ff78664a; border-radius:0 0 1rem 0; }
.story-flow .studio-intro h2 { max-width:24ch; }
.story-flow .studio-intro p { border-left:1px solid #ff76665c; padding-left:1.4rem; }

/* A patterned backing peeks past the product, like a frame on a storyboard wall. */
.studio-stage,.personal-preview { --stage-tint:255,100,81; }
.stage-edit,.stage-measure,.connect-stage { --stage-tint:105,180,195; }
.stage-personalise,.stage-create { --stage-tint:188,159,217; }
.studio-stage { background-image:linear-gradient(130deg,rgba(9,15,18,.38),rgba(9,15,18,.62)),url('../media/studio-20260904/recording-studio.webp'); }
.story-mat { position:absolute; inset:11% 8%; z-index:-1; pointer-events:none; border:1px solid rgba(var(--stage-tint),.24); border-radius:1.15rem; transform:rotate(-6deg) skewY(2deg); background:radial-gradient(circle,rgba(var(--stage-tint),.3) .7px,transparent 1px) 0 0/12px 12px,linear-gradient(145deg,rgba(var(--stage-tint),.13),#111b21b8 65%); box-shadow:0 25px 60px #0007,inset 0 1px 0 #ffffff0c; }
.story-mat::before { content:""; position:absolute; inset:14px; border:1px solid rgba(var(--stage-tint),.11); border-radius:.7rem; }
.story-mat::after { content:""; position:absolute; width:10rem; height:10rem; right:-1.5rem; top:-1.5rem; border:1px solid rgba(var(--stage-tint),.23); border-radius:50%; box-shadow:0 0 0 15px rgba(var(--stage-tint),.035),0 0 0 31px rgba(var(--stage-tint),.025); }
.stage-grid { opacity:.13; inset:0; background:repeating-linear-gradient(90deg,transparent 0 49px,#b1c0cb 50px,transparent 51px); mask-image:linear-gradient(transparent 60%,#000); }
.story-hud { position:absolute; top:1.15rem; left:1.3rem; right:1.3rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; pointer-events:none; color:#b6bec1; font:400 .58rem var(--mono); letter-spacing:.11em; text-transform:uppercase; }
.story-hud > span { display:flex; align-items:center; gap:.5rem; }
.story-hud i { width:4px; height:4px; border-radius:50%; background:rgb(var(--stage-tint)); }
.story-hud b { font:inherit; color:#74838b; }
.story-corners { position:absolute; inset:3.4rem 1.2rem 3.4rem; pointer-events:none; background:linear-gradient(#aec2ce55,#aec2ce55) left top/14px 1px no-repeat,linear-gradient(#aec2ce55,#aec2ce55) left top/1px 14px no-repeat,linear-gradient(#aec2ce55,#aec2ce55) right bottom/14px 1px no-repeat,linear-gradient(#aec2ce55,#aec2ce55) right bottom/1px 14px no-repeat; }
.product-plane { box-shadow:2px 3px 0 #3b454a,7px 10px 0 -4px #1a2228,14px 34px 55px #000b; }
.product-plane::before { inset:-9px -12px -12px -9px; border-color:#afc2cf1d; background:linear-gradient(140deg,#ffffff06,transparent 35%); }
.annotation { border-color:rgba(var(--stage-tint),.3); background:linear-gradient(130deg,#273137f5,#151d22f5); box-shadow:0 4px 0 -2px #090e11,0 18px 35px #0008; }
.annotation::before { height:34px; background:linear-gradient(transparent,rgba(var(--stage-tint),.6)); }
.annotation-dot { background:rgb(var(--stage-tint)); box-shadow:0 0 0 4px rgba(var(--stage-tint),.08); }
.tour-panels { position:relative; isolation:isolate; border-color:#bbc7ce29; box-shadow:0 0 0 6px #ffffff02,0 40px 100px -55px #000; }
.tour-panels::before { content:""; position:absolute; z-index:-1; inset:13px -9px -12px 10px; border:1px solid #8faba324; border-radius:1.9rem; background:#0b1114; transform:rotate(.65deg); pointer-events:none; }
.tour-panels::after { content:""; position:absolute; z-index:-2; inset:28px 9px -24px 25px; border:1px solid #8faba318; border-radius:1.9rem; background:#0b0f12; transform:rotate(-.6deg); pointer-events:none; }
.tour-copy { background:radial-gradient(ellipse at 0 0,#e5694610,transparent 60%); border-radius:1.3rem; }
.studio-tabs { background:linear-gradient(#1a2024,#11171b); box-shadow:inset 0 1px 0 #ffffff08,0 12px 22px #0003; }
.studio-tabs [aria-selected="true"] { background:linear-gradient(#3b454c,#293239); box-shadow:inset 0 1px 0 #ffffff26,0 3px 8px #0007; }
.scene-signal { position:absolute; left:15%; top:19%; padding:.7rem .95rem; display:flex; align-items:center; gap:1rem; width:12.5rem; transform:rotate(4deg); border:1px solid #b6c3ce32; border-radius:.65rem; background:#182126ed; box-shadow:5px 6px 0 -3px #0b1216,0 18px 30px #0006; color:#c8cfd4; font-size:.64rem; }
.scene-signal .signal-wave { flex:1; height:1.5rem; background:repeating-linear-gradient(90deg,#ff7768 0 2px,transparent 2px 5px); clip-path:polygon(0 42%,5% 42%,5% 25%,10% 25%,10% 36%,15% 36%,15% 10%,20% 10%,20% 30%,25% 30%,25% 5%,30% 5%,30% 23%,35% 23%,35% 38%,40% 38%,40% 12%,45% 12%,45% 32%,50% 32%,50% 0,55% 0,55% 32%,60% 32%,60% 23%,65% 23%,65% 12%,70% 12%,70% 30%,75% 30%,75% 36%,80% 36%,80% 18%,85% 18%,85% 39%,90% 39%,90% 29%,95% 29%,95% 42%,100% 42%,100% 58%,95% 58%,95% 71%,90% 71%,90% 61%,85% 61%,85% 82%,80% 82%,80% 64%,75% 64%,75% 70%,70% 70%,70% 88%,65% 88%,65% 77%,60% 77%,60% 68%,55% 68%,55% 100%,50% 100%,50% 68%,45% 68%,45% 88%,40% 88%,40% 62%,35% 62%,35% 77%,30% 77%,30% 95%,25% 95%,25% 70%,20% 70%,20% 90%,15% 90%,15% 64%,10% 64%,10% 75%,5% 75%,5% 58%,0 58%); }

/* The website and its caption become separate, clearly connected layers. */
.personal-section { background:radial-gradient(ellipse at 82% 42%,#f0674b07,transparent 60%); }
.personal-console { position:relative; border-color:#c0cbd334; box-shadow:0 0 0 6px #ffffff02,0 45px 110px #0006; }
.personal-preview { background-image:linear-gradient(120deg,#08101682,#10171ab8),url('../media/studio-20260904/recording-studio.webp'); }
.personal-preview .story-mat { inset:9% 10% 13% 7%; transform:rotate(4deg); --stage-tint:166,176,196; }
.preview-depth { position:absolute; top:10%; left:10%; width:66%; height:25rem; border:1px solid #a4b3c33a; border-radius:1rem; transform:translate(20px,-8px) rotateY(9deg) rotateZ(3deg); background:linear-gradient(135deg,#69799220,#111b2270); box-shadow:0 20px 40px #0003; }
.preview-depth::before { content:""; position:absolute; inset:-13px 15px 10px -16px; border:1px solid #a8b7c22b; border-radius:1rem; transform:rotate(-5deg); }
.caption-card { border-color:#e2b8a745; box-shadow:0 5px 0 -2px #090f13,0 20px 50px #000b; }
.caption-card::before { content:""; position:absolute; top:-35px; left:1.65rem; width:1px; height:35px; background:linear-gradient(transparent,#edaa8f88); }
.personal-timeline { margin-top:.6rem; border-top:1px solid #ffffff0a; }
.personal-timeline::before { content:""; position:absolute; right:9%; top:-1rem; width:3rem; height:1rem; border-right:1px solid #ff817552; border-bottom:1px solid #ff817552; border-radius:0 0 .6rem 0; }
.studio-stack .deck { border-color:#b7c4cc2b; box-shadow:0 0 0 5px #ffffff02,0 35px 75px -35px #000e; }
.studio-stack .deck__copy { background:radial-gradient(ellipse at 0 0,#c86c4710,transparent 60%); }
.studio-stack .deck:nth-child(2) .deck__copy { background:radial-gradient(ellipse at 100% 0,#80bcc00d,transparent 65%); }
.deck__foot { position:relative; }
.deck__foot::after { content:""; position:absolute; right:0; bottom:.7rem; width:2.3rem; height:1.5rem; background:repeating-linear-gradient(90deg,#829aa22e 0 1px,transparent 1px 5px); mask-image:linear-gradient(90deg,transparent,#000); }

/* Shared screenshot mats extend the same visual language to the product pages. */
.feature-evidence__image,.product-framed,.phero-media:not(.feature-evidence) { position:relative; isolation:isolate; --stage-tint:211,133,112; }
.feature-evidence__image .story-mat,.product-framed .story-mat,.phero-media .story-mat { inset:1.4rem 2rem; background-color:#10181dc9; transform:rotate(2deg); }
.feature-evidence:nth-child(even) .story-mat { transform:rotate(-3deg); --stage-tint:111,166,181; }
.feature-evidence__image > img,.product-framed > img,.phero-media:not(.feature-evidence) > img { position:relative; z-index:1; }
.phero-media:has(.feature-evidence) { padding:0; background:none; perspective:none; border:0; }
.close-sec { overflow:clip; position:relative; }
.close-sec .chapter-slate { width:100%; margin-bottom:.75rem; text-align:left; }
.close-sec .chapter-ruler::after { background:transparent; }
.close-sec .close-in { position:relative; }
.closing-track { position:relative; width:min(37rem,90%); margin-top:.5rem; display:grid; grid-template-columns:1fr 1.3fr 1fr; gap:.4rem; padding-top:1.2rem; border-top:1px solid #bac7cb26; }
.closing-track::before { content:""; position:absolute; top:0; left:0; right:0; height:.45rem; background:repeating-linear-gradient(90deg,#ffffff25 0 1px,transparent 1px 12px); }
.closing-track span { display:flex; align-items:center; gap:.5rem; padding:.65rem .8rem; border:1px solid #9aafb033; border-radius:.3rem; background:#2430368c; color:#aabac2; font:400 .6rem var(--mono); text-transform:uppercase; letter-spacing:.045em; }
.closing-track span:nth-child(2) { background:#56312980; border-color:#c76c4d42; color:#eac3b4; }
.closing-track b { font-weight:400; opacity:.6; }
.closing-track > i { position:absolute; top:-5px; bottom:-7px; right:2%; width:1px; background:#ff6658; box-shadow:0 0 10px #ff5a4f66; }
.closing-track > i::before { content:""; position:absolute; top:0; left:-4px; width:9px; height:7px; background:#ff6658; clip-path:polygon(0 0,100% 0,50% 100%); }

@media (max-width:1000px) {
 .story-spine { left:1rem; }
 .chapter-number::before { width:1.4rem; }
 .story-hud { font-size:.5rem; left:1rem; right:1rem; }
 .story-corners { inset:3rem .85rem; }
 .preview-depth { height:23rem; }
}
@media (max-width:760px) {
 .story-spine { left:6px; background:linear-gradient(transparent,#ffffff0e 3%,#ffffff0e 95%,transparent); }
 .story-spine::before { display:none; }
 .story-spine i { width:4px; height:4px; left:-1.5px; box-shadow:0 0 0 3px #ff433810,0 0 12px #ff433840; }
 .chapter-slate { gap:.65rem; margin-bottom:1.8rem; font-size:.56rem; letter-spacing:.08em; }
 .chapter-number { width:1.8rem; height:1.8rem; border-radius:.45rem; }
 .chapter-number::before { width:12px; height:1px; right:100%; top:50%; left:auto; background:linear-gradient(90deg,#ffffff12,#ff8b684d); }
 .chapter-slate > em { display:none; }
 .chapter-ruler { margin-left:.15rem; }
 .story-flow .studio-intro { padding-top:3.5rem; }
 .story-flow .studio-intro .wrap::after { width:5rem; bottom:-1.5rem; }
 .story-flow .studio-intro p { padding-left:1rem; }
 .story-mat { inset:13% 7%; transform:rotate(-5deg); border-radius:.9rem; background-size:10px 10px,auto; }
 .story-mat::after { width:7rem; height:7rem; right:-.6rem; top:-.6rem; }
 .story-hud { font-size:.49rem; top:.9rem; }
 .story-corners { inset:2.6rem .8rem; background-size:10px 1px,1px 10px,10px 1px,1px 10px; }
 .tour-panels::before { inset:12px -5px -9px 5px; transform:rotate(.3deg); }
 .tour-panels::after { inset:25px 3px -17px 15px; }
 .scene-signal { top:17%; left:12%; width:11.5rem; padding:.65rem .8rem; font-size:.6rem; }
 .preview-depth { left:8%; width:79%; height:20rem; top:11%; transform:translate(6px,-7px) rotateY(7deg) rotateZ(3deg); }
 .personal-preview .story-mat { inset:8% 7% 14%; }
 .closing-track { width:100%; gap:.3rem; }
 .closing-track span { padding:.65rem .5rem; font-size:.48rem; gap:.35rem; }
 .closing-track b { display:none; }
 .close-sec .chapter-slate { margin-bottom:1rem; }
 .feature-evidence__image .story-mat,.product-framed .story-mat,.phero-media .story-mat { inset:1.1rem .8rem; }
}
@media (prefers-reduced-motion:reduce) {
 .story-spine i { display:none; }
 .chapter-number { transition:none; }
}