/* Nuvotik VPN public pages. No external fonts or resources; system font
   stacks only. Logical properties keep the layout correct in RTL (Arabic).

   The header and the index-page hero are dark in both colour schemes; the
   content areas follow prefers-color-scheme. Every decorative element is an
   aria-hidden element styled here (no inline styles: the CSP is style-src 'self').
   Contrast of each pair is noted next to it (WCAG 2.1: text 4.5:1, large text
   and UI component boundaries 3:1). */

:root {
  color-scheme: light dark;
  --bg: #ffffff;
  --surface: #f4f6fa;
  --text: #16181d;
  --muted: #4d5563;        /* 7.5 on --bg, 6.9 on --surface */
  --border: #d6dbe4;       /* decorative separators only */
  --accent: #1f5bff;       /* Nuvotik blue; white text on it 5.3 */
  --accent-text: #ffffff;
  --link: #0b4fd6;         /* 6.8 on --bg, 6.3 on --surface */
  --link-visited: #5b3cc4; /* 7.3 on --bg */
  --focus: #b06f00;        /* >= 3:1 on --bg (4.1) and --surface (3.8): WCAG 1.4.11 */
  --ok: #1d7a3a;
  --warn: #946200;
  --bad: #b3261e;
  --placeholder-bg: #fff3c4;
  --placeholder-text: #5c4300;
  /* Index cards */
  --card-bg: #ffffff;
  --card-border: #848d9b;  /* 3.3 on --bg: the card outline identifies the link */
  --card-hover: #1f5bff;   /* 5.3 on --card-bg */
  --badge-bg: #eef3ff;
  --badge-icon: #1f5bff;   /* 4.7 on --badge-bg */
  --badge-hover-icon: #ffffff; /* 5.3 on --card-hover */
  --card-glow: rgba(31, 91, 255, 0.45);
  /* Dark chrome (header, hero): the same in both schemes */
  --night: #070b14;
  --night-header: rgba(7, 11, 20, 0.92); /* composites to #1b1f27 on white, #080b14 on dark */
  --night-line: #1f2633;
  --night-text: #e6edf3;   /* 14.0 on the header (light page), 16.6 (dark page) */
  --night-muted: #c3cad3;  /* 6.3 even on the brightest point of the blue glow */
  --night-control: #8b949e; /* control outlines: 5.4 on header, 3.4 on brightest glow */
  --night-focus: #ffc94a;  /* 10.8 on header, 12.8 on hero, 6.8 on brightest glow */
  --brand: #1f5bff;
  --brand-light: #7aa2ff;
  --brand-violet: #b69cff;
  --live: #3fb950;
  --radius: 10px;
  --radius-card: 12px;
  --measure: 46rem;
  --wide: 76rem;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-ar: "Segoe UI", Tahoma, "Geeza Pro", "Noto Naskh Arabic", "Noto Sans Arabic", system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1115;
    --surface: #181b22;
    --text: #e8eaef;
    --muted: #a7afbd;
    --border: #2d323d;
    --accent: #5b8ff0;
    --accent-text: #0f1115;
    --link: #8fb3ff;
    --link-visited: #c0a8ff;
    --focus: #ffc94a;
    --ok: #5fcf83;
    --warn: #f0c35a;
    --bad: #ff8a80;
    --placeholder-bg: #3d3210;
    --placeholder-text: #ffe08a;
    --card-bg: #181b22;
    --card-border: #6b7585;  /* 3.7 on --card-bg, 4.1 on --bg */
    --card-hover: #5b8ff0;   /* 5.4 on --card-bg */
    --badge-bg: #232e43;
    --badge-icon: #8fb3ff;   /* 6.5 on --badge-bg */
    --badge-hover-icon: #0f1115; /* 6.0 on --card-hover */
    --card-glow: rgba(91, 143, 240, 0.4);
  }
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.65;
  overflow-wrap: break-word;
}

html[lang="ar"] body {
  font-family: var(--font-ar);
  line-height: 1.85;
}

.wrap,
.wrap-wide {
  margin-inline: auto;
  padding-inline: 16px;
}

.wrap {
  max-width: var(--measure);
}

.wrap-wide {
  max-width: var(--wide);
}

