:root {
  color-scheme:dark;
  --bg:#0c0b15;
  --panel:#161425;
  --ink:#f7f5ff;
  --muted:#bdb9d4;
  --violet:#c2afff;
  --line:#302a48;
  --button:#dfd5ff;
  --button-ink:#231640;
  --page:72rem;
  font-family:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);
  background:var(--bg);
}

*,*::before,*::after {
  box-sizing:border-box;
}

body {
  margin:0;
}

a {
  color:var(--violet);
  text-underline-offset:.2em;
}

a:hover {
  color:#fff;
}

a:focus-visible,summary:focus-visible {
  outline:2px solid #9acdff;
  outline-offset:5px;
  border-radius:4px;
}

img {
  display:block;
  max-width:100%;
  height:auto;
}

h1,h2,h3,p,figure {
  margin:0;
}

p {
  line-height:1.68;
}

.wrap {
  width:min(var(--page),calc(100% - 3rem));
  margin-inline:auto;
}

.skip {
  position:absolute;
  left:1rem;
  top:1rem;
  z-index:3;
  padding:.8rem;
  background:var(--panel);
  transform:translateY(-180%);
}

.skip:focus {
  transform:none;
}

.site-header {
  border-bottom:1px solid #28223b;
  background:#100e1c;
}

.bar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.4rem;
  min-height:4.75rem;
}

.brand {
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  color:var(--ink);
  font-size:.99rem;
  font-weight:720;
  text-decoration:none;
  white-space:nowrap;
}

.brand img {
  width:2.2rem;
  height:2.2rem;
  padding:.24rem;
  background:#f5f1ff;
  border-radius:.68rem;
}

.site-nav,.footer-links {
  display:flex;
  align-items:center;
  gap:clamp(.65rem,2.4vw,1.9rem);
  flex-wrap:wrap;
}

.site-nav a,.footer-links a {
  color:var(--muted);
  text-decoration:none;
  font-size:.93rem;
}

.site-nav a:hover,.footer-links a:hover,.site-nav a[aria-current] {
  color:var(--ink);
}

