/* Phase 2: scoped additions. Existing Phase 1 component styles remain intact. */
.p2-section{--p2-line:rgba(153,185,223,.22);--p2-muted:#aebbcf;--p2-panel:#0b1421;--p2-ink:#edf4ff;scroll-margin-top:110px}
html body main>.p2-section{padding:76px 0}
.p2-section h2{font-family:var(--display-font);font-weight:700;font-size:clamp(32px,3.3vw,48px);line-height:1.1;letter-spacing:-.02em;text-transform:none;margin:17px 0 22px;color:var(--p2-ink)}
.p2-section-copy>p,.p2-comparison-intro>p{font-size:15px;line-height:1.85;color:var(--p2-muted);max-width:39ch}
.p2-reel-grid{display:grid;grid-template-columns:minmax(0,.87fr) minmax(0,1.65fr);gap:62px;align-items:center}
.p2-section-actions{display:flex;align-items:center;flex-wrap:wrap;gap:22px;margin-top:30px}
.p2-section-actions button{cursor:pointer}
.p2-text-link{font-size:12px;font-weight:600;line-height:1.6;display:inline-flex;gap:12px;align-items:center;color:var(--p2-ink);text-decoration:none}
.p2-text-link:hover{text-decoration:underline;text-underline-offset:5px}
.p2-reel-preview{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:space-between;aspect-ratio:16/10;width:100%;min-width:0;overflow:hidden;padding:32px;text-align:left;cursor:pointer;background:radial-gradient(ellipse at 88% 20%,#18395b 0%,transparent 62%),linear-gradient(145deg,#111c2b,#060d17);border:1px solid #739cc955;border-radius:24px;color:#eef5ff;box-shadow:inset 0 1px 0 #e0f0ff14,0 24px 70px #0002;transition:border-color .2s,box-shadow .2s}
.p2-reel-preview::after{content:'';position:absolute;width:60%;aspect-ratio:1;right:-18%;bottom:-40%;border:1px solid #81b7d72e;border-radius:50%;box-shadow:0 0 0 42px #7ba1bf06,0 0 0 84px #7ba1bf05;z-index:-1;pointer-events:none}
.p2-reel-preview:hover{border-color:#94c7ef99;box-shadow:inset 0 1px 0 #e0f0ff25,0 24px 70px #0003}
.p2-frame-top{display:flex;justify-content:space-between;gap:20px;align-items:center;width:100%;font-size:9px;letter-spacing:.13em;color:#a1b5cb}
.p2-poster-logo{width:min(195px,48%);height:auto;object-fit:contain}
.p2-reel-lockup{display:block;font-family:var(--display-font);font-size:clamp(42px,4.8vw,68px);font-weight:700;letter-spacing:-.018em;line-height:1.04;margin:24px 0;position:relative}
.p2-reel-lockup>span{color:#80b6df}
.p2-reel-footer{display:flex;gap:15px;align-items:center;width:100%}
.p2-play-circle{display:grid;place-items:center;flex:none;width:50px;height:50px;background:#2e5bff;border:1px solid #81a2ff77;border-radius:50%;box-shadow:inset 0 1px 0 #ffffff33}
.p2-play-circle svg{width:19px;height:19px;fill:#fff}
.p2-reel-invitation{font-size:13px;font-weight:600;line-height:1.5}
.p2-reel-invitation>small{display:block;font-weight:400;font-size:10px;color:#a6b6cb;margin-top:3px}
.p2-frame-index{margin-left:auto;font-size:9px;letter-spacing:.1em;color:#a6b6cb;white-space:nowrap}
.p2-custom-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1}
.p2-reel-preview:has(.p2-custom-poster:not([hidden])){background:#07101b}
.p2-reel-preview:has(.p2-custom-poster:not([hidden]))::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#03071055,#03071022 30%,#030710dd)}
.p2-reel-preview:has(.p2-custom-poster:not([hidden])) .p2-reel-lockup{visibility:hidden}
.p2-comparison-intro{display:grid;grid-template-columns:1.2fr 1fr;gap:60px;align-items:end;margin-bottom:34px}
.p2-comparison-intro h2{margin-bottom:0}
.p2-comparison-intro>p{justify-self:end;margin:0;max-width:43ch}
.p2-comparison-shell{border:1px solid var(--p2-line);border-radius:24px;overflow:hidden;background:var(--p2-panel)}
.p2-comparison-toolbar{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 26px;border-bottom:1px solid var(--p2-line)}
.p2-tabs{display:flex;gap:5px;padding:4px;border:1px solid var(--p2-line);border-radius:13px;background:#03091277}
.p2-tabs [role=tab]{border:1px solid transparent;border-radius:9px;appearance:none;padding:11px 16px;background:transparent;color:#aab9ce;font-family:Inter,'Segoe UI',sans-serif;font-size:12px;font-weight:600;line-height:1.5;cursor:pointer;transition:background .16s,border-color .16s,color .16s}
.p2-tabs [role=tab]>span{font-size:9px;font-weight:400;margin-left:9px;color:inherit;opacity:.78}
.p2-tabs [aria-selected=true]{background:#23364d;border-color:#83a9d357;color:#eff7ff;box-shadow:inset 0 1px 0 #ffffff10}
.p2-demo-note{font-size:10px;letter-spacing:.07em;color:var(--p2-muted)}
.p2-comparison-stage{aspect-ratio:16/7.8;display:grid;position:relative;overflow:hidden;background:#101824;color:#d6dde7}
.p2-comparison-empty{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:19px;padding:28px;text-align:center;background:linear-gradient(145deg,#17212d,#0c141e)}
.p2-placeholder-kicker{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:#9ba9bc}
.p2-placeholder-title{font-family:var(--display-font);font-weight:700;font-size:clamp(28px,4vw,52px);line-height:1.15;letter-spacing:-.018em;color:#d1d9e3}
.p2-placeholder-rule{display:block;width:56px;height:1px;background:#76879c}
.p2-placeholder-note{font-size:12px;line-height:1.6;color:#aab9c9}
.p2-comparison-panel[data-state=premium] .p2-comparison-empty{background:radial-gradient(ellipse at 80% 0%,#1c3a54 0%,transparent 75%),linear-gradient(145deg,#112235,#091423)}
.p2-comparison-panel[data-state=premium] .p2-placeholder-title{color:#c5e3f7}
.p2-comparison-panel[data-state=premium] .p2-placeholder-rule{background:#82b5dc}
.p2-comparison-stage>video,.p2-comparison-stage>img{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#03070c}
.p2-comparison-detail{display:grid;grid-template-columns:1.25fr 1fr;gap:60px;padding:30px 34px;border-top:1px solid var(--p2-line);color:var(--p2-ink)}
.p2-state-label{font-size:10px;letter-spacing:.1em;color:#94b1cf}
.p2-comparison-detail h3{font-family:var(--display-font);font-size:25px;font-weight:700;letter-spacing:-.012em;line-height:1.25;margin:9px 0 12px}
.p2-comparison-detail p{max-width:46ch;color:var(--p2-muted);font-size:13px;line-height:1.8}
.p2-comparison-detail ul{list-style:none;padding:0;display:grid;gap:11px;align-content:center;margin:0}
.p2-comparison-detail li{font-size:12px;line-height:1.7;color:var(--p2-muted);padding-left:18px;position:relative}
.p2-comparison-detail li::before{content:'';position:absolute;left:0;top:.7em;width:4px;height:4px;border-radius:50%;background:#718eab}
.p2-comparison-disclosure{padding:15px 34px 20px;border-top:1px solid var(--p2-line);font-size:10px!important;line-height:1.75!important;color:var(--p2-muted);margin:0}
html .showreel-dialog .dialog-body{padding:0;display:flex;flex-direction:column;gap:0}
html .showreel-dialog .dialog-body>h2{font-family:var(--display-font);font-size:clamp(24px,3vw,34px);font-weight:700;letter-spacing:-.015em;line-height:1.2;margin:20px 0 9px}
html .showreel-dialog .dialog-body>p{font-size:13px;line-height:1.7;color:#b1c0d3;margin:0;max-width:65ch}
html .showreel-dialog .dialog-body>video,html .showreel-dialog.video-dialog .dialog-body>iframe{display:block;flex:none;width:100%;max-width:none;aspect-ratio:16/9;height:auto;max-height:62dvh;object-fit:contain;border:0;border-radius:14px;background:#02060c}
.p2-modal-placeholder{display:flex;flex-direction:column;justify-content:space-between;aspect-ratio:16/9;width:100%;padding:30px;border:1px solid #739cc944;border-radius:14px;background:radial-gradient(ellipse at 90% 0%,#1a3a57,transparent 65%),#091320;color:#eff5ff}
.p2-modal-placeholder img{width:180px;height:auto}
.p2-modal-placeholder strong{font-family:var(--display-font);font-size:clamp(24px,4vw,44px);font-weight:700;letter-spacing:-.015em;line-height:1.15;display:block;margin-top:25px}
.p2-modal-placeholder p{font-size:12px;line-height:1.7;color:#b7cadc;max-width:40ch;margin-top:10px}
.p2-modal-actions{display:flex;gap:15px;align-items:center;flex-wrap:wrap;margin-top:23px}
.p2-modal-actions .btn{font-size:11px}
html.bright-mode .p2-section{--p2-line:rgba(55,89,125,.23);--p2-muted:#405872;--p2-panel:#f1f6fb;--p2-ink:#17314e}
html.bright-mode .p2-tabs{background:#dce7f1}
html.bright-mode .p2-tabs [role=tab]{color:#405872}
html.bright-mode .p2-tabs [aria-selected=true]{background:#fff;border-color:#7397b866;color:#153e69;box-shadow:0 2px 6px #3152720c}
html.bright-mode .p2-state-label{color:#3b648c}
html.bright-mode .showreel-dialog .dialog-body>p{color:#405872}
.p2-section :is(button,a,[role=tabpanel]):focus-visible,html .showreel-dialog :is(button,a):focus-visible{outline:2px solid #78c9ed;outline-offset:5px}
@media(max-width:1000px){.p2-reel-grid{gap:28px;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}.p2-reel-preview{padding:24px;aspect-ratio:4/3}.p2-frame-top{font-size:8px}.p2-frame-index{display:none}.p2-reel-lockup{font-size:44px}.p2-section-actions{gap:18px}.p2-comparison-intro{gap:30px}.p2-comparison-toolbar{padding:18px}.p2-comparison-detail{padding:26px;gap:30px}}
@media(max-width:700px){html body main>.p2-section{padding:58px 0}.p2-reel-grid{grid-template-columns:1fr;gap:30px}.p2-section h2{font-size:36px;line-height:1.12}.p2-section-copy>p,.p2-comparison-intro>p{font-size:14px;max-width:42ch}.p2-reel-preview{aspect-ratio:16/11;padding:22px}.p2-reel-lockup{font-size:44px;margin:22px 0}.p2-poster-logo{width:155px;max-width:55%}.p2-play-circle{width:42px;height:42px}.p2-reel-invitation{font-size:12px}.p2-comparison-intro{grid-template-columns:1fr;gap:20px}.p2-comparison-intro>p{justify-self:start}.p2-comparison-toolbar{padding:14px;display:block}.p2-tabs{width:100%}.p2-tabs [role=tab]{flex:1;padding:10px 6px;font-size:11px}.p2-tabs [role=tab]>span{display:block;margin:1px 0 0;font-size:9px}.p2-demo-note{display:none}.p2-comparison-stage{aspect-ratio:4/3}.p2-comparison-detail{grid-template-columns:1fr;gap:22px;padding:24px}.p2-comparison-detail h3{font-size:23px}.p2-comparison-disclosure{padding:16px 24px;font-size:10px!important}.p2-placeholder-title{font-size:31px}.p2-placeholder-note{font-size:11px}.p2-comparison-empty{gap:17px;padding:20px}.p2-modal-placeholder{aspect-ratio:4/3;padding:22px}.p2-modal-placeholder img{width:155px}.p2-modal-placeholder p{font-size:11px}.p2-modal-actions{margin-top:18px}html .showreel-dialog .dialog-body>h2{margin-top:18px}html .showreel-dialog .dialog-body>p{font-size:12px}}
@media(max-width:360px){.p2-section h2{font-size:32px}.p2-reel-preview{padding:19px}.p2-reel-lockup{font-size:38px}.p2-frame-top{gap:10px;font-size:7px}.p2-section-actions{gap:18px}.p2-section-actions>.btn{padding-inline:20px}.p2-modal-placeholder{padding:18px}.p2-modal-placeholder strong{font-size:25px}.p2-comparison-detail{padding:21px}.p2-comparison-disclosure{padding-inline:21px}}
@media(prefers-reduced-motion:reduce){.p2-section *,.showreel-dialog *{transition:none!important;animation:none!important}}

/* Outrank inherited generic section spacing only for the two new sections. */
html body main>section.p2-section:is(#showreel,#motion-comparison):not(#featured):not(#contact){padding-block:76px}
@media(max-width:700px){html body main>section.p2-section:is(#showreel,#motion-comparison):not(#featured):not(#contact){padding-block:58px}}

/* Blend the showreel glow into the adjacent page backgrounds without fading content. */
html body #showreel::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(180deg,var(--bg) 0%,transparent 40%,transparent 60%,var(--bg) 100%)}
html body #showreel>.wrap{position:relative;z-index:1}