/* Aletha Codex, site stylesheet (SITE-1 rebuild, A5 typeface swap).
   The design/ artboards are the spec: dark graphite, silver text, one
   blue-silver accent, no gradients, no cards with icons.

   THE FACE IS ARCHIVO, headline and body, matching Open WebUI: their site
   computes `Archivo, sans-serif` on both the h1 and body copy and serves
   assets/fonts/Archivo-Variable.ttf. Archivo is by The Archivo Project
   Authors (Omnibus-Type) under the SIL Open Font License 1.1, so it ships.
   Self-hosted below from @fontsource-variable/archivo v5.3.0, latin and
   latin-ext only, one variable file per subset covering weights 100 to 900.
   Licence text: /fonts/Archivo-OFL.txt. No Google Fonts link, no CDN.
   Cormorant Garamond and Geist are gone; their files are deleted. */

@font-face {
  font-family: 'Archivo Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/archivo-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/archivo-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg: #17181b;
  --panel: #1e1f23;
  --text: #ececea;
  --text-bright: #f2f2f0;
  --text-secondary: #a9a9a4;
  --text-tertiary: #8f8f89;
  --text-soft: #d6d6d2;
  --text-faint: #85857f; /* A5: the placeholder is its only use and #6f6f6a was 3.51:1 on --bg; this is 4.78:1, still the dimmest token */
  --accent: #9db7d5;
  --line: rgba(255, 255, 255, 0.07);
  --line-mid: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.10);
  --line-input: rgba(255, 255, 255, 0.14);
  /* the walkthrough card: one step lighter than the page */
  --card: var(--panel);
  --card-line: var(--line-strong);
  --card-text: var(--text-bright);
  --card-muted: var(--text-tertiary);
  /* one face, headline and body, with a real fallback stack */
  --sans: 'Archivo Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, system-ui, sans-serif;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  font-size: 15px;
  line-height: 1.5;
}

a { color: var(--text); text-decoration: none; }
a:hover { color: var(--accent); }

img, svg, video, iframe { max-width: 100%; }

/* ---------- buttons (one CTA style only) ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 28px;
  border: 0;
  border-radius: 10px;
  background: var(--text);
  color: var(--bg);
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { color: var(--bg); background: #ffffff; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn--sm { height: 40px; padding: 0 18px; border-radius: 8px; font-size: 14px; }
.btn--block { width: 100%; }

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

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 64px;
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { width: 30px; height: 30px; }
.brand span { font-size: 15px; font-weight: 500; letter-spacing: 0.01em; color: var(--text); }
.nav__links { display: flex; align-items: center; gap: 28px; }
.nav__links a:not(.btn) { font-size: 14px; color: var(--text-secondary); }
.nav__links a:not(.btn):hover { color: var(--accent); }

/* ---------- shared section shapes ---------- */

.eyebrow {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
/* section headings share the headline face */
.section-title {
  margin: 0;
  font-family: var(--sans);
  font-weight: 300;
  font-size: 27px;
  line-height: 1.15;
  letter-spacing: -0.018em;
  color: var(--text-bright);
}

.micro { font-size: 13px; color: var(--text-tertiary); }
.micro .sep { opacity: 0.4; padding: 0 4px; }
/* the struck old price stays at full tertiary strength: the board fades it
   further, but 12px text under 4.5:1 contrast fails WCAG AA (§6 a11y ≥ 95) */
.micro s { opacity: 1; }

/* ---------- hero ---------- */

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 104px 64px 56px;
  gap: 22px;
}
.hero h1 {
  margin: 0;
  font-family: var(--sans);
  font-size: 52px;
  line-height: 1.1;
  font-weight: 300;
  letter-spacing: -0.022em;
  color: var(--text-bright);
  max-width: 900px;
  text-wrap: balance;
}
/* the second line, on its own line. It was the serif's italic; Archivo is a
   grotesque, where an italic reads as emphasis rather than as contrast. */
.hero h1 span { display: block; }
.hero .lead {
  margin: 0;
  font-size: 20px;
  line-height: 1.5;
  color: var(--text-secondary);
  max-width: 620px;
  text-wrap: pretty;
}
.hero__cta { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 10px; }

/* ---------- the walkthrough: one dark card — header row + a macOS window ---------- */

