/* ArsLex marketing site (2026-10 redesign).
   Scope: index.html and drafting.html ONLY. The transactional pages (login,
   signup, account, invite, admin, subscribe, verify, reset) keep css/main.css,
   whose legacy class names the Stripe and auth flows depend on. Restyle those
   in a second pass by swapping their stylesheet, not by editing main.css.

   Design: the indigo the owner kept, with the ornament removed (no aurora, no
   grain), flat cards at the Discovery app's 12px radius, one accent (the
   brand orange), and Geist for everything. Geist is self-hosted below, the
   same way main.css hosts its faces; the two woff2 files are the Google
   Fonts latin / latin-ext subsets of the variable font (SIL OFL). */

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/geist-latin-ext.woff2) format("woff2");
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/geist-latin.woff2) format("woff2");
  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;
}

:root {
  --bg: #1b1830;
  --surface: #232043;
  --surface-2: #2b2750;
  --line: rgba(255, 255, 255, 0.10);
  --line-strong: rgba(255, 255, 255, 0.18);
  --text: #ece9f2;
  --muted: #a6a2c0;
  --accent: #d6843a;      /* brand orange, the logo's */
  --accent-hi: #e3914a;
  --ink: #1a1730;
  --font: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Roboto, Arial, sans-serif;
  --r: 12px;
  --max: 1120px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.028em; text-wrap: balance; }
