/*
 * mozee.co. Every value comes from tokens.css (the --mz-mk-* marketing layer),
 * a synced copy of app/design/tokens.css. Never edit tokens.css here; run
 * scripts/sync-tokens.sh. The few site values below are built from tokens.
 *
 * One look: a light page under a black nav. No dark mode.
 * The only motion is the 0.95 press on buttons.
 */

/* Inter 4.1 variable, Latin subset, weights 100 to 900 (the site uses 300,
   400 and 600). SIL Open Font License in fonts/LICENSE.txt. */
@font-face {
  font-family: 'Inter'; /* ds-allow-hardcode: @font-face must name the family the token stack asks for */
  src: url('fonts/InterVariable-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Site values, each built from tokens. */
  --site-target: calc(var(--mz-mk-space-xl) + var(--mz-mk-space-sm)); /* 44px: nav height, touch targets, inputs */
  --site-ring: calc(var(--mz-mk-space-xxs) / 2); /* 2px focus outline */
  --site-gutter: var(--mz-mk-space-lg); /* page edge on phones */
  --site-shot: calc(var(--mz-mk-space-section) * 4.875); /* 390px: a phone screen at its own size */
  --site-form: calc(var(--mz-mk-space-section) * 7); /* 560px: the waitlist form */
  --site-read: calc(var(--mz-mk-space-section) * 8.5); /* 680px: a legal page line */
  --site-icon: var(--mz-mk-space-md); /* 17px: inline icons sit on the 17px body */
  /* The site's one error color. The marketing layer has no error token yet,
     and --mz-danger flips in dark mode, so this maps the light primitive. */
  --site-error: var(--mz-red-600); /* 4.77:1 on canvas */
}

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

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

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  background: var(--mz-mk-canvas);
  color: var(--mz-mk-ink);
  font: var(--mz-mk-type-body);
  letter-spacing: var(--mz-mk-tracking-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

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

a {
  color: var(--mz-mk-primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

:focus-visible {
  outline: var(--site-ring) solid var(--mz-mk-primary-focus);
  outline-offset: var(--site-ring);
}

/* On black, the ring takes the on-dark blue: 6.96:1 instead of 4.47:1. */
.nav :focus-visible {
  outline-color: var(--mz-mk-primary-on-dark);
}

.icon {
  width: var(--site-icon);
  height: var(--site-icon);
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sprite {
  display: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--mz-mk-space-sm);
  top: var(--mz-mk-space-sm);
  z-index: 10;
  padding: var(--mz-mk-space-xs) var(--mz-mk-space-md);
  border-radius: var(--mz-mk-radius-pill);
  background: var(--mz-mk-canvas);
  color: var(--mz-mk-primary);
  font: var(--mz-mk-type-caption);
  letter-spacing: var(--mz-mk-tracking-caption);
  transform: translateY(-200%);
}

.skip-link:focus-visible {
  transform: none;
}

/* ---------- Layout ---------- */

.wrap {
  width: 100%;
  max-width: calc(var(--mz-mk-width-text) + 2 * var(--site-gutter));
  margin-inline: auto;
  padding-inline: var(--site-gutter);
}

.wrap--center {
  text-align: center;
}

.wrap--read {
  max-width: calc(var(--site-read) + 2 * var(--site-gutter));
}

/* Tiles touch edge to edge. The color change is the divider. */
.tile {
  padding-block: var(--mz-mk-space-section);
}

.tile--white {
  background: var(--mz-mk-canvas);
  color: var(--mz-mk-ink);
}

.tile--parchment {
  background: var(--mz-mk-canvas-parchment);
  color: var(--mz-mk-ink);
}

/* ---------- Global nav ---------- */

.nav {
  background: var(--mz-mk-surface-black);
  color: var(--mz-mk-on-dark);
}

.nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mz-mk-space-md);
  min-height: var(--site-target);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--mz-mk-space-xs);
  min-height: var(--site-target);
  color: var(--mz-mk-on-dark);
  font: var(--mz-mk-type-body-strong);
  letter-spacing: var(--mz-mk-tracking-body);
}

.brand:hover {
  text-decoration: none;
}

.brand__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--mz-mk-space-lg);
  height: var(--mz-mk-space-lg);
  border-radius: var(--mz-mk-radius-xs);
  background: var(--mz-mk-on-dark);
  color: var(--mz-mk-surface-black);
}

