/* Marketing primitives, measured against the homepage. Surface, not OS theme,
   determines foreground: the homepage deliberately opens light and closes dark. */
:root {
  --marketing-width: 1180px;
  --marketing-hero-width: 820px;
  --marketing-section-pad: clamp(4rem, 8vw, 7rem);
  --marketing-radius: 1.75rem;
  --marketing-display: "Plus Jakarta Sans", system-ui, sans-serif;
  --marketing-body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --marketing-primary: linear-gradient(120deg, #0e7490 0%, #08768f 48%, #02689d 100%);
}
:is(body, .security-page) .hero h1, .security-page :is(.trust-hero, .os-hero) h1 {
  font-family: var(--marketing-display);
  font-size: clamp(2.6rem, 6.5vw, 4.75rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.045em;
  max-width: 18em;
  margin: 0 auto 1.5rem;
}
:is(body, .security-page) .hero-eyebrow, .security-page .section-label {
  font: 700 .72rem/1.6 var(--marketing-body);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #08657b;
  margin: 0 0 1.35rem;
}
:is(body, .security-page) .hero-cta, .security-page :is(.btn-primary, .form-submit, .orben-arch-cta) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 1rem 2rem;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: var(--marketing-primary);
  background-size: 160%;
  font: 600 .95rem/1.6 var(--marketing-body);
  text-decoration: none;
  box-shadow: 0 12px 38px -8px rgba(8,145,178,.5), inset 0 1px rgba(255,255,255,.06);
  transition: transform .15s, box-shadow .25s, background-position .5s;
}
:is(body, .security-page) .hero-cta:hover, .security-page :is(.btn-primary, .form-submit, .orben-arch-card:hover .orben-arch-cta):hover {
  color: #fff;
  background: var(--marketing-primary);
  background-size: 160%;
  background-position: right center;
  transform: translateY(-2px);
  box-shadow: 0 18px 52px -8px rgba(8,145,178,.62);
  text-decoration: none;
}
:is(body, .security-page) .hero-secondary, .security-page .btn-ghost {
  padding: 1rem 1.85rem;
  border-radius: 999px;
  border: 1px solid #657c8a;
  background: #f1f5f9;
  color: #0f172a;
  font: 600 .95rem/1.6 var(--marketing-body);
  transition: transform .15s, box-shadow .25s, background .15s;
}
:is(body, .security-page) .hero-secondary:hover, .security-page .btn-ghost:hover {
  color: #0f172a;
  background: #fff;
  transform: translateY(-2px);
  text-decoration: none;
}
:is(body, .security-page) .nav-shell, .security-page .nav-shell {
  height: 5.5rem;
  padding: .85rem 1.25rem 0;
  align-items: center;
}
:is(body, .security-page) .nav-shell > nav, .security-page nav.site-nav {
  /* Full link row + CTAs need headroom for webfont metric variance (CI Linux). */
  width: min(1280px, 100%);
  height: 3.35rem;
  padding: 0 .45rem 0 1.1rem;
  background: #f8fbfd;
  color: #0f172a;
  border: 1px solid rgba(8,145,178,.16);
  border-radius: 999px;
  box-shadow: 0 8px 40px -12px rgba(8,145,178,.12), 0 2px 8px rgba(15,23,42,.05);
}
:is(body, .security-page) .nav-shell .nav-brand, .security-page .nav-brand { color: #0f172a !important; gap: .55rem; }
:is(body, .security-page) .nav-brand > span:last-child {
  font: 800 1.05rem/1.6 var(--marketing-display);
  letter-spacing: -.03em;
  color: #0f172a !important;
  opacity: 1 !important;
}
:is(body, .security-page) .nav-brand-mark {
  width: 2.55rem;
  height: 2.55rem;
  border-radius: 10px;
  background: #102a3a !important;
  border: 1px solid #819eaf !important;
}
:is(body, .security-page) .nav-brand-mark img {
  width: 1.9rem;
  height: 1.9rem;
  filter: none !important;
  opacity: 1 !important;
}
:is(body, .security-page) .nav-shell .nav-links a {
  padding: .45rem .65rem;
  font: 500 .84rem/1.6 var(--marketing-body);
  color: #344c5d;
  border-radius: 999px;
}
:is(body, .security-page) .nav-shell .nav-links a:hover { background: #e6eff2; color: #0f172a; }
:is(body, .security-page) .nav-inner { gap: .75rem; }
:is(body, .security-page) .nav-actions { gap: .4rem; }
:is(body, .security-page) .nav-actions .btn { padding: .62rem 1.15rem; font-size: .9rem; min-height: 0; box-shadow: none; }
:is(body, .security-page) .nav-actions .btn-primary { background: var(--marketing-primary); color: #fff; }
:is(body, .security-page) .nav-actions .btn-ghost { color: #0f172a; background: #f8fbfd; border: 1px solid #657c8a; }
:is(body, .security-page) .nav-toggle { width: 38px; height: 38px; align-items: center; justify-content: center; background: #e6eff2; color: #0f172a; border: 1px solid #657c8a; }
:is(body, .security-page) .nav-toggle svg { width: 20px; height: 20px; }
:is(body, .security-page) .nav-drawer { background: #f1f5f9; color: #102a3a; }
:is(body, .security-page) .nav-drawer a { color: #102a3a; }
:is(body, .security-page) .nav-drawer .btn-primary { color: #fff; }
:is(body, .security-page) .feature-tab, .security-page .explorer-tabs button {
  font-family: var(--marketing-display);
  font-size: clamp(1.1rem, 2.4vw, 1.45rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.4;
  border: 0;
  border-left: 3px solid transparent;
  border-radius: 10px;
  padding: .5rem .65rem;
  background: transparent;
  color: #d7eef6;
  text-align: left;
  box-shadow: none;
}
:is(body, .security-page) .feature-tab[aria-selected="true"], .security-page .explorer-tabs button[aria-selected="true"] {
  background: transparent;
  color: #fff;
  border-left-color: #83e3f2;
  box-shadow: none;
}
:is(body, .security-page) .feature-tab:hover, .security-page .explorer-tabs button:hover { color: #fff; background: #173e50; }
:is(body, .security-page) footer, .security-page footer {
  --focus: #b3e5ff;
  background: #071f2c;
  border: 0;
  padding: 3.5rem 1.5rem 2.5rem;
  color: #d1e0e8;
}
:is(body, .security-page) footer .footer-grid { max-width: 1100px; margin: 0 auto; gap: 2rem; }
:is(body, .security-page) footer .footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
:is(body, .security-page) footer .footer-col :is(h2,h4) {
  font: 700 .72rem/1.6 var(--marketing-display);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #83e3f2;
  margin: 0 0 1rem;
}
:is(body, .security-page) footer .footer-col :is(a,button.link-like) { font-size: .875rem; line-height: 1.6; color: #d1e0e8; margin: 0 0 .55rem; padding: 0; }
:is(body, .security-page) footer .footer-col :is(a,button.link-like):hover { color: #fff; }
:is(body, .security-page) footer :is(a,button):focus-visible { outline: 3px solid #b3e5ff; outline-offset: 4px; }
:is(body, .security-page) footer .footer-copy { max-width: 1100px; margin: 2rem auto 0; padding-top: 1.5rem; border-top: 1px solid #657c8a; font-size: .78rem; color: #b2c7d3; text-align: center; }
:is(body, .security-page) :is(.hero-cta,.hero-secondary,.feature-tab):focus-visible { outline: 3px solid #08657b; outline-offset: 4px; }
:is(body, .security-page) .section-dark .feature-tab:focus-visible { outline-color: #b3e5ff; }
/* Full desktop nav needs ~1280px of pill width. Keep hamburger below 1200px. */
@media (max-width: 1199px) {
  :is(body, .security-page) .nav-shell .nav-links, :is(body, .security-page) .nav-actions .hide-mobile { display: none; }
  :is(body, .security-page) .nav-shell .nav-toggle { display: flex; }
}
@media (max-width: 480px) {
  :is(body, .security-page) .nav-shell { padding-right: .85rem; padding-left: .85rem; }
  :is(body, .security-page) .nav-brand-mark { width: 2.1rem; height: 2.1rem; }
  :is(body, .security-page) .nav-brand-mark img { width: 1.7rem; height: 1.7rem; }
  :is(body, .security-page) .nav-actions .btn { padding: .62rem .85rem; }
}
@media (prefers-reduced-motion: reduce) {
  :is(body, .security-page) .hero-cta, :is(body, .security-page) .hero-secondary, .security-page :is(.btn,.form-submit,.orben-arch-cta) { transition: none; transform: none !important; }
}
/* Extreme browser zoom can leave less than 320 CSS pixels. Keep menu access available. */
@media(max-width:319px) {
 :is(body,.security-page) .nav-actions > .btn-primary { display: none; }
}
@media(max-width:240px) {
 :is(body,.security-page) .nav-brand > span:last-child { display: none; }
}