/* Sigtake shared site styles. Values mirror the home page (index.html), which keeps its own inline copy. */
@font-face {
  font-family: "Inter";
  src: url("/public/fonts/inter-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Figtree";
  src: url("/public/fonts/figtree-var-latin.woff2") format("woff2");
  font-weight: 300 900;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("/public/fonts/jetbrains-mono-var-latin.woff2") format("woff2");
  font-weight: 100 800;
  font-display: swap;
}

:root {
  --page: #ffffff;
  --panel: #f5f7f9;
  --line: #e3e8ed;
  --ink: #0a0d12;
  --ink-2: #2b3a4d;
  --muted: #56677d;
  --faint: #5b6a7e;
  --teal: #2dd4bf;
  --teal-deep: #0b7d70;
  --teal-ink: #062a26;
  --stage: #e2f6f4;
  --stage-line: #b6e4de;

  --app: #0f1115;
  --app-2: #151a22;
  --app-row: #10141b;
  --app-line: rgba(255, 255, 255, 0.07);
  --app-ink: #f4f6f8;
  --app-text: #b9c4d0;
  --app-muted: #6b7280;
  --critical: #f67171;
  --warning: #fbbf24;
  --routed: #44d4bf;
  --resolved: #42d399;
  --high: #f97316;

  --display: "Figtree", "Inter", system-ui, sans-serif;
  --ui: "Inter", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;

  --gutter: clamp(16px, 3.26vw, 50px);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 400 16px/1.55 var(--ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: rgba(45, 212, 191, .32); color: var(--ink); }
.st-app ::selection { background: rgba(68, 212, 191, .35); color: #fff; }

[hidden] { display: none !important; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--teal-deep);
  outline-offset: 3px;
  border-radius: 8px;
}
h1, h2, h3, p { margin: 0; }
code, .st-mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.st-skip {
  position: absolute; left: 16px; top: -48px; z-index: 100;
  padding: 10px 16px; border-radius: 999px;
  background: var(--ink); color: #fff; font-weight: 600;
  transition: top .15s ease;
}
.st-skip:focus { top: 12px; }

.st-icon {
  width: 1em; height: 1em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

.st-nowrap { white-space: nowrap; }

/* ---------- Nav ---------- */
.st-nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
}
.st-nav.is-scrolled { box-shadow: 0 1px 0 var(--line); }
.st-nav-inner {
  height: clamp(64px, 5.469vw, 84px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 clamp(16px, 3.516vw, 54px) 0 var(--gutter);
}
.st-logo { justify-self: start; display: block; width: clamp(120px, 9.896vw, 152px); }
.st-logo img { width: clamp(114px, 9.245vw, 142px); height: auto; margin: 1px 0 0 clamp(4px, 0.391vw, 6px); }
.st-nav-links {
  display: flex; gap: clamp(24px, 2.604vw, 40px);
  font-size: clamp(15px, 1.042vw, 16px); font-weight: 450; color: var(--ink-2);
  transform: translateX(calc(-34 / 1536 * 100vw));
}
.st-nav-links a { padding: 6px 0; transition: color .15s ease; }
.st-nav-links a:hover { color: var(--ink); }
.st-nav-cta { justify-self: end; display: flex; align-items: center; gap: clamp(18px, 1.953vw, 30px); }
.st-login { font-size: clamp(15px, 1.042vw, 16px); font-weight: 500; color: #5d6c80; }
.st-login:hover { color: var(--ink); }
.st-navtoggle { display: none; }

.st-pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 999px;
  background: var(--teal); color: var(--teal-ink);
  font-weight: 600; letter-spacing: -.005em;
  transition: background-color .18s ease, transform .18s var(--ease-out), box-shadow .18s ease;
  box-shadow: 0 1px 2px rgba(6, 42, 38, .12), 0 4px 14px -6px rgba(6, 42, 38, .3);
}
.st-pill:hover { background: #22c7b2; transform: translateY(-1px); box-shadow: 0 2px 4px rgba(6, 42, 38, .14), 0 10px 22px -10px rgba(6, 42, 38, .4); }
.st-pill:active { transform: translateY(0); }
.st-nav-cta .st-pill { width: clamp(104px, 8.333vw, 128px); height: clamp(40px, 3.125vw, 48px); font-size: clamp(15px, 1.042vw, 16px); }

/* ---------- Links & page header ---------- */
.st-link-arrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 16px; font-weight: 500; color: var(--ink-2);
}
.st-link-arrow .st-icon { font-size: 1em; transition: transform .18s var(--ease-out); }
.st-link-arrow:hover { color: var(--ink); }
.st-link-arrow:hover .st-icon { transform: translateX(3px); }

.st-page-head { padding: clamp(48px, 6vw, 88px) var(--gutter) 0; max-width: 1180px; margin: 0 auto; }
.st-page-head h1 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(38px, 4.4vw, 64px); line-height: 1; letter-spacing: -.04em;
  text-wrap: balance;
}
.st-page-head .st-lede { margin-left: 0; max-width: 62ch; }
.st-page-head.is-center { text-align: center; }
.st-page-head.is-center .st-lede { margin-left: auto; }
.st-crumbs { display: flex; gap: 8px; margin-bottom: 18px; font-size: 13.5px; color: var(--faint); }
.st-crumbs a:hover { color: var(--ink); }
.st-crumbs span[aria-hidden] { color: #b3bdc8; }

/* ---------- Sections ---------- */
.st-panel {
  margin: clamp(24px, 2.214vw, 34px) 14px 0;
  padding-bottom: 72px;
  border-radius: 24px;
  background: var(--panel);
}
.st-sec { padding: 112px var(--gutter) 0; }
.st-sec-head { text-align: center; padding: 64px var(--gutter) 0; max-width: 860px; margin: 0 auto; }
.st-sec .st-sec-head { padding-top: 0; }
.st-sec-head-left { text-align: left; max-width: none; margin: 0; padding-left: calc(var(--gutter) + 18px); padding-right: var(--gutter); }
.st-sec-head-left .st-lede { max-width: 62ch; margin-left: 0; }
.st-h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(30px, 2.65vw, 44px);
  line-height: 1.08;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.st-lede {
  margin: 16px auto 0;
  max-width: 60ch;
  font-size: clamp(16px, 1.15vw, 18px);
  line-height: 1.6;
  color: var(--muted);
  text-wrap: pretty;
}
.st-tag {
  display: inline-flex; align-items: center; height: 22px; padding: 0 9px;
  border-radius: 999px; background: #e8edf2; color: #4b5b6e;
  font: 600 11px/1 var(--ui); letter-spacing: .06em; text-transform: uppercase;
}
.st-tag-teal { background: rgba(68, 212, 191, .16); color: #7be3d3; }
.st-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); display: inline-block; flex: none; }
.st-teal-text { color: var(--teal-deep); }

.st-app-skin {
  background: var(--app);
  color: var(--app-ink);
  border: 1px solid rgba(255, 255, 255, .06);
  box-shadow: 0 2px 6px rgba(9, 30, 36, .1), 0 30px 60px -32px rgba(9, 40, 44, .5);
}
.st-sev {
  display: inline-flex; align-items: center; height: 22px; padding: 0 8px;
  border-radius: 6px; font: 600 11px/1 var(--mono); letter-spacing: .04em;
}
.st-sev-crit { background: rgba(246, 113, 113, .14); color: var(--critical); }
.st-sev-res { background: rgba(66, 211, 153, .14); color: var(--resolved); }

.st-checks { margin: 0; padding: 0; list-style: none; display: grid; gap: 18px; }
.st-checks li {
  position: relative; padding-left: 32px;
  font-size: 15.5px; line-height: 1.55; color: var(--muted);
}
.st-checks li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: rgba(45, 212, 191, .18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b7d70' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.st-checks strong { display: block; color: var(--ink); font-weight: 600; margin-bottom: 2px; }
.st-checks code { font-size: .9em; padding: 1px 5px; border-radius: 5px; background: #eef2f5; color: var(--ink-2); }
/* Footer */
.st-foot { margin: 0 14px 14px; padding: 56px clamp(20px, 4vw, 56px) 28px; border-radius: 24px; background: var(--panel); }
.st-foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
.st-foot-brand p { margin-top: 14px; max-width: 38ch; font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.st-foot nav p { font: 600 13px/1 var(--ui); letter-spacing: .04em; text-transform: uppercase; color: var(--faint); margin-bottom: 14px; }
.st-foot ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.st-foot a { font-size: 15px; color: var(--ink-2); }
.st-foot a:hover { color: var(--ink); }
.st-foot-base { margin-top: 48px; padding-top: 20px; border-top: 1px solid #dde3e9; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 14px; color: var(--faint); }
.st-foot-social { display: flex; gap: 18px; flex-wrap: wrap; }
.st-foot-social a { font-size: 14px; color: var(--faint); }

/* ---------- Responsive ---------- */
.st-menu-only { display: none; }
.st-navtoggle .st-ico-close { display: none; }
.st-navtoggle[aria-expanded="true"] .st-ico-menu { display: none; }
.st-navtoggle[aria-expanded="true"] .st-ico-close { display: inline; }
@media (max-width: 1240px) {
  .st-nav-links { gap: 28px; transform: none; }
  .st-nav-cta { gap: 20px; }
  .st-nav-inner { padding-right: var(--gutter); }
}
@media (max-width: 1100px) {
  .st-nav-inner { height: 68px; grid-template-columns: auto 1fr; }
  .st-logo, .st-logo img { width: 120px; }
  .st-logo img { height: 38px; margin: 0; }
  .st-navtoggle {
    display: inline-grid; place-items: center; width: 44px; height: 44px; margin-right: -8px;
    border: 0; border-radius: 12px; background: none; color: var(--ink); cursor: pointer; font-size: 22px;
  }
  .st-nav-links {
    position: absolute; top: 68px; left: 0; right: 0;
    flex-direction: column; gap: 0;
    padding: 8px var(--gutter) 20px;
    background: #fff; box-shadow: 0 18px 30px -18px rgba(15, 30, 50, .25), 0 1px 0 var(--line);
    font-size: 17px;
  }
  .st-nav-links a { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .st-nav-links a:last-child { border-bottom: 0; }
  .st-js .st-nav-links.st-closed { display: none; }
  .st-menu-only { display: block; }
  .st-login { display: none; }
  .st-nav-cta .st-pill { width: auto; height: 42px; padding: 0 18px; font-size: 15px; }
  html { scroll-padding-top: 68px; }
}
@media (max-width: 1000px) {
  .st-panel, .st-band { margin-left: 8px; margin-right: 8px; }
  .st-foot { margin: 0 8px 8px; }
}

@media (max-width: 760px) {
  .st-sec { padding-top: 80px; }
  .st-panel { padding-bottom: 48px; }
  .st-sec-head { padding-top: 48px; }
  .st-foot-grid { grid-template-columns: 1fr 1fr; }
  .st-foot-brand { grid-column: 1 / -1; }
}
.st-nav-links a { position: relative; }
.st-nav-links a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.st-nav-links a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 2px; background: var(--teal); }
@media (max-width: 1100px) { .st-nav-links a[aria-current="page"]::after { display: none; } .st-nav-links a[aria-current="page"] { color: var(--teal-deep); } }

/* ---------- Legal documents ---------- */
.st-legal { max-width: 760px; margin: 0 auto; padding: clamp(48px, 6vw, 88px) var(--gutter) 96px; }
.st-legal h1 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(36px, 4.2vw, 52px); line-height: 1.04; letter-spacing: -.035em;
}
.st-legal .st-meta { margin: 14px 0 40px; padding-bottom: 28px; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--faint); }
.st-legal h2 {
  margin: 44px 0 12px; scroll-margin-top: 104px;
  font: 700 clamp(20px, 1.7vw, 23px)/1.25 var(--display); letter-spacing: -.015em; color: var(--ink);
}
.st-legal p, .st-legal li { font-size: 16.5px; line-height: 1.72; color: var(--ink-2); }
.st-legal p { margin: 0 0 16px; }
.st-legal ul { margin: 0 0 16px; padding-left: 22px; }
.st-legal li { margin-bottom: 8px; }
.st-legal li::marker { color: var(--faint); }
.st-legal strong { color: var(--ink); font-weight: 600; }
.st-legal a { color: var(--teal-deep); text-decoration: underline; text-decoration-color: rgba(11, 125, 112, .35); text-underline-offset: 3px; }
.st-legal a:hover { text-decoration-color: currentColor; }