:root {
  --c-background: #F4F7F9;
  --c-surface: #FFFFFF;
  --c-surface-muted: #EDF2F5;
  --c-ink: #16283A;
  --c-text-secondary: #5D7183;
  --c-text-tertiary: #8FA6B8;
  --c-accent: #147D7F;
  --c-accent-tint: #E3F0F0;
  --c-accent-on-tint: #0F5F61;
  --c-accent-on-dark: #7FD3D4;
  --c-eyebrow-ink: #41616F;
  --c-border: #D8E2E8;
  --c-surface-brand: #1D3A5F;
  --c-ink-on-brand: #FFFFFF;
  --c-emergency-on-dark: #FFB4AC;
  --c-legal-body: #3D5468;
  --c-shadow: #16283A14;
}

.palette-acute {
  --c-background: #16283A;
  --c-surface: #1F3651;
  --c-surface-muted: #24425F;
  --c-ink: #F4F7F9;
  --c-text-secondary: #A8BCCB;
  --c-text-tertiary: #9FC0C0;
  --c-accent: #2FA6A8;
  --c-accent-tint: #1C5F63;
  --c-accent-on-tint: #7FE0E0;
  --c-accent-on-dark: #7FD3D4;
  --c-eyebrow-ink: #41616F;
  --c-border: #2C4A6B;
  --c-surface-brand: #1D3A5F;
  --c-ink-on-brand: #FFFFFF;
  --c-emergency-on-dark: #FFB4AC;
  --c-legal-body: #D6E4EE;
  --c-shadow: #00000040;
}

@media (prefers-contrast: more) {
  :root {
    --c-background: #FFFFFF;
    --c-surface-muted: #F1F4F6;
    --c-text-secondary: #475362;
    --c-text-tertiary: #455A6C;
    --c-accent: #0D6163;
    --c-accent-on-tint: #0D5759;
    --c-eyebrow-ink: #3D5B69;
    --c-border: #6B7A85;
    --c-legal-body: #16283A;
    --c-shadow: #16283A29;
  }
  .palette-acute {
    --c-background: #000C16;
    --c-surface: #0A1C2E;
    --c-surface-muted: #1D354D;
    --c-text-secondary: #B4C5D3;
    --c-accent-on-tint: #F3FDFD;
    --c-eyebrow-ink: #79A1AF;
    --c-border: #7FA2C0;
    --c-legal-body: #F4F7F9;
    --c-shadow: #00000059;
  }
}

.wave-crest > :nth-child(1) { --bar: 0.14; }
.wave-crest > :nth-child(2) { --bar: 0.15; }
.wave-crest > :nth-child(3) { --bar: 0.19; }
.wave-crest > :nth-child(4) { --bar: 0.24; }
.wave-crest > :nth-child(5) { --bar: 0.31; }
.wave-crest > :nth-child(6) { --bar: 0.40; }
.wave-crest > :nth-child(7) { --bar: 0.50; }
.wave-crest > :nth-child(8) { --bar: 0.60; }
.wave-crest > :nth-child(9) { --bar: 0.69; }
.wave-crest > :nth-child(10) { --bar: 0.78; }
.wave-crest > :nth-child(11) { --bar: 0.87; }
.wave-crest > :nth-child(12) { --bar: 0.93; }
.wave-crest > :nth-child(13) { --bar: 0.97; }
.wave-crest > :nth-child(14) { --bar: 1.00; }
.wave-crest > :nth-child(15) { --bar: 1.00; }
.wave-crest > :nth-child(16) { --bar: 0.97; }
.wave-crest > :nth-child(17) { --bar: 0.93; }
.wave-crest > :nth-child(18) { --bar: 0.87; }
.wave-crest > :nth-child(19) { --bar: 0.78; }
.wave-crest > :nth-child(20) { --bar: 0.69; }
.wave-crest > :nth-child(21) { --bar: 0.60; }
.wave-crest > :nth-child(22) { --bar: 0.50; }
.wave-crest > :nth-child(23) { --bar: 0.40; }
.wave-crest > :nth-child(24) { --bar: 0.31; }
.wave-crest > :nth-child(25) { --bar: 0.24; }
.wave-crest > :nth-child(26) { --bar: 0.19; }
.wave-crest > :nth-child(27) { --bar: 0.15; }
.wave-crest > :nth-child(28) { --bar: 0.14; }

