/* The site chrome: header, navigation, buttons and footer, shared by the
   homepage, pricing and docs so the three cannot drift apart. Every page that
   loads this also loads site.css, which defines the tokens used here. */

.skip { position: absolute; left: -999px; top: 0; display: inline-flex; align-items: center; min-height: 44px; }
.skip:focus {
  left: 1rem; top: 1rem; z-index: 90;
  display: inline-flex; align-items: center; min-height: 44px;
  background: var(--text); color: var(--ground);
  padding: 0.6rem 1rem; text-decoration: none; border-radius: 8px;
}

.chrome {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; flex-wrap: wrap;
  min-height: 64px;
  padding: 10px var(--gutter);
  position: sticky; top: 0; z-index: 70;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 220ms ease, border-color 220ms ease;
}
/* Light at the top, and a background at depth so the wordmark stays readable
   over whatever product window passes behind it. */
body.scrolled .chrome {
  background: rgba(16, 18, 23, 0.9);
  border-bottom-color: var(--border);
}
@supports (backdrop-filter: blur(1px)) {
  body.scrolled .chrome { background: rgba(16, 18, 23, 0.78); backdrop-filter: blur(14px); }
}
.wordmark {
  text-decoration: none;
  color: var(--text);
  display: inline-flex; align-items: center; min-height: 44px;
}
/* The lockup is one drawn shape: the mark, the wordmark and the .ai, on one
   baseline, in currentColor, so it needs no font to have loaded and reads the
   same on the dark site and on the paper chapter. */
.wordmark-lockup { height: 26px; width: auto; display: block; }
.wordmark:hover .wordmark-lockup, .wordmark:focus-visible .wordmark-lockup { color: var(--text); }
.foot-sign { display: flex; align-items: center; gap: 10px; }
.foot-mark { width: 18px; height: 18px; flex: none; opacity: 0.75; }
.chrome-nav { display: flex; gap: 0.15rem; align-items: center; flex-wrap: wrap; }
.chrome-nav a {
  color: var(--text-2); text-decoration: none; font-size: 0.92rem;
  min-height: 44px; padding: 0 0.7rem; display: inline-flex; align-items: center;
  border-radius: 999px;
  transition: color 150ms ease, background-color 150ms ease;
}
.chrome-nav a:hover, .chrome-nav a:focus-visible { color: var(--text); background: rgba(242, 239, 232, 0.06); }
.chrome-nav a[aria-current="page"] { color: var(--text); }
.chrome-cta { display: flex; gap: 0.5rem; align-items: center; }
.chrome-nav .nav-glyph { width: 15px; height: 15px; margin-right: 6px; flex: none; color: var(--gold); }
.chrome-menu {
  display: none;
  align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; flex: none;
  border: 1px solid var(--border-strong); border-radius: 10px;
  background: transparent; color: var(--text);
  cursor: pointer;
}
.menu-icon, .menu-icon::before { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 1px; }
.menu-icon { position: relative; }
.menu-icon::before { content: ''; position: absolute; left: 0; top: -6px; }
.chrome-menu[aria-expanded="true"] { border-color: var(--text); }
.chrome-menu[aria-expanded="true"] .menu-icon { transform: rotate(45deg); }
.chrome-menu[aria-expanded="true"] .menu-icon::before { transform: translateY(6px) rotate(90deg); }
.chrome-menu:focus-visible, .chrome-nav a:focus-visible, .wordmark:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
@media (max-width: 1440px) {
  .chrome { padding-inline: 32px; }
  .chrome-nav a { padding: 0 0.5rem; font-size: 0.86rem; }
  .chrome-cta .btn { padding: 0 0.95rem; font-size: 0.9rem; }
}
@media (max-width: 1220px) {
  /* Eight links do not fit beside the wordmark below this width, so they become a
     menu behind a button rather than disappearing. */
  .chrome { row-gap: 0; padding-inline: var(--gutter); gap: 0.5rem; flex-wrap: nowrap; }
  .chrome-menu { display: inline-flex; order: 3; }
  .chrome-cta { order: 2; margin-left: auto; }
  .chrome-cta .btn { min-height: 40px; padding: 0 0.85rem; font-size: 0.88rem; }
  .wordmark-lockup { height: 23px; }
  .chrome-nav { display: none; }
  .chrome.menu-open, body.scrolled .chrome.menu-open { background: rgba(16, 18, 23, 0.97); border-bottom-color: var(--border); }
  .chrome.menu-open { flex-wrap: wrap; }
  .chrome.menu-open .chrome-nav {
    display: flex; flex-direction: column; align-items: stretch;
    flex-basis: 100%; order: 4; gap: 0;
    margin-top: 0.75rem; padding-top: 0.35rem;
    border-top: 1px solid var(--border);
  }
  .chrome.menu-open .chrome-nav a { min-height: 48px; border-radius: 8px; }
}
@media (max-width: 420px) {
  .chrome-cta .btn { padding: 0 0.75rem; }
}

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 1.15rem;
  border-radius: 999px; text-decoration: none;
  font-family: var(--sans);
  font-weight: 600; font-size: 0.95rem; line-height: 1;
  border: 1px solid transparent;
  transition: background-color 160ms ease, border-color 160ms ease, transform 160ms cubic-bezier(0.22, 1, 0.36, 1), color 160ms ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--gold); color: #1A1305; }