.brand__mark .icon {
  width: var(--mz-mk-space-md);
  height: var(--mz-mk-space-md);
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  padding: var(--mz-mk-space-xxs) var(--mz-mk-space-sm);
  border-radius: var(--mz-mk-radius-pill);
  background: var(--mz-mk-primary);
  color: var(--mz-mk-on-primary);
  font: var(--mz-mk-type-button-utility);
  letter-spacing: var(--mz-mk-tracking-caption);
  transition: transform var(--mz-mk-press-duration) var(--mz-mk-press-ease);
}

.nav .nav-cta {
  color: var(--mz-mk-on-primary);
}

.nav-cta:hover {
  text-decoration: none;
}

.nav-cta:active {
  transform: scale(var(--mz-mk-press-scale));
}

/* ---------- Type ---------- */

.hero-title {
  font: var(--mz-mk-type-hero);
  letter-spacing: var(--mz-mk-tracking-hero);
  text-wrap: balance;
}

.headline {
  font: var(--mz-mk-type-display-lg);
  letter-spacing: var(--mz-mk-tracking-display-lg);
  text-wrap: balance;
}

.lead {
  margin-top: var(--mz-mk-space-md);
  font: var(--mz-mk-type-lead);
  letter-spacing: var(--mz-mk-tracking-lead);
  text-wrap: pretty;
}

.intro {
  margin-top: var(--mz-mk-space-md);
  font: var(--mz-mk-type-lead-airy);
  letter-spacing: var(--mz-mk-tracking-lead-airy);
  text-wrap: pretty;
}

.wrap--center .intro {
  max-width: var(--site-form);
  margin-inline: auto;
}

.body-text {
  margin-top: var(--mz-mk-space-md);
  text-wrap: pretty;
}

/* ---------- Buttons and links ---------- */

.ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mz-mk-space-md) var(--mz-mk-space-xl);
  margin-top: var(--mz-mk-space-xl);
}

.ctas--center {
  justify-content: center;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--site-target);
  padding: var(--mz-mk-space-sm) var(--mz-mk-space-lg);
  border: 0;
  border-radius: var(--mz-mk-radius-pill);
  background: var(--mz-mk-primary);
  color: var(--mz-mk-on-primary);
  font: var(--mz-mk-type-body);
  letter-spacing: var(--mz-mk-tracking-body);
  cursor: pointer;
  transition: transform var(--mz-mk-press-duration) var(--mz-mk-press-ease);
}

.button:hover {
  text-decoration: none;
}

.button:active {
  transform: scale(var(--mz-mk-press-scale));
}

.button--block {
  width: 100%;
}

.more {
  display: inline-flex;
  align-items: center;
  gap: var(--mz-mk-space-xxs);
  min-height: var(--site-target);
}

/* ---------- Hero ---------- */

.tile.hero {
  padding-bottom: 0;
  overflow: hidden;
}

.hero .lead {
  max-width: var(--site-form);
  margin-inline: auto;
}

/* Calendly's "No credit card required" line: one quiet reassurance under the CTA. */
.reassure {
  margin-top: var(--mz-mk-space-sm);
  color: var(--mz-mk-ink-muted);
  font: var(--mz-mk-type-caption);
  letter-spacing: var(--mz-mk-tracking-caption);
}

/* The product screen rises from the bottom edge of the tile, cut flat. */
.hero-shot {
  display: block;
  width: 100%;
  max-width: var(--site-shot);
  margin: var(--mz-mk-space-xxl) auto 0;
}

.hero-shot img {
  width: 100%;
  border-radius: var(--mz-mk-radius-lg) var(--mz-mk-radius-lg) 0 0;
  background: var(--mz-mk-canvas);
  box-shadow: var(--mz-mk-shadow-product);
}

/* ---------- Form ---------- */

.form {
  display: grid;
  gap: var(--mz-mk-space-lg);
  max-width: var(--site-form);
  margin: var(--mz-mk-space-xxl) auto 0;
  text-align: left;
}

