/* Arka — the public text pages: /terms/, /privacy/, /refunds/, /pricing/.
   Loads AFTER /landing.css and only extends it (nav, footer, buttons and the
   pricing cards come from there). It deliberately does NOT reuse the blog's
   stylesheet, although the prose rules are modelled on it: the blog is left
   out of the image (build.ts, PUBLISH_BLOG), and a legal page that depended on
   its files would ship unstyled. (tests/site_pages_test.ts refuses any
   reference to the blog's directory from here.)

   The :root palette below is SPLICED IN AT BUILD TIME from brand.css (see
   build.ts#copyWithBrandTokens) — edit it there, not here. */

:root {
  --bg-primary: #0a0a0a;
  --bg-secondary: #111111;
  --bg-card: #161616;
  --border-subtle: #222222;
  --border-accent: #333333;
  --text-primary: #f0f0f0;
  --text-secondary: #999999;
  --text-muted: #666666;
  --accent: #8b0000;
  --accent-hover: #6b0000;
  --accent-glow: rgba(139, 0, 0, 0.15);
  /* The brand red lightened until it stays legible as small text or an icon
     directly on --bg-primary (4.2:1 vs 2.0:1 for --accent). Fills, where the
     foreground is white, keep using --accent. */
  --accent-text: #cb454a;
  --gradient-start: #8b0000;
  --gradient-end: #b22234;

  /* The wash a ghost control paints on hover, and the scrim behind a modal.
     Both are a function of the ground, which is why they are tokens rather
     than the literal rgba() the shell pages used to repeat. */
  --hover-wash: rgba(255, 255, 255, 0.03);
  --scrim: rgba(0, 0, 0, 0.75);

  /* Status. Destructive actions (delete a project, a failed request) and the
     one success note on /auth/. Not brand — a red button here means damage,
     not Arka. --danger-ink is what reads on a --danger FILL. */
  --danger: #ff6b6b;
  --danger-hover: #e05555;
  --danger-wash: rgba(255, 107, 107, 0.4);
  --danger-ink: #1a0000;
  --success: #69db7c;

  --font-mono: "SF Mono", "Fira Code", "Cascadia Code", monospace;
  --font-sans:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Light. Same names, same contracts, different values — a page swaps ground
   and ink by setting data-theme, never by knowing a hex. The fills
   (--accent, the gradient pair) do NOT flip: white on #8b0000 is 10.4:1 either
   way, and the brand is the brand. --accent-text does flip, because its
   contract is "the brand red made legible as ink on --bg-primary" and on a
   near-white ground that is the true #8b0000 (9.5:1), not the lightened one. */
:root[data-theme="light"] {
  --bg-primary: #fafaf9;
  --bg-secondary: #ffffff;
  --bg-card: #ffffff;
  --border-subtle: #e7e5e4;
  --border-accent: #d6d3d1;
  --text-primary: #1c1917;
  --text-secondary: #57534e;
  --text-muted: #78716c;
  --accent-text: #8b0000;

  --hover-wash: rgba(0, 0, 0, 0.04);
  --scrim: rgba(0, 0, 0, 0.45);

  --danger: #b91c1c;
  --danger-hover: #991b1b;
  --danger-wash: rgba(185, 28, 28, 0.35);
  --danger-ink: #ffffff;
  --success: #2f7d32;
}

/* ---- Page scaffold ---- */

body.legal-page .nav {
  /* landing.js toggles this border on scroll; the text pages ship no such JS */
  border-bottom-color: var(--border-subtle);
}

.legal-main {
  padding: 120px 32px 80px;
}

.legal {
  max-width: 720px;
  margin: 0 auto;
}

.legal-header {
  margin-bottom: 40px;
}

.legal-kicker {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 14px;
}

.legal-header h1 {
  font-size: clamp(34px, 5vw, 48px);
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1.1;
  margin-bottom: 18px;
}

.legal-lede {
  font-size: 19px;
  line-height: 1.6;
  color: var(--text-secondary);
  padding-bottom: 28px;
  border-bottom: 1px solid var(--border-subtle);
}

/* ---- Long-form prose ---- */

.legal p {
  font-size: 17px;
  line-height: 1.75;
  margin: 0 0 24px;
}

.legal h2 {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.5px;
  margin: 56px 0 20px;
}

/* Numbered sections: the number in the accent colour and a hairline above
   each, so a clause can be cited and found ("Terms, section 6"). */
.legal h2[id] {
  scroll-margin-top: 96px;
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid var(--border-subtle);
}

.legal .sec-no {
  color: var(--gradient-end);
  font-family: var(--font-mono);
  font-weight: 500;
  margin-right: 0.45em;
}

.legal h3 {
  font-size: 19px;
  font-weight: 600;
  margin: 36px 0 14px;
}

.legal ul,
.legal ol {
  margin: 0 0 24px;
  padding-left: 24px;
}

.legal li {
  font-size: 17px;
  line-height: 1.7;
  margin-bottom: 8px;
}

.legal li::marker {
  color: var(--text-muted);
}

.legal p a,
.legal li a,
.legal td a {
  color: var(--text-primary);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s;
}

.legal p a:hover,
.legal li a:hover,
.legal td a:hover {
  text-decoration-color: var(--gradient-end);
}

.legal code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: rgba(255, 255, 255, 0.06);
  padding: 2px 6px;
  border-radius: 4px;
}

