/* saarga.com — shared stylesheet. Served at /site.css, copied by build.py.

   Design system adopted 2026-09-21 from prompt/Saarga_Professional_Website_Design_Prompt.txt:
   Inter for everything read as language, IBM Plex Mono for everything read as a measurement.
   Near-black and paper neutrals, one blue accent used sparingly. Premium comes from restraint,
   typography and spacing — not from effects. Every element has to earn its place by making the
   measurement easier to trust or easier to understand. */

:root {
  /* surfaces */
  --paper:#F7F8FA; --card:#FFFFFF; --sunk:#F1F3F7; --band:#F1F3F7;
  /* text */
  --ink:#17191F; --ink-2:#5F6673; --ink-3:#696E77;
  /* The standard's muted tone is #8A919D. It reads 2.99:1 on this background, and every
     place we use it is small label text needing 4.5:1, so the muted token is darkened to
     the nearest tone of the same hue that passes on paper, card and band alike.
     The original value is recorded here so the deviation is visible. */
  --near-black:#111318;
  /* lines */
  --rule:#E4E7EC; --rule-soft:#EDEFF3;
  /* the one accent */
  --accent:#3157D5; --accent-ink:#2C4EC0; --accent-soft:#EAEFFC; --on-accent:#FFFFFF;
  /* faces */
  --sans:"Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  /* geometry */
  --r:10px; --r-sm:8px; --r-lg:12px;
  --page:1100px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:#0E1014; --card:#16181E; --sunk:#1B1E25; --band:#14161B;
    --ink:#EDEFF3; --ink-2:#A2A9B6; --ink-3:#79808D;
    --near-black:#0A0C0F;
    --rule:#262A32; --rule-soft:#1F232A;
    --accent:#5B7FE8; --accent-ink:#8FA9F2; --accent-soft:#1A2140; --on-accent:#0E1014;
  }
}
:root[data-theme="dark"] {
  --paper:#0E1014; --card:#16181E; --sunk:#1B1E25; --band:#14161B;
  --ink:#EDEFF3; --ink-2:#A2A9B6; --ink-3:#79808D;
  --near-black:#0A0C0F;
  --rule:#262A32; --rule-soft:#1F232A;
  --accent:#5B7FE8; --accent-ink:#8FA9F2; --accent-soft:#1A2140; --on-accent:#0E1014;
}

* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink);
       font-family:var(--sans); font-size:16px; line-height:1.62;
       font-feature-settings:"cv05" 1, "cv11" 1;
       -webkit-font-smoothing:antialiased; }
a { color:var(--accent-ink); text-underline-offset:3px; text-decoration-thickness:1px; }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline:2px solid var(--accent); outline-offset:3px; border-radius:3px; }
img { max-width:100%; }
h1,h2,h3 { text-wrap:balance; }

/* ---------- page furniture ---------- */
.shell { max-width:var(--page); margin:0 auto; padding:0 28px; }

.site-header { position:sticky; top:env(safe-area-inset-top, 0px); z-index:20;
  background:var(--paper);          /* solid fallback: a sticky bar must never be see-through */
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:saturate(1.4) blur(8px);
  border-bottom:1px solid var(--rule); }
@supports not (backdrop-filter:blur(1px)) { .site-header { background:var(--paper); } }
.head-row { display:flex; align-items:center; gap:18px; min-height:68px; flex-wrap:wrap;
  padding:9px 0; }
.mark { font-family:var(--sans); font-size:20px; font-weight:600; letter-spacing:-.021em;
  color:var(--ink); text-decoration:none; margin-right:auto;
  display:flex; align-items:baseline; gap:10px; }
.mark span.dot { color:var(--accent); }
.mark small { font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); font-weight:400; }
nav.main { display:flex; align-items:center; gap:4px 24px; flex-wrap:wrap; }
nav.main a { font-size:14.5px; font-weight:500; color:var(--ink-2); text-decoration:none;
  padding:6px 0; border-bottom:2px solid transparent; }
nav.main a:hover { color:var(--ink); }
nav.main a[aria-current="page"] { color:var(--ink); border-bottom-color:var(--accent); }

/* Primary is near-black, not blue: the accent stays rare enough to mean something. */
.btn { display:inline-block; font-family:var(--sans); font-size:15px; font-weight:500;
  line-height:1.2; padding:11px 19px; border-radius:var(--r-sm); text-decoration:none;
  background:var(--near-black); color:#FFFFFF; border:1px solid var(--near-black);
  transition:background .15s ease, border-color .15s ease, color .15s ease; }
