/* Privacy, Terms and Support: the site's cream, ink and type, set for reading. Every rule starts at
   .pl (or a pl- class) so nothing leaks into the site's chrome. */

@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/newsreader-400.ttf) format("truetype"); }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 400; font-display: swap; src: url(fonts/newsreader-400-italic.ttf) format("truetype"); }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/geist-400.ttf) format("truetype"); }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/geist-500.ttf) format("truetype"); }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/geist-600.ttf) format("truetype"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/jetbrains-mono-400.ttf) format("truetype"); }

.pl {
  --pl-bg: #f7f0e1;
  --pl-bg-deep: #ede1ca;
  --pl-surface: #fffdf8;
  --pl-text: #211a10;
  --pl-body: #3d3325;
  --pl-muted: #6e6350;
  --pl-border: #e9dec7;
  --pl-border-strong: #d8cbaa;
  --pl-ink: #211a10;
  --pl-cream: #fff8ee;
  --pl-cream-soft: #e9dfcd;
  --pl-ink-line: #5b4e3d;
  --pl-ok: #dfe8d3;
  --pl-ok-ink: #233019;
  --pl-warn: #f6dccd;
  --pl-warn-ink: #4b2212;
  --pl-display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --pl-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --pl-mono: "JetBrains Mono", "SF Mono", Menlo, monospace;
  --pl-gutter: clamp(16px, 5vw, 64px);
  --pl-top: calc(var(--par-chrome-bar, 64px) + 24px);
  margin: 0;
  background: var(--pl-bg);
  color: var(--pl-text);
  font: 400 17px/1.65 var(--pl-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.pl *, .pl *::before, .pl *::after { box-sizing: border-box; }
.pl :is(h1, h2, h3) { font-family: var(--pl-display); font-weight: 400; margin: 0; color: var(--pl-text); }
.pl :is(h1, h2) em { font-style: italic; color: var(--pl-ink); }
.pl a { color: var(--pl-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* :where() keeps this rule weak, so a piece with its own corners (chip, button, field) keeps them. */
.pl :where(:focus-visible) { outline: 2px solid var(--pl-ink); outline-offset: 3px; border-radius: 4px; }
.pl-wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding-inline: var(--pl-gutter); }
.pl-skip { position: absolute; left: 12px; top: -60px; padding: 10px 14px; background: var(--pl-surface); border-radius: 8px; z-index: 10; }
.pl-skip:focus { top: 12px; }

/* ── Opening ─────────────────────────────────────────────────────────── */
.pl-hero { padding: clamp(48px, 9vh, 104px) 0 clamp(36px, 6vh, 64px); border-bottom: 1px solid var(--pl-border-strong); }
/* The site's title size (the home uses 60 px), so these read as sister pages. */
.pl h1 { font-size: clamp(44px, 3.6vw + 28px, 60px); line-height: 1.05; letter-spacing: -0.015em; text-wrap: balance; }
.pl-lede { margin: 22px 0 0; max-width: 28em; font: 400 clamp(20px, 2.1vw, 26px)/1.4 var(--pl-display); color: var(--pl-body); }
.pl-updated { margin: 26px 0 0; font: 14px/1.5 var(--pl-sans); color: var(--pl-muted); }
.pl-date { white-space: nowrap; }
/* The language switch: the chips of the site's switch on /languages. The page's own language is
   the raised chip; the other is the link to the same page in that language. */
.pl-lang { display: flex; gap: 4px; margin: 0 0 24px; }
.pl-lang-choice { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; min-height: 36px; padding: 6px 12px; border: 1px solid var(--pl-border-strong); border-radius: 11px; font: 500 14px/1.2 var(--pl-sans); letter-spacing: .04em; color: var(--pl-text); }
.pl a.pl-lang-choice { color: var(--pl-text); text-decoration: none; }
.pl-lang-choice[aria-current] { background: var(--pl-surface); color: var(--pl-text); border-color: var(--pl-surface); box-shadow: 0 1px 3px rgba(60, 40, 10, .22); }
.pl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ── The short version ───────────────────────────────────────────────── */
.pl-short { margin: clamp(32px, 5vh, 48px) 0 0; padding: clamp(22px, 3vw, 34px); max-width: 660px; background: var(--pl-surface); border: 1px solid var(--pl-border-strong); border-radius: 20px; }
.pl-short h2 { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.15; letter-spacing: -0.015em; }
.pl-short ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.pl-short li { position: relative; padding-left: 26px; color: var(--pl-body); }
.pl-short li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--pl-ink); }

/* ── Reading layout ──────────────────────────────────────────────────── */
.pl-layout { display: grid; gap: 40px clamp(48px, 7vw, 112px); padding-top: clamp(40px, 6vh, 72px); padding-bottom: clamp(64px, 10vh, 120px); align-items: start; }
.pl-toc h2 { margin: 0 0 14px; font: 500 14px/1.4 var(--pl-sans); color: var(--pl-muted); }
.pl-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: pl-toc; }
.pl-toc li { counter-increment: pl-toc; }
.pl-toc a { display: flex; gap: 10px; align-items: baseline; padding: 6px 0; font-size: 15px; line-height: 1.35; color: var(--pl-body); text-decoration: none; }
.pl-toc a::before { content: counter(pl-toc, decimal-leading-zero); flex: none; width: 22px; font: 13px/1.35 var(--pl-sans); font-variant-numeric: tabular-nums; color: var(--pl-muted); }
.pl-toc .pl-related { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--pl-border-strong); display: grid; gap: 4px; }
.pl-toc .pl-related a::before { content: none; }
/* About 70 characters a line, inside the reading range the site uses. */
.pl-body { min-width: 0; max-width: 34em; }
.pl-section { scroll-margin-top: var(--pl-top); padding: 0 0 36px; margin: 0 0 40px; border-bottom: 1px solid var(--pl-border); }
.pl-section:last-child { border-bottom: 0; margin-bottom: 0; }
.pl-section h2 { margin: 0 0 18px; font-size: clamp(28px, 2.6vw, 36px); line-height: 1.1; letter-spacing: -0.015em; }
.pl-section p { margin: 0 0 16px; color: var(--pl-body); }
.pl-section p:last-child { margin-bottom: 0; }
.pl-section strong { color: var(--pl-text); font-weight: 600; }
.pl-section ul { margin: 0 0 16px; padding-left: 22px; color: var(--pl-body); }
.pl-section li { margin: 0 0 8px; }

