/* Four focused studies: logo alignment and header tone. */
html[data-header-study] {
  --study-header-background: #0a0810;
  --study-header-border: #aa9adf16;
  --study-menu-background: #111016f5;
}
html[data-header-tone="grey"] {
  --study-header-background: #141414;
  --study-header-border: #ffffff12;
  --study-menu-background: #1a1a1af5;
}
html[data-header-study] .site-header {
  top: 0; width: 100%; height: 60px; padding: 0 clamp(24px,4vw,64px);
  grid-template-columns: 1fr auto 1fr;
  border: 0; border-bottom: 1px solid var(--study-header-border); border-radius: 0;
  background: var(--study-header-background); color: #f7f5fa;
  box-shadow: none; backdrop-filter: blur(18px);
}
html[data-header-study] .site-header .brand__light { opacity: 1; }
html[data-header-study] .site-header .brand__dark { opacity: 0; }
html[data-header-study] .site-header .brand img { left: 0; }
html[data-header-study] .site-header .action--header { --action-base: #f2efe9; color: #0d0c10; }
html[data-header-study] .site-header .action--header:is(:hover,:focus-visible) { color: #fff; }
html[data-header-study] .plans-page { padding-top: 108px; }
html[data-header-study] .site-header .mobile-menu {
  border-color: #ffffff20; background: var(--study-menu-background); color: #f7f5fa;
  box-shadow: 0 18px 46px #0006;
}
html[data-header-study] .site-header .mobile-menu a { border-bottom-color: #ffffff1f; }
html[data-header-study] .site-header .header-actions { grid-column: 3; grid-row: 1; }
html[data-header-align="centered"] .site-header .brand { grid-column: 2; grid-row: 1; justify-self: center; }
html[data-header-align="centered"] .site-header .header-nav { grid-column: 1; grid-row: 1; justify-self: start; transform: none; }
html[data-header-align="left"] .site-header .brand { grid-column: 1; grid-row: 1; justify-self: start; }
html[data-header-align="left"] .site-header .header-nav { grid-column: 2; grid-row: 1; transform: none; }
@media(max-width:760px) {
  html[data-header-study] .site-header { height: 48px; padding: 0 22px; }
  html[data-header-study] .plans-page { padding-top: 64px; }
  html[data-header-study] .header-actions { display: none; }
  html[data-header-study] .mobile-menu-toggle { grid-column: 3; grid-row: 1; justify-self: end; }
  html[data-header-study] .site-header .mobile-menu { right: 14px; }
}