/* ==========================================================================
   Audiobook Library: one stylesheet for every page.
   Plain CSS, no external requests. The display face is Oswald SemiBold,
   self-hosted in two subsets, Latin and Cyrillic (SIL Open Font License 1.1,
   see /assets/fonts/OFL.txt). Body text uses the system font stack.

   Themes: light tokens by default, dark tokens when the system is dark
   (unless the visitor picked Light) or when the visitor picked Dark.
   /assets/theme.js sets <html data-theme="light|dark"> from the switcher.

   Contents
     1. Font
     2. Tokens (light, then dark)
     3. Base
     4. Type and buttons
     5. Header (nav, language menu, theme switcher)
     6. Shared section pieces (heads, contour lines, blobs)
     7. Covers (real cover images from the app)
     8. Home: hero
     9. Home: catalogue
    10. Home: features (app screens, feature rows)
    11. Home: account
    12. Home: premium
    13. Home: final call to action
    14. Legal pages
    15. 404
    16. Footer
    17. Support page
    18. Motion, print
   ========================================================================== */


/* 1. Font ------------------------------------------------------------------ */

@font-face {
  font-family: "Oswald";
  src: url("/assets/fonts/oswald-semibold-latin.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00FF, U+2010-2027, U+2032-2033, U+20AC, U+2212;
}

@font-face {
  font-family: "Oswald";
  src: url("/assets/fonts/oswald-semibold-cyrillic.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}


/* 2. Tokens ---------------------------------------------------------------- */

:root {
  color-scheme: light;

  /* Light theme */
  --bg: #ffffff;
  --surface: #f2f2f7;
  --surface-2: #e5e5ea;
  --text: #000000;
  --text-body: #1c1c1e;
  --muted: #565b65;
  --accent: #0b57d0;
  --on-accent: #ffffff;
  --accent-soft: rgba(11, 87, 208, 0.08);
  --accent-glow: rgba(11, 87, 208, 0.55);
  --focus: #0b57d0;
  --line: rgba(0, 0, 0, 0.09);
  --tile-border: rgba(11, 87, 208, 0.5);
  --blob: #0b57d0;
  --header-bg: rgba(255, 255, 255, 0.86);
  --card: #f2f2f7;
  --premium: #f1ca4c;
  --on-premium: #1c1c1e;
  --premium-name: #000000;
  --topo-opacity: 0.16;
  --shadow-lg: 0 30px 60px -28px rgba(11, 31, 68, 0.45);
  --control-border: rgba(0, 0, 0, 0.16);
  --menu-bg: #ffffff;
  --panel-bg: #ffffff;
  --scrim: rgba(11, 31, 68, 0.32);
  --shadow-menu: 0 18px 40px -16px rgba(11, 31, 68, 0.35), 0 2px 6px rgba(0, 0, 0, 0.06);

  /* Which variant of a themed image shows (img.theme-light / img.theme-dark) */
  --light-only: block;
  --dark-only: none;

  /* Footer is a dark bar in both themes */
  --footer-bg: #1c1c1e;
  --footer-text: #ffffff;
  --footer-muted: #aeaeb2;
  --footer-accent: #a8c7fa;

  /* Type */
  --display: "Oswald", "DIN Condensed", "Avenir Next Condensed", "Bahnschrift Condensed",
    "Arial Narrow", sans-serif-condensed, Impact, sans-serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", "Noto Sans",
    Arial, sans-serif;

  /* Layout */
  --page: 76rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --section-pad: clamp(4rem, 8vw, 7rem);
  --radius: 18px;
}

/* Dark tokens. The same block twice: once for "System" on a dark system
   (anything but an explicit Light choice), once for an explicit Dark choice. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #25282d;
    --surface: #1c1c1e;
    --surface-2: #2c2c2e;
    --text: #ffffff;
    --text-body: #e5e5ea;
    --muted: #b9bec7;
    --accent: #a8c7fa;
    --on-accent: #0b1f44;
    --accent-soft: rgba(168, 199, 250, 0.1);
    --accent-glow: rgba(48, 128, 237, 0.65);
    --focus: #a8c7fa;
    --line: rgba(255, 255, 255, 0.08);
    --tile-border: rgba(168, 199, 250, 0.55);
    --blob: #3080ed;
    --header-bg: rgba(37, 40, 45, 0.86);
    --card: #1c1c1e;
    --premium-name: #f1ca4c;
    --topo-opacity: 0.2;
    --shadow-lg: 0 30px 60px -24px rgba(0, 0, 0, 0.7);
    --control-border: rgba(255, 255, 255, 0.2);
    --menu-bg: #2c2c2e;
    --panel-bg: #25282d;
    --scrim: rgba(0, 0, 0, 0.55);
    --shadow-menu: 0 22px 44px -16px rgba(0, 0, 0, 0.75), 0 2px 6px rgba(0, 0, 0, 0.3);
    --light-only: none;
    --dark-only: block;

    --footer-bg: #000000;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #25282d;
  --surface: #1c1c1e;
  --surface-2: #2c2c2e;
  --text: #ffffff;
  --text-body: #e5e5ea;
  --muted: #b9bec7;
  --accent: #a8c7fa;
  --on-accent: #0b1f44;
  --accent-soft: rgba(168, 199, 250, 0.1);
  --accent-glow: rgba(48, 128, 237, 0.65);
  --focus: #a8c7fa;
  --line: rgba(255, 255, 255, 0.08);
  --tile-border: rgba(168, 199, 250, 0.55);
  --blob: #3080ed;
  --header-bg: rgba(37, 40, 45, 0.86);
  --card: #1c1c1e;
  --premium-name: #f1ca4c;
  --topo-opacity: 0.2;
  --shadow-lg: 0 30px 60px -24px rgba(0, 0, 0, 0.7);
  --control-border: rgba(255, 255, 255, 0.2);
  --menu-bg: #2c2c2e;
  --panel-bg: #25282d;
  --scrim: rgba(0, 0, 0, 0.55);
  --shadow-menu: 0 22px 44px -16px rgba(0, 0, 0, 0.75), 0 2px 6px rgba(0, 0, 0, 0.3);
  --light-only: none;
  --dark-only: block;

  --footer-bg: #000000;
}


/* 3. Base ------------------------------------------------------------------ */

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

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

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main {
  flex: 1 0 auto;
}

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

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 6px;
}

[id] {
  scroll-margin-top: 5.5rem;
}

.wrap {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip {
  position: absolute;
  z-index: 100;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.75rem 1.1rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}

.skip:focus {
  transform: none;
}

.accent {
  color: var(--accent);
}

.keep {
  white-space: nowrap;
}

[hidden] {
  display: none !important;
}

/* Visually hidden, still read by screen readers */
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.icon {
  display: block;
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Themed screenshots: both variants are in the markup with loading="lazy",
   and only the one for the active theme is displayed (and so fetched). */
:root .theme-light {
  display: var(--light-only);
}

:root .theme-dark {
  display: var(--dark-only);
}

/* Long German compounds and Cyrillic words: hyphenate body copy, but only
   words of 10+ letters, and never an address or a link to another site. */
:lang(de) p,
:lang(de) li,
:lang(uk) p,
:lang(ru) p {
  hyphens: auto;
  hyphenate-limit-chars: 10 4 4;
}

a[href^="mailto:"],
a[href^="https:"] {
  hyphens: manual;
}


/* 4. Type and buttons ------------------------------------------------------ */

.display {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  text-wrap: balance;
}

.display .line {
  display: block;
}

.display--xl {
  font-size: clamp(3.4rem, 1rem + 11vw, 6rem);
}

@media (min-width: 60rem) {
  .display--xl {
    font-size: clamp(4.5rem, 1.4rem + 6.4vw, 7.5rem);
  }
}

.display--lg {
  font-size: clamp(2.4rem, 1.2rem + 4.2vw, 4.75rem);
}

.display--sm {
  font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.4rem);
  line-height: 1;
}

.label {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 3.125rem;
  padding: 0.15em 1.6rem 0;
  border: 2px solid var(--accent);
  border-radius: 999px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.pill--solid {
  background: var(--accent);
  color: var(--on-accent);
}

.pill--solid:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -14px var(--accent-glow);
}

.pill--ghost {
  background: transparent;
  color: var(--accent);
}

.pill--ghost:hover {
  transform: translateY(-2px);
  background: var(--accent-soft);
}

.pill--premium {
  border-color: var(--premium);
  background: var(--premium);
  color: var(--on-premium);
}

.pill--premium:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -14px rgba(241, 202, 76, 0.9);
}

.pill--sm {
  min-height: 2.5rem;
  padding-inline: 1.15rem;
  font-size: 0.9375rem;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.875rem;
  margin-top: 2rem;
}


/* 5. Header ----------------------------------------------------------------
   Narrow screens: one row with the brand and a menu button; the menu (a
   <details> panel, no JS needed) holds the nav, languages, theme switcher
   and the App Store link. Wide screens: brand, nav, Download, language menu
   and theme switcher in one row. German, Ukrainian and Russian labels are
   longer, so the wide header starts later for them (measured in Chromium
   with the self-hosted Oswald, at least ~30px between brand and nav):

                       wide header   Features, Premium in it
     en (and legal)       57rem             70rem
     de, uk               66rem             -
     ru                   67rem             -

   Features and Premium stay out of the uk, de and ru wide headers (they are
   in the menu, the footer and the page): even at the full page width they
   would squeeze the brand against the nav, and Russian does not fit. */

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

/* The frosted background lives on a pseudo-element: a backdrop-filter on the
   header itself would trap the language menu's full-screen close layer. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--header-bg);
  -webkit-backdrop-filter: saturate(1.5) blur(14px);
  backdrop-filter: saturate(1.5) blur(14px);
}

/* Narrow by default: brand and menu button. The wide header switches on at
   the breakpoints at the end of this section. */
.site-header__bar {
  display: flex;
  align-items: center;
  gap: 0.25rem 1rem;
  min-height: 4rem;
}

.site-header__bar > .brand {
  flex: none;
  margin-right: auto;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--text);
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.3125rem;
  line-height: 1;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
}

/* The app icon (two files, light and dark, shown by theme). The PNG already
   has the rounded shape with transparent corners: no border-radius. */
.brand img {
  flex: none;
  width: 30px;
  max-width: none;
  height: 30px;
}

.nav {
  display: flex;
  align-items: center;
  gap: 0.25rem 1.6rem;
  min-height: 2.6rem;
}

.nav a:not(.pill) {
  position: relative;
  padding: 0.5rem 0;
  color: var(--text);
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.07em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

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

.nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.1rem;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

.nav .pill {
  margin-left: 0.4rem;
}

.site-header__tools {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-left: 0.5rem;
}

/* Language menu: a <details> dropdown, no JS needed. */
.lang {
  position: relative;
}

.lang > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.5rem;
  padding: 0 0.7rem 0 0.75rem;
  border: 1.5px solid var(--control-border);
  border-radius: 999px;
  color: var(--text);
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  list-style: none;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.lang > summary::-webkit-details-marker {
  display: none;
}

.lang > summary:hover,
.lang[open] > summary {
  border-color: var(--accent);
  color: var(--accent);
}

.lang > summary:focus-visible {
  border-radius: 999px;
}

.lang__code {
  padding-top: 0.12em;
}

.lang__caret {
  width: 0.8rem;
  height: 0.8rem;
  stroke-width: 2.4;
  transition: transform 0.2s ease;
}

.lang[open] .lang__caret {
  transform: rotate(180deg);
}

/* While the menu is open, the summary grows an invisible full-screen layer:
   a click anywhere outside the menu lands on the summary and closes it. */
.lang[open] > summary::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  cursor: default;
}

.lang__menu {
  position: absolute;
  z-index: 2;
  top: calc(100% + 0.6rem);
  right: 0;
  display: grid;
  gap: 2px;
  min-width: 12.5rem;
  margin: 0;
  padding: 0.4rem;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--menu-bg);
  box-shadow: var(--shadow-menu);
}

