/* ============================================================================
   Pragma site: the shared system

   Tokens, type, buttons, the pill nav and the footer, used by every page:
   the home page (with home.css on top) and the docs, legal and support
   pages (with docs.css on top). One file, so the pages cannot drift into two
   versions of the same brand.

   Brand: neutral white and grey grounds, near-black ink, Inter and Inter
   Tight, and the orange in exactly two places: a filled control and your own
   message bubble. Emphasis is carried in tone, ink against a softened ink,
   never in orange text.

   Sections separate by ground tone alone. Borders belong to components.
   ========================================================================== */

:root {
  --flare:       #FF532E;  /* the brand orange, unmodified: edges only, never a fill */
  --accent:      #CE3F19;  /* the fill that can carry white (4.83:1) */
  --accent-text: #C63C16;  /* orange as text on white */

  --paper:    #FFFFFF;
  --ground:   #F4F4F6;
  --ground-2: #ECECF0;
  --inset:    #F0F0F3;
  --control:  #E6E6EC;
  --line:     #E3E3E9;
  --line-2:   #C7C7D1;

  --ink:    #16161A;
  --text-2: #55555E;
  --text-3: #6E6E78;
  /* The quiet half of a two-tone headline: large text, 3:1 or better on both grounds. */
  --soft:   color-mix(in oklab, var(--ink) 50%, var(--paper));

  --ok:     #1F7A4D;
  --danger: #C42B21;

  --r-sm: 10px;
  --r:    16px;
  --r-lg: 24px;
  --r-xl: 36px;

  --shadow-1: 0 1px 2px rgb(22 22 26 / .06), 0 3px 10px -4px rgb(22 22 26 / .10);
  --shadow-2: 0 1px 3px rgb(22 22 26 / .06), 0 22px 48px -24px rgb(22 22 26 / .30);
  --shadow-3: 0 2px 6px rgb(22 22 26 / .05), 0 60px 120px -48px rgb(22 22 26 / .42);

  --expo: cubic-bezier(.16, 1, .3, 1);
  --press: 120ms cubic-bezier(.2, .7, .3, 1);

  --maxw: 1240px;
  --gut: clamp(20px, 4.4vw, 56px);
  --nav-h: 64px;

  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --display: "Inter Tight", "Inter", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Menlo, Consolas, monospace;
}

/* ── reset ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(15.5px, .3vw + 14.4px, 17px);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* clip, not hidden: hidden makes body the scroller and breaks every
     measurement of documentElement.scrollTop */
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
code { font-family: var(--mono); font-size: .88em; }
::selection { background: color-mix(in oklab, var(--flare) 30%, transparent); color: var(--ink); }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip {
  position: absolute; left: -999px; top: 8px; z-index: 100;
  background: var(--ink); color: var(--paper); padding: .7rem 1.1rem; border-radius: var(--r-sm);
}
.skip:focus { left: 8px; }
:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
  border-radius: 8px;
}

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
.is-grabbing, .is-grabbing * { cursor: grabbing !important; user-select: none; }

/* ── type ──────────────────────────────────────────────────────────────── */
/* Tracking is size-specific: 0 at display size reads as gaps between the
   letters, and the value that is right at 3rem is slack at 10rem. */
.display {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(3.9rem, 9.4vw, 9.6rem);
  line-height: .86;
  letter-spacing: -.058em;
  margin: .32em 0 .34em;
}
.h2 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.45rem, 5.1vw, 4.7rem);
  line-height: .98;
  letter-spacing: -.046em;
  text-wrap: balance;
}
.h2--xl { font-size: clamp(3rem, 8.2vw, 7.6rem); letter-spacing: -.056em; line-height: .9; }
.soft { color: var(--soft); }
.accent { color: var(--accent-text); }

.kicker {
  display: inline-flex; align-items: center; gap: .7em;
  font-size: .8rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 1.4rem;
}
.kicker::before { content: ""; width: 1.4em; height: 2px; border-radius: 2px; background: currentColor; opacity: .6; }
.kicker--center { justify-content: center; }

.head { max-width: 780px; }
.head__lede { margin-top: 1.5rem; max-width: 36rem; font-size: 1.12em; color: var(--text-2); line-height: 1.55; }
.head--split {
  max-width: none;
  display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); gap: 2rem 4rem; align-items: end;
}
.head--split .head__lede { margin: 0 0 .5rem; }

