/*
 * The website's own styles (website spec §3, §4; founder, 5 November 2026:
 * "beautiful and immersive"): only the design tokens' variables (the
 * website theme, tokens.css). Phone first; wider screens at the tokens'
 * breakpoints (40em, 64em). Motion only as the page scrolls into view,
 * and none when the device asks for less.
 */

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

html {
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--vo-space-12);
}

body {
  margin: 0;
  background: var(--vo-color-background);
  color: var(--vo-color-text);
  font-family: var(--vo-font-body);
  font-size: var(--vo-font-size-md);
  line-height: var(--vo-line-height-normal);
}

a {
  color: var(--vo-color-link);
  text-underline-offset: 0.2em;
}

:focus-visible {
  outline: 2px solid var(--vo-color-focus);
  outline-offset: 2px;
}

h1,
h2,
h3 {
  margin: 0;
  line-height: var(--vo-line-height-tight);
  letter-spacing: -0.01em;
}

h1 {
  font-size: var(--vo-font-size-4xl);
  font-weight: var(--vo-font-weight-bold);
}

h2 {
  font-size: var(--vo-font-size-3xl);
  font-weight: var(--vo-font-weight-bold);
}

h3 {
  font-size: var(--vo-font-size-xl);
  font-weight: var(--vo-font-weight-semibold);
}

p {
  margin: 0;
}

.site-wrap {
  width: 100%;
  max-width: calc(var(--vo-space-12) * 12);
  margin: 0 auto;
  padding: 0 var(--vo-space-5);
}

.site-wrap--padded {
  padding-block: var(--vo-space-10);
}

.site-skip {
  position: absolute;
  top: var(--vo-space-2);
  left: var(--vo-space-2);
  z-index: 30;
  padding: var(--vo-space-2) var(--vo-space-4);
  border-radius: var(--vo-radius-md);
  background: var(--vo-color-surface);
  transform: translateY(calc(-100% - var(--vo-space-4)));
}

.site-skip:focus {
  transform: none;
}

/* The top bar: the logo and name, About, Contact, and Sign in. */
.site-top {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--vo-color-border);
  background: var(--vo-color-surface);
}

.site-top__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--vo-space-2) var(--vo-space-4);
  padding-block: var(--vo-space-2);
}

.site-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--vo-space-2);
  min-height: var(--vo-space-9);
  color: var(--vo-color-text);
  font-size: var(--vo-font-size-lg);
  font-weight: var(--vo-font-weight-bold);
  text-decoration: none;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--vo-space-2);
}

.site-nav__link {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: var(--vo-space-9);
  min-height: var(--vo-space-9);
  padding: 0 var(--vo-space-2);
  color: var(--vo-color-text);
  font-weight: var(--vo-font-weight-medium);
  text-decoration: none;
}

.site-nav__link:hover {
  color: var(--vo-color-link);
}

/* Buttons: as wide as their words. */
.site-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--vo-space-9);
  padding: 0 var(--vo-space-6);
  border: 2px solid var(--vo-color-primary);
  border-radius: var(--vo-radius-full);
  background: var(--vo-color-primary);
  color: var(--vo-color-on-primary);
  font-weight: var(--vo-font-weight-semibold);
  text-decoration: none;
  transition:
    background var(--vo-duration-normal) var(--vo-easing-standard),
    transform var(--vo-duration-normal) var(--vo-easing-standard);
}

.site-button:hover {
  background: var(--vo-color-primary-hover);
  transform: translateY(-1px);
}

/* On the purple hero and the closing band: white, and outlined. */
.site-button--light {
  border-color: var(--vo-color-on-primary);
  background: var(--vo-color-on-primary);
  color: var(--vo-color-primary);
}

.site-button--light:hover {
  background: var(--vo-color-on-primary);
}

.site-button--outline {
  border-color: var(--vo-color-on-primary);
  background: none;
  color: var(--vo-color-on-primary);
}

