/* Gateway block page. Same brand language as the posture page, but this is a separate
   Pages project because it must be PUBLIC: a Gateway block can hit any device on the
   tunnel, including one failing posture, and putting an auth wall in front of "this
   site is blocked" would be absurd.

   Because we host this one, the CSS is a real stylesheet rather than an inline block,
   so the strict default-src 'none' CSP in _headers applies with no unsafe sources. */

:root {
  --blue: #006eff;
  --green: #3fc584;
  --purple: #7b61ff;
  --amber: #faa443;

  --ink-950: #070d10;
  --card-a: #101c22;
  --card-b: #0a1216;

  --text: #eef4f7;
  --text-soft: #a6b7bf;
  --text-quiet: #7b8d95;

  --line: rgba(255, 255, 255, 0.1);
  --hair: rgba(255, 255, 255, 0.055);

  --font: "Proxima Nova", "Proxima nova", Inter, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 20px;
  background: var(--ink-950);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.glow {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(46rem 26rem at 50% -5rem, rgba(250, 164, 67, 0.14), transparent 62%),
    radial-gradient(34rem 22rem at 88% 14%, rgba(0, 110, 255, 0.1), transparent 60%);
}

.wrap { position: relative; z-index: 1; width: 100%; display: flex; justify-content: center; }

.card {
  width: 100%;
  max-width: 37rem;
  background: linear-gradient(180deg, var(--card-a), var(--card-b));
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 26px 64px rgba(0, 0, 0, 0.5);
}

.accent {
  height: 3px;
  background: linear-gradient(90deg, var(--amber), var(--blue) 70%, var(--green));
}

.inner { padding: 30px 30px 26px; }

.brand {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin: 0 0 24px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.brand span {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-quiet);
}

.eyebrow {
  margin: 0 0 12px;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--amber);
}

.dot { opacity: 0.5; padding: 0 2px; }

h1 {
  margin: 0 0 14px;
  padding-bottom: 0.1em;
  font-size: 30px;
  line-height: 1.16;
  letter-spacing: -0.022em;
  font-weight: 800;
}

h2 {
  margin: 26px 0 10px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.012em;
}

p { margin: 0 0 14px; color: var(--text-soft); }
.lede { color: var(--text-soft); }

/* ---------- policy context ---------- */

.facts {
  margin: 20px 0 4px;
  padding: 4px 0 0;
  border-top: 1px solid var(--hair);
}

.facts[hidden] { display: none; }

.fact {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--hair);
}

.fact[hidden] { display: none; }

.fact dt {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-quiet);
  padding-top: 2px;
}

.fact dd {
  margin: 0;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text);
  overflow-wrap: anywhere;
}

@media (max-width: 520px) {
  .fact { grid-template-columns: 1fr; gap: 2px; }
}

/* ---------- actions ---------- */

.actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; }

.btn {
  display: inline-block;
  padding: 12px 19px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 10px;
  border: 1px solid transparent;
  transition: background 0.16s ease;
}

.btn-primary { color: #ffffff; background: var(--blue); border-color: #2a83ff; }
.btn-primary:hover { background: #2a83ff; }

.btn-quiet { color: var(--text); background: rgba(255, 255, 255, 0.05); border-color: var(--line); }
.btn-quiet:hover { background: rgba(255, 255, 255, 0.1); }

:focus-visible { outline: 3px solid #7fb4ff; outline-offset: 3px; border-radius: 4px; }

.note {
  margin: 18px 0 0;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--text-quiet);
}

.foot {
  margin: 0;
  padding: 15px 30px 18px;
  border-top: 1px solid var(--hair);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-quiet);
}

@media (max-width: 460px) {
  h1 { font-size: 25px; }
  .btn { width: 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}

@media print {
  body { background: #ffffff; color: #111111; }
  .glow, .accent, .actions { display: none; }
  .card { background: none; border: 1px solid #cccccc; box-shadow: none; }
  h1, h2 { color: #111111; }
  p, .fact dd { color: #333333; }
}

.foot-version {
  display: block;
  margin-top: 5px;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  opacity: 0.75;
}