@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Manrope:wght@400;500;600;650;700;750;800&display=swap');
:root{--blue:#4055ed;--ink:#19203b;--muted:#646b7d;--paper:#fafbff;--line:#dde1ed}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',sans-serif;font-size:16px;line-height:1.6}a{color:inherit;text-decoration:none}button{font:inherit}button,a{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--blue);outline-offset:6px}::selection{background:#dfe4ff}h1,h2,h3,p{margin:0}h1,h2,h3{font-family:'Manrope',sans-serif}img{max-width:100%;height:auto;display:block}.wrap{width:min(1280px,calc(100% - 112px));margin:auto}.header{min-height:144px;padding-block:24px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 32px}.brand{width:max-content;max-width:100%;display:inline-flex;align-items:center;gap:16px;flex-shrink:0}.brand img{width:96px;height:96px;flex:0 0 96px;aspect-ratio:1;border-radius:24px}.brand-text{font-family:Manrope,sans-serif;font-size:32px;font-weight:650;line-height:1.1;letter-spacing:-.045em;white-space:nowrap}.header nav{display:flex;gap:34px;margin-left:0;font-size:14px;font-weight:550}.header nav a:hover,.footer a:hover{color:var(--blue)}.header-actions{display:flex;align-items:center;gap:28px;font-size:14px}.button{display:inline-flex;justify-content:center;align-items:center;gap:30px;background:var(--blue);color:white;border:1px solid var(--blue);border-radius:9px;padding:17px 25px;font-weight:600;line-height:1.3;transition:background .2s,transform .2s}.button:hover{background:#2f43d5;transform:translateY(-2px)}.button span{font-size:21px;font-weight:400}.button.small{padding:12px 18px;font-size:14px;gap:24px}.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:36px;align-items:center;min-height:660px;padding-top:35px;padding-bottom:80px}.eyebrow{font-size:12px;letter-spacing:.13em;font-weight:650;display:flex;align-items:center;gap:10px}.mini-line{width:19px;height:2px;background:var(--blue)}h1{font-size:clamp(56px,6.2vw,88px);line-height:1.07;letter-spacing:-.065em;font-weight:650;margin:25px 0 28px}h1 span{color:var(--blue)}.hero-description{font-size:19px;line-height:1.7;color:var(--muted)}.hero-buttons{display:flex;align-items:center;gap:27px;margin-top:32px}.text-link{font-size:14px;font-weight:600;display:flex;gap:13px;align-items:center}.text-link:hover{color:var(--blue)}.trial-note{font-size:13px;color:var(--muted);margin-top:20px}.trial-note span{margin:0 8px}.hero-visual{position:relative;min-height:535px;isolation:isolate}.blue-stage{position:absolute;inset:68px -10px 8px 15px;background:var(--blue);border-radius:150px 145px 95px 135px;transform:rotate(-7deg);z-index:-1}.phone{padding:6px;background:#252939;border:1px solid #555b6e;border-radius:35px;overflow:hidden;box-shadow:0 26px 55px #0b17412e;width:230px;position:absolute}.phone img{border-radius:28px;width:100%;height:auto}.phone-front{top:0;left:9%;transform:rotate(-8deg);z-index:2}.phone-back{right:0;top:48px;transform:rotate(9deg);width:216px}.screen-caption{position:absolute;bottom:28px;left:-8px;z-index:3;display:flex;gap:13px;background:#fff;box-shadow:0 10px 40px #1a2d5820;border:1px solid #edf0f7;border-radius:12px;padding:15px 22px;font-size:13px;line-height:1.5;transform:rotate(-3deg)}.check{align-self:center;width:30px;height:30px;border-radius:50%;background:#e6f5ed;color:#198a59;display:grid;place-items:center}.visual-note{position:absolute;bottom:-14px;right:10px;font-size:10px;font-weight:650;letter-spacing:.14em;color:var(--blue)}.crew-strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:white}.crew-strip>.wrap{min-height:111px;display:flex;align-items:center;justify-content:space-between;gap:25px}.crew-strip p{font-size:13px;line-height:1.5;color:var(--muted);border-right:1px solid var(--line);padding-right:45px}.crew-strip strong{color:var(--ink);font-weight:550}.crew-strip span{font-size:16px;font-family:'Manrope',sans-serif;font-weight:600}.crew-strip span:last-child{font-size:12px;color:var(--muted);font-weight:500;max-width:110px}.section{padding:96px 0}.section-top{display:flex;align-items:flex-end;justify-content:space-between;gap:50px;margin-bottom:49px}.section-top .eyebrow{color:var(--blue);margin-bottom:19px}h2{font-size:clamp(34px,3.6vw,49px);font-weight:600;letter-spacing:-.05em;line-height:1.17}.section-top>p{max-width:380px;font-size:16px;color:var(--muted);line-height:1.8}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:35px}.feature-grid article{border-top:1px solid #bac4ed;padding-top:23px}.feature-number{font-size:11px;letter-spacing:.09em;color:var(--blue);font-weight:600}.feature-grid h3{font-size:22px;letter-spacing:-.04em;font-weight:600;margin:25px 0 13px}.feature-grid p{color:var(--muted);font-size:15px;line-height:1.8}.feature-tag{display:inline-block;margin-top:24px;font-size:12px;background:#edf0fe;border-radius:5px;color:#4b5d9e;padding:5px 10px}.footer{display:flex;align-items:center;gap:28px;flex-wrap:wrap;padding-top:45px;padding-bottom:32px}.footer .brand img{width:80px;height:80px;flex-basis:80px;border-radius:20px}.footer .brand-text{font-size:28px}.footer>p{font-size:13px;color:var(--muted)}.footer>div{margin-left:auto;display:flex;gap:25px;font-size:13px}.copyright{width:100%;padding-top:25px;margin-top:5px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}.skip{position:fixed;left:15px;top:-100px;background:white;padding:10px;z-index:50}.skip:focus{top:15px}
@media(min-width:1500px){.hero-visual{transform:scale(1.05)}}
@media(max-width:1100px){.wrap{width:calc(100% - 64px)}.header nav{margin-left:0;gap:22px;order:3;flex:1 1 100%;justify-content:center}.hero{gap:18px}.hero-visual{min-height:500px}.phone-front{left:0;width:210px}.phone-back{width:195px}.hero-buttons{gap:18px}.hero-description{font-size:17px}.blue-stage{inset:75px 0 40px 0}.hero h1{font-size:clamp(56px,6.6vw,80px)}.crew-strip p{padding-right:25px}.section-top>p{max-width:330px}}
@media(max-width:800px){.wrap{width:calc(100% - 40px)}.header{min-height:136px;padding-block:20px;gap:12px 20px}.brand{gap:14px}.brand-text{font-size:clamp(22px,4vw,28px)}.header nav{display:none}.header-actions{gap:18px}.hero{grid-template-columns:1fr;padding-top:38px;padding-bottom:50px;gap:45px}.hero-copy{max-width:580px}.hero h1{font-size:clamp(52px,10vw,76px)}.hero-description{font-size:18px}.hero-visual{width:min(460px,100%);margin:auto;min-height:545px}.phone-front{width:232px;left:5%}.phone-back{width:214px;right:2%}.blue-stage{inset:65px 0 25px}.crew-strip>.wrap{justify-content:center;flex-wrap:wrap;gap:15px 25px;padding:25px 0}.crew-strip p{width:100%;border:0;text-align:center;padding:0}.crew-strip p br{display:none}.crew-strip span{font-size:14px}.crew-strip span:last-child{max-width:none;width:100%;text-align:center}.section{padding:65px 0}.section-top{display:block;margin-bottom:35px}.section-top>p{max-width:550px;margin-top:25px}.feature-grid{grid-template-columns:1fr;gap:32px}.feature-grid h3{margin-top:14px}.feature-tag{margin-top:14px}.footer{gap:20px}.footer>div{width:100%;margin:0}.footer>p{font-size:12px}}
@media(max-width:430px){.header .brand img{width:88px;height:88px;flex-basis:88px;border-radius:22px}.header-actions .login{display:none}.header-actions .small{padding:11px 13px;gap:13px}.hero-buttons{gap:22px}.hero-buttons .button{padding:15px 19px;gap:18px}.text-link{font-size:13px}.hero-visual{min-height:475px;width:100%}.phone-front{width:200px;left:3%}.phone-back{width:181px;right:0;top:48px}.screen-caption{bottom:16px;left:0;padding:12px 15px}.visual-note{font-size:9px;bottom:-10px;right:0}.blue-stage{border-radius:100px;inset:60px -5px 15px}.eyebrow{font-size:10px}.hero-description{font-size:17px}.desktop-break{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}
.showcase{background:#eef1fc;overflow:hidden}.showcase-grid{display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:80px;padding-top:76px;padding-bottom:70px}.showcase .eyebrow{color:#5366b2;margin-bottom:23px}.showcase-intro{color:var(--muted);margin-top:23px;max-width:390px;line-height:1.8}.screen-tabs{display:grid;margin-top:32px;gap:0}.screen-tabs button{border:0;border-bottom:1px solid #d8ddef;background:transparent;display:flex;align-items:center;gap:17px;padding:19px 12px;text-align:left;color:var(--muted);cursor:pointer;transition:background .2s,color .2s}.screen-tabs button[aria-selected=true]{background:white;color:var(--ink);border-radius:9px;border-color:transparent;box-shadow:0 5px 20px #2a397005}.tab-number{font-size:12px;color:#6e7db3}.screen-tabs strong{font-size:16px;display:block;font-weight:550}.screen-tabs small{display:block;font-size:13px;margin-top:3px;color:#667089}.tab-arrow{margin-left:auto;font-size:22px;color:var(--blue);visibility:hidden}.screen-tabs [aria-selected=true] .tab-arrow{visibility:visible}.showcase-screen{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:15px 0;isolation:isolate}.showcase-screen:before{content:'';position:absolute;z-index:-1;width:410px;height:410px;border-radius:50%;background:#dfe4fc}.showcase-phone{width:270px;border:7px solid #252939;border-radius:39px;overflow:hidden;box-shadow:0 25px 50px #1d285927;transform:rotate(4deg)}.showcase-phone img{width:100%;border-radius:30px}.showcase-screen>p{font-size:12px;color:#67749b;margin-top:28px}.pricing{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:100px;padding-top:100px;padding-bottom:100px}.pricing-intro .eyebrow{color:var(--blue);margin-bottom:21px}.pricing-intro>p:not(.eyebrow){margin-top:23px;color:var(--muted);font-size:17px}.pricing-intro ul{list-style:none;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px 20px;font-size:13px;margin:28px 0 0}.pricing-intro li:before{content:'✓';color:var(--blue);margin-right:9px}.price-card{padding:35px;background:white;border:1px solid var(--line);border-radius:18px;box-shadow:0 12px 42px #14235405}.price-card-top{display:flex;justify-content:space-between;align-items:center;gap:15px}.price-card h3{font-size:24px;letter-spacing:-.04em;font-weight:650}.price-card-top>span{font-size:10px;letter-spacing:.06em;background:#edf1ff;color:var(--blue);border-radius:5px;padding:6px 9px;font-weight:600}.billing{display:flex;background:#f1f3f9;border-radius:8px;padding:4px;margin-top:28px}.billing button{flex:1;padding:11px 8px;border:0;background:transparent;border-radius:6px;cursor:pointer;font-size:14px;color:var(--muted)}.billing button.active{background:white;box-shadow:0 2px 5px #182b4810;color:var(--ink)}.billing button span{font-size:10px;color:var(--blue);margin-left:4px}.price{display:flex;align-items:baseline;gap:9px;margin-top:27px}.price strong{font-family:'Manrope',sans-serif;font-size:58px;letter-spacing:-.06em;line-height:1.3}.price>span{color:var(--muted);font-size:14px}.price-note{color:var(--muted);font-size:14px;margin-top:8px}.price-card>.button{display:flex;margin-top:25px;justify-content:space-between}.billing-note{font-size:12px;color:var(--muted);line-height:1.7;margin-top:17px}.download{background:var(--blue);color:white}.download-inner{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:63px 0}.download .eyebrow{color:#d4dcff;margin-bottom:16px}.download h2{font-size:57px;letter-spacing:-.06em}.download h2+p{color:#e0e5ff;margin-top:15px;font-size:17px}.store-links{display:flex;align-items:center;gap:14px}.store-links a{display:block;transition:transform .2s}.store-links a:hover{transform:translateY(-3px)}.store-links img{height:53px;width:auto}.store-links a:last-child img{height:62px}.download-actions>p{font-size:12px;color:#dde3ff;margin-top:16px;text-align:center}
@media(max-width:1100px){.showcase-grid{gap:45px}.pricing{gap:50px}.pricing-intro ul{grid-template-columns:1fr}.download h2{font-size:48px}.store-links{gap:6px}.store-links img{height:46px}.store-links a:last-child img{height:54px}.download-actions>p{font-size:11px}.price-card{padding:28px}}
@media(max-width:800px){.showcase-grid{grid-template-columns:1fr;padding-top:55px;padding-bottom:45px;gap:36px}.showcase-copy{max-width:550px}.showcase-screen:before{width:350px;height:350px}.showcase-phone{width:245px}.pricing{grid-template-columns:1fr;gap:35px;padding-top:65px;padding-bottom:65px}.pricing-intro ul{grid-template-columns:1fr 1fr;gap:12px}.price-card{max-width:540px;width:100%}.download-inner{flex-direction:column;align-items:flex-start;padding:48px 0;gap:28px}.download-actions>p{text-align:left}.store-links img{height:49px}.store-links a:last-child img{height:58px}.showcase-screen>p{margin-top:25px}.screen-tabs button{padding:17px 10px}}
@media(max-width:430px){.pricing-intro ul{grid-template-columns:1fr}.price-card{padding:23px}.price-card-top>span{font-size:9px}.price-card h3{font-size:22px}.store-links img{height:44px}.store-links a:last-child img{height:52px}.showcase-screen:before{width:290px;height:290px}.showcase .eyebrow{font-size:9px}.screen-tabs small{font-size:12px}.price strong{font-size:53px}}
/* Original Pencilled brand background. */
.header{position:relative;z-index:1}
.hero{position:relative;isolation:isolate}
.hero::before{content:"";position:absolute;z-index:-2;top:calc(-1 * var(--site-header-height));bottom:0;left:calc((100vw - 100%) / -2);right:calc((100vw - 100%) / -2);background:#d6e6ec url('assets/pencilled-background.png') center / cover no-repeat;pointer-events:none}
.hero-description,.trial-note{color:#48516b}
.blue-stage{background:var(--blue);border:0}
.showcase{background:linear-gradient(rgba(255,255,255,.25),rgba(255,255,255,.25)),url('assets/pencilled-background.png') center / cover no-repeat}
.showcase-screen::before{background:var(--blue)}
/* Match badge heights, retaining each store's original proportions and border. */
.store-links{--badge-height:52px;gap:14px;align-items:center}
.store-links a{position:relative;display:block;width:auto;height:var(--badge-height);flex:none;overflow:hidden;background:transparent;border:0;border-radius:0}
.store-links img{position:static;display:block;width:auto;max-width:none;height:var(--badge-height);object-fit:contain;transform:none;clip-path:none}
.store-links a:last-child{width:calc(var(--badge-height) * 3.357143)}
.store-links a:last-child img{position:absolute;left:-7.269504%;top:-24.404762%;width:114.539007%;max-width:none;height:auto;transform:none;clip-path:none}
@media(max-width:430px){.store-links{--badge-height:44px;gap:10px}}
@media(max-width:350px){.store-links{--badge-height:40px}}
/* Shared support and policy page design. */
.info-page{background:var(--paper)}
.info-hero{position:relative;padding:28px 0 58px;background:url('/assets/pencilled-background.png') center / cover}
.info-page .header{background:var(--paper)}
.back-home{display:inline-block;font-size:14px;margin-bottom:35px;color:#48516b}
.info-hero .eyebrow{color:#394bab}
.info-hero h1{font-size:clamp(42px,5vw,68px);margin:17px 0 20px;letter-spacing:-.055em}
.info-intro{max-width:750px;font-size:17px;color:#48516b;line-height:1.75}
.info-layout{display:grid;grid-template-columns:230px minmax(0,760px);gap:72px;padding-top:60px;padding-bottom:80px;align-items:start}
.info-layout aside{position:sticky;top:28px}
.help-nav{display:grid;gap:5px;border-bottom:1px solid var(--line);padding-bottom:22px}
.help-nav a{padding:10px 14px;border-radius:7px;font-size:15px}
.help-nav a:hover{background:#edf0fe}
.help-nav a[aria-current=page]{background:var(--blue);color:white}
.contents{display:grid;gap:10px;padding:24px 14px 0}
.contents p{font-size:11px;letter-spacing:.12em;font-weight:650;margin-bottom:5px;color:#68708a}
.contents a{font-size:14px;line-height:1.5;color:#5b647a}
.contents a:hover{color:var(--blue)}
.prose{min-width:0;font-size:16px;line-height:1.85;color:#4e5870;overflow-wrap:anywhere}
.prose h2{font-size:27px;letter-spacing:-.035em;line-height:1.35;color:var(--ink);margin:42px 0 17px;padding-top:8px;scroll-margin-top:28px}
.prose>h2:first-child{margin-top:0;padding-top:0}
.prose h3{font-size:19px;font-weight:650;letter-spacing:-.025em;line-height:1.5;color:var(--ink);margin:26px 0 10px}
.prose p{margin-bottom:18px}
.prose ul,.prose ol{padding-left:23px;margin:18px 0}
.prose li{margin-bottom:9px}
.prose a:not(.button){color:#3449d0;text-decoration:underline;text-underline-offset:3px}
.prose .button{color:white;font-size:15px}
.support-card{padding:30px;border:1px solid var(--line);border-radius:16px;background:white}
.support-card .eyebrow{color:var(--blue);font-size:11px;margin:0 0 18px}
.support-card h2{margin:0 0 18px;padding:0}
.support-email{display:inline-block;font-size:clamp(18px,2.4vw,26px);line-height:1.4;font-weight:550;margin-bottom:12px}
.support-card>p:not(.eyebrow){font-size:14px}
.topic-list{display:grid;grid-template-columns:1fr 1fr;gap:9px 22px}
.help-links{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:30px}
.help-links a{display:flex;flex-direction:column;gap:10px;padding:22px;background:#edf0fe;border-radius:10px;text-decoration:none!important}
.help-links strong{color:var(--ink);font-size:16px;font-weight:550;line-height:1.5}
.help-links span{font-size:14px}
@media(max-width:1000px){.info-layout{gap:40px;grid-template-columns:195px minmax(0,1fr)}}
@media(max-width:800px){.info-hero{padding:18px 0 36px}.back-home{margin-bottom:25px}.info-layout{grid-template-columns:1fr;gap:32px;padding-top:30px;padding-bottom:50px}.info-layout aside{position:static}.help-nav{grid-template-columns:1fr 1fr;gap:6px}.help-nav a{font-size:14px}.contents{display:none}.prose h2{font-size:25px}.support-card{padding:23px}.info-intro{font-size:16px}}
@media(max-width:430px){.help-links,.topic-list{grid-template-columns:1fr}.info-hero h1{font-size:39px}.support-email{font-size:17px}}
/* Scroll-driven feature orbit; the original tabbed view remains the fallback. */
.orbit-view{display:none}
.showcase.orbit-enabled{overflow:visible;height:420svh;position:relative}
.orbit-enabled>.showcase-grid{display:none}
.orbit-enabled>.orbit-view{display:flex;position:sticky;top:0;height:100svh;max-height:100svh;flex-direction:column;padding:24px 0 18px;overflow:hidden;isolation:isolate}
.orbit-heading{text-align:center;flex:none}
.orbit-heading .eyebrow{justify-content:center;margin-bottom:10px}
.orbit-heading h2{font-size:clamp(28px,3vw,42px)}
.orbit-stage{position:relative;flex:1;min-height:0;isolation:isolate}
.orbit-circle{position:absolute;left:68%;top:50%;width:min(38vw,440px,65svh);aspect-ratio:1;border-radius:50%;background:var(--blue);transform:translate(-50%,-50%) scale(var(--circle-scale,.9));z-index:1;will-change:transform}
.orbit-phone{position:absolute;left:68%;top:50%;height:min(59svh,510px);aspect-ratio:1320/2868;transform:translate(-50%,-50%) rotate(4deg);border:6px solid #252939;border-radius:32px;background:#252939;overflow:hidden;z-index:3;box-shadow:0 22px 45px #17244728}
.orbit-phone img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .22s ease;border-radius:24px}
.orbit-phone img[data-active=true]{opacity:1}
.orbit-card{position:absolute;left:4%;top:50%;width:43%;padding:30px;border-radius:18px;background:#fff;box-shadow:0 18px 48px #23356e13;border:1px solid #e9ecf6;opacity:0;will-change:transform,opacity;pointer-events:none}
.orbit-card .eyebrow{color:var(--blue);margin:0 0 20px;font-size:12px}
.orbit-card h3{font-size:clamp(25px,2.8vw,38px);line-height:1.15;letter-spacing:-.045em;margin-bottom:15px}
.orbit-card p:last-child{font-size:17px;line-height:1.65;color:var(--muted)}
.orbit-controls{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:12px 20px;flex:none;min-height:50px}
.orbit-steps{display:flex;gap:8px}
.orbit-steps button{width:40px;height:40px;border-radius:50%;border:1px solid #aeb9da;color:#405078;background:#ffffff80;cursor:pointer;font-size:13px}
.orbit-steps button[aria-pressed=true]{background:var(--blue);color:#fff;border-color:var(--blue)}
.orbit-hint,.orbit-skip{font-size:12px;color:#4e5b7a}.orbit-skip{text-decoration:underline;text-underline-offset:4px}
@media(max-width:800px){.showcase.orbit-enabled{height:380svh}.orbit-enabled>.orbit-view{padding-top:18px;padding-bottom:14px}.orbit-heading h2{font-size:28px}.orbit-heading .eyebrow{font-size:10px;margin-bottom:8px}.orbit-circle{left:50%;top:34%;width:min(65vw,310px,43svh)}.orbit-phone{left:50%;top:34%;height:min(40svh,330px);border-width:4px;border-radius:24px}.orbit-phone img{border-radius:19px}.orbit-card{left:5%;top:79%;width:90%;padding:19px 23px;border-radius:13px}.orbit-card .eyebrow{font-size:10px;margin-bottom:9px}.orbit-card h3{font-size:24px;margin-bottom:8px}.orbit-card p:last-child{font-size:15px;line-height:1.5}.orbit-controls{gap:8px 16px}.orbit-hint{display:none}.orbit-steps button{width:36px;height:36px}}
@media(prefers-reduced-motion:reduce){.showcase.orbit-enabled{height:auto}.orbit-enabled>.showcase-grid{display:grid}.orbit-enabled>.orbit-view{display:none}}

/* Continuous scroll feedback between the readable feature pauses. */
.orbit-ring{position:absolute;left:68%;top:50%;width:min(42vw,490px,72svh);aspect-ratio:1;z-index:2;pointer-events:none;border:2px solid rgba(64,85,237,.2);border-top:3px solid rgba(64,85,237,.8);border-right:3px solid rgba(64,85,237,.8);border-radius:50%;transform:translate(-50%,-50%) rotate(var(--orbit-turn,0deg)) scale(var(--circle-scale,.78));will-change:transform}
.orbit-ring::after{content:"";position:absolute;top:13%;right:13%;width:12px;height:12px;border-radius:50%;background:#fff;border:3px solid var(--blue)}
.orbit-phone{transform:translate(-50%,calc(-50% + var(--phone-lift,0px))) rotate(var(--phone-turn,-3deg));will-change:transform}
.orbit-progress{width:90px;height:4px;border-radius:4px;background:rgba(64,85,237,.18);overflow:hidden}
.orbit-progress span{display:block;width:100%;height:100%;background:var(--blue);transform-origin:left;transform:scaleX(var(--scroll-progress,0));will-change:transform}
@media(max-width:800px){.orbit-ring{left:50%;top:34%;width:min(72vw,345px,48svh)}.orbit-progress{width:54px}.orbit-controls{gap:8px 12px}}

/* Give the screenshots more of the scene, with growth bounded by the text. */
.orbit-phone{will-change:transform,height}
@media(max-width:800px){.orbit-heading h2{font-size:24px}.orbit-phone,.orbit-circle,.orbit-ring{top:35%}.orbit-card{top:83%;padding:16px 20px}.orbit-card h3{font-size:22px}.orbit-card .eyebrow{margin-bottom:7px}}

/* The shared calendar shows the producer's view beside the matching app screen. */
.availability-card{padding:22px;max-height:100%}.availability-card .eyebrow{margin-bottom:10px}.availability-card h3{font-size:clamp(23px,2.5vw,34px);margin-bottom:8px}.availability-card>p:not(.eyebrow){font-size:15px;line-height:1.45;color:var(--muted);margin-bottom:16px}
.producer-preview{border:1px solid #dedee7;border-radius:12px;overflow:hidden;color:#292524;background:#f2f2f7;text-align:left;font-family:Manrope,sans-serif}
.producer-browser{display:flex;align-items:center;gap:12px;padding:9px 12px;background:#fafafa;border-bottom:1px solid #e7e5e4;font-size:9px;color:#78716c}.producer-dots{letter-spacing:2px;color:#c7c5ce}.producer-example{margin-left:auto;font-size:8px;text-transform:uppercase;letter-spacing:.08em}
.producer-body{padding:13px}.producer-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.producer-top b{display:block;font-size:7px;letter-spacing:.18em;color:#78716c}.producer-top strong{font-size:13px}.producer-privacy{font-size:8px;padding:4px 7px;border:1px solid #d6d3d1;border-radius:20px;background:#fff}.producer-calendar{padding:12px;background:#fff;border:1px solid #e7e5e4;border-radius:12px}.producer-month{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;font-size:12px}.producer-month>span{font-size:9px;color:#78716c}.producer-weekdays,.producer-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;text-align:center}.producer-weekdays{font-size:8px;color:#a8a29e;margin-bottom:5px}.producer-day{display:flex;align-items:center;justify-content:center;height:23px;font-size:10px;border-radius:5px}.producer-day.free,.producer-legend .free{background:#ecfdf5;border:1px dashed #6ee7b7;color:#065f46}.producer-day.busy,.producer-legend .busy{background:#e7e5e4;color:#78716c;border:1px solid #e7e5e4}.producer-day.outside{color:#d6d3d1}.producer-legend{display:flex;align-items:center;gap:10px;margin-top:9px;font-size:8px;color:#78716c}.producer-legend>span{display:flex;align-items:center;gap:4px}.producer-legend>span:last-child{margin-left:auto}.producer-legend i{width:8px;height:8px;border-radius:2px}
@media(max-width:800px){.availability-card{padding:12px 15px}.availability-card h3{font-size:19px;margin-bottom:4px}.availability-card .eyebrow{font-size:9px;margin-bottom:4px}.availability-card>p:not(.eyebrow){font-size:12px;margin-bottom:8px}.producer-browser{padding:5px 8px;font-size:8px}.producer-body{padding:7px}.producer-top{margin-bottom:5px}.producer-top strong{font-size:11px}.producer-calendar{padding:7px}.producer-month{margin-bottom:5px;font-size:10px}.producer-day{height:15px;font-size:8px;border-radius:3px}.producer-days{gap:2px}.producer-weekdays{font-size:7px;margin-bottom:3px}.producer-legend{margin-top:5px;font-size:7px;gap:7px}}
@media(min-width:801px) and (max-height:740px){.availability-card{padding:16px}.availability-card .eyebrow{margin-bottom:6px}.availability-card h3{font-size:25px}.availability-card>p:not(.eyebrow){margin-bottom:9px}.producer-day{height:19px}.producer-body{padding:9px}.producer-browser{padding:6px 10px}}

/* Paired, scroll-driven highlights keep the app and producer calendar in sync. */
.phone-date-overlay{position:absolute;inset:0;pointer-events:none;z-index:2}
.phone-date-glow{position:absolute;width:10.8%;height:5.5%;transform:translate(-50%,-50%);border-radius:5px;border:1.5px solid #5967ff;background:#7485ff1f;box-shadow:0 0 10px #5967ff99,inset 0 0 6px #fff8;opacity:0;transition:opacity .16s ease}
.phone-date-glow.date-lit{opacity:var(--date-glow-strength,1)}
.producer-day{transition:box-shadow .16s ease,background .16s ease,border-color .16s ease}
.producer-day.date-lit{position:relative;z-index:1;background:#e7eaff;border:1.5px solid #5967ff;color:#2737b0;box-shadow:0 0 9px #5967ff88,inset 0 0 5px #fff9;font-weight:800}
@media(prefers-reduced-motion:reduce){.phone-date-glow,.producer-day{transition:none}}

/* Scroll-driven sample list; the authentic screenshot supplies the fixed chrome. */
.orbit-phone{container-type:inline-size}
.bookings-demo{position:absolute;inset:24% 0 8.6%;z-index:1;overflow:hidden;pointer-events:none;opacity:0;transition:opacity .22s;background:#d6edf5 url('assets/pencilled-background.png') center center/cover;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#151821;line-height:1.25}
.bookings-demo[data-active="true"]{opacity:1}
.bookings-demo-list{padding:0 4.5cqw 4cqw;will-change:transform}
.demo-group{display:flex;justify-content:space-between;align-items:center;padding:3cqw 0 3.4cqw;font-size:3cqw;letter-spacing:.25cqw}
.demo-group span{font-size:2.8cqw;letter-spacing:0;color:#7c8494}
.demo-job{position:relative;padding:4cqw 4cqw 3.6cqw 5cqw;margin-bottom:3.2cqw;border-radius:4cqw;background:rgba(246,255,255,.87);border-left:1.4cqw solid #161821;min-height:42cqw;box-shadow:0 0 0 .2cqw #ffffff66}
.demo-job-heading{display:flex;gap:3cqw;padding-right:13cqw;align-items:center;min-height:13cqw}
.demo-job-heading small{display:block;font-size:2.65cqw;letter-spacing:.22cqw;color:#7b8094;margin-bottom:1.1cqw}
.demo-job-heading strong{display:block;font-size:4.2cqw;font-weight:600;line-height:1.13}
.demo-avatar{display:grid;place-items:center;flex:0 0 10cqw;height:10cqw;border-radius:3cqw;background:#f7decf;color:#f29b25}
.demo-avatar svg{width:5.5cqw;height:5.5cqw}
.demo-avatar.green{background:#d0f1dc;color:#4cc676}.demo-avatar.purple{background:#dedaf6;color:#7160da}
.demo-status{position:absolute;right:0;top:0;background:#49c968;color:white;text-transform:uppercase;font-size:2.3cqw;font-weight:800;letter-spacing:.15cqw;padding:1.15cqw 2cqw;border-radius:0 3cqw 0 2cqw;box-shadow:0 1cqw 2cqw #24334822}
.demo-status.pencilled{background:#7968df}
.demo-job-details{margin-top:3cqw;font-size:3.35cqw;line-height:1.5}
.demo-job-details>div{white-space:nowrap}.demo-job-details span{display:inline-block;width:4.5cqw}.demo-job-details small{font-size:2.7cqw;color:#7b8492}.demo-person{color:#929aa6}
.demo-fee{text-align:right;font-size:4.7cqw;font-weight:600;margin-top:4.5cqw}


/* The scrolling list runs behind frosted surfaces; chrome remains above them. */
.bookings-demo{inset:0;background-position:center;background-size:cover}
.bookings-demo-list{padding-top:52cqw;padding-bottom:20cqw}
.orbit-phone img[src="assets/bookings.jpeg"]{z-index:3;-webkit-mask-image:linear-gradient(#000 0%,#000 5%,transparent 6%,transparent 100%);mask-image:linear-gradient(#000 0%,#000 5%,transparent 6%,transparent 100%);pointer-events:none}
.bookings-demo::before,.bookings-demo::after{content:"";position:absolute;left:0;right:0;z-index:2;pointer-events:none;-webkit-backdrop-filter:blur(2.5cqw);backdrop-filter:blur(2.5cqw)}
.bookings-demo::before{top:0;height:26%;background:linear-gradient(#e3ddf3b3,#d6e6f27a 70%,transparent);-webkit-mask-image:linear-gradient(#000 0%,#000 80%,transparent);mask-image:linear-gradient(#000 0%,#000 80%,transparent)}
.bookings-demo::after{bottom:0;height:12%;background:linear-gradient(to top,#ccecf1b3,#ccecf180 60%,transparent);-webkit-mask-image:linear-gradient(to top,#000 0%,#000 68%,transparent);mask-image:linear-gradient(to top,#000 0%,#000 68%,transparent)}
.demo-chrome-header,.demo-chrome-stats,.demo-chrome-tabs{position:absolute;z-index:3}
.demo-chrome-header{top:7.3%;left:4.5%;right:4.5%;display:flex;align-items:center;justify-content:space-between}
.demo-chrome-header>b{font-size:7.4cqw;font-weight:750;letter-spacing:-.25cqw}
.demo-actions{display:flex;gap:2cqw;align-items:center;color:#6859d9}
.demo-actions>span,.demo-tools>span{position:relative;display:grid;place-items:center;width:10cqw;height:10cqw;border-radius:50%;background:#f4ffffdf;font-size:6cqw}
.demo-actions>span:nth-child(2){font-size:3cqw;letter-spacing:.2cqw}
.demo-actions svg,.demo-tools svg{width:5.2cqw;height:5.2cqw}
.demo-actions i,.demo-chrome-tabs i{position:absolute;top:-1cqw;right:-.5cqw;display:grid;place-items:center;border-radius:50%;background:#ff464b;color:white;width:4.5cqw;height:4.5cqw;font:600 2.8cqw/1 -apple-system,BlinkMacSystemFont,sans-serif}
.demo-chrome-stats{top:13.4%;left:4.5%;right:4.5%;display:flex;gap:2cqw;height:18.7cqw}
.demo-tools{display:flex;flex-direction:column;justify-content:space-between;color:#6859d9}
.demo-tools>span{width:9cqw;height:9cqw}
.demo-stat{flex:1;min-width:0;border-radius:3cqw;padding:2.5cqw;background:#f4ffffe6;display:flex;flex-direction:column;justify-content:space-between}
.demo-stat>div{display:flex;align-items:baseline;gap:1.5cqw;white-space:nowrap}
.demo-stat b{font-size:6.6cqw;font-weight:650;color:#7160df}
.demo-stat small{font-size:2.1cqw;letter-spacing:.18cqw;color:#747989}
.demo-stat strong{font-size:4.1cqw;font-weight:600}.demo-stat.confirmed b{color:#49c96c}
.demo-chrome-tabs{bottom:1.6%;left:4%;right:4%;height:7%;display:flex;padding:1cqw;background:#e5ffffa6;border:.2cqw solid #fff7;border-radius:9cqw;box-shadow:0 1cqw 4cqw #65748d15}
.demo-chrome-tabs>span{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.7cqw;color:#15353e;border-radius:8cqw}
.demo-chrome-tabs>span.selected{background:#b8b4f34d;color:#7464dc}
.demo-chrome-tabs svg{width:6cqw;height:6cqw}
.demo-chrome-tabs small{font-size:2.3cqw;font-weight:500}
.demo-chrome-tabs i{right:2cqw;top:0}

/* Today's shoot mirrors the expanded operational card in the updated app. */
.demo-today{border-left-color:#7c70e7;background:linear-gradient(135deg,#e4e9ffed,#e3fcffee);box-shadow:0 0 0 .35cqw #aaa1f4;padding-top:4cqw}
.demo-today .demo-job-heading{padding-right:12cqw;min-height:15cqw}
.demo-today .demo-avatar{flex-basis:13cqw;height:13cqw;border-radius:4cqw}
.demo-avatar.blue{background:#badcfa;color:#369fc5}.demo-avatar.pink{background:#f0d9ed;color:#ff477b}
.demo-status.heavy-pencil{background:#ac50dc}.demo-status.completed{background:#8a939b}
/* BookingCardView.callTimeBanner: light Theme.accentFill → Theme.purpleFill. */
.demo-shoot-times{display:flex;align-items:center;gap:2.3cqw;margin-top:3cqw;padding:2.35cqw 2.8cqw;border:.23cqw solid #ffffff33;border-radius:2.6cqw;background:linear-gradient(to bottom right,#5856d6,#af52de);color:#fff}
.demo-shoot-times .demo-clock-pair{display:flex;flex:1;align-items:baseline;justify-content:space-between;gap:2.3cqw;min-width:0}
.demo-clock-pair>div{display:flex;flex-direction:column;gap:.23cqw}
.demo-clock-pair>div:last-child{text-align:right}
.demo-shoot-times small{font-size:2.45cqw;font-weight:600;letter-spacing:.14cqw;color:#ffffffb8}
.demo-shoot-times strong{font-size:5.1cqw;font-weight:700;letter-spacing:-.15cqw;line-height:1.2;white-space:nowrap}
.demo-banner-icon{flex:none;width:4cqw;height:4cqw;fill:currentColor}
.demo-banner-wrap{color:#ffffffc7}
.demo-shoot-times .demo-weather{display:flex;flex:none;flex-direction:column;gap:.47cqw;border-left:.23cqw solid #ffffff33;padding-left:2.3cqw;align-items:center}
.demo-weather svg{width:4cqw;height:4cqw;color:#fff}.demo-weather small{letter-spacing:0;font-size:2.57cqw;white-space:nowrap}
.demo-shoot-footer{display:flex;align-items:center;gap:4cqw;margin-top:3.5cqw}
.demo-shortcut{display:flex;flex-direction:column;align-items:center;gap:1.5cqw}
.demo-shortcut>span{width:11cqw;height:11cqw;border-radius:50%;display:grid;place-items:center;background:#c8c9ff88;color:#7d70df}
.demo-shortcut svg{width:5.5cqw;height:5.5cqw}
.demo-shortcut small{color:#9099a9;font-size:2.9cqw}
.demo-shortcut.producer>span{background:#bcefeb99;color:#49c978}
.demo-shoot-footer .demo-fee{margin:0 0 0 auto;font-size:4.8cqw}

/* Point three: scroll-scrubbed native-style booking detail disclosures. */
.details-demo::before{height:14%}
.orbit-phone img[src="assets/details.jpeg"]{z-index:3;-webkit-mask-image:linear-gradient(#000 0%,#000 5%,transparent 6%,transparent);mask-image:linear-gradient(#000 0%,#000 5%,transparent 6%,transparent);pointer-events:none}
.detail-scroll{padding:29cqw 4.5cqw 24cqw;will-change:transform}
.detail-nav{position:absolute;z-index:3;top:6.8%;left:4.5%;right:4.5%;display:flex;align-items:center;gap:3cqw}
.detail-nav>span{display:grid;place-items:center;width:10cqw;height:10cqw;border-radius:50%;background:#f4ffffde;color:#7160d8;font-size:6cqw;flex-shrink:0}
.detail-nav>span:last-child{font-size:3cqw}
.detail-nav>b{font-size:3.7cqw;line-height:1.2;text-align:center;flex:1}
.detail-hero{padding:3cqw 3cqw 5cqw}
.detail-hero>small{font-size:3.5cqw;color:#858997;font-weight:600}
.detail-hero h4{font-size:6cqw;line-height:1.1;margin:2cqw 0;letter-spacing:-.15cqw}
.detail-hero>span{font-size:3.6cqw;color:#858997}
.detail-confirmed{display:table;margin-top:2.7cqw;padding:1.5cqw 2.5cqw;border-radius:6cqw;background:#8cddb83d;color:#44bb70;font-size:3.4cqw}
.detail-section{margin:0 0 3.5cqw;padding:3.8cqw;border:.25cqw solid #fff9;border-radius:5cqw;background:#f1ffffc9}
.detail-section-heading{display:flex;align-items:center;gap:2.5cqw;min-height:11cqw}
.detail-section-heading>i{font-style:normal;display:grid;place-items:center;width:8cqw;height:8cqw;flex-shrink:0;border-radius:50%;background:#aaa3f333;color:#7260d8;font-size:4.5cqw}
.detail-section-heading>div{flex:1;min-width:0}
.detail-section-heading b{font-size:3.85cqw;display:block;line-height:1.2}
.detail-section-heading small{font-size:2.8cqw;color:#858c9b;display:block;margin-top:.8cqw}
.detail-toggle{font-size:2.8cqw;color:#7363d5}
.detail-chevron{color:#7363d5;font-size:3.5cqw}
.detail-expanded{height:0;overflow:hidden}
.detail-expanded>div{padding-top:3.5cqw;font-size:3.3cqw;line-height:1.4}
.detail-line{display:flex;flex-direction:column;gap:.6cqw;padding:2.7cqw 0}
.detail-line small,.detail-times small{font-size:2.6cqw;letter-spacing:.15cqw;color:#8792a1}
.detail-line b{font-size:3.7cqw}
.detail-line>span{color:#73828c}
.detail-times{display:flex;justify-content:space-between;padding:3cqw;background:#bdbbfa33;border:.25cqw solid #b9b7f599;border-radius:3cqw}
.detail-times>span{display:flex;flex-direction:column;gap:.8cqw}
.detail-times b{font-size:5cqw;letter-spacing:-.1cqw}
.detail-note{background:#fff5;border-radius:3cqw;padding:2.8cqw;margin:2cqw 0;display:flex;flex-direction:column;gap:1cqw}
.detail-note span{color:#768391}
.detail-pill{display:inline-block;background:#7664da19;color:#7360d7;padding:1.6cqw 2.7cqw;border-radius:4cqw;margin-top:1.8cqw;font-weight:600}
.detail-person{display:flex;align-items:center;gap:2.5cqw;padding:1.5cqw 0 3cqw;border-bottom:.2cqw solid #9bacb92b}
.detail-initials{display:grid;place-items:center;flex-shrink:0;width:9cqw;height:9cqw;border-radius:50%;background:#b3adf544;color:#7663d8;font-size:3cqw;font-weight:600}
.detail-person>span:nth-child(2){display:flex;flex:1;flex-direction:column}
.detail-person small,.detail-document small{color:#8a94a2;font-size:2.8cqw}
.detail-person i{font-style:normal;font-size:5cqw;color:#7561d8}
.detail-document{display:flex;align-items:center;gap:2.5cqw;margin-bottom:3cqw}
.detail-document>span{color:#7561d8;font-size:7cqw}
.detail-document>div{display:flex;flex-direction:column}
.detail-example{text-align:center;color:#788494;font-size:2.5cqw;padding:1cqw 0}

/* Reuse current screen content in the hero and the reduced-motion/short-screen view. */
.static-booking-screen{position:relative;container-type:inline-size;overflow:hidden;isolation:isolate}
.phone .static-booking-screen{border-radius:28px}
.showcase-phone .static-booking-screen{border-radius:30px}
.static-booking-screen>img{position:relative;z-index:3}
.static-booking-screen[data-native-preview]>img{-webkit-mask-image:linear-gradient(#000 0%,#000 5%,transparent 6%,transparent);mask-image:linear-gradient(#000 0%,#000 5%,transparent 6%,transparent)}
.static-booking-screen>.bookings-demo{transition:none}
.static-booking-screen>.bookings-demo[hidden]{display:none}
.static-booking-screen .bookings-demo-list,.static-booking-screen .detail-scroll{will-change:auto}

/* BookingDetailView.scheduleCard forces the iOS dark palette within the light screen. */
.detail-schedule{background:linear-gradient(to bottom right,#5e5ce6,#9f4fcf);color:#fff;border-color:#ffffff33;border-radius:3.3cqw;padding:3.75cqw}
.detail-schedule .detail-section-heading>i{background:#ffffff29;color:#fff}
.detail-schedule .detail-section-heading small,.detail-schedule .detail-line small,.detail-schedule .detail-times small{color:#ffffffb8}
.detail-schedule .detail-toggle{display:none}
.detail-schedule .detail-chevron{color:#ffffff94}
.detail-schedule .detail-expanded>div{box-shadow:inset 0 .12cqw 0 #ffffff29;padding-top:3.5cqw}
.detail-schedule .detail-times{background:transparent;border:0;padding:0}
.detail-schedule .detail-line>span{color:#ffffffc7}

/* Clean sample inbox; scrolling mail stays below fixed frosted controls. */
.inbox-demo::before{height:19%}
.orbit-phone img[src="assets/inbox.svg"]{z-index:3;-webkit-mask-image:linear-gradient(#000 0%,#000 5%,transparent 6%,transparent);mask-image:linear-gradient(#000 0%,#000 5%,transparent 6%,transparent);pointer-events:none}
.inbox-scroll{padding:40cqw 3.7cqw 23cqw;will-change:transform}
.inbox-filters{position:absolute;z-index:3;top:13.1%;left:3.7%;right:3.7%;height:7.5cqw;display:flex;align-items:center;background:#c5ceda99;border-radius:5cqw;font-size:3cqw}
.inbox-filters>*{flex:1;text-align:center;font-weight:500}.inbox-filters>b{background:#fffffff0;border-radius:5cqw;padding:1.5cqw 0}
.inbox-demo .demo-actions{gap:1.8cqw}.inbox-demo .demo-actions>span{width:9cqw;height:9cqw;font-size:5cqw}
.email-card{display:flex;gap:2.8cqw;padding:3.4cqw;margin-bottom:2.5cqw;border:.25cqw solid #fff9;border-radius:4cqw;background:#f2ffffd9}
.email-avatar{display:grid;place-items:center;flex:0 0 9cqw;height:9cqw;border-radius:3cqw;background:color-mix(in srgb,var(--sender-color) 18%,transparent);color:var(--sender-color);font-size:3.1cqw;font-weight:700}
.email-content{flex:1;min-width:0}.email-sender{display:flex;gap:1.5cqw;align-items:center;margin-bottom:1cqw}
.email-sender b{font-size:3.7cqw;flex:1}.email-sender small{font-size:2.7cqw;white-space:nowrap;color:#8e99a5}
.email-sender i{width:1.8cqw;height:1.8cqw;flex-shrink:0;border-radius:50%;background:#7361d7}
.email-content>strong{display:block;font-size:3.6cqw;line-height:1.2;font-weight:550}
.email-content>p{font-size:3.15cqw;line-height:1.35;color:#929ba8;margin:1.2cqw 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.email-tag{display:table;padding:.7cqw 2cqw;border-radius:4cqw;color:#7261cd;background:#c8c9fc66;font-size:2.8cqw;font-weight:600}

/* Scroll-linked full turns conceal instantaneous screen swaps behind the handset. */
.orbit-phone{transform:translate(-50%,calc(-50% + var(--phone-lift,0px))) perspective(1100px) rotateZ(var(--phone-turn,-3deg)) rotateY(var(--phone-spin,0deg))}
.orbit-phone img,.orbit-phone .bookings-demo{transition:none}
.orbit-phone-back{position:absolute;inset:0;z-index:10;display:none;transform:rotateY(180deg);border-radius:inherit;background:linear-gradient(135deg,#c9cddf 0%,#e7e8f0 38%,#a9b0ca 100%);box-shadow:inset 0 0 0 1px #ffffff80}
.orbit-phone-back[data-visible="true"]{display:block}
.phone-back-brand{position:absolute;left:0;right:0;top:48%;text-align:center;font-size:9cqw;letter-spacing:-.4cqw;font-weight:650;color:#777f9d}
.phone-cameras{position:absolute;top:4%;left:7%;width:34cqw;height:36cqw;border-radius:8cqw;background:linear-gradient(135deg,#b7bdd1,#d2d6e4);box-shadow:0 1cqw 2cqw #59617e33,inset 0 0 0 .5cqw #e9ecf699}
.phone-cameras i{position:absolute;width:12cqw;height:12cqw;border-radius:50%;background:radial-gradient(circle,#253450 10%,#111929 28%,#394561 37%,#111722 48%,#222b3e 67%,#919aaf 70%,#c2c8d8 82%);box-shadow:0 .5cqw 1cqw #343c5855}
.phone-cameras i:nth-child(1){left:3cqw;top:3cqw}.phone-cameras i:nth-child(2){left:3cqw;bottom:3cqw}.phone-cameras i:nth-child(3){right:3cqw;top:12cqw}
.phone-cameras>span{position:absolute;right:6.5cqw;top:4cqw;width:5cqw;height:5cqw;border-radius:50%;background:#f8f2df;box-shadow:0 0 0 .5cqw #929ab455}

/* Solid rounded chassis: clipped display and rear are separate 3D faces. */
.orbit-phone{overflow:visible;border:0;background:transparent;box-shadow:none;transform-style:preserve-3d;container-type:normal}
.orbit-phone-front{position:absolute;inset:0;border:6px solid #090b0e;border-radius:inherit;overflow:hidden;background:#090b0e;container-type:inline-size;transform:translateZ(calc(var(--phone-depth,7px) + .3px));backface-visibility:hidden;-webkit-backface-visibility:hidden}
.orbit-phone-back,.orbit-phone-back[data-visible="true"]{display:block;inset:0;transform:translateZ(calc(-1 * var(--phone-depth,7px))) rotateY(180deg);border:3px solid #111419;container-type:inline-size;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:inset 0 0 0 1px #e8edf7}
.phone-shell-layer{position:absolute;inset:0;border-radius:inherit;transform:translateZ(calc(var(--shell-offset) * var(--phone-depth,7px)));background:linear-gradient(105deg,#6c768e 0%,#d5dce9 8%,#8e9bb1 23%,#4e5b73 52%,#acb6c9 85%,#e2e8f2 97%);border:1px solid #8f9bb0;pointer-events:none;backface-visibility:visible}
.phone-shell-layer:nth-child(3n){border-color:#bbc5d5}
.phone-side-buttons{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none}
.phone-side-buttons i{position:absolute;width:calc(var(--phone-depth,7px) * 1.45);border:1px solid #23292f;border-radius:3px;background:linear-gradient(90deg,#66758d,#d0d9e6 45%,#8a9ab1);box-shadow:0 0 1px #162033}
.phone-power{left:100%;top:27%;height:12%;transform:translateX(-40%) rotateY(90deg)}
.phone-volume{left:0;transform:translateX(-60%) rotateY(90deg);height:7%}
.phone-volume.up{top:22%}.phone-volume.down{top:31%}
@media(max-width:800px){.orbit-phone-front{border-width:4px}.orbit-phone-back{border-width:2px}}

/* Scroll-driven studio reflections on glossy black glass, rails and raised optics. */
.orbit-phone-back{background:radial-gradient(ellipse at var(--reflection-x,50%) 22%,#ffffff38 0%,#ffffff0c 32%,transparent 62%),linear-gradient(var(--reflection-angle,115deg),#030405,#15191e 35%,#080a0d 65%,#020304);box-shadow:inset 1px 1px 1px #ffffff45,inset -2px -1px 3px #000c}
.orbit-phone-back::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(var(--reflection-angle,115deg),transparent 28%,#ffffff03 36%,#ffffff55 43%,#ffffff12 49%,transparent 58%);background-size:230% 150%;background-position:var(--reflection-x,50%) 50%;opacity:.7}
.phone-back-brand{color:#737a84;text-shadow:0 1px 0 #ffffff18}
.phone-shell-layer{background:linear-gradient(var(--reflection-angle,115deg),#030405 0%,#171b21 17%,#626c78 var(--metal-light,45%),#0b0e12 68%,#252c34 85%,#050608 100%);border-color:#1a1f25}
.phone-shell-layer:nth-child(3n){border-color:#353d47}
.phone-side-buttons i{background:linear-gradient(var(--reflection-angle,115deg),#080a0d,#59636e var(--metal-light,45%),#14191f);box-shadow:0 0 1px #000,inset 0 1px 1px #ffffff45}
.phone-camera-depth{position:absolute;inset:0;container-type:inline-size;pointer-events:none;transform:translateZ(calc(-1 * var(--phone-depth,7px) * (1 + var(--camera-rise)))) rotateY(180deg);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.phone-camera-depth .phone-cameras{background:linear-gradient(var(--reflection-angle,115deg),#343c46,#080b10 45%,#20262e 80%,#050709);box-shadow:inset 0 0 0 .5cqw #ffffff20;border:.4cqw solid #252c35}
.phone-camera-depth .phone-cameras i{background:conic-gradient(from 30deg,#66717f,#0a0e14,#303a47,#06090e,#737f8e);box-shadow:0 .4cqw .5cqw #0009}
.phone-camera-depth.lens-barrels .phone-cameras{background:none;border-color:transparent;box-shadow:none}
.phone-camera-depth.lens-barrels .phone-cameras>span{display:none}
.phone-camera-depth.lens-glass .phone-cameras i{background:radial-gradient(circle at var(--lens-light-x,30%) 24%,#f5fbff 0%,#b4d9ffb3 5%,transparent 14%),radial-gradient(circle at 64% 71%,#7175e9b3 0%,#22355566 14%,transparent 28%),radial-gradient(circle,#07111f 0%,#0a182a 25%,#243653 29%,#0b1020 40%,#426385 45%,#0b1222 51%,#101827 63%,#293440 66%,#737f8f 70%,#151c25 76%,#394553 84%,#0b1017 93%);box-shadow:inset 0 .4cqw .5cqw #e0f1ff99,0 .8cqw 1.2cqw #25334d88}
.phone-camera-depth.lens-glass .phone-cameras i::after{content:"";position:absolute;inset:13%;border-radius:50%;background:linear-gradient(var(--reflection-angle,115deg),transparent 20%,#ffffff35 39%,transparent 55%);border:.2cqw solid #7c9cbe55}

/* Gentle convergence of the hero pair, driven solely by page scroll. */
.hero-visual .phone-front{transform:translateX(var(--hero-drift,0px)) rotate(calc(-8deg + var(--hero-tilt,0deg)))}
.hero-visual .phone-back{transform:translateX(calc(-1 * var(--hero-drift,0px))) rotate(calc(9deg - var(--hero-tilt,0deg)))}
@media(prefers-reduced-motion:reduce){.hero-visual .phone-front{transform:rotate(-8deg)}.hero-visual .phone-back{transform:rotate(9deg)}}

/* Account entry and its hover/focus explanation. */
.login-menu{position:relative;display:inline-flex;z-index:20}
.header-actions .login{display:inline-flex;align-items:center;justify-content:center;padding:11px 18px;border:1px solid #6674b066;border-radius:9px;background:#ffffff55;color:var(--ink);font-weight:600;line-height:1.3;transition:background .18s,border-color .18s,box-shadow .18s}
.header-actions .login:hover,.header-actions .login:focus-visible{background:#ffffffc9;border-color:#4055ed88;box-shadow:0 3px 12px #26397212}
.login-tooltip{position:absolute;top:calc(100% + 12px);right:0;display:flex;align-items:center;gap:10px;width:max-content;max-width:285px;padding:12px 15px;border:1px solid #dce2f0;border-radius:12px;background:#fff;color:var(--ink);box-shadow:0 8px 24px #1b2a491c;font-size:12px;font-weight:500;line-height:1.4;opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .16s,transform .16s,visibility .16s;pointer-events:none}
.login-tooltip::before{content:"";position:absolute;left:0;right:0;top:-13px;height:13px}
.login-tooltip img{width:28px;height:28px;flex-shrink:0;border-radius:7px}
.login-menu:hover .login-tooltip,.login-menu:focus-within .login-tooltip{visibility:visible;opacity:1;transform:translateY(0);pointer-events:auto}
@media(max-width:430px){.header-actions .login-menu{display:none}}
@media(prefers-reduced-motion:reduce){.header-actions .login,.login-tooltip{transition:none}}

.download-qr-row{display:flex;align-items:center;gap:18px;margin-bottom:24px}
.download-qr{display:block;flex-shrink:0;padding:8px;background:white;border-radius:14px;box-shadow:0 8px 24px #18247326}
.download-qr img{width:120px;height:120px}
.download-qr-row strong{font-size:17px;font-weight:650}
.download-qr-row p{font-size:13px;line-height:1.6;color:#e0e5ff;margin-top:7px}
@media(max-width:800px){.download-qr-row{justify-content:center}}
@media(max-width:430px){.download-qr img{width:104px;height:104px}.download-qr-row{gap:14px}.download-qr-row strong{font-size:15px}.download-qr-row p{font-size:12px}}

/* Shared sticky navigation. The backdrop blurs the page, never the logo/text. */
:root { --site-header-height: 144px; }
html { scroll-padding-top: calc(var(--site-header-height) + 20px); }
body > .header {
  position: sticky;
  top: 0;
  z-index: 40;
  width: 100%;
  margin: 0;
  padding-inline: max(56px, calc((100% - 1280px) / 2));
  background: transparent;
}
.info-page .header { background: transparent; }
body > .header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: rgba(250, 251, 255, .97);
  box-shadow: 0 1px 0 rgba(64, 85, 237, .10), 0 6px 24px rgba(25, 32, 59, .06);
  opacity: 1;
  transition: opacity 180ms ease;
}
@supports ((backdrop-filter: blur(18px)) or (-webkit-backdrop-filter: blur(18px))) {
  body > .header::before {
    background: rgba(250, 251, 255, .78);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
  }
}
body > .header.header-enhanced:not(.is-scrolled)::before { opacity: 0; }
@media (max-width: 1100px) {
  :root { --site-header-height: 180px; }
  body > .header { padding-inline: 32px; }
}
@media (max-width: 800px) {
  :root { --site-header-height: 136px; }
  body > .header { padding-inline: 20px; }
}
/* The help sidebar and the existing sticky demo need their own space below
   navigation. Anchor scrolling uses the same height, including direct links. */
@media (min-width: 801px) {
  .info-layout aside {
    top: calc(var(--site-header-height) + 24px);
    max-height: calc(100svh - var(--site-header-height) - 48px);
    overflow-y: auto;
  }
}
.orbit-enabled > .orbit-view {
  top: var(--site-header-height);
  height: calc(100svh - var(--site-header-height));
  max-height: calc(100svh - var(--site-header-height));
}
@media (prefers-reduced-motion: reduce) {
  body > .header::before { transition: none; }
}
@media (forced-colors: active) {
  body > .header::before {
    background: Canvas;
    border-bottom: 1px solid CanvasText;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
@media print {
  body > .header { position: relative; }
  body > .header::before { display: none; }
  html { scroll-padding-top: 0; }
  .info-layout aside { max-height: none; overflow: visible; }
}

/* Keep decorative hero artwork inside the viewport without creating a scroll
   container around the sticky feature demo. Vertical overflow stays visible. */
body > main { overflow-x: clip; }

/* Mobile gets measured artwork and content slots, not a miniature desktop scene.
   The calendar itself remains; duplicated browser/brand chrome gives way to it. */
@media (max-width: 800px) {
  .orbit-view .producer-browser,
  .orbit-view .producer-top { display: none; }
  .orbit-view .producer-body { padding: 8px; }
  .orbit-view .producer-month { font-size: 12px; line-height: 1.3; }
  .orbit-view .producer-weekdays { font-size: 8px; line-height: 1.3; }
  .orbit-view .producer-day { height: 17px; font-size: 9px; line-height: 1.2; }
  .orbit-view .producer-legend { font-size: 8px; line-height: 1.3; }
  .orbit-view .producer-legend > span:last-child { max-width: 45%; text-align: right; }
  .orbit-view .availability-card { max-height: none; }
}
/* Small/short screens keep natural vertical scrolling and the original tabs.
   Choosing availability still reveals the recipient's calendar below the phone. */
.showcase-calendar-preview { width: min(100%, 360px); margin: 20px auto 0; }
.showcase-calendar-preview[hidden] { display: none; }

/* Cull the hidden handset face explicitly as well as using backface-visibility.
   WebKit can composite the rear's query container above the display. Visibility
   keeps the 3D chassis intact; do not flatten the rotating parent with opacity. */
.orbit-phone:not([data-face="back"]) > .orbit-phone-back,
.orbit-phone:not([data-face="back"]) > .phone-camera-depth,
.orbit-phone[data-face="back"] > .orbit-phone-front { visibility: hidden; }


/* Keep the larger brand and account actions clear on narrow screens. */
@media (max-width: 560px) {
  :root { --site-header-height: 192px; }
  body > .header { justify-content: center; }
  .header-actions { flex: 1 1 100%; justify-content: center; }
}
@media (max-width: 430px) {
  :root { --site-header-height: 184px; }
}


/* Compact sticky header: preserve the full brand at page top, then reduce chrome after scroll. */
body > .header,
body > .header .brand,
body > .header .brand img,
body > .header .brand-text,
body > .header .header-actions,
body > .header .button.small {
  transition: min-height 220ms ease, padding 220ms ease, gap 220ms ease,
              width 220ms ease, height 220ms ease, flex-basis 220ms ease,
              border-radius 220ms ease, font-size 220ms ease;
}
body > .header.is-scrolled {
  min-height: 76px;
  padding-block: 10px;
  gap: 8px 24px;
}
body > .header.is-scrolled .brand { gap: 10px; }
body > .header.is-scrolled .brand img {
  width: 48px;
  height: 48px;
  flex-basis: 48px;
  border-radius: 12px;
}
body > .header.is-scrolled .brand-text { font-size: 22px; }

@media (min-width: 801px) and (max-width: 1100px) {
  body > .header.is-scrolled { flex-wrap: nowrap; }
  body > .header.is-scrolled nav {
    order: initial;
    flex: 0 1 auto;
    justify-content: initial;
  }
}
@media (max-width: 800px) {
  body > .header.is-scrolled {
    min-height: 70px;
    padding-block: 8px;
  }
  body > .header.is-scrolled .brand img {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
    border-radius: 11px;
  }
  body > .header.is-scrolled .brand-text { font-size: 20px; }
  body > .header.is-scrolled .button.small { padding: 10px 14px; }
}
@media (max-width: 560px) {
  body > .header.is-scrolled {
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 10px;
  }
  body > .header.is-scrolled .header-actions {
    flex: 0 0 auto;
    width: auto;
    justify-content: flex-end;
  }
  body > .header.is-scrolled .login-menu { display: none; }
}
@media (max-width: 430px) {
  body > .header.is-scrolled {
    min-height: 66px;
    padding-block: 7px;
  }
  body > .header.is-scrolled .brand { gap: 8px; }
  body > .header.is-scrolled .brand img {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
    border-radius: 10px;
  }
  body > .header.is-scrolled .brand-text { font-size: 19px; }
  body > .header.is-scrolled .button.small {
    padding: 9px 12px;
    font-size: 13px;
  }
}
@media (prefers-reduced-motion: reduce) {
  body > .header,
  body > .header .brand,
  body > .header .brand img,
  body > .header .brand-text,
  body > .header .header-actions,
  body > .header .button.small { transition: none; }
}


/* Homepage product-positioning additions: independent freelancer workflow + producer portal. */
.workflow-intro{width:min(760px,100%);margin:-20px auto 26px}
.workflow-independence{font-size:14px!important;line-height:1.65!important;color:#59637d!important}
.workflow-independence strong{color:var(--ink);font-weight:650}
.workflow-intro .workflow-instruction{margin:10px 0 0!important}

.producer-section{position:relative;overflow:hidden;background:#19203b;color:#fff}
.producer-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(440px,.95fr);gap:clamp(55px,7vw,100px);align-items:center;padding-top:96px;padding-bottom:96px}
.producer-copy .eyebrow{color:#aeb9ff;margin-bottom:20px}
.producer-copy h2{color:#fff}
.producer-intro{max-width:590px;margin-top:23px;color:#d5daea;font-size:17px;line-height:1.75}
.producer-points{display:grid;gap:0;margin-top:32px;border-top:1px solid #ffffff24}
.producer-points>div{display:flex;gap:18px;align-items:flex-start;padding:18px 0;border-bottom:1px solid #ffffff24}
.producer-points>div>span{padding-top:2px;color:#aeb9ff;font-size:10px;letter-spacing:.1em;font-weight:650}
.producer-points strong{display:block;color:#fff;font-size:15px;font-weight:600}
.producer-points p{margin-top:3px;color:#aeb4c8;font-size:13px;line-height:1.55}
.producer-note{max-width:610px;margin-top:25px;padding:16px 18px;border-left:2px solid #7181ff;background:#ffffff0a;color:#c8cede;font-size:13px;line-height:1.65}
.producer-note strong{color:#fff}
.producer-link{width:max-content;margin-top:27px;color:#fff}
.producer-link:hover{color:#aeb9ff}
.portal-visual{min-width:0}
.portal-visual>p{margin-top:14px;text-align:center;color:#8992ae;font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.portal-browser{overflow:hidden;border:1px solid #ffffff25;border-radius:17px;background:#f8f9fe;color:#19203b;box-shadow:0 30px 70px #070b1d55;transform:rotate(1.5deg)}
.portal-browser-bar{height:43px;display:flex;align-items:center;gap:6px;padding:0 14px;border-bottom:1px solid #dfe3ef;background:#eef1f8}
.portal-browser-bar i{width:8px;height:8px;border-radius:50%;background:#b9c0d2}
.portal-browser-bar strong{margin-left:8px;color:#68718b;font-size:10px;font-weight:600}
.portal-shell{display:grid;grid-template-columns:112px 1fr;min-height:390px}
.portal-shell aside{display:flex;flex-direction:column;gap:7px;padding:19px 12px;background:#252d4b;color:#cfd5e9;font-size:9px}
.portal-shell aside b{display:grid;place-items:center;width:31px;height:31px;margin-bottom:12px;border-radius:9px;background:#655fe1;color:#fff;font-size:16px}
.portal-shell aside span{padding:7px 8px;border-radius:6px}
.portal-shell aside span:first-of-type{background:#ffffff13;color:#fff}
.portal-main{padding:28px 26px}
.portal-main>small{color:#6977bd;font-size:8px;letter-spacing:.12em;font-weight:700}
.portal-main h3{margin:3px 0 22px;font-size:23px}
.portal-date{display:flex;align-items:center;gap:13px;padding:13px;border:1px solid #e0e4ef;border-radius:11px;background:#fff}
.portal-date>span{width:43px;text-align:center;color:#68718c;font-size:7px;line-height:1.2}
.portal-date>span strong{display:block;color:#19203b;font-size:19px}
.portal-date>div{display:flex;flex:1;flex-direction:column;gap:2px}
.portal-date b,.portal-crew b{font-size:11px}
.portal-date small,.portal-crew small{color:#81899e;font-size:8px}
.portal-date em{font-style:normal;color:#5d68aa;font-size:8px}
.portal-crew{margin-top:14px;border:1px solid #e0e4ef;border-radius:11px;background:#fff}
.portal-crew>div{display:flex;align-items:center;gap:10px;padding:11px 12px;border-bottom:1px solid #edf0f6}
.portal-crew>div:last-child{border-bottom:0}
.portal-crew>div>span{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:#e8e7fb;color:#5b56d5;font-size:9px;font-weight:700}
.portal-crew p{display:flex;flex:1;flex-direction:column}
.portal-crew em{padding:4px 7px;border-radius:12px;background:#e3f6ea;color:#27824c;font-size:7px;font-style:normal;font-weight:650}
.portal-crew em.pencil{background:#f2e7fa;color:#8d48ae}
.portal-main>button{width:100%;margin-top:14px;padding:10px;border:1px dashed #c8cee0;border-radius:9px;background:transparent;color:#5d68aa;font:inherit;font-size:9px}
@media(max-width:900px){.producer-grid{grid-template-columns:1fr;gap:48px;padding-top:70px;padding-bottom:70px}.portal-visual{width:min(620px,100%);margin:auto}}
@media(max-width:560px){.workflow-intro{margin-top:-12px}.producer-grid{padding-top:58px;padding-bottom:58px}.producer-intro{font-size:16px}.portal-shell{grid-template-columns:78px 1fr;min-height:330px}.portal-shell aside{padding:15px 8px}.portal-main{padding:20px 15px}.portal-date{gap:8px;padding:10px}.portal-date em{display:none}}
@media(max-width:390px){.portal-shell{grid-template-columns:1fr}.portal-shell aside{display:none}}


/* Producer workspace browser demo: Productions → Crew → Shoot details. */
.producer-section .producer-grid{grid-template-columns:minmax(0,1fr) minmax(470px,1fr)}
.producer-section .producer-intro{max-width:620px}
.producer-section .producer-points{margin-top:27px}
.producer-section .producer-points>div{padding:14px 0}
.producer-section .producer-note{margin-top:21px}
.producer-section .producer-access-note{margin:8px 0 0;color:#fff;font-size:13px;line-height:1.6}
.producer-section .portal-browser{transform:rotate(1deg);background:#f7f8fd}
.portal-demo-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;padding:10px 12px;border-bottom:1px solid #e0e4ef;background:#f0f2f8}
.portal-demo-tabs button{min-height:34px;padding:6px 8px;border:0;border-radius:7px;background:transparent;color:#707991;font:inherit;font-size:9px;font-weight:600;cursor:pointer}
.portal-demo-tabs button[aria-selected=true]{background:#fff;color:#4f52ca;box-shadow:0 1px 5px #27325f12}
.portal-demo-tabs button:focus-visible{outline:2px solid #4055ed;outline-offset:1px}
.portal-demo-stage{position:relative;min-height:350px;background:#f8f9fd}
.portal-demo-panel{min-height:350px;padding:25px 25px 22px;color:#19203b}
.portal-demo-panel[hidden]{display:none}
.portal-demo-panel.is-active{animation:portal-demo-in .28s ease-out both}
.portal-demo-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:20px}
.portal-demo-heading small{display:block;color:#6977bd;font-size:7px;letter-spacing:.13em;font-weight:700}
.portal-demo-heading h3{margin:3px 0 0;font-size:20px;letter-spacing:-.035em}
.portal-demo-heading>span{flex:0 0 auto;padding:6px 8px;border-radius:7px;background:#e8e9fb;color:#5654c7;font-size:8px;font-weight:650}
.portal-production-list{display:grid;gap:9px}
.portal-production-list article{display:flex;align-items:center;gap:11px;padding:11px;border:1px solid #e0e4ef;border-radius:11px;background:#fff}
.portal-date-block{display:grid;place-items:center;flex:0 0 38px;min-height:42px;border-radius:8px;background:#eef0fb;color:#68718c;line-height:1}
.portal-date-block small{font-size:6px}
.portal-date-block strong{margin-top:3px;color:#19203b;font-size:16px}
.portal-production-list article>div:nth-child(2){display:flex;flex:1;min-width:0;flex-direction:column}
.portal-production-list b{font-size:10px}
.portal-production-list article>div:nth-child(2) small{overflow:hidden;color:#81899e;font-size:7px;text-overflow:ellipsis;white-space:nowrap}
.portal-production-list em{padding:4px 6px;border-radius:12px;background:#e3f6ea;color:#27824c;font-size:7px;font-style:normal;font-weight:650}
.portal-production-list em.pencil{background:#f2e7fa;color:#8d48ae}
.portal-search{display:flex;align-items:center;gap:7px;padding:10px 11px;border:1px solid #dfe3ef;border-radius:9px;background:#fff;color:#8a92a7;font-size:8px}
.portal-crew-results{margin-top:10px;border:1px solid #e0e4ef;border-radius:11px;background:#fff}
.portal-crew-results article{display:flex;align-items:center;gap:10px;padding:10px 11px;border-bottom:1px solid #edf0f6}
.portal-crew-results article:last-child{border-bottom:0}
.portal-crew-results article>span{display:grid;place-items:center;flex:0 0 29px;height:29px;border-radius:9px;background:#e8e7fb;color:#5b56d5;font-size:8px;font-weight:700}
.portal-crew-results article>div{display:flex;flex:1;min-width:0;flex-direction:column}
.portal-crew-results b{font-size:9px}
.portal-crew-results small{color:#81899e;font-size:7px}
.portal-crew-results em{padding:4px 6px;border-radius:12px;background:#eef0fb;color:#5d68aa;font-size:6px;font-style:normal;font-weight:650;white-space:nowrap}
.portal-demo-footnote{margin-top:9px!important;color:#8b93a8!important;font-size:7px!important;line-height:1.45!important}
.portal-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.portal-detail-grid>div{display:flex;min-height:66px;flex-direction:column;justify-content:center;padding:10px 11px;border:1px solid #e0e4ef;border-radius:10px;background:#fff}
.portal-detail-grid small{color:#8b93a8;font-size:6px;letter-spacing:.08em}
.portal-detail-grid b{margin-top:3px;font-size:9px}
.portal-update-card{display:flex;align-items:center;gap:12px;margin-top:12px;padding:12px;border-radius:10px;background:#e9eafb}
.portal-update-card>div{display:flex;flex:1;flex-direction:column}
.portal-update-card b{font-size:9px}
.portal-update-card small{color:#747d96;font-size:7px}
.portal-update-card>span{color:#5654c7;font-size:7px;font-weight:700}
@keyframes portal-demo-in{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:translateX(0)}}
@media(max-width:1000px){.producer-section .producer-grid{grid-template-columns:1fr;gap:48px}.producer-section .portal-visual{width:min(650px,100%);margin:auto}}
@media(max-width:560px){.portal-demo-stage,.portal-demo-panel{min-height:315px}.portal-demo-panel{padding:20px 15px}.portal-demo-heading h3{font-size:18px}.portal-production-list article{padding:9px}.portal-crew-results article{padding:9px}.producer-section .producer-points>div{padding:13px 0}}
@media(max-width:390px){.portal-demo-tabs{gap:3px;padding-inline:8px}.portal-demo-tabs button{padding-inline:4px;font-size:8px}.portal-detail-grid{grid-template-columns:1fr}.portal-detail-grid>div{min-height:48px}.portal-demo-stage,.portal-demo-panel{min-height:360px}.portal-production-list em{display:none}.portal-crew-results em{font-size:5px}}
@media(prefers-reduced-motion:reduce){.portal-demo-panel.is-active{animation:none}}