.landing-header {
  position: sticky;
  top: 0;
  z-index: 40;
  min-height: 72px;
  display: grid;
  grid-template-columns: 156px minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  /* 100%, not 100vw: the sections below this bar are centred with auto margins, which measure
     the body's content box. 100vw includes the scrollbar, so the bar sat 7.5px right of every
     band it is supposed to align with on any browser with a classic scrollbar. */
  padding: 12px max(var(--page-gutter), calc((100% - var(--container)) / 2));
  border-bottom: 1px solid var(--glass-stroke);
  /* Opaque fallback first: without backdrop-filter this has to be a solid bar, not a
     see-through one. */
  background: var(--header-solid);
  box-shadow: 0 8px 32px rgba(23, 67, 92, 0.06);
}

/* Frosted, where it is supported. The bar already carried a blur, but behind a fill at 0.88
   alpha there was almost nothing left to blur - and it desaturated at 0.9, which drains the
   colour a frosted surface is supposed to concentrate. Thinner fill, saturation above one,
   and it reads as glass instead of as a slightly soft white bar. */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .landing-header {
    background: var(--header-glass);
    -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(var(--glass-saturate));
    backdrop-filter: blur(var(--glass-blur-strong)) saturate(var(--glass-saturate));
  }
}

.landing-primary-nav {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 1.5vw, 24px);
  color: var(--landing-muted);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}

.landing-primary-nav a {
  position: relative;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  text-decoration: none;
}

.landing-primary-nav a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 1px;
  left: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--landing-blue);
  opacity: 0;
  transform: scaleX(0.45);
  transition: opacity 160ms ease, transform 160ms ease;
}

.landing-primary-nav a:hover,
.landing-primary-nav a.is-active,
.landing-primary-nav a[aria-current="page"] {
  color: var(--landing-blue-strong);
}

.landing-primary-nav a.is-active::after,
.landing-primary-nav a[aria-current="page"]::after {
  opacity: 1;
  transform: scaleX(1);
}

.landing-primary-nav a.landing-primary-nav__app,
.landing-menu-toggle {
  display: none;
}

.landing-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-self: end;
}

.landing-header-actions .theme-toggle {
  --theme-control-size: 44px;
  border-width: 2px;
  border-radius: var(--radius-sm);
  box-shadow: var(--pixel-shadow-sm);
}

/* Below this width the header keeps only the wordmark and the theme control; the section
   list and the primary action move to the app shell at the bottom of the viewport, where a
   thumb can reach them. The drawer that used to live here is gone — it restated links the
   section rail and the sheet already carry, and its click handler fought the one in
   site.js for the same tap. */