@media (min-width: 48rem) {
  .wrap-wide {
    padding-inline: 24px;
  }
}

/* Skip link and focus */
.skip-link {
  --focus: var(--night-focus); /* it appears over the dark header or hero */
  position: absolute;
  inset-inline-start: 8px;
  top: -100px;
  z-index: 10;
  padding: 0.5rem 1rem;
  background: var(--accent);
  color: var(--accent-text);
  border-radius: var(--radius);
  font-weight: 600;
  text-decoration: none;
}

/* After one use the link is "visited"; keep the button colors (a:visited would win otherwise). */
.skip-link:visited {
  color: var(--accent-text);
}

.skip-link:focus {
  top: 8px;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 3px;
}

main:focus {
  outline: none;
}

/* Header: dark in both schemes */
.site-header {
  --focus: var(--night-focus);
  border-block-end: 1px solid var(--night-line);
  background: var(--night-header);
  color: var(--night-text);
}

.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.875rem 0.5rem;
}

.brand,
.brand:visited {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: #ffffff;
  font-weight: 600;
  font-size: 1.125rem;
  text-decoration: none;
}

.brand:hover {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

/* The glowing brand dot */
.brand-mark {
  display: inline-block;
  flex: none;
  inline-size: 22px;
  block-size: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--brand-light), var(--brand) 60%);
  box-shadow: 0 0 14px rgba(31, 91, 255, 0.8);
  vertical-align: -0.15em;
}

.lang-switch,
.lang-switch:visited {
  display: inline-flex;
  align-items: center;
  min-block-size: 32px;
  padding: 0.125rem 0.75rem;
  border: 1px solid var(--night-control);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
}

.lang-switch:hover {
  border-color: var(--night-text);
  background: rgba(255, 255, 255, 0.12);
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.125rem 1.125rem;
  margin: 0;
  padding: 0 0 0.625rem;
  list-style: none;
  font-size: 0.9375rem;
}

.site-nav a,
.site-nav a:visited {
  display: inline-block;
  padding-block: 0.25rem;
  color: var(--night-text);
  text-decoration: none;
}

.site-nav a:hover {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

.site-nav a[aria-current="page"] {
  color: #ffffff;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--brand-light); /* 6.6 on the header (light page), 7.9 (dark page) */
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}

/* Document content */
main {
  padding-block: 2.5rem 3.5rem;
}

.doc h1 {
  font-size: 2rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 1rem;
}

html[lang="ar"] .doc h1 {
  letter-spacing: 0;
  line-height: 1.4;
}

.doc h2 {
  font-size: 1.375rem;
  line-height: 1.3;
  margin: 2.25rem 0 0.75rem;
  padding-block-start: 1rem;
  border-block-start: 1px solid var(--border);
}

.doc h3 {
  font-size: 1.125rem;
  margin: 1.75rem 0 0.5rem;
}

.doc p,
.doc ul,
.doc ol,
.doc blockquote {
  margin: 0 0 1rem;
}

.doc ul,
.doc ol {
  padding-inline-start: 1.5rem;
}

.doc li + li {
  margin-block-start: 0.375rem;
}

a {
  color: var(--link);
  text-underline-offset: 0.15em;
}

a:visited {
  color: var(--link-visited);
}

a:hover {
  text-decoration-thickness: 2px;
}

code {
  font-family: var(--mono);
  font-size: 0.9em;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.05em 0.3em;
}

pre {
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
}

pre code {
  border: 0;
  padding: 0;
  background: none;
}

blockquote {
  margin-inline: 0;
  padding: 0.75rem 1rem;
  border-inline-start: 4px solid var(--accent);
  background: var(--surface);
  border-start-end-radius: var(--radius);
  border-end-end-radius: var(--radius);
}

blockquote > :last-child {
  margin-block-end: 0;
}

hr {
  border: 0;
  border-block-start: 1px solid var(--border);
  margin-block: 2rem;
}

/* Tables */
.table-wrap {
  overflow-x: auto;
  margin: 0 0 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--card-bg);
}

table {
  border-collapse: collapse;
  inline-size: 100%;
  font-size: 0.9375rem;
}

