/* Size the full scene, including its moving poses, rather than clipping a tall canvas. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.hero-visual { position: absolute; inset: 0; perspective: 1200px; transform: scale(.84); transform-origin: 50% 12%; }
.hero-stage { width: min(100%, 660px, calc((100svh - 160px) * .98)); aspect-ratio: .8; justify-self: center; }
.hero-copy { min-width: 0; }
.hero-actions { max-width: 100%; }
.hero-actions .button { max-width: 100%; }
.feature-menu .menu-art { padding: 42px 20px 18px; gap: 12px; justify-content: center; }
.feature-menu .qr-card { width: min(46%, 132px); padding-inline: 10px; }
.feature-menu .qr-card > svg { max-width: 100%; }
.intelligence-visual { padding-block: 56px 70px; }
@keyframes brand-ticker { to { transform: translateX(calc(-1 * var(--ticker-distance, 50%))); } }

@media (min-width: 700px) and (max-width: 899px) {
  .intelligence-visual .invoice-art { width: 70%; }
}

@media (min-width: 700px) and (max-width: 999px) {
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-control { grid-column: 1 / -1; }
}

@media (min-width: 1000px) {
  .site-header, .hero, .site-footer { --safe-padding: clamp(32px, 4vw, 80px); }
  .site-header { min-height: 84px; }
  .hero { --hero-room: calc(100svh - 242px); gap: clamp(24px, 4vw, 64px); padding-block: 28px 44px; }
  .hero-copy { width: 100%; max-width: 760px; }
  .hero-stage { width: min(100%, calc(var(--hero-room) * .98)); aspect-ratio: .98; }
  .hero-visual { width: min(calc(100% - 80px), calc((var(--hero-room) - 80px) * .98)); height: calc(100% - 80px); left: 50%; right: auto; bottom: auto; container-type: inline-size; transform: translateX(-50%) scale(.84); }
  .hero h1 { font-size: clamp(88px, min(10vw, calc(var(--hero-room) * .19)), 280px); }
  .capability-list { min-height: 76px; }
  .capability-list > span { padding-block: 12px; }
  .section-shell:not(.hero):not(.site-footer):not(.capability-list) { width: calc(100% - clamp(64px, 8vw, 160px)); max-width: none; }
  .section-heading { gap: clamp(40px, 5vw, 96px); }
  .section-heading > p { max-width: 36ch; font-size: clamp(15px, 1vw, 19px); }
  .product-section h2, .workflow-copy h2, .intelligence-copy h2, .modular-section h2, .case-copy h2, .faq-section h2 { font-size: clamp(48px, 4.3vw, 96px); }
  .feature, .module-card { padding-inline: clamp(24px, 2.2vw, 48px); }
  .feature h3, .module-card h3 { font-size: clamp(27px, 1.9vw, 38px); }
  .feature > p, .module-card > p, .module-card ul { font-size: clamp(14px, .95vw, 18px); }
  .feature > p, .module-card > p { max-width: 52ch; }
  .feature-menu .menu-art { width: 100%; max-width: 460px; align-self: center; }
  .feature-operation .order-stack { width: 100%; max-width: 520px; align-self: center; }
  .feature-operation .order-stack > div { left: 6%; right: 6%; }
  .workflow-copy > p:not(.eyebrow):not(.interaction-note), .intelligence-copy > p:not(.eyebrow):not(.fine-print), .case-copy > p:not(.eyebrow) { max-width: 52ch; font-size: clamp(16px, 1vw, 20px); }
  .workflow-demo .scene-card { max-width: 600px; margin-inline: auto; }
  .intelligence-visual .invoice-art { max-width: 380px; }
  .check-list li, .faq-list summary, .faq-list details p { font-size: clamp(15px, .95vw, 18px); }
  .faq-list details p { max-width: 70ch; }
  .contact-inner h2 { font-size: clamp(64px, 5.5vw, 112px); }
  .contact-mark { max-width: 620px; justify-self: center; }
}

@media (min-width: 1800px) {
  .hero { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
  .hero-stage { width: 100%; max-height: var(--hero-room); }
  .stage-shout { font-size: min(27cqw, calc(var(--hero-room) * .5)); }
}

@media (min-width: 1000px) and (max-height: 800px) {
  .site-header { min-height: 72px; }
  .hero { padding-block: 24px; }
  .hero-copy { padding-block: 0; }
  .hero h1 { font-size: clamp(64px, min(7.5vw, 13svh), 96px); }
  .hero-copy > .eyebrow { margin-bottom: 16px; }
  .hero-title-intro { padding-bottom: 10px; }
  .hero-description { margin-top: 22px; font-size: 15px; }
  .hero-actions { margin-top: 18px; }
  .hero .hero-signature { margin-top: 14px; }
}

@media (min-width: 700px) and (max-width: 999px) {
  .hero { display: flex; flex-direction: column; gap: 0; --safe-padding: 28px; padding-block: 28px 44px; }
  .hero-copy { display: contents; }
  .hero-copy > .eyebrow { order: 0; align-self: start; margin-bottom: 16px; }
  .hero h1 { order: 1; align-self: start; font-size: clamp(84px, 12vw, 112px); }
  .hero-stage { order: 2; align-self: center; width: min(100%, 560px, 68svh); margin: 28px 0 24px; }
  .hero-description { order: 3; align-self: start; max-width: 540px; margin-top: 0; }
  .hero-actions { order: 4; align-self: start; margin-top: 22px; }
  .hero-signature { order: 5; align-self: start; }
}

@media (max-width: 699px) {
  .hero-stage { width: min(100%, 420px); align-self: center; }
  .hero-actions { gap: 10px 16px; }
  .hero-actions .button { gap: 12px; padding-inline: 14px; }
  body > .motion-toggle { width: 44px; min-height: 44px; padding: 0; justify-content: center; }
  .motion-toggle-label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

@media (min-width: 1000px) and (max-height: 600px) {
  .site-header { min-height: 64px; }
  .hero { padding-block: 12px; }
  .hero h1 { font-size: clamp(52px, 12svh, 72px); }
  .hero-copy > .eyebrow { margin-bottom: 12px; }
  .hero-description { margin-top: 12px; font-size: 14px; line-height: 1.6; }
  .hero-actions { margin-top: 10px; }
  .hero .hero-signature { margin-top: 10px; font-size: 10px; line-height: 1.5; }
}

@media (min-width: 1000px) and (max-height: 480px) {
  .hero { --hero-room: 300px; }
}

@media (orientation: landscape) and (max-width: 999px) and (max-height: 650px) {
  .site-header { min-height: 64px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: calc(72px + env(safe-area-inset-right, 0px)); gap: 12px; }
  .site-header .wordmark { font-size: clamp(24px, 5.2vw, 30px); }
  .site-header .brand-mark { width: 22px; height: 28px; margin-right: 6px; }
  .site-header .button-small { font-size: 11px; gap: 8px; padding-inline: 10px; }
  .main-nav { display: none; }
  body > .motion-toggle { top: calc(10px + env(safe-area-inset-top, 0px)); right: calc(16px + env(safe-area-inset-right, 0px)); bottom: auto; width: 44px; min-height: 44px; padding: 0; justify-content: center; }
  .motion-toggle-label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 24px; align-items: start; padding-block: 20px 28px; }
  .hero-copy { display: block; padding-block: 0; }
  .hero-copy > .eyebrow { margin-bottom: 12px; font-size: 8px; }
  .hero h1 { font-size: clamp(48px, 7vw, 64px); }
  .hero-title-intro { padding-bottom: 7px; }
  .hero-stage { order: initial; align-self: start; width: min(100%, 340px, calc((100svh - 110px) * .94)); aspect-ratio: .74; margin: 0; }
  .hero-stage .floating-ticket { bottom: max(16%, 96px); }
  .hero-description { margin-top: 16px; font-size: 14px; line-height: 1.6; }
  .hero-actions { margin-top: 16px; gap: 8px 12px; }
  .hero-actions .button { min-height: 44px; padding-block: 10px; }
  .hero .hero-signature { margin-top: 12px; font-size: 10px; line-height: 1.5; }
}

@media (orientation: landscape) and (max-width: 699px) and (max-height: 650px) {
  .hero-stage { aspect-ratio: .6; }
}