/* BASE (shared) — split from sovereignty.css for autonomous-loop per-site isolation (2026-07-19) */

/* ============================================================
   Sovereignty homepage layer — studio.cichocki.com design system.
   Scoped to .sov-* so it never collides with the existing .ts-* bundle.
   Loaded as a file (threadsync CSP blocks inline <style>).
   ============================================================ */
.sov{
  --sov-bg:#0A0B0F; --sov-panel:#0F1419; --sov-surface:#141A24; --sov-panel-alt:#0C0E14;
  --sov-ink:#E8EAF0; --sov-muted:#9CA3B4; --sov-muted2:#6B7280; --sov-line:#1A1E2E;
  --sov-accent:#10B981; --sov-accent2:#34D399; --sov-accent-dim:rgba(16,185,129,.14);
  --sov-accent-border:rgba(16,185,129,.30);
  --sov-r-xs:8px; --sov-r-sm:12px; --sov-r-md:16px;
  --sov-sans:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --sov-serif:'Playfair Display',Georgia,serif;
  --sov-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  font-family:var(--sov-sans); color:var(--sov-ink);
}
.sov *{box-sizing:border-box}
.sov-wrap{max-width:1200px;margin:0 auto;padding:0 max(24px,env(safe-area-inset-left))}
.sov-section{padding:76px 0;border-top:1px solid var(--sov-line)}
.sov-eyebrow{font-family:var(--sov-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--sov-accent2)}
.sov h2.sov-h{font-family:var(--sov-serif);font-weight:700;font-size:clamp(26px,3.4vw,38px);
  line-height:1.12;letter-spacing:0;margin:12px 0 14px}
.sov p.sov-lead{color:var(--sov-muted);font-size:clamp(15px,1.5vw,18px);line-height:1.6;max-width:64ch;margin:0}

/* Hero */
.sov-hero{position:relative;background:
  radial-gradient(1200px 620px at 78% -16%,rgba(16,185,129,.13) 0%,transparent 60%),
  linear-gradient(180deg,var(--sov-panel-alt),var(--sov-bg));
  padding:clamp(56px,8vw,104px) 0 clamp(48px,6vw,84px);overflow:hidden}
.sov-hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center}
.sov-h1{font-family:var(--sov-serif);font-weight:700;font-size:clamp(34px,5vw,58px);line-height:1.05;
  letter-spacing:-1px;margin:16px 0 18px}
.sov-h1 em{font-style:normal;color:var(--sov-accent2)}
.sov-sub{color:var(--sov-muted);font-size:clamp(16px,1.7vw,20px);line-height:1.55;max-width:60ch}
.sov-cta-row{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 18px}
.sov-btn{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 22px;border-radius:var(--sov-r-xs);
  font-weight:600;font-size:15px;font-family:inherit;cursor:pointer;text-decoration:none;transition:transform .15s,filter .2s,border-color .2s}
