:root {
  --black: #050505;
  --black-2: #0d0e10;
  --black-3: #15171b;
  --white: #ffffff;
  --muted: #c7cad1;
  --muted-2: #969aa4;
  --yellow: #ffd400;
  --yellow-dark: #d8b400;
  --danger: #ff7d7d;
  --success: #62e6a7;
  --line: rgba(255,255,255,.18);
  --line-strong: rgba(255,255,255,.38);
  --shadow: 0 25px 70px rgba(0,0,0,.42);
  --radius: 1.4rem;
  --page: 1280px;
  --font-scale: 1;
  --line-scale: 1;
  --parallax-x: 0px;
  --parallax-y: 0px;
  --scroll-shift: 0px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--black);
  font-size: calc(18px * var(--font-scale));
}

body {
  margin: 0;
  min-width: 320px;
  color: var(--white);
  background:
    radial-gradient(circle at 15% 10%, rgba(255,212,0,.11), transparent 28rem),
    radial-gradient(circle at 85% 35%, rgba(255,212,0,.07), transparent 30rem),
    var(--black);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 520;
  line-height: calc(1.62 * var(--line-scale));
  overflow-x: hidden;
}

body.yellow-mode {
  --black: #ffd400;
  --black-2: #f3c900;
  --black-3: #e1ba00;
  --white: #050505;
  --muted: #262626;
  --muted-2: #3d3d3d;
  --yellow: #050505;
  --yellow-dark: #252525;
  --line: rgba(0,0,0,.24);
  --line-strong: rgba(0,0,0,.48);
  background: #ffd400;
}

body.underline-links a,
body.underline-links .text-link {
  text-decoration: underline !important;
  text-decoration-thickness: .16em !important;
  text-underline-offset: .2em !important;
}

body.reduced-motion *,
body.reduced-motion *::before,
body.reduced-motion *::after {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  scroll-behavior: auto !important;
  transition-duration: .001ms !important;
}

a,
button,
select,
input {
  font: inherit;
}

a {
  color: var(--yellow);
}

button,
select,
input {
  min-height: 3rem;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  cursor: pointer;
}

:focus-visible {
  outline: .25rem solid var(--yellow);
  outline-offset: .25rem;
}

::selection {
  color: var(--black);
  background: var(--yellow);
}

.skip-link {
  position: fixed;
  z-index: 9999;
  left: 1rem;
  top: -8rem;
  padding: .8rem 1rem;
  color: var(--black);
  background: var(--yellow);
  font-weight: 900;
  text-decoration: none;
}

.skip-link:focus {
  top: 1rem;
}

.legal-bar {
  position: relative;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .55rem max(1rem, calc((100vw - var(--page)) / 2));
  color: #050505;
  background: #ffd400;
  border-bottom: 2px solid #050505;
  font-size: .82rem;
  line-height: 1.25;
}

.legal-bar p {
  margin: 0;
}

.legal-bar__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .35rem;
}

.legal-bar button {
  min-height: auto;
  padding: .25rem .4rem;
  color: #050505;
  background: transparent;
  border: 0;
  font-weight: 850;
  text-decoration: underline;
  text-underline-offset: .18rem;
}

