/* ===========================================================================
   {{APP_NAME}} — marketing pages
   Every value is a var() from tokens.css. A hex literal here is a bug.
   =========================================================================== */

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.container-narrow { max-width: 760px; }
.section { padding: var(--section-y) 0; }
.section-tight { padding: calc(var(--section-y) / 2) 0; }
.section-header { text-align: center; max-width: 720px; margin: 0 auto var(--sp-7); }
.section-header p { font-size: 17px; }

/* ---------------------------------------------------------------- nav ----- */
.nav-cta { margin-left: var(--sp-4); }
.nav-toggle {
  display: none; background: none; border: 0; color: var(--text-primary);
  min-height: var(--control-h); min-width: var(--control-h);
  align-items: center; justify-content: center; cursor: pointer;
}
@media (max-width: 860px) {
  .nav-links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0;
    background: var(--bg-card); border-bottom: 1px solid var(--border);
    padding: var(--sp-2) var(--gutter) var(--sp-4);
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: var(--sp-3) 0; min-height: var(--control-h); display: flex; align-items: center; }
  .nav-toggle { display: flex; margin-left: auto; }
  .nav-cta { margin-left: var(--sp-2); }
  .nav { position: sticky; }
  .nav-inner { position: relative; }
}
@media (max-width: 420px) { .nav-cta { display: none; } }

/* --------------------------------------------------------------- hero ----- */
.hero { padding: var(--sp-8) 0 var(--section-y); text-align: center; position: relative; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: -40% 20% 55%;
  background: radial-gradient(ellipse at center, var(--accent-glow), transparent 65%);
  filter: blur(60px); opacity: .5; pointer-events: none;
}
.hero > .container { position: relative; }
.hero h1 { max-width: 16ch; margin-left: auto; margin-right: auto; }
.hero-sub {
  font-size: 19px; max-width: 60ch; margin: 0 auto var(--sp-6);
  color: var(--text-secondary);
}
.hero-ctas { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; }
.btn-lg { min-height: 52px; padding: var(--sp-3) var(--sp-6); font-size: 16px; }

.proof {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: var(--sp-2); margin-top: var(--sp-6);
  color: var(--text-muted); font-size: var(--fs-small);
}

/* ---------------------------------------------------- hero product mock --- */
.mock {
  margin: var(--sp-8) auto 0; max-width: 880px;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow), 0 0 0 1px var(--accent-soft);
  overflow: hidden; text-align: left;
}
.mock-bar {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-elevated); border-bottom: 1px solid var(--border);
}
.mock-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong); }
.mock-title { margin-left: var(--sp-3); color: var(--text-muted); font-size: 12px; font-family: var(--font-mono); }
.mock-body { padding: var(--sp-5); }
.mock-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-5); }
.mock-kpi { background: var(--bg-base); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--sp-3); }
.mock-kpi span { display: block; color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; }
.mock-kpi strong { font-size: 22px; letter-spacing: -.5px; }
.mock-kpi .accent { color: var(--accent); }
.mock-section { color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: var(--sp-3); }
.mock-bars { margin-bottom: var(--sp-5); }
.mock-row { display: grid; grid-template-columns: 92px 1fr 64px; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.mock-lbl { color: var(--text-secondary); font-size: 13px; }
.mock-track { height: 10px; background: var(--bg-base); border-radius: var(--radius-sm); overflow: hidden; }
.mock-fill { display: block; height: 100%; width: var(--w); border-radius: var(--radius-sm); }
.f-cr  { background: var(--series-cache-read); }
.f-cw  { background: var(--series-cache-write); }
.f-out { background: var(--series-output); }
.f-in  { background: var(--series-input); }
/* Fixed widths as classes, because the CSP blocks style attributes. */
.w-97 { --w: 97%; } .w-12 { --w: 12%; } .w-4 { --w: 4%; } .w-1 { --w: 1%; }
.mock-val { text-align: right; color: var(--text-secondary); font-size: 13px; font-variant-numeric: tabular-nums; }
.mock-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
.mock-list div { display: flex; justify-content: space-between; padding: var(--sp-2) 0; border-bottom: 1px solid var(--border); font-size: 13px; color: var(--text-secondary); }
.mock-list em { font-style: normal; color: var(--text-muted); }
.mock-spark { width: 100%; height: 56px; }
.mock-spark polyline { fill: none; stroke: var(--series-cache-read); stroke-width: 2; }
.mock-note { color: var(--text-muted); font-size: 12px; margin-top: var(--sp-2); }
@media (max-width: 680px) {
  .mock-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mock-split { grid-template-columns: minmax(0, 1fr); }
  .mock-row { grid-template-columns: 78px 1fr 54px; }
}

/* -------------------------------------------------------- quick answer ---- */
.quick-answer {
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-left-width: 3px;
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
}
.qa-label {
  font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--accent); margin-bottom: var(--sp-2);
}
.quick-answer p { margin: 0; color: var(--text-primary); font-size: 17px; line-height: 1.7; }

/* ------------------------------------------------------------ features ---- */
.features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
@media (max-width: 900px) { .features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .features { grid-template-columns: minmax(0, 1fr); } }
.feature {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--sp-5);
  display: flex; flex-direction: column;
}
.feature-ico {
  width: 40px; height: 40px; border-radius: var(--radius-md);
  background: var(--accent-soft); color: var(--accent);
  display: grid; place-items: center; font-size: 20px; margin-bottom: var(--sp-3);
}
.feature h3 { margin-bottom: var(--sp-2); }
.feature p { margin: 0; font-size: 15px; }