.lang__menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.65rem 0.85rem;
  border-radius: 10px;
  color: var(--text);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
}

.lang__menu a:hover {
  background: var(--accent-soft);
  color: var(--accent);
}

.lang__menu a:focus-visible {
  outline-offset: -3px;
  border-radius: 10px;
}

.lang__menu a[aria-current="true"] {
  color: var(--accent);
  font-weight: 650;
}

.lang__menu a[aria-current="true"]::after {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: currentColor;
}

/* Theme switcher (System / Light / Dark): a pill-shaped segmented control.
   Rendered hidden and revealed by /assets/theme.js, so visitors without
   JavaScript never see a control that does nothing. */
.theme {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 2.5rem;
  padding: 3px;
  border: 1.5px solid var(--control-border);
  border-radius: 999px;
}

.theme__opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  height: 100%;
  min-width: 2.25rem;
  margin: 0;
  padding: 0 0.55rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.theme__opt:hover {
  color: var(--accent);
}

.theme__opt[aria-pressed="true"] {
  background: var(--accent);
  color: var(--on-accent);
}

.theme__opt:focus-visible {
  outline-offset: 2px;
  border-radius: 999px;
}

.theme__opt .icon {
  width: 1rem;
  height: 1rem;
}

.theme__opt .icon .fill {
  fill: currentColor;
  stroke: none;
}

