/* Shared, compact language links. Routes work without JavaScript. */
.language-switcher {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  gap: 2px;
  border: 1px solid var(--hair-d);
  border-radius: 999px;
  padding: 2px;
}
.language-switcher a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 36px;
  padding: 0 5px;
  border-radius: 999px;
  color: var(--mint-dim);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}
.language-switcher a[aria-current="page"] {
  color: #fff;
  background: rgba(255,255,255,0.12);
}
.language-switcher a:hover { color: #fff; }
.language-switcher a:focus-visible { outline: 2px solid var(--jeton); outline-offset: 3px; }
.page-nav .wrap { flex-wrap: wrap; }
/* Let the English About portrait use the existing 4:3 CSS aspect ratio
   rather than retaining its source image's fixed HTML height. */
html[lang="en"] .about-photo img { height: auto; }
/* Longer English pricing copy must fit inside the existing clipped card. */
html[lang="en"] #premium .premium-card > * { min-width: 0; }
html[lang="en"] #premium .premium-feats { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) {
  html[lang="en"] body.v5 #premium .premium-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 999px) {
  /* Keep the translated recovery title and badge inside the original phone. */
  html[lang="en"] .recover-stage .recover-head { gap: 3px; }
  html[lang="en"] #premium .plan { flex-wrap: wrap; }
  html[lang="en"] #premium .founder-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  html[lang="en"] #premium .plan-price .pp-was { display: block; margin: 0 0 6px; }
  html[lang="en"] #premium .founder-price { text-align: left; }
  html[lang="en"] #premium .founder-price .pp-was { display: block; margin: 0 0 8px; }
}
@media (max-width: 1100px) {
  .nav-inner { gap: 12px; }
  .nav-links a { padding-inline: 9px; }
}
@media (max-width: 620px) {
  /* Fixed-size phone previews must not widen their English grid columns.
     Centering within the available column keeps their frames on screen. */
  html[lang="en"] .hero-grid,
  html[lang="en"] .kaydet-grid,
  html[lang="en"] .recover,
  html[lang="en"] .progress-grid { grid-template-columns: minmax(0, 1fr); }
  .nav-inner { gap: 10px; padding-inline: 16px; }
  /* The existing mobile menu already contains the download CTA. */
  .nav-inner > .btn { display: none; }
  .page-nav .wrap { gap: 10px; }
  .page-nav .btn { font-size: 12px; padding: 10px 14px; }
}