/* ================================================================
   Yantrika MARKETING SITE — shared stylesheet
   ================================================================
   Plain hand-written CSS, no build step, no framework. Shared across
   every page in marketing/ so the nav/footer/typography stay in sync
   without duplicating ~300 lines per page (unlike console/academy,
   which are deliberately single-file apps — this is a multi-page
   static site, so one shared sheet is the more maintainable choice).

   Look: light, editorial marketing site — distinct from the dark
   ISA-101 operator consoles (console/, academy/), but sharing the
   same brand hues (--accent blue, --good green) so the family is
   recognizable when you click through from docs/ or the console.
   ================================================================ */

:root{
  --bg:#fbfaf7; --surface:#ffffff; --surface2:#f4f2ec;
  --border:#e4e0d6; --border-strong:#d3cebe;
  --ink:#1c1b17; --muted:#5b584e; --dim:#8a8678;
  --accent:#2563c9; --accent-ink:#ffffff; --accent-dim:#e8f0fd;
  --good:#0d8a4f; --warn:#b3720a;
  --r:10px; --r-sm:6px;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --maxw:1040px;
}
*{box-sizing:border-box}
html{color-scheme:light}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.6 var(--font); -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{color:var(--ink); line-height:1.22; font-weight:750; letter-spacing:-.01em}
h1{font-size:clamp(30px,4.6vw,46px); margin:0 0 16px}
h2{font-size:clamp(22px,3vw,30px); margin:0 0 10px}
h3{font-size:18px; margin:0 0 6px}
p{margin:0 0 14px}
ul,ol{margin:0 0 14px; padding-left:22px}
li{margin:0 0 6px}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
section{padding:56px 0}
section.tight{padding:36px 0}
.kicker{font-size:12.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--accent); margin:0 0 14px}
.lede{font-size:18px; color:var(--muted); max-width:66ch}
code,pre{font-family:var(--mono); font-size:13.5px}
code{background:var(--surface2); border:1px solid var(--border); border-radius:4px; padding:1px 6px; color:var(--ink)}
pre{
  background:#1c1b17; color:#eae7dc; border:1px solid #33322a; border-radius:var(--r);
  padding:16px 18px; overflow-x:auto; line-height:1.6; margin:14px 0;
}
pre code{background:none; border:none; padding:0; color:inherit}
pre .cmt{color:#8a8678}
pre .dollar{color:#7fd88f}

hr.rule{border:none; border-top:1px solid var(--border); margin:0}

/* ---------- header / nav ---------- */
header.site{position:sticky; top:0; z-index:20; background:rgba(251,250,247,.92); backdrop-filter:blur(6px); border-bottom:1px solid var(--border)}
header.site .bar{display:flex; align-items:center; gap:20px; padding:14px 0}
.brand{display:flex; align-items:center; gap:9px; font-weight:800; font-size:16.5px; color:var(--ink)}
.brand .mark{width:26px; height:26px; display:block; flex:none}
/* gap was 22px with eight nav items; the VDA 5050 Test link makes nine and
   the row wraps at --maxw unless the gutters come in a little. */
nav.top{margin-left:auto; display:flex; align-items:center; gap:16px; font-size:14px}
nav.top a{color:var(--muted); font-weight:600}
nav.top a.on, nav.top a:hover{color:var(--ink); text-decoration:none}
nav.top a.cta{background:var(--ink); color:#fff; padding:7px 15px; border-radius:999px; font-weight:700}
nav.top a.cta:hover{background:#000; text-decoration:none}
.navtoggle{display:none; margin-left:auto; background:none; border:1px solid var(--border-strong); border-radius:var(--r-sm); padding:7px 10px; font-size:15px; cursor:pointer}
@media (max-width:760px){
  nav.top{display:none; position:absolute; left:0; right:0; top:100%; background:var(--surface); border-bottom:1px solid var(--border); flex-direction:column; align-items:flex-start; gap:2px; padding:10px 24px 16px}
  nav.top.open{display:flex}
  nav.top a{padding:9px 0; width:100%}
  nav.top a.cta{width:auto; margin-top:8px}
  .navtoggle{display:inline-block}
}

/* ---------- hero ---------- */
.hero{padding:64px 0 52px}
.hero h1{max-width:19ch}
.hero .actions{display:flex; gap:12px; flex-wrap:wrap; margin:26px 0 18px}
.btn{display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:14.5px; padding:11px 20px; border-radius:999px; border:1px solid transparent; cursor:pointer}
.btn.primary{background:var(--ink); color:#fff}
.btn.primary:hover{background:#000; text-decoration:none}
.btn.secondary{background:var(--surface); border-color:var(--border-strong); color:var(--ink)}
.btn.secondary:hover{border-color:var(--ink); text-decoration:none}
.proofline{font-size:13.5px; color:var(--dim)}
.proofline strong{color:var(--muted)}

/* ---------- quickstart strip ---------- */
.quickstart{background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:22px 24px}
.quickstart .platnote{font-size:13px; color:var(--dim); margin-top:10px}

/* ---------- feature grid ---------- */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; margin-top:26px}
.grid.two{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:20px 22px}
.card .num{display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:7px; background:var(--accent-dim); color:var(--accent); font-weight:800; font-size:12.5px; margin-bottom:10px}
.card h3{font-size:16px}
.card p{margin:6px 0 0; font-size:14.5px; color:var(--muted)}
.card p:last-child{margin-bottom:0}

/* ---------- callout / band ---------- */
.callout{background:var(--surface2); border:1px solid var(--border); border-radius:var(--r); padding:26px 28px}
.band{background:var(--ink); color:#eae7dc}
.band h2{color:#fff}
.band .muted{color:#c9c5b6}
.band a{color:#9ec5f4}
.band .btn.primary{background:#fff; color:var(--ink)}
.band .btn.primary:hover{background:#eee}
.band .btn.secondary{border-color:#4a4839; color:#fff}
.band .btn.secondary:hover{border-color:#eae7dc}

/* ---------- table ---------- */
.tbl-wrap{overflow-x:auto; margin:18px 0}
table.matrix{width:100%; border-collapse:collapse; font-size:14px; min-width:560px}
table.matrix th, table.matrix td{border:1px solid var(--border); padding:9px 12px; text-align:left}
table.matrix th{background:var(--surface2); font-weight:700}
table.matrix td.yes{color:var(--good); font-weight:700; text-align:center}
table.matrix td.no{color:var(--dim); text-align:center}

/* ---------- link list (docs / get-involved) ---------- */
.linklist{list-style:none; margin:20px 0 0; padding:0; display:flex; flex-direction:column; gap:10px}
.linklist li{margin:0}
.linklist a.reslink{display:block; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-sm); padding:14px 16px; color:var(--ink); font-weight:700}
.linklist a.reslink:hover{border-color:var(--accent); text-decoration:none}
.linklist a.reslink span.desc{display:block; font-weight:400; color:var(--muted); font-size:13.5px; margin-top:3px}
.linklist a.reslink code{font-size:12.5px}

/* ---------- changelog ---------- */
.entry{padding:22px 0; border-top:1px solid var(--border)}
.entry:first-child{border-top:none; padding-top:0}
.entry .ver{font-family:var(--mono); font-weight:700; color:var(--ink); font-size:15px}
.entry .date{color:var(--dim); font-size:13px; margin-left:8px}

/* ---------- footer ---------- */
footer.site{border-top:1px solid var(--border); padding:38px 0 46px; margin-top:20px}
footer.site .cols{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:26px}
footer.site h4{font-size:12.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--dim); margin:0 0 10px}
footer.site ul{list-style:none; margin:0; padding:0}
footer.site li{margin:0 0 8px}
footer.site a{color:var(--muted); font-size:14px}
footer.site a:hover{color:var(--ink)}
footer.site .fbrand{font-weight:800; color:var(--ink); margin-bottom:8px}
footer.site .fine{color:var(--dim); font-size:12.5px; margin-top:26px}
@media (max-width:640px){
  footer.site .cols{grid-template-columns:1fr 1fr}
}

.pillrow{display:flex; gap:8px; flex-wrap:wrap; margin:18px 0 0}
.pill{border:1px solid var(--border-strong); border-radius:999px; padding:4px 12px; font-size:12.5px; color:var(--muted)}

.pullquote{font-size:20px; font-weight:650; color:var(--ink); border-left:3px solid var(--accent); padding:4px 0 4px 20px; margin:22px 0; max-width:60ch}

.skiplink{position:absolute; left:-999px; top:0; background:var(--ink); color:#fff; padding:10px 16px; border-radius:0 0 8px 0}
.skiplink:focus{left:0}

/* "Sign in" link in the top nav: points at /console/ (the fleet console is
   served beside this site, see deploy/aws/nginx/yantrafleet.conf.template) */
nav.top a.signin{font-weight:700; border:1.5px solid var(--ink); padding:6px 14px; border-radius:999px}
nav.top a.signin:hover{background:var(--ink); color:#fff; text-decoration:none}

/* ================================================================
   "Try it with a live fleet" — the primary call to action
   ================================================================
   The markup underneath this is a plain <form method="post">; these
   rules must never be what makes it usable. Nothing here hides the
   button, sets pointer-events, or depends on a JS-applied class to
   become visible — the only state attribute involved
   (data-demo-state) is cosmetic. See marketing/assets/demo.js.
   ================================================================ */
.demo{margin:28px 0 6px}
.demoform{margin:0}
.btn.big{font-size:16px; padding:15px 28px; box-shadow:0 1px 0 rgba(0,0,0,.06)}
.btn:disabled{opacity:.55; cursor:not-allowed}
.btn.primary:disabled:hover{background:var(--ink)}
.demonote{margin:12px 0 0; font-size:13.5px; color:var(--muted); max-width:58ch}
/* :empty keeps the live region in the DOM (so screen readers are already
   watching it) without leaving a blank gap on the page. */
.demostatus{margin:10px 0 0; font-size:14px; font-weight:600; max-width:58ch}
.demostatus:empty{display:none}
.demostatus.ok{color:var(--good)}
.demostatus.warn{color:var(--warn)}

/* ================================================================
   Conformance page bits
   ================================================================ */
/* The 52-check catalogue, printed straight from the rule set that
   `yantra-conform checks --json` emits. */
table.checks{width:100%; border-collapse:collapse; font-size:13.5px; min-width:680px}
table.checks th, table.checks td{border:1px solid var(--border); padding:8px 11px; text-align:left; vertical-align:top}
table.checks th{background:var(--surface2); font-weight:700; position:sticky; top:0}
table.checks td.id{font-family:var(--mono); font-size:12.5px; white-space:nowrap; color:var(--ink)}
table.checks td.ref{font-size:12.5px; color:var(--dim); white-space:nowrap}
.sev{display:inline-block; border-radius:999px; padding:1px 9px; font-size:11.5px; font-weight:800; letter-spacing:.03em; text-transform:uppercase}
.sev.critical{background:#fdeaea; color:#a12020; border:1px solid #f3c9c9}
.sev.major{background:#fdf1e0; color:#8a5606; border:1px solid #f0dcb8}
.sev.minor{background:#eef2f8; color:#3d5679; border:1px solid #d6dfec}
.sev.info{background:var(--surface2); color:var(--dim); border:1px solid var(--border)}

/* "how it fails in the real world" list */
.failmodes{list-style:none; margin:22px 0 0; padding:0; display:grid; gap:14px}
.failmodes li{margin:0; background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--warn); border-radius:var(--r-sm); padding:15px 18px}
.failmodes h3{font-size:15.5px; margin:0 0 5px}
.failmodes p{margin:0; font-size:14.5px; color:var(--muted)}
.failmodes p + p{margin-top:8px}
.failmodes code{font-size:12.5px}

/* small "on this page" jump list */
.toc{background:var(--surface2); border:1px solid var(--border); border-radius:var(--r); padding:16px 20px; margin:24px 0 0}
.toc p{margin:0 0 8px; font-size:12.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--dim)}
.toc ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px 18px}
.toc li{margin:0; font-size:14px}

/* anchored section headings on long pages */
h2[id], h3[id]{scroll-margin-top:78px}

/* ================================================================
   Site search (search.html)
   ================================================================ */
.searchbox{display:flex; gap:10px; flex-wrap:wrap; margin:22px 0 0}
.searchbox input[type=search]{flex:1 1 320px; font:16px/1.4 var(--font); color:var(--ink); background:var(--surface); border:1px solid var(--border-strong); border-radius:999px; padding:12px 20px}
.searchbox input[type=search]:focus{outline:2px solid var(--accent); outline-offset:1px}
.results{list-style:none; margin:26px 0 0; padding:0; display:grid; gap:12px}
.results li{margin:0}
.results a{display:block; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-sm); padding:14px 16px; color:var(--ink); font-weight:700}
.results a:hover{border-color:var(--accent); text-decoration:none}
.results a span.desc{display:block; font-weight:400; color:var(--muted); font-size:13.5px; margin-top:3px}
.noresults{margin:26px 0 0; color:var(--muted)}
table.checks tr.cathead th{background:var(--ink); color:#fff; font-size:13px; letter-spacing:.03em; position:static}
table.checks tr.cathead .catcount{font-weight:400; color:#b8b4a6; margin-left:8px}
table.checks .exp{display:block; color:var(--muted); font-size:13px; margin-top:3px; font-weight:400}