/* Full-bleed artwork tiles. All dimensions are flexible export guides. */
:root { --header-height: 56px; --section-title-height: 56px; }
html { scroll-padding-top: var(--header-height); }
.header-inner { height: var(--header-height); }
.site-header { border: 0; box-shadow: inset 0 -1px #ffffff14; }
.app-logo img { width: 36px; height: 36px; }

.artwork-panel { background-color: var(--artwork-color, #344c6b); }
/* Solid loading surface behind the opening artwork on every screen size. */
.hero, .hero-art { background: #000; }
.artwork-name { display: block; font: 400 48px/1.1 var(--display); letter-spacing: .025em; }
.hero-spec { top: 60%; gap: 10px; padding: 20px 26px; background: none; border: 0; text-shadow: 0 2px 15px #080d17; }
.hero-spec small, .panel-spec small { max-width: 230px; }

/* Keep clipping inside the tile: overflow on the section would break sticky. */
.artwork-panel { position: relative; padding: 0; overflow: visible; color: var(--paper); border: 0; }
.section-title { position: sticky; top: var(--header-height); z-index: 5; background: var(--paper); color: var(--void); }
.section-title-inner { height: var(--section-title-height); min-height: var(--section-title-height); display: flex; align-items: center; gap: 20px; padding-block: 0; }
.section-number { flex: 0 0 28px; font-size: 24px; line-height: 1; font-weight: 600; letter-spacing: .02em; }
/* Consistent 13px regular titles; section numbers retain their own sizing. */
.section-label { margin: 0; min-width: 0; font: 400 13px/1.3 var(--body); letter-spacing: .01em; white-space: nowrap; }
.features .section-title { background: var(--cobalt); color: var(--paper); }
.in-action .section-title { background: var(--navy); color: var(--paper); }
.download .section-title { background: var(--paper); color: var(--void); }
.artwork-tile { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: stretch; gap: 80px; padding-block: clamp(64px, 6vw, 88px) 36px; }
.introduction .artwork-tile { min-height: clamp(680px, 52vw, 800px); }
.features .artwork-tile { min-height: clamp(940px, 76vw, 1120px); }
.in-action .artwork-tile { min-height: 1160px; }
.download .artwork-tile { min-height: clamp(840px, 66vw, 1000px); }

.panel-art { position: absolute; inset: -260px 0; z-index: -1; pointer-events: none; background-color: var(--artwork-color, #344c6b); background-image: linear-gradient(45deg, transparent 49.5%, #eee9de30 49.7%, #eee9de30 50.3%, transparent 50.5%), linear-gradient(-45deg, transparent 49.5%, #eee9de30 49.7%, #eee9de30 50.3%, transparent 50.5%), radial-gradient(circle, #eee9de66 2px, transparent 3px); background-size: 220px 220px; background-position: center; will-change: transform; }
.panel-art::after, .hero.has-artwork .hero-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, #080d17d9 0%, #080d17b8 55%, #080d1780 100%); }
.hero.has-artwork .hero-art::after { background: linear-gradient(180deg, #080d17a6 0%, #080d1773 38%, #080d1733 58%, #080d17cc 100%); }
.in-action .panel-art::after { background: #080d17d9; }

.panel-content { position: relative; }
.artwork-panel .panel-headline { margin-bottom: 32px; font-size: clamp(112px, 11vw, 172px); line-height: .98; letter-spacing: .005em; text-wrap: balance; }
.artwork-panel .eyebrow, .artwork-panel .feature-number { color: #e2e9ff; }
.artwork-panel .eyebrow { margin-bottom: 20px; }
.introduction .intro-copy { color: var(--paper); max-width: 680px; font-size: clamp(24px, 2.2vw, 32px); line-height: 1.4; }
.panel-spec { position: relative; align-self: flex-end; display: grid; grid-template-columns: auto auto; align-items: baseline; justify-content: end; margin-top: auto; margin-right: max(48px, calc((100% - 1200px) / 2)); max-width: calc(100% - 96px); gap: 4px 12px; padding: 0; border: 0; background: none; color: var(--ash); text-align: right; font-size: 9px; }
.panel-spec .artwork-name { font: 600 12px/1.4 var(--body); letter-spacing: .04em; }
.panel-spec strong { font-size: 13px; white-space: nowrap; }
.panel-spec > span:last-child { grid-column: 1 / -1; }
.feature-grid { margin-top: 48px; gap: 48px; }
.feature-grid article { border-color: #eee9de55; }
.feature-grid h3 { min-height: 62px; }
.feature-grid p { max-width: 340px; }
.action-intro { margin: 0; font-size: 24px; }
.download-bottom { display: block; margin: 0; }
.download-bottom > p:first-child { font-size: 28px; }
.download-buttons { flex-wrap: wrap; }
.platform-note { margin-top: 22px; padding: 0; }

.artwork-picture { position: absolute; inset: 0; display: block; opacity: 0; pointer-events: none; }
.artwork-picture.is-loaded { opacity: 1; }
.artwork-picture img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.has-artwork .artwork-label { visibility: hidden; }

@media (max-width: 767px) {
  :root { --header-height: 52px; --section-title-height: 52px; }
  .header-inner { min-height: 52px; height: auto; padding-block: 2px; }
  .menu-toggle { padding-block: 0; line-height: 1; }
  .menu-toggle span { line-height: 1; }
  .app-logo img { width: 34px; height: 34px; }
  .section-title-inner { gap: 12px; }
  .section-number { flex-basis: 24px; font-size: 20px; }
  .hero-spec { top: 54%; padding: 16px 20px; gap: 7px; }
  .hero-spec .artwork-name { font-size: 42px; }
  .hero-spec .spec-cross { margin-bottom: 0; }
  .artwork-tile { padding-block: 48px 28px; gap: 64px; }
  .artwork-panel .panel-headline { font-size: clamp(80px, 23vw, 104px); margin-bottom: 28px; }
  .introduction .artwork-tile { min-height: 680px; }
  .features .artwork-tile { min-height: 1100px; }
  .in-action .artwork-tile { min-height: 1260px; }
  .download .artwork-tile { min-height: 880px; }
  .panel-art { background-size: 150px 150px; }
  .panel-spec { margin-right: 24px; max-width: calc(100% - 48px); }
  .feature-grid { gap: 24px; margin-top: 28px; }
  .feature-grid article { display: grid; grid-template-columns: 24px minmax(0,1fr); gap: 14px; }
  .feature-number { margin-top: 4px; }
  .feature-grid h3 { min-height: 0; margin-bottom: 10px; }
  .action-intro { font-size: 20px; }
  .download-bottom > p:first-child { font-size: 24px; }
  .download-buttons { max-width: 400px; }
}
@media (prefers-reduced-motion: reduce) { .panel-art { transform: none !important; will-change: auto; } }

/* Keep opening artwork synchronized with compositor scrolling where supported. */
@supports (animation-timeline: scroll(root block)) and (animation-range: 0px 1px) {
  @media (prefers-reduced-motion: no-preference) {
    .hero-art {
      animation: hero-parallax linear both;
      animation-timeline: scroll(root block);
      animation-range: 0px var(--hero-parallax-distance, 100svh);
    }
  }
}
@keyframes hero-parallax {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, 45%, 0); }
}