/* A single, transparent 3D stage connects the three editorial screens. */
.cinema { --stage-height: max(640px, calc(100svh - 88px)); position: relative; isolation: isolate; background: var(--bg); }
.cinema-stage { display: contents; }
.cinema-visual { position: sticky; top: 88px; height: var(--stage-height); overflow: hidden; z-index: 0; background: var(--bg); pointer-events: none; }
.cinema-atmosphere { position: absolute; inset: 0; background: radial-gradient(ellipse at 76% 49%, #173c702d, transparent 53%), radial-gradient(ellipse at 55% 100%, #0b2d6525, transparent 60%); }
.cinema-grain { position: absolute; inset: 0; opacity: .22; background-image: radial-gradient(#a7c9ff26 .5px, transparent .5px); background-size: 5px 5px; mask-image: linear-gradient(90deg, transparent 35%, #000); }
.cinema-signature { position: absolute; inset: 0; z-index: 2; mix-blend-mode: screen; opacity: 1; }
.signature-position {
  position: absolute; width: 48%; height: 85%; right: 3%; top: 5%;
  transform: perspective(1100px) translate3d(var(--signature-x,0px),var(--signature-y,0px),0)
    rotateX(var(--signature-rx,0deg)) rotateY(var(--signature-ry,0deg)) scale(var(--signature-scale,1));
}
.signature-surface { position: relative; width: 100%; height: 100%; animation: signature-float 7s ease-in-out infinite; }
.signature-surface img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; max-width: none; }
.signature-surface::after {
  content: ''; position: absolute; inset: 0;
  /* The highlight contains only the original S pixels. Black stays black when
     brightened and screen-blended, even without Safari luminance masks. */
  background: url('/assets/hero-s.webp') center / contain no-repeat;
  filter: brightness(1.35); mix-blend-mode: screen; opacity: .32;
  clip-path: polygon(-55% 0,-40% 0,-75% 100%,-90% 100%);
  animation: signature-sheen 7.5s ease-in-out infinite;
}
@keyframes signature-float {
  0%,100% { transform: translate3d(0,5px,0) rotate(-1.5deg); }
  50% { transform: translate3d(0,-13px,0) rotate(1.1deg); }
}
@keyframes signature-sheen {
  0%,24% { clip-path: polygon(-55% 0,-40% 0,-75% 100%,-90% 100%); }
  68%,100% { clip-path: polygon(190% 0,205% 0,170% 100%,155% 100%); }
}
.cinema:not(.is-live) .signature-surface,
.cinema:not(.is-live) .signature-surface::after,
.cinema:not(.is-live) .cinema-atmosphere { animation-play-state: paused; }
.scene-resume { appearance: none; min-height: 44px; padding: 9px 16px; border: 1px solid #7bbcff48; border-radius: 999px; background: #14243b; color: #c6e4ff; font-size: .8125rem; letter-spacing: 0; }
.scene-resume:hover { background: #1c3557; border-color: #a0d0ff; }
#signature-canvas { position: absolute; inset: 0; z-index: 1; opacity: 0; transition: opacity 1.2s; }
#signature-canvas canvas { display: block; width: 100%; height: 100%; }
.cinema.has-live-art #signature-canvas { opacity: 1; }

.cinema-coordinates { position: absolute; inset: auto 3vw 30px; display: flex; justify-content: space-between; color: #8c9aaf; font-size: .75rem; letter-spacing: .16em; font-family: ui-monospace, monospace; opacity: .7; }
.cinema-coordinates > :first-child { opacity: 0; }
.cinema-chapters { position: relative; z-index: 2; margin-top: calc(-1 * var(--stage-height)); }
.cinema-chapter { min-height: var(--stage-height); scroll-margin-top: 88px; }
.home-page .cinema .hero { background: transparent; border: 0; display: block; overflow: visible; min-height: var(--stage-height); }
.home-page .cinema .hero-layout { height: auto; min-height: calc(var(--stage-height) - 70px); padding-block: 55px; display: flex; align-items: center; }
.home-page .cinema .hero-copy { width: 59%; max-width: 1100px; }
.home-page .cinema .hero h1 { font-size: clamp(3.5rem, 5.5vw, 8.5rem); }
.home-page .cinema .hero-bottom { height: 70px; padding-bottom: 22px; }
.home-page .cinema .hero-caption { display: none; }
.home-page .cinema .hero-bottom > span { color: #8d9cb2; }
.home-page .cinema .hero-bottom .scroll-link { margin-right: 0; }
.cinema .hero-bottom .scroll-link > span:first-child { display: none; }
.story-layout { min-height: var(--stage-height); display: flex; align-items: center; padding-block: 65px; }
.story-copy { width: 57%; max-width: 1080px; }
.story-copy .eyebrow { margin-bottom: 24px; }
.story-copy h2 { font-size: clamp(3.7rem, 6.4vw, 9rem); font-weight: 550; letter-spacing: -.06em; line-height: 1.04; }
.cinema h1, .cinema h2 { overflow-wrap: break-word; }
.story-copy p { margin-top: 30px; color: #aebcd1; font-size: clamp(1.05rem, 1.25vw, 1.65rem); line-height: 1.65; }
.story-next, .story-copy .button { margin-top: 30px; }
.button-glass { border: 1px solid #bed4ff3a; background: #7aa7eb0a; color: #dceaff; backdrop-filter: blur(8px); }
.button-glass:hover { border-color: #a7cbff9c; background: #7aa7eb16; }
.home-page .quick-facts { padding-block: clamp(38px, 4vw, 90px); }
.home-page .features-section { padding-top: clamp(95px, 8vw, 170px); }
.home-page .section-heading h2, .home-page .faq-heading h2 { font-weight: 550; }
.home-page .feature-card, .home-page .price-card { border-radius: 22px; }
.home-page .feature-grid { gap: 24px; }
.home-page .button { border-radius: 999px; }
.home-page .button:active { transform: scale(.97); }
.home-page .button-primary svg { transition: transform .4s var(--ease); }
.home-page .button-primary:hover svg { transform: translateX(3px); }
.home-page .button-small { padding-inline: 20px; }
.home-page .text-link { text-underline-offset: 6px; }
.home-page .text-link:hover { text-decoration: underline; text-decoration-color: #98bfff55; }
.home-page .mobile-nav { transform-origin: top; border-bottom-color: #6f9bce35; }
.home-page .mobile-nav a { padding: 16px 4px; font-size: 1.125rem; border-bottom: 1px solid #ffffff08; }
.home-page .faq-list details { overflow: hidden; }
.home-page .faq-list details[open] summary { color: #cde4ff; }
.home-page .faq-list summary > span { display: inline-block; transition: transform .4s var(--ease); }
.home-page .faq-list details[open] summary > span { transform: rotate(45deg); }

.home-page .devices-grid { margin-top: 25px; }
.home-page .final-cta { border-radius: 28px; }


@media (max-width: 1200px) and (min-width: 901px) {
  .home-page .desktop-nav { gap: 18px; font-size: .8125rem; }
  .home-page .nav-inner { gap: 16px; }
  .home-page .nav-actions { gap: 8px; }
  .home-page .brand { font-size: 24px; }
}
@media (max-width: 900px) {
  .cinema { --stage-height: max(690px, calc(100svh - 88px)); }
  .cinema-visual { top: 88px; }
  .cinema-chapter { scroll-margin-top: 88px; }
  .home-page .cinema .hero-copy { width: 72%; }
  .home-page .cinema .hero h1 { font-size: clamp(3.3rem, 7vw, 4.5rem); }
  .home-page .cinema .hero-layout { padding-top: 50px; align-items: flex-start; }
  .story-copy { width: 70%; }
  .story-copy h2 { font-size: clamp(3.5rem, 7.5vw, 5.5rem); }
}
@media (max-width: 700px) {
  .cinema { --scene-header: 88px; --stage-height: calc(100svh - var(--scene-header)); }
  /* The native-flow layout also covers large text and short landscape screens. */
  .cinema-visual { position: relative; top: 0; height: clamp(190px, 38svh, 330px); }
  .cinema-chapters { margin-top: 0; }
  .cinema-chapter, .home-page .cinema .hero { min-height: 0; }
  .cinema-chapter { scroll-margin-top: 88px; }
  .cinema-grain { opacity: .12; }
  .cinema-atmosphere { background: radial-gradient(ellipse at 50% 22%, #1d417430, transparent 48%); }
  .cinema-signature .signature-position { width: 86%; height: max(0px, calc(100% - var(--art-top, 12px) - var(--art-bottom, 12px) - 16px)); top: calc(var(--art-top, 12px) + 8px); bottom: auto; right: 7%; }
  #signature-canvas, .cinema-signature { clip-path: inset(var(--art-top, 12px) 0 var(--art-bottom, 12px) 0); }
  .signature-surface { animation-name: signature-float-mobile; animation-duration: 9s; }
  .cinema-coordinates { inset: auto 22px 17px; font-size: .75rem; }
  .home-page .cinema .hero-layout { height: auto; min-height: 0; padding-top: 24px; padding-bottom: 20px; }
  .home-page .cinema .hero-copy { width: 100%; }
  .home-page .cinema .hero h1 { font-size: clamp(2.7rem, 9.2vw, 4rem); }
  .home-page .cinema .hero-eyebrow { font-size: .75rem; letter-spacing: 1px; margin-bottom: 19px; }
  .home-page .cinema .hero-description { font-size: 1rem; margin-top: 19px; line-height: 1.65; }
  .home-page .cinema .hero-actions { margin-top: 22px; gap: 10px 20px; }
  .home-page .cinema .hero-actions .button { min-height: 48px; padding: 13px 17px; font-size: .8125rem; }
  .home-page .cinema .hero-actions .text-link { font-size: .8125rem; }
  .home-page .cinema .hero-actions .button svg { width: 18px; height: 18px; }
  .home-page .cinema .trial-note { font-size: .75rem; margin-top: 12px; }
  .home-page .cinema .hero-bottom { height: 45px; padding-bottom: 10px; justify-content: flex-end; }
  .home-page .cinema .hero-bottom > span { display: none; }
  .story-layout { align-items: flex-start; padding-block: 70px 45px; }
  .story-copy { width: 100%; }
  .story-copy .eyebrow { font-size: .75rem; margin-bottom: 20px; }
  .story-copy h2 { font-size: clamp(3.1rem, 12vw, 4.5rem); }
  .story-copy p { font-size: 1rem; margin-top: 22px; }
  .story-next, .story-copy .button { margin-top: 20px; }
  .story-copy .button { font-size: .8125rem; padding: 12px 18px; min-height: 48px; }
  .story-layout { min-height: 0; }
  /* One pinned stage; only opacity/transform change while the visitor scrolls. */
  .cinema.mobile-story {
    --copy-top: calc(var(--stage-height) - 376px); --art-top: 12px; --art-bottom: 400px;
    height: calc(var(--stage-height) * 3.4);
  }
  .mobile-story .cinema-stage { display: block; position: sticky; top: var(--scene-header); height: var(--stage-height); }
  .mobile-story .cinema-visual { position: absolute; inset: 0; height: 100%; }
  .mobile-story .cinema-chapters { position: absolute; inset: 0; margin: 0; }
  .home-page .mobile-story .cinema-chapter {
    position: absolute; inset: 0; min-height: 0; pointer-events: none;
    opacity: var(--copy-opacity, 0); transform: translate3d(0,var(--copy-y, 24px),0);
    will-change: opacity, transform;
  }
  .mobile-story .cinema-chapter:first-child { --copy-opacity: 1; --copy-y: 0px; }
  .mobile-story .cinema-chapter:not([inert]) a,
  .mobile-story .cinema-chapter:not([inert]) button { pointer-events: auto; }
  .home-page .mobile-story .hero-layout, .mobile-story .story-layout {
    position: absolute; top: var(--copy-top, 48%); left: 0; right: 0;
    min-height: 0; height: auto; padding: 0; display: block;
  }
  .home-page .mobile-story .hero-copy > * { animation: none; }
  .home-page .mobile-story .hero h1, .mobile-story .story-copy h2 { font-size: clamp(2.05rem, 9.1vw, 3.7rem); line-height: 1.07; }
  .home-page .mobile-story .hero-eyebrow, .mobile-story .story-copy .eyebrow { font-size: .6875rem; letter-spacing: .09em; margin-bottom: 12px; }
  .home-page .mobile-story .hero-description, .mobile-story .story-copy p { font-size: .9375rem; line-height: 1.55; margin-top: 14px; }
  .home-page .mobile-story .hero-actions { gap: 10px 14px; margin-top: 17px; }
  .home-page .mobile-story .hero-actions .button { padding: 12px 14px; font-size: .75rem; min-height: 46px; gap: 9px; }
  .home-page .mobile-story .hero-actions .text-link { font-size: .75rem; min-height: 44px; gap: 7px; }
  .home-page .mobile-story .trial-note { margin-top: 10px; font-size: .6875rem; }
  .mobile-story .story-next, .mobile-story .story-copy .button { margin-top: 16px; min-height: 44px; }
  .home-page .mobile-story .hero-bottom { position: absolute; left: 0; right: 0; bottom: 8px; height: 40px; padding: 0; }
  .mobile-story .scene-resume { margin-right: auto; min-height: 40px; font-size: .6875rem; padding: 8px 12px; }
  .mobile-story .cinema-coordinates { font-size: .625rem; letter-spacing: .12em; }
  .home-page .quick-facts { padding-block: 30px; }
  .home-page .features-section { padding-top: 70px; }
  .home-page .feature-grid { gap: 18px; }
  .home-page .feature-card, .home-page .price-card { border-radius: 18px; }
  .home-page .final-cta { border-radius: 22px; }
}
@media (max-width: 600px) {
  .cinema { --scene-header: 74px; }
  .cinema-chapter { scroll-margin-top: 74px; }
}
@keyframes signature-float-mobile {
  0%,100% { transform: translate3d(0,3px,0) rotate(-.5deg); }
  50% { transform: translate3d(0,-3px,0) rotate(.5deg); }
}
@media (max-width: 380px) {
  .home-page .cinema .hero-actions { gap: 8px 15px; }
  .home-page .cinema .hero-actions .button { font-size: .75rem; padding-inline: 13px; }
}

@media print {
  .cinema, .cinema.mobile-story { --stage-height: auto; height: auto; }
  .mobile-story .cinema-stage { display: contents; }
  .mobile-story .cinema-chapters { position: relative; }
  .home-page .mobile-story .cinema-chapter { position: relative; opacity: 1; transform: none; }
  .home-page .mobile-story .hero-layout, .mobile-story .story-layout { position: relative; top: auto; }
  .cinema-visual { display: none; }
  .cinema-chapters { margin-top: 0; }
  .cinema-chapter, .story-layout { min-height: 0; }
  .home-page .cinema .hero-layout { height: auto; }
  .story-layout { padding-block: 30px; }
  .story-copy { width: 100%; }
}