/* The opening is a small, scrollable product film. Every screen is the real
   Toolbox presentation renderer, populated exclusively with fictional records. */
header{background:#071b16}
.cinema-hero{position:relative;height:240svh;background:#071b16;color:#f8f4ec;isolation:isolate}
.cinema-pin{position:sticky;top:0;height:100svh;min-height:710px;overflow:hidden;background:radial-gradient(ellipse at 78% 43%,#244b34 0,transparent 51%),#071b16;--chapter-progress:0;--film-progress:0}
.cinema-pin:before{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#071b16 0%,#071b16db 19%,transparent 58%),linear-gradient(0deg,#071b16 0%,transparent 30%);z-index:2}
.cinema-grid{position:absolute;inset:-60%;background-image:linear-gradient(#b9d2a914 1px,transparent 1px),linear-gradient(90deg,#b9d2a914 1px,transparent 1px);background-size:86px 86px;transform:perspective(750px) rotateX(58deg) rotateZ(-19deg) translateY(13%);mask-image:radial-gradient(ellipse,black 15%,transparent 67%);opacity:.7}
.cinema-halo{position:absolute;width:75vw;height:75vw;top:-18vw;right:-23vw;border:1px solid #c6e1a21b;border-radius:50%;box-shadow:0 0 140px #a3c5690c,inset 0 0 140px #a3c56908;pointer-events:none}
.cinema-halo:before,.cinema-halo:after{content:'';position:absolute;inset:12%;border:1px solid #c6e1a213;border-radius:50%}.cinema-halo:after{inset:25%}
.cinema-stamp{position:absolute;top:35px;left:5.5%;right:5.5%;display:flex;justify-content:space-between;align-items:center;z-index:5;font-size:10px;letter-spacing:1.9px;color:#b5c4ac}
.cinema-stamp>span:first-child{display:flex;align-items:center;gap:10px}.cinema-stamp i{height:6px;width:6px;background:#dafa79;border-radius:50%;box-shadow:0 0 14px #dafa7955}
.cinema-stamp>span:last-child{font-size:9px;color:#91a18b}
.cinema-hero .hero-copy{position:absolute;z-index:4;top:50%;left:5.5%;width:35%;transform:translateY(-57%);padding:0;pointer-events:none}
.cinema-kicker{display:flex;align-items:center;gap:14px;font-size:10px;letter-spacing:2px;color:#c2cfb4;margin-bottom:24px}
.cinema-kicker:before{content:'';height:1px;width:30px;background:#b6ce86}
.cinema-hero h1{font-size:clamp(70px,6.8vw,108px);font-weight:650;letter-spacing:-.069em;line-height:.98;margin:0;color:#f8f4ec}
.cinema-hero h1 em{display:block;font-style:normal;color:#dafa79}
.cinema-hero .hero-copy>p{font-size:16px;line-height:1.8;color:#b6c6b7;max-width:325px;min-height:88px;margin-top:25px}
.cinema-hero .hero-actions{margin-top:25px;pointer-events:auto}
.cinema-hero .hero-actions .button{border-radius:4px;font-size:13px;gap:30px;padding:17px 23px}
.cinema-hero .hero-actions .text-link{display:none}
.cinema-hero .hero-foot{font-size:10px;letter-spacing:.3px;margin-top:25px;color:#97ac97}
.cinema-copy-change .cinema-kicker,.cinema-copy-change h1,.cinema-copy-change .hero-copy>p{animation:cinema-copy-in .85s cubic-bezier(.22,1,.36,1) both}
@keyframes cinema-copy-in{from{opacity:0;transform:translateY(18px);filter:blur(4px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
.cinema-stage{position:absolute;left:37%;right:-12%;top:13%;bottom:13%;perspective:1800px;perspective-origin:45% 45%;z-index:1;pointer-events:none}
.cinema-camera{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform;animation:cinema-arrive 2.2s cubic-bezier(.16,1,.3,1)}
@keyframes cinema-arrive{from{opacity:0;transform:translate3d(15%,16%,270px) rotateX(19deg) rotateY(-12deg) rotateZ(-8deg)}to{opacity:1;transform:translate3d(0,0,0) rotateX(0) rotateY(0) rotateZ(0)}}
.cinema-plane{position:absolute;left:0;top:50%;width:100%;border-radius:10px;border:1px solid #e7e9d650;overflow:hidden;background:#f3eee5;box-shadow:0 50px 100px #0009,0 4px 10px #0004;transform-origin:50% 50%;transition:transform 1.65s cubic-bezier(.22,1,.36,1),opacity 1.1s ease,filter 1.5s ease;backface-visibility:hidden;will-change:transform,opacity;opacity:0;transform:translate3d(36%,-45%,-650px) rotateX(15deg) rotateY(-35deg) rotateZ(7deg);filter:brightness(.5);}
.cinema-plane .product-frame{width:100%;aspect-ratio:1440/1000}
.cinema-window-bar{height:31px;display:flex;align-items:center;padding:0 17px;gap:13px;border-bottom:1px solid #d9cebd;background:#f8f4ec;color:#657364;font-size:9px;letter-spacing:1.2px;white-space:nowrap}
.cinema-window-dots{display:flex;gap:4px}.cinema-window-dots i{width:5px;height:5px;border-radius:50%;background:#b6b9a5}.cinema-window-dots i:first-child{background:#aa6b4c}
.cinema-window-bar b{font-size:8px;margin-left:auto;font-weight:500;color:#8c907f;letter-spacing:1px}
.cinema-backplate{position:absolute;left:0;top:50%;width:100%;aspect-ratio:1.41;border:1px solid #abc19738;border-radius:10px;background:linear-gradient(140deg,#294d3c5c,#0d2b2261);box-shadow:0 30px 65px #0003;transform:translate3d(4%,-45%,-130px) rotateX(7deg) rotateY(-23deg) rotateZ(-6deg);transition:transform 1.8s cubic-bezier(.22,1,.36,1)}
.cinema-backplate.two{transform:translate3d(8%,-41%,-260px) rotateX(7deg) rotateY(-23deg) rotateZ(-6deg);background:transparent;border-style:dashed;opacity:.6}
[data-scene="0"] .cinema-plane[data-product=home]{opacity:1;filter:brightness(1);transform:translate3d(0,-50%,0) rotateX(7deg) rotateY(-23deg) rotateZ(-6deg);z-index:4}
[data-scene="0"] .cinema-plane[data-product=invoices]{opacity:.12;transform:translate3d(19%,-66%,-700px) rotateX(15deg) rotateY(-30deg) rotateZ(-9deg)}
[data-scene="1"] .cinema-plane[data-product=home]{opacity:.28;filter:brightness(.5);transform:translate3d(-7%,-60%,-510px) rotateX(8deg) rotateY(-33deg) rotateZ(-13deg)}
[data-scene="1"] .cinema-plane[data-product=proposals]{opacity:1;filter:brightness(1);transform:translate3d(0,-48%,30px) rotateX(3deg) rotateY(-17deg) rotateZ(-3deg);z-index:4}
[data-scene="1"] .cinema-backplate{transform:translate3d(9%,-48%,-180px) rotateX(3deg) rotateY(-17deg) rotateZ(2deg)}
[data-scene="2"] .cinema-plane[data-product=proposals]{opacity:.22;filter:brightness(.5);transform:translate3d(-9%,-66%,-540px) rotateX(12deg) rotateY(-25deg) rotateZ(-12deg)}
[data-scene="2"] .cinema-plane[data-product=schedule]{opacity:1;filter:brightness(1);transform:translate3d(-2%,-54%,-90px) rotateX(8deg) rotateY(-21deg) rotateZ(-4deg);z-index:4}
[data-scene="2"] .cinema-backplate{transform:translate3d(5%,-46%,-230px) rotateX(8deg) rotateY(-21deg) rotateZ(3deg)}
[data-scene="3"] .cinema-plane[data-product=schedule]{opacity:.2;filter:brightness(.5);transform:translate3d(13%,-65%,-630px) rotateX(6deg) rotateY(-29deg) rotateZ(9deg)}
[data-scene="3"] .cinema-plane[data-product=invoices]{opacity:1;filter:brightness(1);transform:translate3d(-1%,-50%,0) rotateX(3deg) rotateY(-13deg) rotateZ(-2deg);z-index:4}
[data-scene="3"] .cinema-backplate{transform:translate3d(6%,-45%,-180px) rotateX(3deg) rotateY(-13deg) rotateZ(-2deg)}
.cinema-phone{position:absolute;left:49%;top:33%;width:23%;max-width:250px;padding:5px;background:#12271f;border:1px solid #f2ecd178;border-radius:28px;overflow:hidden;box-shadow:0 35px 65px #0009;opacity:0;transform:translate3d(25%,25%,100px) rotateX(7deg) rotateY(-15deg) rotateZ(9deg);transition:transform 1.65s cubic-bezier(.22,1,.36,1),opacity 1.1s;z-index:6}
.cinema-phone .product-frame{border-radius:23px}
[data-scene="2"] .cinema-phone{opacity:1;transform:translate3d(0,0,200px) rotateX(3deg) rotateY(-12deg) rotateZ(5deg)}
.cinema-annotation{position:absolute;right:15%;bottom:5%;color:#c4d4ba;z-index:7;font-size:9px;letter-spacing:1.8px;display:flex;align-items:center;gap:14px;text-transform:uppercase}
.cinema-annotation:before{content:'';width:45px;height:1px;background:#90a973}
.cinema-controls{position:absolute;z-index:6;left:5.5%;right:5.5%;bottom:27px}
.cinema-transport{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px;color:#93a58d;font-size:9px;letter-spacing:1.6px}
.cinema-scroll{display:flex;align-items:center;gap:12px}.cinema-scroll b{font-size:15px;color:#dafa79;font-weight:400;animation:cinema-scroll-hint 2s ease-in-out infinite}
@keyframes cinema-scroll-hint{0%,100%{transform:translateY(-3px)}50%{transform:translateY(3px)}}
.cinema-transport>div{display:flex;gap:22px;align-items:center}
.cinema-transport button{background:none;color:#c8d2bd;padding:8px 0;font-size:11px;letter-spacing:0;min-height:32px}
.cinema-transport button:hover{color:#dafa79}.cinema-transport .enlarge-preview{border-bottom:1px solid #899c714d}
.cinema-chapters{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.cinema-chapters button{position:relative;display:flex;align-items:center;gap:13px;min-height:56px;padding:16px 0 0;color:#849a85;background:none;text-align:left;font-size:12px;font-weight:500;letter-spacing:.2px}
.cinema-chapters button:before,.cinema-chapters button:after{content:'';position:absolute;top:0;left:0;height:1px;width:100%;background:#a0b58e35}
.cinema-chapters button:after{height:2px;background:#dafa79;transform:scaleX(0);transform-origin:left}
.cinema-chapters button.selected{color:#edf4de}.cinema-chapters button.selected:after{transform:scaleX(var(--chapter-progress))}
.cinema-chapters button>span:first-child{font-size:9px;color:#839773;letter-spacing:1px}.cinema-chapters button>span:last-child{margin-left:auto;font-size:15px;opacity:0;transition:opacity .3s}.cinema-chapters button.selected>span:last-child{opacity:1;color:#dafa79}
.cinema-paused *, .cinema-paused *:before,.cinema-paused *:after{animation-play-state:paused!important}
.cinema-paused .cinema-plane,.cinema-paused .cinema-phone,.cinema-paused .cinema-backplate{transition-duration:0s}
.cinema-hero+.trade-strip{position:relative;z-index:3}
@media(min-width:1750px){.cinema-stage{left:36%;right:1%}.cinema-hero .hero-copy{width:35%}.cinema-hero h1{font-size:120px}}
@media(max-width:1100px) and (min-width:761px){.cinema-hero h1{font-size:76px}.cinema-hero .hero-copy{width:38%}.cinema-hero .hero-copy>p{font-size:14px;max-width:290px}.cinema-stage{left:40%;right:-25%}.cinema-annotation{right:29%}.cinema-window-bar b{display:none}}
@media(max-width:760px){
 .cinema-hero{height:210svh}.cinema-pin{height:100svh;min-height:760px}
 .cinema-stamp{top:23px;left:6%;right:6%;font-size:8px;letter-spacing:1.3px}.cinema-stamp>span:last-child{font-size:7px;letter-spacing:.9px}
 .cinema-pin:before{background:linear-gradient(180deg,#071b16 0,transparent 52%),linear-gradient(0deg,#071b16 0,transparent 35%)}
 .cinema-halo{width:125vw;height:125vw;right:-60vw;top:20vh}.cinema-grid{opacity:.5;inset:-20% -70%}
 .cinema-hero .hero-copy{top:67px;left:6%;right:6%;width:auto;transform:none;text-align:left;pointer-events:auto}
 .cinema-kicker{font-size:8px;letter-spacing:1.6px;margin-bottom:17px}.cinema-kicker:before{width:21px}
 .cinema-hero h1{font-size:clamp(51px,12.8vw,82px);letter-spacing:-.065em;line-height:1.01}.cinema-hero h1 em{display:block}
 .cinema-hero .hero-copy>p{font-size:13px;line-height:1.7;max-width:320px;margin-top:15px;min-height:48px}
 .cinema-hero .hero-actions{margin-top:16px}.cinema-hero .hero-actions .button{padding:12px 16px;font-size:11px;gap:24px;min-height:42px}.cinema-hero .hero-foot{display:none}
 .cinema-stage{left:50%;right:auto;top:335px;bottom:126px;width:min(106vw,max(380px,calc((100svh - 490px)*1.44)),560px);transform:translateX(-45%);perspective:1100px;perspective-origin:44% 50%}
 .cinema-plane{border-radius:6px}.cinema-window-bar{height:23px;padding:0 10px;font-size:7px;gap:8px}.cinema-window-bar b{font-size:6px;letter-spacing:.6px}.cinema-window-dots{gap:3px}.cinema-window-dots i{height:3px;width:3px}
 [data-scene="0"] .cinema-plane[data-product=home]{transform:translate3d(0,-50%,0) rotateX(9deg) rotateY(-17deg) rotateZ(-7deg)}
 [data-scene="1"] .cinema-plane[data-product=proposals]{transform:translate3d(-1%,-50%,0) rotateX(6deg) rotateY(-13deg) rotateZ(-3deg)}
 [data-scene="2"] .cinema-plane[data-product=schedule]{transform:translate3d(-5%,-53%,-40px) rotateX(8deg) rotateY(-17deg) rotateZ(-6deg)}
 [data-scene="3"] .cinema-plane[data-product=invoices]{transform:translate3d(-1%,-50%,0) rotateX(5deg) rotateY(-10deg) rotateZ(-2deg)}
 .cinema-phone{left:61%;top:35%;width:25%;padding:3px;border-radius:15px;max-width:160px}.cinema-phone .product-frame{border-radius:11px}[data-scene="2"] .cinema-phone{transform:translate3d(-10%,0,60px) rotateX(3deg) rotateY(-10deg) rotateZ(6deg)}
 .cinema-annotation{font-size:7px;letter-spacing:1.1px;bottom:1%;right:21%;gap:8px}.cinema-annotation:before{width:24px}
 .cinema-controls{left:6%;right:6%;bottom:19px}.cinema-transport{margin-bottom:9px;font-size:7px;letter-spacing:.8px;gap:8px}.cinema-transport>div{gap:14px}.cinema-transport button{font-size:10px;min-height:38px}.cinema-scroll{gap:6px}.cinema-scroll b{font-size:13px}
 .cinema-chapters{gap:12px}.cinema-chapters button{gap:6px;font-size:10px;min-height:45px;flex-wrap:wrap;align-content:center;padding-top:12px}.cinema-chapters button>span:first-child{font-size:7px}.cinema-chapters button>span:last-child{display:none}
}
@media(max-width:380px){.cinema-hero h1{font-size:49px}.cinema-hero .hero-copy>p{font-size:12px}.cinema-stamp>span:last-child{display:none}.cinema-transport>div{gap:10px}.cinema-scroll{font-size:6px}}
@media(max-height:660px) and (min-width:761px){.cinema-pin{min-height:620px}.cinema-hero h1{font-size:76px}.cinema-hero .hero-copy{transform:translateY(-56%)}.cinema-hero .hero-copy>p{font-size:14px;min-height:64px}.cinema-hero .hero-foot{display:none}.cinema-stage{top:16%;bottom:21%}}
@media(prefers-reduced-motion:reduce){.cinema-hero{height:auto}.cinema-pin{position:relative}.cinema-camera{transform:none!important}.cinema-scroll{display:none}.cinema-plane,.cinema-phone,.cinema-backplate{transition:none}.cinema-chapters button.selected:after{transform:scaleX(1)}}