/* Final contrast guard: the page intentionally alternates light and dark worlds. */
:where(.hero,.product-theatre,.highlights,.statement,.live-demo,.ports,.trust,.waitlist){color:#f5fbff}

/* Dark editorial sections: headings must never inherit the dark ink token. */
.hero h1,.statement h2,.trust h2,.waitlist h2,.ports-heading h2,.port-card h3{color:#f5fbff}
.hero .lede,.statement>p:last-child,.trust-copy>p:not(.eyebrow),.waitlist>p:not(.eyebrow){color:#c9dce5}
.hero .eyebrow,.statement .eyebrow,.trust .eyebrow,.waitlist .eyebrow,.ports .eyebrow{color:#86ece4}

/* Product entry cards: readable even over glass, glows and moving backgrounds. */
.ports-heading>p{color:#d7e8ee}
.port-index{color:#bfd7e1}
.port-card h3{font-weight:680}
.port-card p{color:#d5e5eb}
.port-card a{color:#c1fff8;font-weight:650}
.port-card a:focus-visible,.port-card a:hover{color:#fff;text-decoration:underline;text-underline-offset:5px}

/* The visual demos retain a hierarchy without using low-contrast grey-on-navy copy. */
.demo-heading>p,.demo-captions p{color:#d2e2e8}
.demo-card-head span,.demo-app>strong{color:#f6feff}
.demo-edge>p,.live-measures span,.demo-quality,.demo-cloud span,.demo-cloud small,.demo-app p{color:#c5dbe3}

/* Keep the strong colours reserved for state and interaction, not primary copy. */
.trust-copy>a{color:#a8fff5;font-weight:650}
.hero-foot,.motion-status{color:#b8d1db}

@media (max-width:560px){
  .ports-heading>p,.port-card p,.demo-heading>p,.demo-captions p{font-size:15px}
}

/* The launch image carries a warm studio backdrop. Let it dissolve into one canvas,
   instead of looking like a warm rectangle pasted onto a cool white hero. */
.launch-hero{
  background:radial-gradient(ellipse at 76% 76%,#fffaf5 0%,#f4eee7 42%,transparent 70%),#f1ebe4;
}
.launch-hero:before{
  inset:0;
  right:auto;
  bottom:auto;
  width:auto;
  height:auto;
  border-radius:0;
  background:radial-gradient(ellipse at 72% 48%,#ffffff85,transparent 42%),linear-gradient(90deg,#f4eee7 0%,#f4eee7c8 47%,#f4eee730 79%,#f1ebe4 100%);
  pointer-events:none;
}
.launch-product{
  width:min(100%,650px);
  max-height:710px;
  mix-blend-mode:multiply;
  filter:drop-shadow(0 32px 28px #8f776326);
  -webkit-mask-image:radial-gradient(ellipse 85% 88% at 50% 54%,#000 56%,transparent 100%);
  mask-image:radial-gradient(ellipse 85% 88% at 50% 54%,#000 56%,transparent 100%);
}

@media (max-width:900px){
  .launch-product{width:min(100%,480px);max-height:none}
}

/* Remove the residual two-column seam: the product now lives in the same studio
   canvas as the copy, with its photographic edge faded into the backdrop. */
.launch-hero{background:#f1ebe4}
.launch-hero:before{z-index:0;background:radial-gradient(ellipse at 70% 54%,#fffdf9 0%,#f4eee7 49%,#f1ebe4 100%)}
.launch-hero:after{display:none}
.launch-copy{z-index:2}
.launch-product{z-index:1;opacity:1;mix-blend-mode:normal;filter:drop-shadow(0 30px 28px #8f776344);-webkit-mask-image:none;mask-image:none;pointer-events:none}

@media (max-width:900px){
  .launch-hero:after{right:50%;bottom:-28px;width:530px;height:495px;transform:translateX(50%);background-position:center bottom}
}

/* AI product photography has a studio-black canvas of its own. Fade that canvas
   away on all four sides so the object reads as part of the site, not a square asset. */
.product-theatre .theatre-object img{
  mix-blend-mode:normal;
  -webkit-mask-image:none;
  mask-image:none;
}
.product-theatre .theatre-copy h2{font-size:clamp(46px,4.45vw,68px)}
.product-theatre .label-bottom{right:1%;bottom:9%;padding:10px 12px;border:1px solid #8cefe638;border-radius:13px;background:#061827b8;box-shadow:0 12px 28px #0005;backdrop-filter:blur(12px)}