/* ============================================================================
   site-chrome.css: the landing's header, footer, theme switch, type, palette and buttons for the apex pages built on
   /css/village-apps.css (pricing.html, gateway.html, gateway-guide.html, gateway-technical.html), so the landing, the pricing
   page and the Village Gateway pages look like one site (design review, 9 Nov 2026, item 20).

   The values are the landing's (/css/landing-v2.css); the markup comes from scripts/lib/site-chrome.js. Loaded after the page's own
   sheets, so it wins on the shared tokens. Change a value here and in landing-v2.css together, and bump CSS_HREF in
   scripts/lib/site-chrome.js. No colour here is new: each is a landing token.
   ============================================================================ */

/* ---------- tokens: the landing's, and the village-apps names mapped onto them ---------- */
:root{
  --bg:#faf8f3; --panel:#ffffff; --panel-2:#f3efe7;
  --ink:#1e2a24; --muted:#4f5f56; --faint:#556058;
  --line:rgba(30,42,36,.13); --line-soft:rgba(30,42,36,.07);
  --accent:#1e6f5c; --accent-ink:#ffffff;
  --bg-raise:var(--panel); --ink-soft:var(--muted);
  --scrim:color-mix(in srgb,var(--bg) 90%,transparent);
}
:root[data-theme="light"]{
  --bg:#faf8f3; --panel:#ffffff; --panel-2:#f3efe7;
  --ink:#1e2a24; --muted:#4f5f56; --faint:#556058;
  --line:rgba(30,42,36,.13); --line-soft:rgba(30,42,36,.07);
  --accent:#1e6f5c; --accent-ink:#ffffff;
  --bg-raise:var(--panel); --ink-soft:var(--muted);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#111714; --panel:#1a221d; --panel-2:#151c18;
    --ink:#e8eee9; --muted:#a7b4ab; --faint:#84928a;
    --line:rgba(232,238,233,.15); --line-soft:rgba(232,238,233,.08);
    --accent:#4fb695; --accent-ink:#0c1511;
    --bg-raise:var(--panel); --ink-soft:var(--muted);
  }
}
:root[data-theme="dark"]{
  --bg:#111714; --panel:#1a221d; --panel-2:#151c18;
  --ink:#e8eee9; --muted:#a7b4ab; --faint:#84928a;
  --line:rgba(232,238,233,.15); --line-soft:rgba(232,238,233,.08);
  --accent:#4fb695; --accent-ink:#0c1511;
  --bg-raise:var(--panel); --ink-soft:var(--muted);
}

/* ---------- type: the landing's stack and heading weight (replaces system-ui, and Atkinson Hyperlegible on the Gateway pages) ---------- */
html body{
  background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Ubuntu,Cantarell,"Noto Sans",sans-serif;
  font-size:1.0625rem; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-weight:650;letter-spacing:-.015em;text-wrap:balance}
.wrap{max-width:74rem;padding:0 clamp(1.1rem,4vw,2.4rem)}

/* ---------- focus and skip link ---------- */
:focus-visible,
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
  outline:3px solid var(--accent);outline-offset:3px;border-radius:4px
}
.skip-link{position:absolute;left:-999px;top:0;background:var(--accent);color:var(--accent-ink);padding:.6rem 1rem;border-radius:0 0 8px 0;z-index:60}
.skip-link:focus{left:0}

