/* =================================================================
   Mira: shared marketing/site stylesheet
   Used by all /site/*.html pages: terms, privacy, pricing, etc.
   Mirrors landing tokens from Mira.html, but factored out.
   ================================================================= */

/* Palette is the landing page's, not the old cream one: these pages sit one
   click from /mira/ and were arriving on a warm #f6f3ec ground with warm grey
   ink, which read as a different product. Same paper, same ink, same rules. */
:root {
  --bg: #ffffff;
  --bg-2: #f5f5f2;
  --bg-3: #ecece7;
  --ink: #0a0a0a;
  --ink-2: #3a3a38;
  --muted: #8a8a85;
  --rule: rgba(10,10,10,0.12);
  --rule-strong: rgba(10,10,10,0.28);
  --accent: #0b6b3a;
  --accent-soft: #e8f1ea;
  --warn: #b8431a;
  --gold: #c08a2e;
  --sans: 'Geist', ui-sans-serif, system-ui, sans-serif;
  --mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 0; }
.mono { font-family: var(--mono); }
.label { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.ink-muted { color: var(--muted); }
.accent { color: var(--accent); }
.container { max-width: 1240px; margin: 0 auto; padding: 0 28px; }
.container-tight { max-width: 880px; margin: 0 auto; padding: 0 28px; }
.container-doc { max-width: 760px; margin: 0 auto; padding: 0 28px; }

/* ============ NAV ============ */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
}
.nav-inner { display: flex; align-items: center; gap: 28px; height: 64px; }
.logo { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 18px; letter-spacing: -0.015em; }
svg.logo-mark { width: 26px; height: 26px; display: inline-block; flex-shrink: 0; }
.nav-links { display: flex; gap: 26px; font-size: 15.5px; align-items: center; font-weight: 500; }
.nav-links a { color: var(--ink-2); }
.nav-links a.here {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 6px;
}
.nav-links a:hover { color: var(--ink); text-decoration: none; }
.nav-spacer { flex: 1; }
.nav-cta { display: flex; gap: 8px; align-items: center; }