th,
td {
  padding: 0.625rem 0.875rem;
  text-align: start;
  vertical-align: top;
  border-block-end: 1px solid var(--border);
}

thead th {
  background: var(--surface);
  font-weight: 600;
}

tbody tr:last-child td {
  border-block-end: 0;
}

/* Unfilled {{PLACEHOLDER}} markers stay visible until configured. */
.placeholder {
  background: var(--placeholder-bg);
  color: var(--placeholder-text);
  border: 1px dashed currentColor;
  border-radius: 4px;
  padding: 0 0.25em;
  font-family: var(--mono);
  font-size: 0.875em;
  unicode-bidi: isolate;
}

/* Status page */
.status-panel {
  margin: 1.5rem 0;
  padding: 1.125rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
}

.status-panel h2 {
  font-size: 1.125rem;
  margin: 1.25rem 0 0.5rem;
  border: 0;
  padding: 0;
}

.status-message,
.status-updated {
  margin: 0;
  color: var(--muted);
}

.status-overall {
  margin: 0 0 0.25rem;
  font-size: 1.25rem;
  font-weight: 700;
}

.status-operational {
  color: var(--ok);
}

.status-degraded,
.status-maintenance {
  color: var(--warn);
}

.status-outage {
  color: var(--bad);
}

.notice {
  padding: 0.75rem 1rem;
  border-inline-start: 4px solid var(--warn);
  background: var(--surface);
}

/* ---------------------------------------------------------------------------
   Hero (index pages and the language chooser): dark in both schemes
   --------------------------------------------------------------------------- */

main.home {
  padding-block: 0;
}

.hero {
  --focus: var(--night-focus);
  position: relative;
  overflow: hidden; /* clips the glows: no horizontal page scroll */
  background-color: var(--night);
  background-image: radial-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1px);
  background-size: 24px 24px;
  color: var(--night-text);
  border-block-end: 1px solid var(--night-line);
}

.hero-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.hero-glow-blue {
  inset-inline-end: -160px;
  top: -200px;
  inline-size: 720px;
  block-size: 720px;
  background: radial-gradient(circle, rgba(31, 91, 255, 0.55) 0%, rgba(31, 91, 255, 0.12) 38%, rgba(7, 11, 20, 0) 68%);
}

.hero-glow-violet {
  inset-inline-start: -220px;
  bottom: -320px;
  inline-size: 620px;
  block-size: 620px;
  background: radial-gradient(circle, rgba(124, 92, 255, 0.3) 0%, rgba(7, 11, 20, 0) 65%);
}

.hero-row {
  position: relative; /* above the glows */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3rem;
  padding-block: 4.5rem 5rem;
}

.hero-copy {
  flex: 1 1 26rem;
  min-inline-size: 0;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.875rem;
  padding: 0.25rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--night-muted); /* 5.7 even on the brightest glow */
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.5;
}

.live-dot {
  display: inline-block;
  flex: none;
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  background: var(--live);
  box-shadow: 0 0 10px var(--live);
}

.hero h1 {
  margin: 0 0 1rem;
  font-size: clamp(2.125rem, 1.25rem + 4vw, 3.25rem);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.023em;
  color: #ffffff;
}

html[lang="ar"] .hero h1 {
  letter-spacing: 0; /* letter-spacing breaks Arabic joining */
  line-height: 1.3;
}

/* Gradient word. Fallback colour where background-clip:text is unsupported: 10.1 on the hero, 5.3 on the glow. */
.accent-text {
  color: #9db8ff;
}

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .accent-text {
    background-image: linear-gradient(90deg, var(--brand-light), var(--brand-violet)); /* 7.9 / 8.6 on the hero, >= 4.2 on the glow */
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    color: transparent;
  }

  html[dir="rtl"] .accent-text {
    background-image: linear-gradient(270deg, var(--brand-light), var(--brand-violet));
  }
}

.hero-lead {
  margin: 0 0 1.75rem;
  max-inline-size: 35rem;
  color: var(--night-muted);
  font-size: 1.1875rem;
  line-height: 1.55;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0;
}

/* Buttons on the dark hero */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-block-size: 44px;
  padding: 0.375rem 1.25rem;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.btn-primary,