.walkthrough {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 64px 96px;
}
.walk-card {
  width: 1180px;
  max-width: 100%;
  padding: 28px 28px 0;
  border-radius: 20px;
  background: var(--card);
  border: 1px solid var(--card-line);
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.35);
  color: var(--card-text);
}
.walk-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 0 4px 20px;
}
.walk-head .eyebrow { margin: 0 0 6px; color: var(--card-muted); letter-spacing: 0.16em; }
.walk-title {
  margin: 0;
  font-family: var(--sans);
  font-weight: 300;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -0.018em;
  color: var(--card-text);
}
.walk-nav { display: flex; align-items: center; gap: 12px; padding-bottom: 4px; }
.walk-hint { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--card-muted); margin-right: 8px; white-space: nowrap; }
.walk-arrow {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.04);
  color: var(--card-text);
  font: 300 20px/38px var(--sans);
  cursor: pointer;
  padding: 0;
}
.walk-arrow:hover { background: rgba(255, 255, 255, 0.10); }
/* The app inside renders at a fixed virtual window of 1440×900 — never
   narrower than on a real Mac — and the iframe is scaled to fit the frame
   (main.js keeps the transform in sync with the frame's width). The 36px
   title bar with the traffic lights is the demo's own strip. */
.demo-frame {
  width: 100%;
  aspect-ratio: 1440 / 900;
  border-radius: 14px 14px 0 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 0;
  background: #101114;
  overflow: hidden;
  position: relative;
}
.demo-frame iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 1440px;
  max-width: none; /* the global iframe reset must not cap the virtual window */
  height: 900px;
  border: 0;
  display: block;
  transform-origin: 0 0;
}
.demo-frame .demo-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; }

/* ---------- the three pillars ---------- */

.pillars {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 64px 96px;
}
.pillars__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 56px;
  width: 1100px;
  max-width: 100%;
}
.pillar { display: flex; flex-direction: column; gap: 10px; }
.pillar h2 {
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 21px;
  line-height: 1.2;
  letter-spacing: -0.014em;
  color: var(--text-bright);
}
.pillar p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text-secondary); text-wrap: pretty; }

/* ---------- founder + what's inside ---------- */

.about {
  display: flex;
  justify-content: center;
  padding: 0 64px 96px;
}
.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 96px;
  width: 1100px;
  max-width: 100%;
}
.founder { display: flex; flex-direction: column; gap: 16px; }
.founder p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--text-soft); text-wrap: pretty; }
.founder a { font-size: 15px; color: var(--accent); }

.qa-list { display: flex; flex-direction: column; }
.qa-list .section-title { padding-bottom: 18px; }
.qa { border-top: 1px solid var(--line-mid); }
.qa:last-of-type { border-bottom: 1px solid var(--line-mid); }
.qa summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-bright);
  cursor: pointer;
  list-style: none;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; color: var(--text-tertiary); font-weight: 400; }
.qa[open] summary::after { content: "\2212"; } /* U+2212 minus, the counterpart to +; not an en dash */
.qa .qa__body { margin: 0; padding: 0 0 18px; font-size: 15px; line-height: 1.65; color: var(--text-secondary); max-width: 60ch; text-wrap: pretty; }
.qa .qa__body p { margin: 0 0 10px; }
.qa .qa__body p:last-child { margin-bottom: 0; }
.qa .qa__body a { color: var(--accent); }
.qa .qa__body code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; color: var(--text-bright); }

/* waitlist inside the last row */
.waitlist { display: flex; gap: 8px; margin-top: 12px; }
.waitlist input {
  flex: 1;
  min-width: 0;
  height: 40px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--line-input);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 14px;
}
.waitlist input::placeholder { color: var(--text-faint); }
.waitlist .btn { height: 40px; padding: 0 16px; border-radius: 8px; font-size: 14px; }
.form-msg { font-size: 13px; color: var(--text-tertiary); margin: 8px 0 0; min-height: 1em; }
.form-msg.err { color: #d5a19d; }
.form-msg.ok { color: var(--accent); }

/* ---------- closing ---------- */

.closing {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 24px 64px 96px;
  border-top: 1px solid var(--line);
  margin: 0 64px;
}
.closing h2 {
  margin: 0;
  padding-top: 56px;
  font-family: var(--sans);
  font-size: 32px;
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--text-bright);
}

/* ---------- footer ---------- */

.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 64px 32px;
  font-size: 13px;
  color: var(--text-tertiary);
}
.footer a { color: var(--text-tertiary); }
.footer a:hover { color: var(--accent); }
.footer nav { display: flex; gap: 22px; }

/* ---------- checkout ---------- */

.checkout { display: flex; justify-content: center; padding: 96px 64px; }
.checkout__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 80px;
  width: 960px;
  max-width: 100%;
}
.buying { display: flex; flex-direction: column; gap: 22px; }
.buying h1 { margin: 0; font-family: var(--sans); font-size: 32px; font-weight: 300; letter-spacing: -0.02em; color: var(--text-bright); }
.price-row { display: flex; align-items: baseline; gap: 12px; }
.price-row .price { font-size: 40px; font-weight: 500; letter-spacing: -0.02em; }
.price-row s { font-size: 18px; color: var(--text-tertiary); }
.price-row .note { font-size: 14px; color: var(--text-tertiary); }
.buying ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 1.55; color: var(--text-secondary); }
.buying .req { font-size: 13px; line-height: 1.6; color: var(--text-tertiary); padding-top: 8px; border-top: 1px solid var(--line-mid); }