@font-face {
  font-family: "Albert Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/albert-sans.0ab536c482.woff2") format("woff2");
}

@font-face {
  font-family: "Albert Sans Arial";
  src: local("Arial"), local("ArialMT");
  size-adjust: 102.16%;
  ascent-override: 92.99%;
  descent-override: 24.47%;
  line-gap-override: 0.00%;
}

@font-face {
  font-family: "Albert Sans Roboto";
  src: local("Roboto"), local("Roboto-Regular");
  size-adjust: 103.20%;
  ascent-override: 92.05%;
  descent-override: 24.22%;
  line-gap-override: 0.00%;
}

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

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

:root {
  --header-height: 3.75rem;
}

@media (min-width: 32.5625em) {
  :root {
    --header-height: 4rem;
  }
}

@media (min-width: 64em) {
  :root {
    --header-height: 4.5rem;
  }
}

html {
  scroll-padding-top: calc(var(--header-height) + 1rem);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--c-background);
  color: var(--c-ink);
  font-family: "Albert Sans", "Albert Sans Arial", "Albert Sans Roboto",
    system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: clamp(1rem, 0.9683rem + 0.1299vw, 1.0625rem);
  line-height: 1.6;
}

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

:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

h1,
h2,
h3 {
  font-weight: 800;
  line-height: 1.15;
  text-wrap: balance;
}

:where(.wrap) :where(h1, h2, h3, p) {
  margin: 0;
}

.palette-acute {
  background: var(--c-background);
  color: var(--c-ink);
}

.palette-acute a {
  color: var(--c-accent-on-dark);
}

.palette-acute :focus-visible {
  outline-color: var(--c-text-tertiary);
}

.skip {
  position: absolute;
  z-index: 2;
  top: -100vh;
  left: 1rem;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 1rem;
  background: var(--c-background);
}

.skip:focus {
  top: 1rem;
}

main:focus {
  outline: none;
}

.wrap {
  max-width: 78.5rem;
  margin-inline: auto;
  padding-inline: clamp(1.125rem, 0.1756rem + 3.8961vw, 3rem);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--c-background);
  border-bottom: 1px solid var(--c-border);
}

.site-header .bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 78.5rem;
  height: var(--header-height);
  margin-inline: auto;
  padding-inline: clamp(1.125rem, 0.1756rem + 3.8961vw, 3rem);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 2.75rem;
  color: var(--c-ink);
  font-weight: 800;
  font-size: 1.0625rem;
  text-decoration: none;
  white-space: nowrap;
}

.brand .mark {
  width: 2rem;
  height: 2rem;
  flex: none;
}

