:root {
  --pa-ink: #092f3a;
  --pa-deep: #073b4c;
  --pa-teal: #087e8b;
  --pa-mint: #b8f2e6;
  --pa-coral: #ff6b5f;
  --pa-gold: #ffcf56;
  --pa-paper: #f6faf9;
  --pa-muted: #5c6f75;
  --bs-secondary-rgb: 92, 111, 117;
}

html { scroll-behavior: smooth; }

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  color: var(--pa-ink);
  background: #fff;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.65;
}

main { position: relative; display: flex; flex: 1; flex-direction: column; }
main > .page-header:only-child { flex: 1; }

a { color: #08717d; }
a:hover { color: #054f58; }
code { color: #9d2940; overflow-wrap: anywhere; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--pa-teal); outline-offset: 3px; }
.hero :focus-visible, .page-header :focus-visible, .section-dark :focus-visible, .site-footer :focus-visible { outline-color: var(--pa-gold); }
.btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

.skip-link {
  position: fixed;
  top: .75rem;
  left: .75rem;
  z-index: 2000;
  padding: .65rem 1rem;
  background: #fff;
  color: var(--pa-deep);
  border-radius: .5rem;
}

.navbar {
  min-height: 72px;
  background: rgba(246, 250, 249, .97);
  box-shadow: 0 1px 0 rgba(7, 59, 76, .12);
  backdrop-filter: blur(12px);
}

.navbar-brand { color: var(--pa-deep); font-weight: 800; letter-spacing: -.025em; }
.navbar-brand:hover, .navbar-brand:focus { color: #054f58; }
.navbar-brand img { object-fit: contain; }
.navbar-toggler { min-width: 44px; min-height: 44px; }
.navbar .nav-link { min-height: 44px; color: #31525b; font-weight: 600; }
.navbar .nav-link:hover, .navbar .nav-link:focus, .navbar .nav-link.active { color: var(--pa-deep); }

.btn-support {
  color: #fff;
  background: #08717d;
  border-color: #08717d;
  font-weight: 800;
}
.btn-support:hover, .btn-support:focus { color: #fff; background: #054f58; border-color: #054f58; }

.hero {
  position: relative;
  overflow: hidden;
  min-height: 690px;
  padding: 10rem 0 7rem;
  color: #fff;
  background:
    radial-gradient(circle at 82% 22%, rgba(184, 242, 230, .22), transparent 26rem),
    linear-gradient(135deg, #052f3e 0%, #075c67 100%);
}

.hero::after {
  position: absolute;
  right: -10rem;
  bottom: -18rem;
  width: 40rem;
  height: 40rem;
  content: "";
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 50%;
  box-shadow: 0 0 0 4rem rgba(255,255,255,.025), 0 0 0 9rem rgba(255,255,255,.02);
}

.eyebrow {
  margin-bottom: 1rem;
  color: var(--pa-teal);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.hero .eyebrow { color: var(--pa-mint); }

.hero h1 {
  max-width: 820px;
  margin-bottom: 1.4rem;
  font-size: clamp(3rem, 7vw, 6.2rem);
  font-weight: 850;
  letter-spacing: -.055em;
  line-height: .96;
}

.hero-copy {
  max-width: 720px;
  color: rgba(255, 255, 255, .82);
  font-size: clamp(1.1rem, 2.3vw, 1.35rem);
}

.btn-download, .btn-adblock {
  padding: .85rem 1.2rem;
  border-radius: .7rem;
  font-weight: 800;
}
.btn-download { color: var(--pa-deep); background: var(--pa-mint); border-color: var(--pa-mint); }
.btn-download:hover { color: var(--pa-deep); background: #d6faf3; border-color: #d6faf3; }
.btn-adblock { color: #fff; border: 1px solid rgba(255,255,255,.55); }
.btn-adblock:hover { color: var(--pa-deep); background: #fff; border-color: #fff; }

.hero-meta { color: rgba(255,255,255,.68); font-size: .92rem; }
.hero-meta a { color: #fff; text-underline-offset: .2rem; }

.section { padding: 6rem 0; }
.section-soft { background: var(--pa-paper); }
.section-dark { color: #fff; background: var(--pa-deep); }
.section-impact { color: #fff; background: #0a4655; }
.section-title { max-width: 760px; margin-bottom: 3rem; }
.section-title h2, .page-header h1 { font-weight: 850; letter-spacing: -.04em; }
.section-title h2 { font-size: clamp(1.85rem, 3.5vw, 2.6rem); }
.section-title p { color: var(--pa-muted); font-size: 1.12rem; }
.section-dark .section-title p { color: rgba(255,255,255,.72); }
.section-dark .eyebrow, .section-impact .eyebrow { color: var(--pa-mint); }
.section-title-wide { max-width: none; }

.feature-card, .source-card, .download-card, .integration-card, .sponsor-panel {
  height: 100%;
  padding: 1.75rem;
  background: #fff;
  border: 1px solid #dce8e6;
  border-radius: 1rem;
}
.feature-number {
  display: inline-grid;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 1.2rem;
  color: #fff;
  background: var(--pa-teal);
  border-radius: .7rem;
  font-weight: 850;
  place-items: center;
}
.feature-card h3, .source-card h2, .download-card h2, .integration-card h3 { font-size: 1.22rem; font-weight: 800; }
.usage-category { scroll-margin-top: 96px; }
.usage-category + .usage-category { margin-top: 4rem; }
.feature-card p, .source-card p, .download-card p, .integration-card p { color: var(--pa-muted); }

.impact-card {
  height: 100%;
  padding: 1.6rem;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 1rem;
}
.impact-value {
  display: block;
  margin-bottom: .65rem;
  color: var(--pa-mint);
  font-size: clamp(2.2rem, 4vw, 3.3rem);
  letter-spacing: -.045em;
  line-height: 1;
}
.impact-card h3 { font-size: 1.05rem; font-weight: 800; }
.impact-card p { color: rgba(255,255,255,.66); font-size: .9rem; }

.sponsor-panel {
  padding: 2.5rem;
  text-align: center;
  border-style: dashed;
}
.sponsor-callout { max-width: 760px; }
.report-panel { top: 100px; height: auto; padding: 1.75rem; border-style: solid; }
.sponsor-grid img { width: 100%; max-width: 180px; max-height: 70px; object-fit: contain; }

.page-header {
  padding: 8.5rem 0 3rem;
  color: #fff;
  background: linear-gradient(135deg, #052f3e, #08717d);
}
.site-breadcrumb {
  position: absolute;
  top: 88px;
  right: 0;
  left: 0;
  z-index: 2;
  color: rgba(255,255,255,.72);
  font-size: .9rem;
}
.site-breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,.5); }
.site-breadcrumb a { color: #fff; text-underline-offset: .18rem; }
.site-breadcrumb .active { color: rgba(255,255,255,.72); }
.page-header h1 { max-width: 860px; font-size: clamp(2.25rem, 5vw, 3.75rem); line-height: 1.12; }
.page-header p { max-width: 760px; margin: 1rem 0 0; color: rgba(255,255,255,.78); font-size: 1.18rem; }
.page-header code, .hero code { color: var(--pa-mint); }

.content-section { padding: 3.5rem 0 4.5rem; }
.prose { max-width: 800px; }
/* Short explanations follow their grid; reading pages share one centered column. */
.prose-wide, .reading-layout .prose { max-width: none; }
.prose, .policy-callout, .feature-card, .source-card, .download-card, .integration-card { overflow-wrap: anywhere; }
.prose h2 { margin-top: 2.8rem; margin-bottom: 1rem; font-weight: 820; letter-spacing: -.025em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 2rem; font-size: 1.2rem; font-weight: 800; }
.prose p, .prose li { color: #354e56; }
.prose code { color: #9d2940; }

.download-url { word-break: break-all; font-size: .83rem; }

.policy-callout {
  padding: 1.5rem;
  background: #effaf8;
  border-left: .3rem solid var(--pa-teal);
  border-radius: 0 .8rem .8rem 0;
}
.review-callout { font-size: 1.05rem; }
.protection-test { scroll-margin-top: 96px; }
.command-block {
  overflow-x: auto;
  padding: 1.1rem;
  color: var(--pa-deep);
  background: #eaf7f5;
  border: 1px solid #c9e6e1;
  border-radius: .75rem;
  font-size: .82rem;
  white-space: pre-wrap;
}
.command-block code { color: var(--pa-deep); }

.accordion-button:not(.collapsed) { color: var(--pa-deep); background: #e9f7f4; box-shadow: none; }
.accordion-button:focus { border-color: var(--pa-teal); box-shadow: 0 0 0 .25rem rgba(8,126,139,.18); }
.accordion-button { font-weight: 750; }
.faq-item { scroll-margin-top: var(--pa-faq-offset, 92px); }
.faq-header { display: flex; align-items: stretch; }
.faq-header .accordion-button { width: auto; min-width: 0; flex: 1 1 auto; }
.faq-permalink {
  display: grid;
  width: 3rem;
  flex: 0 0 3rem;
  color: var(--pa-teal);
  background: #fff;
  border-left: 1px solid #dee2e6;
  font-size: 1rem;
  font-weight: 850;
  text-decoration: none;
  place-items: center;
}
.faq-permalink:hover, .faq-permalink:focus { color: var(--pa-deep); background: #f3faf8; text-decoration: underline; }

.site-footer { padding: 4.5rem 0 2rem; color: rgba(255,255,255,.72); background: #052f3e; }
.site-footer a { color: rgba(255,255,255,.82); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-brand { color: #fff !important; font-size: 1.45rem; font-weight: 850; }
.footer-heading { color: #fff; font-size: .82rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.site-footer li { margin-bottom: .45rem; }
.footer-bottom { margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.12); font-size: .83rem; }
.footer-bottom a { text-decoration: underline; text-underline-offset: .2em; }

@media (min-width: 992px) {
  .reading-layout main .container { max-width: 900px; }
}

@media (max-width: 991.98px) {
  .navbar-collapse { padding: 1rem 0 1.25rem; }
  .navbar .btn-support { margin-top: .75rem; }
}

@media (max-width: 575.98px) {
  .hero { min-height: auto; padding: 8.5rem 0 6.5rem; }
  .hero-actions .btn { width: 100%; }
  .section { padding: 4.5rem 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}