.field {
  display: grid;
  gap: var(--mz-mk-space-xs);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

label,
legend {
  font: var(--mz-mk-type-body-strong);
  letter-spacing: var(--mz-mk-tracking-body);
}

legend {
  margin-bottom: var(--mz-mk-space-xs);
  padding: 0;
}

input[type='email'],
input[type='text'] {
  width: 100%;
  min-height: var(--site-target);
  padding: var(--mz-mk-space-xs) var(--mz-mk-space-md);
  border: 1px solid var(--mz-mk-control-border);
  border-radius: var(--mz-mk-radius-pill);
  background: var(--mz-mk-canvas);
  color: var(--mz-mk-ink);
  font: var(--mz-mk-type-body);
  letter-spacing: var(--mz-mk-tracking-body);
  appearance: none;
}

input::placeholder {
  color: var(--mz-mk-ink-muted);
  opacity: 1;
}

input[type='email']:focus-visible,
input[type='text']:focus-visible {
  border-color: var(--mz-mk-primary-focus);
  outline-offset: 0;
}

input:user-invalid {
  border-color: var(--site-error);
}

.field-error {
  display: none;
  align-items: center;
  gap: var(--mz-mk-space-xs);
  color: var(--site-error);
  font: var(--mz-mk-type-caption);
  letter-spacing: var(--mz-mk-tracking-caption);
}

.field:has(input:user-invalid) .field-error {
  display: flex;
}

/* Honeypot: off screen, out of tab order, hidden from assistive tech. */
.hp {
  position: absolute;
  left: -100vw;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.fine-print {
  color: var(--mz-mk-ink-muted);
  font: var(--mz-mk-type-caption);
  letter-spacing: var(--mz-mk-tracking-caption);
}

.fine-print a {
  text-decoration: underline;
}

/* ---------- Plain pages: privacy, thanks, 404 ---------- */

.doc h1 {
  font: var(--mz-mk-type-display-lg);
  letter-spacing: var(--mz-mk-tracking-display-lg);
}

.doc h2 {
  margin-top: var(--mz-mk-space-xxl);
  font: var(--mz-mk-type-tagline);
  letter-spacing: var(--mz-mk-tracking-tagline);
}

.doc p,
.doc ul {
  margin-top: var(--mz-mk-space-sm);
}

.doc ul {
  padding-left: var(--mz-mk-space-lg);
}

.doc li + li {
  margin-top: var(--mz-mk-space-xxs);
}

.doc p a,
.doc li a {
  text-decoration: underline;
  overflow-wrap: anywhere; /* long URLs wrap on a 280px screen */
}

.doc .lead {
  margin-top: var(--mz-mk-space-md);
}

/* Legal pages: the version line, the contents list, tables and the
   processor cards. */
.doc-meta {
  margin-top: var(--mz-mk-space-sm);
  color: var(--mz-mk-ink-muted);
  font: var(--mz-mk-type-caption);
  letter-spacing: var(--mz-mk-tracking-caption);
}

.doc p.doc-meta {
  margin-top: var(--mz-mk-space-xs);
}

.doc .doc-meta + p {
  margin-top: var(--mz-mk-space-lg);
}

.toc {
  margin-top: var(--mz-mk-space-xl);
  padding: var(--mz-mk-space-md) var(--mz-mk-space-lg);
  border-radius: var(--mz-mk-radius-md);
  background: var(--mz-mk-canvas-parchment);
}

.toc-title {
  font: var(--mz-mk-type-caption-strong);
  letter-spacing: var(--mz-mk-tracking-caption);
}

.doc .toc ol {
  margin: var(--mz-mk-space-xs) 0 0;
  padding: 0;
  list-style: none;
  font: var(--mz-mk-type-caption);
  letter-spacing: var(--mz-mk-tracking-caption);
}

.doc .toc li + li {
  margin-top: 0;
}

.toc a {
  display: inline-flex;
  align-items: center;
  min-height: var(--site-target);
}

.doc section {
  scroll-margin-top: var(--mz-mk-space-lg);
}

.table-wrap {
  margin-top: var(--mz-mk-space-sm);
  overflow-x: auto;
}

.doc table {
  width: 100%;
  border-collapse: collapse;
  font: var(--mz-mk-type-caption);
  letter-spacing: var(--mz-mk-tracking-caption);
  text-align: left;
}

.doc th,
.doc td {
  padding: var(--mz-mk-space-xs) var(--mz-mk-space-sm) var(--mz-mk-space-xs) 0;
  border-bottom: 1px solid var(--mz-mk-control-border);
  vertical-align: top;
}

.doc thead th {
  font: var(--mz-mk-type-caption-strong);
  letter-spacing: var(--mz-mk-tracking-caption);
}

.doc tbody th {
  font-weight: inherit;
}

.doc ul.entries {
  display: grid;
  gap: var(--mz-mk-space-sm);
  padding: 0;
  list-style: none;
}

.doc .entries li + li {
  margin-top: 0;
}

.entry {
  padding: var(--mz-mk-space-md);
  border-radius: var(--mz-mk-radius-md);
  background: var(--mz-mk-canvas-parchment);
}

.entry h3 {
  font: var(--mz-mk-type-body-strong);
  letter-spacing: var(--mz-mk-tracking-body);
}

.entry dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--mz-mk-space-xxs) var(--mz-mk-space-sm);
  margin: var(--mz-mk-space-xs) 0 0;
  font: var(--mz-mk-type-caption);
  letter-spacing: var(--mz-mk-tracking-caption);
}

