/* STRATA — marketing site + owner dashboard. Dark, committed (single look).
   Family design language: industrial surfaces, one hazard accent, hairlines,
   tabular numerics. */
:root {
  --canvas: #0A0E14;
  --surface: #111823;
  --surface-2: #18212F;
  --hairline: #243040;
  --hairline-2: #31415a;
  --text: #E7EEF6;
  --muted: #8595A8;
  --faint: #5D6B7E;
  --hazard: #F6A623;
  --safe: #37D39B;
  --blue: #4C8DFF;
  --red: #F04A5B;
  --display: "Space Grotesk", system-ui, sans-serif;
  --body: "Inter", system-ui, -apple-system, sans-serif;
  --mono-f: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --maxw: 1160px;
  --r: 14px;
}
* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--canvas); color: var(--text);
  font: 15px/1.55 var(--body);
  -webkit-font-smoothing: antialiased;
}
.mono { font-family: var(--mono-f); }
.muted { color: var(--muted); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* ---------- shared chrome ---------- */
.topbar {
  display: flex; align-items: center; gap: 26px;
  max-width: var(--maxw); margin: 0 auto; padding: 18px 22px;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  font: 700 19px var(--display); letter-spacing: 0.14em;
}
.brand-mark {
  width: 22px; height: 22px; border-radius: 5px;
  background: linear-gradient(180deg, var(--hazard) 0 34%, #7a5310 34% 66%, #3a3125 66%);
  box-shadow: 0 0 0 1px var(--hairline-2);
}
.topbar nav { display: flex; gap: 20px; margin-left: auto; }
.topbar nav a { color: var(--muted); font-size: 14px; }
.topbar nav a:hover { color: var(--text); }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--hairline-2); border-radius: 10px;
  padding: 9px 16px; font: 600 13.5px var(--body); color: var(--text);
  background: var(--surface); cursor: pointer;
}
.btn:hover { border-color: var(--hazard); }
.btn-primary { background: var(--hazard); border-color: var(--hazard); color: #14100a; }
.btn-primary:hover { filter: brightness(1.07); }
.btn.is-off, .btn-primary.is-off {
  background: var(--surface-2); border-color: var(--hairline); color: var(--faint);
  cursor: not-allowed; position: relative;
}
.eyebrow {
  display: flex; align-items: center; gap: 8px;
  font: 600 11px var(--mono-f); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--hazard);
}
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--hazard); }

/* ---------- hero ---------- */
.hero {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 44px; align-items: center;
  max-width: var(--maxw); margin: 0 auto; padding: 56px 22px 70px;
}
.hero h1 {
  font: 700 clamp(34px, 4.6vw, 54px)/1.06 var(--display);
  letter-spacing: -0.02em; margin: 14px 0 18px;
}
.hero .lede { color: var(--muted); font-size: 16.5px; max-width: 56ch; }
.hero-ctas { display: flex; gap: 12px; margin-top: 26px; flex-wrap: wrap; }
.hero-facts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
.hero-facts span {
  font-size: 11px; color: var(--muted); letter-spacing: 0.06em;
  border: 1px solid var(--hairline); border-radius: 999px; padding: 5px 11px;
}
.hero-shot img, .prod-shot img, .gallery img {
  border-radius: var(--r); border: 1px solid var(--hairline-2);
  box-shadow: 0 30px 80px -30px rgba(0,0,0,0.8);
}
.hero-shot figcaption, .gallery figcaption {
  margin-top: 8px; font-size: 11px; color: var(--faint);
}