.site-button--outline:hover {
  background: none;
}

.site-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vo-space-3);
}

.site-eyebrow,
.site-step {
  font-size: var(--vo-font-size-sm);
  font-weight: var(--vo-font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.site-step {
  color: var(--vo-color-link);
}

.site-meta {
  color: var(--vo-color-text-muted);
  font-size: var(--vo-font-size-sm);
}

/* The home page's first screen: purple, the words and the dashboards side by side. */
.site-hero {
  overflow: hidden;
  background: radial-gradient(
    circle at 85% 15%,
    var(--vo-color-primary-hover) 0,
    var(--vo-color-primary) 55%
  );
  color: var(--vo-color-on-primary);
}

.site-hero__inner {
  display: grid;
  gap: var(--vo-space-10);
  align-items: center;
  padding-block: var(--vo-space-10) var(--vo-space-11);
}

.site-hero__text {
  display: grid;
  gap: var(--vo-space-5);
}

.site-hero h1 {
  font-size: var(--vo-font-size-5xl);
}

.site-hero__lead {
  font-size: var(--vo-font-size-xl);
}

.site-hero__devices {
  position: relative;
  padding-inline-end: var(--vo-space-9);
}

.site-hero__phone {
  position: absolute;
  right: 0;
  bottom: calc(var(--vo-space-7) * -1);
  width: 30%;
}

/* Device frames around the robots' pictures of the dashboards. */
.site-device {
  margin: 0;
  overflow: hidden;
  border: var(--vo-space-2) solid var(--vo-color-text);
  border-radius: var(--vo-radius-xl);
  background: var(--vo-color-text);
  box-shadow: var(--vo-shadow-lg);
}

.site-device img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--vo-radius-md);
}

.site-device--phone {
  border-radius: calc(var(--vo-radius-xl) * 2);
}

.site-device--phone img {
  border-radius: calc(var(--vo-radius-xl) + var(--vo-radius-sm));
}

/* Four facts in a row, under the hero. */
.site-facts {
  border-bottom: 1px solid var(--vo-color-border);
  background: var(--vo-color-surface);
}

.site-facts__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--vo-space-5);
  margin: 0 auto;
  padding-block: var(--vo-space-7);
  list-style: none;
}

.site-facts__list li {
  display: grid;
  gap: var(--vo-space-1);
}

.site-facts__list strong {
  color: var(--vo-color-link);
  font-size: var(--vo-font-size-2xl);
}

.site-facts__list span {
  color: var(--vo-color-text-muted);
  font-size: var(--vo-font-size-sm);
}

/* The stories: one idea per screen, with its picture. */
.site-story {
  padding-block: var(--vo-space-11);
}

.site-story--flip {
  background: var(--vo-color-surface);
}

.site-story__inner {
  display: grid;
  gap: var(--vo-space-9);
  align-items: center;
}

.site-story__text {
  display: grid;
  gap: var(--vo-space-4);
  font-size: var(--vo-font-size-lg);
}

.site-story__picture {
  justify-self: center;
  width: min(100%, calc(var(--vo-space-12) * 3.25));
}

/* The live demo: the parts on one side, the breakup on the other. */
.site-demo {
  padding-block: var(--vo-space-11);
  background: var(--vo-color-surface-muted);
}

.site-demo__inner {
  display: grid;
  gap: var(--vo-space-9);
  align-items: center;
}

.site-demo__text {
  display: grid;
  gap: var(--vo-space-4);
  font-size: var(--vo-font-size-lg);
}

.site-demo__card {
  display: grid;
  gap: var(--vo-space-6);
  padding: var(--vo-space-6);
  border: 1px solid var(--vo-color-border);
  border-radius: var(--vo-radius-xl);
  background: var(--vo-color-surface);
  box-shadow: var(--vo-shadow-lg);
}

.site-demo__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--vo-space-4);
}

.site-demo__field {
  display: grid;
  gap: var(--vo-space-1);
}