.entry dt {
  color: var(--mz-mk-ink-muted);
}

.entry dd {
  margin: 0;
}

.placeholder {
  padding-inline: var(--mz-mk-space-xxs);
  border-radius: var(--mz-mk-radius-xs);
  background: var(--mz-mk-canvas-parchment);
  font: var(--mz-mk-type-body-strong);
  letter-spacing: var(--mz-mk-tracking-body);
}

.updated {
  margin-top: var(--mz-mk-space-xxl);
  color: var(--mz-mk-ink-muted);
  font: var(--mz-mk-type-caption);
  letter-spacing: var(--mz-mk-tracking-caption);
}

.page-message {
  display: grid;
  align-content: center;
}

main {
  flex: 1 0 auto;
}

/* ---------- Footer ---------- */

.footer {
  padding-block: var(--mz-mk-space-xxl);
  background: var(--mz-mk-canvas-parchment);
  color: var(--mz-mk-ink-muted-80);
  font: var(--mz-mk-type-fine-print);
  letter-spacing: var(--mz-mk-tracking-fine-print);
}

.footer .wrap > * + * {
  margin-top: var(--mz-mk-space-md);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--mz-mk-space-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--site-target);
  color: var(--mz-mk-ink-muted-80);
}

.footer a {
  color: var(--mz-mk-ink-muted-80);
  text-decoration: underline;
}

.footer-links a {
  text-decoration: none;
}

.footer-links a:hover {
  text-decoration: underline;
}

/* ---------- Breakpoints (from the reference) ---------- */

@media (max-width: 1068px) {
  .hero-title {
    font: var(--mz-mk-type-display-lg);
    letter-spacing: var(--mz-mk-tracking-display-lg);
  }

  .lead {
    font: var(--mz-mk-type-lead-airy);
    letter-spacing: var(--mz-mk-tracking-lead-airy);
  }
}

@media (max-width: 734px) {
  .tile {
    padding-block: var(--mz-mk-space-xxl);
  }
}

@media (max-width: 640px) {
  .headline {
    font: var(--mz-mk-type-display-md);
    line-height: 1.15;
    letter-spacing: var(--mz-mk-tracking-display-md);
  }

}

@media (max-width: 419px) {
  .hero-title {
    font: var(--mz-mk-type-display-md);
    line-height: 1.12;
    letter-spacing: var(--mz-mk-tracking-display-md);
  }

  .headline {
    font: var(--mz-mk-type-lead);
    font-weight: 600;
    letter-spacing: var(--mz-mk-tracking-display-lg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .button,
  .nav-cta {
    transition: none;
  }

  .button:active,
  .nav-cta:active {
    transform: none;
  }
}