/* VanaTell — vanatell.com. Built to the Pen frames `Web 1440` and `Web 390`.
   Tokens are the app's dark column (vanatell-app/design/DIRECTION.md). */
:root {
  color-scheme: dark;
  --bg: #0E0F13;
  --surface: #1B1E24;
  --surface-2: #23272F;
  --line: #2E323B;
  --text: #F7F8FA;
  --text-2: #B4B8C2;
  --text-3: #7D8290;
  --primary: #726AF7;
  --primary-strong: #9A93F0;
  --button: #5B52D6;        /* #F7F8FA on it reads at 5.6:1 */
  --button-hover: #675EE0;  /* still 4.6:1 */
  --crystal: #D6E9FF;
  --tell: #F986D6;
  --party: #7FB8FF;
  --ls1: #8AEF7E;
  --ls2: #BB9FFB;

  --font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --wordmark: "Cinzel", Georgia, serif;

  /* 80px gutters at 1440, 20px at 390, linear between */
  --gutter: clamp(20px, 5.7143vw - 2.2857px, 80px);
  --wrap: 1280px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  overflow-x: clip;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main { flex: 1 0 auto; }
h1, h2, h3, p, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img, svg { display: block; }

a { color: var(--primary-strong); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

:focus-visible {
  outline: 2px solid var(--primary-strong);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap {
  width: min(var(--wrap), 100% - 2 * var(--gutter));
  margin-inline: auto;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: -80px;
  z-index: 10;
  padding: 10px 16px;
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
}
.skip:focus { top: 12px; }

.gh { flex: none; fill: currentColor; }

/* ---------- Header ---------- */
.site-header { position: relative; z-index: 2; }

.home { flex: 1; min-height: 1px; }
.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 72px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text);
  text-decoration: none;
}
.brand:hover { text-decoration: none; }
.brand .crystal { width: 14.5px; height: 28px; }

.wordmark {
  font-family: var(--wordmark);
  font-weight: 600;
  font-size: 22px;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--text);
}

.nav ul {
  display: flex;
  align-items: center;
  gap: 32px;
}
.nav a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-block: 10px;
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
  color: var(--text-2);
}
.nav a:hover { color: var(--text); text-decoration: none; }
.nav .gh { width: 18px; height: 18px; }

/* ---------- Hero ----------
   One 1440×810 composition. The sky and the four star layers are 3486×1961 frames of it; the auroras and the
   halo are CSS ellipses placed in its coordinates; the phones and the line-art crystal sit above it. */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  container-type: inline-size;
  background: var(--bg);
}

.hero-field {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
/* The sky's edges fade into the page, so the composition never reads as a rectangle at any width. */
.hero-field::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, var(--bg), rgb(14 15 19 / 0) 14%, rgb(14 15 19 / 0) 86%, var(--bg)),
    linear-gradient(to right, var(--bg), rgb(14 15 19 / 0) 9%, rgb(14 15 19 / 0) 91%, var(--bg));
}

/* desktop: the composition box covers the hero (the hero is 16:9 up to 1440, then 810 tall and wider) */
.hero-stage,
.hero-art {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  aspect-ratio: 16 / 9;
  transform: translateY(-50%);
}

.layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.aurora,
.halo {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
}
.aurora { filter: blur(5cqw); }             /* 72px at 1440 */
.aurora-lavender {                          /* 1260×324 at (304,450) */
  left: 21.111%; top: 55.556%; width: 87.5%; height: 40%;
  background: rgb(114 106 247 / 0.18);
}
.aurora-teal {                              /* 1080×270 at (343,384) */
  left: 23.819%; top: 47.407%; width: 75%; height: 33.333%;
  background: rgb(117 220 249 / 0.10);
}
.aurora-mist {                              /* 900×340 at (300,470), blur 90 */
  left: 20.833%; top: 58.025%; width: 62.5%; height: 41.975%;
  background: rgb(154 147 240 / 0.12);
  filter: blur(6.25cqw);
}
.aurora-edge {                              /* teal haze right of the phones: 760×400 at (1000,90) */
  left: 69.444%; top: 11.111%; width: 52.778%; height: 49.383%;
  background: rgb(117 220 249 / 0.10);
}
.halo {                                     /* 800×680 at (463,60), blur 60: the glow behind the phones */
  left: 32.153%; top: 7.407%; width: 55.556%; height: 83.951%;
  background: radial-gradient(closest-side, rgb(114 106 247 / 0.22), rgb(117 220 249 / 0.08) 55%, rgb(117 220 249 / 0));
  filter: blur(4.1667cqw);
}

