/* 2026 site design for the security, Orben security and legal pages.
   Loaded last on those pages (after brand.css for the tokens). It restyles the
   existing markup only: ids, classes and scripts the pages and their tests rely
   on stay as they are. The topbar and footer keep their current styles. */

/* ── Surfaces ─────────────────────────────────────────────
   Components on these pages read --text-*, --surface-*, --border-* and --accent,
   so each section only has to declare which surface it sits on. */
.brand-page .brand-ink,
.brand-page :is(.trust-hero, .os-hero, .trust-hub, #privacy, #architecture, .cta-band) {
  --text-primary: var(--brand-ink-50);
  --text-secondary: var(--brand-ink-200);
  --text-muted: var(--brand-ink-300);
  --surface-elevated: var(--brand-ui-frame);
  --surface-subtle: #173e50;
  --border-default: #4e7387;
  --border-emphasis: #65d8ec;
  --accent: var(--brand-cyan-300);
  --focus: #b3e5ff;
  --selected-bg: #245065;
  color: var(--text-primary);
}
.brand-page :is(#security, #subprocessors, #agreements, #technical) {
  --text-primary: var(--brand-ink-text);
  --text-secondary: var(--brand-ink-body);
  --text-muted: var(--brand-ink-muted);
  --surface-primary: var(--brand-paper);
  --surface-elevated: var(--brand-white);
  --surface-subtle: #e6eff2;
  --border-default: #b9cad4;
  --border-emphasis: var(--brand-teal-text);
  --accent: var(--brand-teal-text);
  --focus: #075bce;
  --selected-bg: #d4edf2;
  color: var(--text-primary);
}

/* The old rounded dark panel becomes a plain wrapper; sections carry the colour. */
.brand-page .marketing-depth {
  background: none;
  border-radius: 0;
  padding: 0 var(--brand-gutter);
}

/* Full-bleed section backgrounds without extra markup: a spread shadow paints
   the side gutters, clip-path keeps it from leaking above or below. */
.brand-page :is(.trust-hero, .os-hero, .marketing-depth > section, .marketing-depth > .cta-band) {
  position: relative;
  box-shadow: 0 0 0 100vmax var(--surface-primary);
  /* -1px at the top covers the sub-pixel seam between two stacked sections */
  clip-path: inset(-1px -100vmax 0);
  background: var(--surface-primary);
}
/* Which ink each section sits on. Kept apart from the shared ink variables above:
   that selector contains ids, so a surface set there would outrank these. */
