@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/geist-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("assets/source-serif-4-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/geist-mono-latin.woff2") format("woff2");
}

:root {
  color-scheme: light dark;
  --background: light-dark(#f7f8fb, #0f1218);
  --foreground: light-dark(#18202f, #e5e8ee);
  --muted: light-dark(#525b6c, #a6adba);
  --subtle: light-dark(#5d6677, #8a92a0);
  --accent: light-dark(#2347c5, #8fa8ff);
  --accent-hover: light-dark(#1a3699, #b6c6ff);
  --on-accent: light-dark(#ffffff, #0b1538);
  --accent-tint: light-dark(#e4e9fa, #18203b);
  --border: light-dark(#e1e4ea, #252930);
  --control-border: light-dark(#cfd4dd, #343943);
  --surface: light-dark(#f0f2f6, #15181d);
  --band: light-dark(#eceff4, #171a20);
  --band-deep: light-dark(#dfe3ea, #1f232a);
  --navy: light-dark(#14203f, #172447);
  --shot-shadow: light-dark(rgb(14 22 48 / 22%), rgb(0 0 0 / 60%));
  --serif: "Source Serif 4", Georgia, serif;
  --mono: "Geist Mono", monospace;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Navy sections redefine the tokens so their contents read light in both appearances. */
.band, .closing {
  --background: #1b2849;
  --foreground: #edf1fa;
  --muted: #b3bdd6;
  --subtle: #9aa5c2;
  --accent: #a9bdff;
  --accent-hover: #cad7ff;
  --on-accent: #0c1638;
  --border: #2a3760;
  --control-border: #3a4877;
  --surface: #22305a;
  --band-deep: #0f1932;
  --shot-shadow: rgb(0 0 0 / 45%);
  color: var(--foreground);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: "Geist", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }

a { color: var(--accent); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.2em; transition: color 160ms var(--ease), text-decoration-color 160ms var(--ease); }
a:hover { color: var(--accent-hover); text-decoration-color: currentColor; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; }
::selection { background: var(--accent); color: var(--on-accent); }
[hidden] { display: none !important; }
.container { width: 100%; max-width: 1168px; margin: 0 auto; padding-inline: 24px; }

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 10;
  padding: 10px 16px;
  background: var(--background);
  border: 1px solid var(--accent);
  border-radius: 8px;
  transform: translateY(-150%);
}
.skip-link:focus { transform: translateY(0); }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: color-mix(in srgb, var(--background) 86%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.site-nav { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding-block: 14px; }
.brand { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.brand:hover { color: inherit; }
.brand img { border-radius: 8px; }
.brand span { font-family: var(--serif); font-weight: 600; font-size: 22px; letter-spacing: -0.01em; }
.nav-links { display: flex; align-items: center; gap: 28px; margin-left: auto; font-size: 14px; font-weight: 600; }
.nav-links > a { color: var(--foreground); }
.menu-toggle { display: none; }

/* Two lines that turn into an X when the menu is open. */
.menu-icon, .menu-icon::before, .menu-icon::after { display: block; width: 16px; height: 1.5px; border-radius: 1px; background: currentColor; }
.menu-icon { position: relative; background: transparent; }
.menu-icon::before, .menu-icon::after { content: ""; position: absolute; left: 0; transition: transform 200ms var(--ease); }
.menu-icon::before { transform: translateY(-3.5px); }
.menu-icon::after { transform: translateY(3.5px); }
.menu-toggle[aria-expanded="true"] .menu-icon::before { transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-icon::after { transform: rotate(-45deg); }

/* Buttons */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 28px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: background-color 160ms var(--ease), color 160ms var(--ease), transform 160ms var(--ease), box-shadow 160ms var(--ease);
}
.button:hover { transform: translateY(-1px); text-decoration: none; }
.button:active { transform: translateY(0) scale(0.98); }
.button-primary { background: var(--accent); color: var(--on-accent); }
.button-primary:hover { background: var(--accent-hover); color: var(--on-accent); box-shadow: 0 6px 16px -8px var(--accent); }
.button-secondary { border: 1px solid var(--control-border); color: var(--foreground); background: var(--background); }
.button-secondary:hover { background: var(--surface); color: var(--foreground); }
.nav-download { min-height: 39px; padding: 9px 16px; font-size: 14px; }

/* Type */
h1, h2, h3 { margin: 0; font-weight: 600; }
h1, h2 { font-family: var(--serif); font-weight: 600; letter-spacing: -0.018em; text-wrap: balance; font-optical-sizing: auto; }
h2 { max-width: 680px; font-size: clamp(32px, 4.2vw, 48px); line-height: 1.08; margin-top: 10px; }
h3 { letter-spacing: -0.01em; }
p { text-wrap: pretty; }
.section-label { font-size: 15px; font-weight: 600; color: var(--accent); margin: 0; }
.section-intro { color: var(--muted); font-size: 18px; max-width: 640px; margin: 16px 0 0; }

kbd { display: inline-block; font-family: var(--mono); font-size: 0.8em; font-weight: 400; line-height: 1.4; padding: 1px 7px; margin: 0 1px; border-radius: 5px; background: var(--background); border: 1px solid var(--control-border); border-bottom-width: 2px; color: var(--foreground); vertical-align: 0.08em; }
.keys { display: inline-flex; gap: 2px; white-space: nowrap; }

/* Hero */
.hero { padding-top: 88px; }
.hero-copy { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero h1 { font-size: clamp(44px, 7.4vw, 84px); line-height: 1; letter-spacing: -0.025em; max-width: 860px; }
.hero-description { font-size: 20px; line-height: 1.5; color: var(--muted); max-width: 560px; margin: 22px 0 0; }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 34px; }
.requirements { font-size: 13px; color: var(--subtle); margin: 16px 0 0; }
.requirements a { color: inherit; text-decoration-color: currentColor; }
.requirements a:hover { color: var(--accent); }
.hero-stage {
  margin-top: 64px;
  padding-top: 8px;
  background: linear-gradient(to bottom, var(--background) 0, var(--background) 34%, var(--navy) 34%, var(--navy) 100%);
}
.hero-shot {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: 12px;
  box-shadow: 0 0 0 1px var(--border), 0 30px 60px -24px var(--shot-shadow), 0 12px 24px -16px var(--shot-shadow);
}

/* Quick Prompt band */
.band { background: var(--navy); padding-block: 96px 112px; }
.band-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 24px 56px; align-items: end; }
.band-head h2 { margin-bottom: 4px; }
.lead { font-size: 19px; line-height: 1.6; margin: 0; max-width: 560px; }
.lead kbd { font-size: 15px; }
.lead-note { color: var(--muted); font-size: 15px; margin: 12px 0 0; max-width: 560px; }
/* Size the demo by the window's height as well as its width, so the whole video and its steps
   fit on screen together under the sticky header. 1.6293 is the video's aspect ratio, and the
   chrome is the header plus the steps row. */
.demo {
  --demo-chrome: 200px;
  width: min(100%, max(520px, calc((100vh - var(--demo-chrome)) * 1.6293)));
  width: min(100%, max(520px, calc((100svh - var(--demo-chrome)) * 1.6293)));
  margin: 48px auto 0;
}
.demo-stage { position: relative; }
.demo-video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  background: var(--band-deep);
  box-shadow: 0 0 0 1px var(--border), 0 30px 60px -24px var(--shot-shadow), 0 12px 24px -16px var(--shot-shadow);
}
.demo-toggle {
  position: absolute;
  right: 16px;
  bottom: 16px;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--foreground) 18%, transparent);
  background: color-mix(in srgb, var(--background) 88%, transparent);
  backdrop-filter: blur(8px);
  color: var(--foreground);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 160ms var(--ease), transform 160ms var(--ease);
}
.demo-toggle:hover { background: var(--background); transform: translateY(-1px); }
.demo-toggle:active { transform: scale(0.97); }

/* Steps under the demo. A plain list until the video plays; then the current step lights up
   and a bar along its top edge tracks the step's progress. */
.demo-steps { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 32px; }
.demo-steps li { position: relative; padding-top: 16px; border-top: 2px solid var(--border); transition: opacity 240ms var(--ease); }
.demo-steps li::before { content: ""; position: absolute; top: -2px; left: 0; height: 2px; width: calc(var(--step-progress, 0) * 100%); background: var(--accent); }
.demo-step-name { display: block; font-weight: 600; font-size: 17px; }
.demo-step-text { display: block; color: var(--muted); font-size: 15px; line-height: 1.5; margin-top: 4px; }
.demo-step-text kbd { font-size: 13px; }
.demo-steps[data-playing] li { opacity: 0.45; }
.demo-steps[data-playing] li.is-current { opacity: 1; }

/* Short, wide windows: the steps move beside the video, which then gets the full height.
   Taller windows keep them underneath, where the video can fill the band. */
@media (min-width: 861px) and (max-height: 760px) {
  .demo {
    --demo-chrome: 150px;
    --demo-steps-width: 200px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--demo-steps-width);
    gap: 32px;
    align-items: center;
    width: min(100%, max(600px, calc((100vh - var(--demo-chrome)) * 1.6293 + var(--demo-steps-width) + 32px)));
    width: min(100%, max(600px, calc((100svh - var(--demo-chrome)) * 1.6293 + var(--demo-steps-width) + 32px)));
  }
  .demo-steps { grid-template-columns: 1fr; margin: 0; gap: 12px; }
  /* Beside the video the progress bar runs down each step's left edge. */
  .demo-steps li { padding: 6px 0 6px 20px; border-top: 0; border-left: 2px solid var(--border); }
  .demo-steps li::before { top: 0; left: -2px; width: 2px; height: calc(var(--step-progress, 0) * 100%); }
}

/* Features */
.section { padding-top: 112px; }
.feature-row { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: center; margin-top: 56px; }
.feature-row-flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.feature-row-flip .feature-visual { order: 2; }
.feature-row-wide { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: end; gap: 24px 56px; }
.feature-row-wide .feature-visual { grid-column: 1 / -1; margin-top: 16px; }
.feature-row-wide .feature-copy p { margin-top: 0; }
.feature-row-wide .feature-copy { display: contents; }
.feature-visual { border-radius: 14px; overflow: hidden; border: 1px solid var(--border); background: var(--band); }
.feature-visual img { display: block; width: 100%; height: auto; }
.feature-visual-soft { display: grid; place-items: center; padding: 20px 28px; background: var(--band); }
.feature-visual-soft img { max-width: 560px; }
.feature-copy h3 { font-family: var(--serif); font-weight: 600; font-size: 30px; line-height: 1.15; letter-spacing: -0.012em; }
.feature-copy p { color: var(--muted); font-size: 17px; line-height: 1.6; margin: 12px 0 0; }

.feature-list { list-style: none; margin: 80px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 40px; }
.feature-list li { padding-top: 20px; border-top: 1px solid var(--border); }
.feature-list h3 { font-size: 17px; line-height: 1.3; }
.feature-list p { color: var(--muted); font-size: 15px; line-height: 1.55; margin: 6px 0 0; }

/* Get started */
.steps { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.steps li { padding: 24px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); }
.step-number { font-family: var(--mono); font-size: 13px; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--accent-tint); color: var(--accent); margin-bottom: 16px; }
.steps h3 { font-size: 18px; }
.steps p { color: var(--muted); font-size: 15px; line-height: 1.55; margin: 6px 0 0; }
.steps p a { text-decoration-color: currentColor; }

.license-note { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--border); }
.license-note p { margin: 0; font-size: 14px; color: var(--muted); max-width: 820px; }
.license-note strong { color: var(--foreground); font-weight: 600; }
.license-note a { font-weight: 600; white-space: nowrap; }

/* Closing */
.closing { margin-top: 120px; background: var(--navy); padding-block: 96px; }
.closing-inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.closing-icon { width: 96px; height: 96px; border-radius: 22px; box-shadow: 0 0 0 1px var(--border), 0 18px 36px -18px var(--shot-shadow); }
.closing h2 { margin-top: 28px; }
.closing p { color: var(--muted); font-size: 17px; margin: 12px 0 0; }
.closing .hero-actions { margin-top: 28px; }

/* Footer */
.site-footer { padding-top: 32px; padding-bottom: 48px; }
.footer-content { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; font-size: 13px; color: var(--subtle); }
.footer-content nav { display: flex; gap: 20px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button, a, .demo-toggle, .demo-steps li, .menu-icon::before, .menu-icon::after { transition: none; }
  .site-nav[data-menu-ready] .nav-links, .site-nav[data-menu-ready].is-open .nav-links { transform: none; transition: none; }
  .button:hover, .button:active, .demo-toggle:hover, .demo-toggle:active { transform: none; }
}

@media (max-width: 1000px) {
  .feature-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .band-head, .feature-row { grid-template-columns: 1fr; gap: 32px; }
  .band-head { gap: 20px; }
  .feature-row-flip .feature-visual { order: 0; }
  .feature-row-wide { gap: 12px; }
  .feature-row-wide .feature-visual { margin-top: 20px; }
  .feature-row { margin-top: 64px; }
}

@media (max-width: 760px) {
  .section { padding-top: 80px; }
  .hero { padding-top: 56px; }
  .hero-description { font-size: 18px; }
  .hero-stage { margin-top: 40px; }
  .hero-shot { border-radius: 8px; }
  .band { padding-block: 72px; }
  .closing { margin-top: 88px; padding-block: 72px; }
  /* Phone header: brand, Download, menu button. The section links open as a full-width panel under the header. */
  .site-nav { gap: 10px; }
  .brand { margin-right: auto; }
  .nav-download { order: 2; min-height: 40px; }
  .site-nav:not([data-menu-ready]) { flex-wrap: wrap; }
  .site-nav:not([data-menu-ready]) .nav-links { order: 4; width: 100%; margin: 0; }
  .site-nav[data-menu-ready] .menu-toggle {
    order: 3;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--control-border);
    border-radius: 8px;
    background: var(--background);
    color: var(--foreground);
    cursor: pointer;
    transition: background-color 160ms var(--ease);
  }
  .site-nav[data-menu-ready] .menu-toggle:hover, .site-nav[data-menu-ready].is-open .menu-toggle { background: var(--surface); }
  .site-header:has(.is-open) { background: var(--background); }
  .site-nav[data-menu-ready] .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 4px 24px 16px;
    background: var(--background);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 28px 40px -32px var(--shot-shadow);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 140ms var(--ease), transform 140ms var(--ease), visibility 0s linear 140ms;
  }
  .site-nav[data-menu-ready] .nav-links::after { content: ""; position: absolute; top: calc(100% + 1px); left: 0; right: 0; height: 100vh; background: rgb(8 12 26 / 32%); }
  .site-nav[data-menu-ready].is-open .nav-links {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity 200ms var(--ease), transform 200ms var(--ease), visibility 0s;
  }
  .site-nav[data-menu-ready] .nav-links > a {
    display: flex;
    align-items: center;
    min-height: 56px;
    border-bottom: 1px solid var(--border);
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
  }
  .site-nav[data-menu-ready] .nav-links > a:last-child { border-bottom: 0; }
  .site-nav[data-menu-ready] .nav-links > a:hover { color: var(--accent); }
}

@media (max-width: 540px) {
  .container { padding-inline: 20px; }
  .site-nav[data-menu-ready] .nav-links { padding-inline: 20px; }
  .feature-list, .steps { grid-template-columns: 1fr; }
  .feature-list { gap: 28px; margin-top: 64px; }
  .demo { margin-top: 32px; }
  .demo-video { border-radius: 8px; }
  .demo-toggle { right: 10px; bottom: 10px; }
  .demo-steps { grid-template-columns: 1fr; margin-top: 16px; gap: 0; }
  .demo-steps li { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: baseline; gap: 12px; padding: 12px 0; }
  .demo-step-name { font-size: 16px; }
  .demo-step-text { margin-top: 0; }
  .feature-visual-soft { padding: 12px; }
  .feature-copy h3 { font-size: 22px; }
  .hero-actions { width: 100%; }
  .hero-actions .button { width: 100%; }
  .site-footer { padding-bottom: 32px; }
}