/* Same demo engine, borderless when embedded on the public membership page. */
html.nacl-embedded,html.nacl-embedded body{overflow-x:hidden;background:transparent!important}
html.nacl-embedded .experience-header,
html.nacl-embedded .experience-footer,
html.nacl-embedded .intro-transcript{display:none!important}
html.nacl-embedded .cinema{
  padding:0!important;background:transparent!important;overflow:hidden
}
html.nacl-embedded .cinema-shell{
  max-width:none!important;margin:0!important;border:0!important;
  border-radius:0!important;box-shadow:none!important;
}
html.nacl-embedded .cinema.is-endcard .cinema-shell{min-height:650px}
html.nacl-embedded #experience{padding-top:1px}
html.nacl-embedded .journey-top{padding-top:55px;padding-bottom:32px}
html.nacl-embedded .journey-body{padding-bottom:35px}
html.nacl-embedded .finale{margin:25px 22px 43px}
@media(max-width:850px){
  html.nacl-embedded .cinema.is-endcard .cinema-shell{min-height:690px}
  html.nacl-embedded .journey-top{padding-top:36px}
  html.nacl-embedded .finale{margin:18px 13px 30px}
}
@media(max-width:575px){
  html.nacl-embedded .cinema.is-endcard .cinema-shell{min-height:690px}
  html.nacl-embedded .cinema-text{padding:30px 20px 25px}
  html.nacl-embedded .journey-top{padding-top:26px}
}


/* Compact homepage-embedded demo, 2026-10-23.
   Standalone /experience/ is unaffected. Keep the full narration, scene engine,
   end card, and interactive tools available; shrink only the embedded opening. */
@media (min-width:851px){
  html.nacl-embedded .cinema:not(.is-endcard) .cinema-shell{
    min-height:495px;
  }
  html.nacl-embedded .cinema:not(.is-endcard) .cinema-text{
    min-height:495px;
    padding:24px clamp(24px,3.1vw,43px) 23px;
  }
  html.nacl-embedded .cinema:not(.is-endcard) .cinema-visual{
    min-height:495px;
  }
  html.nacl-embedded .cinema-text h1{
    font-size:clamp(31px,3.35vw,46px);
    line-height:1.13;
    margin-bottom:13px;
  }
  html.nacl-embedded .cinema-text>.eyebrow{margin-bottom:11px}
  html.nacl-embedded .cinema-text>p{
    font-size:15px;
    line-height:1.58;
    margin-bottom:15px;
  }
  html.nacl-embedded .cinema-text .cinema-actions{gap:10px}
  html.nacl-embedded .cinema-text #startExperience{
    min-height:48px;
    padding:12px 19px;
    font-size:14px;
  }
  html.nacl-embedded .cinema-text .cinema-captions{
    margin-top:16px;
    min-height:50px;
    padding-left:13px;
  }
  html.nacl-embedded .cinema-text #cinemaCaption{
    font-size:12px;
    line-height:1.5;
  }
  html.nacl-embedded .cinema-product-scenes{padding:14px}
  html.nacl-embedded .story-teaser,
  html.nacl-embedded .story-finale{min-height:430px}
  html.nacl-embedded .story-symbol{margin:10px 0}
  html.nacl-embedded .story-symbol span{height:85px;width:85px;font-size:42px}
}
@media (min-width:641px) and (max-width:850px){
  html.nacl-embedded .cinema:not(.is-endcard) .cinema-shell{
    grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
    min-height:515px;
  }
  html.nacl-embedded .cinema:not(.is-endcard) .cinema-text{
    min-height:515px;
    padding:22px 22px;
  }
  html.nacl-embedded .cinema:not(.is-endcard) .cinema-visual{
    min-height:515px;
  }
  html.nacl-embedded .cinema-text h1{
    font-size:clamp(29px,4vw,34px);
    line-height:1.15;
    margin-bottom:10px;
  }
  html.nacl-embedded .cinema-text>.eyebrow{margin-bottom:9px}
  html.nacl-embedded .cinema-text>p{
    font-size:13px;
    line-height:1.5;
    margin-bottom:12px;
  }
  html.nacl-embedded .cinema-text .cinema-actions{
    gap:6px;
  }
  html.nacl-embedded .cinema-text #startExperience{
    min-width:0;
    padding:10px 13px;
    min-height:47px;
    font-size:13px;
  }
  html.nacl-embedded .cinema-text #skipExperience{font-size:12px}
  html.nacl-embedded .cinema-text .cinema-captions{
    margin-top:14px;
    min-height:0;
    padding-left:11px;
  }
  html.nacl-embedded .cinema-text #cinemaCaption{
    font-size:12px;
    line-height:1.45;
  }
  html.nacl-embedded .cinema-product-scenes{padding:11px}
  html.nacl-embedded .story-teaser,
  html.nacl-embedded .story-finale{min-height:430px}
  html.nacl-embedded .story-symbol{margin:10px 0}
  html.nacl-embedded .story-symbol span{height:68px;width:68px;font-size:33px}
}
@media (max-width:640px){
  /* The still picture is intentionally omitted only BEFORE playing on phones.
     Once Play is tapped, the existing full visual/mobile-theater scenes return. */
  html.nacl-embedded .cinema:not(.is-mobile-playing):not(.is-endcard) .cinema-visual{
    display:none;
  }
  html.nacl-embedded .cinema:not(.is-endcard) .cinema-shell{min-height:0}
  html.nacl-embedded .cinema:not(.is-endcard) .cinema-text{
    min-height:0;
    padding:27px 20px 25px;
  }
  html.nacl-embedded .cinema-text h1{
    font-size:clamp(29px,7.5vw,38px);
    line-height:1.15;
    margin-bottom:13px;
  }
  html.nacl-embedded .cinema-text>.eyebrow{margin-bottom:12px}
  html.nacl-embedded .cinema-text>p{
    font-size:14px;
    line-height:1.55;
    margin-bottom:14px;
  }
  html.nacl-embedded .cinema-text .cinema-actions{gap:3px}
  html.nacl-embedded .cinema-text #startExperience{min-height:48px}
  html.nacl-embedded .cinema-text .cinema-captions{
    min-height:0;
    margin-top:13px;
    padding-left:12px;
  }
  html.nacl-embedded .cinema-text #cinemaCaption{
    font-size:12px;
    line-height:1.5;
  }
}