.site-demo__label {
  font-size: var(--vo-font-size-sm);
  font-weight: var(--vo-font-weight-medium);
}

.site-demo__box {
  display: flex;
  align-items: center;
  min-height: var(--vo-space-9);
  border: 1px solid var(--vo-color-border-strong);
  border-radius: var(--vo-radius-md);
  background: var(--vo-color-surface);
}

.site-demo__box:focus-within {
  outline: 2px solid var(--vo-color-focus);
  outline-offset: 1px;
}

.site-demo__box input {
  width: 100%;
  min-width: 0;
  min-height: var(--vo-space-9);
  padding: 0 var(--vo-space-3);
  border: 0;
  background: none;
  color: var(--vo-color-text);
  font: inherit;
  font-variant-numeric: tabular-nums;
}

.site-demo__box input:focus {
  outline: none;
}

.site-demo__unit {
  padding-inline-end: var(--vo-space-3);
  color: var(--vo-color-text-muted);
  font-size: var(--vo-font-size-sm);
  white-space: nowrap;
}

.site-demo__breakup {
  display: grid;
  margin: 0;
}

.site-demo__row {
  display: flex;
  justify-content: space-between;
  gap: var(--vo-space-4);
  padding-block: var(--vo-space-2);
  border-bottom: 1px solid var(--vo-color-border);
}

.site-demo__row dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.site-demo__row--total {
  border-bottom: 0;
  font-size: var(--vo-font-size-2xl);
  font-weight: var(--vo-font-weight-bold);
}

.site-demo__note {
  color: var(--vo-color-danger-text);
  font-size: var(--vo-font-size-sm);
}

.site-demo__note:empty {
  display: none;
}

/* What's coming, and the cards on About and Contact. */
.site-next {
  padding-block: var(--vo-space-11);
}

.site-next .site-wrap {
  display: grid;
  gap: var(--vo-space-4);
}

.site-cards {
  display: grid;
  gap: var(--vo-space-5);
  margin: var(--vo-space-5) 0 0;
  padding: 0;
  list-style: none;
}

.site-card {
  display: grid;
  align-content: start;
  gap: var(--vo-space-3);
  padding: var(--vo-space-6);
  border: 1px solid var(--vo-color-border);
  border-top: var(--vo-space-1) solid var(--vo-color-primary);
  border-radius: var(--vo-radius-lg);
  background: var(--vo-color-surface);
  box-shadow: var(--vo-shadow-sm);
}

.site-card h2 {
  font-size: var(--vo-font-size-xl);
}

.site-card p {
  color: var(--vo-color-text-muted);
}

/* The closing band. */
.site-cta {
  padding-block: var(--vo-space-11);
  background: var(--vo-color-primary);
  color: var(--vo-color-on-primary);
  text-align: center;
}

.site-cta .site-wrap {
  display: grid;
  justify-items: center;
  gap: var(--vo-space-5);
  max-width: calc(var(--vo-space-12) * 8);
  font-size: var(--vo-font-size-lg);
}

.site-cta a:not(.site-button) {
  color: var(--vo-color-on-primary);
}

/* The head of every other page: a quiet band with the title. */
.site-pagehead {
  padding-block: var(--vo-space-10);
  border-bottom: 1px solid var(--vo-color-border);
  background: var(--vo-color-surface);
}

.site-pagehead .site-wrap {
  display: grid;
  gap: var(--vo-space-3);
}

.site-pagehead .site-eyebrow {
  color: var(--vo-color-link);
}

.site-pagehead__meta {
  color: var(--vo-color-text-muted);
  font-size: var(--vo-font-size-sm);
}

.site-pagehead__lead {
  max-width: calc(var(--vo-space-12) * 8);
  color: var(--vo-color-text-muted);
  font-size: var(--vo-font-size-xl);
}

/* The legal pages: the contents beside the text on a laptop, numbered clauses. */
.site-legal {
  display: grid;
  gap: var(--vo-space-7);
  padding-block: var(--vo-space-9) var(--vo-space-11);
}

