/* ============================================================================
   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}
/* The skip link's target, and any in-page target, lands below the pinned header rather than under it. */
main[id],[id]:target{scroll-margin-top:4.5rem}
@media (max-width:40rem){main[id],[id]:target{scroll-margin-top: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}

/* ---------- the Village Gateway hero (gateway.html, 10 Nov 2026): headline, one lede, three points and the status collapsed ----------
   Desktop: the headline across the top, the lede and the buttons on the left, the points and the status on the right, so the hero
   uses the width. Below 60rem: one column, in reading order (headline, lede, points, status, buttons). Landing tokens only. */
.hero--gw .gw-hero{display:grid;grid-template-columns:1fr;grid-template-areas:"head" "lede" "side" "actions";gap:1.25rem 3rem;align-items:start}
.hero--gw .gw-hero-head{grid-area:head}
.hero--gw .gw-hero-head h1{margin-bottom:0}
.hero--gw .gw-hero-lede{grid-area:lede;margin:0;max-width:62ch}
.hero--gw .gw-hero-side{grid-area:side;max-width:62ch}
.hero--gw .gw-hero-actions{grid-area:actions;margin-top:.25rem}
.gw-hero-points{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.gw-hero-points li{position:relative;margin:0;padding:.8rem 1rem .8rem 2.6rem;background:var(--panel);border:1px solid var(--line);border-radius:12px;color:var(--ink);line-height:1.5}
.gw-hero-points li::before{content:"";position:absolute;left:1rem;top:1.25rem;width:.7rem;height:.38rem;border-left:2.5px solid var(--accent);border-bottom:2.5px solid var(--accent);transform:rotate(-45deg)}
.gw-hero-stands{margin-top:.9rem;border-top:1px solid var(--line);padding-top:.35rem}
.gw-hero-stands summary{cursor:pointer;font-weight:650;color:var(--ink);min-height:44px;display:flex;align-items:flex-start;gap:.6rem;padding-block:.6rem;list-style:none}
.gw-hero-stands summary::-webkit-details-marker{display:none}
.gw-hero-stands summary::before{content:"";flex:none;margin-top:.5em;width:.5rem;height:.5rem;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg);transition:transform .15s}
.gw-hero-stands[open] summary::before{transform:rotate(45deg)}
.gw-hero-stands p{color:var(--muted);margin:.4rem 0 .6rem;max-width:62ch}
@media (min-width:60rem){
  .hero--gw .gw-hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto 1fr;grid-template-areas:"head head" "lede side" "actions side"}
  .hero--gw .gw-hero-head h1{max-width:30ch}
  .hero--gw .gw-hero-actions{align-self:start}
}
@media (prefers-reduced-motion:reduce){.gw-hero-stands summary::before{transition:none}}