/* Desktop embed, 2026-10-23: all of the green cinema fits within the usable
   browser viewport below the sticky site header. The embedding page computes
   --nacl-embed-scene-height from ITS viewport, not from iframe 100vh. */
@media (min-width:851px){
  html.nacl-embedded .cinema{
    padding:0!important;
    overflow:hidden;
  }
  html.nacl-embedded .cinema .cinema-shell{
    height:var(--nacl-embed-scene-height,540px)!important;
    min-height:0!important;
    max-height:var(--nacl-embed-scene-height,540px)!important;
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
    overflow:hidden;
  }
  html.nacl-embedded .cinema:not(.is-endcard) .cinema-text,
  html.nacl-embedded .cinema:not(.is-endcard) .cinema-visual{
    min-height:0!important;
    height:100%!important;
    max-height:100%!important;
    overflow:hidden;
  }
  html.nacl-embedded .cinema:not(.is-endcard) .cinema-text{
    padding:clamp(17px,2.3vw,32px) clamp(22px,3vw,41px) 20px!important;
    justify-content:center;
  }
  html.nacl-embedded .cinema.is-endcard .cinema-shell{
    height:var(--nacl-embed-scene-height,540px)!important;
    min-height:0!important;
    max-height:var(--nacl-embed-scene-height,540px)!important;
    display:block;
  }
  html.nacl-embedded .cinema-text h1{
    font-size:clamp(31px,3.05vw,44px);
    line-height:1.12;
    margin:0 0 12px;
  }
  html.nacl-embedded .cinema-text>p{
    margin-bottom:11px;
    font-size:14px;
    line-height:1.47;
  }
  html.nacl-embedded .cinema-text>.eyebrow{margin-bottom:10px}
  html.nacl-embedded .cinema-text .cinema-actions{gap:8px}
  html.nacl-embedded .cinema-text #startExperience{
    min-height:44px;padding:10px 17px;font-size:14px
  }
  html.nacl-embedded .cinema-text .cinema-captions{
    margin-top:13px;
    min-height:0;
    padding:0 0 0 13px;
  }
  html.nacl-embedded .cinema-text #cinemaCaption{
    font-size:12px;
    line-height:1.43;
  }
  html.nacl-embedded .cinema-product-scenes{
    padding:11px!important;
  }
  html.nacl-embedded .story-teaser,
  html.nacl-embedded .story-finale{min-height:360px}
  html.nacl-embedded .story-symbol{margin:5px 0}
  html.nacl-embedded .story-symbol span{
    width:clamp(62px,6vw,79px);
    height:clamp(62px,6vw,79px);
    font-size:37px;
  }
}
@media (min-width:851px) and (max-height:760px){
  html.nacl-embedded .cinema-text h1{font-size:clamp(29px,2.7vw,39px);line-height:1.09}
  html.nacl-embedded .cinema-text>p{font-size:13px}
  html.nacl-embedded .story-ui-window{padding-bottom:14px}
  html.nacl-embedded .story-window-bar{margin-bottom:12px}
  html.nacl-embedded .story-teaser,
  html.nacl-embedded .story-finale{min-height:330px}
}