@media (max-width: 1120px) {
  .landing-header {
    --landing-mobile-control-size: 48px;
    isolation: isolate;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 16px;
    padding-block: 12px;
  }

  .landing-header-actions .theme-toggle {
    --theme-control-size: var(--landing-mobile-control-size);
    min-width: var(--landing-mobile-control-size);
    min-height: var(--landing-mobile-control-size);
    order: 1;
  }

  .landing-header-actions {
    gap: 12px;
  }

  .landing-header-actions .btn {
    display: none;
  }

  .landing-primary-nav[hidden] {
    display: none;
  }

  /* The shell is fixed, so the page needs a floor tall enough to scroll clear of it. */
  .landing-page {
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 360px) {
  .landing-header .brand-logo {
    width: 116px;
    height: auto;
  }
}

/* ---- App shell ------------------------------------------------------------------- */

.app-shell {
  --app-shell-control: var(--landing-mobile-control-size, 48px);
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 8px 16px calc(8px + env(safe-area-inset-bottom));
  background:
    linear-gradient(180deg, var(--glass-highlight), transparent 46%),
    var(--glass-fill-strong);
  box-shadow:
    inset 0 1px 0 var(--glass-stroke),
    var(--shadow-overlay);
}

.app-shell[hidden] {
  display: none;
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .app-shell {
    -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(var(--glass-saturate));
    backdrop-filter: blur(var(--glass-blur-strong)) saturate(var(--glass-saturate));
    background:
      linear-gradient(180deg, var(--glass-highlight), transparent 46%),
      var(--glass-fill);
  }
}

.app-shell__sections,
.app-shell__cta {
  min-height: var(--app-shell-control);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  /* Touch feedback is a press, not a hover: a phone has no hover, so a lit state entered
     on tap has nothing to leave it. */
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.app-shell__sections {
  min-width: 0;
  justify-content: flex-start;
  color: var(--text);
  background: var(--glass-fill-quiet);
  box-shadow: inset 0 0 0 1px var(--glass-stroke);
}

.app-shell__sections:active {
  transform: scale(0.97);
}

.app-shell__sections:focus-visible,
.app-shell__cta:focus-visible {
  outline: 2px solid var(--glow-route);
  outline-offset: 3px;
}

.app-shell__icon {
  width: 20px;
  height: 20px;
  flex: none;
  display: grid;
  place-items: center;
}

.app-shell__icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
}

.app-shell__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-shell__cta {
  flex: none;
  color: var(--white);
  background: var(--blue);
}

.app-shell__cta:active {
  transform: scale(0.97);
}

.app-shell__cta .google-mark {
  width: 18px;
  height: 18px;
  flex: none;
  padding: 2px;
  border-radius: 50%;
  background: var(--white);
}

/* ---- Section sheet ---------------------------------------------------------------- */

.app-sheet {
  position: fixed;
  inset: 0;
  z-index: 45;
}

.app-sheet[hidden] {
  display: none;
}

.app-sheet__scrim {
  position: absolute;
  inset: 0;
  background: rgba(6, 12, 22, 0.42);
  opacity: 0;
  transition: opacity 200ms ease;
}

.app-sheet.is-open .app-sheet__scrim {
  opacity: 1;
}

.app-sheet__panel {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  /* dvh rather than vh: on iOS the collapsing address bar makes vh taller than the
     visible viewport, which put the last link under the browser chrome. */
  max-height: min(72dvh, 560px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 12px 16px calc(20px + env(safe-area-inset-bottom));
  border-radius: 16px 16px 0 0;
  background:
    linear-gradient(180deg, var(--glass-highlight), transparent 46%),
    var(--glass-fill-strong);
  box-shadow:
    inset 0 1px 0 var(--glass-stroke),
    var(--shadow-overlay);
  transform: translateY(100%);
  transition: transform 220ms cubic-bezier(0.32, 0.72, 0, 1);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .app-sheet__panel {
    -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(var(--glass-saturate));
    backdrop-filter: blur(var(--glass-blur-strong)) saturate(var(--glass-saturate));
  }
}

.app-sheet.is-open .app-sheet__panel {
  transform: translateY(0);
}

.app-sheet__grip {
  display: block;
  width: 40px;
  height: 4px;
  margin: 0 auto 12px;
  border-radius: 999px;
  background: var(--line-strong);
}

.app-sheet__title {
  margin: 0 0 12px;
  color: var(--subtle);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.app-sheet__list {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
  list-style: none;
}

.app-sheet__list a {
  min-height: var(--landing-mobile-control-size, 48px);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 12px;
  border-radius: 12px;
  color: var(--text);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
}

.app-sheet__list a::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--line-strong);
}

.app-sheet__list a:active {
  background: var(--glass-fill-quiet);
}

.app-sheet__list a:focus-visible {
  outline: 2px solid var(--glow-route);
  outline-offset: -2px;
}

.app-sheet__list a.is-active,
.app-sheet__list a[aria-current] {
  color: var(--blue-strong);
  background: var(--glass-fill-quiet);
}

.app-sheet__list a.is-active::before,
.app-sheet__list a[aria-current]::before {
  background: var(--blue);
  box-shadow: 0 0 0 4px var(--glow-route-soft);
}

/* The page behind the sheet must not scroll with it. */
body.app-sheet-open {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .app-shell__sections,
  .app-shell__cta,
  .app-sheet__scrim,
  .app-sheet__panel {
    transition: none;
  }

  .app-shell__sections:active,
  .app-shell__cta:active {
    transform: none;
  }
}