:root {
  /* Backgrounds */
  --color-bg: #0d0f12;
  --color-surface: #181b20 ;
  --color-surface-inset: #16181d;

  /* Borders */
  --color-border: #343842;
  --color-border-hover: #575e6b;
  --color-input-border: #575e6b;

  /* Text */
  --color-text: #ffffff;
  --color-text-secondary: #9da5b8;

  /* Accent */
  --color-accent: #7186ef;
  --color-accent-hover: #566cdc;
  --color-accent-active: #2d3f8e;
  --color-accent-disabled: #20232a;
  --color-accent-secondary: #9f7aea;
  --color-accent-alert: #ef4444;
  --color-accent-blue: #3b82f6;
  --color-accent-orange: #f59e0b;
  --color-accent-green: #10b981;

  /* Transparent */
  --color-surface-90: rgba(24, 27, 32, 0.9);
  --color-surface-50: rgba(24, 27, 32, 0.5);
  --color-white-60: rgba(255, 255, 255, 0.6);
  --color-white-30: rgba(255, 255, 255, 0.3);
  --color-accent-50: rgba(113, 134, 239, 0.5);

  /* Disabled */
  --color-disabled-surface: rgba(22, 24, 29, 0.33);
  --color-disabled-border: rgba(52, 56, 66, 0.33);
  --color-disabled-text: rgba(255, 255, 255, 0.33);
  --color-disabled-text-secondary: rgba(157, 165, 184, 0.33);
  --color-disabled-accent: rgba(113, 134, 239, 0.33);

  /* Glow */
  --color-glow-primary: #7186ef;

  /* Font family */
  --font-sans: "Inter", sans-serif;

  /* Typography — font-size / line-height */
  --text-h1: 3rem;         /* 48px / 48px */
  --text-h1--line-height: 1;
  --text-h2: 2.25rem;      /* 36px / 40px */
  --text-h2--line-height: 1.111;
  --text-h3: 1.5rem;       /* 24px / 32px */
  --text-h3--line-height: 1.333;
  --text-body: 1rem;       /* 16px / 24px */
  --text-body--line-height: 1.5;
  --text-secondary: 0.875rem; /* 14px / 20px */
  --text-secondary--line-height: 1.429;
  --text-caption: 0.75rem; /* 12px / 16px */
  --text-caption--line-height: 1.333;
}


@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("/seo-assets/inter-latin.woff2") format("woff2");
}


*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--color-bg);color:var(--color-text);font-family:var(--font-sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}

.companion-card {
  display: block;
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: 16px;
  overflow: hidden;
  border: 0.5px solid var(--color-border);
  background-color: var(--color-surface);
  text-decoration: none;
  color: inherit;
  transition: filter 0.2s ease;
}

.companion-card:hover {
  filter: drop-shadow(2.5px 5px 5px rgba(0, 0, 0, 0.15));
}

.companion-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    var(--color-surface) 0%,
    var(--color-border) 100%
  );
}

.companion-card__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.companion-card:hover .companion-card__video {
  opacity: 1;
}

@media (hover: none) {
  .companion-card__video {
    opacity: 1;
  }
}

.companion-card__gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.8) 0%,
    rgba(0, 0, 0, 0.2) 50%,
    transparent 100%
  );
}

.companion-card__tags {
  position: absolute;
  top: 8px;
  left: 12px;
  right: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  z-index: 1;
}

.companion-card__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 19px;
  padding: 0 9px;
  background: rgba(24, 27, 32, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 500;
  line-height: 15px;
  color: var(--color-text);
  white-space: nowrap;
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  filter: drop-shadow(0 4px 2px rgba(0, 0, 0, 0.25));
}

.companion-card__info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 8px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 1;
}

.companion-card__name {
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}

.companion-card__bio {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: var(--color-text-secondary);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin: 0;
}

.companion-card:hover .companion-card__bio {
  -webkit-line-clamp: 5;
}

