/*
  Shared styles for the STATIC marketing pages (/pricing, /sovereignty, /compare).

  WHY THESE PAGES ARE STATIC HTML AND NOT REACT ROUTES. firebase.json rewrites ** to
  /index.html, and App.tsx switches on window.location.pathname. So a React route for /pricing
  would serve a crawler the HOMEPAGE's static fallback — every marketing URL would carry
  identical content, which is worse than having no pages at all. Real files at real paths are
  served by Hosting before the rewrite is consulted, so each page is itself to a crawler with
  no JavaScript involved.

  Design system is the fleet's, not this file's invention: Inter, white ground with #F9FAFB and
  #F3F4F6 layers, brand #881337 (tailwind.config.js), semi-bold headings at -0.02em.
  Deliberately light-only, because the cockpit is light-only — a dark marketing page and a white
  product is a seam the customer sees at exactly the wrong moment.

  CSP NOTE: script-src is 'self' with no 'unsafe-inline', so these pages carry NO inline
  JavaScript. They do not need any.
*/

:root {
  --white: #ffffff;
  --l2: #f9fafb;
  --l3: #f3f4f6;
  --ink: #0f172a;
  --ink-2: #334155;
  --ink-3: #64748b;
  --line: #e2e8f0;
  --line-2: #cbd5e1;
  --brand: #881337;
  --brand-hover: #6d0f2c;
  --brand-wash: rgba(136, 19, 55, 0.06);
  --brand-line: rgba(136, 19, 55, 0.2);
  --ok: #166534;
  --measure: 68ch;
  --radius: 14px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 76rem; margin: 0 auto; padding: 0 clamp(1.15rem, 4vw, 2.5rem); }
.col { max-width: var(--measure); }

/* ---------- header ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav-in { display: flex; align-items: center; justify-content: space-between; height: 4rem; gap: 1rem; }
.brandmark { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--ink); }
.brandmark img { height: 2rem; width: 2rem; }
.brandmark span { font-weight: 600; font-size: 1.1rem; letter-spacing: -0.02em; }
.nav-links { display: flex; align-items: center; gap: clamp(0.75rem, 2vw, 1.6rem); font-size: 0.94rem; }
.nav-links a { color: var(--ink-2); text-decoration: none; }
.nav-links a:hover { color: var(--brand); }
.nav-links a[aria-current="page"] { color: var(--brand); font-weight: 600; }

/* ---------- type ---------- */
h1 {
  font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.4rem);
  line-height: 1.06; letter-spacing: -0.028em; font-weight: 600;
  margin: 0 0 1.1rem; text-wrap: balance;
}
h2 {
  font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.1rem);
  line-height: 1.16; letter-spacing: -0.022em; font-weight: 600;
  margin: 0 0 1rem; text-wrap: balance;
}
h3 {
  font-size: 1.16rem; line-height: 1.35; letter-spacing: -0.014em; font-weight: 600;
  margin: 2.1rem 0 0.6rem;
}
p { margin: 0 0 1.1rem; color: var(--ink-2); }
.lead { font-size: clamp(1.1rem, 1rem + 0.5vw, 1.32rem); line-height: 1.5; color: var(--ink-2); max-width: 60ch; }
strong { color: var(--ink); font-weight: 600; }
a { color: var(--brand); text-underline-offset: 0.16em; }
a:hover { color: var(--brand-hover); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px; }

.eyebrow {
  font-size: 0.76rem; letter-spacing: 0.13em; text-transform: uppercase;
  font-weight: 700; color: var(--brand); margin: 0 0 0.9rem;
}

ul { margin: 0 0 1.1rem; padding-left: 1.2rem; color: var(--ink-2); }
li { margin-bottom: 0.5rem; }
li::marker { color: var(--brand); }

section { padding: clamp(2.8rem, 6vw, 5rem) 0; }
section + section { border-top: 1px solid var(--line); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.72rem 1.35rem; border-radius: 10px; font-weight: 600; font-size: 0.98rem;
  text-decoration: none; border: 1px solid transparent; transition: background-color .15s, color .15s, border-color .15s;
}
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-hover); color: #fff; }
.btn-quiet { background: var(--white); color: var(--ink); border-color: var(--line-2); }
.btn-quiet:hover { border-color: var(--brand); color: var(--brand); }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.6rem; }