/* Compact (header): icons only, names visually hidden */
.theme--compact .theme__opt {
  padding: 0;
}

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

/* Menu (narrow screens) ------------------------------------------------------
   A <details>: the summary is the button (three lines that turn into an X),
   the panel drops down below the header at full width and scrolls on its
   own when it is taller than the screen. */
.menu {
  flex: none;
}

.menu > summary {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1.5px solid var(--control-border);
  border-radius: 999px;
  color: var(--text);
  list-style: none;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.menu > summary::-webkit-details-marker {
  display: none;
}

.menu > summary:hover,
.menu[open] > summary {
  border-color: var(--accent);
  color: var(--accent);
}

.menu > summary:focus-visible {
  border-radius: 999px;
}

.menu__icon {
  position: relative;
  width: 1.125rem;
  height: 0.875rem;
}

.menu__icon span {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: top 0.2s ease, transform 0.2s ease, opacity 0.15s ease;
}

.menu__icon span:nth-child(1) {
  top: 0;
}

.menu__icon span:nth-child(2) {
  top: calc(50% - 1px);
}

.menu__icon span:nth-child(3) {
  top: calc(100% - 2px);
}

.menu[open] .menu__icon span:nth-child(1) {
  top: calc(50% - 1px);
  transform: rotate(45deg);
}

.menu[open] .menu__icon span:nth-child(2) {
  opacity: 0;
}

.menu[open] .menu__icon span:nth-child(3) {
  top: calc(50% - 1px);
  transform: rotate(-45deg);
}

/* Same technique as the language menu: while open, an invisible full-screen
   layer on the summary turns any click outside the panel into a close. */
.menu[open] > summary::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  cursor: default;
}

/* The header (sticky, so positioned) is the panel's containing block: the
   panel spans the full width right under it. A wide shadow, clipped above
   the panel, dims the page below it. */
.menu__panel {
  position: absolute;
  z-index: 2;
  top: 100%;
  left: 0;
  right: 0;
  max-height: calc(100vh - 4rem - 1px);
  max-height: calc(100dvh - 4rem - 1px);
  overflow-y: auto;
  overscroll-behavior: contain;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--panel-bg);
  box-shadow: 0 0 0 100vmax var(--scrim);
  clip-path: inset(0 0 -100vmax 0);
}

.menu[open] .menu__panel {
  animation: menu-in 0.22s ease-out;
}

@keyframes menu-in {
  from {
    opacity: 0;
    transform: translateY(-0.5rem);
  }
}

.menu__inner {
  padding-top: 0.5rem;
  padding-bottom: calc(1.75rem + env(safe-area-inset-bottom, 0px));
}

.menu__nav {
  display: grid;
}

.menu__nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.5rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.375rem, 1rem + 2vw, 1.75rem);
  line-height: 1.05;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  overflow-wrap: anywhere;
}

/* A small chevron on the right of every link */
.menu__nav a::after {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.3rem;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  opacity: 0.35;
  transform: rotate(45deg);
}

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

.menu__nav a[aria-current="page"]::after {
  opacity: 1;
}

.menu__nav a:focus-visible {
  outline-offset: -3px;
}

.menu__section {
  margin-top: 1.5rem;
}

.menu__label {
  margin-bottom: 0.7rem;
  font-size: 0.875rem;
}

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

@media (min-width: 30rem) {
  .menu__langs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.menu__langs a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 2.75rem;
  padding: 0 0.75rem;
  border: 1.5px solid var(--control-border);
  border-radius: 999px;
  color: var(--text);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.menu__langs a:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.menu__langs a[aria-current="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 650;
}

.menu__langs a[aria-current="true"]::before {
  content: "";
  flex: none;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: currentColor;
}

.menu__langs a:focus-visible {
  border-radius: 999px;
}

/* The theme switcher with visible names, three equal segments */
.menu .theme {
  display: flex;
  width: 100%;
  height: 2.75rem;
}

.menu .theme__opt {
  flex: 1 1 0;
  min-width: 0;
  padding: 0 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
}

.menu__cta {
  display: flex;
  width: 100%;
  margin-top: 1.75rem;
  padding-inline: 1rem;
  white-space: normal;
  text-align: center;
}

/* Wide header items stay hidden until their breakpoint below; the menu is
   the narrow-screen header. */
.nav,
.site-header__tools,
.nav__opt {
  display: none;
}

/* Wide header, per language */
@media (min-width: 57rem) {
  html[lang="en"] .site-header__bar {
    min-height: 4.25rem;
  }

  html[lang="en"] .nav,
  html[lang="en"] .site-header__tools {
    display: flex;
  }

  html[lang="en"] .menu {
    display: none;
  }
}

@media (min-width: 66rem) {
  html[lang="de"] .site-header__bar,
  html[lang="uk"] .site-header__bar {
    min-height: 4.25rem;
  }

  html[lang="de"] .nav,
  html[lang="de"] .site-header__tools,
  html[lang="uk"] .nav,
  html[lang="uk"] .site-header__tools {
    display: flex;
  }

  html[lang="de"] .menu,
  html[lang="uk"] .menu {
    display: none;
  }
}

@media (min-width: 67rem) {
  html[lang="ru"] .site-header__bar {
    min-height: 4.25rem;
  }

  html[lang="ru"] .nav,
  html[lang="ru"] .site-header__tools {
    display: flex;
  }

  html[lang="ru"] .menu {
    display: none;
  }
}

@media (min-width: 70rem) {
  html[lang="en"] .nav__opt {
    display: inline;
  }
}

/* 6. Shared section pieces ------------------------------------------------- */

.section {
  position: relative;
  padding-block: var(--section-pad);
}

.section-head {
  max-width: 40rem;
}

.section-head p {
  max-width: 33rem;
  margin: 1.5rem 0 0;
  color: var(--muted);
  font-size: 1.0625rem;
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
  max-width: 54rem;
}

.section-head--center p {
  margin-inline: auto;
}

/* Faint topographic contour lines. The SVG is only a mask, so the lines take
   the theme accent colour. */
.topo {
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
}

.topo::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 2rem;
  left: -6%;
  width: min(62rem, 90%);
  aspect-ratio: 3 / 2;
  pointer-events: none;
  background: var(--accent);
  opacity: var(--topo-opacity);
  -webkit-mask-image: url("/assets/contours.svg");
  mask-image: url("/assets/contours.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.topo--right::before {
  left: auto;
  right: -8%;
  top: 38%;
  transform: scaleX(-1);
}

.topo--center::before {
  top: 50%;
  left: 50%;
  width: min(70rem, 130%);
  transform: translate(-50%, -50%);
}

.blob {
  display: block;
}

.blob path {
  fill: var(--blob);
}


/* 7. Covers ---------------------------------------------------------------
   Real audiobook covers from the app, exported as 360px wide WebP. */

.cover {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 360 / 515;
  object-fit: cover;
  border: 1px solid var(--tile-border);
  border-radius: 10px;
  background: var(--surface-2);
}


/* 8. Home: hero ------------------------------------------------------------ */

.hero {
  position: relative;
  overflow: hidden;
  overflow: clip;
  padding-block: clamp(2rem, 5vw, 4.5rem) clamp(1rem, 3vw, 2.5rem);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3rem;
  align-items: center;
}

.hero__copy .eyebrow {
  margin-bottom: 1.25rem;
}

.lede {
  max-width: 33rem;
  margin: 1.75rem 0 0;
  color: var(--muted);
  font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.1875rem);
  line-height: 1.6;
}