.site-header {
  position: sticky;
  z-index: 90;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 5.1rem;
  padding: .8rem max(1rem, calc((100vw - var(--page)) / 2));
  background: color-mix(in srgb, var(--black) 88%, transparent);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(18px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  color: var(--white);
  text-decoration: none;
}

.brand__mark {
  width: 3rem;
  height: 3rem;
  overflow: visible;
}

.brand__mark circle,
.brand__mark path {
  fill: none;
  stroke: var(--yellow);
  stroke-width: 4;
}

.brand strong,
.brand small {
  display: block;
}

.brand strong {
  font-size: 1.05rem;
  line-height: 1.05;
}

.brand small {
  margin-top: .18rem;
  color: var(--muted);
  font-size: .68rem;
  font-weight: 760;
  text-transform: uppercase;
  letter-spacing: .09em;
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .4rem;
}

.site-nav a,
.site-nav button {
  min-height: auto;
  padding: .65rem .7rem;
  color: var(--white);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: .84rem;
  font-weight: 820;
  text-decoration: none;
}

.site-nav a:hover,
.site-nav button:hover {
  border-color: var(--line-strong);
}

.nav-tool-button {
  color: var(--black) !important;
  background: var(--yellow) !important;
}

.nav-count {
  display: inline-grid;
  place-items: center;
  min-width: 1.45rem;
  height: 1.45rem;
  margin-left: .25rem;
  padding: 0 .25rem;
  color: var(--black);
  background: var(--yellow);
  border-radius: 50%;
  font-size: .7rem;
}

.menu-button {
  display: none;
  padding: .6rem .8rem;
  color: var(--black);
  background: var(--yellow);
  border: 0;
  border-radius: .7rem;
  font-weight: 900;
}

.hero {
  position: relative;
  isolation: isolate;
  min-height: calc(100svh - 7.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(22rem, .94fr);
  align-items: center;
  gap: 2rem;
  max-width: 1500px;
  margin: auto;
  padding: clamp(4rem, 9vw, 8rem) max(1rem, calc((100vw - var(--page)) / 2)) 5rem;
  overflow: hidden;
}

.hero__mesh {
  position: absolute;
  z-index: -2;
  inset: 0;
  opacity: .32;
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 4rem 4rem;
  mask-image: radial-gradient(circle at 50% 50%, black, transparent 76%);
  transform: translate3d(calc(var(--parallax-x) * -.12), calc(var(--parallax-y) * -.12 + var(--scroll-shift) * .15), 0);
}

.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 38rem;
  height: 38rem;
  right: 1%;
  top: 8%;
  border: 1px solid rgba(255,212,0,.22);
  border-radius: 50%;
  box-shadow: 0 0 8rem rgba(255,212,0,.11);
}

.hero__content {
  position: relative;
  z-index: 2;
  max-width: 54rem;
}

.kicker {
  margin: 0 0 .8rem;
  color: var(--yellow);
  font-size: .76rem;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .14em;
}

h1,
h2,
h3 {
  text-wrap: balance;
}

h1 {
  max-width: 12ch;
  margin: 0;
  font-size: clamp(3.5rem, 8vw, 7.8rem);
  line-height: .88;
  letter-spacing: -.075em;
}

h1 span {
  display: block;
  color: var(--yellow);
}

.hero__lead {
  max-width: 48rem;
  margin: 1.6rem 0 0;
  color: var(--muted);
  font-size: clamp(1.12rem, 2vw, 1.45rem);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: 2rem;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.2rem;
  padding: .82rem 1.05rem;
  border: 2px solid transparent;
  border-radius: .75rem;
  font-weight: 920;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.button:hover {
  transform: translateY(-2px);
}

.button--yellow {
  color: var(--black);
  background: var(--yellow);
  border-color: var(--yellow);
  box-shadow: 0 .45rem 0 rgba(255,212,0,.2);
}

.button--outline {
  color: var(--white);
  background: transparent;
  border-color: var(--line-strong);
}

.button--outline:hover {
  border-color: var(--yellow);
}

.button--compact {
  min-height: 2.6rem;
  padding: .55rem .8rem;
  font-size: .82rem;
}

.button--text {
  min-height: auto;
  padding: .4rem 0;
  color: var(--muted);
  background: transparent;
  border: 0;
}

.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin: 2.3rem 0 0;
  padding: 0;
  list-style: none;
}

.hero__facts li {
  display: grid;
  gap: .05rem;
}

.hero__facts strong {
  color: var(--yellow);
  font-size: 1.6rem;
  line-height: 1;
}

.hero__facts span {
  color: var(--muted);
  font-size: .76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .09em;
}

.hero__visual {
  display: grid;
  place-items: center;
  min-width: 0;
  transform: translate3d(calc(var(--parallax-x) * .18), calc(var(--parallax-y) * .18 + var(--scroll-shift) * -.08), 0);
}

.rights-orbit {
  width: min(100%, 42rem);
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 0 2rem rgba(255,212,0,.10));
}

.orbit-ring,
.globe-lines circle,
.globe-lines ellipse,
.route,
.centre-mark circle,
.centre-mark path {
  fill: none;
  vector-effect: non-scaling-stroke;
}

.orbit-ring {
  stroke: rgba(255,255,255,.15);
  stroke-width: 2;
  transform-origin: center;
}