/* --------------------------------------------------------------- steps ---- */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6); }
@media (max-width: 760px) { .steps { grid-template-columns: minmax(0, 1fr); } }
.bignum {
  font-size: 48px; font-weight: 700; line-height: 1;
  color: var(--accent); opacity: .35; margin-bottom: var(--sp-2);
}
.bigstep h3 { margin-bottom: var(--sp-2); }
.bigstep p { margin: 0; font-size: 15px; }

/* --------------------------------------------------------------- trust ---- */
.trust {
  background: var(--bg-card);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  padding: var(--section-y) 0;
}
.trust h2 { margin-bottom: var(--sp-4); }
.checks { list-style: none; padding: 0; margin: var(--sp-5) 0; }
.checks li { position: relative; padding: var(--sp-2) 0 var(--sp-2) var(--sp-6); color: var(--text-secondary); }
.checks li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: 700; }

/* ----------------------------------------------------------------- faq ---- */
.faq { max-width: 760px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item h3 { margin: 0; font-size: inherit; font-weight: inherit; }
.faq-q {
  width: 100%; min-height: var(--control-h);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  background: none; border: 0; cursor: pointer;
  padding: var(--sp-4) 0;
  color: var(--text-primary); font-family: var(--font);
  font-size: 17px; font-weight: 600; text-align: left;
}
.faq-mark { position: relative; width: 16px; height: 16px; flex: none; }
.faq-mark::before, .faq-mark::after {
  content: ""; position: absolute; background: var(--accent);
  transition: transform var(--t-base), opacity var(--t-base);
}
.faq-mark::before { top: 7px; left: 0; width: 16px; height: 2px; }
.faq-mark::after  { top: 0; left: 7px; width: 2px; height: 16px; }
.faq-q[aria-expanded="true"] .faq-mark::after { transform: scaleY(0); opacity: 0; }
.faq-a { padding: 0 0 var(--sp-4); }
.faq-a p { margin: 0; max-width: 68ch; }

/* ----------------------------------------------------------------- paa ---- */
.paa { max-width: 760px; margin: 0 auto; display: grid; gap: var(--sp-5); }
.paa-item h3 { margin-bottom: var(--sp-2); font-size: 17px; }
.paa-item p { margin: 0; max-width: 68ch; }

/* ------------------------------------------------------------ cta band ---- */
.cta-band {
  background: linear-gradient(180deg, var(--bg-card), var(--bg-elevated));
  border-top: 1px solid var(--border);
  padding: var(--section-y) 0; text-align: center;
}
.cta-band h2 { margin-bottom: var(--sp-5); }
.cta-reassure { color: var(--text-muted); font-size: var(--fs-small); margin: var(--sp-4) 0 0; }

/* -------------------------------------------------------------- footer ---- */
.footer { border-top: 1px solid var(--border); padding-top: var(--sp-7); }
.footer-inner {
  max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter) var(--sp-7);
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--sp-6);
}
@media (max-width: 860px) { .footer-inner { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .footer-inner { grid-template-columns: minmax(0, 1fr); } }
.footer-brand .wordmark { font-size: 17px; font-weight: 700; margin-bottom: var(--sp-2); }
.footer-brand p { font-size: 14px; max-width: 40ch; }
.footer-col h3 {
  font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--text-muted); margin-bottom: var(--sp-3);
}
.footer-col a { display: block; padding: var(--sp-1) 0; color: var(--text-secondary); font-size: 14px; }
.footer-col a:hover { color: var(--text-primary); opacity: 1; }
.footer-bottom {
  border-top: 1px solid var(--border);
  padding: var(--sp-4) var(--gutter);
  max-width: var(--container); margin: 0 auto;
  color: var(--text-muted); font-size: var(--fs-small);
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
}

/* -------------------------------------------------------------- prose ----- */
.prose { max-width: 760px; margin: 0 auto; }
.prose h2 { font-size: 26px; margin-top: var(--sp-7); }
.prose h3 { margin-top: var(--sp-5); }
.prose ul, .prose ol { color: var(--text-secondary); padding-left: var(--sp-5); }
.prose li { margin-bottom: var(--sp-2); }
.prose table { width: 100%; border-collapse: collapse; margin: var(--sp-4) 0; font-size: 14px; }
.prose th, .prose td { text-align: left; padding: var(--sp-3); border-bottom: 1px solid var(--border); }
.prose th { color: var(--text-muted); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: 1px; }
.prose td { color: var(--text-secondary); }
.prose .updated { color: var(--text-muted); font-size: var(--fs-small); }
.byline {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4); margin: var(--sp-5) 0;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md);
  font-size: 14px; color: var(--text-secondary);
}

/* ---------------------------------------------------------------------------
   MOBILE OVERFLOW FIXES
   Both found by measuring a real browser at 375px, not by reading the CSS.
   --------------------------------------------------------------------------- */

/* A long button label ("Read exactly what is sent, field by field") cannot
   wrap, because .btn sets white-space: nowrap for the nav. On a 375px screen
   it pushed 25px past the edge. Buttons inside prose are allowed to wrap. */
@media (max-width: 560px) {
  .trust .btn,
  .prose .btn {
    white-space: normal;
    text-align: center;
    height: auto;
    padding-block: var(--sp-3);
  }
}

/* A data table in prose has no .table-wrap around it, so it forced the page
   wide instead of scrolling inside its own box. Give every prose table its own
   horizontal scroll rather than letting it widen the document. */
.prose table {
  display: block;
  overflow-x: auto;
  white-space: nowrap;
  max-width: 100%;
}
@media (min-width: 861px) {
  /* Back to a normal table where there is room, so it does not look scrollable
     when it does not need to be. */
  .prose table { display: table; white-space: normal; }
}
.prose td, .prose th { vertical-align: top; }

/* Long unbroken strings — file paths, commands — must never widen the page. */
.prose .mono, .prose code { overflow-wrap: anywhere; }