@font-face{font-family:Genia;src:local('Helvetica Neue');font-weight:100 900;font-display:swap}
:root{color-scheme:dark;--ink:#030509;--white:#eff1f5;--muted:#939ba8;--page-width:1180px;--page-gutter:24px;font-family:Genia,'Helvetica Neue',Helvetica,Arial,sans-serif;background:var(--ink);color:var(--white)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;overflow-x:hidden}::selection{background:#b9cfeb;color:#030509}
.universe{position:fixed;inset:0;pointer-events:none;overflow:hidden;background:radial-gradient(ellipse at 72% 42%,#0a101b55,transparent 57%),#030509}
#universe{display:block;width:100%;height:100%;opacity:0;transition:none}.graphics-ready #universe{opacity:1}
#fallback-field{position:absolute;inset:0;display:block;width:100%;height:100%}.graphics-ready #fallback-field{visibility:hidden}
main{position:relative}.chapter{height:120svh;position:relative}.chapter:last-child{height:var(--viewport-height,100svh)}.chapter__viewport{width:100%;max-width:calc(var(--page-width) + var(--page-gutter)*2);margin-inline:auto;position:sticky;top:0;min-height:var(--viewport-height,100svh);display:flex;align-items:center;padding:calc(var(--header-bottom,90px) + 8vh) var(--page-gutter) 8vh;isolation:isolate}
.editorial{width:43%;max-width:580px;will-change:transform}.eyebrow{margin:0 0 30px;font-size:14px;font-weight:400;letter-spacing:.02em;line-height:1.5;color:#c2c9d4}
h1,h2{margin:0;font-weight:400;letter-spacing:-.058em;line-height:1.07;text-wrap:balance}h1{font-size:clamp(46px,4.8vw,82px)}h2{font-size:clamp(39px,3.9vw,66px)}.description{margin:30px 0 0;font-size:16px;line-height:1.65;max-width:340px;color:var(--muted);text-wrap:pretty;font-weight:400}.chapter--right .editorial{margin-left:auto}
@media(max-width:768px){:root{--page-gutter:20px}}
@media(max-width:480px){:root{--page-gutter:16px}}
@media(max-width:760px){.chapter__viewport{align-items:flex-end;padding:0 var(--page-gutter) 10svh}.editorial{width:100%;max-width:540px;margin-left:0}.chapter--right .editorial{margin-left:auto}.eyebrow{font-size:13px;margin-bottom:16px}h1{font-size:clamp(38px,9.7vw,65px)}h2{font-size:clamp(32px,8.6vw,56px)}.description{font-size:15px;line-height:1.6;margin-top:19px;max-width:350px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}#universe{transition:none}.editorial{will-change:auto}}
@media(max-height:570px) and (min-width:761px){h1{font-size:46px}h2{font-size:39px}.description{margin-top:18px}.eyebrow{margin-bottom:18px}}

/* Captions and silhouettes share the area below the visible header. */
.composition-ready .chapter__viewport{align-items:flex-start;padding-top:var(--editorial-top);padding-bottom:0}

@media(min-width:580px) and (max-width:760px) and (max-height:520px){
  .editorial{width:43%;max-width:580px}
  h1,h2{font-size:clamp(26px,4.3vw,32px)}
  .eyebrow{margin-bottom:12px;font-size:12px}
  .description{font-size:14px;line-height:1.5;margin-top:14px}
}

/* Product cards. Real padding keeps the surface inside the page grid and
   lets the scene composition measure the complete card on every viewport. */
.editorial {
  --card-radius: 28px;
  --card-padding: clamp(24px, 3vw, 40px);
  position: relative;
  isolation: isolate;
  width: 46%;
  max-width: 548px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  text-align: left;
  -webkit-font-smoothing: antialiased;
}
.editorial.product {
  padding: var(--card-padding);
  border-radius: var(--card-radius);
}
/* A quiet callout points from each desktop card toward its constellation. */
.product .product__connector {display: none}
@media (min-width: 1025px) {
  .product .product__connector {
    display: block;
    position: absolute;
    z-index: 0;
    top: calc(var(--card-padding) + clamp(18px, 1.97vw, 28px));
    left: calc(100% + 1px);
    width: clamp(36px, 4.5vw, 64px);
    height: 1px;
    background: #fff;
    pointer-events: none;
  }
  .product__connector::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -3px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    transform: translateY(-50%);
  }
  .chapter--right .product__connector {
    left: auto;
    right: calc(100% + 1px);
    transform: scaleX(-1);
  }
}
.editorial--intro {container: product-intro / inline-size}
.editorial .description {
  max-width: 29rem;
  margin: 22px 0 0;
  color: #b5b5bf;
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: -.012em;
  text-wrap: pretty;
}

.editorial--intro h1 {
  color: #fff;
  font-size: clamp(2.5rem, 4.5vw, 4.25rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -.052em;
  text-wrap: initial;
}
.product-directory {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 30px;
  max-width: 420px;
}
.product-directory__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 999px;
  color: #e2e2e7;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.015em;
  text-decoration: none;
}
.product-directory__item svg, .product__link svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.product-directory__item svg {width: 12px; height: 12px; color: #a8a8b2}
.product-directory__item:focus-visible, .product__link:focus-visible {
  outline: 2px solid #d7baff;
  outline-offset: 5px;
}
.product .product__title {
  margin: 0;
  color: #f5f5f7;
  font-size: clamp(2rem, 3.65vw, 3.25rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.045em;
  text-wrap: initial;
  overflow-wrap: normal;
}
.product__purpose {
  margin: 22px 0 0;
  color: #e0e0e6;
  font-size: clamp(1.25rem, 1.8vw, 1.625rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.025em;
  text-wrap: pretty;
}
.product__action {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 16px;
  margin-top: 30px;
}
.product__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 44px;
  max-width: 100%;
  padding: 12px 20px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: #fff;
  color: #18181d;
  font: 500 .875rem/1.3 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  letter-spacing: -.01em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s ease, box-shadow .2s ease;
}
.product__link svg {transition: transform .2s ease}
.product__link:not(:disabled):active {background: #d9d9e1}
.product__link:disabled {
  opacity: 1;
  -webkit-text-fill-color: currentColor;
  cursor: not-allowed;
}
@media (hover: hover) and (pointer: fine) {
  .product-directory__item:hover {border-color: rgb(255 255 255 / 15%); color: #fff}
  .product__link:not(:disabled):hover {background: #fff; box-shadow: 0 0 24px rgb(255 255 255 / 9%)}
  .product__link:not(:disabled):hover svg {transform: translateX(3px)}
}
@media (max-width: 760px) {
  .editorial {--card-radius: 24px; --card-padding: 24px; width: 100%; max-width: 540px}
  .editorial--intro h1 {font-size: clamp(2.125rem, 10.3vw, 3.5rem)}
  .editorial .description {margin-top: 18px; font-size: .9375rem; line-height: 1.6}
  .product-directory {margin-top: 24px; gap: 6px}
  .product-directory__item {padding-inline: 10px; gap: 5px; font-size: .8125rem}
  .product .product__title {font-size: clamp(1.75rem, 8.5vw, 2.75rem); letter-spacing: -.04em}
  .product__purpose {margin-top: 16px; font-size: 1.1875rem; line-height: 1.3}
  .product__action {margin-top: 24px; gap: 10px 12px}
}
@media (max-height: 700px) and (max-width: 760px) {
  .editorial {--card-padding: 20px; --card-radius: 22px}
  .editorial--intro h1 {font-size: clamp(2rem, 9.5vw, 3rem)}
  .editorial .description {margin-top: 14px; line-height: 1.5}
  .product-directory, .product__action {margin-top: 20px}
  .product__purpose {display: none}
}
@media (max-height: 570px) and (min-width: 761px), (min-width: 580px) and (max-width: 760px) and (max-height: 520px) {
  .editorial {--card-padding: 20px; --card-radius: 22px; width: 46%; max-width: 548px}
  .editorial--intro h1 {font-size: clamp(1.875rem, 4vw, 2.75rem)}
  .editorial .description {margin-top: 14px; font-size: .875rem; line-height: 1.5}
  .product-directory, .product__action {margin-top: 18px}
  .product .product__title {font-size: clamp(1.625rem, 3.4vw, 2.25rem)}
  .product__purpose {display: none}
}
@media (min-width: 580px) and (max-height: 430px) {
  .editorial {--card-padding: 16px; --card-radius: 20px}
  .editorial--intro h1 {font-size: 1.75rem}
  .editorial--intro .description {font-size: .8125rem; line-height: 1.45}
  .editorial .description {margin-top: 12px}
  .product-directory, .product__action {margin-top: 14px}
}
@container product-intro (max-width: 280px) {
  .product-directory__item {padding-inline: 8px; font-size: .75rem}
  .product-directory__item svg {display: none}
}
@media (prefers-reduced-motion: reduce) {
  .product-directory__item, .product__link, .product__link svg {transition: none}
  .product__link:not(:disabled):hover svg {transform: none}
}
@media (forced-colors: active) {
  .editorial.product {background: Canvas; border-color: CanvasText; box-shadow: none}
  .product-directory__item, .product__link {border-color: ButtonText}
  .product__link:disabled {border-color: GrayText; color: GrayText}
  .product-directory__item:focus-visible, .product__link:focus-visible {outline-color: Highlight}
}

/* Local reading surfaces darken the stars, never the lettering. Their soft
   edges move with the copy and leave the illustration columns unobscured. */
:is(.editorial--intro,.partners__intro,.podcast__intro,.about__copy){
  --reading-fade:80px;
  position:relative;
  isolation:isolate;
}
:is(.editorial--intro,.partners__intro,.podcast__intro,.about__copy)::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:calc(-1 * var(--reading-fade));
  background:rgb(3 5 9 / 48%);
  pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--reading-fade),#000 calc(100% - var(--reading-fade)),transparent),linear-gradient(180deg,transparent,#000 var(--reading-fade),#000 calc(100% - var(--reading-fade)),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 var(--reading-fade),#000 calc(100% - var(--reading-fade)),transparent),linear-gradient(180deg,transparent,#000 var(--reading-fade),#000 calc(100% - var(--reading-fade)),transparent);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}
:is(.partners__intro,.podcast__intro)::before{
  left:50%;right:auto;
  width:calc(min(100%,760px) + var(--reading-fade) * 2);
  transform:translateX(-50%);
}
.about__copy::before{inset-block:calc(58px - var(--reading-fade))}
@media(max-width:1024px){
  /* Reading masks may bleed to the edge, but must not widen the page. Unlike
     hidden overflow, clip preserves the viewport as the sticky scroll parent. */
  .home-page main{overflow-x:clip}
}
@media(max-width:760px){
  :is(.editorial--intro,.partners__intro,.podcast__intro,.about__copy){--reading-fade:32px}
  .about__copy::before{top:calc(14px - var(--reading-fade));bottom:calc(42px - var(--reading-fade))}
}
@media(max-width:579px),(max-width:760px) and (min-height:521px){
  .home-page .editorial,.home-page .chapter--right .editorial{margin-inline:auto}
}
@media(forced-colors:active){
  :is(.editorial--intro,.partners__intro,.podcast__intro,.about__copy)::before{display:none}
}