.site-header ul {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-header nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2.75rem;
  color: var(--c-text-secondary);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.site-header nav a:hover {
  color: var(--c-accent);
}

.site-header nav [aria-current="page"] {
  color: var(--c-ink);
  text-decoration: underline;
}

.site-header .help a {
  color: var(--c-accent);
  font-weight: 700;
}

.glyph {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.site-header .cta a {
  padding-inline: 1.25rem;
  border-radius: 999px;
  background: var(--c-surface-brand);
  color: var(--c-ink-on-brand);
  font-weight: 700;
}

.site-header nav .cta a:hover {
  color: var(--c-ink-on-brand);
  text-decoration: underline;
}

.site-header .anchor,
.site-header .cta {
  display: none;
}

@media (min-width: 32.5625em) {
  .site-header .cta {
    display: block;
  }
}

@media (min-width: 64em) {
  .site-header .anchor {
    display: block;
  }
}

main > section > .wrap {
  padding-block: clamp(4rem, 2.7338rem + 5.1948vw, 7rem);
}

.wrap h2 {
  margin-bottom: 1rem;
  font-size: clamp(1.875rem, 1.4318rem + 1.8182vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  max-width: 40rem;
}

.wrap h3 {
  margin-bottom: 0.5rem;
  font-size: 1.1875rem;
}

.eyebrow {
  margin-bottom: 0.75rem;
  color: var(--c-accent-on-tint);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lead {
  color: var(--c-text-secondary);
}

.section-head {
  max-width: 44rem;
  margin: 0 auto 1rem;
  text-align: center;
}

.section-head h2 {
  margin-inline: auto;
}

.cta {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  padding-inline: 1.75rem;
  border-radius: 999px;
  background: var(--c-surface-brand);
  color: var(--c-ink-on-brand);
  font-weight: 700;
  text-decoration: none;
}

.cta:hover {
  color: var(--c-ink-on-brand);
  text-decoration: underline;
}

.hero {
  background: radial-gradient(
      ellipse 70% 80% at 85% 35%,
      var(--c-accent-tint),
      var(--c-background) 70%
    );
}

.hero .wrap {
  display: grid;
  gap: 3rem;
  align-items: center;
}

main > .hero > .wrap {
  padding-block: clamp(2.5rem, 1.2338rem + 5.1948vw, 5rem)
    clamp(3.5rem, 2.2338rem + 5.1948vw, 6rem);
}

.hero-text {
  container-type: inline-size;
}

.hero h1 {
  margin-bottom: 1.25rem;
  font-size: clamp(2.75rem, 1.7403rem + 4.1558vw, 4.75rem);
  font-size: clamp(2.75rem, min(11cqi, 1.7403rem + 4.1558vw), 4.75rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
}

.hero h1 .accent {
  display: block;
  color: var(--c-accent);
}

.hero .lead {
  max-width: 32rem;
  color: var(--c-ink);
  font-size: clamp(1.125rem, 1.0614rem + 0.2597vw, 1.3125rem);
  line-height: 1.55;
}

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
}

.facts li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.5rem;
  padding: 0.375rem 1rem 0.375rem 0.875rem;
  border: 1px solid var(--c-border);
  border-radius: 999px;
  background: var(--c-surface);
  color: var(--c-ink);
  font-weight: 600;
  line-height: 1.3;
}

.facts li::before {
  content: "";
  flex: none;
  width: 0.375rem;
  height: 0.6875rem;
  margin: -0.25rem 0.125rem 0 0.125rem;
  border: solid var(--c-accent);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}

.hero-phones {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  gap: clamp(0.875rem, 0.2922rem + 2.3377vw, 2rem);
  max-width: 34rem;
  margin-inline: auto;
}

.hero-phones .device {
  flex: 1 1 0;
  max-width: 15.5rem;
}

.hero-phones .device + .device {
  margin-top: clamp(2rem, 1rem + 4vw, 4.5rem);
}

@media (min-width: 60.0625em) {
  .hero .wrap {
    grid-template-columns: minmax(0, 1fr) minmax(0, 32rem);
    gap: 4rem;
  }

  .hero-phones {
    margin-inline: 0 auto;
  }
}

.device {
  position: relative;
  container-type: inline-size;
  width: 100%;
  max-width: 17.5rem;
  margin-inline: auto;
}

.device picture {
  position: relative;
  display: block;
  padding: 3.4cqi;
  border: 0.9cqi solid var(--c-text-secondary);
  border-radius: 15.5cqi;
  background: var(--c-ink);
}

.device img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 11.6cqi;
}

.device picture::after {
  content: "";
  position: absolute;
  top: 8.1cqi;
  left: 50%;
  width: 3.4cqi;
  height: 3.4cqi;
  margin-left: -1.7cqi;
  border-radius: 50%;
  background: var(--c-ink);
}

.device::before,
.device::after {
  content: "";
  position: absolute;
  width: 1.1cqi;
  border-radius: 1cqi;
  background: var(--c-text-secondary);
}

.device::before {
  top: 21%;
  left: -0.8cqi;
  height: 12%;
}

.device::after {
  top: 25%;
  right: -0.8cqi;
  height: 16%;
}

.device.bezel picture {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

.device.bezel img {
  border-radius: 0;
}

.device.bezel::before,
.device.bezel::after,
.device.bezel picture::after {
  content: none;
}

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

.badges a {
  display: block;
  min-height: 3rem;
}

.badges img {
  display: block;
  width: auto;
  height: 3rem;
}

.coming,
.soon {
  margin: 1.5rem 0 0;
  color: var(--c-text-secondary);
}

.hero .coming,
.hero .soon {
  color: var(--c-ink);
}

html[data-os="ios"] .google-play,
html[data-os="android"] .app-store {
  display: none;
}

.qr {
  display: none;
  margin: 2.5rem 0 0;
}

html[data-os="other"] .qr {
  display: block;
}

.qr img {
  display: block;
  flex: none;
  width: 8.25rem;
  height: auto;
  padding: 0.5rem;
  border: 1px solid var(--c-border);
  border-radius: 1rem;
  background: var(--c-surface);
}

.qr figcaption {
  max-width: 18rem;
  margin-top: 0.75rem;
  color: var(--c-text-secondary);
}

.mark .ring {
  fill: none;
}

.brand .ring {
  stroke: var(--c-surface-brand);
}

.mark .dot {
  fill: var(--c-accent);
}

#nasil {
  background: var(--c-surface);
  border-block: 1px solid var(--c-border);
}

.parts {
  display: grid;
  gap: clamp(3.5rem, 2.2338rem + 5.1948vw, 6rem);
  max-width: 62rem;
  margin: 3rem auto 0;
  padding: 0;
  list-style: none;
}

.parts > li {
  display: grid;
  align-items: center;
  justify-items: center;
  gap: 2rem;
}

.part-text {
  display: grid;
  gap: 0.75rem;
  width: 100%;
  max-width: 32rem;
}

.part-text h3 {
  margin: 0;
  color: var(--c-accent-on-tint);
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.parts .part-lead {
  color: var(--c-ink);
  font-size: clamp(1.625rem, 1.3082rem + 1.2987vw, 2.25rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.parts p {
  color: var(--c-text-secondary);
  font-size: 1.0625rem;
}

.parts .device {
  max-width: 16.5rem;
}

.parts .dose {
  justify-self: start;
  padding: 0.375rem 0.875rem;
  border-radius: 999px;
  background: var(--c-accent-tint);
  color: var(--c-accent-on-tint);
  font-weight: 700;
}

@media (min-width: 45.0625em) {
  .parts > li {
    grid-template-columns: minmax(0, 1fr) minmax(0, 16.5rem);
    column-gap: clamp(2.5rem, -0.5rem + 6vw, 6rem);
    justify-items: start;
  }

  .parts > li:nth-child(even) {
    grid-template-columns: minmax(0, 16.5rem) minmax(0, 1fr);
  }

  .parts > li:nth-child(even) .part-text {
    grid-column: 2;
    grid-row: 1;
  }

  .parts > li:nth-child(even) .device {
    grid-column: 1;
    grid-row: 1;
  }
}

.wave-panel {
  max-width: 30rem;
  margin-top: 0.75rem;
  padding: 1.25rem 1.5rem;
  border-radius: 1.25rem;
  background: var(--c-accent-tint);
  color: var(--c-ink);
}

.wave-panel p {
  color: var(--c-ink);
}

.wave-panel .wave-title {
  font-weight: 800;
}

.wave-panel p + p {
  margin-top: 0.375rem;
}

#mahremiyet > .wrap {
  display: grid;
  gap: 3rem;
  align-items: center;
}

.privacy-text .lead {
  max-width: 34rem;
  font-size: 1.125rem;
}

.features {
  display: grid;
  gap: 1rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.features li {
  padding: 1.25rem 1.5rem 1.25rem 3.5rem;
  position: relative;
  border: 1px solid var(--c-border);
  border-radius: 1.25rem;
  background: var(--c-surface);
  box-shadow: 0 1px 2px var(--c-shadow), 0 8px 24px var(--c-shadow);
}

.features li::before {
  content: "";
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  width: 0.4375rem;
  height: 0.8125rem;
  border: solid var(--c-accent);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}

.features h3 {
  font-size: 1.125rem;
}

.features p {
  color: var(--c-text-secondary);
}

.privacy .more {
  margin-top: 1.25rem;
}

.privacy .more a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-weight: 700;
}

@media (min-width: 60.0625em) {
  #mahremiyet > .wrap {
    grid-template-columns: minmax(0, 1fr) minmax(0, 17.5rem);
    gap: 5rem;
  }
}

.help p {
  margin: 0;
}

.help .lead {
  max-width: 40rem;
  margin-top: 0.5rem;
}

.helplines {
  display: grid;
  gap: 1rem;
  max-width: 56rem;
  margin: 2rem 0;
  padding: 0;
  list-style: none;
}

.helpline {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.75rem;
  border: 1.5px solid var(--c-border);
  border-radius: 1.5rem;
  background: var(--c-surface);
}

.helpline p {
  color: var(--c-text-secondary);
}

.helpline a {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: 2.75rem;
  font-size: clamp(1.875rem, 1.62rem + 1.5584vw, 2.875rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  text-decoration: none;
}

.helpline a:hover {
  text-decoration: underline;
}

.palette-acute .helpline.emergency {
  border-color: var(--c-emergency-on-dark);
}

.palette-acute .helpline.emergency a {
  color: var(--c-emergency-on-dark);
}

.help .foot {
  color: var(--c-text-secondary);
}

@media (min-width: 45.0625em) {
  .helplines {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.faq {
  max-width: 52rem;
}

.faq > h2 {
  margin-inline: auto;
  text-align: center;
}

.faq-group {
  margin-top: 2.5rem;
}

.faq-group > h3 {
  margin-bottom: 1rem;
  color: var(--c-accent-on-tint);
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#sss details {
  border: 1px solid var(--c-border);
  border-radius: 1.125rem;
  background: var(--c-surface);
}

#sss details + details {
  margin-top: 0.75rem;
}

#sss details[open] {
  box-shadow: 0 1px 2px var(--c-shadow), 0 8px 24px var(--c-shadow);
}

#sss summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 1.25rem 3.5rem 1.25rem 1.5rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

#sss summary:hover {
  color: var(--c-accent);
}

#sss summary::-webkit-details-marker {
  display: none;
}

#sss summary::before,
#sss summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1.5rem;
  width: 0.875rem;
  height: 0;
  margin-top: -1px;
  border-top: 2px solid currentColor;
  color: var(--c-accent);
}

#sss summary::after {
  transform: rotate(90deg);
}

