html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

/* Keep the grain below the nav. Safari tints the strip under the status bar
   from the topmost fixed element, and this transparent layer would win. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 -1 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

[hidden] {
  display: none !important;
}

.js:not(.hero-done) [data-hero] {
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .js:not(.hero-done) [data-hero] {
    visibility: visible;
  }
}

html:not(.tabs-ready) .platform-tabs {
  display: none;
}

html:not(.tabs-ready) .platform-panel+.platform-panel {
  margin-top: 5rem;
}

/* Panels share one grid cell, so switching tabs never changes the page height */
.tabs-ready .platform-panels {
  display: grid;
}

.tabs-ready .platform-panel {
  grid-area: 1 / 1;
}

.tabs-ready .platform-panel.is-off {
  visibility: hidden;
}

#site-nav {
  isolation: isolate;
  border-bottom: 1px solid transparent;
  transition: background-color .3s, border-color .3s;
}

/* The blur sits on a layer behind the bar because Safari won't take the
   status bar tint from an element that has a backdrop-filter */
#site-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transition: backdrop-filter .3s;
}

#site-nav.is-scrolled {
  background-color: rgb(0 15 26 / .8);
  border-bottom-color: rgb(255 255 255 / .07);
}

#site-nav.is-scrolled::before {
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
}