.paybox {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px;
  border-radius: 14px;
  border: 1px solid var(--line-strong);
  background: var(--panel);
  align-self: start;
}
.paybox .finePrint { font-size: 12px; color: var(--text-tertiary); text-align: center; line-height: 1.5; margin: 0; }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.consent input { margin-top: 2px; accent-color: var(--accent); }
.consent a { color: var(--accent); }

/* ---------- status card (success / 404) ---------- */

.status-wrap { display: flex; justify-content: center; padding: 96px 24px; }
.status-card {
  width: 560px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
}
.status-card h1 { margin: 0; font-family: var(--sans); font-size: 32px; font-weight: 300; letter-spacing: -0.02em; color: var(--text-bright); }
.status-card .lead { margin: 0; font-size: 16px; line-height: 1.55; color: var(--text-secondary); }
.license {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-radius: 10px;
  border: 1px solid var(--line-input);
  background: var(--panel);
}
.license code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 15px; color: var(--text-bright); word-break: break-all; }
.license .btn { height: 34px; padding: 0 14px; border-radius: 7px; font-size: 13px; }
.license__label { margin: 10px 0 8px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); }
.license__note { margin: 10px 0 0; font-size: 13px; color: var(--text-tertiary); }
.link-quiet { font-size: 14px; color: var(--text-secondary); }
.is-disabled { opacity: 0.45; pointer-events: auto; cursor: not-allowed; }

.icon { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: var(--panel);
  color: var(--accent);
}

/* ---------- legal pages ---------- */

.legal { max-width: 720px; margin: 0 auto; padding: 72px 24px 96px; }
.legal h1 { margin: 0 0 6px; font-family: var(--sans); font-size: 32px; font-weight: 300; letter-spacing: -0.02em; color: var(--text-bright); }
.legal .effective { margin: 0 0 32px; font-size: 13px; color: var(--text-tertiary); }
.legal h3 { margin: 28px 0 8px; font-size: 16px; font-weight: 500; color: var(--text-bright); }
.legal p { margin: 0 0 12px; font-size: 15px; line-height: 1.65; color: var(--text-secondary); }
.legal a { color: var(--accent); }

/* ---------- phone (the Mobile board) ---------- */

@media (max-width: 900px) {
  .walk-title { font-size: 22px; }
  .walk-nav { flex: none; }
  .pillars__grid { grid-template-columns: 1fr; gap: 32px; }
  .about__grid { grid-template-columns: 1fr; gap: 48px; }
}

@media (max-width: 700px) {
  .nav { padding: 16px 20px; }
  .brand img { width: 26px; height: 26px; }
  .brand span { font-size: 14px; }
  .nav__links { gap: 16px; }
  .nav__links .btn--sm { height: 36px; padding: 0 14px; font-size: 13px; }

  .hero { padding: 56px 24px 28px; gap: 16px; }
  .hero h1 { font-size: 33px; line-height: 1.12; }
  .hero .lead { font-size: 16px; }
  .hero__cta { width: 100%; gap: 12px; margin-top: 6px; }
  .hero__cta .btn { width: 100%; height: 50px; }
  .micro { font-size: 12px; line-height: 1.6; }

  .walkthrough { padding: 0 12px 48px; }
  .walk-card { padding: 18px 12px 0; border-radius: 14px; box-shadow: none; }
  .walk-head { flex-direction: column; align-items: flex-start; gap: 12px; padding-bottom: 14px; }
  .walk-title { font-size: 21px; }
  .walk-hint { display: none; }
  .demo-frame { border-radius: 10px 10px 0 0; }

  .pillars { padding: 0 24px 48px; }
  .pillar h2 { font-size: 19px; }
  .pillar p { font-size: 14px; }

  .about { padding: 0 24px 40px; }
  .founder p { font-size: 15px; }
  .section-title { font-size: 23px; }
  .qa summary { padding: 14px 0; font-size: 14px; }
  .qa .qa__body { font-size: 14px; }

  .closing { margin: 0; padding: 8px 24px 40px; border-top: 0; }
  .closing h2 { padding-top: 24px; font-size: 25px; text-align: center; }
  .closing .btn { width: 100%; height: 50px; }

  .footer { flex-direction: column; gap: 10px; padding: 22px 24px 32px; }

  .checkout { padding: 48px 20px 64px; }
  .checkout__grid { grid-template-columns: 1fr; gap: 40px; }

  .nav__links a[data-nav-link] { display: none; }
}

@media (max-width: 480px) {
  .hero h1 { font-size: 31px; }
}