#sss details[open] > summary::after {
  transform: none;
}

#sss details p {
  max-width: 44rem;
  padding: 0 1.5rem;
  color: var(--c-text-secondary);
}

#sss details p + p {
  margin-top: 0.5rem;
}

#sss details p:last-child {
  padding-bottom: 1.375rem;
}

#sss details strong {
  color: var(--c-ink);
}

.support p > a,
.support dd > a,
.not-found a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

main > .download > .wrap {
  display: grid;
  gap: 3rem;
  align-items: center;
  padding-block: clamp(2.5rem, 1.2338rem + 5.1948vw, 5rem);
}

.download h1 {
  margin: 0 0 1rem;
  font-size: clamp(2.25rem, 1.7468rem + 2.0779vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.download .device {
  max-width: 16.5rem;
}

@media (min-width: 60.0625em) {
  main > .download > .wrap {
    grid-template-columns: minmax(0, 1fr) minmax(0, 17.5rem);
  }
}

.site-footer .wrap {
  display: grid;
  gap: 1.5rem;
  padding-block: 3rem 2rem;
}

.site-footer .brand {
  color: var(--c-ink);
}

.site-footer .brand .ring {
  stroke: var(--c-ink);
}

.footer-brand p {
  margin: 0.25rem 0 0;
  color: var(--c-text-secondary);
}

.site-footer ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer nav a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

.palette-acute .fine {
  margin: 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--c-border);
  color: var(--c-text-tertiary);
}

.palette-acute .fine .host {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.875rem;
}

@media (min-width: 60.0625em) {
  .site-footer .wrap {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .palette-acute .fine {
    grid-column: 1 / -1;
  }
}

@media (forced-colors: active) {
  .mark .ring {
    stroke: CanvasText;
  }

  .mark .dot {
    fill: CanvasText;
  }

  .helpline {
    border-color: CanvasText;
  }

  :focus-visible,
  .palette-acute :focus-visible {
    outline-color: Highlight;
  }
}

.reading {
  max-width: 45rem;
  margin: 0 auto;
  padding: 2rem clamp(1.125rem, 0.1756rem + 3.8961vw, 3rem) 4rem;
}

.reading h1 {
  margin: 0 0 1rem;
  font-size: clamp(2rem, 1.7468rem + 1.039vw, 2.5rem);
  line-height: 1.1;
}

.reading h2 {
  margin: 2.25rem 0 0.75rem;
  font-size: 1.3125rem;
}

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

.reading .help {
  margin-block: 1.5rem 2.5rem;
  padding: 1.5rem;
  border-radius: 1.25rem;
}

.reading .help h2 {
  margin-top: 0;
  font-size: clamp(1.75rem, 1.4968rem + 1.039vw, 2.25rem);
}

.legal .legal-body,
.legal .version {
  color: var(--c-legal-body);
}

.legal .credit {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--c-border);
  color: var(--c-text-secondary);
}

.draft-banner {
  padding: 0.75rem 1rem;
  border: 2px solid var(--c-accent);
  border-radius: 0.5rem;
}

.table-scroll {
  overflow-x: auto;
  margin: 1rem 0;
}

.legal table {
  width: 100%;
  border-collapse: collapse;
}

.legal caption {
  text-align: start;
  font-weight: 700;
}

.legal th,
.legal td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--c-border);
  text-align: start;
  vertical-align: top;
}

