/* Pod Protector: side-view ocean adventure, using the shared brand and glass UI. */
.pod-page { --pod-cyan:#7ae9f0; --pod-lilac:#c7b6ff; --mint:#91f0ec; background:radial-gradient(ellipse at 100% 40%,#123b5d5c,transparent 45%),#04182b; }
.pod-hero { position:relative; isolation:isolate; overflow:hidden; margin-top:-96px; padding-top:96px; background:#033d72; }
.pod-hero-still,.pod-hero-video { position:absolute; z-index:-3; inset:0; width:100%; height:100%; object-fit:cover; object-position:64% center; }
.pod-hero-video { opacity:0; transition:opacity .8s; }
.pod-hero-video.is-playing { opacity:1; }
.pod-hero::before { content:""; position:absolute; z-index:-2; inset:0; background:linear-gradient(90deg,#03182ff5,#032a48e6 25%,#03233e9e 48%,#032c4b0d 80%),linear-gradient(0deg,#04182b,transparent 28%,transparent 75%,#04182bb0); }
.pod-hero::after { content:""; position:absolute; z-index:-1; inset:0; background:radial-gradient(ellipse at 50% 0,#93fdff18,transparent 60%); }
.pod-hero-inner { position:relative; display:flex; align-items:center; min-height:620px; padding-block:55px; }
.pod-hero-copy { position:relative; z-index:2; width:58%; }
.pod-hero-copy .overline { margin:0 0 23px; color:#a5edf0; font-size:9px; letter-spacing:.17em; }
#pod-title { font:500 clamp(45px,5.7vw,80px)/1.08 var(--font-brand); letter-spacing:-.045em; margin:0 0 23px; }
#pod-title > span { display:block; }
#pod-title > span:not(.pod-title-prefix) { background:linear-gradient(#f8ffff 10%,#c5f9ff 55%,#75bddd); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:0 0 35px #5dd6fc10; }
#pod-title .pod-title-prefix { font:300 13px var(--font-brand); color:#9ccde5; letter-spacing:.42em; margin-bottom:13px; }
.pod-tagline { font-size:25px; letter-spacing:-.025em; line-height:1.35; margin:0 0 18px; color:#e2f7ff; font-weight:500; }
.pod-hero-description { max-width:410px; font-size:14px; line-height:1.9; color:#b4d3e4; margin:0 0 26px; }
.pod-hero .hero-actions { gap:12px; }
.pod-hero .glass-btn { padding:16px 21px; font-size:13px; }
.glass-btn svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linejoin:round; }
.pod-release-note { display:flex; align-items:center; gap:8px; color:#b3cddd; font-size:10px; line-height:1.6; margin:20px 0 0; }
.pod-release-note > span,.character-status > span { width:5px; height:5px; border-radius:50%; background:var(--pod-lilac); box-shadow:0 0 10px #baadf880; }
.pod-release-note i { font-style:normal; color:#6b98ae; }
.pod-hero-callout { position:absolute; right:8%; bottom:20%; display:flex; align-items:center; gap:15px; color:#d3f9ff; font-size:13px; line-height:1.5; letter-spacing:.03em; text-shadow:0 1px 10px #002550; }
.sonar-mark { display:block; position:relative; width:56px; height:56px; border:1px solid #b2fbff66; border-radius:50%; background:#3af0ff07; }
.sonar-mark::before,.sonar-mark::after { content:""; position:absolute; inset:8px; border:1px solid #b2fbff55; border-radius:50%; }
.sonar-mark::after { inset:18px; background:#b2fbff70; box-shadow:0 0 20px #b2fbff80; border:0; }
.pod-hero-caption { position:relative; display:flex; align-items:center; justify-content:space-between; gap:20px; padding-block:15px 45px; color:#a3ccd9; font-size:9px; text-transform:uppercase; letter-spacing:.13em; }
.pod-motion-button { display:flex; align-items:center; gap:9px; min-height:36px; padding:8px 13px; border-radius:50px; font:400 10px var(--font-readable); color:#cce7f0; cursor:pointer; }
.pod-motion-button[hidden] { display:none; }
.motion-icon { font-size:13px; width:13px; text-align:center; }
.pod-facts { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; padding:25px 30px; border-radius:17px; margin-top:-14px; z-index:3; }
.pod-facts > div { display:flex; align-items:center; gap:16px; border-left:1px solid #b2e3e626; padding-left:25px; }
.pod-facts > div:first-child { border:0; padding:0; }
.pod-fact-icon { color:#98dee9; font-size:29px; width:28px; text-align:center; }
.pod-facts p { margin:0; line-height:1.5; }
.pod-facts strong { display:block; font-size:12px; font-weight:500; }
.pod-facts p span { display:block; color:#98bacf; font-size:10px; margin-top:6px; }
.pod-intro { display:grid; grid-template-columns:1.2fr 1fr; align-items:start; gap:80px; padding-block:100px 90px; }
.pod-intro h2 { font-size:clamp(28px,3vw,40px); line-height:1.25; max-width:650px; }
.pod-intro-copy { padding-top:17px; }
.pod-intro-copy p { margin:0 0 17px; color:#a9c9dc; font-size:14px; line-height:1.9; }
.pod-development { padding-bottom:95px; }
.pod-development .section-heading > p { max-width:340px; }
.pod-video-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:21px; }
.pod-film { border-radius:17px; overflow:hidden; background:linear-gradient(145deg,#0f3958,#08263e); }
.pod-film-frame { position:relative; background:#063459; aspect-ratio:16/9; }
.pod-film-frame video { position:relative; display:block; width:100%; height:100%; aspect-ratio:16/9; object-fit:contain; }
.film-label { position:absolute; left:12px; top:12px; padding:6px 9px; border:1px solid #b5e3ff3b; border-radius:5px; background:#062139cc; color:#ceecff; font-size:8px; letter-spacing:.05em; pointer-events:none; }
.pod-film-frame:has(video[data-started]) .film-label { display:none; }
.pod-film-copy { padding:21px 23px 26px; }
.film-meta { display:flex; align-items:center; justify-content:space-between; gap:10px; color:#8cc5d8; font-size:8px; letter-spacing:.12em; }
.film-meta > span:last-child { color:#adcbdc; letter-spacing:0; }
.pod-film h3 { margin:15px 0 12px; font-size:20px; font-weight:500; letter-spacing:-.02em; line-height:1.35; text-wrap:balance; }
.pod-film p { margin:0; color:#aacbde; font-size:13px; line-height:1.85; }
.pod-footage-note { color:#769bb2; font-size:10px; line-height:1.6; margin:17px 0 0; }
.pod-encounter { display:grid; grid-template-columns:1.45fr 1fr; align-items:center; gap:50px; padding-bottom:95px; }
.encounter-image { position:relative; border-radius:18px; overflow:hidden; border:1px solid #b7eaff33; box-shadow:0 20px 55px #00112170; }
.encounter-image img { width:100%; aspect-ratio:16/10; object-fit:cover; }
.image-caption { position:absolute; bottom:15px; left:15px; padding:9px 12px; border-radius:8px; font-size:9px; color:#ddf7ff; background:#072d45ab; }
.encounter-copy .overline { font-size:8px; }
.encounter-copy h2 { font-size:clamp(28px,3vw,40px); }
.encounter-copy > p:not(.overline) { color:#abcbdc; font-size:14px; line-height:1.85; margin:20px 0 0; }
.text-link { display:inline-flex; align-items:center; gap:20px; margin-top:22px; padding:6px 0 9px; border-bottom:1px solid #8af4df66; color:#adf3f6; font-size:12px; }
.text-link:hover { color:white; }
.pod-dumu { display:grid; grid-template-columns:1.1fr 1fr; align-items:center; min-height:435px; padding:55px 65px; border-radius:23px; overflow:hidden; background:radial-gradient(ellipse at 78% 45%,#574b8a55,transparent 60%),linear-gradient(120deg,#10304b,#102b45); }
.dumu-copy { position:relative; z-index:2; }
.dumu-copy > p:not(.overline) { max-width:410px; color:#b4cfe1; font-size:14px; line-height:1.85; margin:22px 0 20px; }
.character-status { display:inline-flex; align-items:center; gap:8px; padding:9px 12px; color:#c1c3ed; font-size:10px; border:1px solid #b4aafc33; border-radius:40px; background:#a99cf609; }
.dumu-art { position:relative; min-height:330px; display:grid; place-items:center; }
.dumu-art > img { position:relative; z-index:1; width:76%; max-height:350px; object-fit:contain; transform:rotate(-20deg); filter:drop-shadow(0 10px 30px #6694db40); }
.dumu-rings { position:absolute; inset:0 5%; border-radius:50%; border:1px solid #c2c0fa29; box-shadow:inset 0 0 75px #b6a2f211; }
.dumu-rings::before { content:""; position:absolute; inset:20px -20px; border:1px solid #c2c0fa14; border-radius:50%; }
.dumu-art-caption { position:absolute; bottom:-8px; right:3%; color:#acb9d6; font-size:8px; letter-spacing:.1em; text-transform:uppercase; }
.pod-rhythm { padding-block:95px; }
.pod-moments { display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.pod-moments figure { margin:0; }
.pod-moments figure > img { width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:15px; border:1px solid #b3e2f630; }
.pod-moments figcaption { padding:22px 4px 0; }
.pod-moments figcaption > span { color:#9fcddc; font:300 8px var(--font-brand); letter-spacing:.15em; }
.pod-moments h3 { margin:13px 0 11px; font-size:24px; font-weight:500; letter-spacing:-.02em; }
.pod-moments p { max-width:490px; color:#a6c7d9; font-size:14px; line-height:1.85; margin:0; }
.pod-outro { position:relative; isolation:isolate; overflow:hidden; padding:65px 30px 50px; border-radius:24px; border:1px solid #a7dfe633; text-align:center; background:linear-gradient(#052744b3,#041c33f2),url('/assets/podprotector/pod-together.jpg') center/cover; }
.pod-status { display:inline-block; padding:8px 14px; border-radius:50px; font-size:10px; color:#d7cffc; border-color:#ada3ec55; }
.pod-outro h2 { font-size:clamp(32px,4.2vw,52px); margin:24px 0 0; }
.pod-outro > p { color:#bbd6e5; font-size:15px; line-height:1.8; margin:23px 0 27px; }
.outro-cove { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:7px 14px; margin-top:35px; font-size:11px; line-height:1.5; color:#8eafc4; }
.outro-cove a { color:#c1eee8; border-bottom:1px solid #8ef3df44; padding-bottom:4px; }
@media(max-width:1000px) {
 .pod-hero-inner { min-height:650px; padding-block:50px; } .pod-hero-copy { width:66%; } #pod-title { font-size:64px; } .pod-hero-callout { right:4%; bottom:13%; }
 .pod-facts { padding:22px; gap:15px; } .pod-facts > div { padding-left:17px; gap:12px; } .pod-facts p span { font-size:9px; }
 .pod-intro { gap:40px; } .pod-video-grid { gap:15px; } .pod-film-copy { padding:18px; } .pod-film h3 { font-size:18px; } .film-meta { font-size:7px; letter-spacing:.07em; }
 .pod-encounter { gap:30px; grid-template-columns:1.2fr 1fr; } .pod-dumu { padding:40px; }
}
@media(max-width:700px) {
 .pod-hero { margin-top:-80px; padding-top:80px; }
 .pod-hero-still,.pod-hero-video { object-position:26% center; }
 .pod-hero::before { background:linear-gradient(90deg,#031b32f0,#032844bb 60%,#032c4b50),linear-gradient(0deg,#04182b,transparent 50%,#04182b55); }
 .pod-hero-inner { min-height:0; padding:40px 0 50px; }
 .pod-hero-copy { width:100%; }
 .pod-hero-copy .overline { font-size:8px; letter-spacing:.12em; margin-bottom:22px; }
 #pod-title { font-size:clamp(39px,10.2vw,65px); margin-bottom:22px; letter-spacing:-.05em; } #pod-title .pod-title-prefix { font-size:10px; letter-spacing:.35em; margin-bottom:13px; }
 .pod-tagline { font-size:23px; } .pod-hero-description { font-size:14px; max-width:390px; margin-bottom:25px; }
 .pod-hero .glass-btn { padding:15px 18px; font-size:12px; }
 .pod-release-note { font-size:9px; flex-wrap:wrap; gap:7px; }
 .pod-hero-callout { display:none; }
 .pod-hero-caption { padding:0 0 37px; font-size:7px; letter-spacing:.06em; gap:10px; }
 .pod-motion-button { font-size:9px; min-height:34px; padding:7px 10px; }
 .pod-facts { grid-template-columns:1fr; gap:17px; padding:20px 22px; }
 .pod-facts > div,.pod-facts > div:first-child { border:0; padding:0; gap:16px; } .pod-facts p span { font-size:10px; margin-top:3px; }
 .pod-intro { grid-template-columns:1fr; gap:14px; padding-block:60px; } .pod-intro h2 { font-size:32px; } .pod-intro-copy { padding:0; } .pod-intro-copy p:last-child { margin-bottom:0; }
 .pod-video-grid { grid-template-columns:1fr; gap:22px; }
 .pod-film-copy { padding:22px; } .pod-film h3 { font-size:22px; } .pod-film p { font-size:14px; } .film-meta { font-size:8px; }
 .pod-footage-note { font-size:9px; margin-top:20px; } .pod-development { padding-bottom:60px; }
 .pod-encounter { grid-template-columns:1fr; gap:25px; padding-bottom:60px; } .encounter-image img { aspect-ratio:16/10; } .encounter-copy h2 { font-size:32px; }
 .image-caption { left:10px; bottom:10px; font-size:8px; padding:8px 10px; }
 .pod-dumu { grid-template-columns:1fr; padding:25px; gap:20px; } .dumu-art { grid-row:1; min-height:300px; } .dumu-art > img { width:74%; max-height:290px; } .dumu-art-caption { bottom:0; } .dumu-copy .overline { font-size:9px; }
 .pod-rhythm { padding-block:60px; } .pod-moments { grid-template-columns:1fr; gap:32px; } .pod-moments h3 { font-size:23px; } .pod-moments figcaption { padding-top:17px; }
 .pod-outro { padding:42px 20px 35px; } .pod-outro h2 { font-size:33px; } .pod-outro > p { font-size:14px; }
 .pod-outro .glass-btn { font-size:12px; padding:15px 18px; } .outro-cove { flex-direction:column; gap:8px; font-size:10px; }
}
@media(prefers-reduced-motion:reduce) { .pod-hero-video { transition:none; } }