.btn-primary:visited {
  border-color: var(--brand-light); /* 7.9 on the hero, 4.2 on the glow */
  background: var(--brand);
  color: #ffffff; /* 5.3 */
}

.btn-primary:hover {
  background: #1a4fe0; /* white text 6.5 */
}

.btn-secondary,
.btn-secondary:visited {
  border-color: var(--night-control); /* 6.4 on the hero */
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
  font-weight: 500;
}

.btn-secondary:hover {
  border-color: var(--night-text);
  background: rgba(255, 255, 255, 0.12);
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px -8px rgba(31, 91, 255, 0.7);
}

/* Decorative brand shape: glowing dot, two pulse waves, two rotating orbits, a slow float. */
.hero-shape {
  position: relative;
  flex: 0 0 auto;
  inline-size: min(23.75rem, 100%);
  aspect-ratio: 1;
  margin-inline: auto;
  animation: nv-float 6s ease-in-out infinite;
}

.orbit {
  position: absolute;
  border-radius: 50%;
}

.orbit-outer {
  inset: 0;
  border: 1px dashed rgba(122, 162, 255, 0.35);
  animation: nv-spin 24s linear infinite;
}

.orbit-inner {
  inset: 15.8%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  animation: nv-spin 40s linear infinite reverse;
}