.brand-page .brand-ink,
.brand-page :is(#privacy, #architecture) { --surface-primary: var(--brand-ink-900); }
.brand-page :is(.trust-hero, .os-hero, .trust-hub, .cta-band) { --surface-primary: var(--brand-ink-950); }
.brand-page #subprocessors { --surface-primary: var(--brand-paper-2); }
.brand-page #subprocessors { padding-top: var(--brand-section-y); }

/* Signature scan line on every ink/paper edge */
.brand-page :is(#security, #privacy, #subprocessors, #architecture, #technical, .cta-band)::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--brand-cyan-400) 30%, var(--brand-cyan-300) 50%, var(--brand-cyan-400) 70%, transparent);
  box-shadow: 0 0 24px 2px rgba(34,211,238,.35);
  pointer-events: none;
}
.brand-page #subprocessors::before { display: none; }

/* ── Hero (security and Orben security) ──────────────── */
.brand-page :is(.trust-hero, .os-hero) {
  width: min(100%, calc(var(--brand-container) + 2 * var(--brand-gutter)));
  /* The subpage topbar is a fixed 72px strip; clear it. */
  padding: calc(72px + 2.75rem) var(--brand-gutter) 2.5rem;
  text-align: left;
  background-image:
    radial-gradient(50% 120% at 85% 0%, rgba(34,211,238,.12), transparent 70%),
    radial-gradient(40% 100% at 0% 0%, rgba(8,145,178,.10), transparent 70%);
}
.brand-page :is(.trust-hero, .os-hero) h1 {
  max-width: 14em;
  margin: 0 0 var(--space-4);
  font-family: var(--marketing-display);
  font-size: clamp(2.5rem, 1.5rem + 3vw, 3.75rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.045em;
  color: var(--brand-ink-50);
  text-wrap: balance;
}
.brand-page :is(.trust-hero, .os-hero) .lead {
  max-width: 38rem;
  margin: 0 0 var(--space-6);
  font: 400 var(--fs-lead)/1.6 var(--marketing-body);
  color: var(--brand-ink-200);
}
.brand-page :is(.trust-hero, .os-hero) .section-label { margin-bottom: var(--space-4); }
.brand-page .hero-actions { justify-content: flex-start; flex-wrap: wrap; }
.brand-page .hero-details-link { color: var(--brand-cyan-300); }
.brand-page .hero-details-link:hover { color: #fff; }
.brand-page .os-meta { color: var(--brand-ink-300); }
.brand-page .os-crumb { justify-content: flex-start; color: var(--brand-ink-300); }
.brand-page .os-crumb a { color: var(--brand-cyan-300); }

/* ── Type ─────────────────────────────────────────────── */
.brand-page .section-label {
  font: 700 var(--fs-eyebrow)/1.6 var(--marketing-body);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}
.brand-page :is(.trust-section, .os-section) > h2,
.brand-page .section-head h2,
.brand-page .explorer-heading h2,
.brand-page .trust-hub > h2,
.brand-page .cta-band h2 {
  font: 800 var(--fs-h2)/1.08 var(--marketing-display);
  letter-spacing: -.035em;
  color: var(--text-primary);
}
.brand-page .section-head { max-width: 46rem; margin-bottom: var(--space-12); }
.brand-page .section-head .section-lead { font: 400 var(--fs-lead)/1.6 var(--marketing-body); color: var(--text-secondary); }
.brand-page :is(.trust-section, .os-section) { padding: var(--brand-section-y) 0; }
.brand-page .marketing-depth > #architecture { padding-top: var(--space-8); }
/* The explorer heading shares a row with its label and Replay button. */
.brand-page #architecture .explorer-heading h2 { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); }
.brand-page :is(#security, #privacy, #subprocessors, #agreements, #technical) a:not(.btn) { color: var(--accent); }

/* ── Overview (first screen of /security/) ───────────── */
/* The overview must end within the first 900px at 1440 wide (security.spec). */
.brand-page .trust-hub { padding: 0 0 var(--space-8); }
.brand-page .trust-hub > h2 { font-size: var(--fs-h3); letter-spacing: -.015em; margin-bottom: var(--space-4); color: var(--brand-ink-200); }
.brand-page :is(.hub-card, .orben-arch-card) {
  background: var(--brand-ui-frame);
  border: 0;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-frame);
}
.brand-page :is(.hub-card, .orben-arch-card):hover { background: #0f3349; }
.brand-page .orben-arch-card { box-shadow: var(--shadow-frame), 0 0 80px -20px rgba(34,211,238,.18); }

/* ── Paper sections: white cards like the homepage ───── */
.brand-page :is(#security, #agreements) .trust-pillar-grid { gap: var(--space-4); }
.brand-page :is(#security, #agreements) .pillar-card {
  padding: var(--space-6);
  border: 1px solid var(--brand-line-light);
  border-top: 1px solid var(--brand-line-light);
  border-radius: var(--r-lg);
  background: var(--brand-white);
  box-shadow: var(--shadow-card-light);
}
.brand-page :is(#security, #agreements) .pillar-icon { color: var(--brand-cyan-600); }
.brand-page :is(#security, #agreements) .pillar-card h3 { color: var(--brand-ink-text); font-family: var(--marketing-display); font-weight: 700; }
.brand-page :is(#security, #agreements) .pillar-card :is(li, p) { color: var(--brand-ink-body); }

/* Privacy facts on ink: hairline columns, like "Built to be audited" */
.brand-page #privacy .privacy-facts .fact { border-top-color: var(--brand-line-dark); }
.brand-page #privacy .pillar-icon { color: var(--brand-cyan-300); }
.brand-page #privacy .privacy-facts strong { color: var(--brand-ink-50); font-family: var(--marketing-display); }
.brand-page #privacy .privacy-facts span:not(.pillar-icon) { color: var(--brand-ink-300); }

/* Subprocessor table as a white card on paper-2 */
.brand-page #subprocessors .trust-table-wrap {
  border: 1px solid var(--brand-line-light);
  border-radius: var(--r-lg);
  background: var(--brand-white);
  box-shadow: var(--shadow-card-light);
}
.brand-page #subprocessors :is(table, td) { background: var(--brand-white); }
.brand-page #subprocessors th { background: var(--brand-paper); font-family: var(--marketing-display); }
.brand-page #subprocessors :is(td, th) { border-bottom-color: #d7e2e9; }
.brand-page #subprocessors tr:last-child td { border-bottom: 0; }

/* ── CTA band ─────────────────────────────────────────── */
.brand-page .cta-band {
  padding: var(--brand-section-y) 0;
  background-image: radial-gradient(50% 80% at 50% 40%, rgba(34,211,238,.12), transparent 70%);
}
.brand-page .cta-band p { color: var(--brand-ink-200); }
.brand-page .cta-band .cta-footnote a { color: var(--brand-cyan-300); }

/* ── Orben security: explorer on ink, technical details on paper ── */
.brand-page #architecture .explorer-panel,
.brand-page #architecture [role="tabpanel"] { border-radius: var(--r-md); }
.brand-page #technical .os-details { border-color: #d7e2e9; }
.brand-page #technical :is(summary, h3) { color: var(--brand-ink-text); }
/* Hover on paper: the old dark-panel hover (#173e50) would put ink text at 1.6:1. */
.brand-page #technical .tech-group summary:hover { background: var(--surface-subtle); color: var(--brand-ink-text); }

/* ── Legal pages: calm document pages in the same type and colours ── */
.brand-page.agreement-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--brand-paper);
  background-image: none;
}
/* Short pages: the footer sits at the bottom instead of leaving a strip below it. */
.brand-page.agreement-page > main { flex: 1 0 auto; }
.brand-page .agreement-kicker,
.brand-page .agreement-kicker a {
  font: 700 var(--fs-eyebrow)/1.6 var(--marketing-body);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brand-teal-text);
}
.brand-page .agreement-main h1 {
  font: 800 var(--fs-h2)/1.08 var(--marketing-display);
  letter-spacing: -.035em;
  color: var(--brand-ink-text);
}
.brand-page :is(.agreement-lead, .agreement-intro) { font: 400 var(--fs-lead)/1.6 var(--marketing-body); color: var(--brand-ink-body); }
.brand-page .agreement-meta dt { color: var(--brand-ink-muted); }
.brand-page .agreement-meta dd { color: var(--brand-ink-text); }
.brand-page :is(.agreement-card, .agreement-sheet, .archive-list a) {
  border: 1px solid var(--brand-line-light);
  border-radius: var(--r-lg);
  background: var(--brand-white);
  box-shadow: var(--shadow-card-light);
}
.brand-page .agreement-card { transition: transform var(--dur-2) var(--ease-out), border-color var(--dur-2); }
.brand-page .agreement-card:hover { transform: translateY(-2px); border-color: rgba(8,145,178,.45); }
.brand-page .agreement-card strong { font-family: var(--marketing-display); color: var(--brand-ink-text); }
.brand-page .agreement-card span { color: var(--brand-ink-body); }
.brand-page .agreement-card em { color: var(--brand-teal-text); }
.brand-page .agreement-actions a {
  border-radius: var(--r-pill);
  background: var(--marketing-primary);
  box-shadow: 0 12px 38px -8px rgba(8,145,178,.5);
}
.brand-page .agreement-actions a:hover { background: var(--marketing-primary); background-position: right center; transform: translateY(-1px); }

@media (prefers-reduced-motion: reduce) {
  .brand-page .agreement-card { transition: none; }
  .brand-page .agreement-card:hover { transform: none; }
}

@media (max-width: 800px) {
  .brand-page :is(.trust-hero, .os-hero) { padding: calc(72px + 2rem) var(--brand-gutter) 2.5rem; }
  .brand-page .marketing-depth { padding: 0 var(--brand-gutter); }
}