.prism {                                    /* 350×700 at (681,55) */
  position: absolute;
  left: 47.292%; top: 6.79%; width: 24.306%; height: 86.42%;
  overflow: visible;
  fill: none;
  stroke: rgb(214 233 255 / 0.36);
  stroke-width: 1;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.phones {                                   /* drawn at 80%: 1152×648 at (90,90) */
  position: absolute;
  left: 6.25%; top: 11.111%; width: 80%;
  height: auto;
}

.hero-inner {
  position: relative;
  height: min(810px, 56.25cqw);
}

.hero-copy {
  position: relative;
  z-index: 1;
  padding-top: min(190px, 13.194cqw);
}

.lockup {
  display: flex;
  align-items: center;
  gap: min(20px, 1.389cqw);
  font-weight: 600;
}
.lockup .crystal {                          /* the 98×173 frame; the art fits its height */
  flex: none;
  width: min(78px, 5.444cqw);
  height: min(138px, 9.611cqw);
}
.lockup .wordmark { position: relative; top: -0.04em; font-size: min(76px, 5.278cqw); }

.tagline {
  margin-top: min(28px, 1.944cqw);
  font-size: min(26px, 1.806cqw);
  line-height: 1.4;
  color: var(--text-2);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: min(27px, 1.875cqw);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 24px;
  border-radius: 999px;
  font: 600 16px/1 var(--font);
  text-align: center;
  white-space: nowrap;
}
.button:hover { text-decoration: none; }
.button:focus-visible { border-radius: 999px; }
.button-primary { background: var(--button); color: var(--text); }
.button-primary:hover { background: var(--button-hover); }
.button-secondary {
  color: var(--text);
  background: rgb(247 248 250 / 0.05);
  box-shadow: inset 0 0 0 1px var(--line);
}
.button-secondary:hover { background: rgb(247 248 250 / 0.1); }

/* below 720 the copy no longer clears the phones: stack, copy on top, phones underneath (the `Web 390` frame).
   Between 720 and 1440 the whole 1440 composition scales with the container (cqw), devices beside the copy.
   --pw is the width the 1440 composition is drawn at: 924 at 390, capped at 1152. */
@media (max-width: 719px) {
  .hero { --pw: min(237.05cqw, 1152px); }

  .hero-stage { inset: 0; width: auto; aspect-ratio: auto; transform: none; }

  .aurora { opacity: 0.45; filter: blur(calc(var(--pw) * 0.05)); }
  .aurora-mist { filter: blur(calc(var(--pw) * 0.0625)); }
  /* fainter, and placed from the hero's bottom edge, behind the phones */
  .aurora-lavender {
    left: calc(50% - var(--pw) * 0.4375);
    top: calc(100% - var(--pw) * 0.3084);
    width: calc(var(--pw) * 0.875);
    height: calc(var(--pw) * 0.225);
  }
  .aurora-teal {
    left: calc(50% - var(--pw) * 0.3542);
    top: calc(100% - var(--pw) * 0.3542);
    width: calc(var(--pw) * 0.75);
    height: calc(var(--pw) * 0.1875);
  }
  .aurora-mist {
    left: calc(50% - var(--pw) * 0.3125);
    top: calc(100% - var(--pw) * 0.2945);
    width: calc(var(--pw) * 0.625);
    height: calc(var(--pw) * 0.2361);
  }
  .halo,
  .aurora-edge { display: none; }

  .hero-inner { height: auto; }
  .hero-copy { padding-top: 48px; }

  .lockup { gap: 16px; }
  .lockup .crystal { width: 58px; height: 102px; }
  .lockup .wordmark { font-size: 58px; }
  .tagline { margin-top: 24px; font-size: 22px; }
  .actions { margin-top: 24px; }

  .hero-art {
    position: relative;
    top: auto;
    width: auto;
    aspect-ratio: auto;
    height: calc(var(--pw) * 0.4306);       /* 620 of the composition */
    transform: none;
  }
  .phones {                                 /* the 1440 frame at --pw, phone cluster centred */
    left: calc(50% - var(--pw) * 0.6649);
    top: calc(var(--pw) * -0.0347);
    width: var(--pw);
  }
  .prism {                                  /* 175×350 at (107,392) of the 390 frame */
    left: calc(50% - var(--pw) * 0.0947);
    top: calc(var(--pw) * 0.0325);
    width: calc(var(--pw) * 0.1894);
    height: calc(var(--pw) * 0.3788);
  }
}

@media (max-width: 720px) {
  .hero-copy { padding-top: 34px; }
  .lockup { gap: 12px; }
  .lockup .crystal { width: 45px; height: 79px; }
  .lockup .wordmark { font-size: 44px; }
  .tagline { margin-top: 22px; font-size: 19px; }
  .actions { flex-direction: column; gap: 10px; margin-top: 22px; }
  .button { width: 100%; }
}

/* the sky moves: auroras drift like smoke, stars twinkle, the far stars creep (parallax), the crystal breathes */
@media (prefers-reduced-motion: no-preference) {
  .aurora-lavender { animation: drift-a 38s ease-in-out infinite alternate; }
  .aurora-teal { animation: drift-b 46s ease-in-out infinite alternate; }
  .aurora-mist { animation: drift-a 52s ease-in-out -20s infinite alternate; }
  .aurora-edge { animation: drift-b 44s ease-in-out -12s infinite alternate; }
  .halo { animation: drift-c 60s ease-in-out infinite alternate; }
  .stars-1 { animation: twinkle 7s ease-in-out -2s infinite; }
  .stars-2 { animation: twinkle 9s ease-in-out -5s infinite; }
  .stars-3 { animation: twinkle 11s ease-in-out -1s infinite, creep 60s ease-in-out infinite alternate; }
  .stars-4 { animation: twinkle 13s ease-in-out -8s infinite, creep 60s ease-in-out -30s infinite alternate; }
  .prism { animation: breathe 10s ease-in-out infinite; }
}
@keyframes drift-a {
  from { transform: translate3d(-30px, 0, 0) scale(1); }
  to { transform: translate3d(30px, 0, 0) scale(1.08); }
}
@keyframes drift-b {
  from { transform: translate3d(30px, 0, 0) scale(1.08); }
  to { transform: translate3d(-30px, 0, 0) scale(1); }
}
@keyframes drift-c {
  from { transform: translate3d(-12px, 0, 0) scale(1); }
  to { transform: translate3d(12px, 0, 0) scale(1.04); }
}
@keyframes twinkle {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}
@keyframes creep {
  from { translate: 0 0; }
  to { translate: -8px 0; }
}
@keyframes breathe {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

/* ---------- Sections ---------- */
.section { padding-block: 96px; }

.section-grid {
  display: grid;
  gap: 24px;
}

h2 {
  font-size: 32px;
  font-weight: 600;
  line-height: 40px;
}

h3 {
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
}

.section-body p { color: var(--text-2); }

@media (min-width: 960px) {
  .section-grid {
    grid-template-columns: 360px minmax(0, 1fr);
    gap: 64px;
  }
}

/* What comes through */
.intro { font-size: 18px; line-height: 1.55; }

.log {
  display: flex;
  flex-direction: column;
  gap: 6.5px;
  margin-top: 24px;
  padding: 18px 22px;
  background: rgb(21 23 28 / 0.8);
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 15px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.log .tell { color: var(--tell); }
.log .party { color: var(--party); }
.log .ls1 { color: var(--ls1); }
.log .ls2 { color: var(--ls2); }

.section-body .after-log { margin-top: 24px; line-height: 1.4; color: var(--text-3); }

/* How it works */
.steps {
  display: grid;
  gap: 24px;
  counter-reset: step;
}
.step {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  column-gap: 20px;
}
.step::before {
  counter-increment: step;
  content: counter(step);
  grid-row: 1 / span 3;
  width: 32px;
  height: 32px;
  margin-top: -4px;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: 14px;
  font-weight: 600;
  line-height: 30px;
  text-align: center;
  color: var(--text-2);
}
.step > * { grid-column: 2; }
.step p { margin-top: 8px; }
.step p a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgb(180 184 194 / 0.35);
  text-underline-offset: 3px;
}
.step p a:hover { color: var(--text); text-decoration-color: currentColor; }

.command {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 48px;
  margin-top: 8px;
  padding: 0 4px 0 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.get code { font: 500 15px/1 var(--font); color: var(--text); }
.command code {
  min-width: 0;
  font: 500 15px/24px var(--font);
  color: var(--text);
  white-space: nowrap;
  overflow-x: auto;
}

.copy {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--primary-strong);
  font: 600 14px/1 var(--font);
  cursor: pointer;
}
.copy:hover { background: var(--surface-2); }
.copy svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.subhead { margin-top: 24px; }

.facts li {
  padding-block: 25px 11px;
  border-bottom: 1px solid var(--line);
  line-height: 1.55;
  color: var(--text-2);
}
.facts li:first-child { padding-top: 24px; }

/* Made for the phone */
.get { margin-top: -2px; }                  /* first title's cap line level with the section heading's */
.features li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  column-gap: 20px;
  padding-block: 20px;
  border-bottom: 1px solid var(--line);
}
.features li:first-child { padding-top: 0; }
.features .icon {
  grid-row: 1 / span 2;
  align-self: start;
  justify-self: center;
  width: 26px;
  height: 26px;
  margin-top: 5px;
  fill: none;
  stroke: var(--text-2);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.features h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 10px;
}
.features p { margin-top: 6px; }
.pearls { display: inline-flex; gap: 7px; }
.pearl { width: 25px; height: 25px; }

/* Get the app */
.get li {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  column-gap: 24px;
  align-items: baseline;
  padding-block: 20px;
  border-bottom: 1px solid var(--line);
}
.get li:first-child { padding-top: 0; }
.get li:last-child { padding-bottom: 0; border-bottom: 0; }
.get a { font-weight: 500; }
.get p { line-height: 24px; }
.get p > a,
.licence { margin-left: 4px; }              /* with the space: the 8px gap of the Pen row */
.get p > .gh-link { margin-left: 0; }
.gh-link { display: inline-flex; align-items: center; gap: 8px; vertical-align: top; }
.gh-link .gh { width: 20px; height: 20px; color: var(--text); }
.gh-link:hover { text-decoration: underline; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); }
.footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px 48px;
  padding-block: 42px 56px;
}
.brand-small { gap: 4px; }
.brand-small .crystal { width: 12.4px; height: 24px; }
.brand-small .wordmark { font-size: 18px; }
.disclaimer {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-3);
}
.repo {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
  color: var(--text);
}
.repo .gh { width: 22px; height: 22px; }
.repo:hover { background: var(--surface); text-decoration: none; }