.orbit-core {
  inset: 31.6%;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.orbit-dot {
  position: absolute;
  inset-inline-start: calc(50% - 6px);
  top: -6px;
  inline-size: 12px;
  block-size: 12px;
  border-radius: 50%;
  background: var(--brand-light);
  box-shadow: 0 0 14px var(--brand-light);
}

.orbit-inner .orbit-dot {
  inset-inline-start: calc(50% - 5px);
  top: auto;
  bottom: -5px;
  inline-size: 10px;
  block-size: 10px;
  background: var(--brand-violet);
  box-shadow: 0 0 12px var(--brand-violet);
}

.pulse,
.core-dot {
  position: absolute;
  inset: 0;
  margin: auto;
  border-radius: 50%;
}

.pulse {
  inline-size: 36.8%;
  block-size: 36.8%;
  border: 2px solid rgba(31, 91, 255, 0.7);
  opacity: 0.35;
  animation: nv-pulse 3.2s ease-out infinite;
}

.pulse-late {
  animation-delay: 1.6s;
}

.core-dot {
  inline-size: 23.2%;
  block-size: 23.2%;
  background: radial-gradient(circle at 35% 30%, var(--brand-light), var(--brand) 55%, #0a2a85);
  box-shadow: 0 0 40px rgba(31, 91, 255, 0.9), 0 0 120px rgba(31, 91, 255, 0.5);
}

@keyframes nv-pulse {
  0% {
    transform: scale(0.6);
    opacity: 0.55;
  }

  100% {
    transform: scale(1.9);
    opacity: 0;
  }
}

@keyframes nv-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes nv-float {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

/* Cards: "Policies and help" */
.cards-section {
  padding-block: 2.5rem 3.5rem;
}

.cards-section h2 {
  margin: 0 0 1rem;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(16.25rem, 100%), 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.card,
.card:visited {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  block-size: 100%;
  padding: 1.25rem;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  background: var(--card-bg);
  color: var(--text);
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.card-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.card-icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  inline-size: 34px;
  block-size: 34px;
  border-radius: 9px;
  background: var(--badge-bg);
  color: var(--badge-icon);
  transition: background-color 0.18s ease, color 0.18s ease;
}

.card-icon-svg {
  display: block;
}

.card-title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
}

.card-desc {
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.55;
}

html[lang="ar"] .card-desc {
  line-height: 1.75;
}

.card:hover,
.card:focus-visible {
  transform: translateY(-3px);
  border-color: var(--card-hover);
  box-shadow: 0 10px 30px -12px var(--card-glow), 0 0 0 1px var(--card-hover);
}

/* Keep each control's own corner radius while focused (the global rule sets 3px). */
.card:focus-visible {
  border-radius: var(--radius-card);
}

.btn:focus-visible {
  border-radius: 8px;
}

.lang-switch:focus-visible {
  border-radius: 6px;
}

.card:hover .card-icon,
.card:focus-visible .card-icon {
  background: var(--card-hover);
  color: var(--badge-hover-icon);
}

/* Root language chooser: one full-height hero */
.chooser main.hero {
  display: flex;
  align-items: center;
  min-block-size: 100vh;
  min-block-size: 100svh;
  padding-block: 0;
  border-block-end: 0;
}

.chooser .hero-row {
  inline-size: 100%;
}

.chooser h1 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.chooser h1 .brand-mark {
  inline-size: 0.7em;
  block-size: 0.7em;
}

.choices {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.choices .btn {
  min-inline-size: 9rem;
  font-size: 1.0625rem;
}

.choices a[lang="ar"] {
  font-family: var(--font-ar);
}

/* Footer: follows the colour scheme */
.site-footer {
  border-block-start: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  font-size: 0.875rem;
  padding-block: 1.5rem;
}

.footer-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
}

.site-footer p {
  margin: 0;
}

/* Medium screens: the shape shrinks under the text */
@media (max-width: 56rem) {
  .hero-row {
    gap: 2rem;
  }

  .hero-shape {
    inline-size: min(15rem, 100%);
  }
}

/* Small screens: the shape and the large glows step back */
@media (max-width: 40rem) {
  .hero-row {
    padding-block: 3rem 3.5rem;
  }

  .hero-shape {
    display: none;
  }

  .hero-glow-blue {
    inline-size: 420px;
    block-size: 420px;
    inset-inline-end: -180px;
    top: -160px;
  }

  .hero-glow-violet {
    inline-size: 380px;
    block-size: 380px;
  }

  .hero-lead {
    font-size: 1.0625rem;
  }
}

@media (max-width: 30rem) {
  body {
    font-size: 1rem;
  }

  .doc h1 {
    font-size: 1.625rem;
  }

  .doc h2 {
    font-size: 1.25rem;
  }

  .hero-actions .btn,
  .choices li,
  .choices .btn {
    flex: 1 1 100%;
    inline-size: 100%;
  }
}

/* Windows high contrast / forced colours: drop the gradient text. */
@media (forced-colors: active) {
  .accent-text {
    background: none;
    color: inherit;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
  }

  .hero-shape,
  .orbit,
  .pulse {
    animation: none;
  }

  .btn,
  .card,
  .card-icon {
    transition: none;
  }

  .btn:hover,
  .card:hover,
  .card:focus-visible {
    transform: none;
  }
}

@media print {
  .site-header,
  .site-footer,
  .skip-link,
  .hero-glow,
  .hero-shape {
    display: none;
  }

  .hero {
    background: none;
    color: inherit;
    border: 0;
  }

  .hero h1,
  .hero-lead,
  .eyebrow,
  .btn {
    color: inherit;
  }

  .accent-text {
    background: none;
    color: inherit;
  }

  a {
    color: inherit;
  }
}

/* Touch screens: header links, the language switch and the brand reach the 44px tap size
   (mouse users keep the compact header). */
@media (pointer: coarse) {
  .site-nav a,
  .site-nav a:visited,
  .lang-switch,
  .lang-switch:visited,
  .brand,
  .brand:visited {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
  }
}

/* ------------------------------------------------------------------
   Optional analytics consent (assets/analytics.js; hidden unless the
   API enables first-party analytics in consent mode).
   ------------------------------------------------------------------ */
.privacy-banner {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 40;
  padding-block: 0.85rem;
  border-block-start: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.12);
}

.privacy-banner[hidden] {
  display: none;
}

.privacy-banner-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.25rem;
}

.privacy-banner-text {
  flex: 1 1 20rem;
  margin: 0;
  color: var(--muted);
}

.privacy-banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* .btn-secondary is styled for the dark hero; the banner sits on the page background in both themes. */
.privacy-banner .btn-secondary,
.privacy-banner .btn-secondary:visited {
  border-color: var(--card-border); /* 3.3 on --bg (light), 4.1 (dark): the outline identifies the button */
  background: var(--bg);
  color: var(--text);
}

.privacy-banner .btn-secondary:hover {
  border-color: var(--text);
  background: var(--surface);
}

.link-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--link);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.link-button[hidden] {
  display: none;
}

.link-button:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}