.caption {
  display: grid;
  gap: 0.3rem;
  margin: 1.75rem 0 0;
}

.caption .label {
  font-size: 0.875rem;
}

.caption__text {
  color: var(--muted);
  font-size: 0.875rem;
}

.hero__art {
  position: relative;
  max-height: 27rem;
  margin-inline: calc(-1 * var(--gutter));
  padding-inline: var(--gutter);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent);
  mask-image: linear-gradient(180deg, #000 78%, transparent);
}

.blob--hero {
  position: absolute;
  top: 7%;
  left: -12%;
  width: 100%;
  height: 92%;
}

.mosaic {
  --mosaic-gap: clamp(0.5rem, 1.1vw, 0.875rem);
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--mosaic-gap);
  align-items: start;
  padding-inline: 4%;
}

.mosaic__col {
  display: grid;
  gap: var(--mosaic-gap);
}

.mosaic__col:nth-child(1) {
  margin-top: 3.5rem;
}

.mosaic__col:nth-child(2) {
  margin-top: 0.5rem;
}

.mosaic__col:nth-child(3) {
  margin-top: 5.5rem;
}

.mosaic__col:nth-child(4) {
  margin-top: 2rem;
}

.mosaic .cover {
  box-shadow: 0 18px 30px -18px rgba(0, 0, 0, 0.55);
}

@media (min-width: 60rem) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    gap: clamp(2.5rem, 5vw, 5.5rem);
  }

  .hero__art {
    grid-column: 1;
    grid-row: 1;
    max-height: none;
    margin-inline: 0;
    padding-inline: 0;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .hero__copy {
    grid-column: 2;
    grid-row: 1;
  }

  .blob--hero {
    top: 4%;
    left: -22%;
    width: 128%;
    height: 94%;
  }

  .mosaic {
    padding-inline: 0 4%;
  }
}


/* 9. Home: catalogue ------------------------------------------------------- */

.catalogue {
  overflow: hidden;
  overflow: clip;
}

.catalogue__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3.5rem;
  align-items: center;
}

.genres {
  display: flex;
  align-items: flex-start;
  gap: clamp(0.75rem, 1.4vw, 1.25rem);
}

.genre {
  flex: none;
  width: clamp(8.25rem, 12.5vw, 12.25rem);
  border-radius: 14px;
  box-shadow: 0 24px 40px -24px rgba(0, 0, 0, 0.6);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.genre:nth-child(1) { margin-top: 2.5rem; }
.genre:nth-child(2) { margin-top: 6.5rem; }
.genre:nth-child(3) { margin-top: 0; }
.genre:nth-child(4) { margin-top: 4.5rem; }
.genre:nth-child(5) { margin-top: 1.5rem; }

.genre:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 46px -24px var(--accent-glow);
}

/* A slightly smaller headline keeps "A large catalogue" on one line beside the cards. */
.catalogue .display--lg {
  font-size: clamp(2.4rem, 1.2rem + 3.6vw, 4.25rem);
}

/* A smaller size the same way for the Ukrainian and Russian account
   headline, whose lines are longer than "Your account / and your data". */
html[lang="uk"] .account .display--lg,
html[lang="ru"] .account .display--lg {
  font-size: clamp(2.4rem, 1.2rem + 3.4vw, 4rem);
}

@media (min-width: 60rem) {
  .catalogue__grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(2rem, 4vw, 4rem);
  }
}


/* 10. Home: features -------------------------------------------------------
   Three real iPhone screens (genres, player in front, library), then feature
   rows with real iPad screen crops. */

.phones {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem clamp(1rem, 4vw, 2rem);
  align-items: start;
  justify-items: center;
  max-width: 60rem;
  margin: clamp(3rem, 7vw, 5.5rem) auto 0;
}

.phone {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin: 0;
}

.phone--main {
  grid-column: 1 / -1;
  grid-row: 1;
  max-width: 15rem;
}

.phone--left,
.phone--right {
  max-width: 10.5rem;
}

.phone__label {
  margin: 0 0 1.25rem;
  color: var(--text);
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1rem, 0.8rem + 0.6vw, 1.25rem);
  line-height: 1.1;
  letter-spacing: 0.05em;
  text-align: center;
  text-transform: uppercase;
  text-wrap: balance;
}

.phone__shot {
  display: block;
  width: 100%;
}

.phone__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 470 / 959;
  filter: drop-shadow(0 26px 30px rgba(0, 0, 0, 0.3));
}

.phone--main .phone__img {
  filter: drop-shadow(0 30px 40px rgba(11, 87, 208, 0.28)) drop-shadow(0 16px 24px rgba(0, 0, 0, 0.3));
}