/* Split headlines: each line rides up out of its own mask. Built by home.js
   only when it is going to animate them. */
.line { display: block; overflow: clip; padding-bottom: .1em; margin-bottom: -.1em; }
.line__in { display: block; }

/* ── buttons ───────────────────────────────────────────────────────────── */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  height: 44px; padding: 0 20px;
  border-radius: 999px; border: 1px solid transparent;
  font-weight: 600; font-size: 15px; letter-spacing: -.01em; white-space: nowrap;
  cursor: pointer; isolation: isolate; overflow: hidden;
  transition: scale var(--press), background-color .25s, border-color .25s, box-shadow .25s, color .25s;
}
/* Feedback on pointer-down, never on release. `scale` rather than transform,
   so the magnet (which owns `translate`) and the press never overwrite each
   other. */
.btn.is-pressed { scale: .955; }
.btn--sm { height: 38px; padding: 0 15px; font-size: 14px; }
.btn--lg { height: 54px; padding: 0 26px; font-size: 16px; }
.btn--xl { height: 66px; padding: 0 34px; font-size: 18px; }

.btn--primary {
  background: var(--accent); color: #fff;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .22),
    0 1px 2px rgb(22 22 26 / .2),
    0 12px 28px -12px rgb(206 63 25 / .7);
}
.btn--primary:hover { background: color-mix(in oklab, var(--accent) 88%, var(--ink)); }
/* A sheen that crosses the button once on hover. White light, not an orange
   gradient: the fill stays one flat colour. */
.btn--primary::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, transparent 30%, rgb(255 255 255 / .28) 48%, transparent 66%);
  translate: -110% 0;
}
.btn--primary:hover::after { translate: 110% 0; transition: translate .8s var(--expo); }
.btn--primary svg { transition: translate .35s var(--expo); }
.btn--primary:hover svg { translate: 0 2px; }

.btn--ghost { background: var(--paper); color: var(--ink); border-color: var(--line); box-shadow: var(--shadow-1); }
.btn--ghost:hover { border-color: var(--line-2); }
.btn__play {
  width: 22px; height: 22px; border-radius: 50%; background: var(--ink);
  display: grid; place-items: center; transition: scale .35s var(--expo);
}
.btn__play .pi { color: var(--paper); margin-left: 1px; }
.btn--ghost:hover .btn__play { scale: 1.15; }

/* ── nav ───────────────────────────────────────────────────────────────── */
.nav {
  position: fixed; top: 12px; left: 0; right: 0; z-index: 50;
  padding-inline: 12px;
  pointer-events: none;
}
.nav__bar {
  pointer-events: auto;
  max-width: 1180px; margin: 0 auto; height: 56px;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0 8px 0 16px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: background-color .4s, border-color .4s, box-shadow .4s, backdrop-filter .4s;
}
.nav.is-stuck .nav__bar {
  background: rgb(255 255 255 / .74);
  border-color: rgb(22 22 26 / .07);
  box-shadow: 0 1px 2px rgb(22 22 26 / .04), 0 12px 32px -16px rgb(22 22 26 / .22);
  backdrop-filter: saturate(1.6) blur(18px);
  -webkit-backdrop-filter: saturate(1.6) blur(18px);
}
.brand { display: inline-flex; align-items: center; gap: .55rem; }
.brand__mark { width: 28px; height: 28px; display: block; }
.brand__word { font-family: var(--display); font-weight: 800; font-size: 1.2rem; letter-spacing: -.035em; }
.brand__by {
  font-size: .7rem; font-weight: 600; color: var(--text-3);
  padding: .2em .55em; border-radius: 999px; background: var(--ground-2);
}
.nav__links { position: relative; display: flex; gap: 2px; }
.nav__actions { display: flex; align-items: center; gap: 8px; }
.nav__links a {
  position: relative; z-index: 1;
  font-size: .9rem; font-weight: 500; color: var(--text-2);
  padding: .5rem .85rem; border-radius: 999px;
  transition: color .2s;
}
.nav__links a:hover, .nav__links a.is-on { color: var(--ink); }
.nav__thumb {
  position: absolute; left: 0; top: 0; height: 100%; width: 0;
  border-radius: 999px; background: color-mix(in oklab, var(--ink) 7%, transparent);
  opacity: 0; transition: opacity .3s;
}
.nav__links.has-on .nav__thumb { opacity: 1; }

