/* An integrated studio scene, not a second phone shell or an embedded player. */
.phone-showcase { --studio: #b4bcaf; --film-progress: 0; position: relative; isolation: isolate; margin: 16px -20px 0; padding: 0 20px; scroll-margin-top: 104px; }
.phone-showcase::before { content: ''; pointer-events: none; position: absolute; z-index: -1; inset: -3% 0 2% 17%; background: radial-gradient(ellipse at 63% 48%, #aab4a2 0%, #ccd2c1 36%, #e4e7db 54%, transparent 73%); }
.phone-showcase-layout { display: grid; grid-template-columns: minmax(240px,.78fr) minmax(0,1.7fr); gap: 24px; align-items: start; }
.phone-showcase-copy { position: relative; z-index: 2; padding-top: 78px; }
.phone-showcase-copy > .eyebrow { color: #686b5e; font-size: 10px; margin-bottom: 18px; }
.phone-showcase h2 { font-size: clamp(38px,4vw,52px); line-height: 1.05; margin-bottom: 30px; }
.phone-showcase h2 em { font-style: italic; }
.film-nav { display: flex; flex-direction: column; gap: 3px; margin-bottom: 30px; }
.film-tab { display: flex; align-items: center; gap: 13px; width: 100%; min-height: 73px; padding: 14px 16px 14px 0; color: #6b6b61; background: transparent; border: 0; border-bottom: 1px solid #0a0a0a13; border-radius: 0; text-align: left; transition: color 180ms, background 180ms; }
.film-tab-number { align-self: flex-start; margin-top: 3px; color: #76766a; font: 10px/1.5 var(--font-mono); }
.film-tab-label { display: block; font-size: 21px; line-height: 1.2; }
.film-tab-caption { display: block; font-size: 13px; line-height: 1.35; margin-top: 5px; color: #696c5e; }
.film-tab-arrow { margin-left: auto; color: #555e2b; opacity: 0; font-size: 21px; }
.film-tab.is-current { color: var(--black); }
.film-tab.is-current .film-tab-label { text-decoration: underline; text-decoration-color: var(--green); text-decoration-thickness: 5px; text-underline-offset: 3px; text-decoration-skip-ink: none; }
.film-tab.is-current .film-tab-arrow { opacity: 1; }
.film-tab:hover { color: var(--black); background: #f4f0e95c; }
.film-tab:focus-visible, .phone-film:focus-visible, .film-transport button:focus-visible, .film-transcript summary:focus-visible { outline: 2px solid #535e25; outline-offset: 4px; }
.film-example-note { font-size: 12px; line-height: 1.5; color: #6b6560; margin: 14px 0 0; }
.phone-film-column { min-width: 0; }
.phone-film { position: relative; width: 100%; aspect-ratio: .72; }
.film-surface { position: absolute; inset: 0; overflow: hidden; mask-image: linear-gradient(to right,transparent 0%,#000 9%,#000 91%,transparent 100%),linear-gradient(to bottom,transparent 0%,#000 4%,#000 95%,transparent 100%); mask-composite: intersect; -webkit-mask-image: linear-gradient(to right,transparent 0%,#000 9%,#000 91%,transparent 100%),linear-gradient(to bottom,transparent 0%,#000 4%,#000 95%,transparent 100%); -webkit-mask-composite: source-in; }
.film-poster, .film-video { display: block; position: absolute; top: 50%; left: 50%; width: 102%; max-width: none; height: auto; aspect-ratio: 4/5; transform: translate(-50%,-50%); object-fit: contain; border: 0; border-radius: 0; }
.film-poster { z-index: 0; }
.film-video { opacity: 0; z-index: 1; pointer-events: none; }
.film-video.is-active { opacity: 1; z-index: 2; }
.film-transport { display: flex; align-items: center; gap: 15px; max-width: 440px; margin: -10px auto 0; position: relative; z-index: 3; }
.film-transport[hidden] { display: none; }
.film-transport button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; min-height: 44px; border: 0; padding: 8px 0; color: #2a3020; background: transparent; font-size: 14px; }
.film-play-icon { font-family: Arial,sans-serif; font-size: 15px; width: 14px; }
.film-progress { height: 2px; background: #6b705b40; flex: 1; overflow: hidden; }
.film-progress span { display: block; width: 100%; height: 100%; background: #424c22; transform-origin: left; transform: scaleX(var(--film-progress)); }
.film-position { font: 10px var(--font-mono); color: #586049; white-space: nowrap; }
.film-feedback { max-width: 440px; margin: 0 auto; color: #615c51; font-size: 13px; line-height: 1.5; }
.film-feedback:empty { display: none; }
#scene-chat { max-width: 440px; margin: 5px auto 22px; }
.film-transcript { border-bottom: 1px solid #5c624433; }
.film-transcript[hidden] { display: none; }
.film-transcript summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 12px 0; cursor: pointer; font-size: 14px; color: #414737; list-style: none; }
.film-transcript summary::-webkit-details-marker { display: none; }
.film-transcript summary span { font-family: Arial,sans-serif; }
.film-transcript[open] summary span { transform: rotate(45deg); }
.film-transcript ol { list-style: none; padding: 0 0 20px; display: grid; gap: 12px; }
.film-transcript li { border-radius: 12px; background: #faf5efdc; border: 1px solid #67734a26; padding: 16px; font-size: 16px; line-height: 1.55; overflow-wrap: anywhere; }
.transcript-who { display: flex; justify-content: space-between; color: #566135; font: 11px/1.5 var(--font-mono); margin-bottom: 10px; }
.film-transcript h4 { font-weight: 400; font-size: 18px; margin-bottom: 6px; }
.film-transcript .transcript-location { color: #6b6560; font-size: 13px; margin-bottom: 8px; }
.film-transcript .a-list { list-style: none; padding: 0; }
.film-transcript .a-list li { padding: 0; background: transparent; border: 0; border-radius: 0; }
@media (max-width: 1024px) {
  .phone-showcase-layout { grid-template-columns: minmax(215px,.7fr) minmax(0,1.3fr); gap: 10px; }
  .phone-showcase-copy { padding-top: 30px; }.film-tab { min-height: 67px; }.film-tab-label { font-size: 19px; }
  .phone-film { aspect-ratio: .55; }.film-poster,.film-video { width: 132%; }
  .film-transport,#scene-chat,.film-feedback { max-width: 86%; }
}
@media (max-width: 760px) {
  .phone-showcase { margin-inline: -8px; padding-inline: 8px; }
  .phone-showcase::before { inset: 120px 0 10px; background: radial-gradient(ellipse at 50% 54%,#afb8a9 0%,#d1d7c7 45%,transparent 72%); }
  .phone-showcase-layout { display: flex; flex-direction: column; gap: 0; }
  .phone-showcase-copy { width: 100%; padding-top: 18px; }
  .phone-showcase h2 { font-size: 38px; margin-bottom: 22px; }
  .phone-showcase h2 em { margin-left: 0; }
  .phone-showcase-copy > .eyebrow { margin-bottom: 12px; }
  .film-nav { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; margin-bottom: 6px; }
  .film-tab { justify-content: center; min-height: 48px; padding: 8px 5px; border: 1px solid #6c705736; border-radius: 12px; text-align: center; gap: 0; }
  .film-tab-number,.film-tab-arrow,.film-tab-caption { display: none; }
  .film-tab-label { font-size: 14px; line-height: 1.2; }
  .film-tab.is-current { background: #d7e14f; border-color: #b9c337; }
  .film-tab.is-current .film-tab-label { text-decoration: none; }
  .phone-showcase-copy > .btn { margin: 18px 0 0; min-height: 44px; padding: 12px 19px; font-size: 14px; }
  .film-example-note { display: inline-block; vertical-align: middle; margin: 15px 0 0 14px; font-size: 10px; }
  .phone-film-column { width: 100%; }
  .phone-film { aspect-ratio: .5; max-height: none; margin-top: -3px; }
  .film-poster,.film-video { width: 144%; }
  .film-surface { mask-image: linear-gradient(to right,transparent 0%,#000 2%,#000 98%,transparent 100%),linear-gradient(to bottom,transparent 0%,#000 4%,#000 95%,transparent 100%); -webkit-mask-image: linear-gradient(to right,transparent 0%,#000 2%,#000 98%,transparent 100%),linear-gradient(to bottom,transparent 0%,#000 4%,#000 95%,transparent 100%); }
  .film-transport,#scene-chat,.film-feedback { max-width: 94%; }
  .film-transport { margin-top: -8px; }.film-transcript summary { font-size: 14px; }
}
@media (max-width: 360px) { .film-tab-label { font-size: 12px; }.phone-showcase h2 { font-size: 32px; }.film-example-note { display: block; margin: 12px 0 0; } }
@media (prefers-reduced-motion: reduce) { .phone-showcase *, .phone-showcase *::before { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }