*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* Shared theme tokens. Edit these values as the design evolves. */
  --paper-0: #f4f1ea; /* page ground */
  --paper-1: #fbf9f4; /* raised surface */
  --paper-2: #ebe6db; /* sunken tint   */
  --rule-1: #ded8cc;  /* hairline      */
  --rule-2: #c9c1b2;  /* stronger rule */
  --ink-0: #14130f;   /* primary text   16.5:1 on paper-0 */
  --ink-1: #4a463d;   /* secondary       8.3:1 */
  --ink-2: #6b6459;   /* muted — FLOOR   5.2:1 */

  /* Sparingly. If the signal appears more than a few times per screen it stops
     signalling and becomes decoration, which was the old failure mode. */
  /* PETROL, adopted 2026-08-31. Same hue as the previous brand teal (172 deg)
     so it reads as the same colour with more depth, not a different one, which
     matters because the wordmark is a PNG and cannot be recoloured to match.
     The old #087a6b measured 4.65:1 on paper-0 and FAILED at 4.21:1 on
     paper-2, our own tinted band. It was the tightest pair on the site and the
     reason 369 `color: var(--teal)` declarations had to be rewritten to a
     deeper variant. Petrol is 6.97 / 6.32 and needs no such workaround. */
  --signal: #0d5c52;
  --signal-deep: #0a4a42;
  --signal-tint: rgba(13, 92, 82, 0.05);
  --signal-line: rgba(13, 92, 82, 0.18);

  /* Story v2 (2026-10-08). People get their own mark: the role label above a
     quote, the opening quote glyph. Umber, rarer than the signal. Never on a
     button or a heading. */
  --human: #86501f;



  /* Newsreader is an editorial serif; almost no generated site uses a serif
     display, which is most of why it reads as art-directed. Plex Mono is kept
     because it earns its place on real SQL rather than as decoration. */
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-text: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ── LEGACY ALIASES ──────────────────────────────────────────────────────
     ~30 pages plus components.css, docs.css and news.css reference these
     names. Remapping them HERE warms the entire site in one edit rather than
     touching every file, and keeps this change reviewable. New CSS should use
     the canonical names above; these are not deprecated so much as plumbing.
     ─────────────────────────────────────────────────────────────────────── */
  --white: var(--paper-1);
  --off-white: var(--paper-0);
  --black: var(--ink-0);
  --ink: var(--ink-0);
  --mid: var(--ink-2);
  --light: var(--rule-1);
  --teal: var(--signal);
  --teal-light: var(--signal-tint);
  --teal-mid: var(--signal-deep);
  --font: var(--font-text);
  --mono: var(--font-mono);
}

html {
  scroll-behavior: smooth;
  /* Every fragment target clears the fixed 68px nav. Individual pages set
     scroll-margin-top on the specific elements they anchor, which works until
     someone adds a new id and forgets. This makes it the default. */
  scroll-padding-top: 96px;
}

/* ── HEADINGS ─────────────────────────────────────────────────────────────
   Newsreader on every heading, at 400. The editorial serif is most of why the
   identity does not read as generated, and until now only the homepage had it:
   every other page inherited Public Sans and looked like the old site wearing
   new colours.

   WEIGHT MATTERS AS MUCH AS THE FACE. 126 heading rules across the sidecars
   carried font-weight 700-800, and the loaded Newsreader range is 300-600, so
   leaving them would make the browser synthesise fake bold — heavier, muddier
   and worse than either real weight. Those rules are normalised alongside this
   one; a display serif gets its authority from size and space, not from being
   shouted. */
h1,
h2,
.hero-h1,
.section-h2 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.02em;
}

body {
  font-family: var(--font);
  background: var(--white);
  color: var(--ink);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  background: var(--teal);
  color: var(--white);
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  z-index: 200;
  text-decoration: none;
  border-radius: 0 0 4px 0;
}

.skip-link:focus {
  top: 0;
}

nav.main-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 48px;
  height: 68px;
  background: rgba(251, 249, 244, 0.96); /* paper-1, not cool white */
  border-bottom: 1px solid var(--light);
}