.sov-btn-primary{background:linear-gradient(135deg,var(--sov-accent),var(--sov-accent2));color:#04140d;border:0}
.sov-btn-primary:hover{filter:brightness(1.07);transform:translateY(-1px)}
.sov-btn-ghost{background:var(--sov-surface);border:1px solid var(--sov-line);color:var(--sov-ink)}
.sov-btn-ghost:hover{border-color:var(--sov-accent-border)}
.sov-tertiary{display:inline-block;margin-top:4px;color:var(--sov-accent2);font-size:14px;text-decoration:none}
.sov-tertiary:hover{text-decoration:underline}
.sov-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.sov-chip{font-family:var(--sov-mono);font-size:12px;color:var(--sov-muted);background:var(--sov-panel);
  border:1px solid var(--sov-line);border-radius:999px;padding:6px 12px}
/* Island/bridge diagram */
.sov-diagram{background:var(--sov-panel);border:1px solid var(--sov-line);border-radius:var(--sov-r-md);
  padding:22px;display:flex;flex-direction:column;gap:14px;box-shadow:0 18px 50px rgba(0,0,0,.4)}
.sov-node{border:1px solid var(--sov-line);border-radius:var(--sov-r-sm);padding:14px 16px;background:var(--sov-panel-alt)}
.sov-node.is-island{border-color:var(--sov-accent-border);background:linear-gradient(180deg,var(--sov-accent-dim),transparent)}
.sov-node b{display:block;font-size:14px;margin-bottom:3px}
.sov-node span{color:var(--sov-muted);font-size:12.5px;line-height:1.5}
.sov-node .sov-tag{font-family:var(--sov-mono);font-size:10.5px;color:var(--sov-accent2);letter-spacing:.08em;text-transform:uppercase}
.sov-bridge-line{display:flex;align-items:center;gap:10px;color:var(--sov-muted);font-family:var(--sov-mono);
  font-size:11px;text-transform:uppercase;letter-spacing:.1em;justify-content:center}
.sov-bridge-line::before,.sov-bridge-line::after{content:"";height:1px;flex:1;background:var(--sov-line)}

/* Cards */
.sov-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:26px}
.sov-card{background:var(--sov-panel);border:1px solid var(--sov-line);border-radius:var(--sov-r-md);padding:22px 20px}
.sov-card h3{font-size:16px;font-weight:600;margin:0 0 8px}
.sov-card p{color:var(--sov-muted);font-size:14px;line-height:1.55;margin:0}
.sov-card .sov-kicker{font-family:var(--sov-mono);font-size:11px;color:var(--sov-accent2);text-transform:uppercase;letter-spacing:.08em}
.sov-card--accent{border-color:var(--sov-accent-border)}

/* Products */
.sov-prod{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:26px}
.sov-prod .sov-card h3{font-size:18px;display:flex;align-items:center;gap:8px}
.sov-prod .sov-card .sov-link{display:inline-block;margin-top:12px;color:var(--sov-accent2);font-size:14px;text-decoration:none;font-weight:600}
.sov-prod .sov-card .sov-link:hover{text-decoration:underline}

/* Proof pills */
.sov-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.sov-pill{font-family:var(--sov-mono);font-size:12px;color:var(--sov-ink);background:var(--sov-panel);
  border:1px solid var(--sov-accent-border);border-radius:999px;padding:7px 13px}

/* Steps */
.sov-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:24px}
.sov-step{background:var(--sov-panel);border:1px solid var(--sov-line);border-radius:var(--sov-r-md);padding:20px}
.sov-step b{display:block;font-size:15px;margin-bottom:6px}
.sov-step p{color:var(--sov-muted);font-size:14px;line-height:1.5;margin:0}

/* Final CTA */
.sov-final{background:radial-gradient(900px 400px at 50% 120%,rgba(16,185,129,.12),transparent 60%),var(--sov-panel-alt);
  text-align:center}
.sov-final .sov-cta-row{justify-content:center}

@media(max-width:820px){
  .sov-hero-grid{grid-template-columns:1fr;gap:28px}
  .sov-section{padding:52px 0}
}
@media(prefers-reduced-motion:reduce){.sov *{transition:none!important}}

/* Three-node diagram states */
.sov-node.is-bridge{border-color:rgba(52,211,153,.22)}
.sov-node.is-provider{opacity:.92}
.sov-node.is-provider .sov-tag{color:var(--sov-muted)}

/* Anatomy-of-a-request flow (the signature "demonstrate" section) */
.sov-anatomy{background:linear-gradient(180deg,var(--sov-panel-alt),var(--sov-bg))}
.sov-flow{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-direction:column;gap:14px;counter-reset:none}
.sov-flow-step{display:grid;grid-template-columns:44px 1fr;gap:16px;align-items:start;
  background:var(--sov-panel);border:1px solid var(--sov-line);border-radius:var(--sov-r-md);padding:18px 18px}
.sov-flow-step{position:relative}
.sov-flow-step:not(:last-child)::after{content:"";position:absolute;left:39px;bottom:-15px;height:15px;width:2px;background:var(--sov-line)}
.sov-step-num{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-family:var(--sov-mono);
  font-size:14px;font-weight:500;color:var(--sov-accent2);background:var(--sov-accent-dim);border:1px solid var(--sov-accent-border)}