.legal th {
  color: var(--c-ink);
  background: var(--c-surface-muted);
}

.toc a {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
}

.legal-body :target {
  border-inline-start: 4px solid var(--c-accent);
  padding-inline-start: 0.75rem;
}

@media (min-width: 72.5em) {
  .legal.reading {
    max-width: 66rem;
  }

  .legal-columns {
    display: grid;
    grid-template-columns: 15rem minmax(0, 45rem);
    column-gap: 3rem;
    align-items: start;
  }

  
  .toc {
    position: sticky;
    top: calc(var(--header-height) + 1rem);
    max-height: calc(100vh - var(--header-height) - 2rem);
    overflow-y: auto;
  }
}

@media print {
  .skip,
  .site-header,
  .site-footer,
  .toc {
    display: none;
  }

  .reading {
    max-width: none;
    padding: 0;
  }

  .legal-columns {
    display: block;
  }

  
  .table-scroll {
    overflow: visible;
  }

  .legal th,
  .legal td {
    overflow-wrap: anywhere;
  }

  
  .palette-acute,
  .palette-acute * {
    color: inherit !important;
    background: none !important;
    border-color: currentColor !important;
  }

  a {
    color: inherit;
  }

  tr,
  .table-scroll,
  .draft-banner {
    break-inside: avoid;
  }

  h1,
  h2,
  h3 {
    break-after: avoid;
  }
}