@media (prefers-reduced-motion: no-preference) {
  nav.main-nav {
    backdrop-filter: blur(8px);
  }
}

.nav-logo,
.footer-logo {
  text-decoration: none;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.nav-logo {
  padding: 4px 8px 4px 0;
}

.footer-logo {
  padding: 2px 8px 2px 0;
}

.nav-logo-img {
  height: 31px;
  width: auto;
  display: block;
}

.footer-logo-img {
  height: 22px;
  width: auto;
  display: block;
}

.nav-links,
.footer-links {
  display: flex;
  gap: 36px;
  list-style: none;
}

.footer-links {
  gap: 24px;
  flex-wrap: wrap;
}

.nav-links a,
.footer-links a {
  font-size: 14px;
  font-weight: 500;
  color: var(--mid);
  text-decoration: none;
  transition: color 0.18s;
}
.nav-links a { white-space: nowrap; }

/* Nine top-level items (Agents joined the IA in 2026-07) do not fit at 36px
   gaps and 48px shell padding on a narrow desktop — measured: the bar collides
   with the search button and clipped the nav CTA at 1120px. Compress the whole
   band between the drawer breakpoint (1100px) and comfortable rather than
   raising the breakpoint, which would hand a 1280px laptop a hamburger. */
@media (min-width: 1101px) and (max-width: 1400px) {
  nav.main-nav { padding: 0 20px; }
  .nav-links { gap: 14px; }
  .nav-links a { font-size: 13px; }
  .nav-drop-btn { font-size: 13px; }
  /* The dropdown panel keeps its own 14px links regardless of band. */
  .nav-links .nav-drop-menu a { font-size: 14px; }
}

.footer-links a {
  font-size: 13px;
}

.nav-links a:hover,
.footer-links a:hover,
.nav-links a.active {
  color: var(--ink);
}

/* Nav dropdown — one group ("How it works") gathering the product pages.
   Opens on hover and :focus-within (keyboard), plus click via nav.js, which
   also manages aria-expanded and outside-click/Esc closing. Only exists on
   desktop: under 1100px .nav-links is hidden and the drawer flattens the
   group into plain links. */
.nav-dropdown { position: relative; }
.nav-drop-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--mid);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.18s;
}
.nav-drop-btn:hover,
.nav-drop-btn.active { color: var(--ink); }
.nav-drop-caret { transition: transform 0.18s; }
.nav-dropdown:hover .nav-drop-caret,
.nav-dropdown.is-open .nav-drop-caret,
.nav-dropdown:focus-within .nav-drop-caret { transform: rotate(180deg); }
.nav-drop-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 190px;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: var(--white);
  border: 1px solid var(--light);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(15, 17, 23, 0.14);
  display: none;
}
/* Invisible bridge keeps :hover alive across the gap under the button. */
.nav-drop-menu::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  height: 14px;
}
.nav-dropdown:hover .nav-drop-menu,
.nav-dropdown.is-open .nav-drop-menu,
.nav-dropdown:focus-within .nav-drop-menu { display: block; }
.nav-links .nav-drop-menu a {
  display: block;
  padding: 9px 14px;
  border-radius: 9px;
  font-size: 14px;
}
.nav-links .nav-drop-menu a:hover { background: var(--off-white); }

.nav-right {
  display: flex;
  gap: 12px;
  align-items: center;
}

.btn-nav-solid,
.drawer-demo {
  font-size: 14px;
  font-weight: 700;
  color: var(--white);
  background: var(--teal);
  text-decoration: none;
  padding: 9px 22px;
  border-radius: 100px;
  box-shadow: 0 2px 10px rgba(13, 92, 82, 0.35);
  transition: background 0.18s, transform 0.18s, box-shadow 0.18s;
  white-space: nowrap;
}

.btn-nav-solid:hover,
.drawer-demo:hover {
  background: var(--teal-mid);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(13, 92, 82, 0.45);
}

.btn-nav-signin,
.drawer-signin {
  font-size: 14px;
  font-weight: 500;
  color: var(--mid);
  text-decoration: none;
  padding: 9px 12px;
  white-space: nowrap;
  transition: color 0.18s;
}