.orbit-ring--one {
  stroke: rgba(255,212,0,.28);
  stroke-dasharray: 8 14;
  animation: spin 28s linear infinite;
}

.orbit-ring--two {
  stroke-dasharray: 4 12;
  animation: spin-reverse 23s linear infinite;
}

.orbit-ring--three {
  stroke-dasharray: 14 10;
  animation: spin 32s linear infinite;
}

.globe-lines circle,
.globe-lines ellipse {
  stroke: rgba(255,255,255,.27);
  stroke-width: 2;
}

.route {
  stroke: var(--yellow);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 9 13;
  animation: dash 12s linear infinite;
}

.route--two {
  animation-delay: -4s;
}

.route--three {
  animation-delay: -8s;
}

.node {
  fill: var(--yellow);
  transform-origin: center;
  animation: pulse 2.5s ease-in-out infinite;
}

.node--two,
.node--five {
  animation-delay: -.7s;
}

.node--three,
.node--six {
  animation-delay: -1.4s;
}

.centre-mark circle,
.centre-mark path {
  stroke: var(--yellow);
  stroke-width: 5;
}

.centre-mark {
  transform-origin: center;
  animation: breathe 4s ease-in-out infinite;
}

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 1.2rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  color: var(--muted-2);
  font-size: .7rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .12em;
  transform: translateX(-50%);
}

.scroll-cue span {
  width: .55rem;
  height: 1rem;
  border: 1px solid var(--yellow);
  border-radius: 999px;
  position: relative;
}

.scroll-cue span::after {
  content: "";
  position: absolute;
  left: 50%;
  top: .15rem;
  width: .15rem;
  height: .15rem;
  background: var(--yellow);
  border-radius: 50%;
  transform: translateX(-50%);
  animation: scroll-dot 1.8s ease-in-out infinite;
}

.trust-strip {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem max(1rem, calc((100vw - var(--page)) / 2));
  background: var(--yellow);
  color: var(--black);
  font-size: .86rem;
  font-weight: 760;
}

.trust-strip p {
  margin: 0;
}

.trust-strip a {
  color: var(--black);
  font-weight: 950;
}

.section-shell {
  width: min(var(--page), calc(100% - 2rem));
  margin-inline: auto;
  padding-block: clamp(4.5rem, 9vw, 8rem);
}

.section-heading {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(18rem, .6fr);
  align-items: end;
  gap: 2rem;
  margin-bottom: 2rem;
}

.section-heading h2 {
  max-width: 14ch;
  margin: 0;
  font-size: clamp(2.5rem, 5.5vw, 5rem);
  line-height: .94;
  letter-spacing: -.055em;
}

.section-heading > p {
  margin: 0;
  color: var(--muted);
  font-size: 1.02rem;
}

.finder {
  position: relative;
}

.finder::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 3rem -25vw auto;
  height: 45rem;
  background: radial-gradient(circle, rgba(255,212,0,.08), transparent 62%);
  pointer-events: none;
}

.finder-controls {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: .85rem;
}

.control-card {
  position: relative;
  min-width: 0;
  padding: 1.1rem;
  background: var(--black-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.control-card--featured {
  border-color: rgba(255,212,0,.65);
}

.step-number {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  margin-bottom: 1rem;
  color: var(--black);
  background: var(--yellow);
  border-radius: 50%;
  font-weight: 950;
}

.control-card label {
  display: block;
  margin-bottom: .45rem;
  font-weight: 900;
}

.control-card select,
.control-card input {
  width: 100%;
  padding: .72rem;
  color: var(--white);
  background: var(--black);
  border: 1px solid var(--line-strong);
  border-radius: .65rem;
}

.control-card option {
  color: #fff;
  background: #050505;
}

.control-card p {
  margin: .65rem 0 0;
  color: var(--muted-2);
  font-size: .76rem;
}

.topic-scroller {
  display: flex;
  gap: .5rem;
  margin-top: 1rem;
  padding-bottom: .5rem;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--yellow) var(--black-2);
}

.topic-button {
  flex: 0 0 auto;
  min-height: 2.7rem;
  padding: .55rem .78rem;
  color: var(--white);
  background: var(--black-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 880;
}

.topic-button:hover,
.topic-button.is-active {
  color: var(--black);
  background: var(--yellow);
  border-color: var(--yellow);
}

.results-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin: 2rem 0 1rem;
}

.results-heading h3 {
  margin: 0;
  font-size: clamp(1.7rem, 3.2vw, 2.7rem);
  line-height: 1;
  letter-spacing: -.035em;
}

.rights-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20rem;
  gap: 1rem;
  align-items: start;
}