h1 { font-size: clamp(2.4rem, 5.6vw, 4rem); line-height: 1.05; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); line-height: 1.12; }
h3 { font-size: 1.2rem; letter-spacing: -0.01em; }
.muted { color: var(--muted); }
.eyebrow { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.wrap { max-width: var(--max); margin: 0 auto; padding-left: 20px; padding-right: 20px; }
:focus-visible { outline: 3px solid rgba(214, 132, 58, .45); outline-offset: 2px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 20px; border-radius: 10px; font-weight: 600; font-size: 15px;
  border: 1px solid transparent; transition: transform .15s ease, background .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn.primary { background: var(--accent); color: var(--ink); }
.btn.primary:hover { background: var(--accent-hi); }
.btn.ghost { border-color: var(--line-strong); color: var(--text); }
.btn.ghost:hover { background: rgba(255, 255, 255, .05); }
.cta { display: flex; gap: 12px; flex-wrap: wrap; }

/* Header */
.hdr {
  position: sticky; top: 0; z-index: 5;
  background: rgba(27, 24, 48, .86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.hdr .wrap { display: flex; align-items: center; gap: 16px 24px; min-height: 64px; flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 22px; letter-spacing: -0.02em; }
.brand img { width: 30px; height: 30px; }
.nav { display: flex; gap: 18px 22px; margin-left: auto; align-items: center; font-size: 14.5px; color: var(--muted); flex-wrap: wrap; }
.nav a:hover { color: var(--text); }
.nav .btn { padding: 8px 14px; font-size: 14px; }
@media (max-width: 720px) {
  .nav { margin-left: 0; width: 100%; gap: 12px 16px; }
}

/* Hero */
.hero { padding: 80px 0 64px; }
.hero .wrap { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; }
.hero-copy { display: grid; gap: 22px; min-width: 0; }
.hero-sub { font-size: 1.15rem; line-height: 1.55; color: var(--muted); max-width: 540px; }
.hero-note { font-size: 13.5px; color: var(--muted); }
.hero-note a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.shot { border: 1px solid var(--line-strong); border-radius: var(--r); overflow: hidden; background: var(--surface); box-shadow: 0 24px 60px rgba(0, 0, 0, .45); }
.hero .shot { transform: translateX(4%); width: 108%; max-width: none; }
.hero.hero--stack .wrap { grid-template-columns: 1fr; }
.hero.hero--stack .shot { transform: none; width: 100%; }
@media (max-width: 900px) {
  .hero { padding: 48px 0 40px; }
  .hero .wrap { grid-template-columns: 1fr; }
  .hero .shot { transform: none; width: 100%; }
}

/* Sections */
.sec { padding: 72px 0; border-top: 1px solid var(--line); }
.sec .wrap { display: grid; gap: 36px; }
.sec.band { background: var(--surface); }
.lede { max-width: 620px; display: grid; gap: 10px; }
.lede p { color: var(--muted); font-size: 1.05rem; }
@media (max-width: 720px) { .sec { padding: 52px 0; } }

/* The matter walk: a real sequence, so it is numbered */
.walk { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; counter-reset: step; }
.walk div { border-top: 2px solid var(--line-strong); padding-top: 14px; display: grid; gap: 6px; min-width: 0; }
.walk div::before { counter-increment: step; content: counter(step, decimal-leading-zero); font-size: 12px; color: var(--accent); letter-spacing: .1em; font-variant-numeric: tabular-nums; }
.walk b { font-weight: 700; font-size: 1.15rem; letter-spacing: -0.01em; }
.walk p { color: var(--muted); font-size: 14px; }
@media (max-width: 860px) { .walk { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .walk { grid-template-columns: 1fr; } }

/* Three columns */
.cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cols article { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 24px; display: grid; gap: 10px; align-content: start; min-width: 0; }
.sec.band .cols article { background: var(--surface-2); }
.cols p { color: var(--muted); font-size: 15px; }
@media (max-width: 860px) { .cols { grid-template-columns: 1fr; } }

/* Text beside a screenshot */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.feature .text { display: grid; gap: 12px; max-width: 480px; min-width: 0; }
.feature .text p { color: var(--muted); }
.feature.flip .text { order: 2; }
@media (max-width: 800px) { .feature { grid-template-columns: 1fr; } .feature.flip .text { order: 0; } }

/* Fact grid */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 24px; }
.facts div { display: grid; gap: 4px; min-width: 0; }
.facts b { font-weight: 600; }
.facts p { color: var(--muted); font-size: 14.5px; }

/* Quote / closing */
.quote .wrap { text-align: center; justify-items: center; gap: 18px; }
.quote p { max-width: 560px; }
.quote .cta { justify-content: center; }
.trust { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.trust span { font-size: 13px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; }

/* Screenshot gallery (drafting page) */
.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.gallery figure { margin: 0; display: grid; gap: 10px; min-width: 0; }
.gallery figcaption { font-size: 14px; color: var(--muted); }
@media (max-width: 720px) { .gallery { grid-template-columns: 1fr; } }

/* Per-seat plans (drafting page; the figures are Stripe's, keep them exact) */
.plans { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 760px; }
.plan { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 28px; display: grid; gap: 10px; min-width: 0; }
.plan.featured { border-color: var(--accent); }
.plan-badge { position: absolute; top: -12px; right: 20px; background: var(--accent); color: var(--ink); font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; letter-spacing: .04em; }
.plan h3 { font-size: 1.1rem; }
.plan-price { font-size: 2.4rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.plan-period { font-size: 14px; font-weight: 500; color: var(--muted); letter-spacing: 0; margin-left: 4px; }
.plan-note { color: var(--muted); font-size: 14.5px; }
.plan .btn { justify-self: start; margin-top: 6px; }
.enterprise { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; border: 1px solid var(--line); border-radius: var(--r); padding: 18px 22px; max-width: 760px; }
.enterprise p { color: var(--muted); font-size: 14.5px; }
.enterprise b { display: block; color: var(--text); font-weight: 600; }
@media (max-width: 640px) { .plans { grid-template-columns: 1fr; } }

/* Footer */
footer { border-top: 1px solid var(--line); padding: 28px 0 40px; font-size: 13.5px; color: var(--muted); }
footer .wrap { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }
footer .brand { font-size: 16px; }
footer .brand img { width: 20px; height: 20px; }
footer a:hover { color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
  .btn:hover { transform: none; }
}

/* ------------------------------------------------------------------------
   Document pages (faq, privacy, terms, subprocessors, support, whats-new,
   roadmap, developer-notes, copyright). These keep their `main.page` +
   `section.section` skeleton from the old site and a few page-local classes;
   this block gives that skeleton the new look at a reading measure. Nothing
   here touches index.html or drafting.html, which do not use `.page`.
   The aliases let the pages' small inline <style> blocks (written against
   main.css token names) keep working unchanged. */
:root { --border: var(--line); --border-strong: var(--line-strong); --accent-2: var(--accent); --orange: var(--accent); }

.page { max-width: 820px; margin: 0 auto; padding: 56px 20px 80px; }
.page .hero { padding: 0 0 32px; display: grid; gap: 14px; border-bottom: 1px solid var(--line); }
.page .hero h1 { font-size: clamp(2rem, 4.4vw, 3rem); }
.page .lede { display: block; max-width: 640px; font-size: 1.12rem; line-height: 1.55; color: var(--muted); }
.page .section { display: block; padding: 36px 0 0; }
.page h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin: 0 0 14px; }
.page h3 { font-size: 1.08rem; margin: 20px 0 8px; }
.page p { margin: 0 0 12px; }
.page p:last-child { margin-bottom: 0; }
.page ul, .page ol { margin: 0 0 12px; padding-left: 22px; color: var(--muted); }
.page li + li { margin-top: 6px; }
.page li strong, .page p strong { color: var(--text); }
.page a:not(.btn):not(.button):not(.brand) { color: var(--accent-hi); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(227, 145, 74, .45); }
.page a:not(.btn):not(.button):not(.brand):hover { text-decoration-color: var(--accent-hi); }
.page .security-band { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 28px; margin-top: 36px; }
.page .closing-cta { text-align: center; }
.page .closing-cta .cta-row { justify-content: center; }
.doc-meta { display: inline-flex; align-items: center; gap: 8px; padding: 5px 13px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-size: 12px; color: var(--muted); }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.button { display: inline-flex; align-items: center; justify-content: center; padding: 12px 20px; border-radius: 10px; font-weight: 600; font-size: 15px; border: 1px solid transparent; text-decoration: none; transition: transform .15s ease, background .15s ease; }
.button:hover { transform: translateY(-1px); }
.button.primary { background: var(--accent); color: var(--ink); }
.button.primary:hover { background: var(--accent-hi); }
.button.ghost { border-color: var(--line-strong); color: var(--text); }
.button.ghost:hover { background: rgba(255, 255, 255, .05); }
.trust-points { list-style: none; padding: 0; margin: 20px 0 8px; display: grid; gap: 14px; }
.trust-points li { position: relative; padding-left: 30px; color: var(--muted); line-height: 1.55; }
.trust-points li + li { margin-top: 0; }
.trust-points li::before { content: ""; position: absolute; left: 0; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: rgba(214, 132, 58, .18); box-shadow: inset 0 0 0 1.5px var(--accent); }
.trust-points li::after { content: "\2713"; position: absolute; left: 4px; top: 3px; font-size: 10px; font-weight: 700; color: var(--accent); }
.support-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.support-grid h3 { margin-top: 0; }
.feature-card { padding: 20px; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); }
.feature-card h3 { margin-top: 0; font-size: 1rem; }
.page .feature-card + .feature-card { margin-top: 14px; }
@media (max-width: 720px) { .page { padding-top: 36px; } }