.legal .table-scroll {
  overflow-x: auto;
  margin: 0 0 24px;
}

.legal table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
}

.legal th {
  text-align: left;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  padding: 8px 16px 8px 0;
  border-bottom: 1px solid var(--border-accent);
}

.legal td {
  padding: 10px 16px 10px 0;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  vertical-align: top;
  line-height: 1.6;
}

/* The one sentence a page exists to say (the refund guarantee, the
   merchant-of-record clause) — set apart so it cannot be skimmed past. */
.legal .legal-callout {
  margin: 0 0 28px;
  padding: 20px 24px;
  border: 1px solid var(--accent);
  border-radius: 12px;
  background: var(--accent-glow);
  font-size: 19px;
  line-height: 1.6;
}

.legal-toc {
  margin: 8px 0 28px;
  padding: 14px 18px;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  background: var(--bg-card);
}

.legal .legal-toc ol {
  margin: 0;
  padding-left: 0;
  list-style: none;
  columns: 2;
  column-gap: 28px;
}

.legal .legal-toc li {
  /* padding, not margin: a margin is dropped at the top of the second column
     but kept at the top of the first, which staggers the two by 4px */
  margin: 0;
  padding: 4px 0;
  font-size: 15px;
  line-height: 1.5;
  break-inside: avoid;
}

.legal .legal-toc a {
  color: var(--text-secondary);
  text-decoration: none;
}

.legal .legal-toc a:hover {
  color: var(--text-primary);
}

.legal-toc .sec-no {
  font-size: 13px;
}

/* ---- Pricing page ---- */

.pricing-main {
  padding: 120px 32px 40px;
}

.pricing-main .section-inner,
.pricing-faq .section-inner {
  max-width: var(--content-width);
  margin: 0 auto;
}

.pricing-main .section-desc {
  margin-bottom: 0;
}

.pricing-status {
  margin: 28px 0 0;
  max-width: 760px;
  padding: 14px 18px;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  background: var(--bg-card);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.pricing-status[hidden] {
  display: none;
}

.pricing-status.is-error {
  border-color: var(--accent);
  color: var(--danger);
}

.pricing-status a {
  color: var(--text-primary);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 3px;
}

/* The plan someone arrived with (?plan=…) or just clicked. */
.pricing-card.is-selected {
  border-color: var(--accent-text);
  box-shadow: 0 0 0 1px var(--accent-text);
}

.waitlist {
  margin-top: 40px;
  max-width: 760px;
  padding: 32px;
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  background: var(--bg-card);
}

.waitlist[hidden] {
  display: none;
}

.waitlist h2 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.3px;
  margin-bottom: 8px;
}

.waitlist p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: 20px;
}

.waitlist-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.waitlist-row input[type="email"],
.waitlist-row select {
  flex: 1 1 220px;
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid var(--border-accent);
  border-radius: 8px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 15px;
}

.waitlist-row select {
  flex: 0 1 170px;
}

.waitlist-row input[type="email"]:focus,
.waitlist-row select:focus {
  outline: none;
  border-color: var(--accent);
}

.waitlist-row button {
  font-family: inherit;
}

/* The honeypot: present for bots that fill every field, absent for people
   (and for assistive technology — hence aria-hidden on the wrapper). */
.waitlist-hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.waitlist-note {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--text-muted);
}

.waitlist a {
  color: var(--text-secondary);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 3px;
}

.waitlist-note.is-ok {
  color: var(--success);
}

.waitlist-note.is-error {
  color: var(--danger);
}

.pricing-faq {
  padding: 40px 32px 80px;
}

.pricing-faq .legal {
  max-width: 760px;
  margin: 0;
}

@media (max-width: 640px) {
  .legal .legal-toc ol {
    columns: 1;
  }

  .legal-main,
  .pricing-main {
    padding-left: 20px;
    padding-right: 20px;
  }

  .pricing-faq {
    padding-left: 20px;
    padding-right: 20px;
  }

  .waitlist {
    padding: 24px 20px;
  }
}