.btn:hover { background:#000; border-color:#000; }
.btn.accent { background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.btn.accent:hover { background:var(--accent-ink); border-color:var(--accent-ink); }
.btn.ghost { background:transparent; color:var(--ink); border-color:var(--rule); }
.btn.ghost:hover { background:var(--sunk); border-color:var(--ink-3); }
.btn.small { font-size:14px; padding:9px 15px; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn { background:#EDEFF3; color:#0E1014; border-color:#EDEFF3; }
  :root:not([data-theme="light"]) .btn:hover { background:#FFFFFF; border-color:#FFFFFF; }
  :root:not([data-theme="light"]) .btn.ghost { background:transparent; color:var(--ink);
    border-color:var(--rule); }
  :root:not([data-theme="light"]) .btn.accent { background:var(--accent); color:#0B0D11;
    border-color:var(--accent); }
}
:root[data-theme="dark"] .btn { background:#EDEFF3; color:#0E1014; border-color:#EDEFF3; }
:root[data-theme="dark"] .btn.ghost { background:transparent; color:var(--ink); border-color:var(--rule); }

footer.site-footer { margin-top:92px; border-top:1px solid var(--rule); background:var(--band); }
.foot-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:36px;
  padding-block:48px 32px; }
.foot-grid h4 { font-family:var(--mono); font-size:10.5px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--ink-3); margin:0 0 14px; font-weight:400; }
.foot-grid ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.foot-grid a { color:var(--ink-2); text-decoration:none; font-size:14.5px; }
.foot-grid a:hover { color:var(--ink); text-decoration:underline; }
.foot-blurb { font-size:14.5px; color:var(--ink-2); margin:10px 0 0; max-width:36ch; }
.foot-base { border-top:1px solid var(--rule); padding-block:18px 28px;
  font-family:var(--mono); font-size:11.5px; color:var(--ink-3);
  display:flex; flex-wrap:wrap; gap:6px 22px; }

/* ---------- blocks ---------- */
main { padding-bottom:10px; }
section { padding-block:64px; border-bottom:1px solid var(--rule-soft); }
section:last-of-type { border-bottom:0; }
section.plainband { background:var(--band); border-bottom:1px solid var(--rule); }

.eyebrow { font-family:var(--mono); font-size:10.5px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--accent-ink); margin:0 0 14px; font-weight:500; }
h1 { font-family:var(--sans); font-size:clamp(32px,4.7vw,50px); font-weight:600;
  line-height:1.08; letter-spacing:-.028em; margin:0 0 20px; }
h2 { font-family:var(--sans); font-size:clamp(23px,2.9vw,32px); font-weight:600;
  letter-spacing:-.021em; line-height:1.2; margin:0 0 16px; }
h3 { font-size:16.5px; font-weight:600; letter-spacing:-.008em; margin:0 0 7px; }
p { margin:0 0 15px; max-width:66ch; }
p:last-child { margin-bottom:0; }
.lede { font-size:19px; line-height:1.56; color:var(--ink-2); max-width:38em; }
.sub { color:var(--ink-2); }
strong { font-weight:600; }

.hero { padding-block:80px 56px; }
.hero h1 { max-width:17ch; }
.actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.hero-note { font-family:var(--mono); font-size:11.5px; color:var(--ink-3); margin-top:18px; }

/* figure strip — the measured numbers, set in the data face */
.figs { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px; background:var(--rule); border:1px solid var(--rule); border-radius:var(--r);
  overflow:hidden; }
.fig { background:var(--card); padding:20px 20px 18px; }
.fig b { display:block; font-family:var(--mono); font-size:30px; font-weight:600;
  line-height:1.02; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.fig span { display:block; font-size:12px; line-height:1.4; color:var(--ink-2); margin-top:8px; }
.fig.hi b { color:var(--accent); }

.cols { display:grid; grid-template-columns:repeat(auto-fit,minmax(248px,1fr)); gap:32px;
  margin-top:8px; }
.cols p { margin-bottom:0; }
.cols h3 { margin-top:2px; }
.rule-top { border-top:2px solid var(--accent); padding-top:16px; }

.panel { background:var(--card); border:1px solid var(--rule); border-radius:var(--r-lg);
  padding:28px 30px; }

/* source-split bars — one insight, restrained colour, value readable without the bar */
.bars { display:flex; flex-direction:column; gap:15px; }
.bar-row { display:grid; grid-template-columns:1fr auto; gap:6px 14px; align-items:center; }
.bar-label { font-size:14.5px; color:var(--ink-2); }
.bar-val { font-family:var(--mono); font-size:13px; font-weight:500;
  font-variant-numeric:tabular-nums; color:var(--ink); }
.bar-track { grid-column:1 / -1; height:8px; background:var(--sunk); border-radius:99px;
  overflow:hidden; border:1px solid var(--rule-soft); }
.bar-fill { display:block; height:100%; background:var(--accent); border-radius:99px; }
.bar-fill.two { background:var(--ink-3); }
.bar-fill.nil { background:var(--rule); }

.readout { font-size:15px; color:var(--ink-2); border-left:2px solid var(--accent);
  padding:4px 0 4px 18px; margin:26px 0 0; max-width:66ch; }
.readout b { color:var(--ink); font-weight:600; }

/* steps — numbered because the order is the method */
ol.steps { list-style:none; padding:0; margin:0; counter-reset:s;
  display:flex; flex-direction:column; gap:28px; }
ol.steps li { counter-increment:s; display:grid; grid-template-columns:38px 1fr; gap:16px; }
ol.steps li::before { content:counter(s,decimal-leading-zero); font-family:var(--mono);
  font-size:11.5px; font-weight:500; color:var(--accent); padding-top:4px; letter-spacing:.04em; }
ol.steps p { font-size:15.5px; color:var(--ink-2); }

ul.plain { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:18px; }
ul.plain li { padding-left:22px; position:relative; font-size:15.5px; color:var(--ink-2); max-width:64ch; }
ul.plain li::before { content:""; position:absolute; left:0; top:.62em; width:9px; height:1.5px;
  background:var(--accent); border-radius:2px; }
ul.plain b { color:var(--ink); font-weight:600; }

/* pricing */
.tiers { display:grid; grid-template-columns:repeat(auto-fit,minmax(256px,1fr)); gap:20px; }
.tier { background:var(--card); border:1px solid var(--rule); border-radius:var(--r-lg);
  padding:28px 28px 30px; display:flex; flex-direction:column; gap:15px; }
.tier.lead { border-color:var(--accent); }
.tier .tag { font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); font-weight:500; }
.tier.lead .tag { color:var(--accent); }
.tier h3 { font-family:var(--sans); font-size:19px; font-weight:600; margin:0; }
.price { font-family:var(--mono); font-size:32px; font-weight:600; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums; line-height:1; }
.price em { font-style:normal; font-size:13px; font-weight:400; color:var(--ink-3); letter-spacing:0; }
.tier ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;
  font-size:14.5px; color:var(--ink-2); }
.tier ul li { padding-left:20px; position:relative; }
.tier ul li::before { content:""; position:absolute; left:0; top:.6em; width:8px; height:1.5px;
  background:var(--accent); border-radius:2px; }
.tier .foot { margin-top:auto; padding-top:6px; }

.tablewrap { overflow-x:auto; border:1px solid var(--rule); border-radius:var(--r-lg);
  background:var(--card); }
table { border-collapse:collapse; width:100%; min-width:520px; font-size:14.5px; }
th, td { text-align:left; padding:14px 18px; border-bottom:1px solid var(--rule-soft); }
thead th { font-family:var(--mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-3); font-weight:500; border-bottom:1px solid var(--rule); }
tbody th { font-weight:500; color:var(--ink); }
td { color:var(--ink-2); font-variant-numeric:tabular-nums; }
tbody tr:last-child th, tbody tr:last-child td { border-bottom:0; }

/* question & answer */
.qa { display:flex; flex-direction:column; gap:24px; }
.qa h3 { margin-bottom:5px; }
.qa p { color:var(--ink-2); font-size:15.5px; }

/* call to action band */
.cta { background:var(--card); border:1px solid var(--rule); border-radius:var(--r-lg);
  padding:34px 34px 32px; display:flex; flex-wrap:wrap; gap:22px 40px;
  align-items:center; justify-content:space-between; }
.cta h2 { margin-bottom:8px; }
.cta p { color:var(--ink-2); margin:0; max-width:46ch; }
.mailto { font-family:var(--mono); font-size:16px; font-weight:500; }

/* Below this width the five nav items and the button no longer fit on one line with
   the wordmark. Rather than hide them behind a toggle — five short links, all worth
   reaching in one tap — the nav drops to its own full-width row under the wordmark. */
@media (max-width:820px) {
  /* Two rows is too much of a phone screen to give away permanently, so the header
     stops sticking here and scrolls off with the page. */
  .site-header { position:static; backdrop-filter:none; background:var(--paper); }
  .head-row { min-height:0; column-gap:14px; row-gap:0; padding:11px 0 4px; }
  .mark { font-size:19px; }
  .mark small { display:none; }
  nav.main { order:3; width:100%; margin-top:11px; padding-top:9px;
    border-top:1px solid var(--rule); gap:2px 18px; }
  nav.main a[aria-current="page"] { border-bottom-width:2px; }
  nav.main a { font-size:14px; padding:6px 0 7px; }
}

@media (max-width:760px) {
  .foot-grid { grid-template-columns:1fr 1fr; }
  .hero { padding-block:56px 42px; }
  section { padding-block:50px; }
}
@media (max-width:560px) {
  .shell { padding:0 20px; }
  .mark { font-size:19px; }
  /* Five items wrapped by flex leave a ragged second line. On a phone the nav becomes
     three even columns — two rows of a deliberate shape rather than an accident.
     justify-items keeps each link the width of its own text, so the current-page rule
     underlines the word and not the whole column. */
  nav.main { display:grid; grid-template-columns:repeat(3,1fr); justify-items:start;
    gap:0 12px; }
  .panel, .cta { padding:24px 20px; }
  .foot-grid { grid-template-columns:1fr; gap:28px; }
}
@media (prefers-reduced-motion:no-preference) {
  .bar-fill { animation:grow .9s cubic-bezier(.22,.61,.36,1) both; }
  @keyframes grow { from { transform:scaleX(0); transform-origin:left; } }
}

/* ---------- banners ---------- */
/* Full-width bands, so the home page reads as a sequence of clear statements
   rather than one column of prose. */
.band { border-bottom:1px solid var(--rule); }
.band.tint { background:var(--band); }
/* The dark band is near-black, never the accent: a page washed in blue spends the one
   colour that is supposed to mark a number. */
.band.ink { background:var(--near-black); border-bottom-color:var(--near-black); }
.band.ink, .band.ink h2, .band.ink p { color:#F3F5F8; }
.band.ink .eyebrow { color:#93A8EC; }
.band.ink a:not(.btn) { color:#AFC0F5; }
.band.ink .btn { background:#FFFFFF; color:var(--near-black); border-color:#FFFFFF; }
.band.ink .btn:hover { background:#E8EBF2; border-color:#E8EBF2; }
.band.ink .btn.ghost { background:transparent; color:#F3F5F8; border-color:rgba(255,255,255,.28); }
.band.ink .btn.ghost:hover { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.45); }
.band > .shell { padding-block:64px; }
.band h2 { max-width:20ch; }
.band .lede { max-width:46ch; }

.split { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.split.wide-left { grid-template-columns:1.05fr .95fr; }
/* Centring two columns of unequal height strands the shorter one in a band of
   whitespace. Where one side is a card, both sides start at the top instead. */
.split.top { align-items:start; }
@media (max-width:860px) { .split, .split.wide-left { grid-template-columns:1fr; gap:32px; } }

/* the worked example: a question, and the answer it got — the site's best evidence,
   so it is built as a piece of report UI rather than a decorative card */
.answer { background:var(--card); border:1px solid var(--rule); border-radius:var(--r-lg);
  padding:24px 26px 26px; }
.answer .tagline { font-family:var(--mono); font-size:10.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-3); margin:0 0 15px; font-weight:500; }
.ask-line { font-size:16.5px; font-weight:600; letter-spacing:-.01em; color:var(--ink);
  margin:0 0 5px; padding:14px 16px; background:var(--sunk);
  border-radius:var(--r-sm) var(--r-sm) var(--r-sm) 2px; max-width:none; }
.ask-who { font-size:12.5px; color:var(--ink-3); margin:0 0 18px; }
.reply-intro { font-size:15px; color:var(--ink-2); margin:0 0 14px; }
ol.named { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1px;
  background:var(--rule-soft); border:1px solid var(--rule-soft); border-radius:var(--r-sm);
  overflow:hidden; }
ol.named li { background:var(--card); display:grid; grid-template-columns:30px 1fr;
  align-items:baseline; gap:12px; padding:11px 15px; font-size:15px; }
ol.named li b { font-weight:600; }
ol.named .n { font-family:var(--mono); font-size:12px; font-weight:500; color:var(--accent);
  font-variant-numeric:tabular-nums; }
ol.named li.you { background:var(--accent-soft); }
ol.named li.you .n { color:var(--ink-3); }
ol.named li.you span:last-child { color:var(--ink-2); }
.answer .after { font-size:14.5px; color:var(--ink-2); margin:17px 0 0; }

/* benefit cards */
.benefits { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; }
.benefit { background:var(--card); border:1px solid var(--rule); border-radius:var(--r-lg);
  padding:26px 26px 28px; }
.band.ink .benefit { background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.14); }
.band.ink .benefit h3, .band.ink .benefit p { color:#F3F5F8; }
.benefit .num { font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent); display:block; margin-bottom:13px; }
.band.ink .benefit .num { color:#93A8EC; }
.benefit h3 { font-size:17.5px; margin-bottom:8px; }
.benefit p { font-size:15px; color:var(--ink-2); margin:0; }

/* plain statement pair — the two halves of an idea */
.pair { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:28px; }
.pair > div { border-top:2px solid var(--rule); padding-top:17px; }
.pair > div.good { border-top-color:var(--accent); }
.pair h3 { font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:11px; }
.pair p { font-size:16px; margin:0; }

/* ---------- the analysis read-out ---------- */
/* Closes the left-hand column, stating what the recorded answer means. Set as a
   definition list because it is label/value data, and in the mono face because
   every value on it is a measurement. */
.verdict { background:var(--near-black); border-radius:var(--r-lg); padding:20px 22px 22px;
  margin-top:30px; }
.verdict .tagline { font-family:var(--mono); font-size:10.5px; font-weight:500;
  letter-spacing:.15em; text-transform:uppercase; color:#93A8EC; margin:0 0 14px; }
.readrow { margin:0; display:flex; flex-direction:column; gap:1px;
  background:rgba(255,255,255,.12); border-radius:var(--r-sm); overflow:hidden; }
.readrow > div { background:var(--near-black); display:flex; flex-wrap:wrap; gap:6px 16px;
  align-items:baseline; justify-content:space-between; padding:12px 15px; }
.readrow dt { font-size:14px; color:#B6BECC; }
.readrow dd { margin:0; font-family:var(--mono); font-size:19px; font-weight:600;
  letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:#F3F5F8; }
/* The one row the reader is meant to feel is their own. */
.readrow > div.miss { background:#2A1418; }
.readrow > div.miss dt { color:#E7B4BC; }
.readrow > div.miss dd { font-size:13px; letter-spacing:.09em; text-transform:uppercase;
  color:#FF9AA8; }
.verdict-note { font-size:13.5px; line-height:1.55; color:#B6BECC; margin:15px 0 0; max-width:none; }
.verdict-note b { color:#F3F5F8; font-weight:600; font-family:var(--mono);
  font-variant-numeric:tabular-nums; }
.verdict-note a { color:#AFC0F5; }

/* ---------- the two-column comparison ---------- */
/* The right column is the Saarga side, so it carries the emphasis: header cells,
   full ink, and the accent rule. The left is context, not a competitor to beat. */
table.versus { min-width:420px; }
table.versus thead th { font-size:10.5px; }
table.versus thead th:last-child { color:var(--accent); }
table.versus td { color:var(--ink-3); font-variant-numeric:normal; width:50%; }
table.versus td.is { font-weight:600; color:var(--ink); width:50%;
  border-left:2px solid var(--accent); }
table.versus thead th:last-child { border-left:2px solid var(--accent); }

/* ---------- the insights index ---------- */
/* A list, not a grid of cards: these are things to read, and a reader scans titles down
   a column faster than across a set of boxes. The whole row is the link. */
.entries { display:flex; flex-direction:column; gap:1px; margin-top:26px;
  background:var(--rule); border:1px solid var(--rule); border-radius:var(--r-lg);
  overflow:hidden; }
.entry { display:block; background:var(--card); padding:22px 24px 24px; text-decoration:none;
  color:inherit; transition:background .15s ease; }
.entry:hover { background:var(--sunk); }
.entry-kind { display:block; font-family:var(--mono); font-size:10.5px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:9px; }
.entry-title { display:block; font-size:19px; font-weight:600; letter-spacing:-.015em;
  color:var(--ink); margin-bottom:7px; }
.entry:hover .entry-title { color:var(--accent-ink); text-decoration:underline;
  text-underline-offset:3px; }
.entry-note { display:block; font-size:15px; line-height:1.55; color:var(--ink-2);
  max-width:72ch; }
@media (max-width:560px) { .entry { padding:19px 18px 20px; }
  .entry-title { font-size:17.5px; } }