/* =====================================================================
   Subpages (pricing, use cases, integrations, compare, faq, contact, enterprise).
   Loads after base.css and site.css, before footer.css. Everything here is prefixed .pg-.
   Built only from existing tokens (--text, --text-2, --text-3, --anchor, --mint, --surface, --blue, --vb-*).
   Reuse from site.css: .vb-wrap .vb-sec .vb-eyebrow .vb-h2 .vb-lede .vb-cta-row .btn-cta.vb-btn .vb-close .vb-stage.
   ===================================================================== */

/* ---------- hero: breadcrumb, H1, direct answer, updated line ---------- */
.pg-hero { padding: 128px 0 0; text-align: center; }
.pg-crumb { margin: 0 0 28px; }
.pg-crumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; font: 500 12px/1.4 var(--vb-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); }
.pg-crumb li + li::before { content: "\203A"; margin-right: 10px; opacity: .6; }
.pg-crumb a:hover { color: var(--text); text-decoration: underline; }
.pg-crumb [aria-current] { color: var(--text); }
.pg-hero .vb-lede { max-width: 700px; }
.pg-hero .vb-cta-row { margin-top: 36px; }
.pg-updated { margin: 22px 0 0; font: 500 12px/1.4 var(--vb-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }

/* ---------- Hero card on subpages: the homepage hero piece (wallpaper, one static window, Scrubbr pill, dock) ----------
   Add class pg-hw to section.pg-hero. Reuses the .hw-* rules of site.css (card, wallpaper, window scenes, pill, chip, dock); nothing here
   changes the homepage. The stage is decoration: no JS, no ids, so the #hw-* choreography rules of site.css never match. */
.pg-hero.pg-hw { --hw-m: clamp(12px, 3.4vw, 48px); padding: 80px var(--hw-m) 0; }
.pg-hw .hw-inner { padding: clamp(40px, 5.2vw, 72px) 24px 30px; }
.pg-hw .pg-crumb { margin-bottom: 26px; }
.pg-hw .pg-crumb ol, .pg-hw .pg-crumb [aria-current] { color: #1E4E5C; }
.pg-hw .pg-crumb a:hover { color: #0B1C21; }
.pg-hw .pg-logo { margin-bottom: 20px; }
.pg-hw .hw-eyebrow { margin-bottom: 18px; }
.pg-hw .vb-lede { color: #34484F; }
.pg-hw .cta-fineprint, .pg-hw .pg-updated { color: #4A5D64; }
.pg-hw .pg-updated { margin-top: 18px; }
.pg-hw .hw-stagebox { container-type: inline-size; }   /* cqw below = the stage's parent width */
.pg-hw .hw-stage { --hw-s: tan(atan2(min(800px, 100cqw), 800px)); }   /* stage width / 800, the ratio site.js sets on the homepage */
.pg-hw .hw-stage.has-pill .hw-pill { display: block !important; }   /* site.css hides the pill under reduced motion; here it is static */
.pg-hw .hw-pill-tx { text-overflow: ellipsis; }
.pg-hw .pg-hw-ctx { display: flex; justify-content: center; align-items: center; height: 30px; margin-top: 16px; }
.pg-hw .hw-dk { cursor: default; }
.pg-hw .hw-dk::after { display: none; }
@supports not ((transform: scale(tan(atan2(1px, 1px)))) and (width: 1cqw)) {
  .pg-hw .hw-stage { --hw-s: .84; }
}
@media (max-width: 920px) { @supports not ((transform: scale(tan(atan2(1px, 1px)))) and (width: 1cqw)) { .pg-hw .hw-stage { --hw-s: .7; } } }
@media (max-width: 700px) {
  .pg-hero.pg-hw { padding-top: 80px; }
  .pg-hw .hw-inner { padding: 44px 14px 22px; }
  .pg-hw .pg-crumb { margin-bottom: 20px; }
  .pg-hw .pg-updated { margin-top: 14px; }
  .pg-hw .pg-hw-ctx { margin-top: 12px; }
  .pg-hw .hw-chip b { display: inline; }
  @supports not ((transform: scale(tan(atan2(1px, 1px)))) and (width: 1cqw)) { .pg-hw .hw-stage { --hw-s: .5; } }
}
@media (max-width: 440px) { @supports not ((transform: scale(tan(atan2(1px, 1px)))) and (width: 1cqw)) { .pg-hw .hw-stage { --hw-s: .4; } } }

/* ---------- content blocks ---------- */
.pg-body { max-width: 720px; margin: 52px auto 0; font-size: 18px; line-height: 1.6; color: var(--text-2); }
.pg-body p { margin: 0 0 18px; text-wrap: pretty; }
.pg-body a, .pg-qa a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.pg-body h3 { margin: 32px 0 10px; font-size: 23px; line-height: 1.2; font-weight: 600; letter-spacing: -.025em; color: var(--text); }

/* card grid: hubs, "what is included", related blocks */
.pg-cards { list-style: none; margin: 52px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.pg-card {
  display: flex; flex-direction: column; gap: 10px; background: var(--surface); border-radius: 24px; padding: 32px 32px 34px;
  box-shadow: 0 0 0 1px rgba(11,28,33,.06), 0 24px 48px -30px rgba(11,28,33,.34);
}
.pg-card h3 { margin: 0; font-size: 23px; line-height: 1.2; font-weight: 600; letter-spacing: -.025em; color: var(--text); }
.pg-card p { margin: 0; font-size: 17px; line-height: 1.5; color: var(--text-2); text-wrap: pretty; }
.pg-card a.pg-more { margin-top: auto; padding-top: 8px; font-weight: 600; font-size: 16px; color: var(--text); }
.pg-card a.pg-more:hover { text-decoration: underline; text-underline-offset: 3px; }
a.pg-card { transition: transform .08s ease, box-shadow .15s ease; }
a.pg-card:hover { box-shadow: 0 0 0 1px rgba(11,28,33,.1), 0 24px 48px -28px rgba(11,28,33,.4); }

/* plan cards (two across) */
.pg-plans { list-style: none; margin: 52px auto 0; padding: 0; max-width: 820px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.pg-plan { position: relative; background: var(--surface); border-radius: 24px; padding: 34px 32px 32px; text-align: left; box-shadow: 0 0 0 1px rgba(11,28,33,.06), 0 24px 48px -30px rgba(11,28,33,.34); }
.pg-plan.is-default { box-shadow: 0 0 0 2px var(--anchor), 0 24px 48px -30px rgba(11,28,33,.34); }
.pg-plan h3 { margin: 0; font: 500 12.5px/1 var(--vb-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
.pg-plan .pg-price { margin: 18px 0 0; font-size: clamp(44px, 5vw, 60px); line-height: 1; font-weight: 600; letter-spacing: -.035em; color: var(--text); }
.pg-plan .pg-price small { font-size: 17px; font-weight: 500; letter-spacing: -.005em; color: var(--text-2); }
.pg-plan p { margin: 14px 0 0; font-size: 17px; line-height: 1.5; color: var(--text-2); }
.pg-tag { position: absolute; top: 24px; right: 24px; padding: 6px 10px; border-radius: 999px; background: var(--mint); color: var(--anchor); font: 500 11px/1 var(--vb-mono); letter-spacing: .12em; text-transform: uppercase; }

/* comparison / plan table (wrap scrolls on its own, never the page) */
.pg-table-wrap { margin: 52px auto 0; max-width: 960px; overflow-x: auto; background: var(--surface); border-radius: 20px; box-shadow: 0 0 0 1px rgba(11,28,33,.06), 0 18px 40px -30px rgba(11,28,33,.3); }
.pg-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 16px; line-height: 1.45; color: var(--text-2); }
.pg-table caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.pg-table th, .pg-table td { padding: 16px 22px; vertical-align: top; border-bottom: 1px solid rgba(11,28,33,.08); }
.pg-table thead th { font: 500 12px/1.3 var(--vb-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); }
.pg-table tbody th { font-weight: 600; color: var(--text); }
.pg-table tbody tr:last-child th, .pg-table tbody tr:last-child td { border-bottom: 0; }

/* Q&A: always visible (matches FAQPage JSON-LD) */
.pg-qa { max-width: 760px; margin: 52px auto 0; display: grid; gap: 14px; }
.pg-qa-item { background: var(--surface); border-radius: 20px; padding: 24px 28px 26px; box-shadow: 0 0 0 1px rgba(11,28,33,.05), 0 18px 40px -30px rgba(11,28,33,.3); }
.pg-qa-item h3 { margin: 0; font-size: 20px; line-height: 1.3; font-weight: 600; letter-spacing: -.02em; color: var(--text); }
.pg-qa-item p { margin: 10px 0 0; font-size: 17px; line-height: 1.55; color: var(--text-2); text-wrap: pretty; }

/* related links row */
.pg-related { margin: 0 auto; max-width: 880px; text-align: center; }
.pg-related h2 { margin: 0 0 22px; font: 500 12px/1 var(--vb-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--text-2); }
.pg-related ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.pg-related a {
  display: inline-flex; align-items: center; height: 46px; padding: 0 20px; border-radius: 999px; background: var(--surface); color: var(--text);
  font-size: 16px; font-weight: 600; box-shadow: 0 0 0 1px rgba(11,28,33,.1);
  transition: background .15s ease, transform .08s ease;
}
.pg-related a:hover { background: #F6FBF8; }
.pg-related a:active { transform: translateY(1px); }

@media (max-width: 1000px) {
  .pg-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .pg-hero { padding-top: 104px; }
  .pg-crumb { margin-bottom: 22px; }
  .pg-body { margin-top: 36px; font-size: 17px; }
  .pg-cards, .pg-plans { margin-top: 36px; grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .pg-card { padding: 26px 24px 28px; border-radius: 20px; }
  .pg-plan { padding: 28px 24px 26px; border-radius: 20px; }
  .pg-table-wrap, .pg-qa { margin-top: 36px; }
  .pg-table th, .pg-table td { padding: 14px 16px; font-size: 15px; }
  .pg-qa-item { padding: 20px 20px 22px; }
  .pg-qa-item h3 { font-size: 18.5px; }
}

/* Integration pages: logo tile, worked example, groups, body lists */
.pg-logo { display: flex; align-items: center; justify-content: center; width: 76px; height: 76px; margin: 0 auto 22px; border-radius: 22px; background: var(--surface); box-shadow: 0 0 0 1px rgba(11,28,33,.06), 0 18px 36px -24px rgba(11,28,33,.34); }
.pg-logo img, .pg-logo svg { width: 42px; height: 42px; object-fit: contain; }
.pg-card-logo { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-bottom: 6px; border-radius: 15px; background: #F6FBF8; box-shadow: 0 0 0 1px rgba(11,28,33,.06); }
.pg-card-logo img, .pg-card-logo svg { width: 30px; height: 30px; object-fit: contain; }
.pg-int .pg-body ol, .pg-int .pg-body ul { margin: 0 0 18px; padding-left: 24px; }
.pg-int .pg-body li { margin: 0 0 10px; padding-left: 4px; text-wrap: pretty; }
.pg-ex { max-width: 760px; margin: 44px auto 0; background: var(--surface); border-radius: 24px; padding: 8px 32px; box-shadow: 0 0 0 1px rgba(11,28,33,.06), 0 24px 48px -30px rgba(11,28,33,.34); }
.pg-ex-tag { margin: 22px 0 0; font: 500 12px/1.3 var(--vb-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--anchor); }
.pg-ex dl { margin: 0; }
.pg-ex .pg-ex-row { padding: 18px 0; border-bottom: 1px solid rgba(11,28,33,.08); }
.pg-ex .pg-ex-row:last-child { border-bottom: 0; }
.pg-ex dt { margin: 0 0 6px; font: 500 12px/1.3 var(--vb-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); }
.pg-ex dd { margin: 0; font-size: 17px; line-height: 1.55; color: var(--text); text-wrap: pretty; }
.pg-group { margin-top: 56px; }
.pg-group > h3 { margin: 0; font: 500 12.5px/1 var(--vb-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--text-2); }
.pg-group > .pg-cards { margin-top: 20px; }
@media (max-width: 700px) {
  .pg-logo { width: 64px; height: 64px; border-radius: 18px; margin-bottom: 18px; }
  .pg-logo img, .pg-logo svg { width: 36px; height: 36px; }
  .pg-ex { margin-top: 32px; padding: 4px 22px; border-radius: 20px; }
  .pg-group { margin-top: 40px; }
}

/* Use-case pages: worked example, source chips, keycap, customer quote */
.uc-ex { max-width: 1040px; margin: 52px auto 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 24px; text-align: left; }
.uc-pane { background: var(--surface); border-radius: 24px; padding: 30px 30px 32px; box-shadow: 0 0 0 1px rgba(11,28,33,.06), 0 24px 48px -30px rgba(11,28,33,.34); }
.uc-pane.is-after { box-shadow: 0 0 0 2px var(--anchor), 0 24px 48px -30px rgba(11,28,33,.34); }
.uc-lab { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font: 500 12px/1.3 var(--vb-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
.uc-lab img { width: 16px; height: 16px; }
.uc-block { margin: 0 0 24px; }
.uc-block:last-child { margin-bottom: 0; }
.uc-in { margin: 0; padding: 14px 16px; border-radius: 14px; background: #F6FBF8; font-size: 16px; line-height: 1.5; color: var(--text-2); }
.uc-say { margin: 0; font-size: 19px; line-height: 1.45; font-weight: 500; letter-spacing: -.01em; color: var(--text); }
.uc-key { display: inline-block; margin-right: 8px; padding: 3px 9px; border-radius: 8px; font: 500 12px/1.3 var(--vb-mono); letter-spacing: .04em; color: var(--text); background: var(--surface); box-shadow: 0 0 0 1px rgba(11,28,33,.22), 0 2px 0 rgba(11,28,33,.18); vertical-align: 2px; }
.uc-srcs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.uc-srcs li { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; background: #F6FBF8; box-shadow: 0 0 0 1px rgba(11,28,33,.1); font-size: 14px; line-height: 1.3; color: var(--text-2); }
.uc-srcs img { width: 16px; height: 16px; flex: none; }
.uc-srcs b { font-weight: 600; color: var(--text); }
.uc-out p, .uc-out ol { margin: 0 0 12px; font-size: 17px; line-height: 1.55; color: var(--text); }
.uc-out ol { padding-left: 22px; }
.uc-out li { margin: 0 0 4px; }
.uc-out p:last-child { margin-bottom: 0; }
.uc-note { max-width: 720px; margin: 22px auto 0; font-size: 16px; line-height: 1.5; color: var(--text-3); text-align: center; }
.uc-q { max-width: 760px; margin: 52px auto 0; text-align: center; }
.uc-q blockquote { margin: 0; }
.uc-q blockquote p { margin: 0; font-size: clamp(20px, 2.2vw, 26px); line-height: 1.4; font-weight: 500; letter-spacing: -.02em; color: var(--text); text-wrap: balance; }
.uc-q figcaption { margin-top: 16px; font: 500 12px/1.4 var(--vb-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); }
.pg-uc .pg-table td a, .pg-uc .pg-table th a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1000px) { .uc-ex { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) {
  .uc-ex { margin-top: 36px; gap: 16px; }
  .uc-pane { padding: 24px 22px 26px; border-radius: 20px; }
  .uc-q { margin-top: 36px; }
}

/* Enterprise, FAQ, Contact: jump links, link style in cards and tables, group heading */
.pg-jump { margin-top: 36px; }
.pg-biz .pg-card p a, .pg-biz .pg-table a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.pg-grouphead { max-width: 760px; margin: 0 auto; }

.pg-hw .hw-dc-page .hw-dc-h1 { margin: 0 0 4px; font-size: 26px; font-weight: 400; line-height: 1.25; }   /* demo headings are <p>, so the page keeps one h1 (copies site.css .hw-dc-page h1/h2) */
.pg-hw .hw-dc-page .hw-dc-h2 { margin: 16px 0 4px; font-size: 17px; font-weight: 700; line-height: 1.35; }

/* ---------- Pricing hero: billing toggle + one plan card on the wallpaper card (pricing.html only) ----------
   Two radios + labels, no JS. Annual is checked in the HTML, so it shows without any of the :checked rules. */
.pg-bill { position: relative; margin: 34px auto 0; max-width: 440px; }
.pg-bill-in { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.pg-seg { display: flex; gap: 4px; width: max-content; max-width: 100%; margin: 0 auto; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.5); box-shadow: 0 0 0 1px rgba(11,28,33,.1); }
.pg-seg label { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 999px; cursor: pointer; font-size: 16px; font-weight: 600; line-height: 1; color: var(--text-2); transition: background .15s ease, color .15s ease; }
.pg-seg label:hover { color: var(--text); }
#bill-a:checked ~ .pg-seg label[for="bill-a"], #bill-m:checked ~ .pg-seg label[for="bill-m"] { background: var(--surface); color: var(--text); box-shadow: 0 0 0 1px rgba(11,28,33,.08), 0 6px 14px -8px rgba(11,28,33,.35); }
#bill-a:focus-visible ~ .pg-seg label[for="bill-a"], #bill-m:focus-visible ~ .pg-seg label[for="bill-m"] { outline: 2px solid var(--blue); outline-offset: 2px; }
.pg-seg-tag { padding: 5px 8px; border-radius: 999px; background: var(--mint); color: var(--anchor); font: 500 10.5px/1 var(--vb-mono); letter-spacing: .1em; text-transform: uppercase; }
.pg-plan-one { margin: 18px auto 0; padding: 30px 32px 28px; text-align: center; }
.pg-plan-one .pg-plan-name { margin: 0; font: 500 12.5px/1 var(--vb-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
.pg-plan-one .pg-sub { margin: 12px 0 0; font-size: 17px; line-height: 1.5; color: var(--text-2); }
.pg-plan-one .pg-state-m { display: none; }
#bill-m:checked ~ .pg-plan-one .pg-state-a { display: none; }
#bill-m:checked ~ .pg-plan-one .pg-state-m { display: block; }
.pg-incl { list-style: none; margin: 24px 0 0; padding: 22px 0 0; border-top: 1px solid rgba(11,28,33,.08); display: grid; gap: 12px; text-align: left; }
.pg-incl li { position: relative; padding-left: 28px; font-size: 16px; line-height: 1.4; color: var(--text); }
.pg-incl li::before { content: ""; position: absolute; left: 2px; top: 2px; width: 6px; height: 11px; border: solid var(--anchor); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.pg-hw-price .hw-inner { padding-bottom: clamp(36px, 4vw, 56px); }
@media (max-width: 700px) {
  .pg-bill { margin-top: 26px; }
  .pg-seg label { padding: 0 16px; }
  .pg-plan-one { padding: 26px 22px 24px; }
}