/* ---------- pricing grid ---------- */
.tiers {
  display: grid; gap: 1rem; margin: 2rem 0 0;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.tier {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.5rem 1.35rem; background: var(--white); display: flex; flex-direction: column;
}
.tier.featured { border-color: var(--brand); border-width: 1.5px; background: var(--brand-wash); }
.tier .badge {
  font-size: 0.68rem; letter-spacing: 0.11em; text-transform: uppercase; font-weight: 700;
  color: var(--brand); margin-bottom: 0.5rem; min-height: 1rem;
}
.tier h3 { margin: 0 0 0.5rem; font-size: 1.05rem; }
.tier .price {
  font-size: 2.2rem; font-weight: 600; letter-spacing: -0.035em; line-height: 1;
  font-variant-numeric: tabular-nums; display: block;
}
.tier .price sup { font-size: 0.95rem; font-weight: 500; top: -0.9em; margin-right: 0.08em; }
.tier .per { font-size: 0.86rem; color: var(--ink-3); display: block; margin: 0.35rem 0 1rem; }
.tier .who { font-size: 0.92rem; color: var(--ink-2); margin: 0 0 1rem; }
.tier ul { font-size: 0.9rem; margin: 0 0 1.3rem; padding-left: 1.1rem; }
.tier li { margin-bottom: 0.35rem; }
.tier .btn { margin-top: auto; width: 100%; }

/* ---------- tables ---------- */
.scroller { overflow-x: auto; margin: 1.8rem 0 0.6rem; }
table { border-collapse: collapse; width: 100%; min-width: 42rem; font-size: 0.94rem; }
caption { text-align: left; color: var(--ink-3); font-size: 0.9rem; padding-bottom: 0.8rem; line-height: 1.55; }
th, td { padding: 0.7rem 0.9rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th {
  font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 700; border-bottom: 1px solid var(--line-2); white-space: nowrap;
}
td.c, th.c { text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; }
tbody th { font-weight: 500; color: var(--ink); }
.yes { color: var(--ok); font-weight: 600; }
.no { color: var(--ink-3); }
tr.mine td, tr.mine th { background: var(--brand-wash); }
tr.mine th { color: var(--brand); font-weight: 700; }

/* ---------- callouts ---------- */
.panel {
  border: 1px solid var(--line); border-left: 3px solid var(--brand);
  border-radius: var(--radius); background: var(--l2);
  padding: 1.4rem 1.5rem; margin: 1.8rem 0;
}
.panel p:last-child { margin-bottom: 0; }
.panel h3 { margin-top: 0; }

.stat-row { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); margin: 1.8rem 0; }
.stat { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem; background: var(--l2); }
.stat .n { font-size: 1.9rem; font-weight: 600; letter-spacing: -0.03em; color: var(--brand); font-variant-numeric: tabular-nums; display: block; }
.stat .l { font-size: 0.88rem; color: var(--ink-2); margin-top: 0.3rem; display: block; line-height: 1.45; }

/* ---------- faq ---------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; padding: 1.05rem 0; font-weight: 600; font-size: 1.02rem; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; float: right; color: var(--brand); font-weight: 400; font-size: 1.3rem; line-height: 1; }
.faq details[open] summary::after { content: "\2212"; }
.faq details[open] summary { color: var(--brand); }
.faq .a { padding: 0 0 1.1rem; max-width: var(--measure); }
.faq .a p:last-child { margin-bottom: 0; }

/* ---------- footer ---------- */
footer { border-top: 1px solid var(--line); background: var(--l2); padding: 2.8rem 0 3.4rem; margin-top: 2rem; }
footer .cols { display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; justify-content: space-between; }
footer p, footer li { font-size: 0.9rem; color: var(--ink-3); }
footer a { color: var(--ink-2); text-decoration: none; }
footer a:hover { color: var(--brand); }
footer ul { list-style: none; padding: 0; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------------------------------------------------------------------------------------------
   CONTENT PAGES — the blog, the comparison hub and the ecosystem page.
   Added 2026-09-13 alongside frontend/scripts/build-content.ts, which emits markup using these.
   Tokens only; nothing here introduces a colour the rest of the sheet does not already define.
   --------------------------------------------------------------------------------------------- */

/* Index grids. auto-fit so a two-item row does not leave a lonely stretched card, and a floor
   of 18rem so a card never narrows to the point the title wraps every word. */
.cards {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  margin: 1.5rem 0;
}

.card {
  display: block;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.4rem 1.5rem;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.card:hover,
.card:focus-visible {
  border-color: var(--brand-line);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06);
}
/* The whole card is the link, so the focus ring has to sit on the card rather than on the
   heading inside it, or keyboard users get a ring around text that is not the target. */
.card:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

.card h3 {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
}
.card p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--ink-3);
}
.card-meta {
  margin-top: 0.8rem !important;
  font-size: 0.78rem !important;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

/* Article byline, directly under the h1. */
.byline {
  margin: 0 0 1rem;
  font-size: 0.85rem;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

/* Two panels side by side — "good fit" against "not yet". Collapses to one column on a phone. */
.two-col {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  margin: 1.5rem 0;
}

/* Ordered lists inside .col get the same measure and rhythm as its paragraphs — without this
   they inherit a tighter line-height and read as a different document. */
.col ol,
.col ul {
  max-width: var(--measure);
  color: var(--ink-2);
  line-height: 1.7;
  padding-left: 1.3rem;
}
.col ol li,
.col ul li { margin-bottom: 0.5rem; }
.col ol li:last-child,
.col ul li:last-child { margin-bottom: 0; }