/* Scoped component; the homepage rail supplies the section's full-width divider. */
.f27-dpo, .f27-dpo *, .f27-dpo *::before, .f27-dpo *::after { box-sizing: border-box; }
.f27-dpo { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:clamp(36px,5vw,88px); padding:clamp(56px,7vw,112px) var(--f27-inner,1.05rem); color:var(--f27-ink,#292c2b); font-family:"DM Sans",sans-serif; }
.f27-dpo__copy { min-width:0; max-width:590px; padding-block:32px; }
.f27-dpo .f27-dpo__eyebrow { margin:0 0 20px; color:var(--f27-muted,#636966); font:400 12px/1.5 "DM Sans",sans-serif; letter-spacing:.1em; text-transform:uppercase; }
.f27-dpo h2 { margin:0 0 24px; max-width:17ch; font:400 clamp(32px,3.15vw,50px)/1.1 "DM Sans",sans-serif; letter-spacing:-.045em; text-wrap:pretty; }
.f27-dpo .f27-dpo__description { margin:0; max-width:54ch; color:var(--f27-muted,#636966); font:400 16px/1.65 "DM Sans",sans-serif; text-wrap:pretty; }
.f27-dpo__benefits { display:grid; gap:16px; margin:28px 0 0; padding:0; list-style:none; }
.f27-dpo__benefits li { display:grid; grid-template-columns:20px minmax(0,1fr); align-items:start; gap:12px; font:400 16px/1.55 "DM Sans",sans-serif; text-wrap:pretty; }
/* Match the canonical hero reassurance geometry, sizing and theme treatment. */
.f27-dpo__benefits svg { width:20px; height:20px; margin-top:2px; overflow:visible; stroke:#64916e; stroke-width:1; stroke-linecap:round; stroke-linejoin:round; border-radius:50%; background:radial-gradient(circle,#dfeccf99 0%,#e6efdc55 45%,transparent 72%); filter:drop-shadow(0 0 4px #b7d09a88); }
html[data-f27-theme="dark"] .f27-dpo__benefits svg { stroke:#CEE07D; background:none; filter:none; }
/* The plate owns its breathing room; no negative offsets cross section rails. */
.f27-dpo__media { display:flex; align-items:center; justify-content:center; min-width:0; min-height:clamp(440px,38vw,560px); width:100%; margin:0; padding-block:32px; align-self:stretch; justify-self:center; border:1px solid var(--f27-line,#deded7); border-radius:10px; background:#F1F1EC; }
.f27-dpo__art { position:relative; isolation:isolate; aspect-ratio:4/3; width:84%; overflow:hidden; }
.f27-dpo__poster,.f27-dpo__player { position:absolute; inset:0; width:100%; height:100%; }
.f27-dpo__poster { display:block; object-fit:contain; }
.f27-dpo__player { opacity:0; }
.f27-dpo__player > svg { display:block; width:100%; height:100%; }
.f27-dpo__media[data-ready="true"] .f27-dpo__player { opacity:1; }
.f27-dpo__media[data-ready="true"] .f27-dpo__poster { visibility:hidden; }
.f27-dpo [hidden] { display:none!important; }
@media(max-width:900px) { .f27-dpo { grid-template-columns:minmax(0,1fr); gap:36px; } .f27-dpo__copy { max-width:680px; padding-block:0; } .f27-dpo h2 { max-width:22ch; font-size:clamp(32px,5vw,44px); } .f27-dpo__media { min-height:0; max-width:none; aspect-ratio:1.15; padding-block:24px; justify-self:center; } }
@media(max-width:479px) { .f27-dpo { padding-block:48px; gap:28px; } .f27-dpo h2 { margin-bottom:20px; font-size:32px; } .f27-dpo__benefits { margin-top:24px; } }
