/* Pure explanatory wireframe; no media playback or application controls. */
.concept-wireframe { min-width:0; min-height:0; display:grid; grid-template-rows:auto minmax(0,1fr) 34px; gap:8px; padding:2px 4px 0; overflow:hidden; }
.wireframe-header { display:grid; grid-template-columns:18px minmax(0,1fr); column-gap:7px; align-content:start; color:#466f78; }
.wireframe-header>svg { width:17px; height:17px; margin-top:1px; }
.concept-wireframe .wireframe-heading { font:600 11px/1.4 system-ui,sans-serif; color:var(--text); margin:0; }
.concept-wireframe .wireframe-caption { grid-column:2; font:9px/1.5 system-ui,sans-serif; color:var(--muted); margin:3px 0 0; }
.wireframe-display { display:grid; place-items:center; min-height:0; min-width:0; container-type:size; }
.wireframe-phone { height:min(100cqh,calc(100cqw * 17 / 9)); width:auto; aspect-ratio:9/17; box-sizing:border-box; display:flex; flex-direction:column; min-height:0; border:1px solid #939e96; border-radius:18px; overflow:hidden; background:#f6f7f2; color:#35443a; pointer-events:none; user-select:none; container-type:inline-size; }
.wireframe-top { display:flex; flex-direction:column; gap:2px; padding:12px 12px 9px; font:600 clamp(12px,6cqw,16px)/1.2 system-ui,sans-serif; border-bottom:1px solid #6b7b6b26; }
.wireframe-top span { font:9px/1.3 system-ui,sans-serif; color:#7b857c; }
.wireframe-screen { flex:1; position:relative; min-height:0; overflow:hidden; background:#e4e9e0; }
.wireframe-campaign { position:absolute; inset:0; display:flex; align-items:flex-end; background:#e9ebe2; }
.wireframe-campaign-second { background:#d7e0dc; transform:translateY(100%); }
.wireframe-media { position:absolute; inset:9% 10% 31%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; border:1px solid #778b742d; border-radius:50% 50% 8px 8px; background:linear-gradient(155deg,transparent 49.8%,#90a28d38 50%,transparent 50.4%); }
.wireframe-campaign-second .wireframe-media { border-radius:6px; background:repeating-linear-gradient(0deg,transparent 0 29px,#6f938624 30px 31px); }
.wireframe-poster-index { font:300 clamp(48px,30cqw,84px)/1 system-ui,sans-serif; color:#6e846a6b; letter-spacing:-.07em; }
.wireframe-media>svg { width:24px; height:24px; color:#5f7865; }
.wireframe-media-label { font:8px/1.3 system-ui,sans-serif; color:#728673; letter-spacing:.12em; }
.wireframe-copy { display:flex; flex-direction:column; width:100%; box-sizing:border-box; gap:6px; padding:35px 36px 20px 12px; background:linear-gradient(transparent,#f8f9f4 35%); }
.wireframe-copy strong { font:650 clamp(14px,8cqw,22px)/1.08 system-ui,sans-serif; }
.wireframe-copy span { font:clamp(9px,4.4cqw,12px)/1.35 system-ui,sans-serif; }
.wireframe-social { position:absolute; right:10px; bottom:26px; display:flex; flex-direction:column; gap:14px; z-index:1; }
.wireframe-social svg { width:19px; height:19px; fill:none; stroke:#526b59; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.wireframe-bottom { padding:9px 3px; text-align:center; font:9px/1.3 system-ui,sans-serif; }
.wireframe-campaign-detail { position:absolute; inset:0; display:flex; flex-direction:column; gap:12px; padding:18px 14px; background:#f6f8f2; transform:translateX(100%); box-sizing:border-box; }
.wireframe-kicker { font:9px/1.3 system-ui,sans-serif; letter-spacing:.08em; text-transform:uppercase; color:#7c8b7c; }
.wireframe-campaign-detail strong { font:650 clamp(16px,8cqw,23px)/1.12 system-ui,sans-serif; }
.wireframe-campaign-detail p { font:12px/1.5 system-ui,sans-serif; margin:0; }
.wireframe-detail-lines { padding:8px 0; border-bottom:1px solid #b4c1b155; font:11px/1.3 system-ui,sans-serif; }
.wireframe-apply { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; background:#dce8dd; opacity:0; }
.wireframe-apply>svg { width:36px; height:36px; color:#5f7d66; }
.wireframe-apply strong { font:600 28px/1.2 system-ui,sans-serif; }
.wireframe-apply span { font:10px/1.4 system-ui,sans-serif; color:#708675; }
.wireframe-controls { display:flex; align-items:center; justify-content:center; gap:9px; }
.wireframe-controls>button { background:var(--surface-subtle); }
.wireframe-controls>button[hidden] { display:none; }
.wireframe-controls>button:disabled { opacity:.4; cursor:default; }
.wireframe-phone[data-scene='up'] .wireframe-campaign-first { animation:wf-up-out var(--scene-duration) cubic-bezier(.45,.05,.25,1) both; }
.wireframe-phone[data-scene='up'] .wireframe-campaign-second { animation:wf-up-in var(--scene-duration) cubic-bezier(.45,.05,.25,1) both; }
.wireframe-phone:is([data-scene='next'],[data-scene='right'],[data-scene='apply'],[data-scene='reset'],[data-scene='left'],[data-scene='details'],[data-scene='return']) .wireframe-campaign-first { opacity:0; }
.wireframe-phone:is([data-scene='next'],[data-scene='right'],[data-scene='apply'],[data-scene='reset'],[data-scene='left'],[data-scene='details'],[data-scene='return']) .wireframe-campaign-second { transform:translateY(0); }
.wireframe-phone[data-scene='right'] .wireframe-campaign-second { animation:wf-right var(--scene-duration) cubic-bezier(.45,.05,.25,1) both; }
.wireframe-phone[data-scene='right'] .wireframe-apply { animation:wf-cue var(--scene-duration) ease-in-out both; }
.wireframe-phone[data-scene='apply'] .wireframe-campaign-second { transform:translateX(100%); }
.wireframe-phone[data-scene='apply'] .wireframe-apply { opacity:1; }
.wireframe-phone[data-scene='left'] .wireframe-campaign-second { animation:wf-left var(--scene-duration) cubic-bezier(.45,.05,.25,1) both; }
.wireframe-phone[data-scene='left'] .wireframe-campaign-detail { animation:wf-detail var(--scene-duration) cubic-bezier(.45,.05,.25,1) both; }
.wireframe-phone[data-scene='details'] .wireframe-campaign-detail { transform:none; }
.wireframe-phone[data-scene='return'] .wireframe-campaign-first { animation:wf-return-first var(--scene-duration) ease-in-out both; }
.wireframe-phone[data-scene='return'] .wireframe-campaign-second { animation:wf-return-second var(--scene-duration) ease-in-out both; }
.wireframe-phone[data-playing='false'] * { animation-play-state:paused!important; }
@keyframes wf-up-out { 0%,12% { transform:translateY(0); } 88%,100% { transform:translateY(-100%); } }
@keyframes wf-up-in { 0%,12% { transform:translateY(100%); } 88%,100% { transform:translateY(0); } }
@keyframes wf-right { 0%,12% { transform:translateX(0); } 88%,100% { transform:translateX(100%); } }
@keyframes wf-left { 0%,12% { transform:translateX(0); } 88%,100% { transform:translateX(-100%); } }
@keyframes wf-detail { 0%,12% { transform:translateX(100%); } 88%,100% { transform:translateX(0); } }
@keyframes wf-cue { 0%,15% { opacity:0; } 70%,100% { opacity:1; } }
@keyframes wf-return-first { 0%,10% { opacity:0; } 90%,100% { opacity:1; } }
@keyframes wf-return-second { 0%,10% { opacity:1; } 90%,100% { opacity:0; } }
.wireframe-phone[data-reduced='true'] * { animation:none!important; }
.wireframe-phone[data-reduced='true'][data-scene='up'] .wireframe-campaign-first { opacity:0; }
.wireframe-phone[data-reduced='true'][data-scene='up'] .wireframe-campaign-second { transform:none; }
.wireframe-phone[data-reduced='true'][data-scene='right'] .wireframe-apply { opacity:1; }
.wireframe-phone[data-reduced='true'][data-scene='left'] .wireframe-campaign-detail { transform:none; }
.wireframe-phone[data-reduced='true'][data-scene='return'] .wireframe-campaign-first { opacity:1; }
.wireframe-phone[data-reduced='true'][data-scene='return'] .wireframe-campaign-second { opacity:0; }
@media (prefers-reduced-motion:reduce) { .wireframe-phone * { animation:none!important; } }