/* ============================================================
   Server-rendered marketing sections (hero above #root and the
   long-form sections below it, plus the standalone trust pages).

   Deliberately self-contained: this stylesheet is linked from the
   served HTML head, so the content must look right BEFORE the app
   bundle loads (that is the whole point for crawlers). It re-declares
   the same palette as src/styles.css :root and scopes every rule
   under .mkt so nothing fights the app's own styles.
   ============================================================ */
.mkt {
  --bg: #f4f7fb;
  --surface: #ffffff;
  --surface-soft: #f3f6fc;
  --border: #e6eaf2;
  --text: #0e1726;
  --muted: #5a6b86;
  --primary: #2f6bff;
  --primary-soft: #e9f0ff;
  --radius: 18px;
  --radius-sm: 12px;
  --grad: linear-gradient(135deg, #3b74ff 0%, #6a5cff 100%);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
}

.mkt * {
  box-sizing: border-box;
}

.mkt__wrap {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 16px 16px 48px;
}

/* The landing chunks share the app's own mobile-first column width, so the marketing copy
   never renders wider than the tool above it on desktop. */
.mkt__wrap--landing {
  max-width: 480px;
}

.mkt__wrap--tight {
  padding-bottom: 0;
}

/* The below-root sections stay hidden for JS visitors until the app mounts (App.jsx adds
   .mkt--shown), so the first paint never flashes the footer copy above the tool. Visitors
   without JS (crawlers included) never get the .js class and always see the full document. */
.js .mkt--below {
  display: none;
}

.js .mkt--below.mkt--shown {
  display: block;
}

/* ---------- Skip link (first focusable element on /) ---------- */
.mkt__skip {
  position: absolute;
  inset-inline-start: 12px;
  top: -64px;
  z-index: 100;
  background: var(--primary);
  color: #fff;
  padding: 10px 18px;
  border-radius: 10px;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.15s ease;
}
.mkt__skip:focus {
  top: 12px;
}

/* ---------- Hero (above #root) ---------- */
.mkt-hero {
  text-align: center;
  padding: 32px 8px 8px;
}

/* A statement title in two parts: black base with a purple accent on the second span (plan
   2026-09-13). --text here is the app ink #0e1726 (re-declared at the top of this file), and
   the accent is the violet end of the app's --grad; on white it is ≈4.6:1, and the heading is
   large and bold, so AA is comfortably met. Doubled in size for round 2, raised again for
   round 3 (plan 2026-09-14: the owner asked for clearly bigger in BOTH languages). */
.mkt-hero__title {
  margin: 0;
  font-size: clamp(3rem, 11vw, 4.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--text);
}
.mkt-hero__accent {
  color: #6a5cff;
}

/* ---------- Sections (below #root) ---------- */
.mkt-section {
  margin-top: 28px;
  padding: 24px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(20, 45, 90, 0.06);
}

.mkt-section h2 {
  margin: 0 0 12px;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.mkt-section h3 {
  margin: 20px 0 8px;
  font-size: 1.02rem;
  font-weight: 700;
}

.mkt-section h3:first-child {
  margin-top: 0;
}

.mkt-section p {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 0.97rem;
}

.mkt-section p:last-child {
  margin-bottom: 0;
}

.mkt-section ul {
  margin: 0 0 12px;
  padding-inline-start: 22px;
  color: var(--muted);
  font-size: 0.97rem;
}

.mkt-section li {
  margin-bottom: 6px;
}

.mkt-steps {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 12px;
  margin: 0;
}

.mkt-steps li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 0;
  padding: 14px;
  background: var(--surface-soft);
  border-radius: var(--radius-sm);
  color: var(--text);
}

.mkt-stepnum {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--grad);
  color: #fff;
  font-weight: 700;
  font-size: 0.92rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- Footer nav ---------- */
/* Tight under the app's own footer: with the long-form sections gone, this small link block IS
   the page's tail (plan 2026-09-13 round 2). */
.mkt-footer {
  margin-top: 12px;
  text-align: center;
  font-size: 0.92rem;
}

.mkt-footer nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 20px;
  margin-bottom: 14px;
}

.mkt-footer a,
.mkt a {
  color: var(--primary);
  text-decoration: none;
}

.mkt a:hover {
  text-decoration: underline;
}

.mkt-footer p {
  color: var(--muted);
  margin: 0;
}

/* The build string, the last line of the below-root chunk — the lowest thing on the page (plan
   2026-09-14; the SPA's own footer sits above this chunk). Quiet on purpose: it is a debug aid,
   not something a reader needs, but it has to be READABLE and selectable because the whole point
   is someone copying it into a report. */
.mkt-footer__version {
  margin: 10px 0 0;
  font-size: 0.78rem;
  opacity: 0.7;
  user-select: text;
}

/* ---------- Standalone trust pages ---------- */
.mkt-page {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.mkt-page .mkt__wrap {
  flex: 1;
}

.mkt-page header {
  text-align: center;
  padding: 28px 8px 8px;
}

.mkt-page h1 {
  margin: 0 0 10px;
  font-size: clamp(1.5rem, 4.5vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.mkt-page header p {
  margin: 0 auto;
  max-width: 560px;
  color: var(--muted);
}

.mkt-page .mkt-section:first-of-type {
  margin-top: 20px;
}

.mkt-table {
  width: 100%;
  border-collapse: collapse;
  margin: 4px 0 12px;
  font-size: 0.92rem;
}

.mkt-table th,
.mkt-table td {
  text-align: start;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.mkt-table th {
  color: var(--muted);
  font-weight: 600;
  background: var(--surface-soft);
}

.mkt-table tr:first-child th {
  border-top: 1px solid var(--border);
}

.mkt a.mkt-back {
  display: inline-block;
  margin-top: 24px;
  font-weight: 600;
}

@media (max-width: 480px) {
  .mkt-section {
    padding: 20px 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mkt__skip {
    transition: none;
  }
}