/* ---------- header (landing-v2.css "header"), scoped to beat village-apps.css's header.site rules ---------- */
header.site[data-site-chrome]{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--bg) 90%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line-soft);
}
header.site[data-site-chrome] .wrap.bar{display:flex;align-items:center;flex-wrap:wrap;gap:.4rem 1.2rem;min-height:3.6rem;padding-block:0}
header.site[data-site-chrome] .brand{font-weight:750;font-size:1.15rem;letter-spacing:-.02em;color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:.55rem}
header.site[data-site-chrome] .brand svg{color:var(--accent)}
header.site[data-site-chrome] .site-nav{margin-left:auto;display:flex;flex-wrap:wrap;gap:0 1.1rem;align-items:center}
header.site[data-site-chrome] .site-nav a{color:var(--muted);text-decoration:none;font-size:.92rem;font-weight:550;padding-block:.5rem;display:inline-block}
header.site[data-site-chrome] .site-nav a:hover{color:var(--ink)}
/* The page you are on. */
header.site[data-site-chrome] .site-nav a[aria-current="page"]{color:var(--ink);font-weight:650;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.35em}
header.site[data-site-chrome] .lang-switch{display:flex;gap:.05rem;align-items:center;font-size:.8rem;margin:0}
/* WCAG 2.2 AA 2.5.8: each language link is at least 24px by 24px (the old dot-separated links were about 20px high). */
header.site[data-site-chrome] .lang-switch a{display:inline-flex;align-items:center;justify-content:center;min-height:24px;min-width:24px;padding:.35rem .4rem;color:var(--muted);text-decoration:none;border-radius:6px;font-weight:400}
header.site[data-site-chrome] .lang-switch a[aria-current]{color:var(--ink);font-weight:700;text-decoration:none}
header.site[data-site-chrome] .lang-switch a:hover{color:var(--ink)}
#themeToggle{background:transparent;border:1.5px solid var(--line);border-radius:999px;width:2.3rem;height:2.3rem;display:inline-flex;align-items:center;justify-content:center;color:var(--muted);cursor:pointer;padding:0}
#themeToggle:hover{color:var(--ink);border-color:var(--ink)}
#themeToggle .moon{display:none}
:root[data-theme="dark"] #themeToggle .sun{display:none}
:root[data-theme="dark"] #themeToggle .moon{display:block}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) #themeToggle .sun{display:none}
  :root:not([data-theme="light"]) #themeToggle .moon{display:block}
}
@media (max-width:40rem){
  header.site[data-site-chrome] .wrap.bar{gap:0 .6rem;padding-block:.35rem}
  header.site[data-site-chrome] .lang-switch{margin-left:auto}
  header.site[data-site-chrome] .site-nav{order:3;width:100%;margin-left:0;gap:0 .95rem}
  header.site[data-site-chrome] .site-nav a{font-size:.88rem;padding-block:.3rem}
  /* As on the landing: the two-row bar is not pinned on a phone. */
  header.site[data-site-chrome]{position:static}
}

/* ---------- the page's own section links, a second row under the header (not pinned) ---------- */
.sub-nav{border-bottom:1px solid var(--line-soft);background:var(--bg)}
.sub-nav .wrap{display:flex;flex-wrap:wrap;gap:0 1.1rem;align-items:center}
.sub-nav a{color:var(--muted);text-decoration:none;font-size:.88rem;font-weight:550;padding-block:.45rem;display:inline-block}
.sub-nav a:hover{color:var(--ink);text-decoration:underline}

/* ---------- buttons (landing-v2.css "buttons") ---------- */
.btn{display:inline-flex;align-items:center;gap:.5rem;font-weight:650;text-decoration:none;border-radius:999px;padding:.72rem 1.4rem;font-size:.98rem;border:1.5px solid transparent;cursor:pointer}
.btn:hover{transform:none}
.btn-primary,.btn-solid{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover,.btn-solid:hover{filter:brightness(1.07)}
/* A plain .btn on these pages is the secondary action: the landing's outline button. */
.btn-ghost,.btn:not(.btn-primary):not(.btn-solid){border-color:var(--line);color:var(--ink);background:transparent}
.btn-ghost:hover,.btn:not(.btn-primary):not(.btn-solid):hover{border-color:var(--ink)}
.checkout-btn{background:var(--accent);color:var(--accent-ink);border-width:1.5px;font-size:.98rem}
.checkout-btn:hover,.checkout-btn:focus-visible{filter:brightness(1.07)}

/* ---------- footer (landing-v2.css "footer") ---------- */
footer.site-foot{border-top:1px solid var(--line-soft);padding:2rem 0 2.6rem;font-size:.88rem;color:var(--faint)}
.site-foot .row{display:flex;gap:.6rem 1.4rem;flex-wrap:wrap;align-items:baseline}
.site-foot a{color:var(--muted);text-decoration:none;display:inline-block;padding-block:.3rem}
.site-foot a:hover{color:var(--ink);text-decoration:underline}
.site-foot .co{margin-left:auto}