@font-face {
  font-family: "Aileron";
  src: url("/assets/fonts/Aileron-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Aileron";
  src: url("/assets/fonts/Aileron-SemiBold.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Aileron";
  src: url("/assets/fonts/Aileron-Black.woff2") format("woff2");
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}

:root {
  color-scheme: light;
  --ink: #161916;
  --ink-soft: #303630;
  --muted: #606860;
  --paper: #f1f2ee;
  --surface: #fbfcfa;
  --surface-muted: #e6e9e3;
  --accent: #ef6749;
  --accent-hover: #d85338;
  --line: #d1d6cf;
  --line-strong: #aeb6ad;
  --dark: #202421;
  --dark-line: #3c433e;
  --content: 1320px;
  font-family: "Aileron", sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: clip;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.5;
}

img { display: block; max-width: 100%; }
a { color: inherit; }
button, input { font: inherit; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { text-wrap: balance; }
p { text-wrap: pretty; }

.skip-link {
  position: fixed;
  z-index: 20;
  top: 10px;
  left: 10px;
  padding: 10px 14px;
  color: #fff;
  background: var(--ink);
  transform: translateY(-180%);
}

.skip-link:focus { transform: translateY(0); }

.site-header,
main,
.site-footer {
  width: min(var(--content), calc(100% - 56px));
  margin-inline: auto;
}

.site-header {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  border-bottom: 1px solid var(--line);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.035em;
  text-decoration: none;
}

.wordmark-logo {
  width: 32px;
  height: 32px;
  display: block;
  flex: 0 0 auto;
  border-radius: 8px;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: 14px;
  font-weight: 600;
}

.site-nav a {
  padding: 8px 0;
  color: var(--muted);
  border-bottom: 1px solid transparent;
  text-decoration: none;
  transition: color 150ms ease, border-color 150ms ease;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] { color: var(--ink); }
.site-nav a[aria-current="page"] { border-color: var(--accent); }

.hero {
  min-height: 640px;
  display: grid;
  grid-template-columns: minmax(400px, 0.78fr) minmax(600px, 1.22fr);
  align-items: center;
  gap: clamp(50px, 6vw, 94px);
  padding: 80px 0 74px;
  border-bottom: 1px solid var(--line-strong);
}

.hero-copy { max-width: 570px; }
.availability {
  max-width: 390px;
  margin: 0 0 24px;
  padding-left: 13px;
  color: var(--muted);
  border-left: 3px solid var(--accent);
  font-size: 14px;
  font-weight: 600;
}

h1,
h2 {
  line-height: 1.04;
  letter-spacing: -0.036em;
}

h1 {
  max-width: 650px;
  margin-bottom: 26px;
  font-size: clamp(48px, 5.15vw, 72px);
  font-weight: 600;
}

h2 {
  font-size: clamp(32px, 3.7vw, 48px);
  font-weight: 600;
}

.hero-lead {
  max-width: 560px;
  margin-bottom: 34px;
  color: var(--ink-soft);
  font-size: clamp(18px, 1.7vw, 21px);
  line-height: 1.55;
}

.interest-form { position: relative; max-width: 560px; }
.interest-form > label:first-child {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
}

.email-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.email-row input {
  min-width: 0;
  height: 52px;
  padding: 0 15px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-right: 0;
  border-radius: 4px 0 0 4px;
  outline: none;
}

.email-row input::placeholder { color: #858d85; }
.email-row input:focus { box-shadow: inset 0 0 0 2px var(--ink); }
.email-row button,
.download-action {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 18px;
  color: #fff;
  background: var(--accent);
  border: 1px solid var(--accent-hover);
  border-radius: 0 4px 4px 0;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms ease;
}

.email-row button:hover,
.download-action:hover { background: var(--accent-hover); }
.email-row button:disabled { color: var(--muted); background: var(--surface-muted); border-color: var(--line-strong); cursor: wait; }
.consent-row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  margin-top: 13px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.consent-row input { width: 16px; height: 16px; margin: 1px 0 0; accent-color: var(--accent); }
.consent-row a { text-underline-offset: 2px; }
.form-status { min-height: 20px; margin: 10px 0 0; color: #9c2f1f; font-size: 13px; }
.form-status[data-state="working"] { color: var(--muted); }
.website-field {
  width: 1px;
  height: 1px;
  position: absolute;
  overflow: hidden;
  clip-path: inset(50%);
}

.interest-success {
  max-width: 560px;
  padding: 18px 0;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}

.interest-success strong { font-size: 17px; }
.interest-success p { margin: 4px 0 0; color: var(--muted); font-size: 14px; }

.workspace-frame {
  min-width: 0;
  margin: 0;
}

.screenshot-stage {
  position: relative;
  overflow: visible;
}

.workspace-frame img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 14px;
  box-shadow:
    0 18px 40px -16px rgba(22, 25, 22, 0.38),
    0 3px 8px rgba(22, 25, 22, 0.12);
}

.product-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--line-strong);
}

.product-summary > div { padding: 27px 28px 29px 0; }
.product-summary > div + div { padding-left: 28px; border-left: 1px solid var(--line); }
.product-summary strong,
.product-summary span { display: block; }
.product-summary strong { margin-bottom: 5px; font-size: 14px; font-weight: 600; }
.product-summary span { max-width: 320px; color: var(--muted); font-size: 14px; }

.preview-process {
  display: grid;
  grid-template-columns: minmax(300px, 0.82fr) minmax(420px, 1.18fr);
  gap: clamp(64px, 10vw, 150px);
  padding: 120px 0 128px;
}

.preview-process h2 { max-width: 570px; margin-bottom: 24px; }
.preview-process > div > p { max-width: 480px; color: var(--muted); font-size: 17px; }
.preview-process ol { margin: 0; padding: 0; border-top: 1px solid var(--line-strong); list-style: none; }
.preview-process li {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 16px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}

.preview-process li > span { color: var(--accent); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.preview-process li p { margin: 0; color: var(--muted); }
.preview-process li strong { display: block; margin-bottom: 4px; color: var(--ink); font-weight: 600; }

.download-preview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  margin-bottom: 104px;
  padding: 46px;
  color: #f4f5f2;
  background: var(--dark);
  border: 1px solid #111411;
}

.download-preview h2 { margin-bottom: 18px; font-size: clamp(30px, 3.2vw, 42px); }
.download-copy > p { max-width: 520px; color: #b8c0ba; }
.download-action { margin-top: 8px; border-radius: 4px; }
.download-action svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.download-action.is-disabled { color: #939b95; background: #353b37; border-color: #555d57; pointer-events: none; }
.release-status { margin: 12px 0 0; color: #aeb6b0; font-size: 13px; }
.download-preview dl { margin: 0; }
.download-preview dl > div { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 14px 0; border-top: 1px solid var(--dark-line); }
.download-preview dl > div:last-child { border-bottom: 1px solid var(--dark-line); }
.download-preview dt { color: #aeb6b0; font-size: 13px; }
.download-preview dd { min-width: 0; margin: 0; font-weight: 600; }
.download-preview code { display: block; overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; font-weight: 400; }

.site-footer {
  min-height: 112px;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 30px;
  padding: 28px 0;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
}

.site-footer p { margin: 0; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 18px; }
.site-footer a:hover { color: var(--ink); }
.footer-preview-unlock {
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: 0;
  text-align: left;
  cursor: default;
}

.legal-page main { max-width: 800px; padding: 82px 0 122px; }
.legal-page .site-header,
.legal-page .site-footer { width: min(1000px, calc(100% - 56px)); }
.legal-page h1 { max-width: 760px; margin-bottom: 18px; font-size: clamp(42px, 6vw, 64px); }
.legal-page h2 { margin: 56px 0 15px; font-size: 29px; letter-spacing: -0.035em; line-height: 1.1; }
.legal-page h3 { margin: 30px 0 9px; font-size: 19px; }
.legal-page p,
.legal-page li { color: var(--ink-soft); }
.legal-page .updated { margin-bottom: 48px; color: var(--muted); font-size: 14px; }
.legal-page .summary { padding: 22px 0 22px 20px; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); border-left: 3px solid var(--accent); font-size: 18px; }
.legal-page ul { padding-left: 22px; }
.legal-page li + li { margin-top: 8px; }
.legal-page address { font-style: normal; }

.footer-preview-unlock:focus-visible,
.email-row button:focus-visible,
.download-action:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

@media (max-width: 1120px) {
  .hero { min-height: 0; grid-template-columns: 1fr; padding-top: 70px; }
  .hero-copy { max-width: 760px; }
  .workspace-frame { width: min(900px, calc(100% - 14px)); margin-right: 0; }
  .product-summary { grid-template-columns: repeat(2, 1fr); }
  .product-summary > div:nth-child(3) { padding-left: 0; border-top: 1px solid var(--line); border-left: 0; }
  .product-summary > div:nth-child(4) { border-top: 1px solid var(--line); }
  .preview-process,
  .download-preview { grid-template-columns: 1fr; gap: 50px; }
  .site-footer { grid-template-columns: auto 1fr auto; }
  .site-footer p { display: none; }
}

@media (max-width: 700px) {
  .site-header,
  main,
  .site-footer { width: min(100% - 28px, var(--content)); }
  .site-header { min-height: 66px; }
  .site-nav { gap: 15px; font-size: 12px; }
  .site-nav a[aria-current="page"] { display: none; }
  .wordmark { font-size: 16px; }
  .wordmark-logo { width: 30px; height: 30px; }
  .hero { gap: 50px; padding: 52px 0 62px; }
  h1 { font-size: clamp(42px, 12vw, 54px); }
  .email-row { grid-template-columns: 1fr; gap: 8px; }
  .email-row input { border-right: 1px solid var(--line-strong); border-radius: 4px; }
  .email-row button { border-radius: 4px; }
  .workspace-frame { width: 100%; }
  .workspace-frame img { border-radius: 9px; }
  .product-summary { grid-template-columns: 1fr; }
  .product-summary > div,
  .product-summary > div + div { padding: 19px 0; border-left: 0; }
  .product-summary > div + div { border-top: 1px solid var(--line); }
  .preview-process { padding: 84px 0 92px; }
  .download-preview { margin-inline: -14px; padding: 34px 24px; }
  .download-preview dl > div { grid-template-columns: 1fr; gap: 4px; }
  .site-footer { grid-template-columns: 1fr; align-items: start; gap: 16px; }
  .legal-page main { padding: 58px 0 88px; }
  .legal-page .site-header,
  .legal-page .site-footer { width: min(100% - 28px, 1000px); }
  .legal-page .summary { padding-left: 14px; }
}

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