/* Kenova — shared header/footer shell.
   Every page had grown its own top bar with its own geometry:
     index    .sitebar > .brandbar          22px pad / 20px vpad / 22px wordmark
     pricing  nav.page-nav (bar+container)  20px pad / 14px vpad / 24px wordmark
     story    .topbar > .bar-inner.brandbar 32px pad / 18px vpad / 22px wordmark
     guide    nav > .wrap                   28px pad / 16px vpad / 21px wordmark
     legal    header                        32px pad / 20px vpad
   Loaded LAST on every page so it wins the cascade. Colour and content rules
   stay with each page; only size, spacing and alignment are unified here. */

:root {
  --k-shell-max: 1140px;
  --k-shell-pad: 22px;
  --k-shell-vpad: 16px;
}
@media (min-width: 720px) {
  :root { --k-shell-pad: 32px; --k-shell-vpad: 18px; }
}

/* --- centred container inside the teal bar --- */
.sitebar > .brandbar,
.topbar > .bar-inner,
body > nav > .wrap {
  max-width: var(--k-shell-max);
  margin: 0 auto;
  padding-left: var(--k-shell-pad);
  padding-right: var(--k-shell-pad);
  padding-top: var(--k-shell-vpad);
  padding-bottom: var(--k-shell-vpad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}

/* pricing's bar is background AND container - keep the full-bleed padding
   trick, but match the same inner alignment and vertical rhythm */
nav.page-nav {
  height: auto;
  padding-top: var(--k-shell-vpad);
  padding-bottom: var(--k-shell-vpad);
  padding-left: calc(max(0px, 100% - var(--k-shell-max)) / 2 + var(--k-shell-pad));
  padding-right: calc(max(0px, 100% - var(--k-shell-max)) / 2 + var(--k-shell-pad));
  gap: 14px;
}

/* legal pages get the same gutter and rhythm */
body > header:not(.hero) {
  padding-top: var(--k-shell-vpad);
  padding-bottom: var(--k-shell-vpad);
  padding-left: calc(max(0px, 100% - var(--k-shell-max)) / 2 + var(--k-shell-pad));
  padding-right: calc(max(0px, 100% - var(--k-shell-max)) / 2 + var(--k-shell-pad));
}
body > header:not(.hero) {
  display: flex;
  align-items: center;
  gap: 12px;
}
body > header:not(.hero) .brandlink {
  display: flex; align-items: center; gap: 10px; text-decoration: none;
}
body > header:not(.hero) .brandlink img { width: 32px; height: 32px; display: block; flex: 0 0 auto; }
body > header:not(.hero) .wordmark {
  font-family: 'Fraunces', Georgia, serif; font-weight: 600;
  font-size: 22px; letter-spacing: .02em; line-height: 1; color: #fff;
}
@media (min-width: 720px) {
  body > header:not(.hero) .wordmark { font-size: 24px; }
}

/* --- brand lockup --- */
.sitebar .brandlink, .topbar .brandlink,
nav.page-nav .brandlink, body > nav > .wrap > .brand,
.brandbar > a[aria-label] {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.sitebar .wordmark, .topbar .wordmark,
nav.page-nav .wordmark, body > nav .wordmark {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 22px;
  letter-spacing: .02em;
  line-height: 1;
}
.sitebar .brandlink img, .topbar .brandlink img,
nav.page-nav .brandlink img, body > nav > .wrap > .brand img,
.brandbar > a[aria-label] img {
  width: 32px;
  height: 32px;
  display: block;
  flex: 0 0 auto;
}

/* --- nav cluster --- */
.sitebar .nav-right, .topbar .nav-right,
nav.page-nav .nav-actions, body > nav > .wrap > .navlinks {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.sitebar .navlink, .topbar .navlink,
nav.page-nav .navlink, body > nav > .wrap > .navlinks a {
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  line-height: 1.2;
}
.sitebar select.lang, .topbar select.lang,
nav.page-nav select.lang, body > nav select.lang {
  font-size: 14px;
  padding: 7px 30px 7px 14px;
  line-height: 1.2;
}

@media (min-width: 720px) {
  .sitebar .wordmark, .topbar .wordmark,
  nav.page-nav .wordmark, body > nav .wordmark { font-size: 24px; }
  .sitebar .nav-right, .topbar .nav-right,
  nav.page-nav .nav-actions, body > nav > .wrap > .navlinks { gap: 22px; width: auto; }
}

/* --- footer legal line --- */
.legal-links { margin-top: 10px; font-size: 13px; opacity: .75; }
.legal-links a { text-decoration: none; }
.legal-links a:hover { text-decoration: underline; }


/* --- controls: the last two things that still differed page to page --- */
.sitebar select.lang, .topbar select.lang,
nav.page-nav select.lang, body > nav select.lang {
  box-sizing: border-box;
  height: 38px;
  padding: 0 30px 0 14px;
  font-size: 14px;
  line-height: 36px;
  border-width: 1px;
}
.sitebar .nav-right > .btn, .topbar .nav-right > .btn,
nav.page-nav .nav-actions > .btn-cta, body > nav > .wrap > .navlinks > .btn {
  box-sizing: border-box;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  font-size: 14px;
  line-height: 1.2;
}
.sitebar .navlink-btn, .topbar .navlink-btn,
nav.page-nav .navlink-btn, body > nav .navlink-btn {
  box-sizing: border-box;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
}


/* legal pages use <footer> itself as the legal line - give it the same gutter
   as everything else, otherwise it sits flush against the screen edge */
body > footer.legal-links {
  box-sizing: border-box;
  padding-left: calc(max(0px, 100% - var(--k-shell-max)) / 2 + var(--k-shell-pad));
  padding-right: calc(max(0px, 100% - var(--k-shell-max)) / 2 + var(--k-shell-pad));
  padding-bottom: 28px;
}