:root {
  --page: #00040e;
  --field: #050e20;
  --surface: #0f162c;
  --surface-strong: #131e38;
  --rule: #29436e;
  --text: #e8ecf6;
  --muted: #aeb8d3;
  --muted-deep: #7f8aa8;
  --white: #ffffff;
  --blue: #127bf9;
  --cyan: #00ebff;
  --violet: #5831e7;
  --focus: #7037ed;
  --gold: #ffc127;
  --pale-gold: #ffe389;
  --gradient: linear-gradient(105deg, #014381 0%, #127bf9 38%, #5a30d0 100%);
  --serif: Iowan Old Style, Baskerville, Georgia, Times New Roman, serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --content-width: 74rem;
  --chrome-width: 110rem;
  --reading-width: 43rem;
  --gutter: clamp(1.1rem, 4vw, 3.25rem);
  --shadow: 0 1rem 2.6rem rgb(0 0 0 / 0.3);
}

* {
  box-sizing: border-box;
}

html {
  background: var(--page);
  color-scheme: dark;
}

body {
  min-width: 20rem;
  margin: 0;
  background:
    radial-gradient(circle at 92% 8%, rgb(18 123 249 / 0.13), transparent 26rem),
    radial-gradient(circle at 8% 78%, rgb(88 49 231 / 0.1), transparent 28rem),
    var(--page);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.58;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.16em;
}

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

button {
  color: inherit;
}

:focus-visible {
  outline: 0.2rem solid var(--cyan);
  outline-offset: 0.22rem;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: fixed;
  z-index: 20;
  top: 0.7rem;
  left: 0.7rem;
  padding: 0.6rem 0.85rem;
  transform: translateY(-180%);
  background: var(--white);
  color: var(--page);
  font-weight: 800;
  transition: transform 160ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

.site-header {
  position: sticky;
  z-index: 10;
  top: 0;
  border-bottom: 1px solid rgb(41 67 110 / 0.7);
  background: rgb(0 4 14 / 0.93);
  backdrop-filter: blur(1rem);
}

.hero,
.page-intro,
.section-heading,
.process-grid,
.comparison-wrap,
.outcomes,
.support-layout,
.policy-layout {
  width: min(calc(100% - (var(--gutter) * 2)), var(--content-width));
  margin-inline: auto;
}

/* The header and footer bars take the width of the window rather than the
   reading column, so the navigation labels keep the room a wide screen
   actually offers. Reading text stays at --content-width, where a line length
   is comfortable; only the surrounding bars widen. */
.header-inner,
.site-footer-inner {
  width: min(calc(100% - (var(--gutter) * 2)), var(--chrome-width));
  margin-inline: auto;
}

.header-inner {
  display: flex;
  align-items: center;
  min-height: 4.6rem;
  gap: 1.1rem;
}

.brand,
.site-nav,
.header-actions {
  flex: 0 0 auto;
}

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

.brand:hover {
  color: var(--white);
}

.brand-bars {
  display: flex;
  align-items: end;
  gap: 0.15rem;
  height: 2rem;
  padding-bottom: 0.04rem;
}

.brand-bars span {
  display: block;
  width: 0.19rem;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--cyan), var(--blue));
  box-shadow: 0 0 0.65rem rgb(0 235 255 / 0.34);
}

.brand-bars span:nth-child(1),
.brand-bars span:nth-child(7) { height: 0.72rem; }
.brand-bars span:nth-child(2),
.brand-bars span:nth-child(6) { height: 1.12rem; }
.brand-bars span:nth-child(3),
.brand-bars span:nth-child(5) { height: 1.58rem; }
.brand-bars span:nth-child(4) { height: 2rem; }

.brand-copy {
  display: grid;
  gap: 0.02rem;
  line-height: 1;
}