.site-contents {
  align-self: start;
  padding: var(--vo-space-5);
  border: 1px solid var(--vo-color-border);
  border-radius: var(--vo-radius-lg);
  background: var(--vo-color-surface);
}

.site-contents__title {
  margin-bottom: var(--vo-space-2);
  font-size: var(--vo-font-size-sm);
  font-weight: var(--vo-font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.site-contents ol {
  display: grid;
  margin: 0;
  padding-inline-start: var(--vo-space-5);
  font-size: var(--vo-font-size-sm);
}

.site-contents a {
  display: inline-block;
  min-width: var(--vo-space-9);
  min-height: var(--vo-space-9);
  padding: var(--vo-space-3) 0;
  color: var(--vo-color-text);
  text-decoration: none;
}

.site-contents a:hover {
  color: var(--vo-color-link);
  text-decoration: underline;
}

.site-legal__body {
  display: grid;
  gap: var(--vo-space-3);
  max-width: calc(var(--vo-space-12) * 8);
  counter-reset: clause;
  line-height: var(--vo-line-height-relaxed);
}

.site-clause {
  display: grid;
  gap: var(--vo-space-3);
  padding: var(--vo-space-6);
  border: 1px solid var(--vo-color-border);
  border-radius: var(--vo-radius-lg);
  background: var(--vo-color-surface);
  counter-increment: clause;
}

.site-clause h2 {
  font-size: var(--vo-font-size-xl);
}

.site-clause h2::before {
  content: counter(clause) '. ';
  color: var(--vo-color-link);
}

.site-list {
  display: grid;
  gap: var(--vo-space-2);
  margin: 0;
  padding-inline-start: var(--vo-space-5);
}

.site-foot {
  border-top: 1px solid var(--vo-color-border);
  background: var(--vo-color-surface);
}

.site-foot__inner {
  display: grid;
  gap: var(--vo-space-5);
  padding-block: var(--vo-space-9);
}

.site-foot__brand {
  display: grid;
  gap: var(--vo-space-3);
}

.site-foot__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vo-space-1) var(--vo-space-5);
}

.site-foot__links a {
  display: inline-flex;
  align-items: center;
  min-width: var(--vo-space-9);
  min-height: var(--vo-space-9);
}

.site-foot__note {
  max-width: calc(var(--vo-space-12) * 5);
  color: var(--vo-color-text-muted);
  font-size: var(--vo-font-size-sm);
}

@media (min-width: 40em) {
  .site-nav__link {
    display: inline-flex;
  }

  .site-facts__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .site-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-hero h1 {
    font-size: calc(var(--vo-font-size-5xl) * 1.25);
  }
}

@media (min-width: 64em) {
  h1 {
    font-size: var(--vo-font-size-5xl);
  }

  .site-hero__inner {
    grid-template-columns: 5fr 6fr;
    padding-block: var(--vo-space-12);
  }

  .site-story__inner,
  .site-demo__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--vo-space-12);
  }

  .site-story--flip .site-story__text {
    order: 2;
  }

  .site-cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .site-wrap--padded .site-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-legal {
    grid-template-columns: calc(var(--vo-space-12) * 3) minmax(0, 1fr);
    gap: var(--vo-space-9);
  }

  .site-contents {
    position: sticky;
    top: calc(var(--vo-space-12) * 0.875);
    max-height: calc(100vh - var(--vo-space-12));
    overflow-y: auto;
  }

  .site-foot__inner {
    grid-template-columns: 2fr 3fr;
    align-items: start;
  }

  .site-foot__legal {
    grid-column: 1 / -1;
  }
}

/* As each part scrolls into view, it rises into place (browsers that can, and only then). */
@keyframes site-rise {
  from {
    opacity: 0;
    transform: translateY(var(--vo-space-7));
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .site-reveal {
      animation: site-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 30%;
    }
  }
}

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

  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}