.hero {
  overflow:hidden;
  isolation:isolate;
  background:radial-gradient(ellipse at 78% 36%,#3e2665 0%,transparent 49%),radial-gradient(ellipse at 92% 95%,#162953 0%,transparent 48%),linear-gradient(155deg,#171123 0%,#0c0b15 73%);
  border-bottom:1px solid var(--line);
}

.hero-layout {
  min-height:42rem;
  display:grid;
  grid-template-columns:1.03fr .97fr;
  align-items:center;
  gap:2rem;
  padding-block:4.5rem;
}

.hero-copy {
  position:relative;
  z-index:1;
}

.platform {
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  color:#ded2ff;
  font-weight:680;
  font-size:.86rem;
  letter-spacing:.02em;
}

.platform::before {
  content:"";
  width:.55rem;
  height:.55rem;
  border-radius:50%;
  background:#82d9be;
  box-shadow:0 0 16px #82d9be70;
}

h1 {
  font-size:clamp(2.85rem,6.3vw,5.35rem);
  line-height:.98;
  letter-spacing:-.069em;
  margin-block:1.15rem 1.4rem;
  font-weight:770;
  text-wrap:balance;
}

.hero h1 span {
  color:#c7b4ff;
}

.intro {
  font-size:clamp(1.04rem,1.75vw,1.22rem);
  max-width:35rem;
  color:var(--muted);
}

.actions {
  display:flex;
  flex-wrap:wrap;
  gap:.7rem;
  margin-top:1.75rem;
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:3rem;
  padding:.68rem 1.13rem;
  border-radius:.78rem;
  background:var(--button);
  color:var(--button-ink);
  text-decoration:none;
  font-weight:720;
  font-size:.94rem;
  border:1px solid transparent;
}

.button:hover {
  color:#211634;
  background:#f1e9ff;
}

.button--secondary {
  color:var(--ink);
  background:#ffffff0a;
  border-color:#55486f;
}

.button--secondary:hover {
  color:var(--ink);
  background:#ffffff18;
}

.hero-art {
  position:relative;
  height:32rem;
  display:grid;
  place-items:center;
}

.hero-art::before {
  position:absolute;
  content:"";
  inset:13% 0 9%;
  border-radius:50%;
  background:radial-gradient(ellipse,#a473f34d,transparent 68%);
  filter:blur(12px);
}

.phone {
  position:absolute;
  width:min(45%,13.4rem);
  border:1px solid #76648f;
  background:#151120;
  border-radius:1.55rem;
  padding:.31rem;
  box-shadow:0 1.4rem 3rem #08060dc0;
  overflow:hidden;
}

.phone img {
  width:100%;
  border-radius:1.22rem;
}

.phone--editor {
  left:14%;
  top:1%;
  transform:rotate(-10deg);
  z-index:1;
}

.phone--tree {
  right:8%;
  top:13%;
  transform:rotate(9deg);
}

.section {
  padding-block:clamp(3.4rem,7vw,6.4rem);
}

.section h2,.document h2 {
  font-size:clamp(1.55rem,3.3vw,2.72rem);
  line-height:1.12;
  letter-spacing:-.043em;
  text-wrap:balance;
}

.section-lead {
  margin-top:.75rem;
  color:var(--muted);
  max-width:43rem;
}

.grid {
  display:grid;
  gap:1rem;
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:1.85rem;
}

.card {
  border:1px solid var(--line);
  background:linear-gradient(150deg,#1e1831,#151323 75%);
  border-radius:1.18rem;
  padding:1.45rem;
}

.card h3 {
  font-size:1.17rem;
  letter-spacing:-.024em;
}

.card p {
  margin-top:.6rem;
  color:var(--muted);
  font-size:.97rem;
}

.card a:only-child {
  display:block;
}

.glyph {
  display:grid;
  place-items:center;
  width:2.2rem;
  height:2.2rem;
  background:#302449;
  color:#d6c5ff;
  border:1px solid #493765;
  border-radius:.65rem;
  margin-bottom:1rem;
  font:700 .9rem ui-monospace,SFMono-Regular,Consolas,monospace;
}

.section--tinted {
  background:#100e1c;
  border-block:1px solid var(--line);
}

.split {
  display:grid;
  grid-template-columns:1.03fr .97fr;
  align-items:start;
  gap:clamp(1.5rem,6vw,4.5rem);
}

.checklist {
  list-style:none;
  margin:1.1rem 0 0;
  padding:0;
  color:var(--muted);
}

.checklist li {
  line-height:1.5;
  padding:.47rem 0 .47rem 1.5rem;
  position:relative;
}

.checklist li::before {
  content:"✓";
  position:absolute;
  left:0;
  color:#8ce1c5;
  font-weight:750;
}

.sample {
  border:1px solid var(--line);
  border-radius:1.12rem;
  background:#141222;
  overflow:hidden;
}

.sample figcaption {
  padding:.8rem 1.04rem;
  color:var(--muted);
  border-bottom:1px solid var(--line);
  font-size:.9rem;
}

.sample pre {
  margin:0;
  padding:1.05rem;
  overflow:auto;
  font: .92rem/1.6 ui-monospace,SFMono-Regular,Consolas,monospace;
  color:#d4c8ff;
}

.sample code .s {
  color:#9ce6ce;
}

.sample code .b {
  color:#a8ceff;
}

.inline-link {
  display:inline-block;
  margin-top:1.05rem;
  font-weight:700;
}

.questions {
  margin-top:1.5rem;
  border-top:1px solid var(--line);
}

details {
  border-bottom:1px solid var(--line);
  padding-inline:.2rem;
}

summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  min-height:3.75rem;
  padding:.8rem 0;
  cursor:pointer;
  font-weight:680;
  list-style:none;
}

summary::-webkit-details-marker {
  display:none;
}

summary::after {
  content:"+";
  color:var(--violet);
  font-size:1.4rem;
  font-weight:450;
}

details[open] summary::after {
  content:"−";
}

details p {
  padding:0 1.3rem .95rem 0;
  color:var(--muted);
  max-width:50rem;
}

.site-footer {
  border-top:1px solid var(--line);
  background:#110f1e;
}

.foot {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1.4rem;
  flex-wrap:wrap;
  padding-block:1.6rem;
}

.foot small {
  display:block;
  margin-top:.6rem;
  color:var(--muted);
}

.document {
  width:min(51rem,calc(100% - 3rem));
  margin-inline:auto;
  padding-block:clamp(2.7rem,7vw,5.4rem);
}

.document h1 {
  font-size:clamp(2.75rem,6.6vw,4.75rem);
  margin-block:0 1rem;
  text-wrap:pretty;
}

.document .lede {
  font-size:1.14rem;
  color:var(--muted);
  max-width:43rem;
}

.document section {
  margin-top:2.1rem;
}

.document section h2 {
  font-size:1.65rem;
  margin-bottom:.62rem;
}

.document p+p {
  margin-top:.8rem;
}

.document ul,.document ol {
  color:var(--muted);
  line-height:1.65;
  padding-left:1.4rem;
}

.document li+li {
  margin-top:.35rem;
}

.document .note {
  margin-top:1.45rem;
  padding:1rem 1.2rem;
  border:1px solid var(--line);
  background:var(--panel);
  border-radius:.8rem;
}

.document .address {
  overflow-wrap:anywhere;
}

.document .sample {
  margin-top:1rem;
}

.document .meta {
  margin-top:.6rem;
  color:var(--muted);
  font-size:.9rem;
}

.document strong {
  color:var(--ink);
}

@media(max-width:54rem) {
  .hero-layout {
    min-height:0;
    gap:1rem;
    padding-block:3.2rem;
  }
  .hero-art {
    height:26rem;
  }
  .phone {
    width:min(49%,11rem);
  }
  .phone--editor {
    left:7%;
  }
  .phone--tree {
    right:3%;
  }
  .grid {
    gap:.7rem;
  }
  .card {
    padding:1.1rem;
  }
}

@media(max-width:43rem) {
  .wrap,.document {
    width:calc(100% - 2rem);
  }
  .bar {
    align-items:flex-start;
    flex-direction:column;
    gap:.6rem;
    padding-block:.8rem;
  }
  .site-nav {
    gap:.95rem;
  }
  .site-nav a {
    font-size:.87rem;
    display:inline-flex;
    align-items:center;
    min-height:2.3rem;
  }
  .hero-layout,.split {
    grid-template-columns:1fr;
  }
  .hero-layout {
    padding-block:2.65rem 1.6rem;
  }
  .hero h1 {
    max-width:34rem;
  }
  .hero-art {
    height:min(96vw,29rem);
    width:min(100%,28rem);
    margin:auto;
  }
  .phone {
    width:41%;
    border-radius:1.2rem;
  }
  .phone img {
    border-radius:.91rem;
  }
  .phone--editor {
    left:13%;
  }
  .phone--tree {
    right:13%;
  }
  .grid {
    grid-template-columns:1fr;
  }
  .foot {
    align-items:flex-start;
  }
  .footer-links {
    gap:.85rem;
  }
}