.brand-acronym {
  font-size: 1.38rem;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.brand-name {
  color: var(--muted);
  font-size: 0.5rem;
  font-weight: 750;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}

.site-nav {
  margin-inline-start: auto;
}

.site-nav ul {
  display: flex;
  align-items: flex-start;
  gap: clamp(0.6rem, 1.5vw, 1.35rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a {
  display: inline-block;
  color: var(--text);
  font-size: 0.84rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--cyan);
}

.site-nav a::after {
  display: block;
  width: 1.2rem;
  height: 0.12rem;
  margin-top: 0.26rem;
  background: transparent;
  content: "";
}

.site-nav a[aria-current="page"]::after {
  background: var(--gold);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.language-control,
.menu-toggle {
  min-height: 2.45rem;
  border: 1px solid var(--rule);
  border-radius: 0.38rem;
  background: var(--surface);
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 700;
}

.language-control {
  display: inline-flex;
  align-items: stretch;
  overflow: hidden;
}

.language-control:focus-within {
  outline: 0.2rem solid var(--cyan);
  outline-offset: 0.22rem;
}

.language-select {
  max-width: 12.5rem;
  min-height: 2.45rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.35rem 1.8rem 0.35rem 0.6rem;
}

.language-select:focus-visible {
  outline: 0;
}

.language-flag {
  display: inline-grid;
  width: 2.45rem;
  place-items: center;
  flex: 0 0 2.45rem;
  border-left: 1px solid var(--rule);
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 1.18rem;
  line-height: 1;
  user-select: none;
}

.menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.7rem;
}

/* The header collapses to the Menu command whenever the brand, every
   navigation label, and the language control cannot share one line. The
   labels are longer in some languages, so site.js measures the width where
   they stop fitting instead of assuming one. The class is in the page as
   delivered, so a browser that never runs the script still gets the Menu
   command rather than a row that runs over the logo. */
.site-header.nav-collapsed .menu-toggle {
  display: inline-flex;
}

.site-header.nav-collapsed .header-actions {
  margin-inline-start: auto;
}

.site-header.nav-collapsed .site-nav {
  position: absolute;
  top: calc(100% + 1px);
  right: 0;
  left: 0;
  display: none;
  margin-inline-start: 0;
  border-bottom: 1px solid var(--rule);
  background: #050e20;
}

.site-header.nav-collapsed .site-nav.is-open {
  display: block;
}

.site-header.nav-collapsed .site-nav ul {
  display: grid;
  gap: 0;
  width: min(calc(100% - (var(--gutter) * 2)), var(--chrome-width));
  margin-inline: auto;
  padding-block: 0.45rem 0.75rem;
}

.site-header.nav-collapsed .site-nav a {
  display: block;
  padding: 0.55rem 0;
}

.site-header.nav-collapsed .site-nav a::after {
  display: inline-block;
  width: 0.8rem;
  margin: 0 0 0.14rem 0.4rem;
}

main:focus {
  outline: none;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(19rem, 1.08fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  padding-block: clamp(2.75rem, 5vw, 4.5rem);
}


.hero-copy,
.page-intro-copy {
  position: relative;
  z-index: 1;
}

/* The eyebrow keeps this styling on whichever element carries it, including a
   page whose only heading is the eyebrow itself. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  color: var(--pale-gold);
  font-family: var(--sans);
  font-size: 0.71rem;
  font-weight: 800;
  letter-spacing: 0.105em;
  line-height: 1.25;
  text-transform: uppercase;
}

.eyebrow:not(:last-child) {
  margin-bottom: 0.85rem;
}

.eyebrow::before {
  width: 1.85rem;
  height: 1px;
  flex: 0 0 auto;
  background: var(--gold);
  content: "";
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2,
h3 {
  color: var(--white);
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.08;
}

h1 {
  margin-bottom: 0.85rem;
  font-size: clamp(1.75rem, 2.1vw, 2rem);
}

h2 {
  margin-bottom: 0.85rem;
  font-size: clamp(1.35rem, 1.6vw, 1.6rem);
}

h3 {
  margin-bottom: 0.55rem;
  font-size: clamp(1.15rem, 1.35vw, 1.35rem);
}

.lead,
.lede {
  max-width: var(--reading-width);
  color: var(--text);
  font-size: clamp(1rem, 1.25vw, 1.13rem);
}

.hero-note,
.statement {
  max-width: 39rem;
  margin: 1.25rem 0 0;
  padding: 0.75rem 0.9rem 0.75rem 1rem;
  border-left: 0.18rem solid var(--gold);
  background: linear-gradient(90deg, rgb(255 193 39 / 0.12), transparent);
  color: var(--pale-gold);
  font-size: 0.9rem;
}

.hero-actions,
.link-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.95rem;
  margin-top: 1.5rem;
}

.button-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  border: 1px solid rgb(255 255 255 / 0.22);
  border-radius: 0.45rem;
  padding: 0.62rem 1rem;
  background: var(--gradient);
  box-shadow: 0 0.7rem 1.6rem rgb(1 67 129 / 0.25);
  color: var(--white);
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}

.button-link:hover {
  background: linear-gradient(105deg, #0755a1 0%, #1689ff 38%, #6934e5 100%);
  color: var(--white);
}

.quiet-link {
  color: var(--pale-gold);
  font-size: 0.92rem;
  font-weight: 750;
}

.quiet-link:hover {
  color: var(--white);
}

.hero-media,
.photo-frame {
  position: relative;
}

.hero-media::before,
.photo-frame::before {
  position: absolute;
  z-index: -1;
  inset: 7% -5% -6% 11%;
  border: 1px solid rgb(0 235 255 / 0.19);
  background: radial-gradient(circle at 75% 28%, rgb(112 55 237 / 0.26), transparent 44%);
  content: "";
}

.hero-media picture,
.photo-frame picture {
  display: block;
  height: 100%;
}

.hero-media img,
.photo-frame img {
  width: 100%;
  height: clamp(16rem, 29vw, 25rem);
  border: 1px solid rgb(255 227 137 / 0.26);
  object-fit: cover;
  box-shadow: var(--shadow);
}

.hero-media img {
  object-position: 66% center;
}

.photo-frame.stage img {
  object-position: 60% center;
}

.photo-frame.listener img {
  object-position: 50% center;
}

.page-intro {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(17rem, 0.68fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  padding-block: clamp(2.75rem, 5vw, 4.25rem);
}

.compact-photo img {
  height: clamp(14rem, 25vw, 20rem);
}

.section {
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

.why-exists-hero-statement strong {
  display: block;
  font-weight: 750;
}

.why-exists-hero-statement strong + strong {
  margin-top: 0.26rem;
  color: var(--text);
}

.why-exists-threat-phrases,
.why-exists-points,
.why-exists-ending-inner,
.questions-list {
  width: min(calc(100% - (var(--gutter) * 2)), var(--content-width));
  margin-inline: auto;
}

/* The questions page carries no picture, so the intro keeps the shared page
   heading block but spans the full column instead of leaving an empty half. */
.questions-intro {
  grid-template-columns: minmax(0, 1fr);
}

.questions-list article {
  display: grid;
  grid-template-columns: minmax(13rem, 0.8fr) minmax(18rem, 1.2fr);
  align-items: start;
  gap: 0.85rem clamp(1.5rem, 3vw, 2.75rem);
  padding-block: 1.35rem;
  border-top: 1px solid rgb(41 67 110 / 0.82);
}

.questions-list article:last-child {
  border-bottom: 1px solid rgb(41 67 110 / 0.82);
}

.questions-list .step-number {
  margin-bottom: 0.5rem;
}

.questions-list h2 {
  margin-bottom: 0;
  font-size: clamp(1.05rem, 1.3vw, 1.28rem);
  line-height: 1.24;
}

.questions-list article > p {
  max-width: var(--reading-width);
  margin-bottom: 0;
  color: var(--muted);
}

.why-exists-threat-phrases {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.4rem;
  padding-block: 0.35rem;
}

.why-exists-threat-phrases h3 {
  margin: 0;
  color: var(--muted);
}

.why-exists-threat-phrases h3:nth-child(3n + 1),
.why-exists-threat-phrases h3:last-child {
  color: var(--pale-gold);
}

.why-exists-reason-lede {
  margin-bottom: 0;
}

.why-exists-points article {
  display: grid;
  grid-template-columns: minmax(12rem, 0.82fr) minmax(16rem, 1.18fr);
  align-items: start;
  gap: 1rem;
  padding-block: 1.15rem;
  border-top: 1px solid rgb(41 67 110 / 0.82);
}

.why-exists-points article:last-child {
  border-bottom: 1px solid rgb(41 67 110 / 0.82);
}

.why-exists-points h3 {
  margin: 0;
}

.why-exists-points article > p:last-child {
  margin: 0;
  color: var(--muted);
}

.why-exists-ending-inner {
  padding-block: 0.35rem;
}

.why-exists-ending-lines {
  display: grid;
  gap: 0.12rem;
  margin-bottom: 0;
}

.why-exists-ending-lines span {
  display: block;
  color: var(--muted-deep);
}

.why-exists-ending-lines span:last-child {
  color: var(--white);
}

.compact-section {
  border-block: 1px solid rgb(41 67 110 / 0.68);
  background:
    radial-gradient(circle at 94% 50%, rgb(88 49 231 / 0.12), transparent 25rem),
    var(--field);
}

.section-heading {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(15rem, 0.65fr);
  align-items: end;
  gap: 1.75rem;
  margin-bottom: clamp(1.55rem, 3.5vw, 2.5rem);
}

.section-heading h2 {
  margin-bottom: 0;
}

.compact-heading h2 {
  font-size: clamp(1.2rem, 1.4vw, 1.45rem);
  line-height: 1.25;
}

.section-heading > p {
  max-width: 32rem;
  margin-bottom: 0;
  color: var(--muted);
}

.comparison-section .section-heading {
  grid-template-columns: minmax(0, 1fr);
}

.process-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-block: 0;
  padding: 0;
  list-style: none;
}

.process-card,
.outcome {
  min-width: 0;
  border: 1px solid rgb(41 67 110 / 0.9);
  background: linear-gradient(145deg, rgb(19 30 56 / 0.9), rgb(5 14 32 / 0.9));
}

.process-card {
  padding: clamp(1.2rem, 2.5vw, 1.75rem);
}

.step-number,
.outcome-number {
  margin-bottom: 0.7rem;
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.13em;
  line-height: 1.2;
  text-transform: uppercase;
}

.process-card p:not(.step-number),
.outcome p:not(.outcome-number),
.support-layout p,
.policy-layout p {
  color: var(--muted);
}

.process-card p:last-child,
.outcome p:last-child {
  margin-bottom: 0;
}

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

.outcome {
  padding: clamp(1.2rem, 2.5vw, 1.65rem);
}

.comparison-wrap {
  overflow-x: auto;
  border: 1px solid var(--rule);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.comparison {
  width: 100%;
  min-width: 42rem;
  border-collapse: collapse;
  font-size: 0.91rem;
  line-height: 1.45;
}

.comparison caption {
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--rule);
  background: #0c1529;
  color: var(--pale-gold);
  font-size: 0.88rem;
  font-weight: 750;
  text-align: left;
}

.comparison th,
.comparison td {
  padding: 0.78rem 0.9rem;
  border-bottom: 1px solid rgb(41 67 110 / 0.72);
  text-align: left;
  vertical-align: top;
}

.comparison thead th {
  background: #111e39;
  color: var(--white);
  font-family: var(--serif);
  font-size: 1.04rem;
  font-weight: 600;
}

.comparison tbody th {
  width: 21%;
  color: var(--pale-gold);
  font-size: 0.82rem;
}

.comparison td {
  width: 39.5%;
  color: var(--muted);
}

.comparison td:first-of-type {
  color: var(--text);
}

.comparison tbody tr:last-child th,
.comparison tbody tr:last-child td {
  border-bottom: 0;
}

.support-layout,
.policy-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(18rem, 0.55fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  padding-block: clamp(2.75rem, 5vw, 4.25rem);
}

.compact-policy {
  grid-template-columns: minmax(0, 1fr);
}

.compact-policy .policy-copy {
  margin-inline: auto;
}

.contact-panel {
  align-self: start;
  padding: clamp(1.2rem, 2.8vw, 1.8rem);
  border: 1px solid var(--rule);
  border-top: 0.18rem solid var(--gold);
  background: linear-gradient(145deg, rgb(19 30 56 / 0.97), rgb(5 14 32 / 0.96));
  box-shadow: var(--shadow);
}

.contact-panel h2 {
  font-size: clamp(1.25rem, 1.6vw, 1.55rem);
}

.support-email {
  display: inline-block;
  margin-top: 0.85rem;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--pale-gold);
  cursor: pointer;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  font-weight: 800;
  overflow-wrap: anywhere;
  text-align: left;
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.16em;
}

.support-email:hover {
  color: var(--white);
}

.support-email-note {
  margin-top: 0.85rem;
  color: var(--muted);
}

.policy-copy {
  max-width: var(--reading-width);
}

.policy-aside {
  align-self: start;
  padding: 1.3rem;
  border-left: 0.18rem solid var(--gold);
  background: rgb(15 22 44 / 0.72);
}

.policy-aside h2 {
  font-size: 1.35rem;
}

.policy-aside p {
  margin-bottom: 0;
}

.site-footer {
  border-top: 1px solid var(--rule);
  background: #00030a;
}

.site-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.35rem;
}