@media (min-width: 48rem) {
  .phones {
    display: flex;
    justify-content: center;
    gap: 0;
  }

  .phone {
    position: relative;
    flex: none;
  }

  .phone--main {
    z-index: 2;
    width: 16.875rem;
    max-width: none;
  }

  .phone--left,
  .phone--right {
    z-index: 1;
    width: 13.75rem;
    max-width: none;
  }

  .phone--left {
    margin-right: -1rem;
  }

  .phone--right {
    margin-left: -1rem;
  }

  .phone--left .phone__shot,
  .phone--right .phone__shot {
    margin-top: 3.5rem;
  }

  .phone--left .phone__shot {
    transform: rotate(-6deg);
  }

  .phone--right .phone__shot {
    transform: rotate(6deg);
  }
}

/* Feature rows: real screen crops and two-tone headings */
.rows {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 3.5rem);
  max-width: 64rem;
  margin: clamp(5rem, 10vw, 8.5rem) auto 0;
}

.row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem 3rem;
  align-items: center;
}

@media (min-width: 48rem) {
  .row {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  }
}

.banner {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1040 / 585;
  border-radius: var(--radius);
  background: var(--surface);
  /* 1px ring as a shadow, so the box keeps the image's exact ratio */
  box-shadow: 0 0 0 1px var(--tile-border), 0 24px 44px -30px rgba(0, 0, 0, 0.65);
}

.row__text p {
  max-width: 30rem;
  margin: 0.85rem 0 0;
  color: var(--muted);
}


/* 11. Home: account -------------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3.5rem;
  align-items: center;
}

@media (min-width: 60rem) {
  .split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(3rem, 6vw, 6rem);
  }
}

.prose {
  max-width: 36rem;
  margin-top: 1.75rem;
}

.prose p {
  margin: 0 0 1rem;
  color: var(--muted);
  font-size: 1.0625rem;
}

.prose p:last-child {
  margin-bottom: 0;
}

.minis {
  display: grid;
  gap: 1.1rem;
  margin: 2.25rem 0 0;
  padding: 0;
  list-style: none;
}

.minis li {
  display: grid;
  gap: 0.2rem;
  padding-left: 1.1rem;
  border-left: 2px solid var(--tile-border);
}

.minis strong {
  color: var(--accent);
  font-family: var(--display);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.minis span {
  color: var(--muted);
  font-size: 0.9375rem;
}

.panel {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 34rem;
  aspect-ratio: 1 / 1;
  justify-self: center;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--tile-border);
  border-radius: 28px;
  background:
    radial-gradient(70% 60% at 50% 45%, var(--accent-soft), rgba(0, 0, 0, 0) 70%),
    var(--surface);
  box-shadow: var(--shadow-lg);
}

.panel::before {
  content: "";
  position: absolute;
  inset: -10%;
  z-index: 0;
  background: var(--accent);
  opacity: calc(var(--topo-opacity) * 1.4);
  -webkit-mask-image: url("/assets/contours.svg");
  mask-image: url("/assets/contours.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-position: 30% 50%;
  mask-position: 30% 50%;
}

.panel__deco {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.blob--panel {
  position: absolute;
  top: 17%;
  left: 17%;
  width: 66%;
  height: 66%;
}

.panel__cover {
  position: absolute;
  width: 25%;
  box-shadow: 0 20px 34px -18px rgba(0, 0, 0, 0.6);
}

.panel__cover--1 {
  top: 9%;
  right: 9%;
  transform: rotate(9deg);
}

.panel__cover--2 {
  bottom: 9%;
  left: 9%;
  transform: rotate(-8deg);
}

.panel__icon {
  position: relative;
  z-index: 2;
  width: 44%;
}

/* The icon image carries its own rounded shape, so the shadow is a
   drop-shadow that follows it (a box-shadow would draw a square-ish ring). */
.panel__icon img {
  width: 100%;
  aspect-ratio: 1 / 1;
  filter: drop-shadow(0 26px 30px rgba(11, 31, 68, 0.45));
}


/* 12. Home: premium -------------------------------------------------------- */

.plans {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  max-width: 54rem;
  margin: clamp(2.75rem, 6vw, 4.5rem) auto 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 44rem) {
  .plans {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.75rem;
  }
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--tile-border);
  border-radius: 24px;
  background: var(--card);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.plan:hover {
  transform: translateY(-4px);
}

.plan--premium {
  border: 2px solid var(--premium);
  box-shadow:
    0 0 0 6px rgba(241, 202, 76, 0.14),
    0 34px 70px -32px rgba(241, 202, 76, 0.75);
}

.plan__art {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  /* The illustration fades out into the card colour underneath. */
  -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent 94%);
  mask-image: linear-gradient(180deg, #000 45%, transparent 94%);
}

