:root {
  --navy:#0b0b12;
  --navy-2:#191823;
  --ink:#edecf5;
  --muted:#9995ad;
  --light:#edecf5;
  --surface:rgba(21,19,29,.8);
  --nav-surface:rgba(21,19,29,.64);
  --nav-shadow:0 10px 32px rgba(0,0,0,.28),0 2px 8px rgba(0,0,0,.16);
  --accent:#c77aed;
  --mono:'Space Grotesk',ui-monospace,monospace;
  --sans:'DM Sans',system-ui,sans-serif;
  --line:rgba(211,198,255,.14)
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:8rem;
  background:var(--navy)
}
body {
  margin:0;
  color:var(--ink);
  font:1rem/1.65 var(--sans);
  overflow-x:clip
}
body:before {
  content:"";
  position:fixed;
  inset:0;
  background:url('grain.svg');
  opacity:.035;
  pointer-events:none;
  z-index:5
}
body {
  isolation:isolate;
  background:radial-gradient(ellipse at 80% 8%,#34245435,transparent 35%)
}
.ambient-light {
  position:fixed;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:-1
}
.ambient-light:before,
.ambient-light:after {
  content:"";
  position:absolute;
  inset:-25%;
  will-change:transform
}
.ambient-light:before {
  background:
    radial-gradient(ellipse 520px 440px at 75% 30%,#8108bc65,transparent 75%),
    radial-gradient(ellipse 420px 360px at 25% 75%,#c77aed2b,transparent 75%);
  animation:light-drift 16s ease-in-out -5s infinite alternate
}
.ambient-light:after {
  background:
    radial-gradient(ellipse 480px 400px at 70% 80%,#c77aed28,transparent 75%),
    radial-gradient(ellipse 420px 360px at 22% 45%,#c4f4a51c,transparent 75%);
  animation:light-drift-secondary 21s ease-in-out -9s infinite alternate
}
@keyframes light-drift {
  from { transform:translate(-12%,-9%) scale(1); }
  to { transform:translate(12%,12%) scale(1.12); }
}
@keyframes light-drift-secondary {
  from { transform:translate(10%,12%) scale(1.1); }
  to { transform:translate(-13%,-10%) scale(1); }
}
@keyframes page-enter {
  from { opacity:0; }
  to { opacity:1; }
}
@media(prefers-reduced-motion:no-preference) {
  .wrap { animation:page-enter .36s ease-out; }
}
.is-page-hidden .ambient-light:before,
.is-page-hidden .ambient-light:after {
  animation-play-state:paused
}

a {
  color:inherit
}
button {
  font:inherit
}
::selection {
  background:#c77aed;
  color:#111
}
a,button,summary {
  -webkit-tap-highlight-color:transparent
}
a:focus-visible,button:focus-visible,summary:focus-visible {
  outline:2px solid #c5f5a5;
  outline-offset:6px
}
button {
  cursor:pointer
}
.wrap {
  max-width:1280px;
  margin:auto;
  padding:28px 48px 36px;
  position:relative
}
.skip-link {
  position:fixed;
  top:10px;
  left:20px;
  transform:translateY(-160%);
  z-index:100;
  background:var(--accent);
  color:#111;
  padding:10px
}
.skip-link:focus {
  transform:translateY(0)
}
.nav,
.card,
.doc {
  background:var(--surface);
  -webkit-backdrop-filter:blur(20px);
  backdrop-filter:blur(20px)
}
.nav-shell { display:contents; }
.nav {
  background:var(--nav-surface);
  box-shadow:var(--nav-shadow);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:16px 22px;
  min-height:88px;
  border:1px solid var(--line);
  border-radius:18px;
  position:sticky;
  top:18px;
  z-index:20
}
.brand {
  display:flex;
  gap:11px;
  align-items:center;
  text-decoration:none
}
.brand__mark {
  width:34px;
  height:34px;
  background:#c77aed;
  color:#171122;
  display:grid;
  place-items:center;
  border-radius:10px;
  font:700 0.6875rem var(--mono);
  transform:rotate(-8deg);
  transition:transform .3s
}
.brand:hover .brand__mark {
  transform:rotate(8deg)
}
.brand__name {
  font:600 1.25rem var(--mono);
  letter-spacing:-.7px
}
.nav__links {
  display:flex;
  gap:34px;
  align-items:center
}
.nav__links a {
  text-decoration:none;
  font-size:1rem;
  position:relative;
  color:#d0ccdd;
  border-bottom:2px solid transparent;
  transition:color .2s,border-color .2s
}
.nav__links a:hover {
  color:var(--ink)
}
.nav__links a[aria-current],
.mobile-menu a[aria-current] {
  color:var(--ink);
}
.nav__links a::after,
.mobile-menu a>span::after,
.privacy-toc a::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-2px;
  height:2px;
  background:#c4f4a5;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform 240ms cubic-bezier(.22,1,.36,1);
}
.nav__links a::after,
.privacy-toc a::after { left:4px; right:4px; }
.mobile-menu a>span { position:relative; }
.nav__links a:hover::after,
.nav__links a:focus-visible::after,
.nav__links a[aria-current]::after,
.mobile-menu a:hover>span::after,
.mobile-menu a:focus-visible>span::after,
.mobile-menu a[aria-current]>span::after,
.privacy-toc a:hover::after,
.privacy-toc a:focus-visible::after,
.privacy-toc a[aria-current="location"]::after {
  transform:scaleX(1);
}
@media(prefers-reduced-motion:reduce) {
  .nav__links a::after, .mobile-menu a>span::after, .privacy-toc a::after { transition:none; }
}
.hamburger {
  display:none;
  width:44px;
  height:44px;
  background:transparent;
  border:0;
  color:var(--ink);
  align-items:center;
  justify-content:center
}
.menu-icon {
  display:block
}
.menu-icon path {
  transform-box:view-box;
  transition:transform 280ms cubic-bezier(.22,1,.36,1),opacity 280ms cubic-bezier(.22,1,.36,1)
}
.menu-icon__top { transform-origin:12px 7px; }
.menu-icon__middle { transform-origin:12px 12px; }
.menu-icon__bottom { transform-origin:12px 17px; }
.hamburger[aria-expanded=true] .menu-icon path {
  transition-duration:360ms
}
.hamburger[aria-expanded=true] .menu-icon__top {
  transform:translateY(5px) rotate(45deg)
}
.hamburger[aria-expanded=true] .menu-icon__middle {
  transform:scaleX(0);
  opacity:0
}
.hamburger[aria-expanded=true] .menu-icon__bottom {
  transform:translateY(-5px) rotate(-45deg)
}
.mobile-menu {
  display:none;
  flex-basis:100%;
  min-width:0;
  padding-top:12px;
  margin-top:12px;
  border-top:1px solid var(--line);
  max-height:calc(100dvh - 150px);
  overflow-y:auto
}
.mobile-menu a {
  display:block;
  padding:12px;
  text-decoration:none
}
.mobile-menu a>span {
  display:inline-block;
  border-bottom:2px solid transparent;
  transition:border-color .2s
}
@media(max-width:720px) {
  .nav-shell {
    display:block;
    position:sticky;
    top:18px;
    height:78px;
    z-index:20
  }
  .nav-shell>.nav { position:relative; top:0; }
  .nav { flex-wrap:wrap; row-gap:0; align-content:flex-start; }
  .mobile-menu { display:block; }
}
.hero {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  align-items:center;
  min-height:690px;
  padding:76px 0 70px;
  gap:12px
}
.not-found {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  align-items:center;
  gap:48px;
  min-height:560px;
  padding:80px 0 96px
}
.not-found__copy { min-width:0; }
.not-found .eyebrow { color:var(--accent); margin:0 0 24px; }
.not-found h1 {
  font:500 clamp(3.5rem,6.5vw,5.75rem)/1.05 var(--sans);
  letter-spacing:-.05em;
  margin:0 0 24px
}
.not-found__description { max-width:440px; color:#b9b2c7; margin:0 0 30px; }
.not-found__actions { display:flex; flex-wrap:wrap; gap:12px; }
.not-found__art {
  position:relative;
  display:grid;
  place-items:center;
  min-width:0;
  height:350px
}
.not-found__number {
  position:relative;
  font:500 clamp(8rem,17vw,14rem)/1 var(--mono);
  letter-spacing:-.07em
}
.not-found__orbit {
  position:absolute;
  width:95%;
  height:50%;
  border:1px solid #c77aed60;
  border-radius:50%;
  transform:rotate(-24deg)
}
.not-found__orbit:after {
  content:'';
  position:absolute;
  top:16%;
  left:12%;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#c4f4a5;
  box-shadow:0 0 18px #c4f4a550
}
.not-found__star { position:absolute; right:7%; top:9%; color:#c4f4a5; font-size:2.75rem; }
.not-found__caption {
  position:absolute;
  bottom:0;
  text-align:center;
  font:.6875rem/1.6 var(--mono);
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--muted)
}
@media(max-width:720px) {
  .not-found { grid-template-columns:1fr; gap:32px; padding:52px 0 64px; }
  .not-found__art { height:240px; }
  .not-found__number { font-size:clamp(8rem,35vw,11rem); }
}
.eyebrow {
  font:500 0.75rem/1.5 var(--mono);
  letter-spacing:1.9px;
  color:var(--muted);
  text-transform:uppercase;
  margin:0 0 20px
}
.hero__eyebrow {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:0.75rem;
  letter-spacing:1.4px
}
.status-dot {
  width:6px;
  height:6px;
  background:#c4f4a5;
  border-radius:100%;
  box-shadow:0 0 12px #c4f4a560
}
.hero h1 {
  font:500 clamp(3.75rem,7.6vw,6.375rem)/1.01 var(--sans);
  letter-spacing:-6px;
  margin:0 0 25px
}
.hero__accent {
  background:linear-gradient(110deg,#e3b1ff,#a32de0 70%);
  color:transparent;
  background-clip:text
}
.headline-star {
  display:inline-block;
  color:#c4f4a5;
  font-size:.7em;
  vertical-align:top;
  line-height:1.25;
  margin-left:20px;
  animation:star-turn 22s linear infinite
}
.hero__sub {
  max-width:340px;
  font-size:1rem;
  color:#aaa6b9;
  line-height:1.65;
  margin:0 0 26px
}
.hero__note {
  font-size:0.875rem;
  color:#aaa3b9;
  margin:18px 0 0
}
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-height:50px;
  padding:12px 22px;
  background:rgba(183,161,255,.08);
  color:var(--accent);
  border:1px solid rgba(183,161,255,.4);
  border-radius:12px;
  text-decoration:none;
  font-size:0.9375rem;
  font-weight:500;
  transition:background .25s,transform .25s,box-shadow .25s
}
.btn:hover {
  background:rgba(183,161,255,.16);
  border-color:var(--accent);
  transform:translateY(-2px)
}
.btn--primary {
  background:#c4f4a5;
  gap:8px;
  color:#1c1430;
  border-color:#c4f4a5;
  box-shadow:0 4px 20px #c4f4a518;
  padding:14px 24px
}
.btn--primary:hover {
  background:#d6f9c1;
  border-color:#d6f9c1;
  box-shadow:0 8px 26px #c4f4a526
}
.btn--primary span {
  margin-left:0;
  font-size:1.25rem;
  line-height:1;
  transition:transform .25s
}
.btn--primary:hover span {
  transform:translateY(3px)
}
.hero__art {
  height:510px;
  position:relative;
  perspective:900px;
  isolation:isolate
}
.art-grid {
  position:absolute;
  inset:0;
  background-image:linear-gradient(#b2a0e208 1px,transparent 1px),linear-gradient(90deg,#b2a0e208 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:radial-gradient(ellipse,#000,transparent 68%)
}
.art-coordinate {
  position:absolute;
  font:0.75rem var(--mono);
  letter-spacing:1.5px;
  color:#aaa1bb;
  z-index:3
}
.art-coordinate--top {
  top:24px;
  left:20px
}
.art-coordinate--bottom {
  bottom:20px;
  right:0;
  font-size:0.75rem
}
.orbit-scene {
  position:absolute;
  inset:0;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .6s ease-out
}
.orb-glow {
  position:absolute;
  inset:60px 15px;
  background:radial-gradient(ellipse,#9109d35c,transparent 66%);
  filter:blur(32px)
}
.orb {
  width:280px;
  height:280px;
  position:absolute;
  left:50%;
  top:50%;
  margin:-140px 0 0 -140px;
  border-radius:50%;
  background:radial-gradient(circle at 30% 20%,#e2d9fb 0%,#a23bd3 18%,#780bb1 38%,#47306d 65%,#191121 85%);
  box-shadow:inset -16px -18px 35px #100b26,inset 3px 3px 20px #dfd3ff50,0 0 60px #8769bf25;
  overflow:hidden;
  animation:orb-float 8s ease-in-out infinite
}
.orb:after {
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:linear-gradient(130deg,#ffffff30,transparent 50%,#07031290);
  box-shadow:inset 0 0 3px #fff9
}
.orb__lines {
  position:absolute;
  inset:-50%;
  background:repeating-radial-gradient(ellipse at 0% 50%,transparent 0 9px,#26173990 10px 11px,transparent 12px 19px);
  transform:rotate(-32deg);
  mix-blend-mode:multiply
}
.orb__spark {
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-size:9.6875rem;
  font-weight:400;
  color:#e7ddf22b;
  transform:rotate(-20deg)
}
.orb--webgl {
  background:none;
  box-shadow:none;
  overflow:visible
}
.orb--webgl:after,
.orb--webgl .orb__lines,
.orb--webgl .orb__spark {
  display:none
}
.orb--webgl ~ .orbit,
.orb--webgl ~ .orb-dot {
  display:none
}
.orb__canvas {
  position:absolute;
  width:220%;
  height:220%;
  left:-60%;
  top:-60%;
  pointer-events:none
}
.orbit {
  position:absolute;
  left:50%;
  top:50%;
  border:1px solid #ae95df55;
  width:460px;
  height:172px;
  border-radius:50%;
  margin:-86px 0 0 -230px;
  transform:rotate(-32deg);
  box-shadow:0 0 15px #8a68db09
}
.orbit--two {
  width:400px;
  height:260px;
  margin:-130px 0 0 -200px;
  transform:rotate(45deg);
  border-color:#ae95df25
}
.float-tile {
  position:absolute;
  display:grid;
  place-items:center;
  box-shadow:0 14px 40px #0007,inset 0 1px 1px #fff3;
  border:1px solid #ddd1ff30;
  animation:tile-float 7s ease-in-out infinite
}
.float-tile--one {
  width:102px;
  height:102px;
  left:10%;
  top:20%;
  background:none;
  border:0;
  box-shadow:none;
  filter:drop-shadow(0 14px 20px #0007);
  transform:rotate(-15deg);
  font:500 1.875rem var(--mono);
  color:#e9ddff;
  --rotation:-15deg
}
.float-tile--one img {
  display:block;
  width:100%;
  height:100%
}
.float-tile--two {
  width:76px;
  height:76px;
  right:1%;
  top:35%;
  background:linear-gradient(140deg,#dcceff,#a78ccf);
  color:#2c2040;
  border-radius:21px;
  font-size:2.8125rem;
  --rotation:15deg;
  animation-delay:-2s
}
.float-tile--three {
  width:64px;
  height:64px;
  left:24%;
  bottom:7%;
  background:#c4f4a5;
  color:#354825;
  border-radius:18px;
  font-size:2.6875rem;
  --rotation:-12deg;
  animation-delay:-4s
}
.orb-dot {
  position:absolute;
  width:10px;
  height:10px;
  border-radius:50%;
  background:#cfbfff;
  box-shadow:0 0 20px #be9fff55
}
.orb-dot--one {
  right:12%;
  bottom:24%
}
.orb-dot--two {
  left:35%;
  top:11%;
  height:5px;
  width:5px;
  background:#c4f4a5
}
.principles {
  display:flex;
  justify-content:space-between;
  padding:22px 7%;
  border-block:1px solid var(--line);
  font-size:1rem;
  color:#c5bfd4
}
.principles span {
  display:flex;
  align-items:center;
  gap:12px
}
.principles i {
  font-style:normal;
  color:#c4f4a5;
  font-size:1.5rem
}
.section {
  padding:105px 0
}
.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:30px;
  margin-bottom:38px
}
.section-heading h2,.about-heading h2 {
  font:500 clamp(2.125rem,4vw,3.25rem)/1.12 var(--sans);
  letter-spacing:-2px;
  margin:0
}
.muted-heading {
  color:#8c849e
}
.section-heading>p {
  font-size:1rem;
  color:var(--muted);
  margin:0 0 5px
}
.apps {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px
}
.card {
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden
}
.product-card {
  min-width:0;
  perspective:1400px
}
.product-card__rotor {
  display:grid;
  height:100%;
  transform-style:preserve-3d;
  transition:transform .65s cubic-bezier(.2,.7,.2,1)
}
.product-card.is-flipped .product-card__rotor {
  transform:rotateY(180deg)
}
.product-card__face {
  grid-area:1 / 1;
  min-width:0;
  padding:12px 12px 20px;
  display:flex;
  flex-direction:column;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
  transition:border-color .3s,box-shadow .3s
}
.product-card__back {
  transform:rotateY(180deg)
}
.product-card:hover .product-card__face {
  border-color:#c77aed55;
  box-shadow:0 16px 60px #0003
}
.product-art {
  width:100%;
  height:260px;
  border-radius:10px;
  position:relative;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:radial-gradient(ellipse at 50% 50%,#61559b50,transparent 65%),#211d35;
  background-image:radial-gradient(ellipse at 50% 50%,#61559b50,transparent 65%),linear-gradient(#c1b4ff08 1px,transparent 1px),linear-gradient(90deg,#c1b4ff08 1px,transparent 1px);
  background-size:auto,32px 32px,32px 32px
}
.product-card--teal .product-art {
  background-color:#142b2a;
  background-image:radial-gradient(ellipse at 50% 50%,#53a49230,transparent 65%),linear-gradient(#abf7df08 1px,transparent 1px),linear-gradient(90deg,#abf7df08 1px,transparent 1px)
}
.product-art__label,.product-art__caption {
  position:absolute;
  left:20px;
  top:17px;
  color:#b5a7d5;
  font:0.75rem var(--mono);
  letter-spacing:1.2px
}
.product-art__caption {
  top:auto;
  bottom:17px;
  color:#b5a7d5;
  font-size:0.75rem
}
.product-card--teal .product-art__label,.product-card--teal .product-art__caption {
  color:#8bbaa8
}
.product-art__symbol {
  position:absolute;
  right:26px;
  bottom:18px;
  font:1.125rem var(--mono);
  color:#aa9ac9
}
.product-art__orbit {
  position:absolute;
  width:330px;
  height:150px;
  border:1px solid #c9b7ff20;
  border-radius:50%;
  transform:rotate(-25deg)
}
.product-art__orbit:after {
  content:"";
  position:absolute;
  inset:-34px 35px;
  border:1px solid #c9b7ff10;
  border-radius:50%
}
.app-icon {
  display:block;
  width:110px;
  height:110px;
  border-radius:25px;
  box-shadow:12px 22px 30px #0005;
  transform:rotate(-12deg);
  transition:transform .6s cubic-bezier(.2,.8,.2,1)
}
.product-card--teal .app-icon {
  transform:rotate(10deg)
}
.product-card:hover .app-icon {
  transform:translateY(-8px) rotate(0) scale(1.05)
}
.card__body {
  padding:24px 16px 20px;
  flex:1;
  width:100%
}
.card h3 {
  font:500 1.5625rem/1.3 var(--sans);
  letter-spacing:-.7px;
  margin:0 0 8px
}
.card p {
  font-size:1rem;
  color:#b9b2c7;
  margin:0;
  line-height:1.8
}
.product-card__actions {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:8px 16px 0;
  margin-top:auto
}
.app-store-badge {
  display:inline-flex;
  align-items:center;
  min-height:44px;
  border-radius:7px;
  flex-shrink:0
}
.app-store-badge img {
  display:block;
  width:auto;
  height:44px
}
.card-flip-toggle {
  display:grid;
  place-items:center;
  padding:0;
  width:44px;
  height:44px;
  flex-shrink:0;
  border:1px solid #c77aed35;
  border-radius:50%;
  background:#c77aed0b;
  color:var(--accent);
  transition:background .2s,border-color .2s
}
.card-flip-toggle svg {
  display:block
}
.card-flip-toggle:hover {
  background:#c77aed24;
  border-color:var(--accent)
}
.product-card__back .eyebrow {
  margin-bottom:18px;
  font-size:.75rem;
  color:var(--accent)
}
.product-card__description {
  margin-top:20px
}
.product-card__description p+p {
  margin-top:14px
}
.card--alt {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:65px;
  padding:50px;
  margin:0 0 85px
}
.card--alt .eyebrow {
  font-size:0.75rem;
  margin-bottom:22px;
  color:#a99dbd
}
.about-heading h2 span {
  color:var(--accent)
}
.about-mark {
  display:block;
  color:#c4f4a5;
  font:400 3.4375rem/1 var(--mono);
  margin:0 0 22px
}
.about-copy {
  padding-top:4px
}
.about-copy p+p {
  margin-top:17px
}
.about-copy .eyebrow {
  color:#d3c7e7
}
.footer {
  border-top:1px solid var(--line);
  padding-top:34px
}
.footer__signature {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:32px
}
.footer__signature>a {
  font:500 2.1875rem var(--mono);
  letter-spacing:-2px;
  text-decoration:none
}
.footer__signature>a span {
  display:inline-block;
  font-size:1.875rem;
  color:var(--accent);
  margin-left:12px
}
.footer__signature>span {
  font-size:0.875rem;
  color:var(--muted)
}
.footer__credit {
  margin:0 0 16px;
  color:var(--muted);
  font-size:.875rem;
  text-align:center
}
.footer__credit span {
  color:var(--accent);
  display:inline-block;
  font-size:1.5em;
  line-height:1;
  vertical-align:-.1em
}
.footer__links {
  display:flex;
  justify-content:center;
  text-align:center;
  gap:24px;
  flex-wrap:wrap
}
.footer__links a {
  font-size:0.875rem;
  color:#b2aabd;
  text-decoration:none
}
.footer__links a:hover {
  color:var(--accent)
}
.footer__legal {
  font-size:0.75rem;
  color:#aaa3b9;
  margin:25px auto 0;
  text-align:center;
  max-width:660px
}
.wrap--doc .doc {
  max-width:850px;
  margin:64px auto 80px
}
.doc {
  padding:48px;
  border:1px solid var(--line);
  border-radius:18px
}
.doc h1 {
  font:500 clamp(2.25rem,6vw,3.625rem)/1.1 var(--sans);
  letter-spacing:-2px;
  margin:0 0 16px
}
.doc h2 {
  font:500 1.5625rem var(--sans);
  margin:40px 0 14px
}
.doc h3 {
  font:500 1.125rem var(--sans);
  margin:24px 0 10px
}
.doc p,.doc li {
  font-size:1rem;
  color:#b9b2c7
}
.doc a {
  color:#d2c1fc
}
.doc .meta {
  color:var(--muted);
  font-size:0.875rem
}
.doc ul {
  padding-left:22px
}
.support-layout,
.privacy-layout {
  width:100%;
  margin:64px 0 80px;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,2fr);
  align-items:start;
  gap:28px
}
.wrap--doc .support-layout .doc,
.wrap--doc .privacy-layout .doc {
  width:100%;
  max-width:none;
  min-width:0;
  margin:0;
  padding:clamp(26px,3vw,40px)
}
.support-heading,
.privacy-heading {
  grid-column:1 / -1;
  margin-bottom:12px
}
.wrap--doc .privacy-layout .privacy-content {
  margin-bottom:32px
}
.support-heading h1,
.privacy-heading h1 {
  margin:0;
  font:500 clamp(2.375rem,6vw,3.625rem)/1.1 var(--sans);
  letter-spacing:-2px
}
.support-sidebar .doc>p:first-child {
  margin-top:0
}
.support-sidebar .doc>p:last-child {
  margin-bottom:0
}
.support-layout .eyebrow,
.privacy-layout .eyebrow {
  color:var(--accent);
  font-size:.75rem;
  margin:0 0 16px
}
.support-sidebar,
.support-sidebar__section,
.support-faq {
  display:grid;
  gap:24px;
  min-width:0
}
.privacy-toc {
  position:sticky;
  top:130px;
  max-height:calc(100dvh - 154px);
  overflow-y:auto
}
.toc-toggle { display:none; }
.privacy-toc ul {
  list-style:none;
  padding:0;
  margin:0
}
.privacy-toc li + li {
  margin-top:4px
}
.privacy-toc a {
  position:relative;
  display:inline-block;
  padding:7px 4px;
  border-bottom:2px solid transparent;
  color:#d0ccdd;
  font-size:.875rem;
  line-height:1.5;
  text-decoration:none;
  transition:color .2s,border-color .2s
}
.privacy-toc a:hover,
.privacy-toc a:focus-visible {
  color:var(--ink)
}
.privacy-toc a[aria-current="location"] {
  color:var(--ink);
  border-bottom-color:transparent
}
.privacy-content,
.privacy-content h2 {
  scroll-margin-top:20px
}
.privacy-content > p:first-child,
.privacy-content > h2:first-child {
  margin-top:0
}
.privacy-content > p:last-child {
  margin-bottom:0
}
.support-faq h2,
.support-sidebar__section>h2 {
  margin:0;
  font-family:var(--sans);
  font-weight:500;
  font-size:clamp(1.625rem,4vw,2rem);
  line-height:1.25;
  letter-spacing:-.7px
}
.doc.faq-group>h3,
.doc.faq-group>h2,
.faq-app-heading h3 {
  margin:0 0 24px;
  font:600 clamp(1.375rem,2vw,1.625rem)/1.25 var(--mono);
  letter-spacing:-.5px
}
.faq-app-heading {
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:24px
}
.faq-app-heading__icon {
  display:block;
  flex:0 0 56px
}
.support-layout .faq-app-heading .eyebrow {
  margin:0 0 6px;
  text-transform:none
}
.faq-app-heading h3 {
  margin:0
}
.faq-item {
  border-top:1px solid var(--line)
}
.faq-item summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-height:64px;
  padding:18px 0;
  font-size:1rem;
  font-weight:500;
  line-height:1.5;
  list-style:none;
  cursor:pointer
}
.faq-item summary::-webkit-details-marker {
  display:none
}
.faq-item summary:hover,
.faq-item[open]:not([data-expanded="false"]) summary {
  color:var(--accent)
}
 .faq-item__icon {
  position:relative;
  flex:0 0 24px;
  width:24px;
  height:24px;
  color:#c4f4a5;
}
.faq-item__icon::before,
.faq-item__icon::after {
  content:"";
  position:absolute;
  left:6px;
  top:11px;
  width:12px;
  height:2px;
  border-radius:1px;
  background:currentColor;
}
.faq-item__icon::after {
  left:11px;
  top:6px;
  width:2px;
  height:12px;
  transition:transform .32s cubic-bezier(.22,1,.36,1),opacity .32s;
}
.faq-item[open]:not([data-expanded="false"]) .faq-item__icon::after {
  transform:scaleY(0);
  opacity:0;
}
@media(prefers-reduced-motion:reduce) {
  .faq-item__icon::after { transition:none; }
}
.faq-item__answer {
  padding:0 40px 22px 0
}
.faq-item__answer p {
  margin:0;
  line-height:1.8
}
@keyframes star-turn {
  to {
    transform:rotate(360deg)
  }
}
@keyframes orb-float {
  50% {
    transform:translateY(-12px)
  }
}
@keyframes tile-float {
  0%,100% {
    transform:translateY(0) rotate(var(--rotation))
  }
  50% {
    transform:translateY(-15px) rotate(calc(var(--rotation) + 5deg))
  }
}
@keyframes enter {
  from {
    opacity:0;
    transform:translateY(20px)
  }
  to {
    opacity:1;
    transform:translateY(0)
  }
}
.hero__copy>* {
  animation:enter .8s both
}
.hero__copy>:nth-child(2) {
  animation-delay:.08s
}
.hero__copy>:nth-child(3) {
  animation-delay:.16s
}
.hero__copy>:nth-child(4) {
  animation-delay:.24s
}
.hero__copy>:nth-child(5) {
  animation-delay:.32s
}
.hero__art {
  animation:enter 1.2s .15s both
}
.reveal.is-pending {
  opacity:0;
  transform:translateY(26px)
}
.reveal {
  transition:opacity .8s,transform .8s
}
.reveal.is-visible {
  opacity:1;
  transform:translateY(0)
}
@media(min-width:1500px) {
  .hero {
    min-height:760px
  }
}
@media(max-width:1000px) {
  .wrap {
    padding-inline:30px
  }
  .hero h1 {
    font-size:clamp(3.375rem,7.8vw,4.75rem);
    letter-spacing:-4.5px
  }
  .hero {
    min-height:640px
  }
  .hero__art {
    transform:scale(.85);
    margin:0;
    height:470px
  }
  .hero__eyebrow {
    font-size:0.75rem;
    letter-spacing:1px
  }
  .orb {
    width:240px;
    height:240px;
    margin:-120px 0 0 -120px
  }
  .orbit {
    width:370px;
    margin-left:-185px
  }
  .orbit--two {
    width:340px;
    margin-left:-170px
  }
  .card--alt {
    gap:35px;
    padding:36px
  }
}
@media(max-width:900px) {
  .support-layout,
  .privacy-layout {
    grid-template-columns:minmax(0,1fr)
  }
  .privacy-toc {
    position:static;
    max-height:none
  }
  html:has(.privacy-layout) {
    scroll-padding-top:calc(var(--toc-top,118px) + 80px)
  }
  .wrap--doc .privacy-layout .privacy-toc.is-enhanced {
    position:sticky;
    top:var(--toc-top,118px);
    z-index:19;
    padding:0;
    overflow:visible;
    /* Blur each surface directly; a blurred parent limits the dropdown's backdrop. */
    background:transparent;
    box-shadow:var(--nav-shadow);
    -webkit-backdrop-filter:none;
    backdrop-filter:none
  }
  .is-enhanced .toc-toggle {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    width:100%;
    min-height:64px;
    padding:16px 20px;
    border:0;
    border-radius:inherit;
    background:var(--nav-surface);
    -webkit-backdrop-filter:blur(20px);
    backdrop-filter:blur(20px);
    color:var(--ink);
    font:500 1rem/1.4 var(--sans);
    text-align:left;
    cursor:pointer
  }
  .toc-toggle svg {
    flex-shrink:0;
    color:var(--accent);
    transition:transform 280ms cubic-bezier(.22,1,.36,1)
  }
  .toc-toggle[aria-expanded=true] svg { transform:rotate(180deg); }
  .privacy-toc.is-expanded { border-bottom-left-radius:0; border-bottom-right-radius:0; }
  .privacy-toc.is-enhanced ul {
    position:absolute;
    top:100%;
    left:-1px;
    right:-1px;
    padding:12px 20px 20px;
    border:1px solid var(--line);
    border-radius:0 0 18px 18px;
    background:var(--nav-surface);
    box-shadow:var(--nav-shadow);
    -webkit-backdrop-filter:blur(20px);
    backdrop-filter:blur(20px);
    max-height:var(--toc-panel-height,calc(100dvh - var(--toc-top,118px) - 116px));
    overflow-y:auto
  }
  .privacy-toc.is-enhanced a { padding-block:10px; }
}
@media(max-width:720px) {
  .wrap {
    padding:18px 22px 28px
  }
  .nav {
    padding:16px 13px;
    min-height:78px;
    border-radius:14px
  }
  .brand__name {
    font-size:1.125rem
  }
  .nav__links {
    display:none
  }
  .hamburger {
    display:flex
  }
  .hero {
    grid-template-columns:1fr;
    padding:55px 0 25px;
    gap:0;
    min-height:0
  }
  .hero h1 {
    font-size:clamp(2.75rem,11.8vw,4.25rem);
    letter-spacing:-3.5px
  }
  .hero__eyebrow {
    font-size:0.75rem;
    margin-bottom:24px
  }
  .hero__sub {
    font-size:1rem;
    max-width:310px
  }
  .hero__art {
    height:385px;
    margin:0;
    transform:none;
    max-width:450px;
    width:100%;
    justify-self:center
  }
  .art-coordinate--top {
    top:25px;
    left:0;
    font-size:0.75rem
  }
  .art-coordinate--bottom {
    bottom:5px;
    font-size:0.75rem
  }
  .float-tile--one {
    width:77px;
    height:77px;
    font-size:1.5rem;
    top:17%;
    left:5%;
    border-radius:20px
  }
  .float-tile--two {
    right:2%;
    width:60px;
    height:60px;
    font-size:2.1875rem;
    top:38%;
    border-radius:17px
  }
  .float-tile--three {
    width:50px;
    height:50px;
    font-size:2.0625rem;
    bottom:8%;
    border-radius:14px
  }
  .orb {
    width:220px;
    height:220px;
    margin:-110px 0 0 -110px
  }
  .orb__spark {
    font-size:8.125rem
  }
  .orbit {
    width:330px;
    margin-left:-165px;
    height:132px;
    margin-top:-66px
  }
  .orbit--two {
    width:290px;
    margin-left:-145px;
    height:225px;
    margin-top:-112px
  }
  .principles {
    padding:18px 0;
    gap:12px;
    flex-wrap:wrap;
    font-size:1rem
  }
  .principles span {
    gap:6px
  }
  .principles i {
    font-size:1.25rem
  }
  .section {
    padding:65px 0
  }
  .section-heading {
    align-items:flex-start;
    flex-direction:column;
    gap:18px;
    margin-bottom:26px
  }
  .section-heading>p {
    font-size:1rem
  }
  .section-heading>p br {
    display:none
  }
  .section-heading h2,.about-heading h2 {
    font-size:2.4375rem;
    letter-spacing:-1.8px
  }
  .eyebrow {
    font-size:0.75rem;
    margin-bottom:15px
  }
  .apps {
    grid-template-columns:1fr;
    gap:24px
  }
  .product-art {
    height:245px
  }
  .card--alt {
    grid-template-columns:1fr;
    gap:28px;
    padding:28px;
    margin-bottom:55px
  }
  .about-heading {
    position:relative
  }
  .about-mark {
    font-size:2.625rem
  }
  .about-copy .eyebrow {
    margin-bottom:12px
  }
  .footer__signature {
    align-items:center;
    flex-direction:column;
    text-align:center;
    gap:12px
  }
  .footer__signature>a {
    font-size:1.9375rem
  }
  .footer__links {
    gap:14px 20px
  }
  .footer__legal {
    font-size:0.75rem
  }
  .doc {
    padding:26px
  }
  .wrap--doc .doc {
    margin:35px 0 50px
  }
  .support-layout,
  .privacy-layout {
    margin:35px 0 50px;
    gap:24px
  }
  .support-layout,
  .support-sidebar {
    row-gap:48px
  }
  .faq-item__answer {
    padding-right:0
  }
  .doc h1 {
    font-size:2.375rem
  }
  .doc h2 {
    font-size:1.375rem
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    animation:none!important;
    transition:none!important
  }
  .reveal.is-pending {
    opacity:1;
    transform:none
  }
  .orbit-scene {
    transform:none
  }
}

/* Reading and keyboard access. */
[hidden] { display:none !important; }
.brand, .nav__links a, .footer__links a, .footer__signature>a {
  min-height:44px;
  display:inline-flex;
  align-items:center;
}
.nav__links a { min-width:44px; padding:8px 4px; }
.brand__mark, .status-dot, .btn svg { flex-shrink:0; }
.mobile-menu a { min-height:44px; }
.hero__copy, .about-copy, .about-heading { min-width:0; }
.hero__eyebrow { letter-spacing:1px; }
.hero__art { margin-top:16px; }
.art-coordinate { max-width:100%; line-height:1.5; letter-spacing:.8px; }
.art-coordinate--bottom { max-width:260px; text-align:right; }
.product-art__caption { max-width:80%; }
.footer__links { column-gap:24px; row-gap:8px; }
.doc, .footer { overflow-wrap:anywhere; }
.reveal:focus-within { opacity:1; transform:none; }
main:focus { outline:none; }
:where(a,button,summary,[tabindex]) { scroll-margin-block:8rem 2rem; }
@media(max-width:720px) {
  .hero__art { margin-top:8px; }
  .principles { justify-content:space-between; gap:24px 32px; }
  .hero h1 { letter-spacing:-.05em; overflow-wrap:anywhere; }
  .hero__eyebrow { align-items:baseline; }
  .btn { max-width:100%; }
  .btn--primary { gap:8px; }
  .btn--primary span { margin-left:0; }
  .section-heading h2, .about-heading h2 { overflow-wrap:anywhere; }
}
@media(forced-colors:active) {
  .hero__accent { color:CanvasText; background:none; }
  .nav, .btn, .card, .doc { border-color:CanvasText; }
}

.brand { min-width:0; }
.brand__name { min-width:0; line-height:1.2; }
@media(max-width:720px) {
  .brand__name { overflow-wrap:anywhere; }
}


/* Source Code Pro wordmark, outlined for consistent rendering. */
.brand__logo { display:block; width:13.75rem; max-width:100%; height:auto; }
.footer__logo { display:block; width:10rem; max-width:100%; height:auto; }
.hamburger { flex-shrink:0; }
@media(max-width:720px) {
  .brand__logo { width:12rem; }
  .footer__signature>a { max-width:100%; }
}

/* Purple palette study: reference base #610290. */
.hero__accent{background:linear-gradient(110deg,#d99bf6,#a32de0 75%);background-clip:text}
.float-tile--two{background:linear-gradient(135deg,#e1aff8,#a854d4)}


/* Green actions in content; white links in navigation and the footer. */
:root { --action:#c4f4a5; --action-hover:#d6f9c1; }
@media (forced-colors:none) {
  main a:where(:not(.btn)), .doc:not(.privacy-toc) a:where(:not(.btn)) { color:var(--action); }
  .nav__links a, .nav__links a:hover, .nav__links a[aria-current],
  .mobile-menu a, .mobile-menu a:hover, .mobile-menu a[aria-current],
  .footer__links a, .footer__links a:hover,
  .doc.privacy-toc a, .doc.privacy-toc a:hover, .doc.privacy-toc a:focus-visible, .doc.privacy-toc a[aria-current="location"],
  .hamburger, .is-enhanced .toc-toggle, .toc-toggle svg { color:var(--ink); }
  .faq-item summary, .faq-item summary:hover { color:var(--ink); }
  .faq-item[open]:not([data-expanded="false"]) summary { color:var(--action); }
  .doc:not(.privacy-toc) a:where(:not(.btn)):hover { color:var(--action-hover); }
  .card-flip-toggle,
  .btn:not(.btn--primary) {
    color:var(--action);
    border-color:#c4f4a540;
    background:#c4f4a50b;
  }
  .card-flip-toggle:hover,
  .btn:not(.btn--primary):hover {
    color:var(--action-hover);
    border-color:var(--action);
    background:#c4f4a524;
  }
  .skip-link { background:var(--action); color:#111; }
}

/* A quiet halo follows the logo's lettering on hover and keyboard focus. */
.brand__logo, .footer__logo {
  filter:drop-shadow(0 0 0 rgba(199,122,237,0));
  transition:filter 260ms ease;
}
@media(hover:hover) {
  .brand:hover .brand__logo,
  .footer__signature>a:hover .footer__logo {
    filter:drop-shadow(0 0 11px rgba(199,122,237,.52));
  }
}
.brand:focus-visible .brand__logo,
.footer__signature>a:focus-visible .footer__logo {
  filter:drop-shadow(0 0 11px rgba(199,122,237,.52));
}
@media(prefers-reduced-motion:reduce) {
  .brand__logo, .footer__logo { transition:none; }
}

/* Hovering the credit line animates only its heart. */
.footer__credit span {
  transform-origin:center;
  filter:drop-shadow(0 0 0 rgba(199,122,237,0));
  transition:filter 240ms ease;
}
@keyframes footer-heart-pulse {
  0%,100% { transform:scale(1); filter:drop-shadow(0 0 4px rgba(199,122,237,.35)); }
  50% { transform:scale(1.12); filter:drop-shadow(0 0 10px rgba(199,122,237,.65)); }
}
@media(hover:hover) {
  .footer__credit:hover span {
    filter:drop-shadow(0 0 7px rgba(199,122,237,.5));
    animation:footer-heart-pulse 1.6s ease-in-out infinite;
  }
}
@media(prefers-reduced-motion:reduce) {
  .footer__credit span { transition:none; }
  .footer__credit:hover span { animation:none; transform:none; }
}

/* Smooth app silhouettes; SVG geometry keeps decorative glyphs centered. */
.float-tile--two,.float-tile--three {
  background:none;
  border:0;
  border-radius:0;
  box-shadow:none;
  filter:drop-shadow(0 14px 20px #0007);
}
.tile-art{display:block;width:100%;height:100%;overflow:visible}
.app-icon{border-radius:0;box-shadow:none;filter:drop-shadow(12px 22px 15px #0005);overflow:visible}

/* Keep gradient paint clear of glyph overhang and include descenders in the heading box. */
.hero h1 {
  padding-bottom:.16em;
  margin-bottom:calc(25px - .16em);
}
.hero h1 .hero__accent {
  padding-block:.16em;
  padding-right:.12em;
  margin-right:-.12em;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}

/* Mobile uses a still copy of the ambient glow palette and shapes, painted
   directly on the scrolling page rather than a viewport-clipped fixed layer.
   The 1600px tile lets every radial glow fade out before its vertical edges. */
@media (hover:none) and (pointer:coarse), (max-width:720px) {
  body {
    background-color:var(--navy);
    background-image:
      radial-gradient(ellipse 520px 440px at 75% 30%,#8108bc65,transparent 75%),
      radial-gradient(ellipse 420px 360px at 25% 75%,#c77aed2b,transparent 75%),
      radial-gradient(ellipse 480px 400px at 70% 80%,#c77aed28,transparent 75%),
      radial-gradient(ellipse 420px 360px at 22% 45%,#c4f4a51c,transparent 75%);
    background-size:100% 1600px;
    background-repeat:repeat-y;
  }
  .ambient-light { display:none; }
  .ambient-light:before,
  .ambient-light:after { animation:none; will-change:auto; }
  /* Fold the decorative grain out too: no full-screen fixed overlay on mobile. */
  body:before { display:none; }
}

/* App cards: "Coming soon" stands in for the App Store badge until the apps ship. */
.coming-soon {
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:0 18px;
  border:1px solid #c77aed35;
  border-radius:999px;
  background:#c77aed0b;
  color:var(--accent);
  font:500 .75rem/1 var(--mono);
  letter-spacing:1.9px;
  text-transform:uppercase;
  flex-shrink:0
}

/* Phone: the hero copy and art use the whole width. The headline keeps its size but drops the
   desktop line breaks, so the words wrap to the screen instead of sitting in the left half. */
@media(max-width:720px) {
  .hero h1 br { display:none; }
  .hero__sub, .hero__note { max-width:none; }
  .hero__art { max-width:none; }
}

/* Nothing on the page clips the art. The only clip is the browser edge itself, so the globe's
   transparent canvas margin can hang past it without letting the page scroll sideways. */
html { overflow-x:clip }