/* Shared refinements and release history. */
.hero h1 { max-width: 1100px; }
.hero-sub { max-width: 660px; }
.release-note { color: var(--text2); font-size: 14px; margin: -36px 0 40px; position: relative; }
.release-note a, .release-link a, .changelog-main a { color: var(--accent); }
.release-link { margin-top: 12px; }
.changelog-page .faq-page-hero { padding-top: 120px; }
.changelog-main { width: min(100% - 40px, 780px); margin: 0 auto; padding: 0 0 80px; flex: 1; }
.release-intro { text-align: center; margin-top: 48px; margin-bottom: 48px; }
.release-entry { padding: 32px 0; border-top: 1px solid var(--border); scroll-margin-top: 90px; }
.release-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 20px; color: var(--text2); font-family: var(--mono); font-size: 13px; margin-bottom: 14px; }
.release-meta a { text-decoration: none; font-weight: 600; }
.release-badge { color: var(--green); font: 12px var(--sans); border: 1px solid var(--border2); border-radius: 20px; padding: 5px 10px; }
.release-entry h2 { font-size: clamp(23px, 4vw, 30px); letter-spacing: -.6px; line-height: 1.25; margin-bottom: 20px; }
.release-entry ul { padding-left: 22px; color: var(--text2); }
.release-entry li + li { margin-top: 12px; }
.release-upcoming { padding: 24px; margin-top: 24px; background: var(--bg2); border: 1px solid var(--border); border-radius: 12px; }
.release-upcoming summary { cursor: pointer; font-weight: 600; }
.release-upcoming p { color: var(--text2); margin-top: 16px; }
.release-source { font-size: 13px; color: var(--text2); margin-top: 28px; }
.faq-item { scroll-margin-top: 90px; }
.faq-a code { overflow-wrap: anywhere; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
@media (max-width: 600px) {
  .hero { padding-left: 20px; padding-right: 20px; }
  .hero h1 { font-size: clamp(32px, 8.5vw, 46px); overflow-wrap: break-word; }
  .release-note { max-width: 320px; }
  .faq-page-main { padding-left: 16px; padding-right: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Feedback is an email conversation, not a promised release schedule. */
.feedback-section { padding: 64px 24px; border-top: 1px solid var(--border); background: var(--bg2); }
.feedback-inner { max-width: 760px; margin: 0 auto; }
.feedback-inner h2 { font-size: clamp(28px, 4vw, 42px); line-height: 1.2; letter-spacing: -1px; margin: 12px 0 24px; }
.feedback-inner p { color: var(--text2); margin-bottom: 20px; }
.feedback-inner .btn-secondary { display: inline-flex; margin: 8px 0 16px; }
.feedback-email { font-size: 14px; }
.feedback-email a { color: var(--accent); }

.shortcut-features { list-style: none; margin: 16px 0; padding: 0; }
.shortcut-features li { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; color: var(--text2); font-size: 14px; }
.shortcut-features kbd { flex: 0 0 auto; font-family: var(--mono); color: var(--accent); }

footer .featured-on { margin-top: 40px; }

/* Keep section introductions centered across both languages and all pages. */
section > .container > .section-label,
section > .container > h2,
.section-sub,
.faq-page-hero,
.feedback-inner {
  text-align: center;
}
section > .container > .section-label {
  display: block;
}
section > .container > h2,
.section-sub {
  margin-left: auto;
  margin-right: auto;
}

/* Centered section navigation; its own swipeable row on small screens. */
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
.site-nav { grid-template-columns: minmax(120px, 1fr) auto minmax(120px, 1fr); gap: 20px; }
.site-nav .lang-switch { justify-self: end; }
.section-nav { display: flex; align-items: center; justify-content: center; gap: 20px; }
.section-nav a { color: var(--text2); text-decoration: none; font-size: 13px; font-weight: 500; white-space: nowrap; padding: 10px 0; }
.section-nav a:hover, .section-nav a:focus-visible { color: var(--accent); }
@media (max-width: 1100px) {
  .site-nav { height: 100px; padding: 0 20px; grid-template-columns: 1fr auto; grid-template-rows: 56px 44px; gap: 0; }
  .site-nav .nav-logo { grid-column: 1; grid-row: 1; }
  .site-nav .lang-switch { grid-column: 2; grid-row: 1; }
  .site-nav .section-nav { grid-column: 1 / -1; grid-row: 2; width: 100%; min-width: 0; justify-content: safe center; gap: 24px; overflow-x: auto; scrollbar-width: thin; }
  .section-nav a { flex: 0 0 auto; }
  html { scroll-padding-top: 120px; }
  .hero { padding-top: 150px; }
  .faq-page-hero, .changelog-page .faq-page-hero { padding-top: 150px !important; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Detailed FAQ answers must remain fully visible on narrow screens. */
.faq-page .faq-item.open .faq-a { max-height: none; }

/* The product is the headline: bold type, deliberate lines and an icy gradient. */
.hero h1.hero-title { font-size: clamp(48px, 6.8vw, 88px); line-height: 1.02; letter-spacing: -.055em; text-wrap: balance; margin-bottom: 32px; }
.hero-title .hero-title-lead { display: block; color: var(--text); font-size: .52em; font-weight: 600; letter-spacing: -.015em; margin-bottom: .55em; }
.hero-title .hero-title-product { display: block; padding-bottom: .08em; }
.hero-title .hero-title-product > span {
  display: block;
  /* Allow glyph overhang beyond the tightly tracked text width. */
  padding-inline: .1em;
  margin-inline: -.1em;
  color: var(--accent);
  background: linear-gradient(135deg, #bbf6ff 5%, #40d8f4 38%, #00aeee 65%, #687bff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-title .hero-title-accent { display: block; color: var(--text); font-size: .52em; font-weight: 650; letter-spacing: -.035em; margin-top: .3em; }
@media (max-width: 600px) {
  .hero h1.hero-title { font-size: clamp(42px, 12vw, 68px); margin-bottom: 30px; }
  .hero-title .hero-title-lead { font-size: .53em; margin-bottom: .65em; }
  .hero-title .hero-title-accent { font-size: .53em; margin-top: .5em; white-space: nowrap; }
}