@media (max-width: 767px) {
  .companion-card__name {
    font-size: 16px;
    line-height: 24px;
  }

  .companion-card__bio {
    font-size: 11px;
  }
}

/* ── Base ── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-family: var(--font-sans);
  font-weight: 500;
  border: none;
  outline: none;
  text-decoration: none;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s;
  -webkit-appearance: none;
  appearance: none;
  white-space: nowrap;
  box-sizing: border-box;
}

.btn:focus-visible {
  box-shadow: 0 0 0 2px var(--color-accent);
}

.btn_disabled {
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Sizes ── */

.btn_size_md {
  padding: 8px 16px;
  border-radius: 8px;
  gap: 8px;
  font-size: 14px;
  line-height: 20px;
}

.btn_size_sm {
  padding: 4px 12px;
  border-radius: 6px;
  gap: 4px;
  font-size: 12px;
  line-height: 16px;
}

/* ── solid + primary ── */

.btn_variant_solid.btn_color_primary {
  background: var(--color-accent);
  color: white;
}

.btn_variant_solid.btn_color_primary:hover {
  background: var(--color-accent-hover);
}

.btn_variant_solid.btn_color_primary:active {
  background: var(--color-accent-active);
}

.btn_variant_solid.btn_color_primary.btn_disabled {
  background: var(--color-disabled-accent);
  color: var(--color-disabled-text);
}

/* ── solid + secondary ── */

.btn_variant_solid.btn_color_secondary {
  background: var(--color-surface-inset);
  color: var(--color-text-secondary);
}

.btn_variant_solid.btn_color_secondary:hover {
  color: var(--color-text);
}

.btn_variant_solid.btn_color_secondary:active {
  color: var(--color-accent);
}

.btn_variant_solid.btn_color_secondary.btn_disabled {
  background: var(--color-disabled-surface);
  color: var(--color-disabled-text-secondary);
}

/* ── solid + gradient ── */

.btn_variant_solid.btn_color_gradient {
  background:
    linear-gradient(90deg, #3151EF 0%, #7942EA 100%) padding-box,
    linear-gradient(90deg, #7186EF 0%, #9F7AEA 100%) border-box;
  border: 1px solid transparent;
  color: white;
  padding: 12px 24px;
}

.btn_size_sm.btn_variant_solid.btn_color_gradient {
  padding: 2px 10px;
}

.btn_variant_solid.btn_color_gradient:hover {
  background:
    linear-gradient(90deg, var(--color-accent), var(--color-accent-secondary) 50%, var(--color-accent)) padding-box,
    #7942ea border-box;
}

.btn_variant_solid.btn_color_gradient:active {
  background:
    linear-gradient(90deg, #1e2850, #804fe3) padding-box,
    var(--color-accent) border-box;
}

.btn_variant_solid.btn_color_gradient.btn_disabled {
  background:
    var(--color-disabled-accent) padding-box,
    transparent border-box;
  color: var(--color-disabled-text);
}

/* ── outline ── */

.btn_variant_outline {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
}

.btn_variant_outline:hover {
  border-color: var(--color-text-secondary);
}

.btn_variant_outline:active {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.btn_variant_outline.btn_disabled {
  border-color: var(--color-disabled-border);
  color: var(--color-disabled-text-secondary);
}

/* ── outline + gradient ── */

.btn_variant_outline.btn_color_gradient {
  background: linear-gradient(to right, #7186ef, #9f7aea);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  border: 0.5px solid var(--color-border);
  box-shadow: 2.5px 5px 10px 0px rgba(0, 0, 0, 0.15);
  color: #7186ef;
}

.btn_variant_outline.btn_color_gradient .btn__decorator {
  color: #7186ef;
  -webkit-text-fill-color: initial;
}

.btn_variant_outline.btn_color_gradient:hover {
  border-color: var(--color-accent-secondary);
}

.btn_variant_outline.btn_color_gradient:active {
  border-color: var(--color-accent);
  opacity: 0.7;
}

.btn_variant_outline.btn_color_gradient.btn_disabled {
  background: transparent;
  border-color: var(--color-disabled-border);
  color: var(--color-disabled-text-secondary);
  -webkit-text-fill-color: var(--color-disabled-text-secondary);
}

/* ── ghost ── */

.btn_variant_ghost {
  background: transparent;
  color: var(--color-text-secondary);
}

.btn_variant_ghost:hover {
  color: var(--color-text);
}

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

.btn_variant_ghost.btn_disabled {
  color: var(--color-disabled-text-secondary);
}

/* ── Decorator ── */

.btn__decorator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.btn_size_md .btn__decorator {
  width: 20px;
  height: 20px;
}

.btn_size_sm .btn__decorator {
  width: 16px;
  height: 16px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 9999px;
  font-weight: 500;
  white-space: nowrap;
  font-family: var(--font-sans);
  border: 1px solid transparent;
  cursor: default;
  outline: none;
  text-decoration: none;
  -webkit-appearance: none;
  appearance: none;
}

/* ── Solid variant ── */

.chip_variant_solid {
  background-color: var(--color-accent);
  color: var(--color-text);
}

.chip_variant_solid.chip_active {
  background-color: var(--color-accent-active);
}

.chip_variant_solid.chip_disabled {
  background-color: var(--color-accent-disabled);
  color: var(--color-disabled-text-secondary);
}

/* ── Outline variant ── */

.chip_variant_outline {
  background-color: var(--color-surface-inset);
  border-color: var(--color-border);
  color: var(--color-text);
}

.chip_variant_outline.chip_active {
  background-color: var(--color-accent-disabled);
  border-color: var(--color-accent-active);
  color: var(--color-accent);
}

.chip_variant_outline.chip_disabled {
  background-color: var(--color-disabled-surface);
  border-color: var(--color-disabled-border);
  color: var(--color-disabled-text-secondary);
}

/* ── Clickable ── */

.chip_clickable {
  cursor: pointer;
}

.chip_variant_solid.chip_clickable:not(.chip_disabled):hover {
  background-color: var(--color-accent-hover);
}

.chip_variant_solid.chip_clickable:not(.chip_disabled):active {
  background-color: var(--color-accent-active);
}

.chip_variant_outline.chip_clickable:not(.chip_disabled):hover {
  border-color: var(--color-border-hover);
  color: var(--color-text-secondary);
}

.chip_variant_outline.chip_clickable:not(.chip_disabled):active {
  border-color: var(--color-accent-active);
  color: var(--color-accent);
}

.chip_clickable:not(.chip_disabled):focus-visible {
  box-shadow: 0 0 0 2px var(--color-accent);
}

/* ── Sizes ── */

.chip_size_md {
  padding: 8px 16px;
  font-size: 14px;
  line-height: 20px;
}

.chip_size_sm {
  padding: 4px 12px;
  font-size: 12px;
  line-height: 16px;
}

.chip_size_xs {
  height: 20px;
  padding: 0 8px;
  font-size: 10px;
  line-height: 15px;
}

/* ── Decorator ── */

.chip__decorator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}

.chip_size_xs .chip__decorator {
  width: 10px;
  height: 10px;
}

/* ── Overlay ── */

.modal__overlay {
  position: fixed;
  inset: 0;
  background: rgba(13, 15, 18, 0.75);
  display: flex;
  align-items: center;
  align-items: safe center;
  justify-content: center;
  z-index: 1000;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px 0;
}

/* ── Modal card ── */

.modal {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
  width: 440px;
  max-width: calc(100vw - 32px);
  background: var(--color-surface);
  border: 0.667px solid var(--color-border);
  border-radius: 16px;
  box-shadow: 0 0 25px var(--color-accent-secondary);
  box-sizing: border-box;
  outline: none;
}

/* ── Title ── */

.modal__title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-text);
  margin: 0;
  padding-right: 24px;
}

/* ── Close button ── */

.modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--color-text-secondary);
  outline: none;
  flex-shrink: 0;
  transition: color 0.15s;
  z-index: 10;
}

.modal__close:hover {
  color: var(--color-text);
}

.modal__close:focus-visible {
  border-radius: 4px;
  box-shadow: 0 0 0 2px var(--color-accent);
}

/* ── Content ── */

.modal__content {
  display: flex;
  flex-direction: column;
}

.age-restricted-modal__logo {
  display: flex;
  justify-content: center;
  max-width: 250px;
  max-height: 40px;
  margin: 0 auto 8px;
}

.age-restricted-modal__logoImage {
  width: 181px;
  flex-shrink: 0;
}

.age-restricted-modal__logoText {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.age-restricted-modal__logoName {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text);
}

.age-restricted-modal__logoTagline {
  font-size: 13px;
  line-height: 16px;
  color: var(--color-text-secondary);
}

.age-restricted-modal__title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-h3);
  line-height: var(--text-h3--line-height);
  color: var(--color-text);
  text-align: center;
  margin: 0;
}

.age-restricted-modal__subtitle {
  font-size: var(--text-secondary);
  line-height: var(--text-secondary--line-height);
  color: var(--color-text-secondary);
  text-align: center;
  margin: 0;
}

.age-restricted-modal__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin: 24px 0;
}

.age-restricted-modal__actionBtn {
  width: 100%;
  justify-content: center;
}

.age-restricted-modal__actionBtn_huge {
  height: 64px;
  font-size: var(--text-h3);
}

.age-restricted-modal__legal {
  font-size: var(--text-caption);
  line-height: var(--text-caption--line-height);
  color: var(--color-text-secondary);
  text-align: center;
  margin: 0;
}

.age-restricted-modal__legalLink {
  color: var(--color-text-secondary);
  text-decoration: underline;
}

.age-restricted-modal__legalLink:hover {
  color: var(--color-text);
}

.footer {
  padding: 0 32px 16px;
}

.footer__top {
  display: flex;
  gap: 32px;
  padding-top: 32px;
  margin-bottom: 24px;
  border-top: 1px solid var(--color-border);
}