.sov-flow-body b{font-size:15px;display:block;margin-bottom:3px}
.sov-flow-body p{color:var(--sov-muted);font-size:14px;line-height:1.55;margin:0 0 10px}
.sov-code{font-family:var(--sov-mono);font-size:12.5px;line-height:1.6;color:var(--sov-ink);
  background:var(--sov-panel-alt);border:1px solid var(--sov-line);border-radius:var(--sov-r-xs);
  padding:12px 14px;margin:0;overflow-x:auto;white-space:pre-wrap;word-break:break-word}
.sov-code-ok{color:var(--sov-accent2)}

/* Lift on-ramp band */
.sov-onramp{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-top:16px;padding:20px 22px;background:var(--sov-panel);border:1px dashed var(--sov-accent-border);border-radius:var(--sov-r-md)}
.sov-onramp h3{font-size:17px;margin:4px 0 6px}
.sov-onramp p{color:var(--sov-muted);font-size:14px;line-height:1.5;margin:0;max-width:60ch}
.sov-onramp .sov-kicker{font-family:var(--sov-mono);font-size:11px;color:var(--sov-accent2);text-transform:uppercase;letter-spacing:.08em}

/* explicit focus rings (don't depend on the global bundle) */
.sov a:focus-visible,.sov-btn:focus-visible{outline:2px solid var(--sov-accent);outline-offset:2px;border-radius:6px}

/* lead utilities (replaces inline style= for CSP-hardening) */
.sov-lead.ink{color:var(--sov-ink)}
.sov-lead.tight{margin-top:14px}
.sov-lead.tight-lg{margin-top:22px}
.sov-lead.tight-sm{margin-top:12px}
.sov-lead.center{margin-left:auto;margin-right:auto}

/* ── Conversion layer (first-screen: CTA note, fit line, proof strip, repeated CTAs) ── */
.sov-cta-note{margin:12px 0 0;font-size:13px;color:var(--sov-muted)}
.sov-fit{margin:18px 0 0;font-size:13px;line-height:1.55;color:var(--sov-muted);
  padding-top:16px;border-top:1px solid var(--sov-line);max-width:56ch}
.sov-cta-mid{margin-top:26px}
.sov-proof-strip{border-top:1px solid var(--sov-line);border-bottom:1px solid var(--sov-line);
  background:var(--sov-panel-alt)}
.sov-proof-strip .sov-wrap{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding-top:14px;padding-bottom:14px}
.sov-proof-strip span{font-family:var(--sov-mono);font-size:12px;color:var(--sov-muted);white-space:nowrap}
.sov-proof-strip .sov-proof-label{color:var(--sov-accent2);text-transform:uppercase;letter-spacing:.08em;font-size:11px}

/* ============================================================
   UI + SPACING PASS (Codex deep-dive) — shared by both sites.
   Cichocki hero width uses .sov-hero-narrow (NOT .sov-wrap>div)
   so it never touches threadsync's 2-col hero grid.
   ============================================================ */
.sov-cards,.sov-prod{grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:20px;margin-top:32px}
.sov-card{padding:24px 22px}
.sov-prod .sov-card{display:flex;flex-direction:column;min-height:100%}
.sov-prod .sov-card .sov-link{margin-top:auto;padding-top:16px}

.sov-section{padding:88px 0;border-top:1px solid rgba(232,234,240,.07)}
.sov-hero + .sov-section{padding-top:72px}
.sov-final{padding-bottom:96px;border-bottom:1px solid rgba(232,234,240,.07)}

.sov-flow{position:relative;max-width:880px;margin:34px 0 0;gap:16px}
.sov-flow::before{content:"";position:absolute;left:40px;top:28px;bottom:28px;width:1px;
  background:linear-gradient(180deg,transparent,var(--sov-line) 12%,var(--sov-line) 88%,transparent);pointer-events:none}
.sov-flow-step{grid-template-columns:36px 1fr;gap:18px;padding:20px 22px}
.sov-flow-step:not(:last-child)::after{display:none}
.sov-step-num{position:relative;z-index:1;width:36px;height:36px}
.sov-flow-body p{margin:0}

