/* Nurse AI Career Lab — independent cinematic membership demo. Scoped to /experience/. */
:root{--teal:#074b49;--deep:#042f32;--deep2:#052a30;--mint:#e6f3ee;--gold:#e0ba72;--gold2:#f5d998;--ink:#133f40;--muted:#597170;--border:#dce9e4;--paper:#fff;--serif:"Libre Baskerville",Georgia,serif;--sans:"DM Sans",system-ui,sans-serif}
[hidden]{display:none!important}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f6faf8;color:var(--ink);font:16px/1.6 var(--sans)}a{color:inherit}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{opacity:.6;cursor:default}img{max-width:100%}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #d8ad50;outline-offset:4px}em{font-style:normal;color:#dda852}h1,h2,h3,h4,p{margin-top:0}.skip-link{position:absolute;left:12px;top:-100px;z-index:999;color:white;background:#075f59;padding:12px 18px;border-radius:8px}.skip-link:focus{top:12px}
.experience-header{height:80px;padding:0 clamp(22px,5vw,90px);display:flex;justify-content:space-between;align-items:center;gap:20px;background:#fff;position:relative;z-index:20;border-bottom:1px solid #edf2ed}.brand-link{display:flex;align-items:center;color:#0d4c4d;font-weight:900;text-decoration:none;font-size:17px}.brand-link img{max-width:212px;max-height:57px;object-fit:contain}.experience-header nav{display:flex;gap:27px;align-items:center}.experience-header a{text-decoration:none;font-size:13px;font-weight:800}.experience-header .quiet-link{color:#355c5d}.experience-header .header-join{background:var(--teal);color:#fff;border-radius:11px;padding:12px 17px;transition:background .18s}.header-join:hover{background:#0a6661}
.cinema{position:relative;overflow:hidden;padding:72px clamp(18px,4vw,65px) 26px;background:radial-gradient(circle at 84% 25%,#0b625e 0%,#053b3f 40%,#04292f 85%);color:#fff}.cinema-glow{position:absolute;pointer-events:none;border-radius:50%;filter:blur(9px);opacity:.35}.cinema-glow-one{width:540px;height:540px;right:-190px;top:-230px;background:radial-gradient(circle,rgba(218,191,110,.22),transparent 67%)}.cinema-glow-two{width:500px;height:500px;left:-290px;bottom:-260px;background:radial-gradient(circle,rgba(16,163,153,.28),transparent 66%)}
.cinema-shell{position:relative;max-width:1390px;margin:auto;border:1px solid rgba(255,255,255,.13);border-radius:30px;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);box-shadow:0 35px 80px rgba(0,16,20,.25);background:#064347;min-height:606px}
.cinema-text{z-index:2;position:relative;align-self:stretch;padding:clamp(38px,5vw,75px) clamp(24px,4.5vw,70px) 42px;background:linear-gradient(145deg,#073f42 10%,#052d36 100%)}.eyebrow{font-size:11px;font-weight:900;letter-spacing:.16em;color:#0b6b61;display:flex;align-items:center;gap:10px;text-transform:uppercase}.eyebrow.light{color:var(--gold2)}.live-line{width:25px;height:2px;display:inline-block;background:var(--gold);flex:0 0 25px}.cinema-wordmark{font-size:12px;font-weight:800;letter-spacing:.21em;margin:26px 0 22px;color:#c5e3d9;display:flex;align-items:center;gap:9px}.wordmark-symbol{font-size:25px;color:var(--gold)}.cinema-text h1{font:700 clamp(39px,4.15vw,70px)/1.13 var(--serif);max-width:750px;letter-spacing:-.048em;margin:0 0 25px;color:#fff}.cinema-text h1 em{color:#f2cc85;font-style:italic}.cinema-text>p{color:#c8e4dc;max-width:520px;font-size:17px;line-height:1.8;margin-bottom:28px}.cinema-actions{display:flex;align-items:center;flex-wrap:wrap;gap:18px}.cta-main{display:inline-flex;align-items:center;justify-content:center;gap:14px;background:linear-gradient(120deg,#f5d99e,#dcad55);color:#153f3e;border:0;border-radius:12px;padding:16px 22px;min-height:55px;font-weight:900;font-size:14px;text-decoration:none;box-shadow:0 14px 25px rgba(1,20,20,.23);transition:transform .2s,box-shadow .2s}.cta-main:hover{transform:translateY(-2px);box-shadow:0 19px 35px rgba(1,20,20,.27)}.play-symbol{font-size:13px}.cta-text{border:0;background:transparent;color:#d5eae5;padding:10px 3px;font-size:13px;font-weight:800}.cta-text:hover{text-decoration:underline}
.cinema-playback{align-items:center;flex-wrap:wrap;gap:10px;margin-top:19px}.cinema-playback:not([hidden]){display:flex}.round-control{width:42px;height:42px;border:1px solid rgba(255,255,255,.28);border-radius:50%;background:rgba(255,255,255,.08);color:#fff;font-size:18px}.round-control:hover{background:rgba(255,255,255,.19)}.playback-status{font-size:12px;color:#d1e5dc;font-weight:700}.cinema-captions{margin-top:29px;max-width:580px;min-height:74px;border-left:2px solid #d5b47c;padding:2px 0 2px 18px}.caption-label{color:#d8b676;font-size:10px;letter-spacing:.14em;font-weight:900}.cinema-captions p{margin:5px 0;color:#d8ece4;font-size:13px;line-height:1.68}.cinema-progress{margin-top:18px;display:grid;grid-template-columns:repeat(4,1fr);gap:5px;max-width:440px}.cinema-progress span{height:3px;border-radius:4px;background:rgba(255,255,255,.2);overflow:hidden}.cinema-progress span.active{background:var(--gold)}.cinema-progress span.done{background:#68b7a5}
.cinema-visual{position:relative;min-height:620px;background:linear-gradient(120deg,#063a40,#16655c)}.cinema-photo{position:absolute;inset:0;background-image:url('/assets/nacl-hero-team.webp'),url('/assets/nacl-hero-team.jpg');background-size:cover;background-position:center;opacity:.8;filter:saturate(.85) contrast(1.06)}.visual-vignette{position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,42,40,.17),rgba(5,38,41,.71)),linear-gradient(90deg,rgba(7,54,50,.24),transparent)}.float-panel{position:absolute;min-width:232px;padding:19px 21px;background:rgba(5,56,58,.88);border:1px solid rgba(247,220,149,.41);border-radius:17px;box-shadow:0 22px 49px rgba(0,25,31,.28);backdrop-filter:blur(16px);display:flex;flex-direction:column;gap:3px;animation:panelHover 7s ease-in-out infinite}.float-panel-top{left:9%;top:15%;transform:rotate(-3deg)}.float-panel-bottom{right:6%;bottom:13%;transform:rotate(3deg);animation-delay:-2.7s}.float-kicker{font-size:10px;color:#f3ca7b;letter-spacing:.14em;font-weight:900}.float-panel strong{font-size:22px;line-height:1.3;color:white;letter-spacing:-.03em}.float-panel small{color:#d0e9df;font-size:11px}.panel-shine{position:absolute;top:-3px;right:-3px;width:12px;height:12px;border-radius:50%;background:var(--gold);box-shadow:0 0 20px var(--gold)}.float-ring{position:absolute;left:37%;top:39%;height:154px;width:154px;border-radius:50%;background:radial-gradient(circle,#167d73,#083e4a);border:1px solid rgba(232,214,156,.5);box-shadow:0 0 0 14px rgba(255,255,255,.065),0 0 0 36px rgba(254,255,255,.045),0 27px 45px rgba(0,18,21,.4);display:grid;place-items:center;animation:floatPulse 6s ease-in-out infinite}.float-ring span{font-size:49px;font-weight:900;letter-spacing:-.09em;color:#f8d58d}.float-ring i{position:absolute;width:8px;height:8px;border-radius:50%;background:#ecca83}.float-ring i:nth-of-type(1){left:-20px;top:25px}.float-ring i:nth-of-type(2){right:-20px;bottom:25px}.float-ring i:nth-of-type(3){right:12px;top:-17px}.vertical-label{position:absolute;right:9px;top:27px;writing-mode:vertical-rl;color:#e5eeeb;font-size:9px;letter-spacing:.22em;font-weight:900}
@keyframes floatPulse{50%{transform:translateY(-8px) scale(1.025)}}@keyframes panelHover{50%{translate:0 -9px}}.cinema-bottomline{max-width:1200px;margin:24px auto 0;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:16px 22px;font-size:10px;letter-spacing:.13em;font-weight:900;color:#b7d9d2}.gold-dot{height:5px;width:5px;border-radius:50%;background:#dcb267}.intro-transcript{max-width:1100px;margin:18px auto 0;color:#cde8e1;font-size:12px}.intro-transcript summary{cursor:pointer;text-align:center;font-weight:800}.intro-transcript p{max-width:840px;margin:12px auto;line-height:1.8}
.experience-main{scroll-margin-top:35px;background:#f7faf8}.journey-top{text-align:center;max-width:920px;padding:88px 20px 47px;margin:auto}.journey-top .eyebrow{justify-content:center}.journey-top h2{font:700 clamp(35px,4vw,58px)/1.23 var(--serif);letter-spacing:-.045em;margin:14px 0;color:#073f42}.journey-top h2 em{font-style:italic;color:#ae8139}.journey-top>p{font-size:17px;line-height:1.8;color:#54716c;max-width:730px;margin:0 auto}.journey-stats{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:9px;margin-top:27px}.journey-stats span{border:1px solid #d6e7df;border-radius:100px;padding:8px 15px;background:#fff;font-size:11px;font-weight:850;color:#3e605a}.journey-stats b{color:#af7b27;margin-right:6px}
.journey-body{max-width:1370px;margin:auto;padding:0 clamp(18px,4vw,50px) 90px}.choose-label{text-align:center;font-size:11px;letter-spacing:.17em;font-weight:900;color:#708581;margin:0 0 20px}.experience-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:17px}.experience-card{display:flex;flex-direction:column;align-items:flex-start;text-align:left;border:1px solid #dcebe3;background:white;border-radius:23px;padding:24px 22px;min-height:368px;box-shadow:0 16px 43px rgba(7,54,57,.045);color:var(--ink);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}.experience-card:hover,.experience-card:focus-visible{transform:translateY(-5px);border-color:#d0aa68;box-shadow:0 24px 48px rgba(8,61,61,.12)}.card-number{font-size:10px;letter-spacing:.12em;color:#98772e;font-weight:900}.card-illustration{height:125px;width:100%;position:relative;display:flex;align-items:center;justify-content:center;margin:19px 0 12px;border-radius:15px;background:radial-gradient(circle at 75% 18%,#e0f4ef,#edf8f3);overflow:hidden;color:#0e6661}.card-illustration i{font-style:normal}.fit-illustration i{height:68px;width:68px;border-radius:50%;background:#0d6763;color:#fff;display:grid;place-items:center;font-size:23px;font-weight:900;box-shadow:0 7px 25px #a8d2c7}.fit-illustration i+ i{margin-left:-11px;background:#d9ac58;color:#063f42}.fit-illustration span{position:absolute;right:15%;top:13%;font-size:32px}.resume-illustration{flex-direction:column;gap:9px}.resume-illustration i{height:8px;width:56%;background:#65aaa0;border-radius:9px}.resume-illustration i:nth-child(2){width:44%;opacity:.65}.resume-illustration i:nth-child(3){width:52%;opacity:.4}.resume-illustration span{position:absolute;right:15%;top:12%;font-size:42px;color:#a98035}.interview-illustration i{font-size:55px;font-weight:800;color:#0e6764}.interview-illustration span{margin-left:15px;font-size:62px;color:#c89e54}.board-illustration{gap:12px}.board-illustration i{width:50px;height:63px;display:grid;place-items:center;border-radius:11px;background:#0c655f;color:#fff;font-size:24px;box-shadow:0 9px 20px #cde6dd}.board-illustration i:nth-child(2){transform:translateY(-13px);background:#d5ad6a;color:#1f514d}.board-illustration i:nth-child(3){opacity:.7}.experience-card strong{font:700 19px/1.5 var(--serif);letter-spacing:-.025em;color:#0a4d49;min-height:61px}.experience-card small{font-size:13px;line-height:1.7;color:#5d7470;margin:10px 0 18px}.card-action{margin-top:auto;font-size:12px;display:flex;justify-content:space-between;align-items:center;width:100%;font-weight:900;color:#0d6b61;border-top:1px solid #e4eee8;padding-top:17px}.card-action b{font-size:19px}
.lab-screen{border-radius:25px;background:white;border:1px solid #dbe9e4;box-shadow:0 17px 52px rgba(9,54,52,.09);padding:20px clamp(17px,3vw,38px) 26px}.lab-bar{display:flex;align-items:center;justify-content:space-between;gap:15px}.back-button{border:0;background:none;color:#0c6a60;font-size:13px;font-weight:850;padding:12px}.back-button:hover{text-decoration:underline}.lab-indicator{font-size:10px;font-weight:900;letter-spacing:.08em;color:#917339}.lab-navigation{display:flex;flex-wrap:wrap;gap:8px;border-bottom:1px solid #e0eee7;padding:13px 0 20px}.lab-navigation button{border:1px solid #d6e7df;border-radius:10px;background:#f5faf7;color:#34635f;padding:11px 18px;font-size:12px;font-weight:850}.lab-navigation button[aria-current="page"]{background:#075550;border-color:#075550;color:#fff}.lab-content{padding:34px 0 25px;min-height:350px}.lab-heading .eyebrow{font-size:10px}.lab-heading h3{font:700 clamp(29px,3vw,43px)/1.23 var(--serif);letter-spacing:-.043em;color:#083e41;margin:10px 0 13px}.lab-heading p{max-width:750px;color:#55736c;font-size:15px;line-height:1.75}.lab-grid{display:grid;grid-template-columns:minmax(0,.87fr) minmax(0,1.13fr);gap:24px;align-items:start;margin-top:26px}.lab-panel{border:1px solid #dce9e3;background:#fbfdfb;border-radius:17px;padding:23px;min-width:0}.lab-panel h4{margin:0 0 7px;font:700 19px/1.45 var(--serif);color:#0b4848}.lab-panel>p{font-size:13px;color:#647b77;line-height:1.7}.choice-label{font-size:11px;letter-spacing:.09em;text-transform:uppercase;font-weight:900;color:#4f7771;margin:22px 0 9px;display:block}.option-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.option-button{min-height:68px;border:1px solid #d6e9e2;background:white;border-radius:12px;padding:13px;text-align:left;color:#265d59;font-size:12px;font-weight:850;transition:background .18s}.option-button.is-selected,.option-button[aria-pressed="true"]{background:#e1f2ec;border:2px solid #0a776e;padding:12px;color:#064e4b}.option-button:hover{border-color:#16a08b}.demo-primary{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--teal);color:#fff;border:none;border-radius:11px;padding:13px 18px;min-height:47px;font-size:13px;font-weight:900;margin-top:16px}.demo-primary:hover{background:#0a7269}.sample-panel{background:linear-gradient(160deg,#073f42,#0b6963);color:#fff;padding:22px;border-radius:16px;min-height:300px;position:relative;overflow:hidden}.sample-panel h4{font:700 22px/1.43 var(--serif);color:#fff;margin:13px 0}.sample-panel p{color:#d9ece5;font-size:13px;line-height:1.7}.sample-kicker{display:inline-block;color:#edcf91;font-size:10px;letter-spacing:.14em;font-weight:900}.sample-flag{border:1px solid rgba(255,255,255,.2);border-radius:8px;background:rgba(255,255,255,.09);padding:8px 11px;font-size:10px;color:#d3eae0;display:inline-block}.match-title{font:700 28px/1.3 var(--serif);letter-spacing:-.03em;color:white;margin:12px 0 13px}.matched-traits{display:flex;gap:7px;flex-wrap:wrap;margin:20px 0}.matched-traits span{background:rgba(255,255,255,.14);border-radius:100px;padding:6px 10px;font-size:10px;font-weight:800;color:#e7f8f0}.steps-box{border-top:1px solid rgba(255,255,255,.22);padding-top:16px;margin-top:18px}.steps-box strong{font-size:12px;color:#f3d08b}.steps-box p{margin:7px 0 0}.lab-note{background:#f6faf8;border-left:3px solid #d6ac62;padding:12px 14px;font-size:11px;line-height:1.68;color:#55706a;margin-top:18px}.lab-lower-actions{display:flex;align-items:center;justify-content:space-between;gap:14px;border-top:1px solid #e4efe8;padding-top:17px}.button-quiet{border:0;background:none;color:#0c7469;font-size:12px;font-weight:900;padding:10px}.small-join{font-size:12px;color:#906621;text-decoration:none;font-weight:900}.small-join:hover{text-decoration:underline}.demo-field{display:block;color:#285e57;font-weight:850;font-size:12px;margin:16px 0 7px}.demo-select,.demo-textarea{display:block;width:100%;border:1px solid #c7ded5;border-radius:10px;background:white;color:#224e4a;padding:12px 13px;font-size:14px;outline-offset:2px}.demo-select{height:49px}.demo-textarea{min-height:132px;resize:vertical;line-height:1.6}.resume-mode{display:flex;flex-wrap:wrap;gap:7px}.resume-mode button{border:1px solid #d8e9df;background:#fff;color:#30625b;border-radius:9px;padding:11px 12px;font-size:11px;font-weight:850}.resume-mode button[aria-pressed="true"]{background:#0b5b56;color:#fff;border-color:#0b5b56}.mock-paper{background:white;border-radius:10px;padding:21px;color:#315451;box-shadow:0 13px 40px rgba(0,0,0,.17);min-height:260px}.mock-paper .resume-header{border-bottom:2px solid #0d7065;padding-bottom:12px;display:flex;justify-content:space-between;gap:10px;align-items:start}.mock-paper h4{font:700 22px/1.3 var(--serif);color:#0a4646;margin:0}.mock-paper .resume-header small{font-size:9px;letter-spacing:.09em;color:#947235;font-weight:900}.mock-paper h5{color:#0c6a5e;font-size:10px;text-transform:uppercase;letter-spacing:.1em;margin:19px 0 8px}.mock-paper p,.mock-paper li{color:#395b55;font-size:12px;line-height:1.75}.mock-paper ul{padding-left:17px;margin:8px 0}.transform-label{font-size:10px;font-weight:900;color:#d5ba7f;letter-spacing:.1em}.transform-before,.transform-after{padding:11px 13px;border-radius:10px;font-size:12px;line-height:1.65}.transform-before{background:rgba(255,255,255,.1);color:#d5e8e1}.transform-after{background:rgba(223,252,235,.17);color:#f6e8c7;border:1px solid rgba(249,217,146,.32)}.transform-arrow{margin:8px;color:#eccd88;font-size:23px;text-align:center}.feedback-list{margin:15px 0;padding-left:20px}.feedback-list li{margin:12px 0;color:#e4f2ea;font-size:12px;line-height:1.7}.feedback-list strong{color:#f4d999}.sample-quote{padding:15px;border-left:3px solid #f2d08c;background:rgba(255,255,255,.09);color:#fff;font-size:12px;line-height:1.8}.sample-quote strong{color:#f5dda5}.board-opportunities{display:grid;gap:12px}.opportunity-sample{background:white;padding:16px;border:1px solid #dce9e3;border-radius:12px}.opportunity-sample strong{display:block;font:700 17px/1.5 var(--serif);color:#0b5550}.opportunity-sample small{font-size:11px;color:#657c76}.sample-tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}.sample-tags span{font-size:10px;border-radius:100px;background:#e7f3ed;padding:4px 9px;color:#336d62;font-weight:800}.sample-badge{font-size:10px;color:#9d7229;font-weight:900;letter-spacing:.1em}.tracker-timeline{display:grid;gap:14px;margin:18px 0}.tracker-step{display:flex;align-items:center;gap:12px;font-size:12px;font-weight:800;color:#d2eae3}.tracker-step i{width:31px;height:31px;display:grid;place-items:center;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.25);border-radius:50%;font-style:normal}.tracker-step.is-done i{background:#e3bf79;color:#163e3d;border-color:#e3bf79}
.finale{background:linear-gradient(125deg,#052d32,#0a5a56);border-radius:26px;margin:0 auto 90px;max-width:1240px;display:grid;grid-template-columns:170px 1fr;gap:22px;padding:65px 70px;color:white;position:relative;overflow:hidden}.finale:after{content:"";height:350px;width:350px;border-radius:50%;border:55px solid rgba(230,218,145,.06);position:absolute;right:-210px;bottom:-200px;pointer-events:none}.finale-orbit{height:125px;width:125px;background:rgba(255,255,255,.09);border:1px solid rgba(250,220,160,.26);border-radius:30px;display:grid;place-items:center;font-size:66px;color:#f2c777}.finale h2{font:700 clamp(26px,3.2vw,47px)/1.33 var(--serif);letter-spacing:-.045em;margin:16px 0}.finale h2 em{color:#edcc85;font-style:italic}.finale p{max-width:760px;font-size:15px;line-height:1.83;color:#d5eae3}.finale-actions{display:flex;gap:24px;align-items:center;flex-wrap:wrap;margin:23px 0}.finale-secondary{font-size:13px;color:#f0d393;font-weight:900;text-decoration:none}.finale-secondary:hover{text-decoration:underline}.finale small{color:#bed8d1;font-size:10px}.experience-footer{border-top:1px solid #e4ede8;display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;padding:28px clamp(20px,5vw,85px);font-size:11px;color:#6d857f;background:#fff}.experience-footer>a{font-weight:900;color:#0a625b;text-decoration:none;font-size:13px}.experience-footer nav{display:flex;gap:17px}.experience-footer nav a{color:#3a6860;font-weight:700;text-decoration:none}
@media(max-width:1160px){.cinema-shell{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}.cinema-text{padding:45px 38px 32px}.cinema-visual{min-height:610px}.cinema-text h1{font-size:clamp(40px,4.3vw,58px)}.float-panel{min-width:200px}.experience-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.experience-card{min-height:320px}.lab-grid{gap:15px}.finale{margin-left:22px;margin-right:22px}}
@media(max-width:850px){.cinema{padding-top:24px}.cinema-shell{grid-template-columns:1fr}.cinema-text{padding:45px 34px 38px}.cinema-text h1{font-size:clamp(36px,7vw,60px)}.cinema-visual{min-height:390px}.cinema-photo{background-position:center 35%}.float-panel-top{top:10%;left:9%}.float-panel-bottom{bottom:9%}.float-ring{left:40%;top:32%;height:126px;width:126px}.float-ring span{font-size:38px}.cinema-playback,.cinema-captions{max-width:650px}.lab-grid{grid-template-columns:1fr}.finale{grid-template-columns:1fr;padding:43px 35px}.finale-orbit{height:70px;width:70px;border-radius:18px;font-size:40px}.lab-panel{padding:20px}}
@media(max-width:575px){.experience-header{height:68px;padding:0 14px}.brand-link img{max-width:138px;max-height:45px}.experience-header nav{gap:7px}.experience-header .quiet-link{display:none}.experience-header .header-join{font-size:11px;padding:9px 12px}.cinema{padding:13px 10px 22px}.cinema-shell{border-radius:18px}.cinema-text{padding:29px 21px}.cinema-wordmark{margin:19px 0;font-size:10px}.cinema-text h1{font-size:clamp(33px,9vw,46px);line-height:1.17}.cinema-text>p{font-size:14px}.cinema-actions{gap:7px}.cta-main{width:100%;padding:14px 12px;min-height:53px}.cta-text{width:100%;text-align:center;padding:14px 0}.cinema-visual{min-height:285px}.float-panel{min-width:155px;padding:12px 13px;border-radius:12px}.float-panel strong{font-size:14px}.float-panel small,.float-kicker{font-size:8px}.float-panel-top{top:8%;left:5%}.float-panel-bottom{right:4%;bottom:10%}.float-ring{height:82px;width:82px;left:42%;top:39%}.float-ring span{font-size:26px}.vertical-label{font-size:7px}.cinema-bottomline{gap:8px;font-size:9px}.cinema-bottomline .gold-dot:nth-of-type(4){display:none}.cinema-progress{margin-top:12px}.journey-top{padding:55px 22px 30px}.journey-top h2{font-size:35px}.journey-top>p{font-size:14px}.journey-stats span{font-size:10px;padding:7px 9px}.journey-body{padding:0 14px 55px}.experience-cards{grid-template-columns:1fr;gap:11px}.experience-card{min-height:0;padding:17px 19px}.card-illustration{height:95px;margin:12px 0}.experience-card strong{min-height:0;font-size:18px}.experience-card small{margin:6px 0 12px}.lab-screen{padding:11px 15px}.lab-bar{flex-direction:column;align-items:flex-start;gap:0}.lab-navigation{display:grid;grid-template-columns:repeat(2,1fr)}.lab-navigation button{padding:9px 7px}.lab-content{padding:25px 0}.lab-heading h3{font-size:28px}.option-list{grid-template-columns:1fr}.option-button{min-height:51px}.lab-lower-actions{align-items:flex-start;flex-direction:column}.sample-panel{padding:17px}.finale{margin:0 13px 55px;padding:35px 24px;border-radius:20px}.finale h2{font-size:30px}.experience-footer{justify-content:center;text-align:center}.lab-panel{padding:16px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}


/* v2 playback: each timed chapter changes the visual composition.
   Never rely on a narration resource to drive scene motion. */
.cinema-visual{isolation:isolate}
.cinema-photo{transition:filter 1.1s ease,opacity 1.1s ease,transform 1.1s ease,background-position 1.1s ease}
.cinema[data-scene="0"] .cinema-photo{transform:scale(1);filter:saturate(.85) contrast(1.06)}
.cinema[data-scene="1"] .cinema-photo{transform:scale(1.12) translateX(-2%);filter:saturate(1.08) contrast(1.14);opacity:.72}
.cinema[data-scene="2"] .cinema-photo{transform:scale(1.16) translateX(4%);filter:saturate(.55) contrast(1.2) hue-rotate(13deg);opacity:.47}
.cinema[data-scene="3"] .cinema-photo{transform:scale(1.06);filter:grayscale(.42);opacity:.43}
.cinema-visual-moment{
 position:absolute;z-index:4;left:7%;bottom:8%;max-width:min(70%,350px);
 padding:17px 19px;background:rgba(3,49,53,.91);color:white;
 border:1px solid rgba(246,210,138,.34);border-radius:14px;
 box-shadow:0 19px 45px rgba(0,22,25,.23);backdrop-filter:blur(12px);
 display:flex;flex-direction:column;gap:5px;
}
.cinema-visual-moment>span{font-size:9px;letter-spacing:.14em;font-weight:900;color:#f4d18d}
.cinema-visual-moment>strong{font:700 clamp(17px,1.7vw,24px)/1.33 var(--serif);letter-spacing:-.025em}
.cinema-visual-moment>small{font-size:11px;line-height:1.5;color:#d0e9e2}
.cinema[data-scene="0"] .cinema-visual-moment{opacity:0;pointer-events:none}
.cinema .moment-enter{animation:cinemaMomentReveal .85s cubic-bezier(.2,.7,.2,1) both}
@keyframes cinemaMomentReveal{from{opacity:0;transform:translateY(25px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
.cinema[data-scene="1"] .float-panel-top,
.cinema[data-scene="2"] .float-panel-top,
.cinema[data-scene="3"] .float-panel-top{top:11%}
.cinema-progress span{position:relative;overflow:hidden}
.cinema-progress span.active{background:rgba(255,255,255,.25)}
.cinema-progress span.active:after{content:"";display:block;position:absolute;left:0;top:0;bottom:0;
 width:var(--scene-progress,0%);background:#f4ce86;border-radius:inherit;transition:width .15s linear}
.cinema-progress span.done{background:#80cbbb}
@media(max-width:850px){
 .cinema-visual-moment{bottom:7%;left:5%;max-width:62%;padding:13px 14px}
 .cinema-visual-moment>strong{font-size:17px}
 .cinema-visual-moment>small{font-size:10px}
}
@media(max-width:575px){
 .cinema-visual-moment{max-width:54%;padding:11px 12px;border-radius:9px}
 .cinema-visual-moment>strong{font-size:13px}
 .cinema-visual-moment>span{font-size:8px}
 .cinema-visual-moment>small{font-size:9px}
 .cinema[data-scene="1"] .float-panel-top,.cinema[data-scene="2"] .float-panel-top,.cinema[data-scene="3"] .float-panel-top{top:6%}
}
@media(prefers-reduced-motion:reduce){
 .cinema-photo{transition:none}
 .cinema .moment-enter{animation:none}
 .cinema-progress span.active:after{transition:none}
}

/* Playback clarity and unobtrusive visual changes */
.cinema-playback .playback-time{
 margin-left:auto;font-variant-numeric:tabular-nums;
 color:#f4d18d;font-size:12px;letter-spacing:.06em;font-weight:900;
}
.cinema[data-scene="0"] .cinema-visual-moment.moment-enter{animation:none;opacity:0}
@media(max-width:575px){.cinema-playback .playback-time{font-size:11px;flex-basis:100%;margin-left:0}}


/* v3 cinematic trailer: six distinct product shots, physical motion, and audible sound controls. */
.cinema{background:radial-gradient(circle at 84% 14%,#0e7870 0%,#074649 32%,#04292f 88%)}
.cinema-shell{min-height:630px;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr)}
.cinema-text{display:flex;flex-direction:column;justify-content:center;min-height:615px}
.cinema-text h1{font-size:clamp(37px,3.8vw,62px);line-height:1.17;margin-bottom:22px}
.cinema-text>p{margin-bottom:22px}
.cinema .eyebrow.light{color:#f5d38b}
.cinema[data-scene="1"] .cinema-photo,.cinema[data-scene="2"] .cinema-photo,
.cinema[data-scene="3"] .cinema-photo,.cinema[data-scene="4"] .cinema-photo,
.cinema[data-scene="5"] .cinema-photo{opacity:.14;filter:saturate(.2) blur(3px)}
.cinema .cinema-visual-moment{display:none}
.cinema .float-panel,.cinema .float-ring{display:none}
.cinema-product-scenes{position:absolute;inset:0;z-index:7;display:grid;place-items:center;padding:clamp(15px,2.4vw,34px);overflow:hidden;
 background:radial-gradient(circle at 65% 22%,rgba(3,91,91,.06),transparent 66%);
 transition:background .6s ease}
.cinema[data-scene="1"] .cinema-product-scenes{background:radial-gradient(circle at 50% 10%,#2f7c70,#054247 73%)}
.cinema[data-scene="2"] .cinema-product-scenes{background:radial-gradient(circle at 50% 20%,#26766d,#063e42 75%)}
.cinema[data-scene="3"] .cinema-product-scenes{background:radial-gradient(circle at 50% 10%,#285a69,#073a43 76%)}
.cinema[data-scene="4"] .cinema-product-scenes{background:radial-gradient(circle at 50% 10%,#287569,#083b40 75%)}
.cinema[data-scene="5"] .cinema-product-scenes{background:radial-gradient(circle at 50% 18%,#15776a,#06373e 78%)}
.cinema-product-scenes::before{content:"";position:absolute;right:-12%;top:12%;height:260px;width:260px;border-radius:50%;
 border:1px solid rgba(254,217,135,.2);box-shadow:0 0 0 32px rgba(255,255,255,.018),0 0 0 74px rgba(255,255,255,.018);
 animation:trailerHalo 7s ease-in-out infinite alternate;pointer-events:none}
@keyframes trailerHalo{from{transform:rotate(-10deg) scale(.92)}to{transform:rotate(18deg) scale(1.12)}}
.cinema-product-canvas{width:100%;max-width:555px;position:relative;z-index:2;transform-origin:center;will-change:transform}
.cinema-product-canvas.story-enter{animation:trailerSceneArrive .68s cubic-bezier(.18,.72,.25,1) both}
@keyframes trailerSceneArrive{from{opacity:0;transform:translateX(35px) translateY(17px) scale(.956);filter:blur(4px)}to{opacity:1;transform:translateX(0) translateY(0) scale(1);filter:blur(0)}}
.story-teaser{position:relative;min-height:525px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:19px;
 background:linear-gradient(180deg,rgba(3,48,50,.04),rgba(2,36,40,.25));text-align:center;padding:20px 4px}
.story-label{letter-spacing:.15em;font-size:11px;font-weight:900;color:#f6d68e;text-transform:uppercase;text-shadow:0 2px 12px rgba(0,0,0,.2)}
.story-symbol{display:flex;align-items:center;gap:19px;margin:25px 0}
.story-symbol span{width:115px;height:115px;border:2px solid rgba(255,233,171,.54);border-radius:27px;background:rgba(5,67,65,.88);
 box-shadow:0 17px 40px rgba(0,27,31,.5),inset 0 0 25px rgba(245,225,151,.09);
 font-size:clamp(40px,4vw,61px);font-weight:900;letter-spacing:-.08em;color:#f2d38b;display:grid;place-items:center;
 animation:teaserPop 2s ease-in-out infinite alternate}
.story-symbol span:last-child{animation-delay:-1s;background:rgba(10,113,102,.87)}
.story-symbol b{color:#fff;font-size:35px;font-weight:400;opacity:.85}
@keyframes teaserPop{to{transform:translateY(-9px);box-shadow:0 27px 65px rgba(0,27,31,.45),inset 0 0 27px rgba(245,225,151,.15)}}
.story-teaser strong{color:#fff;font-size:clamp(18px,2.1vw,31px);line-height:1.35;font-weight:900;letter-spacing:.035em;max-width:420px}
.story-teaser small{color:#d7f1e8;font-size:13px;line-height:1.6}
.story-ui-window{width:100%;max-width:530px;margin:auto;background:#fbfdfb;color:#0b4847;border-radius:18px;
 border:1px solid rgba(223,211,156,.73);padding:0 22px 22px;box-shadow:0 32px 75px rgba(0,20,24,.34),0 0 0 12px rgba(255,255,255,.05);
 transform:rotate(-1deg);overflow:hidden}
.story-window-bar{margin:0 -22px 20px;padding:14px 21px;background:#073f42;display:flex;gap:9px;justify-content:space-between;align-items:center}
.story-window-bar span{font-size:12px;font-weight:900;letter-spacing:.05em;color:#fcf3d8}
.story-window-bar i{font-style:normal;color:#f3d495;font-size:9px;letter-spacing:.1em;font-weight:900;text-align:right}
.story-overline{font-size:10px;letter-spacing:.15em;font-weight:900;color:#9b7029;margin:8px 0 15px}
.story-chip-row{display:flex;gap:9px;flex-wrap:wrap}
.story-chip-row span{background:#e6f3ed;border:1px solid #bce0d0;border-radius:9px;font-size:12px;font-weight:800;padding:8px 11px;color:#15635c;
 animation:shotPill .55s ease both}
.story-chip-row span:nth-child(2){animation-delay:.22s}
.story-chip-row span:nth-child(3){animation-delay:.42s}
@keyframes shotPill{from{opacity:0;transform:translateY(19px)}to{opacity:1;transform:translateY(0)}}
.story-arrowline{font-size:11px;text-align:center;color:#a17c40;font-weight:900;margin:15px 0;letter-spacing:.1em}
.story-highlight{background:linear-gradient(110deg,#0b665e,#064549);border-radius:14px;color:white;padding:21px 23px;
 box-shadow:0 12px 35px rgba(5,72,67,.19);display:flex;flex-direction:column;gap:7px;animation:shotHighlight .9s .45s both}
@keyframes shotHighlight{from{opacity:0;transform:scale(.93) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}
.story-highlight span{font-size:10px;letter-spacing:.1em;color:#f3d490;font-weight:900}
.story-highlight strong{font:700 clamp(22px,2.3vw,31px)/1.25 var(--serif);letter-spacing:-.04em;color:#fff}
.story-highlight small{font-size:12px;color:#d2eee4}
.story-subline{color:#52736e;font-size:12px;font-weight:800;margin-top:20px}
.story-transform{display:grid;grid-template-columns:minmax(0,1fr) 37px minmax(0,1fr);gap:7px;align-items:stretch}
.story-before,.story-after{border-radius:11px;padding:17px 15px;min-height:210px;display:flex;flex-direction:column;gap:13px}
.story-before{background:#f0f3f1;border:1px solid #d9e4de}
.story-after{background:#e3f4eb;border:2px solid #4eae92;animation:shotHighlight .85s .4s both}
.story-before span,.story-after span{font-size:10px;letter-spacing:.08em;color:#966e2e;font-weight:900}
.story-before p,.story-after p{font-size:clamp(12px,1.4vw,16px);font-weight:800;color:#204b49;line-height:1.55;margin:0}
.story-before p{font-weight:650;color:#677c74}
.story-after p{color:#0a5d56}
.story-transform-arrow{display:grid;place-items:center;font-size:31px;color:#ba8a3f;animation:shotPoint .85s ease-in-out infinite alternate}
@keyframes shotPoint{to{transform:translateX(6px)}}
.story-question{border-radius:13px;border:1px solid #cfe7de;background:#e7f3f0;padding:20px;margin:9px 0 14px}
.story-question span,.story-answer span{color:#9a722c;font-size:10px;font-weight:900;letter-spacing:.11em}
.story-question p{font:700 clamp(16px,1.55vw,20px)/1.45 var(--serif);color:#164c4a;margin:9px 0 0}
.story-answer{background:linear-gradient(120deg,#0b655f,#084447);color:#fff;border-radius:12px;padding:19px 20px;display:flex;flex-direction:column;gap:7px;animation:shotHighlight .8s .35s both}
.story-answer span{color:#f3d58e}
.story-answer strong{font-size:clamp(13px,1.5vw,18px);line-height:1.5;color:#fff}
.story-answer small{font-size:11px;color:#cee8df}
.story-workflow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.story-workflow>div{display:flex;flex-direction:column;gap:5px;border:1px solid #cde2d9;background:#eaf7f1;border-radius:12px;
 padding:15px;min-height:105px;animation:shotPill .55s both}
.story-workflow>div:nth-child(2){animation-delay:.2s}
.story-workflow>div:nth-child(3){animation-delay:.36s}
.story-workflow>div:nth-child(4){animation-delay:.5s}
.story-workflow span{font-size:10px;font-weight:900;color:#ac792d}
.story-workflow strong{font-size:14px;color:#0b5c54}
.story-workflow small{font-size:11px;color:#66827a}
.story-finale{min-height:480px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px}
.story-mark{width:105px;height:105px;display:grid;place-items:center;border-radius:27px;border:1px solid rgba(243,205,130,.7);
 color:#eed28b;font-size:65px;background:rgba(9,116,101,.44);box-shadow:0 0 0 13px rgba(255,255,255,.07);
 animation:teaserPop 1.8s ease-in-out infinite alternate}
.story-finale strong{font-size:clamp(23px,2.6vw,39px);font-weight:900;letter-spacing:.02em;color:white;line-height:1.2}
.story-finale p{font-size:12px;color:#f3d48b;font-weight:900;letter-spacing:.14em;margin:0}
.story-finale small{font-size:14px;color:#d4f0e5}
.story-finale-arrow{font-size:31px;color:#f6d897;animation:shotPoint 1s alternate infinite}
.cinema-audition{margin:18px 0 2px;display:flex;gap:14px 23px;align-items:center;flex-wrap:wrap;color:#d9eee7}
.cinema-audition label{display:flex;gap:9px;align-items:center;flex-wrap:wrap;font-weight:850;font-size:11px}
.cinema-audition select{background:#0b5756;border:1px solid rgba(238,211,142,.45);color:#fff;border-radius:8px;padding:7px 11px;font-size:11px}
.cinema-audition input[type="range"]{width:115px;accent-color:#e4bd76;cursor:pointer}
.cinema-audition span{color:#edcd89;font-weight:900;min-width:30px;text-align:right}
.cinema-playback .playback-status{font-size:11px;min-width:170px}
.cinema-playback .round-control{border-color:rgba(244,213,146,.55);background:rgba(255,255,255,.08)}
.cinema-progress{grid-template-columns:repeat(6,1fr);gap:6px}
.cinema-progress span.active:after{background:#edc77d}
.cinema[data-scene="0"] .cinema-photo{opacity:.74}
.cinema[data-scene="0"] .cinema-product-scenes{background:linear-gradient(180deg,rgba(5,58,57,.27),rgba(0,31,35,.58))}
.cinema:not(.music-is-playing) .music-beat-indicator{animation:none}
.cinema .story-ui-window{animation:trailerFloat 5s ease-in-out infinite alternate}
@keyframes trailerFloat{to{transform:translateY(-9px) rotate(.7deg)}}
#cinemaTitle.title-pop{animation:cinemaHeadlineIn .6s ease both}
#cinemaDescription.desc-pop{animation:cinemaHeadlineIn .6s .14s both}
@keyframes cinemaHeadlineIn{from{opacity:.3;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.cinema[data-scene="4"] .story-window-bar,.cinema[data-scene="3"] .story-window-bar{background:#074a4d}
@media(max-width:1150px){
 .cinema-shell{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .cinema-text{min-height:620px}
 .cinema-visual{min-height:620px}
 .story-teaser{min-height:510px}
 .story-symbol span{width:86px;height:86px;font-size:42px}
 .story-transform{grid-template-columns:1fr 26px 1fr}
 .story-before,.story-after{padding:13px 11px;min-height:190px}
}
@media(max-width:850px){
 .cinema-shell{grid-template-columns:1fr}
 .cinema-text{min-height:0;padding:37px 28px 32px}
 .cinema-visual{min-height:500px}
 .cinema-text h1{font-size:clamp(36px,6vw,58px)}
 .cinema-product-scenes{padding:24px}
 .story-teaser{min-height:440px}
 .story-finale{min-height:440px}
 .cinema-audition{margin:17px 0 5px}
}
@media(max-width:575px){
 .cinema-text{padding:30px 20px 24px}
 .cinema-text h1{font-size:clamp(33px,8vw,45px)}
 .cinema-audition{gap:11px}
 .cinema-audition label{font-size:10px}
 .cinema-audition input[type=range]{width:100px}
 .cinema-visual{min-height:382px}
 .cinema-product-scenes{padding:12px}
 .story-teaser{min-height:365px;gap:10px}
 .story-symbol{gap:8px;margin:9px 0}
 .story-symbol span{height:79px;width:79px;font-size:37px;border-radius:17px}
 .story-symbol b{font-size:22px}
 .story-teaser strong{font-size:20px}
 .story-ui-window{padding:0 13px 15px;border-radius:12px}
 .story-window-bar{margin:0 -13px 15px;padding:11px 12px}
 .story-window-bar span{font-size:10px}
 .story-window-bar i{font-size:7px}
 .story-overline{font-size:8px;margin:4px 0 11px}
 .story-chip-row{gap:5px}
 .story-chip-row span{padding:5px 7px;font-size:10px}
 .story-arrowline{font-size:8px;margin:10px 0}
 .story-highlight{padding:13px}
 .story-highlight strong{font-size:19px}
 .story-highlight small{font-size:10px}
 .story-subline{font-size:10px;margin-top:12px}
 .story-transform{grid-template-columns:1fr 20px 1fr;gap:3px}
 .story-before,.story-after{padding:11px 8px;min-height:165px;gap:8px}
 .story-before span,.story-after span{font-size:8px}
 .story-before p,.story-after p{font-size:11px}
 .story-transform-arrow{font-size:20px}
 .story-question{padding:12px;margin:6px 0 10px}
 .story-question p{font-size:14px}
 .story-answer{padding:13px}
 .story-answer strong{font-size:12px}
 .story-workflow{gap:7px}
 .story-workflow>div{min-height:80px;padding:9px}
 .story-workflow strong{font-size:12px}
 .story-workflow small{font-size:9px}
 .story-finale{min-height:360px}
 .story-mark{width:70px;height:70px;font-size:45px;border-radius:18px}
 .story-finale strong{font-size:23px}
 .story-finale p{font-size:9px}
}
@media(prefers-reduced-motion:reduce){
 .cinema .story-ui-window,.cinema-product-canvas.story-enter,.story-mark,.story-symbol span,.story-chip-row span,
 .story-highlight,.story-workflow>div,.story-answer,.story-transform-arrow,.cinema-product-scenes::before,
 #cinemaTitle.title-pop,#cinemaDescription.desc-pop,.story-finale-arrow{animation:none!important}
}


/* v4 — The end of the trailer is an invitation, never an automatic page jump.
   Separate full-canvas finale keeps the emotional payoff on screen until click. */
.cinema-shell{isolation:isolate}
.cinema .cinema-endcard[hidden]{display:none!important}
.cinema.is-endcard .cinema-shell{display:block;min-height:650px}
.cinema.is-endcard .cinema-text,
.cinema.is-endcard .cinema-visual{display:none}
.cinema.is-endcard .cinema-bottomline,
.cinema.is-endcard .intro-transcript{opacity:0;visibility:hidden;pointer-events:none}
.cinema.is-leaving{opacity:0;transform:translateY(-12px);transition:opacity .34s ease,transform .34s ease}
.cinema-endcard{
  position:absolute;inset:0;z-index:60;display:grid;place-items:center;
  isolation:isolate;padding:clamp(23px,3.5vw,48px);
  color:#fff;text-align:center;overflow:hidden;
  background:radial-gradient(circle at 50% 20%,#0c726d 0%,#064a4a 36%,#042d35 85%);
  animation:endcardReveal .85s cubic-bezier(.16,.7,.24,1) both;
}
@keyframes endcardReveal{
  from{opacity:0;filter:brightness(.7)}
  to{opacity:1;filter:brightness(1)}
}
.endcard-glow{position:absolute;border:1px solid rgba(244,215,157,.22);
  border-radius:50%;pointer-events:none;z-index:-1}
.endcard-glow-one{
  width:480px;height:480px;top:-310px;left:-170px;
  box-shadow:0 0 0 60px rgba(248,226,159,.034),0 0 0 150px rgba(249,238,184,.022);
}
.endcard-glow-two{
  width:530px;height:530px;right:-290px;bottom:-370px;
  box-shadow:0 0 0 60px rgba(248,226,159,.045),0 0 0 145px rgba(247,228,165,.024);
}
.endcard-content{position:relative;z-index:2;max-width:940px;width:100%;
  display:flex;align-items:center;flex-direction:column;gap:0;
}
.endcard-brand{display:flex;align-items:center;justify-content:center;gap:14px;
  margin:0 0 18px;font-size:11px;letter-spacing:.19em;font-weight:900;color:#e6f4ee}
.endcard-star{height:64px;width:64px;border-radius:18px;
  display:grid;place-items:center;background:rgba(248,222,164,.075);
  border:1px solid rgba(241,205,126,.52);color:#f2d08c;font-size:40px;
  box-shadow:0 0 0 10px rgba(255,255,255,.025),0 14px 45px rgba(0,31,33,.23);
}
.endcard-kicker{font-size:11px;letter-spacing:.16em;color:#f1ca82;font-weight:900;margin:0 0 17px}
.cinema-endcard h2{font:700 clamp(31px,4vw,58px)/1.28 var(--serif);
  letter-spacing:-.044em;color:white;margin:0 auto 18px;max-width:860px;
  text-wrap:balance}
.cinema-endcard h2 em{color:#f3cd82;font-style:italic}
.cinema-endcard p{color:#d1e8e1;font-size:clamp(13px,1.35vw,17px);
  line-height:1.8;max-width:640px;margin:0 auto 22px}
.endcard-actions{display:flex;flex-direction:column;align-items:center;gap:9px;width:100%}
.endcard-primary{min-width:290px;min-height:60px;
  background:linear-gradient(118deg,#f9dfa8,#e1b15e);font-size:16px;
  animation:endcardCTAIn .8s .25s both}
@keyframes endcardCTAIn{from{opacity:0;transform:translateY(13px)}to{opacity:1;transform:translateY(0)}}
.endcard-free{color:#d0e5dd;font-size:11px;font-weight:750}
.endcard-replay{border:1px solid rgba(231,213,156,.35);
  margin-top:5px;border-radius:11px;padding:10px 16px;
  background:rgba(255,255,255,.055);color:#f1deaf;
  font-size:12px;font-weight:800;transition:background .2s}
.endcard-replay:hover{background:rgba(255,255,255,.14)}
.endcard-replay span{font-size:17px;margin-right:7px}
.endcard-capabilities{display:flex;flex-wrap:wrap;justify-content:center;
  gap:7px 14px;margin-top:25px}
.endcard-capabilities span{color:#c7e3d9;font-size:10px;
  letter-spacing:.07em;text-transform:uppercase;font-weight:850}
.endcard-capabilities span+span:before{content:"✦";color:#f1cc85;margin-right:13px}
.cinema-endcard button:focus-visible,.cinema-endcard h2:focus-visible{outline:3px solid #f4d08a;outline-offset:5px}
/* Make the resume-before/after moment more memorable without changing its sample claims. */
.story-resume .story-after{position:relative;overflow:hidden}
.story-resume .story-after:after{
  content:"";position:absolute;top:0;bottom:0;left:-70%;
  width:42%;transform:skewX(-21deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
  animation:resumeGlint 1.1s .58s ease-out both;pointer-events:none}
@keyframes resumeGlint{to{left:135%}}
@media(max-width:850px){
  .cinema.is-endcard .cinema-shell{min-height:690px}
  .cinema-endcard h2{font-size:clamp(31px,6vw,48px)}
}
@media(max-width:575px){
  .cinema.is-endcard .cinema-shell{min-height:680px}
  .cinema-endcard{padding:26px 20px}
  .endcard-brand{flex-direction:column;gap:9px;font-size:10px;letter-spacing:.14em;margin-bottom:17px}
  .endcard-star{height:53px;width:53px;font-size:32px;border-radius:14px}
  .endcard-kicker{font-size:9px;margin-bottom:14px}
  .cinema-endcard h2{font-size:clamp(29px,8vw,39px);line-height:1.36;margin-bottom:14px}
  .cinema-endcard p{font-size:13px;margin-bottom:18px}
  .endcard-primary{width:100%;min-width:0;font-size:14px}
  .endcard-free{font-size:10px}
  .endcard-capabilities{gap:8px 12px;margin-top:21px}
  .endcard-capabilities span{font-size:9px}
  .endcard-capabilities span+span:before{margin-right:10px}
}
@media(prefers-reduced-motion:reduce){
  .cinema-endcard,.endcard-primary,.story-resume .story-after:after{animation:none!important}
  .cinema.is-leaving{transition:none}
}


/* v5 — consumer-facing trailer: Play + Skip only. All audio decisions stay backstage. */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;
  margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;border:0!important}
.cinema-text{gap:0}
.cinema-text>.eyebrow{margin-bottom:19px}
.cinema-text #cinemaTitle{max-width:680px}
.cinema-text #cinemaDescription{max-width:510px}
.cinema-text .cinema-actions{margin-top:3px;gap:14px}
.cinema-text #startExperience{font-size:15px;min-width:205px;justify-content:center}
.cinema-text #skipExperience{font-size:13px;color:#d5e7dd;text-decoration:underline;text-decoration-color:rgba(245,214,143,.32);text-underline-offset:5px}
.cinema-text #skipExperience:hover{color:#f2d292;text-decoration-color:#f2d292}
.cinema-text .cinema-captions{margin-top:46px;max-width:565px;min-height:82px;padding-left:19px}
.cinema-text .caption-label{font-size:10px}
.cinema-text #cinemaCaption{font-size:14px;line-height:1.75}
@media(max-width:850px){
 .cinema-text>.eyebrow{margin-bottom:16px}
 .cinema-text .cinema-captions{margin-top:30px}
}
@media(max-width:575px){
 .cinema-text .cinema-actions{flex-direction:column;align-items:stretch;gap:5px}
 .cinema-text #startExperience{width:100%;min-width:0}
 .cinema-text #skipExperience{width:100%;text-align:center;padding:12px}
 .cinema-text .cinema-captions{margin-top:24px;min-height:0}
}
/* Promotional job-board beat: a realistic window, with sample categories clearly labelled. */
.story-jobboard{transform:rotate(-.5deg)}
.story-job-search{display:flex;align-items:center;justify-content:space-between;
 gap:9px;background:#f5faf7;border:1px solid #bedbd0;border-radius:11px;
 min-height:47px;padding:10px 13px;margin:0 0 13px}
.story-job-search span{font-size:12px;color:#53736c;font-weight:800}
.story-job-search b{font-size:10px;color:#12665d;padding:6px 8px;border-radius:7px;background:#deeee5;white-space:nowrap}
.story-job-rows{display:grid;gap:9px}
.story-job-row{display:flex;justify-content:space-between;align-items:center;gap:9px;
 background:#fff;border:1px solid #d5e7dd;border-radius:11px;padding:13px 15px;
 box-shadow:0 5px 13px rgba(13,64,58,.055);animation:shotPill .6s .15s both}
.story-job-row:nth-child(2){animation-delay:.45s}
.story-job-row strong{display:block;color:#0b514d;font-size:14px;line-height:1.35;margin-bottom:5px}
.story-job-row small{font-size:10px;color:#5c7a71;line-height:1.4}
.story-job-row>span{white-space:nowrap;color:#af7d2e;font-size:11px;font-weight:900}
.story-job-foot{display:flex;align-items:center;justify-content:space-between;gap:9px;flex-wrap:wrap;margin-top:13px}
.story-job-foot span{font-size:10px;line-height:1.5;color:#58776e;max-width:265px}
.story-job-foot strong{font-size:10px;white-space:nowrap;color:#a37830}
.board-benefit-pills{display:flex;gap:7px;flex-wrap:wrap;margin:11px 0 17px}
.board-benefit-pills span{font-size:10px;color:#0b7168;font-weight:850;
 padding:7px 9px;border-radius:100px;background:#e3f5ec;border:1px solid #c4e9d6}
@media(max-width:575px){
 .story-jobboard{padding-bottom:13px}
 .story-job-search{min-height:37px;padding:7px 8px;gap:5px}
 .story-job-search span{font-size:10px}
 .story-job-search b{font-size:9px;padding:4px 6px}
 .story-job-row{padding:10px 9px}
 .story-job-row strong{font-size:12px}
 .story-job-row small{font-size:9px}
 .story-job-row>span{font-size:9px}
 .story-job-foot span{max-width:none;font-size:9px}
 .story-job-foot strong{font-size:10px}
}
@media(prefers-reduced-motion:reduce){
 .story-job-row{animation:none}
}


/* Responsive mobile theater for Android Chrome and iPhone Safari.
   On tapping Play, the moving trailer becomes the FIRST thing in view.
   It works even when the demo is embedded in an iframe on the membership page. */
.mobile-trailer-controls{display:none}
.mobile-trailer-controls[hidden]{display:none!important}
@media (max-width:850px){
 .cinema.is-mobile-playing{padding-top:0!important;padding-bottom:0!important}
 .cinema.is-mobile-playing .cinema-shell{
   display:block!important;min-height:0!important;
   overflow:hidden;border-radius:16px;
 }
 .cinema.is-mobile-playing .cinema-text{display:none!important}
 .cinema.is-mobile-playing .cinema-visual{
   width:100%;min-height:460px!important;
   height:78vh;height:78svh;
   max-height:680px;
   overflow:hidden;
 }
 .cinema.is-mobile-playing .cinema-product-scenes{
   inset:0;display:grid;align-items:center;
   padding:38px 13px 88px;
 }
 .cinema.is-mobile-playing .story-teaser{
   min-height:0;
   padding:20px 0;
 }
 .cinema.is-mobile-playing .story-finale{min-height:0}
 .cinema.is-mobile-playing .mobile-trailer-controls{
   display:block!important;
   position:absolute;inset:0;pointer-events:none;
   z-index:35;
 }
 .cinema.is-mobile-playing .mobile-trailer-skip{
   position:absolute;top:11px;right:11px;z-index:36;
   pointer-events:auto;
   border:1px solid rgba(238,219,159,.5);
   border-radius:100px;padding:7px 12px;
   background:rgba(3,43,46,.84);
   color:#f6e4b1;font-size:11px;font-weight:850;
   line-height:1.4;
   backdrop-filter:blur(10px);
   -webkit-backdrop-filter:blur(10px);
 }
 .cinema.is-mobile-playing .mobile-trailer-skip:focus-visible{outline:3px solid #f1d18d;outline-offset:3px}
 .cinema.is-mobile-playing .mobile-trailer-captions{
   position:absolute;left:11px;right:11px;bottom:12px;
   z-index:36;pointer-events:none;
   border-radius:11px;padding:9px 13px 10px;
   background:rgba(2,34,39,.91);
   color:#ecf8f4;border:1px solid rgba(244,211,143,.33);
   box-shadow:0 8px 26px rgba(0,12,15,.35);
   backdrop-filter:blur(8px);
   -webkit-backdrop-filter:blur(8px);
 }
 .cinema.is-mobile-playing .mobile-trailer-captions span{
   display:block;font-size:9px;letter-spacing:.14em;font-weight:900;color:#efd087;
 }
 .cinema.is-mobile-playing .mobile-trailer-captions p{
   margin:4px 0 0;font-size:12px;font-weight:650;line-height:1.5;color:#f5faf6;
 }
 .cinema.is-mobile-playing .story-ui-window{
   margin:0 auto;
   box-shadow:0 14px 35px rgba(1,17,23,.29);
 }
}
@media (max-width:420px){
 .cinema.is-mobile-playing .cinema-visual{min-height:440px!important;height:76vh;height:76svh}
 .cinema.is-mobile-playing .cinema-product-scenes{padding:35px 9px 100px}
 .cinema.is-mobile-playing .mobile-trailer-captions p{font-size:11px}
 .cinema.is-mobile-playing .story-teaser strong{font-size:18px}
}
@media (max-width:360px){
 .cinema.is-mobile-playing .cinema-visual{min-height:420px!important}
 .cinema.is-mobile-playing .story-symbol span{height:65px;width:65px;font-size:32px}
 .cinema.is-mobile-playing .story-job-row{padding:7px}
}
@media (prefers-reduced-motion:reduce){
 .cinema.is-mobile-playing .cinema-visual{scroll-behavior:auto}
}