/* A viewport-sized highlight, with an explicit full-size reading mode. */
.dt-highlights:not(.is-expanded) .sp-track,.dt-highlights:not(.is-expanded) .op-track{padding-block:4px 12px;align-items:stretch}
.dt-highlights:not(.is-expanded) .sp-card,.dt-highlights:not(.is-expanded) .op-card{height:min(650px,calc(100svh - 115px));min-height:380px;overflow:hidden;padding:30px;gap:22px;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);grid-template-rows:minmax(0,1fr);align-items:center}
.dt-highlights:not(.is-expanded) .sp-card-copy,.dt-highlights:not(.is-expanded) .op-card-copy{display:block;align-self:center}
.dt-highlights:not(.is-expanded) .sp-card-copy h3,.dt-highlights:not(.is-expanded) .op-card-copy h3{font-size:clamp(25px,3vw,42px);margin:14px 0;line-height:1.12}
.dt-highlights:not(.is-expanded) .sp-card-copy>.handwritten,.dt-highlights:not(.is-expanded) .op-card-copy>.handwritten,.dt-highlights:not(.is-expanded) .sp-card-copy>small,.dt-highlights:not(.is-expanded) .op-card-copy>small,.dt-highlights:not(.is-expanded) .sp-device-caption{display:none}
.dt-highlights:not(.is-expanded) .sp-card-copy>p:not(.eyebrow),.dt-highlights:not(.is-expanded) .op-card-copy>p:not(.eyebrow){font-size:15px;line-height:1.6;opacity:1}
.dt-highlights:not(.is-expanded) .sp-card-copy>.eyebrow,.dt-highlights:not(.is-expanded) .op-card-copy>.eyebrow{margin:0;font-size:10px;line-height:1.4}
.dt-highlights:not(.is-expanded) .sp-card-copy>.eyebrow>span{opacity:.8}
.dt-highlights:not(.is-expanded) .sp-action{margin-top:14px}
.dt-fit{position:relative;min-width:0;min-height:0;width:100%;height:100%;align-self:stretch}
.dt-fit-content{position:absolute;left:50%;top:50%;width:var(--preview-width);transform:translate(-50%,-50%) scale(var(--preview-scale,1));transform-origin:center;display:flex;flex-direction:column;align-items:center}
.dt-fit-content>.sp-stage,.dt-fit-content>.op-device-stage{width:100%;margin:0;padding:0;max-width:none}
.dt-fit-content .sp-device{width:298px;max-width:none}
.dt-fit-content .op-phone{width:298px;max-width:none}
.dt-fit-content>.op-invitation{width:390px;max-width:none}
.dt-fit-content>.op-tv{width:580px;max-width:none}
.dt-highlights.is-expanded .dt-fit{height:auto;align-self:center}
.dt-highlights.is-expanded .dt-fit-content{position:relative;left:auto;top:auto;width:100%;transform:none}
.dt-highlights.is-expanded .dt-fit-content .sp-device,.dt-highlights.is-expanded .dt-fit-content .op-phone,.dt-highlights.is-expanded .dt-fit-content>.op-invitation,.dt-highlights.is-expanded .dt-fit-content>.op-tv{max-width:100%}
.dt-highlights .sp-gallery-nav,.dt-highlights .op-gallery-nav{display:flex;justify-content:center;align-items:center;gap:12px;padding:6px 0 12px;flex-wrap:wrap;min-height:72px}
.dt-highlights .sp-dots,.dt-highlights .op-dots{order:0;display:flex;align-items:center;background:#e3e8de;border-radius:40px;padding:5px 12px;gap:0}
.dt-highlights .sp-dots button,.dt-highlights .op-dots button{width:27px;min-height:44px;height:44px;padding:0;display:grid;place-items:center;position:relative;border:0;background:none;transition:width .25s}
.dt-highlights .sp-dots span{display:none}
.dt-highlights .sp-dots button:after,.dt-highlights .op-dots button:after{content:'';display:block;width:7px;height:7px;border-radius:8px;background:#748476;transform:none}
.dt-highlights .sp-dots button[aria-current],.dt-highlights .op-dots button[aria-current]{width:49px}
.dt-highlights .sp-dots button[aria-current]:after,.dt-highlights .op-dots button[aria-current]:after{width:37px;background:linear-gradient(to right,#064c37 calc(var(--dt-progress,0)*100%),#acb9aa 0)}
.dt-play{order:1;width:54px;height:54px;border:0;border-radius:50%;background:#e3e8de;color:#103b2c;display:grid;place-items:center;flex-shrink:0}
.dt-play svg{width:21px;height:21px;fill:currentColor}.dt-play [hidden]{display:none}
.dt-expand{order:2;border:0;background:none;color:#214b38;font-size:12px;text-decoration:underline;text-underline-offset:4px;min-height:44px;padding:8px}
.dt-highlights .sp-arrows,.dt-highlights .op-arrows{order:3;margin-left:10px}
.dt-highlights #sp-gallery-status,.dt-highlights [data-gallery-status]{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.dt-highlights .is-highlight-active .sp-card-copy,.dt-highlights .is-highlight-active .op-card-copy{animation:dt-copy-in .65s cubic-bezier(.2,.75,.2,1) both}
@keyframes dt-copy-in{from{opacity:.1;transform:translate3d(0,22px,0)}to{opacity:1;transform:none}}
@media(max-width:760px){
.dt-highlights:not(.is-expanded) .sp-card,.dt-highlights:not(.is-expanded) .op-card{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);height:calc(100svh - 112px);min-height:370px;max-height:700px;padding:21px 19px 16px;gap:14px;align-items:stretch}
.dt-highlights:not(.is-expanded) .sp-card-copy,.dt-highlights:not(.is-expanded) .op-card-copy{align-self:start}
.dt-highlights:not(.is-expanded) .sp-card-copy h3,.dt-highlights:not(.is-expanded) .op-card-copy h3{font-size:23px;line-height:1.12;margin:10px 0}
.dt-highlights:not(.is-expanded) .sp-card-copy>p:not(.eyebrow),.dt-highlights:not(.is-expanded) .op-card-copy>p:not(.eyebrow){font-size:13px;line-height:1.45;margin:0;max-width:none}
.dt-highlights:not(.is-expanded) .sp-card-copy>.eyebrow,.dt-highlights:not(.is-expanded) .op-card-copy>.eyebrow{font-size:8px;letter-spacing:1px}
.dt-highlights:not(.is-expanded) .sp-action{min-height:36px;padding:7px 10px;margin-top:10px;font-size:11px}
.dt-highlights .sp-arrows,.dt-highlights .op-arrows{display:none}
.dt-highlights .sp-gallery-nav,.dt-highlights .op-gallery-nav{width:calc(100% - 24px);gap:8px;flex-wrap:nowrap}
.dt-expand{font-size:11px;padding:6px;max-width:75px;line-height:1.3}
.dt-highlights .sp-dots,.dt-highlights .op-dots{padding-inline:8px}
.dt-highlights .sp-dots button,.dt-highlights .op-dots button{width:24px}
.dt-highlights .sp-dots button[aria-current],.dt-highlights .op-dots button[aria-current]{width:44px}
.dt-play{width:48px;height:48px}
}
@media(prefers-reduced-motion:reduce){.dt-highlights .is-highlight-active .sp-card-copy,.dt-highlights .is-highlight-active .op-card-copy{animation:none}.dt-highlights *{scroll-behavior:auto!important}}
.dt-play:disabled{opacity:.45;cursor:default}
@media(max-width:360px){.dt-highlights .sp-dots button,.dt-highlights .op-dots button{width:20px}.dt-highlights .sp-dots button[aria-current],.dt-highlights .op-dots button[aria-current]{width:38px}.dt-play{width:44px;height:44px}.dt-expand{max-width:62px;padding:4px}}
/* Keep the compact app silhouette readable; secondary updates return when enlarged. */
.dt-highlights:not(.is-expanded) .op-phone .op-update{display:none}
.dt-highlights:not(.is-expanded) .op-phone [data-screen]{min-height:0}
.dt-highlights:not(.is-expanded) .op-app-hero:before{height:48px}
.dt-highlights:not(.is-expanded) .op-app-hero h4{margin-top:10px}
.dt-highlights:not(.is-expanded) .op-app-content{padding:10px}

/* Matching icon controls, with spoken labels and a tooltip for the zoom state. */
.dt-expand{display:grid;place-items:center;flex-shrink:0;width:54px;height:54px;min-height:44px;max-width:none;padding:0;border:0;border-radius:50%;background:#e3e8de;color:#103b2c;text-decoration:none}
.dt-expand svg{width:23px;height:23px}.dt-expand [hidden]{display:none}
.dt-expand:hover,.dt-play:hover{background:#d4dece}
@media(max-width:760px){.dt-expand{width:48px;height:48px;padding:0;max-width:none}}
@media(max-width:360px){.dt-expand{width:44px;height:44px;max-width:none}}