.drawer-signin {
  display: block;
  text-align: center;
  font-weight: 600;
  padding: 10px 16px;
}

/* Injected by search.js into the drawer's action row, so search survives the
   nav button being dropped under 560px. Matches .drawer-signin. */
.drawer-search {
  display: block;
  width: 100%;
  text-align: center;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  color: var(--mid);
  background: none;
  border: none;
  padding: 10px 16px;
  cursor: pointer;
  transition: color 0.18s;
}
.drawer-search:hover { color: var(--ink); }
.drawer-search:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 4px; }

.btn-nav-signin:hover,
.drawer-signin:hover {
  color: var(--ink);
}

.btn-nav-outline,
.drawer-demo-outline {
  font-size: 14px;
  font-weight: 700;
  color: var(--signal-deep);
  background: transparent;
  text-decoration: none;
  padding: 9px 20px;
  border: 1.5px solid var(--teal);
  border-radius: 100px;
  transition: background 0.18s, color 0.18s;
  white-space: nowrap;
}

.drawer-demo-outline {
  display: block;
  text-align: center;
  padding: 11px 24px;
}

.btn-nav-outline:hover,
.drawer-demo-outline:hover {
  background: var(--teal);
  color: var(--white);
}

/* Scope the shell footer so testimonial bylines keep their page styling. */
body > footer {
  border-top: 1px solid var(--light);
  background: var(--white);
}


.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* Brand block — logo + social marks. Keeping social OUT of .footer-links is
   the point: that list wraps, and whatever sat last wrapped alone. This group
   is content-sized and never participates in that wrap. */
.footer-brand {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-shrink: 0;
}

.footer-social {
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
  padding-left: 18px;
  border-left: 1px solid var(--light);
}

.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  color: var(--mid);
  transition: color 0.18s, background 0.18s;
}

.footer-social a:hover {
  color: var(--signal-deep);
  background: var(--teal-light);
}

.footer-social a:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.footer-social svg {
  display: block;
}

.footer-copy {
  font-family: var(--mono);
  font-size: 11px;
  /* Was #bbb, which sat at roughly 2.1:1 on the footer ground and failed AA
     badly. --ink-2 is the palette's muted floor at 5.2:1. */
  color: var(--ink-2);
}