.btn-primary:hover, .btn-primary:focus-visible { background: var(--gold-hover); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--border-strong); }
.btn-ghost:hover, .btn-ghost:focus-visible { border-color: var(--text-2); background: rgba(242, 239, 232, 0.04); }
.btn-text { background: transparent; color: var(--text-2); padding: 0 0.6rem; gap: 8px; font-weight: 500; }
.btn-text svg { width: 15px; height: 15px; fill: currentColor; flex: none; }
.btn-text:hover, .btn-text:focus-visible { color: var(--text); background: rgba(242, 239, 232, 0.05); }
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.site-foot {
  padding: 2rem var(--gutter) 2.5rem;
  color: var(--text-3);
  font-size: 0.85rem;
  display: grid; gap: 0.5rem;
  border-top: 1px solid var(--border);
}
.site-foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 1.1rem; }
.site-foot a {
  color: var(--text-2); text-decoration: none;
  display: inline-flex; align-items: center; min-height: 40px;
  border-bottom: 1px solid transparent;
}
.site-foot a:hover, .site-foot a:focus-visible { color: var(--text); border-bottom-color: currentColor; }
.site-foot a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.site-foot p { margin: 0; max-width: 60rem; }

/* The closed screen of a folding phone is about 344 CSS pixels wide. The
   lockup, the primary action and the menu button share it: the action keeps
   its destination and meaning under a shorter label, the padding gives up
   what it can, and every target stays 44 px tall. */
.cta-short { display: none; }
@media (max-width: 440px) {
  .chrome { padding-inline: 14px; gap: 0.4rem; min-height: 56px; padding-block: 6px; }
  .wordmark-lockup { height: 21px; }
  .chrome-cta .btn { padding: 0 0.7rem; font-size: 0.86rem; min-height: 40px; white-space: nowrap; }
  .cta-long { display: none; }
  .cta-short { display: inline; }
  .chrome-menu { width: 40px; height: 40px; }
}
/* An open menu on a short screen (a folding phone held sideways) scrolls
   inside the header rather than running off the bottom. */
@media (max-width: 1220px) {
  .chrome.menu-open .chrome-nav { max-height: calc(100vh - 72px); max-height: calc(100dvh - 72px); overflow-y: auto; overscroll-behavior: contain; }
}
/* The sticky header must never sit on top of the thing a link or the Tab
   key just moved to. */
html { scroll-padding-top: 88px; }
main [id] { scroll-margin-top: 88px; }