/* ============================================================
   Prodigy UI SDK — prodigy-ui.css                    v1.0.0
   ============================================================
   One file. Framework-agnostic. Drop into any app:

     <link rel="stylesheet" href="prodigy-ui.css">

   Downstream of the Prodigy Promos Design System v1.05
   ("The Production Floor", locked June 2026). Token values
   mirror design/handoff-tokens.css in prodigy-main-website —
   never fork a value here; re-sync when the theme changes.

   Naming: every class is pp-* (block), pp-block__part (element),
   pp-block--variant (modifier). Machine spec: sdk/llms.txt.
   Token data: sdk/tokens.json.

   THE SIX RULES (everything below obeys them)
   1. One signal color — lime means "act". Nothing decorative is lime.
   2. One section device — the lime chevron before an H2.
   3. Flat, not raised — hairlines separate; shadows are focus ring + faint lift only.
   4. Eyebrows must inform — no label-only eyebrows.
   5. Measure before width — body text holds 65–75 characters.
   6. Facts on top, never overlaid — nothing is typeset on an image.
   ============================================================ */

/* ----- Fonts: Graphik, self-hosted. NO Medium (500) — authoring
   at 500 renders Regular. Black is mapped across 800–900. ----- */
@font-face { font-family: "Graphik"; src: url("fonts/Graphik-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Graphik"; src: url("fonts/Graphik-RegularItalic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Graphik"; src: url("fonts/Graphik-Semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Graphik"; src: url("fonts/Graphik-SemiboldItalic.woff2") format("woff2"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Graphik"; src: url("fonts/Graphik-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Graphik"; src: url("fonts/Graphik-BoldItalic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Graphik"; src: url("fonts/Graphik-Black.woff2") format("woff2"); font-weight: 800 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Graphik"; src: url("fonts/Graphik-BlackItalic.woff2") format("woff2"); font-weight: 800 900; font-style: italic; font-display: swap; }

:root {
  /* ===== Brand (official) ===== */
  --pp-teal-950: #021e1e; /* "Shadow" — darkest surfaces, app header/footer */
  --pp-teal-900: #00363a; /* "Moss" — main brand teal */
  --pp-lime:     #a4e96c; /* "Canopy" — CTAs ONLY. Never a background, never under white text */

  /* ===== Derived helpers ===== */
  --pp-teal-700:  #00565c; /* links, showcase panels */
  --pp-lime-deep: #8cd64f; /* button hover, list markers */
  --pp-olive:     #4f7a1f; /* on-light label green */

  /* ===== Text ===== */
  --pp-ink:  #10231f;
  --pp-body: #37443f;
  --pp-muted-on-dark: #b8ccc8;
  --pp-faint-on-dark: #9fc4b8;
  --pp-eyebrow-on-light: #5e7268;

  /* ===== Surfaces & lines ===== */
  --pp-paper: #ffffff;
  --pp-smoke: #eef0f2;
  --pp-line:  #e3e7e4;
  --pp-line-on-smoke: #d3dad7;
  --pp-line-on-dark: rgba(255,255,255,0.18);

  /* ===== Semantic status (SDK extension — sourced from the DS
     alias layer + badge card; app UI needs them, marketing doesn't) ===== */
  --pp-success: #4f7a1f;
  --pp-warning: #c99a3b;
  --pp-danger:  #c0533b;
  --pp-info:    #00565c;

  /* ===== Radii — two, plus inputs ===== */
  --pp-r-card:  16px;
  --pp-r-pill:  999px;
  --pp-r-input: 6px;

  /* ===== Fluid type (Utopia 360,16,1.2 → 1240,18,1.25).
     Content type only — UI chrome stays fixed-px. ===== */
  --pp-step--2: clamp(0.6944rem, 0.684rem + 0.0465vw, 0.72rem);
  --pp-step--1: clamp(0.8333rem, 0.8061rem + 0.1212vw, 0.9rem);
  --pp-step-0:  clamp(1rem, 0.9489rem + 0.2273vw, 1.125rem);
  --pp-step-1:  clamp(1.2rem, 1.1156rem + 0.375vw, 1.4062rem);
  --pp-step-2:  clamp(1.44rem, 1.31rem + 0.5778vw, 1.7578rem);
  --pp-step-3:  clamp(1.728rem, 1.536rem + 0.8532vw, 2.1973rem);
  --pp-step-4:  clamp(2.0736rem, 1.7983rem + 1.2236vw, 2.7466rem);
  --pp-step-5:  clamp(2.4883rem, 2.1018rem + 1.718vw, 3.4332rem);
  --pp-display-1:   clamp(2.2rem, 1.7091rem + 2.1818vw, 3.4rem);
  --pp-display-2:   clamp(1.7rem, 1.4136rem + 1.2727vw, 2.4rem);
  --pp-display-cta: clamp(2.4rem, 1.7455rem + 2.9091vw, 4rem);

  /* ===== Layout ===== */
  --pp-w-grid:    1160px;
  --pp-w-article: 740px;
  --pp-w-wide:    860px;
  --pp-pad-section: 72px;

  /* ===== Elevation — the language is FLAT ===== */
  --pp-focus-ring: 0 0 0 6px rgba(164, 233, 108, 0.28);
  --pp-lift: 0 1px 2px rgba(2, 30, 30, 0.05);

  /* ===== Motion — hovers darken, never lighten ===== */
  --pp-ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --pp-dur-fast: 150ms;
  --pp-dur-base: 200ms;

  /* ===== Type helpers ===== */
  --pp-font: "Graphik", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pp-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --pp-lh-display: 1.12;
  --pp-lh-body: 1.6;
  --pp-track-display: -0.015em;

  /* ===== SDK component tokens ===== */
  --pp-input-border: #d9dfdb;
  --pp-chevron-h2: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 75.323 112.101"%3E%3Cpolygon fill="%23A4E96C" points="0,112.101 44.793,112.101 75.323,56.051 44.793,0 0,0 30.53,56.051"/%3E%3C/svg%3E');
  --pp-chevron-deep: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 75.323 112.101"%3E%3Cpolygon fill="%238CD64F" points="0,112.101 44.793,112.101 75.323,56.051 44.793,0 0,0 30.53,56.051"/%3E%3C/svg%3E');
}

/* ============================================================
   BASE — the site typography recipe
   ============================================================ */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--pp-font);
  color: var(--pp-body);
  background: var(--pp-paper);
  font-size: var(--pp-step-0);
  line-height: var(--pp-lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Weight-stepping: Black (900) is display-only — H1/H2 and step-3+.
   H3–H6 and strong/b are Semibold 600. Buttons are the one 700. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--pp-font);
  color: var(--pp-ink);
  line-height: var(--pp-lh-display);
  letter-spacing: var(--pp-track-display);
  text-wrap: balance;
  margin: 0;
}
h1, h2 { font-weight: 900; }
h3, h4, h5, h6 { font-weight: 600; }
strong, b { font-weight: 600; }
h1 { font-size: var(--pp-display-1); }
h2 { font-size: var(--pp-display-2); }
h3 { font-size: var(--pp-step-1); }
h4, h5 { font-size: var(--pp-step-0); }
h6 { font-size: var(--pp-step--1); }

p { margin: 0; text-wrap: pretty; }
small { font-size: var(--pp-step--1); }

code, kbd, samp {
  font-family: var(--pp-font-mono);
  font-size: 0.85em;
  background: var(--pp-smoke);
  padding: 0.12em 0.4em;
  border-radius: 4px;
  color: var(--pp-ink);
}

a { color: var(--pp-teal-700); text-decoration: none; transition: color var(--pp-dur-fast) var(--pp-ease-out); }
a:hover { color: var(--pp-ink); text-decoration: underline; text-underline-offset: 3px; }

:focus-visible { outline: none; box-shadow: var(--pp-focus-ring); }
::selection { background: var(--pp-lime); color: var(--pp-teal-900); }

hr, .pp-hairline { border: 0; border-top: 1px solid var(--pp-line); margin: 0; }

/* ============================================================
   TYPE UTILITIES
   ============================================================ */
.pp-lede { font-size: var(--pp-step-1); line-height: var(--pp-lh-body); color: var(--pp-body); max-width: 64ch; }
.pp-measure { max-width: 32.5em; } /* ~70 characters of Graphik */

/* Eyebrow — must carry a FACT the heading doesn't (breadcrumb,
   byline). Label-only eyebrows do not exist. Never lime, never
   uppercase, never letter-spaced. */
.pp-eyebrow { font-weight: 600; font-size: var(--pp-step--1); color: var(--pp-eyebrow-on-light); }
.pp-eyebrow--dark { color: var(--pp-faint-on-dark); }

/* Micro-label — the ONE surviving all-caps role: micro-labels that
   are data (WEEK ONE). Not a heading kicker. */
.pp-microlabel { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pp-olive); }

.pp-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ============================================================
   CHEVRON H2 — the only section device. Nothing competes with it.
   ============================================================ */
.pp-h2 {
  position: relative;
  padding-left: 1.05em;
}
.pp-h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.12em;
  width: 0.6em;
  height: 0.9em;
  background: var(--pp-chevron-h2) no-repeat center / contain;
}

