/* hoxt.ing marketing composition. Apple surface, type, radius, and action tokens. */
.brand { font-size: 28px; font-weight: 600; letter-spacing: -.065em; }
.brand-logo { display: block; width: 124px; height: auto; }
header .brand-logo { filter: invert(1); }
footer .brand-logo { width: 116px; }
.home-page header { background: #090b0e; }
.launch-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #090b0e;
  color: #fff;
}
.hero-layout {
  min-height: 648px;
  display: flex;
  align-items: center;
  padding-block: 80px;
  position: relative;
}
.hero-copy { width: 48%; max-width: 520px; }
.hero-copy .eyebrow { color: #ccc; margin-bottom: 24px; }
.hero-copy h1 { font-size: 56px; line-height: 1.07; letter-spacing: -.035em; }
.hero-copy h1 span { color: #b9bec6; }
.hero-copy .lead { font-size: 21px; line-height: 1.47; color: #ccc; max-width: 390px; margin-top: 24px; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; margin-top: 32px; }
.hero-actions .button { padding: 13px 26px; }
.hero-link { color: #2997ff; text-decoration: none; min-height: 48px; display: inline-flex; align-items: center; gap: 8px; }
.hero-link:hover { text-decoration: underline; }
.hero-art { position: absolute; inset: 0 0 0 auto; width: 83%; z-index: -1; }
.hero-art img, .hero-art video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% center;
  /* Blend the photograph's edge into its studio backdrop, without an extra decorative layer. */
  mask-image: linear-gradient(to right, transparent, #000 28%);
}
.hero-art video { position: absolute; inset: 0; z-index: 1; }
.hero-art .hero-fallback { position: relative; z-index: 0; }
.home-page .plans-section h2 { max-width: 620px; }
.home-page .plan h3 { font-size: 28px; }
.home-page .plan .price { font-weight: 600; }
.home-page .plan { border-color: transparent; }

@media (max-width: 1068px) {
  .hero-layout { min-height: 600px; }
  .hero-copy h1 { font-size: 40px; }
  .hero-copy .lead { max-width: 340px; font-size: 21px; }
  .hero-actions { gap: 20px; }
}
@media (max-width: 833px) {
  .hero-layout { min-height: 0; padding-block: 56px 0; }
  .hero-copy { width: 100%; max-width: 580px; }
  .hero-copy h1 { font-size: 40px; }
  .hero-copy .lead { max-width: 440px; }
  .hero-art { position: relative; width: 100%; height: 420px; margin-top: -24px; z-index: -1; }
  .hero-art img, .hero-art video { object-fit: contain; mask-image: linear-gradient(to bottom, transparent, #000 16%); }
  .launch-hero { display: flex; flex-direction: column; }
  .hero-layout { order: -1; width: 100%; }
  .hero-actions { margin-top: 28px; }
}
@media (max-width: 640px) {
  .brand { font-size: 26px; }
  .brand-logo { width: 112px; }
  footer .brand-logo { width: 108px; }
  .hero-layout { padding-top: 40px; }
  .hero-copy .eyebrow { margin-bottom: 20px; }
  .hero-copy h1 { font-size: 34px; }
  .hero-copy .lead { font-size: 17px; max-width: 350px; margin-top: 20px; }
  .hero-art { height: 310px; margin-top: 0; }
  .hero-art img, .hero-art video { object-fit: cover; object-position: 55% center; }
  .hero-actions { gap: 24px; }
  .hero-link { font-size: 16px; }
}
@media (max-width: 419px) {
  .hero-copy h1 { font-size: 34px; }
  .hero-art { height: 280px; }
  .hero-actions .button { padding-inline: 22px; }
}
@media (prefers-color-scheme: dark) {
  :root { --surface: #272729; --paper: #1d1d1f; --ink: #f5f5f7; --muted: #b9b9bf; --line: #48484a; --link: #2997ff; --focus: #2997ff; }
  .button.secondary { border-color: var(--link); }
  .home-page .plan { border-color: var(--line); }
  footer .brand-logo { filter: invert(1); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-art .hero-video { display: none; }
}