/* Legal sub-row — present on every page (required for OAuth app verification) */
.footer-legal {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.footer-legal-links {
  display: flex;
  gap: 20px;
  list-style: none;
  flex-wrap: wrap;
}

.footer-legal-links a {
  font-size: 12px;
  color: var(--mid);
  text-decoration: none;
  transition: color 0.18s;
}

.footer-legal-links a:hover,
.footer-legal-links a:focus-visible {
  color: var(--signal-deep);
}

@media (min-width: 1101px) {
  .nav-hamburger, .nav-drawer, .nav-overlay { display: none !important; }
}

@keyframes drawerIn {
  from { opacity: 0; transform: scaleY(0.95); }
  to   { opacity: 1; transform: scaleY(1); }
}

@media (max-width: 1100px) {
  nav.main-nav {
    padding: 0 20px;
  }

  /* The link list belongs to the hamburger below this width. The action group
     does NOT: `.nav-right { display: none }` used to take Sign in, the CTA and
     the JS-injected search button off every screen under 1100px, which put the
     primary conversion action behind a menu tap on every phone and tablet.
     Worse, `mobile-bridge.js` only builds its sticky bottom-bar fallback at
     (max-width: 820px) or a coarse pointer under 1024px — so between 821px and
     1100px with a mouse there was no visible call to action anywhere on the
     page chrome at all.

     Keep the group; drop only what the drawer already carries. */
  .nav-links {
    display: none;
  }

  .nav-right {
    display: flex;
    gap: 10px;
    margin-left: auto;
    margin-right: 4px;
  }

  /* Duplicated verbatim in .nav-drawer's action row, so they are redundant
     here and would crowd the CTA off a 360px bar. */
  .nav-right .btn-nav-signin,
  .nav-right .btn-nav-outline {
    display: none;
  }

  .nav-hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    border-radius: 6px;
    flex-shrink: 0;
  }

  .nav-hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--ink);
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.25s ease;
  }

  .nav-hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
  .nav-hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .nav-hamburger:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 6px; }

  .nav-drawer {
    display: none;
    position: fixed;
    top: 68px;
    left: 0;
    right: 0;
    z-index: 99;
    /* The page is locked while open; the drawer owns its scrolling. */
    max-height: calc(100vh - 68px);
    max-height: calc(100dvh - 68px);
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    background: var(--white);
    border-bottom: 1px solid var(--light);
    padding: 8px 0 calc(20px + env(safe-area-inset-bottom, 0px));
    transform-origin: top;
    animation: drawerIn 0.22s ease forwards;
  }
  .nav-drawer.is-open {
    display: block;
  }
  /* The sticky signup bar must not cover the drawer's final actions. */
  .nav-drawer.is-open ~ .bridge-bar {
    visibility: hidden;
  }

  .nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 98;
    background: rgba(0, 0, 0, 0.25);
  }
  .nav-overlay.is-open {
    display: block;
  }

  .drawer-link {
    display: block;
    padding: 13px 24px;
    font-size: 15px;
    font-weight: 500;
    color: var(--mid);
    text-decoration: none;
    transition: color 0.15s, background 0.15s;
  }
  .drawer-link:hover {
    color: var(--ink);
    background: var(--off-white);
  }
  .drawer-link:focus-visible {
    outline: 2px solid var(--teal);
    outline-offset: -2px;
  }

  .drawer-divider {
    height: 1px;
    background: var(--light);
    margin: 8px 0;
  }

  .drawer-actions {
    padding: 12px 24px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .drawer-signin {
    display: block;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--mid);
    text-decoration: none;
    padding: 10px 16px;
    transition: color 0.18s;
  }
  .drawer-signin:hover { color: var(--ink); }

  .drawer-demo {
    display: block;
    text-align: center;
    background: var(--teal);
    color: var(--white);
    font-size: 15px;
    font-weight: 700;
    border-radius: 100px;
    padding: 13px 24px;
    text-decoration: none;
    transition: background 0.18s;
  }
  .drawer-demo:hover { background: var(--teal-mid); }

  .drawer-demo-outline {
    display: block;
    text-align: center;
    background: transparent;
    color: var(--signal-deep);
    font-size: 15px;
    font-weight: 700;
    border: 1.5px solid var(--teal);
    border-radius: 100px;
    padding: 11px 24px;
    text-decoration: none;
    transition: background 0.18s, color 0.18s;
  }
  .drawer-demo-outline:hover {
    background: var(--teal);
    color: var(--white);
  }

  .footer-inner {
    padding: 28px 24px;
    flex-direction: column;
    text-align: center;
  }

  .footer-brand {
    flex-direction: column;
    gap: 14px;
  }

  /* Stacked, the vertical rule and its left padding would read as an indent
     against a centred logo. */
  .footer-social {
    padding-left: 0;
    border-left: 0;
  }

  .footer-links {
    justify-content: center;
    gap: 18px;
  }
}

/* Narrow phones: the bar is logo + search + CTA + hamburger. At 360px that is
   ~326px of content in ~320px of usable width, so the search icon yields.
   It is still reachable from the drawer's link list. The CTA does not yield:
   it is the whole point of this file's change. */
@media (max-width: 560px) {
  .nav-right .nav-search-btn { display: none; }
  .btn-nav-solid { font-size: 13px; padding: 8px 16px; }
  nav.main-nav { padding: 0 14px; }
}

/* The sail makes the logo ~36px wider than the old wordmark. Below ~375px
   that pushed the hamburger off-screen, so the smallest phones get the old
   wordmark's width back (25px tall = 153px wide). nav.main-nav outranks the
   page-level .nav-logo-img rules in docs.css and the tech pages. */
@media (max-width: 380px) {
  nav.main-nav .nav-logo-img { height: 25px; }
}