.sov-eyebrow{display:block;line-height:1.35;letter-spacing:.12em}
.sov-hero{padding:clamp(68px,8vw,104px) 0 clamp(56px,5vw,72px)}
.sov-hero-narrow{max-width:780px}
.sov-h1{margin:14px 0 16px;line-height:1.06;letter-spacing:0}
.sov-sub{max-width:58ch;margin:0}
.sov-cta-row{gap:12px 14px;margin:28px 0 0}
.sov-cta-note{margin:14px 0 0;line-height:1.5;max-width:62ch}
.sov-chips{gap:10px;margin-top:18px}

@media(max-width:820px){
  .sov-section{padding:60px 0}
  .sov-hero + .sov-section{padding-top:56px}
}
@media(max-width:560px){
  .sov-section{padding:46px 0}
  .sov-wrap{padding:0 18px}
  .sov-hero{padding:52px 0 46px}
  .sov h2.sov-h{margin:10px 0 12px;line-height:1.16;letter-spacing:0}
  .sov-cards,.sov-prod{grid-template-columns:1fr;gap:14px;margin-top:24px}
  .sov-card{padding:20px 18px}
  .sov-cta-row{flex-direction:column;align-items:stretch;gap:10px}
  .sov-btn{width:100%;justify-content:center;min-height:50px;padding:0 16px;text-align:center;line-height:1.2}
  .sov-chip,.sov-pill{line-height:1.25}
}
.sov-mini-note{margin:10px 0 0;font-size:12.5px;line-height:1.5;color:var(--sov-muted2)}

/* Centered sections: constrained-width children must center themselves (max-width + text-align:center
   otherwise leaves them left-anchored). Fixes the off-center final CTA. */
.sov-final h2.sov-h,.sov-final p.sov-lead,.sov-final .sov-sub{margin-left:auto;margin-right:auto}
/* ============================================================
   Premium-enterprise depth pass — shared .sov layer
   ============================================================ */
.sov{
  --sov-line-soft:rgba(232,234,240,.075);
  --sov-line-lit:rgba(232,234,240,.145);
  --sov-line-deep:rgba(0,0,0,.42);
  --sov-hi:rgba(255,255,255,.075);
  --sov-hi-soft:rgba(255,255,255,.038);
  --sov-low:rgba(0,0,0,.34);

  --sov-elev-1:0 1px 1px rgba(0,0,0,.28),0 10px 28px rgba(0,0,0,.20);
  --sov-elev-2:0 2px 4px rgba(0,0,0,.30),0 18px 48px rgba(0,0,0,.30);
  --sov-elev-3:0 8px 16px rgba(0,0,0,.34),0 28px 80px rgba(0,0,0,.42);
  --sov-elev-focus:0 0 0 1px rgba(52,211,153,.28),0 18px 50px rgba(0,0,0,.34);

  --sov-surface-grad:
    radial-gradient(700px 220px at 16% 0%,rgba(255,255,255,.045),transparent 58%),
    linear-gradient(180deg,rgba(255,255,255,.034),rgba(255,255,255,.012) 38%,rgba(0,0,0,.08) 100%),
    var(--sov-panel);
  --sov-surface-grad-accent:
    radial-gradient(620px 240px at 10% 0%,rgba(16,185,129,.13),transparent 54%),
    linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012) 42%,rgba(0,0,0,.10)),
    var(--sov-panel);
}

.sov-section{
  border-top-color:var(--sov-line-soft);
  background:
    radial-gradient(900px 360px at 50% -180px,rgba(255,255,255,.018),transparent 62%),
    transparent;
}

.sov-anatomy{
  background:
    radial-gradient(900px 360px at 18% -80px,rgba(16,185,129,.055),transparent 64%),
    linear-gradient(180deg,var(--sov-panel-alt),var(--sov-bg));
}

.sov-final{
  background:
    radial-gradient(900px 400px at 50% 120%,rgba(16,185,129,.13),transparent 60%),
    radial-gradient(760px 260px at 50% 0%,rgba(255,255,255,.026),transparent 66%),
    var(--sov-panel-alt);
}

