/* Initial Paired Offer: the site's own faces and the header / pills / footer the app pages
   and /docs share. Tokens lifted from the home page stylesheet rather than
   approximated, so the app reads as the same site. */

@font-face {
  font-family: HaasUnicaSH-Regular;
  font-display: swap;
  font-style: normal;
  src: url(/fonts/HaasUnicaSH-Regular.woff2) format("woff2"),
       url(/fonts/HaasUnicaSH-Regular.woff) format("woff");
}
@font-face {
  font-family: HaasUnicaSH-Medium;
  font-display: swap;
  font-style: normal;
  src: url(/fonts/HaasUnicaSH-Medium.woff2) format("woff2"),
       url(/fonts/HaasUnicaSH-Medium.woff) format("woff");
}
@font-face {
  font-family: ductile;
  font-display: swap;
  font-style: normal;
  src: url(/fonts/ductile.woff2) format("woff2"),
       url(/fonts/ductile.woff) format("woff");
  unicode-range: u+0000-002a, u+002c-003f, u+0041-ffff;
}

:root {
  --c-accent: #4f8cff;
  --c-bg: #e8eefa;
  --c-bg-brand: #2f5bd6;
  --c-secondary: #bcd3ff;
  --c-placeholder: #c7d8ff;
  --c-dark: #000;
  --c-light: #fff;
  --c-up: #1f8f3a;
  --c-down: #b3261e;
  --pad: 1rem;
  --radius: 1.25rem;
}
@media screen and (min-width: 1024px) {
  :root { --pad: 2.5rem; }
}

html { -webkit-font-smoothing: antialiased; }
body { background: var(--c-bg); color: var(--c-dark); overflow-x: hidden; }
.wrap { padding: 0 var(--pad); }
.rule { height: 1px; background: rgba(0, 0, 0, .18); width: 100%; }

/* ---------- pills ---------- */
.pill {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: HaasUnicaSH-Medium, Helvetica, sans-serif; font-size: .8rem;
  padding: .7rem 1.35rem; border-radius: 999px; border: 1px solid var(--c-dark);
  background: transparent; color: var(--c-dark); white-space: nowrap; cursor: pointer;
  text-decoration: none;
  transition: background .35s ease, color .35s ease, transform .35s ease, opacity .2s ease;
}
.pill:hover { background: var(--c-dark); color: var(--c-accent); transform: translateY(-2px); }
.pill--dark { background: var(--c-dark); color: var(--c-accent); border-color: var(--c-dark); }
.pill--dark:hover { background: var(--c-accent); color: var(--c-dark); }
/* The mark carries it, so the pill is square rather than a word's width. */
.pill--x { padding: .7rem .85rem; }
.pill--x svg { width: .85rem; height: .85rem; fill: currentColor; display: block; }

/* ---------- header ---------- */
header.bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30; box-sizing: border-box;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1.25rem var(--pad);
  background: rgba(232, 238, 250, .82);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .12);
}
header.bar .pill { background: var(--c-light); }
header.bar .pill--dark { background: var(--c-dark); }
header.bar .pill:hover { background: var(--c-dark); }
header.bar .pill--dark:hover { background: var(--c-accent); }
.lockup {
  display: inline-flex; align-items: center; gap: .75rem;
  font-family: ductile, Helvetica, sans-serif; font-size: 1.1rem;
  letter-spacing: .06em; line-height: 1; color: var(--c-dark); text-decoration: none;
}
/* the approved IPO logo, cut to size by tools/make-marks.mjs */
.lockup__mark { width: 2.4rem; height: 2.4rem; border-radius: .5rem; display: block; flex: none; }
.lockup small {
  font-family: HaasUnicaSH-Medium, Helvetica, sans-serif; font-size: .62rem;
  letter-spacing: .18em; text-transform: uppercase;
  display: block; margin-top: .35rem; opacity: .6;
}
.nav { display: flex; gap: .5rem; align-items: center; }

/* Below the desktop breakpoint the pills will not fit beside the lockup, so
   they drop to a line of their own and scroll sideways. */
@media screen and (max-width: 899px) {
  header.bar { flex-wrap: wrap; gap: .8rem 1rem; padding: 1rem var(--pad) .9rem; }
  .lockup { font-size: .8rem; gap: .6rem; }
  .lockup__mark { width: 2rem; height: 2rem; }
  .lockup small { margin-top: .25rem; }
  .nav {
    width: 100%;
    overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: none; -ms-overflow-style: none;
    margin-inline: calc(var(--pad) * -1);
    padding: .2rem var(--pad) .25rem;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav .pill { flex: 0 0 auto; padding: .5rem 1rem; font-size: .72rem; }
  .nav .pill--x { padding: .5rem .72rem; }
  .nav .pill--dark { order: -1; }
}

/* The header is fixed, so the page starts under it. */
main.pad, main.docs { padding-top: 6.5rem; }
@media screen and (max-width: 899px) { main.pad, main.docs { padding-top: 8.5rem; } }

/* The site's type is a single weight; let the headings sit like the home page's. */
.pad h1, .pad h2 { font-weight: 400; }
.pad h1 { letter-spacing: -.035em; line-height: .98; }
.pad h3 { font-family: HaasUnicaSH-Medium, Helvetica, sans-serif; font-weight: 400; }
.pad .pad-btn, .pad .pad-tab, .pad .pad-card { font-family: HaasUnicaSH-Medium, Helvetica, sans-serif; }

/* ---------- footer ---------- */
footer.ob-foot { padding: 3rem var(--pad) 2.5rem; font-size: .72rem; opacity: .6; line-height: 1.6; }
footer.ob-foot a { color: inherit; }
.footer__row {
  display: flex; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap; margin-top: 1.25rem;
}
.footer__row span:first-child { max-width: 60ch; }