.site-footer p {
  margin: 0;
  color: var(--muted-deep);
  font-size: 0.82rem;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.footer-links a {
  color: var(--text);
  font-size: 0.84rem;
  font-weight: 700;
}

@media (max-width: 1500px) {
  .header-inner {
    min-height: 4.35rem;
  }

  .hero,
  .page-intro,
  .support-layout,
  .policy-layout {
    grid-template-columns: 1fr;
  }

  .hero,
  .page-intro {
    gap: 2rem;
  }

  .hero-media,
  .page-intro .photo-frame {
    max-width: 47rem;
  }

  /* Once the picture spans the whole column, the decorative frame behind it
     can no longer bleed to the right without pushing the page sideways. */
  .hero-media::before,
  .photo-frame::before {
    inset: 7% 0 -6% 11%;
  }

  .section-heading {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }

  .outcomes {
    grid-template-columns: 1fr;
  }

  .process-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .brand-name {
    display: none;
  }

  .comparison-wrap {
    overflow-x: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .comparison {
    min-width: 0;
    display: block;
    font-size: 0.9rem;
    line-height: 1.48;
  }

  .comparison caption {
    display: block;
    border: 1px solid var(--rule);
  }

  .comparison thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .comparison tbody,
  .comparison tr,
  .comparison th,
  .comparison td {
    display: block;
    width: 100%;
  }

  .comparison tbody tr {
    margin-top: 1rem;
    border: 1px solid var(--rule);
    background: var(--surface);
  }

  .comparison tbody th,
  .comparison tbody tr:last-child th {
    width: 100%;
    padding: 0.8rem 1rem;
    border-bottom: 1px solid var(--rule);
    background: #111e39;
    font-size: 0.9rem;
  }

  .comparison td,
  .comparison tbody tr:last-child td {
    padding: 0.85rem 1rem;
    border-bottom: 0;
  }

  .comparison td + td {
    border-top: 1px solid rgb(41 67 110 / 0.72);
  }

  .comparison td::before {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--pale-gold);
    content: attr(data-column-label);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.04em;
  }
}

@media (max-width: 540px) {

  .header-inner {
    flex-wrap: wrap;
    gap: 0.65rem;
    padding-block: 0.55rem;
  }

  .site-header.nav-collapsed .header-actions {
    order: 3;
    flex: 1 0 100%;
    margin-inline-start: 0;
  }

  .language-control {
    width: 100%;
  }

  .brand-acronym {
    font-size: 1.25rem;
  }

  .language-select {
    width: auto;
    max-width: none;
    flex: 1 1 auto;
  }

  .hero,
  .page-intro {
    padding-block: 2.35rem;
  }

  h1,
  .page-intro h1 {
    font-size: clamp(1.7rem, 7.2vw, 1.85rem);
  }

  .why-exists-threat-phrases {
    gap: 0.25rem 0.9rem;
  }

  .why-exists-points article,
  .questions-list article {
    grid-template-columns: 1fr;
    gap: 0.65rem;
  }

  h2 {
    font-size: clamp(1.25rem, 5.5vw, 1.45rem);
  }

  .hero-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .button-link {
    width: 100%;
  }

  .hero-media img,
  .photo-frame img,
  .compact-photo img {
    height: min(68vw, 19rem);
  }

  .hero-media::before,
  .photo-frame::before {
    inset: 5% -2% -4% 7%;
  }

  .site-footer-inner {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 380px) {
  .header-inner,
  .header-actions {
    gap: 0.35rem;
  }

  .language-flag {
    width: 2rem;
    flex-basis: 2rem;
    font-size: 1rem;
  }

  .menu-toggle {
    padding-inline: 0.5rem;
  }
}

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