/* Shared look for the public (pre-sign-in) pages: about, pricing, contact, terms, privacy. These are
   standalone static documents outside the app bundle - self-contained on purpose, so
   they load with zero JS and satisfy the strict CSP.

   That means NO token from packages/ui/src/styles/tokens.css reaches this file: the
   values below are a hand-mirror of the semantic layer and have to be updated by hand
   when the palette moves. The mapping is
     --pg-bg   = --sd-bg        --pg-ink  = --sd-text    --pg-brand = --sd-brand-text
     --pg-card = --sd-surface   --pg-mut  = --sd-muted   --pg-line  = --sd-border
     --pg-soft = --sd-brand-soft
   The one deliberate divergence: these pages carry no JS, so they cannot read the
   app's [data-theme] choice and follow prefers-color-scheme instead. */
/* Dark is the base here too, matching the app's default. These pages carry no
   JS so they cannot read the app's stored [data-theme] choice; a reader whose
   OS explicitly asks for light still gets light. */
:root {
  --pg-bg: #0b1728; --pg-card: #101f36; --pg-ink: #eef3f9; --pg-mut: #9baabe;
  --pg-brand: #78aad7; --pg-line: rgba(255,255,255,.10); --pg-soft: #0f2744;
  --pg-band: #0d1b2e; --pg-mut2: #8090a8; --pg-chip: rgba(255,255,255,.07);
  --pg-hero: linear-gradient(160deg, #0a213b 0%, #0d3055 52%, #091e36 100%);
  --pg-mark: linear-gradient(135deg, #195490, #0b2440);
  --pg-brand-fill: #195490; --pg-bg-deep: #081221; --pg-good: #6fe7b0;
  color-scheme: dark;
}
html[data-theme="light"] {
  --pg-bg: #f1efea; --pg-card: #ffffff; --pg-ink: #16233d; --pg-mut: #5c6779;
  --pg-brand: #0e3a66; --pg-line: rgba(22,35,61,.12); --pg-soft: #e0e5eb;
  --pg-band: #faf9f6; --pg-mut2: #6d7685; --pg-chip: #edeae4;
  --pg-hero: linear-gradient(120deg, #0e3a66 0%, #16426e 60%, #0d345c 100%);
  --pg-mark: linear-gradient(135deg, #0e3a66, #0b2440);
  --pg-brand-fill: #0e3a66; --pg-bg-deep: #e8e4de; --pg-good: #097350;
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --pg-bg: #f1efea; --pg-card: #ffffff; --pg-ink: #16233d; --pg-mut: #5c6779;
    --pg-brand: #0e3a66; --pg-line: rgba(22,35,61,.12); --pg-soft: #e0e5eb;
    --pg-band: #faf9f6; --pg-mut2: #6d7685; --pg-chip: #edeae4;
    --pg-hero: linear-gradient(120deg, #0e3a66 0%, #16426e 60%, #0d345c 100%);
    --pg-mark: linear-gradient(135deg, #0e3a66, #0b2440);
    --pg-brand-fill: #0e3a66; --pg-bg-deep: #e8e4de; --pg-good: #097350;
    color-scheme: light;
  }
}
/* These pages are outside the app bundle, so they must declare the faces
   themselves - the app's index.css never loads here. Same self-hosted latin
   subsets, so there is no extra download and the strict CSP (font-src 'self')
   is satisfied. */
@font-face { font-family:'Inter'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('/fonts/inter-latin-var.woff2') format('woff2'); }
@font-face { font-family:'Outfit'; font-style:normal; font-weight:400 800; font-display:swap;
  src:url('/fonts/outfit-latin-var.woff2') format('woff2'); }

* { box-sizing: border-box; }
/* The `hidden` ATTRIBUTE only wins while nothing else sets `display`, and plenty
   here does. contact.js hides the form on success with `form.hidden = true`, but
   `.pg-form { display: grid }` below is more specific than the UA's `[hidden]`
   rule, so the form stayed on screen with everything still typed into it and the
   send read as having done nothing. Anything toggled by script needs this. */
[hidden] { display: none !important; }
/* same fluid root as the app (index.css), so type matches size for size */
html { font-size: clamp(0.9375rem, 0.78125rem + 0.15625vw, 1.03125rem); }
body {
  /* the same soft brand wash the app's landing page carries, so the static
     pages sit on the same ground rather than a flat fill */
  margin: 0; color: var(--pg-ink);
  background:
    radial-gradient(90% 55% at 82% 2%, color-mix(in srgb, var(--pg-brand) 8%, transparent) 0%, transparent 60%),
    radial-gradient(80% 45% at 10% 24%, color-mix(in srgb, var(--pg-brand) 6%, transparent) 0%, transparent 56%),
    var(--pg-bg-deep);
  background-attachment: fixed, fixed, scroll;
  font: 1.06667rem/1.65 Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased; text-wrap: pretty;
}
/* the nav wordmark stays on the body sans, as it is in the app */
h1, h2, h3, .pg-tier .price { font-family: Outfit, Inter, system-ui, sans-serif; }
.pg-wrap { max-width: 1180px; margin: 0 auto; padding: 28px 28px 60px; }
/* full-bleed header and footer bands with contained rows inside, matching the
   design and the app's landing page */
/* the same band the app's landing nav sits on: hero gradient with an accent
   wash, a hairline rule, and white ink over it */
.pg-topbar { position: sticky; top: 0; z-index: 20;
  background:
    radial-gradient(70% 60% at 78% 8%, rgba(18,130,162,.22) 0%, rgba(0,0,0,0) 60%),
    var(--pg-hero);
  border-bottom: 1px solid rgba(255,255,255,.12); }
/* qualified with .pg-topbar: the generic `.pg-nav .pg-logo` rule below has equal
   specificity and would otherwise win on source order */
.pg-topbar .pg-nav .pg-logo { color: #fff; }
.pg-topbar .pg-nav { max-width: 1180px; margin: 0 auto; padding: 16px 28px; }
.pg-footbar { background: var(--pg-bg); border-top: 1px solid var(--pg-line); color: var(--pg-mut); }
.pg-footbar .pg-foot { max-width: 1180px; margin: 0 auto; padding: 28px; border-top: 0; }
/* prose stays readable even though the container is wide - the tier grid is
   layout, not prose, so it keeps the full width */
.pg-card > p, .pg-card > ul:not(.pg-tiers), .pg-card > ol { max-width: 74ch; }
/* metrics mirrored from the app landing's nav: 24px mark, 18px brand. Like the
   landing page, the band carries only the brand, the theme toggle and Sign in -
   about/terms/privacy live in the footer. */
.pg-nav { display: flex; align-items: center; gap: 22px; padding: 16px 28px; flex-wrap: wrap; }
.pg-nav .pg-logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.2rem;
  line-height: normal; color: var(--pg-ink); text-decoration: none; }
/* The brand tile, mirrored from .bs-mark-sm + .bs-fold-white in the app: a
   30px gradient tile with an inset hairline and the Fold at 80%. The favicon is
   a separate document (its own tile dressing) and is not what the app's nav
   shows, so reproducing it here is what made the two look different. */
.pg-mark { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 8px;
  background: var(--pg-mark); display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.pg-mark svg { display: block; width: 80%; height: 80%; }
.pg-mark .l3 { fill: #fff; opacity: .32; }
.pg-mark .l2 { fill: #fff; opacity: .6; }
.pg-mark .tl { fill: #fff; }
.pg-mark .tr { fill: #84becf; }
.pg-tools { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.pg-themetoggle { display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: 0 0 auto; border: 1px solid rgba(255,255,255,.22);
  background: transparent; color: rgba(255,255,255,.7); border-radius: 8px; cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease; }
.pg-themetoggle:hover { color: #fff; border-color: #fff; }
.pg-themetoggle svg { display: block; }
.pg-themetoggle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.pg-card { background: var(--pg-card); border: 1px solid var(--pg-line); border-radius: 16px; padding: 28px 30px; margin-bottom: 18px; }
h1 { font-size: 1.8rem; font-weight: 700; line-height: 1.2; margin: 0 0 10px; letter-spacing: -0.02em; }
h2 { font-size: 1.33333rem; font-weight: 700; margin: 26px 0 8px; }
h3 { font-size: 1.03333rem; font-weight: 700; margin: 20px 0 6px; }
p, li { color: var(--pg-mut); }
p b, li b { color: var(--pg-ink); }
a { color: var(--pg-brand); }
.pg-lede { font-size: 1.2rem; }
/* four tiers across at desktop, as the design has them - auto-fit was leaving
   Enterprise stranded alone on a second row */
.pg-tiers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 18px 0 6px; padding: 0; list-style: none; align-items: stretch; }
@media (max-width: 900px) { .pg-tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pg-tiers { grid-template-columns: minmax(0, 1fr); } }
.pg-tier { background: var(--pg-soft); border: 1px solid var(--pg-line); border-radius: 12px; padding: 16px; }
.pg-tier .name { font-weight: 700; color: var(--pg-ink); }
.pg-tier .price { font-size: 1.46667rem; font-weight: 700; color: var(--pg-brand); margin: 4px 0 8px; }
.pg-tier .price small { font-size: 0.8rem; font-weight: 500; color: var(--pg-mut); }
.pg-tier ul { margin: 0; padding-left: 18px; font-size: 0.9rem; }
.pg-note { font-size: 0.9rem; }
.pg-foot { font-size: 0.8rem; color: var(--pg-mut); }
/* brand, matching the app's landing footer */
.pg-foot a { color: var(--pg-brand); }
.pg-updated { font-size: 0.86667rem; color: var(--pg-mut); margin-top: -4px; }

/* ---------- legal pages (terms, privacy) ---------- */
/* A title band over a two-column body: a sticky "on this page" rail beside the
   article, which stays at a readable 760px however wide the window gets. */
.pg-title { padding: 36px 0 24px; }
.pg-eyebrow { display: block; font-family: Outfit, Inter, system-ui, sans-serif; font-size: 0.8rem;
  font-weight: 600; letter-spacing: .12em; color: var(--pg-mut2); }
.pg-title h1 { font-size: 2.4rem; font-weight: 800; letter-spacing: -.03em; margin: 14px 0 10px; }
.pg-legal { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 56px; align-items: start; }
.pg-toc { position: sticky; top: 24px; display: grid; gap: 2px; padding-top: 8px; }
.pg-toc-head { font-size: 0.73333rem; font-weight: 600; letter-spacing: .1em; color: var(--pg-mut2); padding: 0 0 10px; }
.pg-toc a { font-size: 0.9rem; color: var(--pg-mut); text-decoration: none; padding: 7px 10px;
  border-radius: 8px; border-left: 2px solid var(--pg-line); }
.pg-toc a:hover { color: var(--pg-ink); background: var(--pg-chip); }
.pg-article { max-width: 760px; }
.pg-article > section { margin-bottom: 40px; scroll-margin-top: 24px; }
.pg-article h2 { font-size: 1.46667rem; margin: 0 0 14px; letter-spacing: -.015em; }
.pg-lede-legal { font-size: 1.1rem; line-height: 1.7; margin: 0 0 40px; padding-bottom: 32px;
  border-bottom: 1px solid var(--pg-line); }
@media (max-width: 900px) {
  /* the rail becomes a plain block above the article - sticky in a single
     column would just pin it over the text it indexes */
  .pg-legal { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .pg-toc { position: static; }
  .pg-title h1 { font-size: 1.9rem; }
}

/* ---------- public-page content blocks (per the design) ---------- */
/* A definition list: a ruled stack of name + description, not bullets. */
.pg-deflist { display: grid; border-top: 1px solid var(--pg-line); margin: 0 0 20px; }
.pg-deflist > div { padding: 18px 0; border-bottom: 1px solid var(--pg-line); }
.pg-deflist > div:last-child { border-bottom: 0; }
.pg-deflist h3 { font-family: Outfit, Inter, system-ui, sans-serif; font-weight: 700;
  font-size: 1.03333rem; margin: 0 0 8px; color: var(--pg-ink); }
.pg-deflist p { margin: 0; font-size: 1rem; line-height: 1.7; }

/* Processors as cards, two across. */
.pg-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 20px; }
.pg-cards > div { background: var(--pg-card); border: 1px solid var(--pg-line); border-radius: 13px; padding: 16px 18px; }
.pg-cards b { display: block; font-family: Outfit, Inter, system-ui, sans-serif; font-weight: 700;
  font-size: 1rem; margin-bottom: 5px; color: var(--pg-ink); }
.pg-cards span { display: block; font-size: 0.93333rem; line-height: 1.6; color: var(--pg-mut); }
@media (max-width: 560px) { .pg-cards { grid-template-columns: minmax(0, 1fr); } }

/* Rights and retention: quiet left-ruled notes rather than a bulleted list. */
.pg-notes { display: grid; gap: 16px; margin: 0; }
.pg-notes p { margin: 0; padding-left: 18px; border-left: 2px solid var(--pg-line); line-height: 1.72; }

/* ---------- nav + footer, matching the app's landing page ---------- */
/* line-height: normal so this <a> matches the landing's <button> box exactly -
   otherwise it inherits body's 1.65 and comes out 6px taller */
.pg-nav .pg-signin { font-size: 0.93333rem; font-weight: 600; line-height: normal;
  color: #0e3a66; background: #fff;
  border-radius: 10px; padding: 11px 20px; text-decoration: none; transition: opacity .15s ease; }
.pg-nav .pg-signin:hover { opacity: .92; color: #0e3a66; }
/* Mirrors .bs-land-navsignin in the app: once signup went self-serve the band
   carries two actions, so "Create account" keeps the white (primary) button and
   "Sign in" becomes the quiet outline beside it. This band is always dark, hence
   white ink rather than the page's body colour. Kept in step with index.css. */
.pg-nav .pg-signin-quiet { color: #fff; background: transparent;
  border: 1px solid rgba(255,255,255,.34); transition: opacity .15s ease, border-color .15s ease; }
.pg-nav .pg-signin-quiet:hover { color: #fff; background: transparent; border-color: rgba(255,255,255,.6); opacity: .92; }
/* No room for brand + toggle + two buttons on a phone; creating an account wins,
   and the signup screen carries its own link back to sign-in. */
@media (max-width: 520px){ .pg-nav .pg-signin-quiet { display: none; } }
.pg-footbar .pg-foot { display: flex; flex-wrap: wrap; gap: 16px 40px; align-items: center; }
.pg-footbar .pg-foot > span { flex: 1 1 380px; max-width: 74ch; line-height: 1.6; }
.pg-footbar .pg-foot nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.pg-footbar .pg-foot p { margin: 0; }

/* ---------- about & pricing pages (mirrors About and pricing.dc.html) ---------- */
/* Hero band: the same ground as the nav above it, so the two read as one. */
.pg-hero { background: var(--pg-hero); color: #fff; padding: 0 0 80px; }
.pg-hero-in { max-width: 1180px; margin: 0 auto; padding: 76px 28px 0; }
.pg-hero .pg-eyebrow { color: rgba(255,255,255,.6); }
.pg-hero h1 { font-size: 2.4rem; font-weight: 800; line-height: 1.04; letter-spacing: -.032em;
  margin: 18px 0 22px; color: #fff; max-width: 20ch; }
.pg-hero p { font-size: 1.2rem; line-height: 1.6; color: rgba(255,255,255,.8); margin: 0; max-width: 68ch; }

/* A ruled band. The rule flows out to the right of each section heading. */
.pg-sec { padding: 84px 0; }
/* one band lifts to --pg-bg with a rule either side, as the design alternates */
.pg-sec-alt { background: var(--pg-bg);
  border-top: 1px solid var(--pg-line); border-bottom: 1px solid var(--pg-line); }
.pg-sec-in { max-width: 1180px; margin: 0 auto; padding: 0 28px; }
.pg-sechead { display: flex; align-items: baseline; gap: 16px; margin-bottom: 12px; }
.pg-sechead h2 { font-size: 2.13333rem; font-weight: 800; letter-spacing: -.025em; margin: 0; }
.pg-sechead i { flex: 1; height: 1px; background: var(--pg-line); }

/* "What it does": two columns of ruled rows. */
.pg-feat { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; }
.pg-feat > div { padding: 28px 0; border-bottom: 1px solid var(--pg-line); }
.pg-feat > div:nth-last-child(-n+2) { border-bottom: 0; }
.pg-feat h3 { font-size: 1.2rem; font-weight: 700; margin: 0 0 8px; }
.pg-feat p { margin: 0; font-size: 1rem; line-height: 1.62; }
@media (max-width: 720px) {
  .pg-feat { grid-template-columns: minmax(0, 1fr); }
  .pg-feat > div:nth-last-child(2) { border-bottom: 1px solid var(--pg-line); }
}

/* Pricing preamble: copy left, the billing facts as a ticked list right. */
.pg-pricehead { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 56px; align-items: start; margin-bottom: 40px; }
.pg-pricehead h2 { font-size: 2.13333rem; font-weight: 800; letter-spacing: -.025em; margin: 0 0 14px; }
.pg-pricehead p { margin: 0; line-height: 1.64; }
.pg-checks { display: grid; gap: 10px; padding-top: 8px; }
.pg-checks > span { display: flex; gap: 12px; font-size: 0.93333rem; color: var(--pg-mut);
  padding-bottom: 10px; border-bottom: 1px solid var(--pg-line); }
.pg-checks > span:last-child { border-bottom: 0; padding-bottom: 0; }
.pg-checks b { color: var(--pg-good); font-weight: 700; }
@media (max-width: 900px) { .pg-pricehead { grid-template-columns: minmax(0, 1fr); gap: 28px; } }

/* Tier cards: blurb on a fixed measure so the prices line up across the row. */
.pg-tier { display: flex; flex-direction: column; position: relative;
  background: var(--pg-card); border: 1px solid var(--pg-line); border-radius: 16px; padding: 24px; }
.pg-tier-pop { border-color: var(--pg-brand-fill); }
.pg-tier-tag { position: absolute; top: -11px; left: 24px; background: var(--pg-brand-fill); color: #fff;
  font-size: 0.66667rem; font-weight: 700; letter-spacing: .09em; padding: 4px 10px; border-radius: 999px; }
.pg-tier .name { font-family: Outfit, Inter, system-ui, sans-serif; font-weight: 700;
  font-size: 1.26667rem; letter-spacing: -.015em; margin-bottom: 8px; color: var(--pg-ink); }
.pg-tier .blurb { font-size: 0.86667rem; line-height: 1.55; margin: 0 0 18px; min-height: 66px; }
.pg-tier .price { font-size: 2.13333rem; font-weight: 800; letter-spacing: -.02em; color: var(--pg-ink); }
.pg-tier .price small { font-size: 0.93333rem; font-weight: 600; color: var(--pg-mut2); letter-spacing: 0; }
.pg-tier .price s { font-size: 0.93333rem; font-weight: 600; color: var(--pg-mut2); margin-left: 8px; }
.pg-tier .promo { min-height: 22px; font-size: 0.8rem; font-weight: 600; color: var(--pg-good); margin: 4px 0 4px; }
/* The annual alternative, stated rather than toggled - these pages carry no pricing
   JS. Every tier renders the row (empty where there is no annual price) so the four
   cards keep their limits blocks on one line. */
.pg-tier .annual { min-height: 20px; font-size: 0.8rem; color: var(--pg-mut); margin: 0 0 20px; }
.pg-tier .limits { display: grid; gap: 8px; font-size: 0.9rem; color: var(--pg-mut);
  padding: 16px 0; border-top: 1px solid var(--pg-line); border-bottom: 1px solid var(--pg-line); }
.pg-tier .limits b { color: var(--pg-ink); font-weight: 600; }
.pg-tier .feats { display: grid; gap: 9px; font-size: 0.9rem; line-height: 1.5; color: var(--pg-mut);
  padding: 16px 0 20px; margin: 0; list-style: none; }
.pg-tier .feats li { display: flex; gap: 9px; align-items: flex-start; }
.pg-tier .feats li::before { content: "\2713"; color: var(--pg-good); font-weight: 700; line-height: 1.4; }
/* every variant carries a 1px border (transparent where invisible) so the
   outlined ones are not 2px taller and the CTAs stay on one line */
.pg-tier .cta { margin-top: auto; text-align: center; font-size: 0.93333rem; font-weight: 600;
  line-height: normal; padding: 12px; border: 1px solid transparent; border-radius: 10px;
  text-decoration: none; }
/* the free tier's CTA reads quiet but must still clear AA, so it takes the
   stronger muted ink rather than the design's --ink3 */
.pg-tier .cta-muted { color: var(--pg-mut); background: var(--pg-chip); }
.pg-tier .cta-primary { color: #fff; background: var(--pg-brand-fill); }
.pg-tier .cta-ghost { color: var(--pg-ink); border: 1px solid var(--pg-line); }


/* Access: the closing call sits on the hero band, like the app landing's, so the
   page opens and closes on the same surface. Its button inverts to white. */
.pg-access { background:
    radial-gradient(70% 80% at 88% 12%, rgba(18,130,162,.22) 0%, rgba(0,0,0,0) 62%),
    var(--pg-hero);
  color: #fff; border: 0; border-radius: 20px;
  padding: 40px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: center; }
.pg-access h2 { font-size: 2rem; font-weight: 800; letter-spacing: -.025em; margin: 0 0 12px; color: #fff; }
.pg-access p { margin: 0; line-height: 1.62; max-width: 62ch; color: rgba(255,255,255,.82); }
.pg-access a:not(.cta) { color: #fff; text-decoration: underline; }
.pg-access .cta { background: #fff; color: #0e3a66; font-size: 1rem; font-weight: 600;
  line-height: normal; padding: 14px 24px; border-radius: 11px; text-decoration: none; white-space: nowrap;
  transition: opacity .15s ease; }
.pg-access .cta:hover { opacity: .92; color: #0e3a66; }

@media (max-width: 720px) { .pg-access { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 28px; } }

/* Hero call pair: the white primary the access band uses, and a quiet outline
   beside it, both on the hero's always-dark ground. */
.pg-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.pg-hero-cta .cta { display: inline-block; background: #fff; color: #0e3a66; font-size: 0.93333rem;
  font-weight: 600; line-height: normal; padding: 12px 22px; border-radius: 10px;
  border: 1px solid #fff; text-decoration: none; transition: opacity .15s ease; }
.pg-hero-cta .cta:hover { opacity: .92; }
.pg-hero-cta .cta-quiet { background: transparent; color: #fff; border-color: rgba(255,255,255,.34); }
.pg-hero-cta .cta-quiet:hover { border-color: #fff; opacity: 1; }

/* About: prose on a readable measure, then a strip of four facts. */
.pg-prose { max-width: 74ch; }
.pg-prose p { margin: 0 0 16px; line-height: 1.7; }
.pg-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
.pg-stats > div { background: var(--pg-card); border: 1px solid var(--pg-line); border-radius: 13px; padding: 16px 18px; }
.pg-stats b { display: block; font-family: Outfit, Inter, system-ui, sans-serif; font-weight: 700;
  font-size: 1.13333rem; letter-spacing: -.015em; margin-bottom: 4px; color: var(--pg-ink); }
.pg-stats span { display: block; font-size: 0.86667rem; line-height: 1.5; color: var(--pg-mut); }
@media (max-width: 900px) { .pg-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pg-stats { grid-template-columns: minmax(0, 1fr); } }

/* a section lede under a ruled heading, on the prose measure */
.pg-lede-sec { max-width: 74ch; margin: 0 0 28px; line-height: 1.64; }

/* the role cards go three across; the processor cards keep their two */
.pg-cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .pg-cards-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pg-cards-3 { grid-template-columns: minmax(0, 1fr); } }

/* Pricing FAQ: the definition-list stack on the prose measure, questions as headings. */
.pg-faq { max-width: 80ch; }
.pg-faq p a { color: var(--pg-brand); }

/* ---------- contact ---------- */
.pg-hero .pg-hero-link { color: #fff; text-decoration: underline; }
/* form left on the wider column, the contact cards right */
.pg-contact { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.pg-contact-form { background: var(--pg-card); border: 1px solid var(--pg-line); border-radius: 16px; padding: 28px 30px; }
.pg-contact-form h2 { margin: 0 0 18px; font-size: 1.46667rem; letter-spacing: -.015em; }
.pg-form { display: grid; gap: 16px; }
.pg-form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pg-form label { display: grid; gap: 6px; font-size: 0.86667rem; font-weight: 600; color: var(--pg-ink); }
.pg-form-opt { font-weight: 400; color: var(--pg-mut2); }
.pg-form input, .pg-form textarea { width: 100%; font: inherit; font-weight: 400; font-size: 1rem; color: var(--pg-ink);
  background: var(--pg-bg); border: 1px solid var(--pg-line); border-radius: 10px; padding: 11px 13px; }
.pg-form textarea { resize: vertical; min-height: 150px; line-height: 1.55; }
.pg-form input:focus, .pg-form textarea:focus { outline: 2px solid var(--pg-brand); outline-offset: 1px; border-color: transparent; }
/* the honeypot: off-screen, not display:none, so a bot's DOM walk still finds a field */
.pg-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.pg-form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 4px; }
.pg-form-note { font-size: 0.8rem; color: var(--pg-mut); }
.pg-form .cta, .pg-sent .cta { display: inline-block; font-size: 0.93333rem; font-weight: 600; line-height: normal;
  padding: 12px 22px; border: 1px solid transparent; border-radius: 10px; text-decoration: none; cursor: pointer; font-family: inherit; }
.pg-form .cta-primary { color: #fff; background: var(--pg-brand-fill); }
.pg-form .cta-primary:disabled { opacity: .6; cursor: default; }
.pg-sent .cta-ghost { color: var(--pg-ink); border-color: var(--pg-line); background: transparent; }
/* the error strip keeps its meaning colour in both themes: a lighter red on
   navy, a darker one on the light card, both over the same faint red wash */
.pg-form-error { margin: 0; padding: 10px 14px; border-radius: 10px; font-size: 0.9rem;
  color: #ff9d94; background: rgba(220,60,50,.12); border: 1px solid rgba(220,60,50,.3); }
html[data-theme="light"] .pg-form-error { color: #b42318; }
@media (prefers-color-scheme: light) { :root:not([data-theme]) .pg-form-error { color: #b42318; } }
.pg-sent h2 { margin: 0 0 10px; font-size: 1.46667rem; }
.pg-sent p { margin: 0 0 20px; line-height: 1.64; }
.pg-cards-1 { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 900px) { .pg-contact { grid-template-columns: minmax(0, 1fr); gap: 24px; } }
@media (max-width: 560px) { .pg-form-row { grid-template-columns: minmax(0, 1fr); } .pg-contact-form { padding: 22px 20px; } }

/* ---------- public pages on a phone ---------- */
@media (max-width: 640px) {
  .pg-nav { gap: 12px; padding: 12px 18px; }
  .pg-footbar .pg-foot nav { margin-left: 0; }
}