/* Pages without script (docs, legal, support) show the surface from the
   start and mark the current link in CSS instead of with a sliding thumb. */
.nav--solid .nav__bar {
  background: rgb(255 255 255 / .8);
  border-color: rgb(22 22 26 / .07);
  box-shadow: 0 1px 2px rgb(22 22 26 / .04), 0 12px 32px -16px rgb(22 22 26 / .22);
  backdrop-filter: saturate(1.6) blur(18px);
  -webkit-backdrop-filter: saturate(1.6) blur(18px);
}
.nav__links a[aria-current="page"] { color: var(--ink); background: color-mix(in oklab, var(--ink) 7%, transparent); }
.nav__links a:not([aria-current]):hover { background: color-mix(in oklab, var(--ink) 4%, transparent); }

/* The menu on a phone, where the links above do not fit. A <details>, so it
   opens and closes on pages that run no script at all. */
.nav__menu { display: none; position: relative; }
.nav__menu > summary {
  list-style: none; width: 40px; height: 40px; border-radius: 999px; cursor: pointer;
  display: grid; place-items: center; color: var(--ink); position: relative;
  transition: background-color .2s;
}
.nav__menu > summary::-webkit-details-marker { display: none; }
.nav__menu > summary:hover { background: color-mix(in oklab, var(--ink) 5%, transparent); }
.nav__menu > summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.nav__menu[open] > summary { background: color-mix(in oklab, var(--ink) 7%, transparent); }
.nav__menu > summary .pi--close, .nav__menu[open] > summary .pi--menu { display: none; }
.nav__menu[open] > summary .pi--close { display: block; }
/* Something unread in the community, when its link is tucked in here. */
.nav__menu:has(.has-unread):not([open]) > summary::after {
  content: ""; position: absolute; top: 8px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
}
.nav__sheet {
  position: absolute; right: 0; top: calc(100% + 10px); min-width: 220px;
  display: grid; gap: 2px; padding: 6px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-2);
}
.nav__sheet a {
  position: relative; padding: .7rem .9rem; border-radius: 12px;
  font-size: .98rem; font-weight: 500; color: var(--text-2);
}
.nav__sheet a:hover { background: var(--ground); color: var(--ink); }
.nav__sheet a[aria-current="page"] { color: var(--ink); background: color-mix(in oklab, var(--ink) 7%, transparent); }

/* ── footer ────────────────────────────────────────────────────────────── */
.foot { background: var(--ground); padding: clamp(64px, 8vw, 110px) 0 0; overflow: clip; }
.foot__grid { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 2.5rem; }
.foot__brand p { margin-top: 1rem; color: var(--text-2); font-size: .92rem; line-height: 1.5; }
.foot__col { display: grid; align-content: start; gap: .6rem; font-size: .92rem; }
.foot__col p { font-size: .76rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); margin-bottom: .3rem; }
.foot__col a { color: var(--text-2); justify-self: start; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: color .2s, background-size .4s var(--expo); }
.foot__col a:hover { color: var(--ink); background-size: 100% 1px; }
.foot__legal { margin-top: 3.5rem; font-size: .78rem; color: var(--text-3); max-width: 48rem; }
.foot__legal a { text-decoration: underline; text-underline-offset: 2px; }
.foot__word {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(5rem, 24vw, 22rem); line-height: .78; letter-spacing: -.07em;
  text-align: center; color: color-mix(in oklab, var(--ink) 6%, var(--ground));
  margin: 3rem 0 -.08em; user-select: none;
}

@media (max-width: 900px) {
  .nav__links, .brand__by { display: none; }
  .nav__menu { display: block; }
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .foot__brand { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .btn--primary::after { display: none; }
}
@media (prefers-contrast: more) {
  :root { --soft: var(--text-2); --line: var(--line-2); }
}
@media (prefers-reduced-transparency: reduce) {
  .nav.is-stuck .nav__bar, .nav--solid .nav__bar { background: var(--paper); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

@media (max-width: 420px) { .nav__community { display: none; } }