.sov-card,
.sov-step,
.sov-flow-step,
.sov-onramp,
.sov-diagram,
.sov-code{
  background:var(--sov-surface-grad);
  border-color:var(--sov-line-soft);
  box-shadow:
    inset 0 1px 0 var(--sov-hi),
    inset 0 -1px 0 var(--sov-low),
    var(--sov-elev-1);
}

.sov-card,
.sov-step,
.sov-flow-step,
.sov-onramp,
.sov-diagram{
  position:relative;
  isolation:isolate;
  overflow:hidden;
}

.sov-card::before,
.sov-step::before,
.sov-flow-step::before,
.sov-onramp::before,
.sov-diagram::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(520px 180px at 18% 0%,rgba(255,255,255,.034),transparent 62%),
    radial-gradient(360px 140px at 92% 18%,rgba(16,185,129,.035),transparent 70%);
  opacity:.85;
}

.sov-diagram{
  box-shadow:
    inset 0 1px 0 var(--sov-hi),
    inset 0 -1px 0 var(--sov-low),
    var(--sov-elev-3);
}

.sov-node{
  background:
    linear-gradient(180deg,rgba(255,255,255,.032),rgba(255,255,255,.008) 46%,rgba(0,0,0,.08)),
    var(--sov-panel-alt);
  border-color:var(--sov-line-soft);
  box-shadow:inset 0 1px 0 var(--sov-hi-soft),0 8px 22px rgba(0,0,0,.18);
}

.sov-node.is-island{
  background:
    radial-gradient(420px 140px at 16% 0%,rgba(16,185,129,.16),transparent 62%),
    linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01) 46%,rgba(0,0,0,.10)),
    var(--sov-panel-alt);
}

.sov-chip,
.sov-pill{
  background:linear-gradient(180deg,rgba(255,255,255,.032),rgba(255,255,255,.006)),var(--sov-panel);
  border-color:var(--sov-line-soft);
  box-shadow:inset 0 1px 0 var(--sov-hi-soft),0 6px 16px rgba(0,0,0,.14);
}

.sov-btn{
  transition:transform .16s ease,filter .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease;
}

.sov-btn-primary{
  background:
    linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0) 38%),
    linear-gradient(135deg,var(--sov-accent),var(--sov-accent2));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.36),inset 0 -1px 0 rgba(0,0,0,.20),0 12px 30px rgba(16,185,129,.18);
}

.sov-btn-ghost{
  background:linear-gradient(180deg,rgba(255,255,255,.042),rgba(255,255,255,.012)),var(--sov-surface);
  border-color:var(--sov-line-soft);
  box-shadow:inset 0 1px 0 var(--sov-hi-soft),0 10px 24px rgba(0,0,0,.18);
}

.sov-card:hover,
.sov-step:hover,
.sov-flow-step:hover,
.sov-onramp:hover{
  transform:translateY(-2px);
  border-color:var(--sov-line-lit);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.095),inset 0 -1px 0 var(--sov-low),var(--sov-elev-2);
}

.sov-btn:hover{
  transform:translateY(-1px);
}

.sov-btn:active,
.sov-card:active{
  transform:translateY(0);
}

.sov-btn-primary:active{
  box-shadow:inset 0 1px 2px rgba(0,0,0,.22),0 8px 20px rgba(16,185,129,.13);
}

.sov-btn-ghost:hover{
  border-color:rgba(232,234,240,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 14px 32px rgba(0,0,0,.24);
}

.sov a:focus-visible,
.sov-btn:focus-visible{
  outline:2px solid var(--sov-accent);
  outline-offset:3px;
  box-shadow:var(--sov-elev-focus);
}

@media(prefers-reduced-motion:reduce){
  .sov-btn,
  .sov-card,
  .sov-step,
  .sov-flow-step,
  .sov-onramp{
    transition:none!important;
    transform:none!important;
  }
}
.sov-final .sov-cta-note,.sov-final p{margin-left:auto;margin-right:auto}