/* Who handles what: one row per company. */
.pl-providers { margin: 22px 0; border-top: 1px solid var(--pl-border-strong); }
.pl-providers > div { display: grid; grid-template-columns: minmax(130px, 11em) minmax(0, 1fr); gap: 4px 24px; padding: 14px 0; border-bottom: 1px solid var(--pl-border); }
.pl-providers dt { font-weight: 600; color: var(--pl-text); }
.pl-providers dd { margin: 0; color: var(--pl-body); }

/* ── Support ─────────────────────────────────────────────────────────── */
.pl-contact { scroll-margin-top: var(--pl-top); display: grid; gap: 24px 56px; align-items: start; margin: clamp(32px, 5vh, 48px) 0 0; padding: clamp(24px, 3.4vw, 40px); background: var(--pl-ink); color: var(--pl-cream); border-radius: 24px; }
.pl-contact h2 { color: var(--pl-cream); font-size: clamp(28px, 3vw, 38px); line-height: 1.1; letter-spacing: -0.015em; }
.pl-contact p { margin: 12px 0 0; color: var(--pl-cream-soft); max-width: 34em; }
/* The form posts to the app, which sends it back here with an outcome fragment (#sent, #not-sent,
   #slow-down or #busy): the matching note shows by :target, so it reads without JavaScript. */
