/* Get started with Par: the page. Every rule starts at .pgs (or a pgs- class); tokens fall back to
   the opening's values when the Site's shell doesn't define them. Without JavaScript every
   assistant's steps show, one under the other; page.js turns the list into tabs. */

@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"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/dm-sans-600-latin.woff2) format("woff2"); }

.pgs {
  --pgs-bg: var(--bg, #f7f0e1);
  --pgs-bg-deep: var(--bg-deep, #ede1ca);
  --pgs-surface: var(--surface, #fffdf8);
  --pgs-text: var(--text, #211a10);
  --pgs-body: #3d3325;
  --pgs-muted: var(--text-muted, #6e6350);
  --pgs-faint: #72674f;
  --pgs-border: var(--border, #e9dec7);
  --pgs-border-strong: var(--border-strong, #d8cbaa);
  --pgs-ink: var(--accent, #2b231b);
  --pgs-cream: #fff8ee;
  --pgs-display: var(--font-display, "Newsreader", "Iowan Old Style", Georgia, serif);
  --pgs-sans: var(--font-body, "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  --pgs-mono: var(--font-mono, "JetBrains Mono", "SF Mono", Menlo, monospace);
  --pgs-ease: var(--ease, cubic-bezier(0.16, 1, 0.3, 1));
  --pgs-gutter: var(--gutter, clamp(16px, 5vw, 64px));
  --pgs-max: var(--wrap, 1240px);
  margin: 0;
  background: var(--pgs-bg);
  color: var(--pgs-text);
  font: 400 16px/1.55 var(--pgs-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.pgs *, .pgs *::before, .pgs *::after { box-sizing: border-box; }
.pgs :is(h1, h2, h3) { font-family: var(--pgs-display); font-weight: 400; margin: 0; color: var(--pgs-text); }
.pgs :is(h1, h2, .pgs-sowhat) { text-wrap: balance; }
.pgs :is(p, li) { text-wrap: pretty; }
.pgs :is(h1, h2) em { font-style: italic; color: var(--pgs-ink); }
.pgs a { color: inherit; }
.pgs :focus-visible { outline: 2px solid var(--pgs-ink); outline-offset: 3px; border-radius: 4px; }
.pgs-wrap { width: 100%; max-width: var(--pgs-max); margin: 0 auto; padding-inline: var(--pgs-gutter); }
.pgs-skip { position: absolute; left: 12px; top: -60px; padding: 10px 14px; background: var(--pgs-surface); border-radius: 8px; z-index: 10; }
.pgs-skip:focus { top: 12px; }

/* ── Header (the Site's shell replaces this bar) ─────────────────────── */
.pgs-bar { padding-top: clamp(14px, 2.4vh, 26px); }
.pgs-bar-inner { display: flex; align-items: center; justify-content: space-between; }
.pgs-brand { display: inline-flex; align-items: center; gap: 2px; font: 600 28px/1 "DM Sans", var(--pgs-sans); letter-spacing: -0.035em; text-decoration: none; }
.pgs-brand img { width: 48px; height: 48px; margin: 0 -2px 0 -11px; }
/* underlined at rest, like the home's quiet links: a phone has no hover to show it's a link */
.pgs-quiet { font-size: 16px; color: var(--pgs-ink); text-decoration: underline 1px; text-underline-offset: 6px; padding: 10px 2px; }
.pgs-quiet:hover { text-decoration-thickness: 2px; }

/* ── Opening ─────────────────────────────────────────────────────────── */
.pgs-intro { padding: clamp(40px, 8vh, 96px) 0 clamp(40px, 6vh, 72px); }
.pgs-intro-grid { display: grid; gap: 28px 72px; align-items: start; }
.pgs-category { display: flex; align-items: center; gap: 10px; margin: 0 0 22px; font: 500 14px/1.4 var(--pgs-sans); }
.pgs-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pgs-ink); box-shadow: 0 0 14px rgba(43, 35, 27, .2), 0 0 4px var(--pgs-ink); }
.pgs h1 { font-size: clamp(42px, 5.6vw, 72px); line-height: 1; letter-spacing: -0.035em; }
.pgs-sowhat { margin: 18px 0 0; font: 400 clamp(22px, 2.4vw, 30px)/1.2 var(--pgs-display); letter-spacing: -0.015em; }
.pgs-sowhat em { font-style: italic; color: var(--pgs-ink); }
.pgs-answer { margin: 0; font: 400 clamp(19px, 1.9vw, 23px)/1.48 var(--pgs-display); max-width: 36em; }
.pgs-actions.pgs-intro-actions { margin-top: 28px; }
.pgs-map { list-style: none; margin: clamp(36px, 5vh, 56px) 0 0; padding: 18px 0 0; border-top: 1px solid var(--pgs-border-strong); display: grid; gap: 2px 24px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.pgs-map a { display: flex; gap: 12px; align-items: center; min-height: 44px; padding: 8px 0; text-decoration: none; font-size: 16px; color: var(--pgs-body); }
.pgs-map a span { font: 500 13px/1 var(--pgs-sans); color: var(--pgs-muted); }
.pgs-map a:hover { color: var(--pgs-text); }
@media (min-width: 980px) { .pgs-intro-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); } }

/* ── The three steps ─────────────────────────────────────────────────── */
.pgs-step { padding: clamp(56px, 8vw, 112px) 0; border-top: 1px solid var(--pgs-border); scroll-margin-top: 16px; }
.pgs-step-grid { display: grid; gap: 28px 72px; align-items: start; }
.pgs-step-head { display: grid; grid-template-columns: auto 1fr; gap: 0 20px; align-items: start; }
.pgs-n { display: grid; place-items: center; width: clamp(52px, 6vw, 72px); aspect-ratio: 1; border-radius: 50%; background: var(--pgs-ink); color: var(--pgs-cream); font: 400 clamp(28px, 3.4vw, 40px)/1 var(--pgs-display); }
.pgs h2 { font-size: clamp(32px, 4.4vw, 54px); line-height: 1.06; letter-spacing: -0.025em; padding-top: 4px; }
.pgs-step-head p { grid-column: 2; margin: 18px 0 0; font-size: 17px; line-height: 1.62; color: var(--pgs-body); max-width: 30em; }
/* only a phone needs to hear that step 2 is done on a computer */
.pgs-step-head p.pgs-phone { display: none; font-weight: 500; color: var(--pgs-text); }
@media (hover: none) and (pointer: coarse) { .pgs-step-head p.pgs-phone { display: block; } }
.pgs-step-head p.pgs-lead { font: italic 400 clamp(20px, 2vw, 24px)/1.35 var(--pgs-display); color: var(--pgs-ink); }
@media (min-width: 980px) {
  .pgs-step-grid { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); }
  .pgs-step--wide .pgs-step-grid { grid-template-columns: 1fr; }
  .pgs-step--wide .pgs-step-head { max-width: 860px; }
}

/* The site's tactile button: one per step, for the step's one action. */
.pgs-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin: 0; }
.pgs-btn { --b: oklch(0.81 0.11 258); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; font: 600 16px/1 var(--pgs-sans); padding: 14px 24px; border: 0; border-radius: 8px; cursor: pointer; text-decoration: none; color: oklch(0.34 0.16 258); background-image: linear-gradient(180deg, color-mix(in oklch, var(--b) 88%, transparent), var(--b)); box-shadow: 0 3px 6px -1px rgba(0, 0, 0, .13), 0 14px 28px -6px rgba(0, 0, 0, .17); transition: transform 180ms cubic-bezier(.34, 1.56, .64, 1), box-shadow 280ms ease; }
.pgs-btn:hover { transform: translateY(-1px) scale(1.025); }
.pgs-btn:active { transform: translateY(1px) scale(.96); }
.pgs-btn[data-state="copied"] { --b: oklch(0.86 0.1 155); color: oklch(0.36 0.1 155); }

.pgs-card { background: var(--pgs-surface); border: 1px solid var(--pgs-border-strong); border-radius: 16px; padding: clamp(20px, 2.6vw, 30px); box-shadow: 0 24px 50px -32px rgba(60, 40, 10, .5); }
.pgs-card > p { margin: 0; }
.pgs-account { display: grid; gap: 18px; }
.pgs-account-why { font-size: 16px; line-height: 1.6; color: var(--pgs-body); }

/* ── Step 2: the address, then the assistants ────────────────────────── */
.pgs-addr { display: grid; gap: 14px; }
.pgs-addr-k { margin: 0; font: 500 13px/1.4 var(--pgs-sans); color: var(--pgs-muted); }
.pgs-addr-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.pgs-addr code { flex: 1 1 260px; display: block; padding: 14px 18px; border-radius: 10px; background: var(--pgs-bg); border: 1.5px dashed var(--pgs-border-strong); font: 400 clamp(19px, 2.1vw, 24px)/1.2 var(--pgs-mono); color: var(--pgs-text); overflow-wrap: anywhere; user-select: all; }
@media (max-width: 559px) { .pgs-addr-row .pgs-btn { flex: 1 1 100%; } }

.pgs-ais { margin-top: clamp(32px, 4vw, 48px); display: grid; gap: 22px; }
.pgs-ais-h { margin: 0; font: 400 clamp(24px, 2.6vw, 30px)/1.2 var(--pgs-display); letter-spacing: -0.015em; }
.pgs-picker { display: grid; gap: 14px; }
.pgs-group { display: grid; gap: 8px; }
.pgs-group-k { margin: 0; font: 500 13px/1.4 var(--pgs-sans); color: var(--pgs-muted); }
.pgs-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pgs-chip { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--pgs-border-strong); background: var(--pgs-surface); font: 500 16px/1 var(--pgs-sans); color: var(--pgs-text); text-decoration: none; cursor: pointer; transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease; }
.pgs-chip:hover { border-color: var(--pgs-ink); }
.pgs-chip[aria-selected="true"] { background: var(--pgs-ink); border-color: var(--pgs-ink); color: var(--pgs-cream); }

.pgs-panels { display: grid; gap: 18px; }
.pgs-panel { scroll-margin-top: 16px; }
.pgs-panel[hidden] { display: none; }
.pgs-panel h3 { font-size: clamp(26px, 3vw, 34px); line-height: 1.1; letter-spacing: -0.02em; }
.pgs-meta { margin: 10px 0 0; display: grid; gap: 4px; font-size: 16px; line-height: 1.5; color: var(--pgs-body); }
.pgs-meta p { margin: 0; max-width: 62ch; }
.pgs-meta b { font-weight: 600; color: var(--pgs-text); }
.pgs-how { list-style: none; counter-reset: pgs-how; margin: 20px 0 0; padding: 0; display: grid; gap: 12px; }
.pgs-how > li { counter-increment: pgs-how; position: relative; padding-left: 40px; font-size: 16.5px; line-height: 1.55; max-width: calc(62ch + 40px); }
.pgs-how > li::before { content: counter(pgs-how); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--pgs-bg-deep); color: var(--pgs-ink); font: 500 13px/1 var(--pgs-sans); }
.pgs-how b { font-weight: 600; }
.pgs-how kbd, .pgs-how code { font: 14px var(--pgs-mono); padding: 1px 6px; border-radius: 5px; background: var(--pgs-bg); border: 1px solid var(--pgs-border); overflow-wrap: anywhere; }
.pgs-cmd { margin-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pgs-cmd pre { flex: 1 1 260px; margin: 0; padding: 12px 14px; border-radius: 10px; background: var(--pgs-ink); color: var(--pgs-cream); font: 14px/1.5 var(--pgs-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.pgs-copy-sm { min-height: 44px; padding: 10px 16px; font-size: 14px; }
.pgs-panel > .pgs-exit { margin: 20px 0 0; max-width: 62ch; font-size: 16px; line-height: 1.55; color: var(--pgs-text); }
.pgs-exit a { font-weight: 600; text-underline-offset: 3px; }
.pgs-card > .pgs-src { margin: 22px 0 0; padding-top: 14px; border-top: 1px solid var(--pgs-border); font: 14px/1.6 var(--pgs-sans); color: var(--pgs-muted); }
.pgs-src a { text-underline-offset: 3px; }
.pgs-other { margin: 0; max-width: 62ch; font-size: 16px; line-height: 1.6; color: var(--pgs-body); }

/* ── Step 3: the Par window your AI opens ────────────────────────────── */
.pgs-consent { max-width: 420px; justify-self: start; display: grid; gap: 14px; text-align: center; }
.pgs-consent-mark { justify-self: center; width: 44px; height: 44px; }
.pgs-consent-h { margin: 0; font: 600 21px/1.2 var(--pgs-sans); letter-spacing: -0.01em; }
.pgs-consent-ask { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--pgs-body); }
.pgs-consent-field { display: grid; gap: 6px; text-align: left; }
.pgs-consent-field span { font: 500 12px var(--pgs-sans); color: var(--pgs-muted); }
.pgs-consent-field i { display: block; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--pgs-border-strong); font-style: normal; font-size: 14px; }
.pgs-consent-yes { display: block; padding: 11px 16px; border-radius: 12px; background: oklch(0.541 0.281 293); color: #fff; font: 500 14.5px/1 var(--pgs-sans); }
.pgs-consent-no { display: block; padding: 10px 16px; border-radius: 12px; border: 1px solid var(--pgs-border-strong); color: var(--pgs-muted); font: 500 14px/1 var(--pgs-sans); }
.pgs-consent figcaption { margin-top: 2px; font: 14px/1.5 var(--pgs-sans); color: var(--pgs-muted); }

/* ── What's next ─────────────────────────────────────────────────────── */
.pgs-next { padding: clamp(56px, 8vw, 112px) 0; border-top: 1px solid var(--pgs-border); }
.pgs-next h2 { max-width: 16em; }
.pgs-next-grid { display: grid; gap: 8px 72px; align-items: center; }
.pgs-next .pgs-next-art { margin: 0; max-width: 560px; justify-self: center; width: 100%; }
/* On phones the kit runs the drawing's square panel edge to edge, as on /how-it-works. */
@media (max-width: 760px) { .pgs-next .pgs-next-art { margin-inline: calc(-1 * var(--pgs-gutter)); width: auto; max-width: none; justify-self: stretch; } }
@media (min-width: 980px) { .pgs-next-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }
.pgs-ask { margin: 26px 0 0; max-width: 30em; padding: 14px 18px; border-radius: 18px 18px 18px 4px; background: var(--pgs-bg-deep); font: italic 400 clamp(20px, 2.2vw, 26px)/1.3 var(--pgs-display); }

.pgs-faq { display: grid; gap: 0 56px; margin-top: clamp(40px, 5vw, 64px); }
.pgs-faq > div { padding: 20px 0; border-top: 1px solid var(--pgs-border-strong); }
.pgs-faq h3 { font-size: 22px; line-height: 1.25; }
.pgs-faq p { margin: 8px 0 0; max-width: 62ch; font-size: 16px; line-height: 1.6; color: var(--pgs-body); }
.pgs-actions.pgs-end { margin-top: clamp(40px, 5vw, 64px); }
@media (min-width: 900px) { .pgs-faq { grid-template-columns: 1fr 1fr; } }


@media (prefers-reduced-motion: reduce) {
  .pgs *, .pgs *::before, .pgs *::after { transition: none !important; }
}