/* ---------- product sections ---------- */
.prod {
  position: relative;
  border-top: 1px solid var(--hairline);
  padding: 64px 22px;
}
.prod:nth-of-type(even) { background: var(--surface); }
.prod-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
  max-width: var(--maxw); margin: 0 auto;
}
.prod:nth-of-type(even) .prod-grid { direction: rtl; }
.prod:nth-of-type(even) .prod-grid > * { direction: ltr; }
.prod h2 { font: 700 32px var(--display); margin: 12px 0 4px; }
.prod .tagline { color: var(--hazard); font: 600 16px var(--body); margin-bottom: 12px; }
.prod .body { color: var(--muted); max-width: 58ch; }
.caps { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 9px; }
.cap {
  border: 1px solid var(--hairline); border-radius: 10px;
  padding: 9px 12px; background: rgba(255,255,255,0.015);
}
.cap b { font-size: 13.5px; }
.cap span { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.cap.is-off { opacity: 0.5; border-style: dashed; }
.cap.is-off b { color: var(--faint); }
.cap-tag {
  float: right; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--faint); border: 1px solid var(--hairline); border-radius: 6px;
  padding: 2px 7px; font-style: normal;
}
.prod-ctas { display: flex; align-items: center; gap: 14px; margin-top: 22px; flex-wrap: wrap; }
.gate-note { font-size: 11px; color: var(--faint); }
.gallery {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  max-width: var(--maxw); margin: 34px auto 0;
}

/* disabled product: grayscale + ribbon; links are already stripped server-side */
.prod-off .prod-grid, .prod-off .gallery { filter: grayscale(1) brightness(0.72); opacity: 0.75; }
.ribbon {
  position: absolute; top: 22px; right: -46px; transform: rotate(38deg);
  background: var(--surface-2); color: var(--faint);
  border: 1px solid var(--hairline-2);
  font-size: 10.5px; letter-spacing: 0.22em; padding: 6px 54px; z-index: 2;
}

/* ---------- architecture / proof / footer ---------- */
.arch, .proof { border-top: 1px solid var(--hairline); padding: 60px 22px; }
.arch h2, .proof h2 { font: 700 26px var(--display); max-width: var(--maxw); margin: 0 auto 26px; }
.arch-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  max-width: var(--maxw); margin: 0 auto;
}
.arch-grid > div {
  border: 1px solid var(--hairline); border-radius: var(--r);
  background: var(--surface); padding: 20px;
}
.arch-grid h3 { font: 600 16px var(--display); margin-bottom: 8px; }
.arch-grid p { color: var(--muted); font-size: 13.5px; }
.proof { background: var(--surface); }
.proof-band {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px;
  max-width: var(--maxw); margin: 0 auto;
}
.proof-band span {
  border: 1px solid var(--hairline-2); border-left: 3px solid var(--safe);
  border-radius: 10px; padding: 13px 15px; font-size: 12px; color: var(--muted);
}
.proof-band b { color: var(--text); font-size: 15px; }
footer.site-footer {
  max-width: var(--maxw); margin: 0 auto; padding: 40px 22px 44px;
  color: var(--faint); font-size: 13px; border-top: 1px solid var(--hairline);
}
footer a { color: var(--muted); }
footer a:hover { color: var(--hazard); }
.foot-grid {
  display: grid; gap: 28px;
  grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr));
}
.foot-grid > * { min-width: 0; }
.foot-brand .brand { margin-bottom: 10px; }
.foot-brand p { max-width: 34ch; line-height: 1.55; }
.foot-6wv { margin-top: 10px; font-size: 11.5px; letter-spacing: 0.04em; }
.foot-col h4 {
  font-size: 11px; letter-spacing: 0.14em; color: var(--faint);
  margin-bottom: 12px; font-weight: 600;
}
.foot-col ul { list-style: none; display: grid; gap: 8px; }
.foot-legal {
  margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--hairline);
  display: grid; gap: 8px; font-size: 12px; line-height: 1.55;
}
.foot-legal p { max-width: 88ch; }
@media (max-width: 960px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } }
@media (max-width: 440px) { .foot-grid { grid-template-columns: 1fr; gap: 20px; } }

/* legal pages */
.legal-body {
  max-width: 760px; margin: 0 auto; padding: 6px 22px 60px;
  color: var(--muted); line-height: 1.65; font-size: 14.5px;
}
.legal-body h2 {
  font: 600 17px var(--display); color: var(--text);
  margin: 28px 0 8px;
}
.legal-body p + p { margin-top: 10px; }
.legal-updated { font-size: 11.5px; color: var(--faint); }
.legal-body .mono { font-size: 13px; }