.plan__art--free {
  background:
    radial-gradient(60% 80% at 80% 10%, rgba(168, 199, 250, 0.55), rgba(168, 199, 250, 0) 60%),
    linear-gradient(140deg, #0b1f44, #0b57d0 55%, #3080ed);
}

.plan__art--premium {
  background:
    radial-gradient(60% 80% at 20% 0%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 60%),
    repeating-conic-gradient(from 0deg at 50% 60%, rgba(255, 255, 255, 0.16) 0 6deg, rgba(255, 255, 255, 0) 6deg 18deg),
    linear-gradient(150deg, #f6dc86, #f1ca4c 50%, #e9a23f);
}

.plan__cover {
  position: absolute;
  top: 11%;
  left: 50%;
  width: 27%;
  box-shadow: 0 20px 34px -16px rgba(0, 0, 0, 0.55);
}

.plan__cover--1 {
  top: 17%;
  transform: translateX(-118%) rotate(-11deg);
}

.plan__cover--2 {
  z-index: 2;
  transform: translateX(-50%);
}

.plan__cover--3 {
  top: 17%;
  transform: translateX(18%) rotate(11deg);
}

.plan__body {
  position: relative;
  z-index: 6;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  margin-top: -1.25rem;
  padding: 0 clamp(1.25rem, 3vw, 2rem) clamp(1.5rem, 3vw, 2rem);
}

.plan__name {
  margin: 0;
  color: var(--accent);
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.75rem, 1.3rem + 1.2vw, 2.4rem);
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.plan--premium .plan__name {
  color: var(--premium-name);
}

.plan p {
  margin: 0 0 0.75rem;
  color: var(--muted);
}

.plan .pill {
  margin-top: auto;
}


/* 13. Home: final call to action ------------------------------------------- */

.cta {
  text-align: center;
}

.cta p {
  max-width: 34rem;
  margin: 1.5rem auto 0;
  color: var(--muted);
  font-size: 1.0625rem;
}

.cta .actions {
  justify-content: center;
}

.cta .cta__support {
  margin-top: 3rem;
  font-size: 0.9375rem;
  text-wrap: balance;
}

/* Keep the link to the Support page in one piece */
.cta__support a {
  white-space: nowrap;
}


/* 14. Legal pages ----------------------------------------------------------
   The <article> markup is kept exactly as written; only styled here. */

.doc {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
  padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(4rem, 9vw, 7rem);
}

.doc::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  right: -10%;
  width: min(60rem, 120%);
  aspect-ratio: 3 / 2;
  pointer-events: none;
  background: var(--accent);
  opacity: var(--topo-opacity);
  -webkit-mask-image: url("/assets/contours.svg");
  mask-image: url("/assets/contours.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  transform: scaleX(-1);
}

.doc .eyebrow {
  margin-bottom: 1.25rem;
}

.doc article {
  max-width: 42rem;
  color: var(--text-body);
  font-size: 1.0625rem;
  line-height: 1.7;
}

.doc article h1 {
  margin: 0 0 clamp(2rem, 5vw, 3.25rem);
  color: var(--text);
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(3rem, 1.6rem + 5.2vw, 6rem);
  line-height: 0.95;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}

.doc article h2 {
  margin: 3rem 0 0.85rem;
  color: var(--accent);
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.65rem);
  line-height: 1.15;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.doc article h3 {
  margin: 1.75rem 0 0.35rem;
  color: var(--text);
  font-size: 1.0625rem;
  font-weight: 650;
  line-height: 1.4;
}

.doc article p {
  margin: 0 0 1rem;
  overflow-wrap: break-word;
}

.doc article a {
  overflow-wrap: anywhere;
}

@media (min-width: 48rem) {
  .doc article {
    font-size: 1.125rem;
  }
}


/* 15. 404 ------------------------------------------------------------------ */

.err {
  position: relative;
  display: grid;
  align-items: center;
  padding-block: clamp(4rem, 10vw, 8rem);
  text-align: center;
}

.err__code {
  margin: 0 0 1.25rem;
  color: var(--accent);
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(7rem, 4rem + 16vw, 15rem);
  line-height: 0.85;
  letter-spacing: 0.01em;
}

.err p:not(.err__code) {
  max-width: 36rem;
  margin: 1.5rem auto 0;
  color: var(--muted);
  font-size: 1.0625rem;
}


/* 16. Footer --------------------------------------------------------------- */

.site-footer {
  --focus: var(--footer-accent);
  padding: clamp(3rem, 6vw, 4.5rem) 0 clamp(2.5rem, 5vw, 3.5rem);
  background: var(--footer-bg);
  color: var(--footer-muted);
  font-size: 0.9375rem;
}

.site-footer a {
  color: var(--footer-text);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--footer-accent);
  text-decoration: underline;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
}

.site-footer__brand .brand {
  color: var(--footer-text);
  font-size: 1.375rem;
}

.site-footer__brand p {
  margin: 0.9rem 0 0;
}

.site-footer__brand p + p {
  margin-top: 0.3rem;
}

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

.site-footer__col--support {
  grid-column: 1 / -1;
}

.site-footer__title {
  margin: 0 0 0.9rem;
  color: var(--footer-accent);
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.site-footer ul {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 48rem) {
  .site-footer__grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr);
    gap: 3rem;
  }

  .site-footer__nav {
    grid-template-columns: repeat(3, minmax(0, auto));
    justify-content: end;
    gap: 2rem clamp(2.5rem, 6vw, 5rem);
  }

  .site-footer__col--support {
    grid-column: auto;
  }
}

.site-footer__note {
  margin: 0.75rem 0 0;
  font-size: 0.8125rem;
}

/* Long Cyrillic link names get a single footer column on small phones */
@media (max-width: 24rem) {
  html[lang="uk"] .site-footer__nav,
  html[lang="ru"] .site-footer__nav {
    grid-template-columns: minmax(0, 1fr);
  }
}

.site-footer li {
  overflow-wrap: break-word;
}

