/* Shared editorial system for every page outside the main landing page. */
.site-page {
  --page: #f7f4ec;
  --paper: #fffdf8;
  --paper-soft: #eeebe2;
  --paper-warm: #f0eadb;
  --ink: #101217;
  --ink-soft: #353733;
  --muted: #62645f;
  --line: #dedad0;
  --line-strong: #bdb9ae;
  --teal: #1747d1;
  --teal-dark: #1747d1;
  --teal-pale: #e3e9fb;
  --petrol: #101217;
  --petrol-raised: #1b1e25;
  --white: #fffdf8;
  --brand-navy: #1747d1;
  --brand-amber: #ff6b4a;
  --shell: min(1240px, calc(100vw - 48px));
  --radius-media: 16px;
  --radius-panel: 16px;
  --radius-control: 8px;
  --shadow-media: 0 32px 80px rgba(30, 31, 36, .12);
  --shadow-soft: 0 14px 38px rgba(30, 31, 36, .08);
  --ease: cubic-bezier(.2, .8, .2, 1);
  background: var(--page);
  color: var(--ink);
}

.site-page .grain-overlay { display: none; }
.site-page ::selection { background: #ffd84d; color: #101217; }
.site-page .shell { width: var(--shell); }
.site-page h1,
.site-page h2,
.site-page h3 { text-wrap: balance; }

.site-page .site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  min-height: 0;
  background: rgba(247, 244, 236, .94);
  border-bottom: 1px solid transparent;
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  backdrop-filter: blur(18px) saturate(130%);
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.site-page .site-header.is-scrolled {
  background: rgba(255, 253, 248, .97);
  border-bottom-color: var(--line-strong);
  box-shadow: 0 12px 34px rgba(31, 35, 30, .06);
}

.site-page .site-header .nav {
  min-height: 76px;
  height: 76px;
  gap: 34px;
}

.site-page .site-header .brand {
  color: var(--ink);
  font-size: 19px;
  font-weight: 760;
}

.site-page .brand-mark,
.site-page .brand-icon {
  width: 34px;
  height: 34px;
  display: block;
  border-radius: 9px;
}

.site-page .site-header .nav-links { gap: 34px; }
.site-page .site-header .nav-links a {
  padding: 8px 0;
  color: #42443f;
  background: transparent;
  font-size: 14px;
  font-weight: 650;
}
.site-page .site-header .nav-links a:hover,
.site-page .site-header .nav-links a[aria-current="page"] { color: #1747d1; }

.site-page .site-header .nav-action {
  min-height: 44px;
  padding: 0 18px;
  border-radius: 8px;
  color: #fff;
  background: #1747d1;
  box-shadow: 0 5px 0 #0c2b83;
}
.site-page .site-header .nav-action:hover { transform: translateY(-1px); }
.site-page .site-header .nav-action:active { transform: translateY(2px); box-shadow: 0 3px 0 #0c2b83; }

.site-page .eyebrow,
.site-page .chapter-label {
  color: #1747d1;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.site-page .features-hero {
  min-height: 560px;
  padding: 104px 0 92px;
  grid-template-columns: minmax(0, 1.3fr) minmax(250px, .48fr);
  gap: clamp(48px, 7vw, 100px);
}
.site-page .features-hero h1 {
  max-width: 930px;
  margin-top: 20px;
  font-size: clamp(54px, 7.1vw, 96px);
  font-weight: 630;
  letter-spacing: -.065em;
  line-height: .93;
}
.site-page .features-hero > div > p:last-child {
  max-width: 760px;
  color: var(--ink-soft);
  font-size: clamp(17px, 1.7vw, 21px);
  line-height: 1.55;
}
.site-page .release-card {
  padding: 24px 0 4px 28px;
  border-left-color: var(--line-strong);
}
.site-page .release-card strong { color: #1747d1; }

.site-page .feature-directory { padding-bottom: 128px; }
.site-page .feature-nav { top: 104px; }
.site-page .feature-nav a {
  border-left-color: var(--line);
  color: var(--muted);
}
.site-page .feature-nav a:hover,
.site-page .feature-nav a.is-active { color: #1747d1; border-left-color: #1747d1; }
.site-page .feature-chapter { padding-block: 104px; }
.site-page .feature-chapter:first-child { padding-top: 32px; }
.site-page .chapter-head > span { color: #1747d1; }
.site-page .chapter-head h2 {
  font-weight: 640;
  letter-spacing: -.05em;
}
.site-page .chapter-media,
.site-page .feature-spotlight,
.site-page .library-story,
.site-page .reliability-statement {
  border-radius: 16px;
  box-shadow: var(--shadow-soft);
}
.site-page .feature-list article {
  border-top-color: var(--line-strong);
}
.site-page .feature-list article h3 { color: var(--ink); }
.site-page .quality-note {
  padding: 18px 20px;
  border: 1px solid #c8d3f3;
  border-radius: 8px;
  background: #edf1fc;
  color: #28304b;
}

.site-page .feature-cta { background: #1747d1; }
.site-page .feature-cta .chapter-label { color: #ffd84d; }

.site-page .page-shell { padding-block: 88px 128px; }
.site-page .legal-aside h1 {
  font-weight: 640;
  letter-spacing: -.055em;
}
.site-page .legal-section > span { color: #1747d1; }
.site-page .legal-section a { color: #1747d1; }
.site-page .support-index li,
.site-page .update-card,
.site-page details {
  border-color: var(--line-strong);
}

.site-page .button,
.site-page .nav-action,
.site-page input,
.site-page textarea,
.site-page select { border-radius: 8px; }

.site-page .footer {
  color: #f5f2ea;
  background: #101217;
  border-top: 0;
}
.site-page .footer .brand,
.site-page .footer strong { color: #fff; }
.site-page .footer p,
.site-page .footer a,
.site-page .footer small { color: #b9bab6; }
.site-page .footer a:hover { color: #fff; }
.site-page .footer-bottom { border-top-color: rgba(255,255,255,.14); }
.site-page .lang-switch { border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.06); }

@media (max-width: 920px) {
  .site-page { --shell: min(100% - 32px, 1240px); }
  .site-page .site-header .nav { min-height: 68px; height: 68px; }
  .site-page .site-header .nav-toggle {
    display: block;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    color: #fff;
    background: #101217;
  }
  .site-page .site-header .nav-toggle span:not(.sr-only) { background: #fff; }
  .site-page .site-header .nav-links {
    inset: 76px 16px auto;
    padding: 12px;
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    background: rgba(255, 253, 248, .99);
    box-shadow: 0 22px 60px rgba(31, 35, 30, .18);
  }
  .site-page .site-header .nav-links a { padding: 12px; border-radius: 8px; }
  .site-page .features-hero { min-height: auto; padding: 72px 0 68px; grid-template-columns: 1fr; gap: 44px; }
  .site-page .features-hero h1 { font-size: clamp(48px, 11vw, 76px); }
  .site-page .feature-directory { grid-template-columns: 1fr; gap: 32px; }
  .site-page .feature-nav {
    position: static;
    padding: 18px 0;
    overflow-x: auto;
    border-bottom: 1px solid var(--line-strong);
  }
  .site-page .feature-nav nav { flex-direction: row; min-width: max-content; gap: 8px; }
  .site-page .feature-nav a { width: auto; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; }
  .site-page .feature-nav a.is-active { border-color: #1747d1; background: #e3e9fb; }
  .site-page .legal-layout { grid-template-columns: 1fr; gap: 48px; }
  .site-page .legal-aside { position: static; }
}

@media (max-width: 640px) {
  .site-page { --shell: calc(100% - 24px); }
  .site-page .features-hero { padding-top: 56px; }
  .site-page .features-hero h1 { font-size: clamp(43px, 13.5vw, 62px); }
  .site-page .release-card { padding: 22px 0 0; border-left: 0; border-top: 1px solid var(--line-strong); }
  .site-page .feature-chapter { padding-block: 76px; }
  .site-page .chapter-head { grid-template-columns: 36px minmax(0, 1fr); gap: 10px; }
  .site-page .chapter-head h2 { font-size: clamp(36px, 10vw, 48px); }
  .site-page .feature-list,
  .site-page .support-index { grid-template-columns: 1fr; }
  .site-page .page-shell { padding-block: 56px 88px; }
}

@media (prefers-reduced-motion: reduce) {
  .site-page *,
  .site-page *::before,
  .site-page *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