/* ---------- owner: login ---------- */
.admin-body { background: var(--canvas); }
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.login {
  width: min(92vw, 360px); display: grid; gap: 12px;
  background: var(--surface); border: 1px solid var(--hairline-2);
  border-radius: 16px; padding: 28px;
}
.login .brand { justify-content: center; font-size: 15px; }
.login input {
  background: var(--canvas); color: var(--text);
  border: 1px solid var(--hairline-2); border-radius: 10px;
  padding: 11px 13px; font: 15px var(--mono-f); letter-spacing: 2px; text-align: center;
}
.login input:focus { outline: none; border-color: var(--hazard); }
.login-err { min-height: 1em; color: var(--red); font-size: 12px; text-align: center; }

/* ---------- owner: dashboard ---------- */
.admin-top { border-bottom: 1px solid var(--hairline); }
.admin-top .auto { margin-left: 0; color: var(--muted); font-size: 12px; display: flex; gap: 6px; align-items: center; }
.admin { max-width: var(--maxw); margin: 0 auto; padding: 20px 22px 60px; display: grid; gap: 16px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.tile {
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: 12px; padding: 13px 15px;
}
.tile b { display: block; font-size: 22px; font-weight: 600; }
.tile span { font-size: 10.5px; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; }
.tile i { display: block; font-size: 10px; color: var(--faint); font-style: normal; }
.card {
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--r); padding: 16px 18px;
  min-width: 0;   /* grid children must shrink so wide tables scroll inside, not blow out */
}
.admin > *, .two-col > * { min-width: 0; }
.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.card-head h3 { font: 600 15px var(--display); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.chart { width: 100%; height: auto; display: block; }
.chart .grid { stroke: var(--hairline); stroke-width: 1; }
.chart .ax { fill: var(--faint); font: 10px var(--mono-f); }
.chart .dl { fill: var(--muted); font: 600 11px var(--mono-f); }
.chart .bar:hover { filter: brightness(1.25); }
.chart .crosshair { stroke: var(--hairline-2); stroke-width: 1; }
.chart-note { margin-top: 6px; font-size: 10.5px; color: var(--faint); }
.legend { display: flex; gap: 14px; font-size: 11px; color: var(--muted); }
.legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; }
.hbars { display: grid; gap: 7px; }
.hbar { display: grid; grid-template-columns: 150px 1fr 44px; gap: 10px; align-items: center; }
.hbar-label { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar-track { height: 12px; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
.hbar-track i { display: block; height: 100%; background: #C77A00; border-radius: 0 4px 4px 0; }
.hbar-val { font-size: 11.5px; text-align: right; }
.dev-chips { display: flex; gap: 10px; flex-wrap: wrap; }
.dev {
  border: 1px solid var(--hairline-2); border-radius: 999px;
  padding: 7px 14px; font-size: 12px; color: var(--muted);
}
.dev b { color: var(--text); margin-right: 5px; }
.tbl-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.tbl th {
  text-align: left; font: 600 10px var(--mono-f); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--faint);
  border-bottom: 1px solid var(--hairline-2); padding: 6px 10px 6px 0;
}
.tbl td { border-bottom: 1px solid var(--hairline); padding: 6px 10px 6px 0; color: var(--muted); }
.tbl .ua { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* flags */
.flag-group { border-top: 1px solid var(--hairline); padding: 10px 0 4px; }
.flag-group:first-of-type { border-top: 0; }
.flag-group h4 { font-size: 10.5px; letter-spacing: 0.12em; color: var(--faint); text-transform: uppercase; margin-bottom: 6px; }
.flag-row {
  display: flex; align-items: center; gap: 12px;
  padding: 6px 0; cursor: pointer; font-size: 13px; color: var(--muted);
}
.flag-row span { flex: 1; }
.flag-row input { display: none; }
.switch {
  width: 34px; height: 19px; border-radius: 999px; background: var(--surface-2);
  border: 1px solid var(--hairline-2); position: relative; transition: background 0.15s;
}
.switch::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px;
  border-radius: 50%; background: var(--faint); transition: transform 0.15s, background 0.15s;
}
.flag-row input:checked + .switch { background: rgba(55,211,155,0.25); border-color: var(--safe); }
.flag-row input:checked + .switch::after { transform: translateX(15px); background: var(--safe); }

.tip {
  position: fixed; z-index: 30; pointer-events: none;
  background: #0c1119; border: 1px solid var(--hairline-2); border-radius: 8px;
  padding: 6px 10px; font-size: 11px; color: var(--text);
  box-shadow: 0 10px 30px -10px rgba(0,0,0,0.8);
}

/* ---------- responsive ---------- */
@media (max-width: 940px) {
  .hero, .prod-grid { grid-template-columns: 1fr; gap: 26px; }
  .prod:nth-of-type(even) .prod-grid { direction: ltr; }
  .arch-grid, .gallery { grid-template-columns: 1fr; }
  .two-col { grid-template-columns: 1fr; }
  .topbar nav { display: none; }
  .hbar { grid-template-columns: 110px 1fr 40px; }
}

/* ---------- Twinsmith multi-sector additions ---------- */
.topbar nav a.on { color: var(--hazard); }
.sectors { border-top: 1px solid var(--hairline); padding: 56px 22px; }
.sectors h2 { font: 700 26px var(--display); max-width: var(--maxw); margin: 0 auto 24px; }
.sector-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px;
  max-width: var(--maxw); margin: 0 auto;
}
.sector-tile {
  display: flex; flex-direction: column; gap: 8px;
  border: 1px solid var(--hairline); border-radius: var(--r);
  background: var(--surface); padding: 20px; transition: border-color 0.15s;
}
.sector-tile:hover { border-color: var(--hazard); }
.sector-tile h3 { font: 600 17px var(--display); }
.sector-tile p { color: var(--muted); font-size: 13px; flex: 1; }
.sector-meta { font-size: 10.5px; color: var(--faint); letter-spacing: 0.06em; }
.sector-go { font-size: 11.5px; color: var(--hazard); }
.sector-head { max-width: var(--maxw); margin: 0 auto; padding: 44px 22px 8px; }
.sector-head h1 { font: 700 clamp(28px, 3.6vw, 42px) var(--display); margin: 12px 0 12px; }
.sector-head .lede { color: var(--muted); max-width: 64ch; }
.sector-body { max-width: var(--maxw); margin: 0 auto; padding: 24px 22px 48px; }
.portfolio-head { font: 700 24px var(--display); margin: 8px 0 4px; }
.group-head {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--hazard); margin: 26px 0 12px;
}
.tcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.tcard {
  display: flex; flex-direction: column; gap: 9px;
  border: 1px solid var(--hairline); border-radius: 12px;
  background: var(--surface); padding: 16px;
}
.tcard-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.tcard h3 { font: 600 15.5px var(--display); }
.tcard p { color: var(--muted); font-size: 12.5px; flex: 1; }
.tcard .tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tcard .tag {
  font-size: 10px; color: var(--faint); letter-spacing: 0.05em;
  border: 1px solid var(--hairline); border-radius: 6px; padding: 2px 7px;
}
.tcard .go { font-size: 11px; color: var(--hazard); }
.tcard.is-off { filter: grayscale(1) brightness(0.75); opacity: 0.65; border-style: dashed; }
.badge {
  font: 600 9.5px var(--mono-f); letter-spacing: 0.1em; text-transform: uppercase;
  border-radius: 6px; padding: 3px 8px; white-space: nowrap;
}
.badge.live { color: var(--safe); background: rgba(55,211,155,0.12); }
.badge.prev { color: var(--blue); background: rgba(76,141,255,0.12); }
.badge.plan { color: var(--faint); background: var(--surface-2); }

/* ---- stealth mode: redacted panels (content is block glyphs server-side;
   the blur is cosmetic — the real text is not in the markup) ---- */
.redact {
  filter: blur(4px);
  user-select: none;
  color: var(--faint);
  letter-spacing: -0.5px;
  overflow-wrap: anywhere;
}
.tcard.is-stealth { border-style: dashed; }
.tcard.is-stealth .tag.redact { border-color: var(--hairline); }
.prod.is-stealth h2.redact { filter: blur(7px); }
.stealth-shot {
  min-height: 240px;
  border: 1px dashed var(--hairline);
  border-radius: 12px;
  background:
    repeating-linear-gradient(135deg, transparent 0 14px, rgba(76, 141, 255, 0.04) 14px 28px),
    var(--surface);
}