.footer__brand {
  flex: 1.4;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.footer__logotype {
  display: inline-block;
  max-width: 225px;
}

.footer__logo {
  width: 100%;
  max-width: 225px;
  height: auto;
  display: block;
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  column-gap: 16px;
  row-gap: 8px;
}

.footer__column {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 154px;
}

.footer__link {
  font-size: var(--text-caption);
  color: var(--color-white);
  line-height: 1.4;
  text-decoration: none;
  transition: color 0.15s;
}

.footer__link:hover {
  color: var(--color-text);
}

.footer__bottom {
  border-top: 1px solid var(--color-border);
  padding-top: 16px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.footer__legalInfo {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.footer__registration,
.footer__copyright {
  font-size: var(--text-caption);
  color: var(--color-text-secondary);
  line-height: 1.4;
  margin: 0;
}

.footer__adult {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-caption);
  color: var(--color-text-secondary);
  line-height: 1.4;
  margin: 4px 0 0;
}

.footer__adultBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 1px 5px;
  border-radius: 999px;
  background: #e5484d;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
}

.footer__dmca {
  flex-shrink: 0;
}

.footer__dmcaBadge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.footer__dmcaMark {
  padding: 1px 4px;
  border-radius: 2px;
  background: var(--color-text-secondary);
  color: var(--color-surface);
  font-weight: 700;
}

@media (max-width: 1250px) {
  .footer__top {
    flex-direction: column;
  }
}

@media (max-width: 1023px) {
  .footer__top {
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 16px;
  }

  .footer__brand {
    flex: 1 0 100%;
  }

  .footer__column {
    flex: 1 0 40%;
  }

  .footer__bottom {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 8px;
  }
}

@media (max-width: 767px) {
  .footer {
    padding: 0 16px 90px;
  }
}

@media (max-width: 479.98px) {
  .footer__top {
    gap: 16px;
  }

  .footer__column {
    flex: 1 0 100%;
  }
}

/* padding-inline, не padding: шапка и контент задают свои вертикальные отступы,
   а сокращённая запись в медиазапросе обнуляла бы их — шапка схлопывалась в
   полоску, а крошки прилипали к ней вплотную.

   Side padding grows with the viewport. The main app can rely on a fixed 32 px
   because its left menu eats ~256 px of the width; these pages are full-bleed,
   so without the step the grid ends up glued to both edges on a tablet. */
.wrap{max-width:1280px;margin:0 auto;padding-inline:40px}

.top{border-bottom:1px solid var(--color-border);background:var(--color-bg)}
.top__inner{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;padding:12px 0;flex-wrap:wrap}
/* The full wordmark, as in the footer, but sized so the header stays a thin
   strip: 150 px wide is 24 px tall at the logo's 801×128 ratio. */
.top__logo{display:block;width:150px;height:auto;flex-shrink:0}
.top__nav{display:flex;gap:20px;font-size:14px;color:var(--color-text-secondary)}
.top__nav a{white-space:nowrap}
.top__nav a:hover{color:var(--color-text)}

.page{padding:24px 0 56px}
.crumbs{font-size:13px;color:var(--color-text-secondary);margin-bottom:16px}
.crumbs a:hover{text-decoration:underline}
.crumbs i{font-style:normal;margin:0 6px}

/* Small label above the heading — used by the 404 page to name the code
   without turning the whole headline into a number. */
.eyebrow{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-secondary);margin-bottom:10px}
.page h1{font-size:40px;line-height:1.15;font-weight:700;margin-bottom:12px}
.lede{margin-bottom:20px;font-size:18px;line-height:1.55;color:var(--color-text-secondary)}
.page h2{font-size:26px;line-height:1.2;font-weight:700;margin:40px 0 12px}
.count{font-size:14px;color:var(--color-text-secondary);margin-bottom:20px}
.cta-row{margin-top:20px;display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.cta-note{font-size:13px;color:var(--color-text-secondary)}

.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.grid>li{min-width:0}

.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.tile{
  display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  padding:14px 16px;border:1px solid var(--color-border);border-radius:12px;
  background:var(--color-surface);transition:border-color .15s,background-color .15s;
}
.tile:hover{border-color:var(--color-border-hover);background:var(--color-surface-inset)}
.tile b{font-weight:600}
.tile i{font-style:normal;font-size:13px;color:var(--color-text-secondary)}
.group-title{font-size:13px!important;text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-secondary);margin:32px 0 12px!important;font-weight:500!important}

.related{display:flex;flex-wrap:wrap;gap:8px}

/* ── Blog ── */
/* Без max-width: текст занимает всю ширину контента, как заголовок и грид. */
.prose{width:100%}
.prose .meta{margin:0 0 24px;font-size:13px;color:var(--color-text-secondary)}
.prose p{margin:0 0 16px;font-size:17px;line-height:1.65;color:var(--color-text-secondary)}
.prose h2{font-size:24px;line-height:1.25;font-weight:700;color:var(--color-text);margin:36px 0 12px}
.prose strong{color:var(--color-text)}
.prose a{color:var(--color-accent-secondary)}
.prose a:hover{text-decoration:underline}
/* The reset strips markers from every list (the app's are navigation); prose
   lists need them back — a numbered scenario list is the article. Direct
   children only: the Muse strip is a <ul> of cards inside the same article,
   and bulleted Muse cards would be a bug. */