.grid-lines {
  background-image: linear-gradient(rgb(121 208 255 / .07) 1px, transparent 1px), linear-gradient(90deg, rgb(121 208 255 / .07) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 70% 65% at 62% 38%, #000 15%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 65% at 62% 38%, #000 15%, transparent 75%);
}

.grid-lines-ink {
  background-image: linear-gradient(rgb(0 25 42 / .05) 1px, transparent 1px), linear-gradient(90deg, rgb(0 25 42 / .05) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* The shimmer script lights the 8px squares, so its cell size has to match */
.hero-grid {
  background-image:
    linear-gradient(rgb(121 208 255 / .07) 1px, transparent 1px),
    linear-gradient(90deg, rgb(121 208 255 / .07) 1px, transparent 1px),
    linear-gradient(rgb(121 208 255 / .035) 1px, transparent 1px),
    linear-gradient(90deg, rgb(121 208 255 / .035) 1px, transparent 1px),
    linear-gradient(rgb(121 208 255 / .018) 1px, transparent 1px),
    linear-gradient(90deg, rgb(121 208 255 / .018) 1px, transparent 1px);
  background-size: 64px 64px, 64px 64px, 16px 16px, 16px 16px, 8px 8px, 8px 8px;
  -webkit-mask-image: radial-gradient(ellipse 80% 75% at 64% 34%, #000 20%, transparent 80%), radial-gradient(ellipse 45% 55% at 100% 0, #000 15%, transparent);
  mask-image: radial-gradient(ellipse 80% 75% at 64% 34%, #000 20%, transparent 80%), radial-gradient(ellipse 45% 55% at 100% 0, #000 15%, transparent);
}

/* 3D scenes are drawn in em, and each scene's font size is its width divided by its design width */
.cq {
  container-type: inline-size;
}

.scale-44 {
  font-size: min(1.9vw, 13px);
  font-size: calc(100cqw / 44);
}

/* The tilted hero rig reaches past its box, so below the two-column layout it gets extra room on the sides */
@media (max-width: 1023px) {
  .hero-visual .scale-44 {
    font-size: calc(100cqw / 52);
  }

  /* The devices sit left of the stage's center, so this centers them on the page */
  .hero-visual .stage {
    left: 3.8em;
  }
}

@media (max-width: 767px) {
  /* The game's side panels are fixed in em, so a bigger em only narrows the canvas */
  .show-browser .scale-64 {
    font-size: calc(100cqw / 44);
  }
}

/* Beside the headline the rig is drawn wider than its column, overhanging to the
   left where the headline's short middle lines leave room, with the dashboard's
   right edge on the container edge */
@media (min-width: 1024px) {
  .hero-visual .scale-44 {
    font-size: calc(100cqw / 37);
  }

  .hero-visual .stage {
    margin-left: calc(100cqw - 41em);
  }
}

.scale-64 {
  font-size: min(1.4vw, 15px);
  font-size: calc(100cqw / 64);
}

.scale-40 {
  font-size: min(2vw, 14px);
  font-size: calc(100cqw / 40);
}

/* display-2 caps at 4.6rem. Beside the stack, that cap is just wider than
   "someone who ships", so the last word sits on its own line. */
@media (min-width: 1024px) {
  #advisory .display-2 {
    font-size: clamp(2.6rem, 5vw, 4.4rem);
  }
}

.stage {
  perspective: 1800px;
}

.p3d {
  transform-style: preserve-3d;
}

/* Devices */
.phone {
  position: relative;
  aspect-ratio: 9 / 19.3;
  padding: .36em;
  border-radius: 1.95em;
  background: linear-gradient(150deg, #4a5b6b 0%, #1a2632 22%, #0c141c 55%, #26333f 100%);
  box-shadow: inset 0 0 0 .07em rgb(255 255 255 / .22), inset 0 0 0 .18em #04080c, 0 2.6em 4.5em -1.4em rgb(0 0 0 / .7);
}

.phone::before,
.phone::after {
  content: "";
  position: absolute;
  width: .13em;
  background: #3a4856;
}

.phone::before {
  right: -.13em;
  top: 24%;
  height: 11%;
  border-radius: 0 .12em .12em 0;
}

.phone::after {
  left: -.13em;
  top: 19%;
  height: 6%;
  border-radius: .12em 0 0 .12em;
  box-shadow: 0 2.4em 0 #3a4856;
}

.phone-screen,
.tablet-screen,
.tv-screen,
.display-screen,
.watch-screen {
  position: relative;
  overflow: hidden;
  background: #000;
}

.phone-screen {
  height: 100%;
  border-radius: 1.6em;
}

.phone-screen>img,
.tablet-screen>img,
.tv-screen>img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.glare::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(118deg, rgb(255 255 255 / .16), rgb(255 255 255 / 0) 36%);
}

.tablet {
  position: relative;
  aspect-ratio: 4 / 3;
  padding: .75em;
  border-radius: 1.7em;
  background: linear-gradient(150deg, #4a5b6b, #141f2a 30%, #0b131b 70%, #2a3743);
  box-shadow: inset 0 0 0 .07em rgb(255 255 255 / .2), inset 0 0 0 .22em #04080c, 0 3em 5em -1.5em rgb(0 0 0 / .7);
}

.tablet-screen {
  height: 100%;
  border-radius: 1em;
}

.tv {
  padding: .3em;
  border-radius: .6em;
  background: #05090d;
  box-shadow: inset 0 0 0 .06em rgb(255 255 255 / .16), 0 3em 5em -1.6em rgb(0 0 0 / .75);
}

.tv-screen {
  aspect-ratio: 16 / 9;
  border-radius: .35em;
}

.tv-stand {
  width: 22%;
  height: 1.4em;
  margin: 0 auto;
  background: linear-gradient(#1b2733, #0b1219);
  clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);
}

.tv-foot {
  width: 44%;
  height: .38em;
  margin: 0 auto;
  border-radius: .3em;
  background: linear-gradient(#2a3846, #0d151d);
}

.settop {
  border-radius: .45em;
  background: linear-gradient(#26333f, #0a1118);
  box-shadow: inset 0 .06em 0 rgb(255 255 255 / .18), 0 1em 1.6em -.6em rgb(0 0 0 / .7);
}

.display {
  padding: .55em;
  border-radius: .9em;
  background: #0a0f14;
  box-shadow: inset 0 0 0 .09em #c9d3dc, inset 0 0 0 .22em #0a0f14, 0 3em 5em -1.6em rgb(0 0 0 / .7);
}

.display-screen {
  aspect-ratio: 16 / 10;
  border-radius: .35em;
}

.alu {
  background: linear-gradient(90deg, #7d8a96, #d7dee5 45%, #b5c0ca 60%, #7d8a96);
}

.display-stand {
  width: 17%;
  height: 4.4em;
  margin: 0 auto;
  clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%);
}

.display-foot {
  width: 30%;
  height: .5em;
  margin: 0 auto;
  border-radius: .3em;
}

.watch {
  position: relative;
  z-index: 1;
  aspect-ratio: .84;
  padding: .5em;
  border-radius: 30% / 26%;
  background: linear-gradient(150deg, #5a6b7b, #1a2632 30%, #0b131b 65%, #2c3a47);
  box-shadow: inset 0 0 0 .08em rgb(255 255 255 / .22), inset 0 0 0 .2em #04080c, 0 2em 3.5em -1em rgb(0 0 0 / .7);
}

.watch::after {
  content: "";
  position: absolute;
  right: -.34em;
  top: 25%;
  width: .34em;
  height: 17%;
  border-radius: .14em;
  background: linear-gradient(90deg, #3c4a57, #8090a0);
}

.watch-screen {
  height: 100%;
  border-radius: 26% / 22%;
}

/* Each strap runs under the case by 10% of the watch's width, with
   padding and margin cancelling so the layout keeps its height */
.watch-band {
  box-sizing: content-box;
  width: 70%;
  margin: 0 auto;
  background: #0f4c6c;
}

.watch-band:first-child {
  padding-bottom: 10%;
  margin-bottom: -10%;
}

.watch-band:last-child {
  padding-top: 10%;
  margin-top: -10%;
}

.vwin {
  position: relative;
  padding: .7em;
  border-radius: 1.5em;
  background: linear-gradient(155deg, rgb(255 255 255 / .26), rgb(255 255 255 / .08) 45%, rgb(255 255 255 / .14));
  box-shadow: inset 0 0 0 .07em rgb(255 255 255 / .38), inset 0 .12em .2em rgb(255 255 255 / .18), 0 2.5em 4em -1.5em rgb(0 0 0 / .55);
}

.vgrab {
  width: 22%;
  height: .38em;
  margin: .7em auto 0;
  border-radius: 1em;
  background: rgb(255 255 255 / .5);
}

.browser {
  overflow: hidden;
  border-radius: .9em;
  background: #08141f;
  box-shadow: inset 0 0 0 .06em rgb(255 255 255 / .12), 0 3em 6em -2em rgb(0 0 0 / .75);
}

.browser-bar {
  display: flex;
  align-items: center;
  gap: .42em;
  height: 2.3em;
  padding: 0 .95em;
  background: #0e1f2e;
  border-bottom: .06em solid rgb(255 255 255 / .06);
}

.browser-bar>i {
  width: .62em;
  height: .62em;
  border-radius: 50%;
  background: #ff5f57;
}

.browser-bar>i:nth-child(2) {
  background: #febc2e;
}

.browser-bar>i:nth-child(3) {
  background: #28c840;
}

.browser-url {
  margin: 0 auto;
  transform: translateX(-1.4em);
  padding: .32em 1.5em;
  border-radius: .5em;
  background: rgb(255 255 255 / .06);
  font: 500 .62em/1 "Geist Mono", ui-monospace, monospace;
  color: rgb(255 255 255 / .55);
}

.browser.is-light {
  background: #fff;
  box-shadow: 0 0 0 .06em rgb(0 25 42 / .12), 0 3em 6em -2em rgb(0 25 42 / .55);
}

.browser.is-light .browser-bar {
  background: #eef3f7;
  border-bottom-color: rgb(0 25 42 / .08);
}

.browser.is-light .browser-url {
  background: rgb(0 25 42 / .06);
  color: rgb(0 25 42 / .55);
}

.hero-chip {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  white-space: nowrap;
  padding: .5em 1em;
  border-radius: 99em;
  background: rgb(7 58 86 / .82);
  box-shadow: inset 0 0 0 .07em rgb(255 255 255 / .16), 0 1.2em 2em -1em rgb(0 0 0 / .7);
  font: 500 .74em/1 "Geist Mono", ui-monospace, monospace;
  color: #dff4ff;
}

.hero-chip::before {
  content: "";
  width: .5em;
  height: .5em;
  border-radius: 50%;
  background: currentColor;
  color: #38bbff;
  box-shadow: 0 0 .8em #38bbff;
}

.live-dot {
  position: relative;
}

.live-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: inherit;
}

@media (prefers-reduced-motion: no-preference) {
  .live-dot::after {
    animation: ping 1.6s cubic-bezier(0, 0, .2, 1) infinite;
  }
}

@keyframes ping {

  75%,
  100% {
    transform: scale(2.6);
    opacity: 0;
  }
}

.doodle {
  color: #0b1a27;
}

.doodle path {
  fill: none;
  stroke: currentColor;
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.doodle .doodle-fill,
.doodle .doodle-ink {
  fill: currentColor;
  stroke: none;
}

.doodle mask path {
  stroke: #fff;
}

.doodle .doodle-collar {
  color: #ff6f01;
}

/* Advisory: each layer is a square laid flat and turned 45deg, so the stack reads as isometric */
.plate {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 15em;
  height: 15em;
  margin: -7.5em 0 0 -7.5em;
  border-radius: 1.7em;
  transform: rotateX(58deg) rotateZ(45deg);
}

.plate-ui {
  background: linear-gradient(135deg, #fff, #f0faff);
  box-shadow: inset 0 0 0 .1em rgb(4 170 255 / .55), .55em .55em 0 #79d0ff, 1.5em 1.5em 2.5em rgb(0 25 42 / .18);
}

.plate-state {
  background: linear-gradient(135deg, #dff4ff, #b0e4ff);
  box-shadow: inset 0 0 0 .1em rgb(0 107 166 / .3), .55em .55em 0 #38bbff, 1.5em 1.5em 2.5em rgb(0 25 42 / .18);
}

.plate-domain {
  background: linear-gradient(135deg, #fff, #edf3f7);
  box-shadow: inset 0 0 0 .1em rgb(0 25 42 / .18), .55em .55em 0 #bccdd9, 1.5em 1.5em 2.5em rgb(0 25 42 / .18);
}

.plate-data {
  background: linear-gradient(135deg, #0f4c6c, #002b41);
  box-shadow: inset 0 0 0 .1em rgb(121 208 255 / .35), .55em .55em 0 #00192a, 1.5em 1.5em 2.5em rgb(0 25 42 / .25);
}

.plate-release {
  background: linear-gradient(135deg, #ff8c33, #e05800);
  box-shadow: inset 0 0 0 .1em rgb(255 255 255 / .35), .55em .55em 0 #b04400, 1.5em 1.5em 2.5em rgb(0 25 42 / .25);
}

.step-node {
  transition: background-color .4s, color .4s, box-shadow .4s, border-color .4s;
}

.steps.is-live .step:not(.is-on) .step-node {
  border-color: rgb(255 255 255 / .14);
  background-color: #00192a;
  color: rgb(255 255 255 / .45);
  box-shadow: none;
}

.steps.is-live .step {
  transition: opacity .4s;
}

.steps.is-live .step:not(.is-on) .step-copy {
  opacity: .45;
}

.tab-progress {
  transform: scaleX(0);
  transform-origin: left center;
}

.wall-wrap {
  perspective: 1600px;
}

.no-scrollbar {
  scrollbar-width: none;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.orbit-wrap {
  --tilt: 58deg;
  perspective: 1400px;
}

@media (min-width: 768px) {
  .orbit-wrap {
    --tilt: 66deg;
  }
}

.orb {
  background: radial-gradient(circle at 35% 30%, #b0e4ff 0%, #38bbff 22%, #0089d4 48%, #073a56 78%, #002b41 100%);
  box-shadow: 0 0 6em rgb(4 170 255 / .45), inset -1.4em -1.8em 3em rgb(0 15 26 / .55), inset 1em 1em 2em rgb(255 255 255 / .25);
}

/* Client work */
.work-warm {
  background: radial-gradient(ellipse 55% 60% at 8% 100%, rgb(255 111 1 / .2), transparent 70%), radial-gradient(ellipse 75% 65% at 70% 0%, rgb(4 170 255 / .2), transparent 70%), linear-gradient(to bottom, #073a56, #00192a);
}

.work-cool {
  background: radial-gradient(ellipse 75% 65% at 82% 0%, rgb(4 170 255 / .26), transparent 70%), linear-gradient(to bottom, #0f4c6c, #002b41);
}

/* Kept behind every rotated plane in the rig; a glow at z=0 gets drawn over
   whichever half of a turned phone falls behind it */
.work-glow {
  transform: translateZ(-14em) scale(1.2);
}

.lc-print {
  position: relative;
  padding: .4em .4em 1.5em;
  border-radius: .45em;
  background: #fff;
  box-shadow: 0 1.6em 2.4em -1em rgb(0 0 0 / .6);
}

.lc-print::after {
  content: "";
  position: absolute;
  left: .6em;
  bottom: .6em;
  width: 3.2em;
  height: .3em;
  border-radius: 1em;
  background: #dae5ec;
}

.rt-face {
  position: absolute;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.ev-sw {
  box-shadow: inset 0 0 0 .06em rgb(255 255 255 / .2);
}

.ev-sw.is-on {
  box-shadow: 0 0 0 .14em #08141f, 0 0 0 .28em #38bbff;
}