/* ============================================================
   EDITORIAL LISTS — deep-lime chevron bullets, hung numerals
   ============================================================ */
ul.pp-list { list-style: none; margin: 0; padding: 0; }
ul.pp-list > li { position: relative; padding-left: 1.3em; margin-bottom: 0.5em; }
ul.pp-list > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.32em;
  width: 0.5em;
  height: 0.75em;
  background: var(--pp-chevron-deep) no-repeat center / contain;
}
ol.pp-list { list-style: none; margin: 0; padding: 0; counter-reset: pp-ol; }
ol.pp-list > li { position: relative; padding-left: 1.9em; margin-bottom: 0.5em; counter-increment: pp-ol; }
ol.pp-list > li::before {
  content: counter(pp-ol);
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 600;
  color: var(--pp-teal-700);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   BUTTONS — always pill, 700, 14/30. Hovers darken.
   Four variants: lime + ghost-light on teal; dark + ghost-dark on paper.
   ============================================================ */
.pp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--pp-r-pill);
  font-family: var(--pp-font);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  white-space: nowrap;
  flex: none;
  padding: 14px 30px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--pp-dur-fast) var(--pp-ease-out), border-color var(--pp-dur-fast) var(--pp-ease-out), color var(--pp-dur-fast) var(--pp-ease-out);
}
.pp-btn:hover { text-decoration: none; }
.pp-btn--lime { background: var(--pp-lime); color: var(--pp-teal-900); }
.pp-btn--lime:hover { background: var(--pp-lime-deep); color: var(--pp-teal-900); }
.pp-btn--dark { background: var(--pp-teal-900); color: #fff; }
.pp-btn--dark:hover { background: var(--pp-teal-700); color: #fff; }
.pp-btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.45); }
.pp-btn--ghost-light:hover { border-color: #fff; background: rgba(255,255,255,0.06); color: #fff; }
.pp-btn--ghost-dark { background: transparent; color: var(--pp-teal-900); border-color: #c7d2cd; }
.pp-btn--ghost-dark:hover { border-color: var(--pp-teal-900); color: var(--pp-teal-900); }
.pp-btn--sm { font-size: 14px; padding: 9px 20px; }
.pp-btn:disabled, .pp-btn--disabled { opacity: 0.45; pointer-events: none; }

/* ============================================================
   CARDS — hairline border, 16px radius, 36/32 padding, faint lift
   ============================================================ */
.pp-card {
  background: var(--pp-paper);
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-r-card);
  padding: 36px 32px;
  box-shadow: var(--pp-lift);
}
.pp-card--dark { background: var(--pp-teal-900); border-color: transparent; }
.pp-card--dark h1, .pp-card--dark h2, .pp-card--dark h3, .pp-card--dark h4 { color: #fff; }
.pp-card--dark p, .pp-card--dark li { color: var(--pp-muted-on-dark); }
.pp-card--dark .pp-eyebrow { color: var(--pp-faint-on-dark); }
.pp-card--flush { padding: 0; overflow: hidden; }

/* ============================================================
   ANSWER CAPSULE — deliberately SQUARE. Smoke fill, olive label.
   ONE per section. FAQ answers are never boxed.
   ============================================================ */
.pp-capsule {
  background: var(--pp-smoke);
  padding: 24px 28px;
  max-width: min(48ch, 100%);
}
.pp-capsule__label {
  font-weight: 600;
  font-size: var(--pp-step--1);
  color: var(--pp-olive);
  margin-bottom: 8px;
}
.pp-capsule p { color: var(--pp-ink); }

/* ============================================================
   BADGES — status pills for order/app state. 600, fixed 12px.
   ============================================================ */
.pp-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--pp-r-pill);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.pp-badge__dot { width: 6px; height: 6px; border-radius: var(--pp-r-pill); background: currentColor; }
.pp-badge--success { background: #e2ffc0; color: #365f1a; }
.pp-badge--info    { background: #d1f2f2; color: #005457; }
.pp-badge--neutral { background: #eae5db; color: #5c5340; }
.pp-badge--dark    { background: var(--pp-teal-950); color: var(--pp-lime); }
.pp-badge--warning { background: #ffe9c9; color: #7b5915; }
.pp-badge--danger  { background: #fbded4; color: #7a2d1b; }
.pp-badge--outline { background: transparent; color: var(--pp-teal-900); border: 1.5px solid var(--pp-teal-900); }

/* ============================================================
   FORMS — 6px radius (inputs only), Moss focus border + lime ring
   Labels are sentence case (all-caps labels are print-kit only).
   ============================================================ */
.pp-field { display: grid; gap: 6px; }
.pp-label { font-size: 13px; font-weight: 600; color: var(--pp-ink); }
.pp-label__optional { font-weight: 400; color: var(--pp-eyebrow-on-light); }
.pp-input, .pp-select, .pp-textarea {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--pp-font);
  font-size: 15px;
  color: var(--pp-ink);
  background: var(--pp-paper);
  border: 1.5px solid var(--pp-input-border);
  border-radius: var(--pp-r-input);
  padding: 10px 12px;
  outline: none;
  transition: border-color var(--pp-dur-fast) var(--pp-ease-out), box-shadow var(--pp-dur-fast) var(--pp-ease-out);
}
.pp-input::placeholder, .pp-textarea::placeholder { color: var(--pp-eyebrow-on-light); }
.pp-input:focus, .pp-select:focus, .pp-textarea:focus {
  border-color: var(--pp-teal-900);
  box-shadow: var(--pp-focus-ring);
}
.pp-select {
  appearance: none;
  padding-right: 34px;
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"%3E%3Cpath d="M1 1l5 5 5-5" fill="none" stroke="%2337443f" stroke-width="1.75"/%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.pp-textarea { min-height: 96px; resize: vertical; }
.pp-hint { font-size: 12px; color: var(--pp-eyebrow-on-light); }
.pp-error-text { font-size: 12px; font-weight: 600; color: var(--pp-danger); }
.pp-input--error, .pp-select--error, .pp-textarea--error { border-color: var(--pp-danger); }
.pp-input--error:focus { border-color: var(--pp-danger); box-shadow: 0 0 0 6px rgba(192, 83, 59, 0.16); }
.pp-checkbox, .pp-radio { accent-color: var(--pp-teal-700); width: 16px; height: 16px; }
.pp-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .pp-form-row { grid-template-columns: 1fr; } }

/* ============================================================
   TABLE — typeset journal. Hairlines + ONE 2px teal rule under
   the header. No grids, no banded rows, no tinted header.
   ============================================================ */
.pp-table {
  border-collapse: collapse;
  width: 100%;
  font-variant-numeric: tabular-nums;
}
.pp-table th, .pp-table td {
  text-align: left;
  padding: 10px 16px;
  border-bottom: 1px solid var(--pp-line);
  font-size: 15px;
}
.pp-table th {
  color: var(--pp-ink);
  font-weight: 600;
  border-bottom: 2px solid var(--pp-teal-900);
}
.pp-table--flush th:first-child, .pp-table--flush td:first-child { padding-left: 0; }
.pp-table--flush th:last-child,  .pp-table--flush td:last-child  { padding-right: 0; }
.pp-table--hover tbody tr { transition: background var(--pp-dur-fast) var(--pp-ease-out); }
.pp-table--hover tbody tr:hover { background: var(--pp-smoke); }
.pp-table .pp-num, .pp-table--num-right td:last-child, .pp-table--num-right th:last-child { text-align: right; }

/* ============================================================
   BREADCRUMBS — plain › separators in muted ink. NEVER lime,
   never the chevron asset. Dark bar for pages, light for singles.
   ============================================================ */
.pp-breadcrumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 13px; list-style: none; margin: 0; padding: 0; }
.pp-breadcrumbs li { display: flex; align-items: center; gap: 10px; }
.pp-breadcrumbs li + li::before { content: "\203A"; color: var(--pp-eyebrow-on-light); }
.pp-breadcrumbs a { color: var(--pp-eyebrow-on-light); }
.pp-breadcrumbs a:hover { color: var(--pp-ink); text-decoration: none; }
.pp-breadcrumbs [aria-current] { color: var(--pp-ink); font-weight: 600; }
.pp-breadcrumbs--dark a { color: var(--pp-faint-on-dark); }
.pp-breadcrumbs--dark li + li::before { color: var(--pp-faint-on-dark); }
.pp-breadcrumbs--dark a:hover, .pp-breadcrumbs--dark [aria-current] { color: #fff; }

/* ============================================================
   PAGE HEADS — darkness reads as depth-of-funnel. Dark Moss heads
   for home/track landings; smoke heads for everything deeper.
   Tier-3+ pages and CPT singles never get dark heads.
   ============================================================ */
.pp-page-head { background: var(--pp-smoke); padding: 44px 0; }
.pp-page-head--dark { background: var(--pp-teal-900); }
.pp-page-head--dark h1, .pp-page-head--dark h2 { color: #fff; }
.pp-page-head--dark p { color: var(--pp-muted-on-dark); }

/* ============================================================
   HERO FACTS — numbers at step-2/600, hairline-separated, inside
   the dark head. Never a standalone smoke band.
   ============================================================ */
.pp-facts { display: flex; flex-wrap: wrap; }
.pp-facts__item { padding: 4px 28px 4px 0; }
.pp-facts__item + .pp-facts__item { border-left: 1px solid var(--pp-line-on-dark); padding-left: 28px; }
.pp-facts__number { font-size: var(--pp-step-2); font-weight: 600; color: #fff; line-height: 1.2; font-variant-numeric: tabular-nums; }
.pp-facts__label { font-size: var(--pp-step--1); color: var(--pp-muted-on-dark); }
.pp-facts--light .pp-facts__item + .pp-facts__item { border-left-color: var(--pp-line); }
.pp-facts--light .pp-facts__number { color: var(--pp-ink); }
.pp-facts--light .pp-facts__label { color: var(--pp-eyebrow-on-light); }

/* ============================================================
   TABS — hairline base, active gets ink + the 2px teal rule
   (same device as the table header). No pills, no fills.
   ============================================================ */
.pp-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--pp-line); }
.pp-tab {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-family: var(--pp-font);
  font-size: 14px;
  font-weight: 600;
  color: var(--pp-eyebrow-on-light);
  padding: 10px 14px;
  cursor: pointer;
  transition: color var(--pp-dur-fast) var(--pp-ease-out);
}
.pp-tab:hover { color: var(--pp-ink); }
.pp-tab[aria-selected="true"], .pp-tab--active { color: var(--pp-ink); border-bottom-color: var(--pp-teal-900); }

/* ============================================================
   ALERTS — flat tinted panel, 6px radius, semibold title.
   No lime bars, no left-border accents (both rejected).
   ============================================================ */
.pp-alert { display: grid; gap: 2px; padding: 14px 16px; border-radius: var(--pp-r-input); font-size: 14px; }
.pp-alert__title { font-weight: 600; }
.pp-alert--success { background: #e2ffc0; color: #365f1a; }
.pp-alert--info    { background: #d1f2f2; color: #005457; }
.pp-alert--warning { background: #ffe9c9; color: #7b5915; }
.pp-alert--danger  { background: #fbded4; color: #7a2d1b; }
.pp-alert--neutral { background: var(--pp-smoke); color: var(--pp-ink); }

/* ============================================================
   APP TOPBAR — Shadow surface, the app's one dark chrome band
   ============================================================ */
.pp-topbar {
  background: var(--pp-teal-950);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 0 24px;
  min-height: 56px;
}
.pp-topbar__brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; color: #fff; }
.pp-topbar__nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.pp-topbar__link { color: var(--pp-muted-on-dark); font-size: 14px; font-weight: 600; padding: 8px 12px; border-radius: var(--pp-r-pill); }
.pp-topbar__link:hover { color: #fff; text-decoration: none; }
.pp-topbar__link--active { color: var(--pp-teal-950); background: var(--pp-lime); }
.pp-topbar__link--active:hover { color: var(--pp-teal-950); background: var(--pp-lime-deep); }

/* ============================================================
   EMPTY STATE — quiet, factual, one action
   ============================================================ */
.pp-empty { display: grid; justify-items: center; gap: 12px; text-align: center; padding: 56px 24px; }
.pp-empty__title { font-size: var(--pp-step-1); font-weight: 600; color: var(--pp-ink); }
.pp-empty__body { color: var(--pp-eyebrow-on-light); max-width: 40ch; font-size: 15px; }

/* ============================================================
   GUARANTEE BAND — Moss, white heading, lime CTA
   ============================================================ */
.pp-band { background: var(--pp-teal-900); padding: 48px 0; }
.pp-band h2, .pp-band h3 { color: #fff; }
.pp-band p { color: var(--pp-muted-on-dark); }

/* ============================================================
   LAYOUT HELPERS
   ============================================================ */
.pp-container { max-width: var(--pp-w-grid); margin: 0 auto; padding: 0 40px; }
.pp-container--article { max-width: var(--pp-w-article); }
.pp-container--wide { max-width: var(--pp-w-wide); }
.pp-section { padding: var(--pp-pad-section) 0; }
@media (max-width: 720px) {
  .pp-container { padding: 0 20px; }
  .pp-section { padding: 52px 0; }
}

/* ============================================================
   DENSITY — set data-pp-density="compact" on <body> (or any
   subtree) for ops screens. UI chrome only; content type untouched.
   ============================================================ */
[data-pp-density="compact"] .pp-table th,
[data-pp-density="compact"] .pp-table td { padding: 7px 12px; font-size: 14px; }
[data-pp-density="compact"] .pp-input,
[data-pp-density="compact"] .pp-select,
[data-pp-density="compact"] .pp-textarea { padding: 7px 10px; font-size: 14px; }
[data-pp-density="compact"] .pp-card { padding: 20px; }
[data-pp-density="compact"] .pp-btn { font-size: 14px; padding: 9px 20px; }
[data-pp-density="compact"] .pp-btn--sm { font-size: 13px; padding: 6px 14px; }