/* ---------- Phone ---------- */
@media (max-width: 720px) {
  .header-row { height: 60px; }
  .nav { display: none; }
  .brand .crystal { width: 12.4px; height: 24px; }
  .brand .wordmark { font-size: 20px; }

  .section { padding-block: 56px; }
  h2 { font-size: 26px; line-height: 32px; }

  .section-body p,
  .facts li { font-size: 15px; line-height: 23px; }
  .section-body .intro { font-size: 16px; line-height: 1.55; }
  .section-body .after-log { line-height: 1.4; }
  .log { padding: 14px 16px; font-size: 13px; }

  .steps { gap: 22px; }
  .step { grid-template-columns: 28px minmax(0, 1fr); column-gap: 14px; }
  .step::before { width: 28px; height: 28px; margin-top: -2px; font-size: 13px; line-height: 26px; }
  .step h3,
  .subhead { font-size: 17px; }
  .subhead { margin-top: 22px; }
  .facts li { padding-top: 24px; }
  .facts li:first-child { padding-top: 24px; }
  .command { height: 44px; padding-left: 14px; }
  .command code { font-size: 14px; }
  .copy { height: 34px; padding: 0 10px; font-size: 13px; }

  .features li { grid-template-columns: 32px minmax(0, 1fr); column-gap: 14px; padding-block: 24px 14px; }
  .features li:first-child { padding-top: 0; }
  .features p { margin-top: 3px; }
  .features .icon { width: 24px; height: 24px; }
  .features h3 { font-size: 16px; justify-content: space-between; }

  .get { margin-top: 0; }
  .get li { display: block; padding-block: 24px 13px; }
  .get li:first-child { padding-top: 0; }
  .get li:last-child { padding-bottom: 0; }
  .get h3 { font-size: 16px; }
  .get p { margin-top: 2px; }
  .licence { display: block; margin: 4px 0 0; }
  .licence::first-letter { text-transform: uppercase; }

  .footer-row { flex-direction: column; align-items: flex-start; gap: 21px; padding-block: 33px 48px; }
  .disclaimer { margin-top: 10px; font-size: 13px; }
  .brand-small .wordmark { font-size: 16px; }
  .repo { gap: 8px; font-size: 14px; }
  .repo .gh { width: 20px; height: 20px; }
  .disclaimer br { display: none; }
}

/* ---------- 404 ---------- */
.missing { padding-block: 96px 120px; }
.missing h1 { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); line-height: 1.15; }
.missing p { margin-top: 16px; color: var(--text-2); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}