/* ...and, in the longer languages, two columns plus a full-width Support
   column until three fit */
@media (min-width: 48rem) and (max-width: 63.99rem) {
  html[lang="de"] .site-footer__nav,
  html[lang="uk"] .site-footer__nav,
  html[lang="ru"] .site-footer__nav {
    grid-template-columns: repeat(2, minmax(0, auto));
  }

  html[lang="de"] .site-footer__col--support,
  html[lang="uk"] .site-footer__col--support,
  html[lang="ru"] .site-footer__col--support {
    grid-column: 1 / -1;
  }
}


/* 17. Support page --------------------------------------------------------- */

/* The contour lines sit on <main>, so no section edge cuts them (or the
   contact card's shadow) off. */
.support {
  position: relative;
}

.support-hero {
  position: relative;
  padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(1rem, 3vw, 2rem);
}

.support-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 3.5rem);
  align-items: center;
}

.support-hero .eyebrow {
  margin-bottom: 1.25rem;
}

/* A little smaller than the home hero: two lines on desktop, and long
   translated words still fit a 320px screen. */
.support-hero .display--xl {
  font-size: clamp(3rem, 0.6rem + 11vw, 5.5rem);
}

@media (min-width: 60rem) {
  .support-hero .display--xl {
    font-size: clamp(3.5rem, 0.8rem + 5vw, 4.875rem);
  }
}

@media (min-width: 60rem) {
  .support-hero__grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    gap: clamp(2.5rem, 5vw, 4.5rem);
  }
}

/* Contact card: the same deep-blue gradient as the Free plan art, in both themes */
.contact {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  border-radius: 28px;
  background:
    radial-gradient(70% 90% at 90% 0%, rgba(168, 199, 250, 0.5), rgba(168, 199, 250, 0) 60%),
    linear-gradient(140deg, #0b1f44, #0b57d0 58%, #3080ed);
  color: rgba(255, 255, 255, 0.86);
  box-shadow: var(--shadow-lg);
  container-type: inline-size;
  --focus: #ffffff;
}

.contact::before {
  content: "";
  position: absolute;
  inset: -20% -30% -20% 10%;
  z-index: -1;
  pointer-events: none;
  background: #ffffff;
  opacity: 0.12;
  -webkit-mask-image: url("/assets/contours.svg");
  mask-image: url("/assets/contours.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: cover;
  mask-size: cover;
}

.contact__badge {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  margin-bottom: 1.5rem;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}

.contact__badge .icon {
  width: 1.5rem;
  height: 1.5rem;
}

.contact .label {
  color: #a8c7fa;
}

.contact__mail {
  display: inline-block;
  margin-top: 0.6rem;
  color: #ffffff;
  font-family: var(--display);
  font-weight: 600;
  /* The address is about 9.1em wide: sized to the card so it stays on one line */
  font-size: clamp(1.375rem, 9.5cqi, 2.75rem);
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.45);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
  overflow-wrap: anywhere;
}

.contact__mail:hover {
  text-decoration-color: #ffffff;
}

.contact p {
  max-width: 30rem;
  margin: 1.1rem 0 0;
  text-wrap: pretty;
}

.contact__mail + p {
  margin-top: 1.5rem;
}

.contact p + p {
  padding-top: 1.1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

/* FAQ: <details> items, no JS */
.faq__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 3rem);
  align-items: start;
}

@media (min-width: 60rem) {
  .faq__grid {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(3rem, 6vw, 6rem);
  }

  .faq__head {
    position: sticky;
    top: 7rem;
  }
}

.faq__legal {
  max-width: 38rem;
  margin: 1.75rem 0 0;
  color: var(--muted);
}

.faq__list {
  display: grid;
  gap: 0.875rem;
}

.faq__item {
  border: 1px solid var(--tile-border);
  border-radius: var(--radius);
  background: var(--card);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.faq__item[open] {
  border-color: var(--accent);
  box-shadow: 0 22px 44px -32px var(--accent-glow);
}

.faq__item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.1rem 1.1rem 1.4rem;
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.1rem, 1rem + 0.35vw, 1.3rem);
  line-height: 1.2;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  list-style: none;
  cursor: pointer;
  overflow-wrap: break-word;
}

.faq__item > summary::-webkit-details-marker {
  display: none;
}

.faq__item > summary:hover {
  color: var(--accent);
}

.faq__q {
  min-width: 0;
  padding-top: 0.1em;
}

.faq__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.faq__icon .icon {
  width: 1rem;
  height: 1rem;
  stroke-width: 2.2;
}

.faq__item[open] .faq__icon {
  transform: rotate(45deg);
  background: var(--accent);
  color: var(--on-accent);
}

.faq__a {
  padding: 0 1.4rem 1.35rem;
  color: var(--muted);
}

.faq__a p {
  max-width: 38rem;
  margin: 0;
  overflow-wrap: break-word;
}


/* 18. Motion, print -------------------------------------------------------- */

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

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }

  .pill:hover,
  .genre:hover,
  .plan:hover {
    transform: none;
  }

  .lang[open] .lang__caret,
  .faq__item[open] .faq__icon {
    transition: none;
  }
}

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

  body {
    background: #ffffff;
    color: #000000;
  }
}