/*
  Station70 EULA stylesheet.
  Loaded (via <helmet>) by bunker-eula.html, castle-eula.html, and
  gatekeeper-eula.html — the three End User License Agreement pages.
  Extracted from inline `style`/`style-hover`/`style-active` attributes per
  the same convention as blog.css/careers.css/architecture.css/404.css/
  bunker.css — see CLAUDE.md's DC runtime section for why inline styles are
  otherwise this codebase's default. These classes previously lived in
  bunker.css (added there when only bunker-eula.html had been converted);
  moved out to their own file once castle-eula.html/gatekeeper-eula.html
  needed the identical skeleton — see CLAUDE.md's "Adding a new blog post"
  precedent for the same "one file, one shared skeleton" reasoning.

  All three pages share one skeleton: a numbered `.s70-beula-section` (01,
  02, ...) with an eyebrow, an `<h2>`, body `.s70-beula-p` copy, and
  optionally an `.s70-beula-list` — repeated 15 (bunker) to 28+ (castle/
  gatekeeper, which also carry a Data Processing Addendum with its own Annex
  sections) times per page. castle-eula.html and gatekeeper-eula.html are
  themselves byte-identical in every inline style value (confirmed via diff
  before this extraction) — only their text content differs — so one class
  set serves both without any per-product variant classes.

  `.s70-beula-header`/`.s70-beula-intro-box`/`.s70-beula-intro-p` are
  bunker-eula.html's plain (non-beta) variants; `.s70-beula-header-tight`/
  `.s70-beula-intro-box-warn` are castle/gatekeeper's beta-disclosure
  variants (no bottom margin on the header block; an orange-tinted warning
  border on the intro box, since both are in beta) — these read as
  near-duplicates of the plain variants but are deliberately kept distinct
  since the visual difference is real, not incidental.

  Colors are CSS custom properties from color-tokens.css (loaded alongside
  it) or colors_and_type.css's sitewide tokens, never literals.
*/

html, body { margin: 0; padding: 0; background: var(--s70-black); }
@keyframes s70-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes s70-dropdown-in { from { opacity: 0; transform: translateX(-50%) translateY(-8px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }

.s70-beula-page {
  position: relative;
  background: var(--s70-black);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

.s70-beula-glow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 460px;
  pointer-events: none;
  background: radial-gradient(60% 90% at 50% -20%, var(--tint-orange-14) 0%, var(--tint-orange-04) 40%, var(--tint-fade) 70%);
}

.s70-beula-inner {
  position: relative;
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(130px, 17vh, 180px) clamp(24px, 7vw, 80px) clamp(80px, 10vw, 120px);
}

.s70-beula-header {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 8px;
}

.s70-beula-header-tight {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.s70-beula-badge-row {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.s70-beula-badge-dash {
  width: 24px;
  height: 2px;
  background: var(--s70-orange);
  box-shadow: 0 0 8px var(--tint-orange-70);
}

.s70-beula-badge-text {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tint-accent-soft);
}

.s70-beula-h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(34px, 4.2vw, 56px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--s70-white);
  text-wrap: balance;
}

.s70-beula-entity {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--tint-white-50);
}

.s70-beula-intro-box {
  margin: 40px 0;
  padding: 24px 26px;
  background: var(--s70-ink-700);
  border: 1px solid var(--border-default);
  border-radius: 14px;
}

.s70-beula-intro-box-warn {
  margin: 40px 0;
  padding: 24px 26px;
  background: var(--s70-ink-700);
  border: 1px solid var(--tint-orange-28);
  border-radius: 14px;
}

.s70-beula-intro-p {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.7;
  letter-spacing: 0.01em;
  color: var(--tint-white-50);
}

.s70-beula-sections {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.s70-beula-section {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-top: 40px;
  border-top: 1px solid var(--tint-white-07);
}

.s70-beula-section-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--s70-orange);
  margin-bottom: 12px;
}

.s70-beula-h2 {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 26px;
  letter-spacing: -0.01em;
  color: var(--s70-white);
  text-wrap: balance;
}

.s70-beula-p {
  margin: 0 0 18px;
  font-size: 17px;
  line-height: 1.75;
  color: var(--tint-white-66);
  text-wrap: pretty;
}

.s70-beula-strong-label {
  color: var(--tint-white-90);
  font-weight: 600;
}

.s70-beula-list {
  margin: 0 0 18px;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.s70-beula-list-item {
  font-size: 17px;
  line-height: 1.7;
  color: var(--tint-white-66);
}

.s70-beula-dpa-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 48px;
}

.s70-beula-dpa-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--s70-white);
}

.s70-beula-dpa-line {
  flex: 1;
  height: 1px;
  background: var(--tint-orange-40);
}

.s70-beula-dpa-intro-p {
  margin: 22px 0 0;
  font-size: 13px;
  line-height: 1.7;
  letter-spacing: 0.01em;
  color: var(--tint-white-50);
}

.s70-beula-dpa-sections {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin-top: 36px;
}