/* ============ BUTTONS ============ */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  font-family: var(--sans); font-size: 13.5px; font-weight: 500;
  border: 1px solid var(--rule-strong);
  background: transparent; color: var(--ink);
  border-radius: 0;
  cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
  text-decoration: none;
}
.btn:hover { text-decoration: none; background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-primary:hover { background: #084f2b; border-color: #084f2b; color: #fff; }
.btn-ghost { border-color: transparent; padding-left: 4px; padding-right: 4px; }
.btn-ghost:hover { background: transparent; color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn-lg { padding: 12px 18px; font-size: 15px; }

/* ============ INPUTS ============ */
.input { display: block; width: 100%; background: var(--bg); border: 1px solid var(--rule); padding: 10px 12px; font: 14px var(--sans); color: var(--ink); outline: none; border-radius: 0; }
.input:focus { border-color: var(--accent); }

/* ============ TAGS / STATUS ============ */
.tag { display: inline-block; font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: 0.06em; padding: 2px 6px; border: 1px solid var(--rule-strong); color: var(--ink-2); background: var(--bg); }
.tag.accent { color: var(--accent); border-color: var(--accent); }
.tag.warn { color: var(--warn); border-color: var(--warn); }
.tag.gold { color: var(--gold); border-color: var(--gold); }
.status { font-family: var(--mono); font-size: 12px; color: var(--accent); }
.status::before { content: "● "; }
.status.warn { color: var(--warn); }
.status.alert { color: #c43a14; }
.status.muted { color: var(--muted); }

/* ============ CHANNEL CHIPS ============ */
.ch { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-2); }
.ch::before { content: ""; width: 10px; height: 10px; min-width: 10px; display: inline-block; border-radius: 50%; flex-shrink: 0; }
.ch.wa::before { background: #25D366; }
.ch.ig::before { background: linear-gradient(135deg, #f58529, #dd2a7b 50%, #515bd4); }
.ch.fb::before { background: #1877F2; }
.ch.im::before { background: #34C759; }
.ch.em::before { background: var(--ink-2); }
.ch.cal::before { background: #c08a2e; }
.ch.sms::before { background: #34C759; }
.ch.stripe::before { background: #635bff; }

/* ============ PAGE HEADER ============ */
.page-head { padding: 56px 0 32px; border-bottom: 1px solid var(--rule); }
.page-head .eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; }
.page-head .eyebrow .dot { width: 7px; height: 7px; background: var(--accent); border-radius: 50%; box-shadow: 0 0 0 3px rgba(11,107,58,0.18); }
.page-head h1 { font-size: 52px; line-height: 1.04; letter-spacing: -0.025em; font-weight: 500; margin: 0 0 18px; text-wrap: balance; }
.page-head h1 em { font-style: normal; color: var(--accent); }
.page-head .lede { font-size: 18px; color: var(--ink-2); max-width: 56ch; margin: 0; text-wrap: pretty; }

/* ============ SECTION SHELL ============ */
section.block { padding: 56px 0; border-bottom: 1px solid var(--rule); }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
.section-head h2 { font-size: 28px; letter-spacing: -0.02em; font-weight: 500; margin: 8px 0 0; }
.section-head p { color: var(--muted); margin: 0; max-width: 60ch; }
.section-head .right { display: flex; gap: 14px; align-items: center; }

/* ============ TERMINAL PANEL (re-usable) ============ */
.panel {
  background: #0f1310; color: #e8e6df;
  border: 1px solid var(--ink);
  font-family: var(--mono);
  font-size: 13px;
}
.panel-tabs { display: flex; border-bottom: 1px solid rgba(255,255,255,0.1); background: #0a0d0a; }
.panel-tabs > * { flex: 1; padding: 10px 12px; color: #9aa098; border-right: 1px solid rgba(255,255,255,0.08); font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; }
.panel-tabs > *:last-child { border-right: 0; }
.panel-tabs > .active { color: #e8e6df; background: rgba(255,255,255,0.03); box-shadow: inset 0 -1px 0 var(--accent); }
.panel-body { padding: 18px; }
.panel-line { display: flex; gap: 10px; padding: 2px 0; align-items: flex-start; }
.panel-line .gut { color: #5b6359; min-width: 48px; text-align: right; flex-shrink: 0; font-size: 11px; padding-top: 2px; }
.panel-line .who { color: #8fbf9f; }
.panel-line .who.u { color: #d8c79b; }
.panel-line .ok { color: #8fbf9f; }
.panel-line .warn { color: #d99a5b; }
.panel-line .alert { color: #e07a5f; }
.panel-line .meta { color: #5b6359; font-size: 11px; }

/* ============ STRIPED IMAGE PLACEHOLDER ============ */
.ph { display: flex; align-items: center; justify-content: center; background: repeating-linear-gradient(135deg, var(--bg-2), var(--bg-2) 8px, var(--bg) 8px, var(--bg) 16px); border: 1px solid var(--rule); font-family: var(--mono); font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.ph-45 { background: repeating-linear-gradient(45deg, var(--bg-2), var(--bg-2) 6px, var(--bg) 6px, var(--bg) 12px); }

/* ============ DOC PROSE (legal, security, dpa, docs) ============ */
.doc { padding: 48px 0 80px; }
.doc h2 { font-size: 22px; font-weight: 500; letter-spacing: -0.01em; margin: 40px 0 12px; scroll-margin-top: 80px; }
.doc h3 { font-size: 16px; font-weight: 500; margin: 24px 0 8px; }
.doc p { color: var(--ink-2); margin: 0 0 14px; text-wrap: pretty; max-width: 72ch; }
.doc ul, .doc ol { color: var(--ink-2); padding-left: 22px; margin: 0 0 14px; max-width: 72ch; }
.doc li { margin-bottom: 6px; }
.doc .lead { font-size: 17px; color: var(--ink-2); margin-bottom: 28px; max-width: 64ch; text-wrap: pretty; }
.doc .callout { border-left: 3px solid var(--accent); background: var(--accent-soft); padding: 14px 18px; margin: 18px 0; max-width: 72ch; }
.doc .callout .label { display: block; margin-bottom: 4px; color: var(--accent); }
.doc .callout p { margin: 0; color: var(--ink); }
.doc .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; max-width: 100%; margin: 16px 0; padding: 14px 0; border-top: 1px dashed var(--rule); border-bottom: 1px dashed var(--rule); }
.doc .pair > div h4 { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin: 0 0 6px; font-weight: 500; }
.doc .pair > div p { margin: 0; }
.doc-toc { font-family: var(--mono); font-size: 12px; }
.doc-toc h4 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-weight: 500; margin: 0 0 10px; }
.doc-toc ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.doc-toc a { color: var(--ink-2); }
.doc-toc a:hover { color: var(--accent); }

/* doc layout: sidebar TOC + content */
.doc-grid { display: grid; grid-template-columns: 200px 1fr; gap: 56px; }
.doc-grid aside { position: sticky; top: 80px; align-self: start; }

/* ============ META ROW (used in headers) ============ */
.meta-row { display: flex; gap: 22px; flex-wrap: wrap; padding-top: 18px; border-top: 1px dashed var(--rule); margin-top: 22px; }
.meta-row > div .label { display: block; margin-bottom: 2px; }
.meta-row > div .v { font-family: var(--mono); font-size: 13px; }

/* ============ FOOTER ============ */
footer.site-footer { padding: 48px 0 32px; border-top: 1px solid var(--rule); margin-top: 64px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 24px; padding-bottom: 32px; border-bottom: 1px solid var(--rule); }
.footer-col h4 { font-family: var(--sans); font-size: 13.5px; letter-spacing: -0.01em; color: var(--ink); font-weight: 600; margin: 0 0 14px; }
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.footer-col a { color: var(--ink-2); font-size: 14px; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 22px; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.footer-bottom > div { display: flex; align-items: center; }
.footer-bottom .footer-mark { display: block; }
.footer-bottom .glyph { width: 14px; height: 14px; background: var(--accent); display: inline-block; vertical-align: -3px; margin-right: 8px; border-radius: 50%; }

/* ============ GRID UTILITIES ============
   A handful of blocks in the page templates carried their track count in an
   inline style attribute. Inline declarations outrank every stylesheet rule
   short of !important, so no media query could collapse them: on a 390px
   phone the pricing CTA stayed at 1.4fr + 1fr and pushed the document 35px
   past the viewport. These classes hold the same layouts where a breakpoint
   can reach them. */
.gsplit  { display: grid; grid-template-columns: 1.4fr 1fr; gap: 56px; align-items: center; }
.gcols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.gcols-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

/* ============ RESPONSIVE ============ */
@media (max-width: 860px) {
  .gcols-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .gsplit, .gcols-2, .gcols-3 { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 980px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .doc-grid { grid-template-columns: 1fr; }
  .doc-grid aside { position: static; }
  .page-head h1 { font-size: 38px; }
  .container { padding: 0 22px; }
}

/* Tablet / small laptop */
@media (max-width: 860px) {
  .nav-inner { height: auto; min-height: 60px; padding: 8px 0; }
  .page-head h1 { font-size: 32px; line-height: 1.08; }
  /* Typical 3- or 4-column grids in the new templates collapse to 2 */
  .values, .team, .stats-mini, .stat-strip { grid-template-columns: 1fr 1fr !important; }
}

/* Mobile: collapse nav links + CTA into a compact horizontally-scrolling row.
   The template pages have no mobile drawer, so we keep them visible but scrollable. */
@media (max-width: 720px) {
  html { font-size: 15px; }
  .container { padding: 0 18px; }

  /* Nav */
  .nav-inner { gap: 8px; flex-wrap: wrap; padding: 8px 0; min-height: 60px; }
  .nav-links {
    order: 3;
    width: 100%;
    overflow-x: auto;
    gap: 18px;
    padding: 4px 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-top: 1px solid var(--rule);
    margin-top: 4px;
    padding-top: 10px;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a { white-space: nowrap; font-size: 14px; }
  .nav-cta .btn { padding: 8px 12px; font-size: 13px; }
  .nav-cta { gap: 6px; }
  .logo { font-size: 16px; }
  svg.logo-mark { width: 22px; height: 22px; }

  /* Typography */
  .page-head h1 { font-size: 26px; }
  h1 { text-wrap: balance; }

  /* All multi-column grids → single column */
  .footer-grid,
  .values, .team, .stats-mini, .stat-strip,
  .case-grid, .marketplace-grid, .spec-grid,
  .timeline, .cta-strip {
    grid-template-columns: 1fr !important;
  }

  /* Footer cleanup */
  .footer-col { border-right: 0 !important; }
  .footer-bottom { flex-direction: column; gap: 10px; align-items: flex-start; }

  /* Tables / wide content */
  table { display: block; overflow-x: auto; }

  /* Cookie banner adjustment so it doesn't crowd */
  .mira-ck-overlay { padding: 8px; }

  /* Larger touch targets.
     .btn already had a floor; the link lists did not. A 14px footer link in an
     8px-gap grid is an 18px target and a 12px TOC entry is 16px, both under
     the 24px WCAG 2.5.8 minimum. Padding the anchors lifts them clear without
     moving any text: the list gap comes off by the amount the padding adds. */
  .btn { min-height: 40px; }
  a, button { touch-action: manipulation; }
  .footer-col ul { gap: 0; }
  .footer-col a { display: inline-block; padding-block: 7px; }
  .footer-bottom .links { display: flex; flex-wrap: wrap; gap: 4px 18px; }
  .footer-bottom .links a { display: inline-block; padding-block: 6px; }
  .doc-toc ul { gap: 0; }
  .doc-toc a { display: inline-block; padding-block: 6px; }
  .nav-links a { display: inline-block; padding-block: 5px; }
  header .logo, .site-header .logo { padding-block: 4px; }
}

/* ============ GEO TOGGLES ============
   geo.js adds .geo-ke (Kenya) or .geo-non-ke on <html>. On the Kenya-only
   launch it always stamps .geo-ke, so .ke-only shows and .non-ke-only hides,
   and no page currently uses either class: the KE copy is simply the copy.
   The hooks are kept, not deleted, because they are the seam a second market
   re-enters through, and the base rules below are the ones that hold if geo.js
   ever fails to run (KE hidden, neutral copy shown), safe either way. */
.ke-only { display: none !important; }
.non-ke-only { display: revert; }
.geo-ke .ke-only { display: revert !important; }
.geo-ke .non-ke-only { display: none !important; }