.pl-form { display: grid; gap: 16px; min-width: 0; }
.pl-form .pl-notice { display: none; grid-column: 1 / -1; max-width: none; margin: 0; padding: 12px 16px; border-radius: 12px; background: var(--pl-warn); color: var(--pl-warn-ink); font-weight: 500; scroll-margin-top: var(--pl-top); }
.pl-form .pl-notice--ok { background: var(--pl-ok); color: var(--pl-ok-ink); }
.pl-form .pl-notice:target { display: block; }
.pl-field { display: grid; gap: 6px; min-width: 0; }
.pl-field label { font: 500 14px/1.3 var(--pl-sans); color: var(--pl-cream); }
.pl-field label span { font-weight: 400; color: var(--pl-cream-soft); }
.pl-form :is(input, select, textarea) { box-sizing: border-box; width: 100%; min-height: 48px; margin: 0; padding: 11px 14px; border: 1px solid var(--pl-ink-line); border-radius: 12px; background: var(--pl-cream); color: var(--pl-ink); font: 16px/1.4 var(--pl-sans); }
.pl-form select { appearance: none; padding-right: 44px; cursor: pointer; }
.pl-form textarea { min-height: 150px; resize: vertical; }
.pl-select { position: relative; display: block; }
.pl-select::after { content: ""; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--pl-ink); border-bottom: 2px solid var(--pl-ink); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.pl-contact :focus-visible { outline-color: var(--pl-cream); }
/* The field people never see: only bots fill it in. */
.pl-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.pl-send { justify-self: start; }

/* The site's main button: Par's tactile button, verbatim from the home (par-btn par-btn--primary cta),
   as /knowledge copies it. Its hover lives with the other hovers below. */
.pl {
  --par-accent: oklch(0.72 0.12 258);
  --par-glass-brd: oklch(0.46 0.055 78 / 0.16);
  --par-glass-top: oklch(1 0.014 92 / 0.8);
  --par-sh-1: 0.13;
  --par-sh-2: 0.17;
  --par-sh-3: 0.26;
  --par-r-sm: 10px;
  --par-ease: cubic-bezier(.34, 1.56, .64, 1);
  --par-dur-fast: .1s;
  --par-dur: .18s;
  --par-dur-slow: .28s;
}
.par-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  padding: 12px 20px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  color: oklch(from var(--par-btn) 0.34 calc(c + 0.05) h);
  background-color: transparent;
  background-image: linear-gradient(180deg, color-mix(in oklch, var(--par-btn) 88%, transparent), var(--par-btn));
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  backdrop-filter: blur(10px) saturate(160%);
  box-shadow:
    0 3px 6px -1px oklch(0 0 0 / var(--par-sh-1)),
    0 14px 28px -6px oklch(0 0 0 / var(--par-sh-2)),
    0 26px 50px -12px oklch(0 0 0 / var(--par-sh-3));
  transition:
    background-color var(--par-dur-slow) ease,
    transform var(--par-dur) var(--par-ease),
    box-shadow var(--par-dur-slow) ease;
}
.par-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg, var(--par-glass-top), transparent 45%, var(--par-glass-brd));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.par-btn--primary { --par-btn: oklch(from var(--par-accent) 0.81 0.11 h); }
.par-btn:active {
  transform: translateY(1px) scale(.95);
  box-shadow: 0 1px 2px oklch(0 0 0 / var(--par-sh-2)), 0 4px 12px -5px oklch(0 0 0 / var(--par-sh-1));
  transition: transform var(--par-dur-fast) ease, box-shadow var(--par-dur-fast) ease;
}
.cta { padding: 17px 26px; min-height: 50px; border-radius: var(--par-r-sm); }