.prose>ul,.prose>ol{margin:0 0 20px;padding-left:26px}
.prose>ul{list-style:disc}
.prose>ol{list-style:decimal}
.prose>ul>li,.prose>ol>li{margin:0 0 10px;font-size:17px;line-height:1.65;color:var(--color-text-secondary)}
/* A wide comparison table scrolls inside its own box instead of pushing the page sideways. */
.table-scroll{overflow-x:auto;margin:0 0 24px;border:1px solid var(--color-border);border-radius:12px}
.prose table{border-collapse:collapse;width:100%;min-width:640px;font-size:14px}
.prose th,.prose td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--color-border);vertical-align:top}
.prose th{color:var(--color-text);font-weight:600;background:var(--color-surface);white-space:nowrap}
.prose td{color:var(--color-text-secondary)}
.prose tr:last-child td{border-bottom:0}
.muse-strip{margin:24px 0 28px;width:100%}
.muse-strip__title{font-size:14px!important;color:var(--color-text-secondary);margin-bottom:12px!important}
.muse-strip .grid{grid-template-columns:repeat(4,1fr)}

.posts{display:grid;gap:12px;margin-top:24px}
.post{display:block;padding:20px 24px;border:1px solid var(--color-border);border-radius:16px;background:var(--color-surface);transition:border-color .15s,background-color .15s}
.post:hover{border-color:var(--color-border-hover);background:var(--color-surface-inset)}
.post__title{display:block;font-size:20px;font-weight:700;margin-bottom:6px}
.post__excerpt{display:block;font-size:15px;line-height:1.55;color:var(--color-text-secondary)}
.post__date{display:block;margin-top:10px;font-size:13px;color:var(--color-text-secondary)}

.faq-item{border:1px solid var(--color-border);border-radius:12px;background:var(--color-surface);padding:16px 20px;margin-bottom:8px}
.faq-item h3{font-size:17px;font-weight:600;margin-bottom:6px}
.faq-item p{font-size:15px;line-height:1.55;color:var(--color-text-secondary)}
/* Muse names and category mentions inside answers are links — they have to look like it. */
.faq-item a{color:var(--color-accent-secondary)}
.faq-item a:hover{text-decoration:underline}

/* Age gate: the page stays in the DOM, the overlay sits on top until confirmed. */
html[data-age="ok"] .modal__overlay{display:none}
.age-restricted-modal__logoImage{margin:0 auto}

/* Below the 1280 px cap the grid keeps five columns and the padding steps down
   instead — the card stays around 180–240 px wide the whole way. */
/* Card typography follows the card, not the screen: below 1300 px a card is
   under 230 px wide, where a 24 px name gets cut off mid-word and three tags
   spill onto a second row. */
@media(max-width:1299px){
  .wrap{padding-inline:32px}
  .companion-card__name{font-size:18px;line-height:24px}
  .companion-card__bio{font-size:11px}
  .companion-card__tags{gap:4px}
  .companion-card__tag{padding:0 6px}
}
/* Tablets: four columns. Three of them at 768 px made every card 240×427 —
   nearly half the screen per Muse, which reads as a broken layout rather than a
   grid. The card title steps down here too: 24 px belongs on a 290 px card. */
@media(max-width:1023px){
  .wrap{padding-inline:24px}
  .grid{grid-template-columns:repeat(4,1fr)}
  .tiles{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:767px){
  .wrap{padding-inline:16px}
  .grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .muse-strip .grid{grid-template-columns:repeat(2,1fr)}
  .prose p,.prose>ul>li,.prose>ol>li{font-size:16px}
  .prose h2{font-size:20px}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .page h1{font-size:28px}
  .lede{font-size:16px}
  .page h2{font-size:22px}
  /* The three nav links do not fit beside the logo on a phone, so they get
     their own full-bleed row and scroll sideways instead of wrapping into
     each other. Padding is set per side — the shorthand would wipe out the
     horizontal padding .wrap gives the header. */
  .top__inner{gap:0;padding-top:10px;padding-bottom:0}
  .top__nav{
    order:2;width:calc(100% + 32px);margin:10px -16px 0;padding:8px 16px;
    gap:18px;font-size:13px;overflow-x:auto;
    border-top:1px solid var(--color-border);
    scrollbar-width:none;
  }
  .top__nav::-webkit-scrollbar{display:none}
  .page{padding-top:16px}
}