.rights-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 1rem;
}

.right-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 1.25rem;
  background:
    linear-gradient(145deg, rgba(255,255,255,.035), transparent 42%),
    var(--black-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 0 0 rgba(0,0,0,0);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.right-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255,212,0,.55);
  box-shadow: var(--shadow);
}

.right-badges {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}

.right-badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.7rem;
  padding: .25rem .45rem;
  color: var(--muted);
  background: var(--black);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .65rem;
  font-weight: 850;
  line-height: 1.15;
}

.right-badge--status {
  color: var(--black);
  background: var(--yellow);
  border-color: var(--yellow);
}

.right-card h4 {
  margin: .8rem 0 .55rem;
  font-size: 1.35rem;
  line-height: 1.07;
  letter-spacing: -.025em;
}

.right-card > p {
  margin: 0 0 .8rem;
  color: var(--muted);
}

.right-practical {
  margin: .2rem 0 .8rem;
  padding: .9rem;
  color: var(--white);
  background: var(--black);
  border-left: .3rem solid var(--yellow);
  border-radius: .3rem .8rem .8rem .3rem;
}

.right-practical strong {
  display: block;
  margin-bottom: .25rem;
  color: var(--yellow);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.right-warning {
  margin-bottom: .8rem;
  padding: .75rem;
  color: var(--black);
  background: #ffdca1;
  border-radius: .7rem;
  font-size: .8rem;
}

.right-source {
  margin-top: auto;
  padding-top: .9rem;
  border-top: 1px solid var(--line);
}

.right-source a {
  display: inline-block;
  font-weight: 900;
  word-break: break-word;
}

.right-source small {
  display: block;
  margin-top: .35rem;
  color: var(--muted-2);
}

.pack-button {
  width: 100%;
  margin-top: .8rem;
  padding: .72rem;
  color: var(--black);
  background: var(--yellow);
  border: 2px solid var(--yellow);
  border-radius: .7rem;
  font-weight: 920;
}

.pack-button.is-added {
  color: var(--success);
  background: transparent;
  border-color: var(--success);
}

.empty-state {
  grid-column: 1 / -1;
  padding: 2rem;
  color: var(--muted);
  background: var(--black-2);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  text-align: center;
}

.pack-sidebar {
  position: sticky;
  top: 6rem;
  padding: 1.1rem;
  background: var(--yellow);
  color: var(--black);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.pack-sidebar .kicker {
  color: var(--black);
}

.pack-sidebar h3 {
  margin: 0;
  font-size: 1.8rem;
  line-height: 1;
  letter-spacing: -.04em;
}

.pack-sidebar__top > p:last-child {
  margin: .5rem 0 0;
  font-weight: 800;
}

.pack-list--mini {
  max-height: 18rem;
  margin: 1rem 0;
  overflow: auto;
}

.pack-mini-item {
  padding: .6rem 0;
  border-bottom: 1px solid rgba(0,0,0,.25);
}

.pack-mini-item strong {
  display: block;
  line-height: 1.15;
}

.pack-mini-item button {
  min-height: auto;
  padding: .25rem 0;
  color: var(--black);
  background: transparent;
  border: 0;
  font-size: .72rem;
  font-weight: 900;
  text-decoration: underline;
}

.pack-sidebar__actions {
  display: grid;
  gap: .35rem;
}

.pack-sidebar .button--yellow {
  color: var(--white);
  background: var(--black);
  border-color: var(--black);
  box-shadow: none;
}

.pack-sidebar .button--text {
  color: var(--black);
}

.privacy-note {
  margin: .8rem 0 0;
  font-size: .7rem;
  line-height: 1.4;
}

.quick-actions {
  position: relative;
}

.cheat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 1rem;
}

.cheat-card {
  position: relative;
  overflow: hidden;
  padding: 1.25rem;
  background: var(--black-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.cheat-card::after {
  content: "";
  position: absolute;
  width: 10rem;
  height: 10rem;
  right: -5rem;
  top: -5rem;
  border: 1px solid rgba(255,212,0,.25);
  border-radius: 50%;
}

.cheat-card svg {
  width: 3rem;
  height: 3rem;
  fill: none;
  stroke: var(--yellow);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cheat-card__label {
  margin: 1rem 0 .5rem;
  color: var(--yellow);
  font-size: .72rem;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.cheat-card h3 {
  margin: 0;
  font-size: 1.3rem;
  line-height: 1.08;
}

.cheat-card ul {
  margin: 1rem 0;
  padding-left: 1.2rem;
  color: var(--muted);
  font-size: .84rem;
}

.cheat-card li + li {
  margin-top: .35rem;
}

.text-link {
  min-height: auto;
  padding: .25rem 0;
  color: var(--yellow);
  background: transparent;
  border: 0;
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: .2rem;
}

.principles {
  position: relative;
}

.animated-rule {
  width: 100%;
  margin-bottom: 2.5rem;
  overflow: hidden;
}

.animated-rule svg {
  width: 100%;
  height: 7rem;
  overflow: visible;
}

.animated-rule path {
  fill: none;
  stroke: rgba(255,212,0,.7);
  stroke-width: 3;
  stroke-dasharray: 12 16;
  animation: dash 14s linear infinite;
}

.animated-rule circle {
  fill: var(--yellow);
  animation: pulse 2.8s ease-in-out infinite;
}

.principle-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 1rem;
}

.principle-grid article {
  padding: 1.2rem;
  border-top: .35rem solid var(--yellow);
  background: var(--black-2);
}

.principle-grid span {
  color: var(--yellow);
  font-weight: 950;
}

.principle-grid h3 {
  margin: 1rem 0 .4rem;
  font-size: 1.3rem;
}

.principle-grid p {
  margin: 0;
  color: var(--muted);
}

.coverage-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1rem;
}

.coverage-grid article {
  padding: 1.2rem;
  background: var(--black-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.coverage-grid strong,
.coverage-grid span {
  display: block;
}

.coverage-grid strong {
  font-size: 1.2rem;
}

.coverage-grid span {
  margin-top: .25rem;
  color: var(--muted);
  font-size: .82rem;
}

.meter {
  height: .55rem;
  margin-top: 1rem;
  background: var(--black);
  border-radius: 999px;
  overflow: hidden;
}

.meter i {
  display: block;
  width: var(--value);
  height: 100%;
  background: var(--yellow);
  transform-origin: left;
  animation: meter-grow 1.2s ease both;
}

.ownership__panel {
  display: grid;
  grid-template-columns: minmax(0,1.2fr) minmax(18rem,.8fr);
  gap: 2rem;
  padding: clamp(1.4rem, 4vw, 3rem);
  color: var(--black);
  background: var(--yellow);
  border-radius: calc(var(--radius) * 1.25);
}

.ownership h2 {
  max-width: 13ch;
  margin: 0;
  font-size: clamp(2.4rem, 5vw, 4.7rem);
  line-height: .95;
  letter-spacing: -.055em;
}

.ownership p {
  max-width: 55rem;
}

.ownership .kicker {
  color: var(--black);
}

.ownership__contact {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .8rem;
  padding: 1.2rem;
  color: var(--white);
  background: var(--black);
  border-radius: var(--radius);
}

.ownership__contact span {
  color: var(--muted);
}

.ownership__contact a {
  font-size: clamp(1rem, 2vw, 1.35rem);
  font-weight: 950;
  word-break: break-word;
}

.site-footer {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem 2rem;
  padding: 2rem max(1rem, calc((100vw - var(--page)) / 2));
  background: var(--black-2);
  border-top: 1px solid var(--line);
}

.site-footer p {
  margin: .25rem 0 0;
  color: var(--muted);
}

.site-footer nav {
  display: flex;
  align-items: start;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .35rem;
}

.site-footer button {
  min-height: auto;
  padding: .35rem;
  color: var(--yellow);
  background: transparent;
  border: 0;
  font-weight: 850;
  text-decoration: underline;
}

.footer-small {
  grid-column: 1 / -1;
  font-size: .72rem;
}

.floating-tools {
  position: fixed;
  z-index: 80;
  right: 1rem;
  bottom: 1rem;
  display: grid;
  place-items: center;
  gap: .12rem;
  width: 4.3rem;
  height: 4.3rem;
  color: var(--black);
  background: var(--yellow);
  border: 2px solid var(--black);
  border-radius: 50%;
  box-shadow: 0 .8rem 2rem rgba(0,0,0,.35);
  font-size: .65rem;
  font-weight: 950;
}

.floating-tools svg {
  width: 1.7rem;
  height: 1.7rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.reading-guide {
  position: fixed;
  z-index: 70;
  left: 0;
  top: 50%;
  display: none;
  width: 100%;
  height: 3px;
  background: var(--yellow);
  box-shadow: 0 0 1rem var(--yellow);
  pointer-events: none;
}

.reading-guide.is-active {
  display: block;
}

.app-dialog {
  width: min(56rem, calc(100% - 1rem));
  max-height: calc(100svh - 2rem);
  padding: 0;
  color: var(--white);
  background: var(--black-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: auto;
}

.app-dialog::backdrop {
  background: rgba(0,0,0,.78);
  backdrop-filter: blur(8px);
}

.dialog-head {
  position: sticky;
  z-index: 2;
  top: 0;
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem;
  background: color-mix(in srgb, var(--black-2) 94%, transparent);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px);
}

.dialog-head h2 {
  margin: 0;
  font-size: clamp(1.8rem, 4vw, 3rem);
  line-height: 1;
  letter-spacing: -.04em;
}

.dialog-close {
  padding: .55rem .7rem;
  color: var(--black);
  background: var(--yellow);
  border: 0;
  border-radius: .6rem;
  font-weight: 900;
}

.policy-copy,
.tools-grid,
#packDialog > p,
#packFull,
.dialog-actions,
.tool-status {
  margin-inline: 1.1rem;
}

.policy-copy {
  padding-block: 1rem 1.5rem;
}

.policy-copy h3 {
  margin: 1.4rem 0 .3rem;
  color: var(--yellow);
}

.policy-copy p,
.policy-copy li {
  color: var(--muted);
}

.policy-copy a {
  font-weight: 900;
}

.storage-choice {
  display: grid;
  gap: .8rem;
  margin-block: 1rem;
  padding: 1rem;
  color: var(--black);
  background: var(--yellow);
  border-radius: .8rem;
}

.storage-choice .button--yellow {
  color: var(--white);
  background: var(--black);
  border-color: var(--black);
  box-shadow: none;
}

.tools-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: .7rem;
  padding-block: 1rem;
}

.tools-grid button {
  display: grid;
  grid-template-columns: 3rem 1fr;
  align-items: center;
  gap: .8rem;
  min-height: 4.5rem;
  padding: .8rem;
  color: var(--white);
  background: var(--black);
  border: 1px solid var(--line);
  border-radius: .8rem;
  text-align: left;
}

.tools-grid strong {
  color: var(--yellow);
  font-size: 1.35rem;
  text-align: center;
}

.tools-grid span {
  font-weight: 850;
}

.tools-grid button.is-active {
  color: var(--black);
  background: var(--yellow);
}

.tools-grid button.is-active strong {
  color: var(--black);
}

.tool-status {
  padding-bottom: 1rem;
  color: var(--muted);
}

.pack-list {
  display: grid;
  gap: .7rem;
}

.pack-full-item {
  padding: 1rem;
  background: var(--black);
  border: 1px solid var(--line);
  border-radius: .8rem;
}

.pack-full-item h3 {
  margin: .5rem 0;
}

.pack-full-item p {
  color: var(--muted);
}

.pack-full-item button {
  min-height: auto;
  padding: .3rem 0;
  color: var(--danger);
  background: transparent;
  border: 0;
  font-weight: 900;
  text-decoration: underline;
}

.dialog-actions {
  position: sticky;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  padding-block: 1rem;
  background: var(--black-2);
  border-top: 1px solid var(--line);
}

.noscript-warning {
  position: fixed;
  z-index: 999;
  inset: auto 1rem 1rem;
  padding: 1rem;
  color: #050505;
  background: #ffd400;
  border: 3px solid #050505;
  font-weight: 900;
}

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

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

@keyframes dash {
  to { stroke-dashoffset: -220; }
}

@keyframes pulse {
  0%, 100% { opacity: .45; transform: scale(.82); }
  50% { opacity: 1; transform: scale(1.25); }
}

@keyframes breathe {
  0%, 100% { transform: scale(.96); opacity: .75; }
  50% { transform: scale(1.04); opacity: 1; }
}

@keyframes scroll-dot {
  0%, 100% { transform: translate(-50%, 0); opacity: 0; }
  45% { opacity: 1; }
  80% { transform: translate(-50%, .45rem); opacity: 0; }
}

@keyframes meter-grow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@media (max-width: 1120px) {
  .site-nav {
    position: absolute;
    top: calc(100% + 1px);
    left: 1rem;
    right: 1rem;
    display: none;
    padding: .8rem;
    background: var(--black-2);
    border: 1px solid var(--line);
    border-radius: 0 0 1rem 1rem;
    box-shadow: var(--shadow);
  }

  .site-nav.is-open {
    display: grid;
  }

  .site-nav a,
  .site-nav button {
    width: 100%;
    text-align: left;
  }

  .menu-button {
    display: block;
  }

  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .hero__content {
    max-width: 60rem;
  }

  .hero__visual {
    margin-top: -3rem;
  }

  .rights-orbit {
    width: min(88vw, 37rem);
  }

  .finder-controls {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .cheat-grid,
  .principle-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

@media (max-width: 850px) {
  .legal-bar {
    display: block;
  }

  .legal-bar__links {
    justify-content: flex-start;
    margin-top: .35rem;
  }

  .section-heading,
  .ownership__panel {
    grid-template-columns: 1fr;
  }

  .section-heading h2 {
    max-width: 18ch;
  }

  .rights-layout {
    grid-template-columns: 1fr;
  }

  .pack-sidebar {
    position: static;
  }

  .coverage-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .site-footer {
    grid-template-columns: 1fr;
  }

  .site-footer nav {
    justify-content: flex-start;
  }
}

@media (max-width: 620px) {
  html {
    font-size: calc(17px * var(--font-scale));
  }

  .brand small {
    display: none;
  }

  .brand__mark {
    width: 2.6rem;
    height: 2.6rem;
  }

  .hero {
    padding-top: 4rem;
  }

  h1 {
    font-size: clamp(3.3rem, 17vw, 5rem);
  }

  .hero__visual {
    margin-inline: -3rem;
  }

  .scroll-cue {
    display: none;
  }

  .trust-strip {
    display: grid;
  }

  .finder-controls,
  .rights-grid,
  .cheat-grid,
  .principle-grid,
  .coverage-grid,
  .tools-grid {
    grid-template-columns: 1fr;
  }

  .results-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .floating-tools {
    width: 3.8rem;
    height: 3.8rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }

  .parallax-layer {
    transform: none !important;
  }
}

@media print {
  .legal-bar,
  .site-header,
  .hero,
  .trust-strip,
  .finder-controls,
  .topic-scroller,
  .results-heading,
  .rights-grid,
  .pack-sidebar,
  .quick-actions,
  .principles,
  .coverage,
  .ownership,
  .site-footer,
  .floating-tools,
  .dialog-head,
  .dialog-actions {
    display: none !important;
  }

  body {
    color: #000;
    background: #fff;
  }

  #packDialog[open] {
    position: static;
    width: 100%;
    max-height: none;
    color: #000;
    background: #fff;
    border: 0;
    box-shadow: none;
  }

  .pack-full-item {
    break-inside: avoid;
    color: #000;
    background: #fff;
    border: 1px solid #777;
  }

  .pack-full-item p,
  #packDialog > p {
    color: #000;
  }
}

.mobile-nav-toggle{align-items:center;gap:.45rem}
@media(max-width:1120px){
  .mobile-nav-toggle{display:inline-flex}
  .site-nav{max-height:calc(100vh - 8rem);overflow:auto}
  .site-nav.is-open{display:grid;grid-template-columns:1fr}
}