.pl-doors { display: grid; gap: 16px; margin: clamp(36px, 6vh, 64px) 0 0; }
/* Only the title is the link (every link to Get started says just that); its ::after covers the card. */
.pl-door { position: relative; display: block; padding: 24px 26px; background: var(--pl-surface); border: 1px solid var(--pl-border-strong); border-radius: 20px; transition: border-color 200ms ease, transform 200ms ease; }
.pl-door:focus-within { border-color: var(--pl-ink); }
.pl-door-title::after { content: ""; position: absolute; inset: 0; border-radius: 20px; }
.pl-door-label { display: block; margin: 0 0 6px; font: 500 14px/1.4 var(--pl-sans); color: var(--pl-muted); }
.pl .pl-door-title { display: block; font: 400 clamp(24px, 2.4vw, 30px)/1.1 var(--pl-display); letter-spacing: -0.015em; color: var(--pl-text); text-decoration: none; }
.pl-door-text { display: block; margin-top: 8px; color: var(--pl-body); }
.pl-faq { margin: clamp(48px, 8vh, 88px) 0 0; padding-bottom: clamp(64px, 10vh, 120px); }
.pl-faq > h2 { font-size: clamp(28px, 3vw, 40px); line-height: 1.1; letter-spacing: -0.015em; }
.pl-faq dl { margin: 24px 0 0; max-width: 34em; border-top: 1px solid var(--pl-border-strong); }
.pl-faq dl > div { padding: 20px 0; border-bottom: 1px solid var(--pl-border); }
.pl-faq dt { font: 400 clamp(21px, 2vw, 25px)/1.25 var(--pl-display); color: var(--pl-text); }
.pl-faq dd { margin: 8px 0 0; color: var(--pl-body); }
.pl-faq code, .pl-section code { font: 14px var(--pl-mono); padding: 1px 6px; border-radius: 6px; background: var(--pl-bg-deep); color: var(--pl-text); overflow-wrap: anywhere; }
.pl-legal-links { margin: 28px 0 0; color: var(--pl-muted); font-size: 15px; }

@media (min-width: 900px) {
  .pl { font-size: 18px; }
  .pl-layout { grid-template-columns: minmax(200px, 260px) minmax(0, 1fr); }
  /* The inline padding gives a focused link's ring room inside the scroll box; the margin keeps the text on its edge. */
  .pl-toc { position: sticky; top: var(--pl-top); max-height: calc(100vh - var(--pl-top) - 24px); overflow: auto; padding-inline: 6px; margin-inline: -6px; }
  .pl-contact { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
  .pl-doors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 560px) {
  .pl-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pl-field--wide { grid-column: 1 / -1; }
}
@media (max-width: 899px) {
  .pl-toc { padding-bottom: 24px; border-bottom: 1px solid var(--pl-border-strong); }
}
/* Every link a finger taps on its own gets 44 px of height. */
@media (max-width: 899px), (pointer: coarse) {
  .pl-toc a { padding: 12px 0; }
  .pl-legal-links a { display: inline-block; padding: 12px 0; }
  .pl-lang-choice { min-width: 56px; min-height: 44px; }
}
@media (hover: hover) {
  .pl a:hover { text-decoration-thickness: 2px; }
  .pl-toc a:hover { color: var(--pl-text); text-decoration: underline; }
  .pl a.pl-lang-choice:hover { border-color: var(--pl-ink); }
  .par-btn:hover {
    background-color: var(--par-btn);
    transform: translateY(-1px) scale(1.025);
    box-shadow:
      0 6px 12px -2px oklch(0 0 0 / calc(var(--par-sh-1) + 0.05)),
      0 18px 36px -8px oklch(0 0 0 / calc(var(--par-sh-2) + 0.08)),
      0 38px 64px -12px oklch(0 0 0 / calc(var(--par-sh-3) + 0.1));
  }
  .pl-door:hover { border-color: var(--pl-ink); transform: translateY(-2px); }
}
@media (max-width: 560px) {
  .pl-providers > div { grid-template-columns: 1fr; }
  .pl-send { justify-self: stretch; }
  /* Room for the full-width button's shadow inside the ink box. */
  .pl-contact { padding-bottom: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .par-btn, .pl-door { transition: none; }
  .par-btn:hover, .par-btn:active, .pl-door:hover, .pl-door:focus-within { transform: none; }
}