html { scroll-padding-top: 24px; }
body { overflow-wrap: break-word; }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid #FF9C94;
  outline-offset: 4px;
}
.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 30;
  padding: 12px 18px; background: #FFFFFF; color: #111111;
}
.skip-link:focus { top: 12px; }
.site-nav a, .lp-nav a, .lp-footer-links a { display: inline-flex; align-items: center; min-height: 44px; }
.lp-footer-links { flex-basis: 100%; font-size: 14px; color: #BFBFBF; }
.site-header-in, header { flex-wrap: wrap; }
.breadcrumbs { font-size: 14px; color: #BFBFBF; margin-bottom: 24px; }
.breadcrumbs a, main p a, main li a { color: #FF9C94; text-decoration: underline; text-underline-offset: 3px; }
.breadcrumbs span { margin: 0 8px; }
.wrap h1 { font-size: clamp(28px, 5vw, 40px); overflow-wrap: anywhere; }
.wrap li { font-size: 16px; line-height: 1.7; color: #BFBFBF; margin-bottom: 10px; }
.wrap .meta { color: #B0B0B0; line-height: 1.6; }
.toc { padding: 20px; border: 1px solid #353535; border-radius: 16px; margin: 28px 0; }
.toc ol { margin-bottom: 0; padding-left: 24px; }
.toc h2 { margin-top: 0; }
.lp-intro { max-width: 1000px; margin: 0 auto; padding: 24px var(--lp-x) 56px; }
.lp-intro h1 { font-family: var(--font-display); font-size: clamp(28px, 4vw, 44px); line-height: 1.15; letter-spacing: -.02em; font-weight: 500; }
.lp-intro h2 { font-size: 20px; line-height: 1.3; font-weight: 500; }
.lp-intro p { font-size: 16px; line-height: 1.7; color: #BFBFBF; }
.lp-intro .lede { font-size: 20px; color: #E8E8E8; }
.lp-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; padding: 20px 0; }
.lp-waitlist-card label { display: block; color: #DDDDDD; font-size: 14px; margin: 0 0 8px; }
.lp-waitlist-overlay:target { display: flex; }
.lp-waitlist-close { min-width: 44px; min-height: 44px; }
.lp-waitlist-input { font-size: 16px; }
/* Narrow desktop windows keep the one-row header (logo, links, button); only the spacing tightens.
   The phone layout below takes over at 760px. */
@media (max-width: 1100px) {
  .site-header-in { padding: 20px; }
  .site-nav, .lp-nav { display: flex; flex-wrap: nowrap; gap: 0 14px; white-space: nowrap; }
  .site-cta { display: inline-flex; }
}
@media (max-width: 600px) {
  .lp-features { grid-template-columns: 1fr; gap: 0; }
  .lp-intro { padding-top: 0; }
  .lp-footer > div:first-child { flex-wrap: wrap; }
  .lp-store-btn { padding: 9px 14px; }
}
/* Phone header on every page type: logo centred, links centred under it, no waitlist button. */
@media (max-width: 760px) {
  .lp-header, .site-header-in, .study-header { flex-direction: column; align-items: center !important; gap: 8px !important; }
  /* block + text-wrap: balance splits the links into even rows instead of leaving one alone on the last row */
  .lp-header .lp-nav, .site-header-in .site-nav, header.study-header nav { display: block; order: 0; flex: 0 0 auto; width: auto; margin: 0; text-align: center; text-wrap: balance; }
  .lp-header .lp-nav a, .site-header-in .site-nav a, .study-header nav a { margin: 0 10px; }
  .lp-header .lp-cta, .site-header-in .site-cta, .study-header .study-cta { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}