:root {
  color-scheme: dark;
  --navy: #06213d;
  --navy-deep: #03182c;
  --cyan: #25c2f3;
  --blue: #0877d9;
  --cream: #fff0c8;
  --ink: #102b47;
  --rb-policy-background-image: url("assets/app-background/app-background-phone.webp?v=1");
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

@media (orientation: landscape) {
  :root {
    --rb-policy-background-image: url("assets/app-background/app-background-landscape.webp?v=1");
  }
}

@media (orientation: portrait) and (min-width: 700px) {
  :root {
    --rb-policy-background-image: url("assets/app-background/app-background-tablet.webp?v=1");
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  color: #f7fbff;
  background: var(--navy-deep) var(--rb-policy-background-image) center / cover no-repeat fixed;
  line-height: 1.6;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: rgba(3, 24, 44, 0.9);
}

a { color: var(--cyan); }
a:focus-visible { outline: 3px solid var(--cream); outline-offset: 4px; }

.policy-header {
  border-bottom: 1px solid rgba(37, 194, 243, 0.35);
  background: rgba(3, 24, 44, 0.96);
}

.policy-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(860px, calc(100% - 32px));
  margin: 0 auto;
  padding: 14px 0;
  color: #fff;
  text-decoration: none;
}

.policy-brand img { width: 56px; height: 56px; border-radius: 8px; }
.policy-brand span { display: grid; }
.policy-brand strong { font-size: 1rem; }
.policy-brand small { color: var(--cyan); font-weight: 800; }

main, footer { width: min(860px, calc(100% - 32px)); margin-inline: auto; }

.policy-intro { padding-block: 44px 30px; }
.policy-eyebrow { margin: 0; color: var(--cyan); font-size: 0.75rem; font-weight: 900; }
h1 { margin: 4px 0 6px; color: var(--cream); font-family: Georgia, serif; font-size: clamp(2.2rem, 9vw, 4rem); line-height: 1; }
h2 { margin: 0 0 8px; color: var(--cream); font-size: 1.25rem; }
p { margin: 0 0 12px; }

main > section:not(.policy-intro) {
  padding: 24px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

footer {
  padding: 28px 0 48px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  font-weight: 800;
}

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