/* PhilippinesPedia Design System 2.0.0 | GPL-2.0-or-later
 * Opt in with .pp-ds on an outer Group/Row or HTML wrapper.
 * Keep components below that wrapper. No global reset, fonts, images or JS.
 */

/* 01 / Tokens ------------------------------------------------------------- */
.pp-ds {
  --pp-blue: #0b57d0;
  --pp-deep: #0a3871;
  --pp-ink: #162033;
  --pp-secondary: #4b5563;
  --pp-muted: #6b7280;
  --pp-border: #d7e2f2;
  --pp-soft: #f3f7ff;
  --pp-neutral: #f8fafc;
  --pp-white: #fff;
  --pp-yellow: #f4b400;
  --pp-red: #e53935;
  --pp-green: #109b78;
  --pp-orange: #e98a15;
  --pp-purple: #7c3aed;
  --pp-rose: #d92d64;
  --pp-surface: var(--pp-white);
  --pp-surface-raised: var(--pp-white);
  --pp-link: var(--pp-blue);
  --pp-success-ink: #08644e;
  --pp-warning-ink: #794200;
  --pp-danger-ink: #a51e24;
  --pp-control-border: #697b94;
  --pp-focus: var(--pp-blue);
  --pp-font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --pp-font-heading: 'Plus Jakarta Sans', var(--pp-font-body);
  --pp-text-sm: 0.875rem;
  --pp-text-base: 1rem;
  --pp-text-lead: clamp(1.125rem, 1.04rem + 0.35vw, 1.3125rem);
  --pp-text-h3: clamp(1.25rem, 1.12rem + 0.55vw, 1.625rem);
  --pp-text-h2: clamp(1.625rem, 1.21rem + 1.8vw, 2.75rem);
  --pp-text-h1: clamp(2rem, 1.35rem + 2.8vw, 4.25rem);
  --pp-leading: 1.7;
  --pp-space-1: 0.25rem;
  --pp-space-2: 0.5rem;
  --pp-space-3: 0.75rem;
  --pp-space-4: 1rem;
  --pp-space-5: 1.5rem;
  --pp-space-6: 2rem;
  --pp-space-7: 3rem;
  --pp-space-8: 4rem;
  --pp-space-section: clamp(3rem, 1.7rem + 5vw, 6.5rem);
  --pp-gutter: clamp(1rem, 3vw, 2.5rem);
  --pp-width-site: 75rem;
  --pp-width-reading: 46rem;
  --pp-width-wide: 62rem;
  --pp-radius-sm: 0.375rem;
  --pp-radius-md: 0.75rem;
  --pp-radius-lg: 1.25rem;
  --pp-radius-pill: 100vmax;
  --pp-shadow-sm: 0 2px 4px rgb(10 56 113 / 4%);
  --pp-shadow-md: 0 12px 32px -16px rgb(10 56 113 / 22%);
  --pp-shadow-lg: 0 24px 64px -28px rgb(10 56 113 / 26%);
  --pp-duration: 160ms;
  --pp-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --pp-accent: var(--pp-blue);
  --pp-accent-ink: var(--pp-deep);
  color: var(--pp-ink);
  font-family: var(--pp-font-body);
  font-size: var(--pp-text-base);
  line-height: var(--pp-leading);
  text-align: start;
}

/* 02 / Scoped foundations. Never put pp-ds on body or an unrelated form. */
.pp-ds, .pp-ds :where(*, *::before, *::after) { box-sizing: border-box; }
.pp-ds :where(h1, h2, h3, h4, h5, h6) {
  color: var(--pp-ink);
  font-family: var(--pp-font-heading);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.025em;
  margin-block: 0 0.75em;
  text-wrap: pretty;
}
.pp-ds h1 { font-size: var(--pp-text-h1); }
.pp-ds h2 { font-size: var(--pp-text-h2); }
.pp-ds h3 { font-size: var(--pp-text-h3); }
.pp-ds :where(h4, h5, h6) { font-size: 1.125rem; }
.pp-ds :where(p, ul, ol, dl, figure, blockquote) { margin-block: 0 1.25rem; }
.pp-ds :where(ul, ol) { padding-inline-start: 1.5rem; }
.pp-ds li + li { margin-block-start: 0.5rem; }
.pp-ds a { color: var(--pp-link); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 0.08em; }
.pp-ds a:hover { text-decoration-thickness: 0.14em; }
.pp-ds :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--pp-focus);
  outline-offset: 4px;
  box-shadow: 0 0 0 3px var(--pp-white);
}
.pp-ds :where(img, svg, video) { max-inline-size: 100%; height: auto; }
.pp-ds :where(img, video) { display: block; }
.pp-ds :where([id]) { scroll-margin-block-start: var(--pp-anchor-offset, 6rem); }
.pp-ds :where(.pp-url, code, .pp-sources a) { overflow-wrap: anywhere; }
.pp-ds .pp-visually-hidden {
  position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.pp-ds .pp-eyebrow {
  display: block; margin-block-end: 1rem; color: var(--pp-accent-ink);
  font-size: 0.75rem; font-weight: 750; letter-spacing: 0.11em; text-transform: uppercase;
}
.pp-ds .pp-lead { color: var(--pp-secondary); font-size: var(--pp-text-lead); line-height: 1.65; max-inline-size: 55ch; }
.pp-ds .pp-meta { color: var(--pp-secondary); font-size: var(--pp-text-sm); }
.pp-ds .pp-divider { border: 0; border-block-start: 1px solid var(--pp-border); margin-block: var(--pp-space-7); }

/* 03 / Width belongs to one owner: pp-container OR Kadence Row. */
.pp-ds.pp-page { background: var(--pp-white); }
.pp-ds .pp-container { inline-size: 100%; max-inline-size: var(--pp-width-site); margin-inline: auto; padding-inline: var(--pp-gutter); }
.pp-ds .pp-container.pp-inherit-width { max-inline-size: none; padding-inline: 0; }
.pp-ds .pp-section { padding-block: var(--pp-space-section); }
.pp-ds .pp-section--soft { background: var(--pp-soft); }
.pp-ds .pp-section--rule { border-block-start: 1px solid var(--pp-border); }
.pp-ds .pp-reading { max-inline-size: var(--pp-width-reading); margin-inline: auto; }
.pp-ds .pp-wide { inline-size: 100%; max-inline-size: var(--pp-width-wide); margin-inline: auto; }
.pp-ds .pp-stack > * + * { margin-block-start: var(--pp-space-5); }
.pp-ds .pp-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pp-space-3); }
.pp-ds .pp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: var(--pp-space-5); align-items: stretch; }
.pp-ds :where(.pp-grid, .pp-hero, .pp-feature, .pp-guide-layout) > * { min-inline-size: 0; }
.pp-ds .pp-section-heading { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 3rem; margin-block-end: 2rem; }
.pp-ds .pp-section-heading h2 { margin-block-end: 0; max-inline-size: 24ch; }
.pp-ds .pp-section-heading p { margin: 0; max-inline-size: 46ch; color: var(--pp-secondary); }

/* 04 / Actions and real form shells. */
.pp-ds .pp-button, .pp-ds .pp-search .wp-block-search__button {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-block-size: 2.75rem; max-inline-size: 100%; padding: 0.7rem 1.25rem;
  border: 1px solid var(--pp-blue); border-radius: var(--pp-radius-sm);
  background: var(--pp-blue); color: var(--pp-white); font: inherit; font-weight: 650;
  line-height: 1.4; text-align: center; text-decoration: none; white-space: normal; cursor: pointer;
  transition: background-color var(--pp-duration) var(--pp-ease), box-shadow var(--pp-duration) var(--pp-ease);
}
.pp-ds .pp-button:hover, .pp-ds .pp-search .wp-block-search__button:hover { background: var(--pp-deep); border-color: var(--pp-deep); color: var(--pp-white); text-decoration: none; box-shadow: var(--pp-shadow-sm); }
.pp-ds .pp-button--secondary { color: var(--pp-blue); background: var(--pp-white); }
.pp-ds .pp-button--quiet { color: var(--pp-blue); background: transparent; border-color: transparent; text-decoration: underline; }
.pp-ds .pp-button:disabled { background: var(--pp-neutral); color: var(--pp-secondary); border-color: var(--pp-control-border); box-shadow: none; cursor: not-allowed; }
.pp-ds :where(.pp-field, .pp-search) label, .pp-ds .pp-search .wp-block-search__label { display: block; font-weight: 650; margin-block-end: 0.5rem; }
.pp-ds :where(.pp-field input, .pp-field select, .pp-field textarea, .pp-search input[type="search"], .pp-copy textarea) {
  inline-size: 100%; min-inline-size: 0; min-block-size: 2.875rem; padding: 0.75rem 0.9rem;
  border: 1px solid var(--pp-control-border); border-radius: var(--pp-radius-sm);
  background: var(--pp-white); color: var(--pp-ink); font: inherit; line-height: 1.5;
}
.pp-ds :where(.pp-field textarea, .pp-copy textarea) { resize: vertical; min-block-size: 8rem; }
.pp-ds .pp-field [aria-invalid="true"] { border: 2px solid var(--pp-danger-ink); }
.pp-ds .pp-field__hint { display: block; margin-block: 0.5rem 0; color: var(--pp-secondary); font-size: var(--pp-text-sm); }
.pp-ds .pp-field__error { color: var(--pp-danger-ink); font-weight: 650; }
.pp-ds .pp-search__row, .pp-ds .pp-search .wp-block-search__inside-wrapper { display: flex; flex-wrap: wrap; gap: 0.75rem; padding: 0; border: 0; }
.pp-ds .pp-search input[type="search"] { flex: 1 1 14rem; }
.pp-ds .pp-search .wp-block-search__button { margin: 0; }
.pp-ds .pp-search { max-inline-size: 42rem; }

/* 05 / Discovery: editorial composition, index rows, utility panels. */
.pp-ds .pp-hero { display: grid; align-items: center; gap: clamp(2rem, 4vw, 5rem); }
.pp-ds .pp-hero__title { max-inline-size: 17ch; font-size: var(--pp-text-h1); }
.pp-ds .pp-hero__art { position: relative; margin: 0; padding: clamp(1rem, 3vw, 2rem); border-radius: var(--pp-radius-lg); background: linear-gradient(140deg, var(--pp-soft), #e5efff); }
.pp-ds .pp-hero__art::before { content: ''; position: absolute; inset-inline-start: 1.5rem; inset-block-start: 0; inline-size: 3rem; block-size: 0.25rem; background: var(--pp-yellow); }
.pp-ds .pp-hero__art img { inline-size: 100%; max-block-size: 34rem; object-fit: contain; object-position: var(--pp-image-position, center); }
.pp-ds .pp-task-nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; padding: 0; list-style: none; }
.pp-ds .pp-task-nav li { margin: 0; }
.pp-ds .pp-task-nav a { display: inline-flex; align-items: center; min-block-size: 2.75rem; gap: 0.5rem; font-size: var(--pp-text-sm); font-weight: 600; }
.pp-ds .pp-topic { --pp-accent: var(--pp-blue); --pp-accent-ink: var(--pp-deep); border-block-start: 3px solid var(--pp-accent); padding: 1.5rem 0; }
.pp-ds .pp-topic--internet { --pp-accent: var(--pp-green); --pp-accent-ink: var(--pp-success-ink); }
.pp-ds .pp-topic--government { --pp-accent: var(--pp-blue); --pp-accent-ink: var(--pp-deep); }
.pp-ds .pp-topic--education { --pp-accent: var(--pp-orange); --pp-accent-ink: var(--pp-warning-ink); }
.pp-ds .pp-topic--tools { --pp-accent: var(--pp-purple); --pp-accent-ink: var(--pp-purple); }
.pp-ds .pp-topic--reference { --pp-accent: var(--pp-rose); --pp-accent-ink: #a71b4b; }
.pp-ds .pp-topic__number { display: block; color: var(--pp-accent-ink); font-size: var(--pp-text-sm); font-variant-numeric: tabular-nums; margin-block-end: 1.5rem; }
.pp-ds .pp-topic h3 a { color: var(--pp-ink); }
.pp-ds .pp-topic p { color: var(--pp-secondary); }
.pp-ds .pp-card { display: flex; flex-direction: column; gap: 0.75rem; padding: 1.5rem; border: 1px solid var(--pp-border); border-radius: var(--pp-radius-md); background: var(--pp-surface-raised); box-shadow: var(--pp-shadow-sm); }
.pp-ds .pp-card > :where(h3, p) { margin: 0; }
.pp-ds .pp-card > p { color: var(--pp-secondary); }
.pp-ds .pp-card__action { margin-block-start: auto; padding-block-start: 1rem; }
.pp-ds .pp-tool-card { border-block-start: 3px solid var(--pp-purple); background: linear-gradient(155deg, #faf8ff, var(--pp-white) 70%); }
.pp-ds .pp-tool-card__symbol { display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; border-radius: var(--pp-radius-sm); background: #eee7ff; color: #5621a5; font-size: 1.25rem; font-weight: 700; }
.pp-ds .pp-feature { display: grid; gap: 2rem; align-items: center; padding: clamp(1.25rem, 3vw, 3rem); background: var(--pp-soft); border-radius: var(--pp-radius-lg); }
.pp-ds .pp-feature__media { margin: 0; }
.pp-ds .pp-feature__media img { inline-size: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: var(--pp-image-position, center); border-radius: var(--pp-radius-md); }
.pp-ds .pp-process { display: grid; gap: 1.5rem; list-style: none; padding: 0; counter-reset: pp-process; }
.pp-ds .pp-process > li { margin: 0; padding-block-start: 1rem; border-block-start: 1px solid var(--pp-border); counter-increment: pp-process; }
.pp-ds .pp-process > li::before { content: '0' counter(pp-process); display: block; color: var(--pp-deep); font: 650 1rem var(--pp-font-heading); margin-block-end: 1rem; }
.pp-ds .pp-trust { padding-block: 1.5rem; border-block: 1px solid var(--pp-border); }
.pp-ds .pp-trust p { max-inline-size: 65ch; color: var(--pp-secondary); }
.pp-ds .pp-cta { padding: clamp(1.5rem, 4vw, 3.5rem); border-radius: var(--pp-radius-lg); background: var(--pp-deep); color: var(--pp-white); border-block-start: 4px solid var(--pp-yellow); }
.pp-ds .pp-cta :where(h2, h3, p) { color: inherit; }
.pp-ds .pp-cta .pp-eyebrow { color: var(--pp-yellow); }
.pp-ds .pp-cta a { color: var(--pp-white); }
.pp-ds .pp-cta .pp-button { background: var(--pp-white); border-color: var(--pp-white); color: var(--pp-deep); }
.pp-ds .pp-cta .pp-button:hover { background: var(--pp-soft); }
.pp-ds .pp-cta :focus-visible { outline-color: var(--pp-yellow); box-shadow: 0 0 0 3px var(--pp-deep); }

/* 06 / Comfortable guides and purposeful information treatments. */
.pp-ds .pp-guide { max-inline-size: var(--pp-width-reading); margin-inline: auto; }
.pp-ds .pp-guide > :where(h2, h3) { margin-block-start: 2.5rem; }
.pp-ds .pp-guide :where(p, li) { text-wrap: pretty; }
.pp-ds .pp-guide-layout { display: grid; gap: 3rem; align-items: start; }
.pp-ds .pp-guide-header { padding-block-end: 2rem; border-block-end: 1px solid var(--pp-border); margin-block-end: 2rem; }
.pp-ds .pp-callout { padding: 1.25rem 1.5rem; margin-block: 1.75rem; border-inline-start: 3px solid var(--pp-blue); background: var(--pp-soft); border-radius: 0 var(--pp-radius-sm) var(--pp-radius-sm) 0; }
.pp-ds .pp-callout > :last-child { margin-block-end: 0; }
.pp-ds .pp-callout__title { display: block; margin-block-end: 0.5rem; color: var(--pp-deep); font: 700 1.125rem/1.4 var(--pp-font-heading); }
.pp-ds .pp-quick-answer { border-inline-start-width: 4px; padding-block: 1.5rem; }
.pp-ds .pp-key-point { background: transparent; padding-block: 0.25rem; }
.pp-ds .pp-caution { background: #fff8e7; border-color: var(--pp-yellow); }
.pp-ds .pp-caution .pp-callout__title { color: var(--pp-warning-ink); }
.pp-ds .pp-documented { background: #effaf5; border-color: var(--pp-green); }
.pp-ds .pp-documented .pp-callout__title { color: var(--pp-success-ink); }
.pp-ds .pp-example { background: var(--pp-neutral); border-inline-start-style: dashed; border-color: var(--pp-control-border); }
.pp-ds .pp-owner-notice { background: var(--pp-neutral); border-color: var(--pp-control-border); }
.pp-ds .pp-privacy-notice { background: #fff4f4; border-color: var(--pp-red); }
.pp-ds .pp-privacy-notice .pp-callout__title { color: var(--pp-danger-ink); }
.pp-ds .pp-steps { list-style: none; padding: 0; counter-reset: pp-step; }
.pp-ds .pp-steps > li { position: relative; padding-block: 0 1.5rem; padding-inline: 3.25rem 0; margin: 0; counter-increment: pp-step; }
.pp-ds .pp-steps > li::before { content: counter(pp-step); position: absolute; inset-inline-start: 0; inset-block-start: 0; display: grid; place-items: center; inline-size: 2.25rem; block-size: 2.25rem; border: 1px solid var(--pp-border); border-radius: 50%; color: var(--pp-deep); font-weight: 700; background: var(--pp-soft); }
.pp-ds .pp-steps > li:not(:last-child)::after { content: ''; position: absolute; inset-inline-start: 1.1rem; inset-block: 2.65rem 0.4rem; border-inline-start: 1px solid var(--pp-border); }
.pp-ds .pp-problems { list-style: none; padding: 0; border-block-start: 1px solid var(--pp-border); }
.pp-ds .pp-problems li { margin: 0; border-block-end: 1px solid var(--pp-border); }
.pp-ds .pp-problems a { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 0; min-block-size: 2.75rem; font-weight: 650; }
.pp-ds .pp-route { padding-block: 1rem; border-block-end: 1px solid var(--pp-border); }
.pp-ds .pp-route summary { padding: 0.5rem; min-block-size: 2.75rem; cursor: pointer; color: var(--pp-deep); font-weight: 700; }
.pp-ds .pp-route[open] summary { margin-block-end: 1rem; }
.pp-ds .pp-route > :not(summary) { margin-inline: 0.5rem; }
.pp-ds .pp-checks { display: grid; gap: 1.5rem; margin-block: 1.75rem; }
.pp-ds .pp-checks__safe { border-block-start: 3px solid var(--pp-green); padding-block-start: 1rem; }
.pp-ds .pp-checks__avoid { border-block-start: 3px solid var(--pp-red); padding-block-start: 1rem; }
.pp-ds .pp-toc { padding: 1.25rem; background: var(--pp-neutral); border-radius: var(--pp-radius-sm); font-size: var(--pp-text-sm); }
.pp-ds .pp-toc a { display: block; padding-block: 0.4rem; min-block-size: 2.75rem; }
.pp-ds .pp-toc ol { margin-block-end: 0; padding-inline-start: 1rem; }
.pp-ds .pp-citation { display: inline; padding: 0.2em; font-size: 0.85em; font-weight: 650; white-space: nowrap; }
.pp-ds .pp-sources { margin-block-start: 3rem; padding-block-start: 1.5rem; border-block-start: 2px solid var(--pp-border); font-size: var(--pp-text-sm); }
.pp-ds .pp-sources li { padding: 0.5rem 0; }
.pp-ds .pp-sources li:target { background: var(--pp-soft); outline: 2px solid var(--pp-blue); outline-offset: 4px; }
.pp-ds .pp-copy { padding-block: 1.5rem; }
.pp-ds .pp-copy label { display: block; font-weight: 650; margin-block-end: 0.5rem; }
.pp-ds .pp-related { padding-block: 1.5rem; border-block: 1px solid var(--pp-border); }
.pp-ds .pp-next { padding: 1.5rem; background: var(--pp-soft); border-radius: var(--pp-radius-md); }
.pp-ds .pp-about-guide { padding-block: 1.5rem; border-block-start: 1px solid var(--pp-border); color: var(--pp-secondary); font-size: var(--pp-text-sm); }
.pp-ds .pp-about-guide dl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 0.5rem 1rem; }
.pp-ds .pp-about-guide dt { font-weight: 700; }
.pp-ds .pp-about-guide dd { margin: 0; }
.pp-ds .pp-tool-shell { padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--pp-border); border-block-start: 3px solid var(--pp-purple); border-radius: var(--pp-radius-md); box-shadow: var(--pp-shadow-md); background: var(--pp-white); }
.pp-ds .pp-tool-shell__result { padding: 1rem; background: var(--pp-neutral); border-radius: var(--pp-radius-sm); margin-block-start: 1.5rem; }

/* 07 / Semantic tables and media; overflow stays inside the component. */
.pp-ds .pp-table-scroll { inline-size: 100%; max-inline-size: 100%; min-inline-size: 0; overflow-x: auto; overscroll-behavior-inline: contain; margin-block: 1rem 2rem; border: 1px solid var(--pp-border); border-radius: var(--pp-radius-md); }
.pp-ds .pp-table { inline-size: 100%; min-inline-size: 38rem; border-collapse: collapse; margin: 0; font-size: var(--pp-text-sm); text-align: start; }
.pp-ds .pp-table caption { padding: 1rem; text-align: start; font-weight: 700; color: var(--pp-ink); background: var(--pp-white); }
.pp-ds .pp-table :where(th, td) { padding: 1rem; border: 0; border-block-end: 1px solid var(--pp-border); vertical-align: top; text-align: start; }
.pp-ds .pp-table thead th { background: var(--pp-soft); color: var(--pp-deep); font-weight: 700; }
.pp-ds .pp-table tbody th { font-weight: 650; }
.pp-ds .pp-table tbody tr:last-child > * { border-block-end: 0; }
.pp-ds .pp-table--data tbody tr:nth-child(even) { background: var(--pp-neutral); }
.pp-ds .pp-table--comparison tbody td { min-inline-size: 9rem; }
.pp-ds .pp-figure { margin: 2rem 0; }
.pp-ds .pp-figure img { margin-inline: auto; border-radius: var(--pp-radius-sm); }
.pp-ds .pp-figure--editorial img { inline-size: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: var(--pp-image-position, center); }
.pp-ds .pp-figure--screenshot img { inline-size: auto; max-block-size: 48rem; object-fit: contain; border: 1px solid var(--pp-border); box-shadow: var(--pp-shadow-sm); }
.pp-ds .pp-figure--diagram img { inline-size: 100%; object-fit: contain; }
.pp-ds .pp-caption, .pp-ds .pp-figure figcaption { margin-block-start: 0.75rem; color: var(--pp-secondary); font-size: var(--pp-text-sm); line-height: 1.6; }

/* 08 / Static pages, hubs, archives and search share the same foundation. */
.pp-ds .pp-page-header { padding-block: 2.5rem; border-block-end: 1px solid var(--pp-border); margin-block-end: 2rem; }
.pp-ds .pp-policy { max-inline-size: var(--pp-width-reading); margin-inline: auto; }
.pp-ds .pp-policy h2 { margin-block-start: 2.5rem; }
.pp-ds .pp-contact { display: grid; gap: 2rem; }
.pp-ds .pp-results { list-style: none; padding: 0; }
.pp-ds .pp-result { margin: 0; padding-block: 1.75rem; border-block-end: 1px solid var(--pp-border); }
.pp-ds .pp-result h2 { font-size: var(--pp-text-h3); }
.pp-ds .pp-result p { max-inline-size: 65ch; }
.pp-ds .pp-empty { max-inline-size: var(--pp-width-reading); padding-block: 3rem; }
.pp-ds .pp-empty__code { display: block; color: var(--pp-deep); font: 750 clamp(3rem, 10vw, 6rem)/1 var(--pp-font-heading); margin-block-end: 1.5rem; }
.pp-ds .pp-pagination { display: flex; flex-wrap: wrap; gap: 0.5rem; padding-block: 2rem; }
.pp-ds .pp-pagination :where(a, span) { display: grid; place-items: center; min-inline-size: 2.75rem; min-block-size: 2.75rem; padding: 0.5rem 0.75rem; border: 1px solid var(--pp-border); border-radius: var(--pp-radius-sm); }
.pp-ds .pp-pagination [aria-current="page"] { color: var(--pp-white); background: var(--pp-blue); border-color: var(--pp-blue); }

/* 09 / Responsive enhancements preserve document/keyboard order. */
@media (min-width: 40rem) {
  .pp-ds .pp-grid--2, .pp-ds .pp-checks, .pp-ds .pp-contact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-ds .pp-process { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 60rem) {
  .pp-ds .pp-hero { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .pp-ds .pp-hero--balanced { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-ds .pp-feature { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  .pp-ds .pp-guide-layout { grid-template-columns: minmax(0, 1fr) 15rem; }
  .pp-ds .pp-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 24rem) {
  .pp-ds { --pp-text-h2: 1.25rem; --pp-text-h3: 1.125rem; }
  .pp-ds .pp-search__row > .pp-button, .pp-ds .pp-search .wp-block-search__button { inline-size: 100%; }
  .pp-ds .pp-about-guide dl { grid-template-columns: minmax(0, 1fr); }
  .pp-ds .pp-about-guide dd { margin-block-end: 0.5rem; }
  .pp-ds .pp-callout { padding-inline: 1rem; }
  .pp-ds .pp-toc { padding: 0.5rem; }
  .pp-ds .pp-feature { padding: 0.5rem; }
  .pp-ds .pp-feature .pp-lead { font-size: 1rem; }
  .pp-ds .pp-steps > li { padding-inline-start: 2rem; }
  .pp-ds .pp-steps > li::before { inline-size: 1.5rem; block-size: 1.5rem; font-size: 0.875rem; }
  .pp-ds .pp-steps > li:not(:last-child)::after { inset-inline-start: 0.7rem; inset-block-start: 1.9rem; }
}
@media (prefers-reduced-motion: reduce) {
  .pp-ds .pp-button, .pp-ds .pp-search .wp-block-search__button { transition: none; }
}
@media (forced-colors: active) {
  .pp-ds :where(.pp-card, .pp-callout, .pp-tool-shell, .pp-cta, .pp-hero__art) { border: 1px solid CanvasText; }
  .pp-ds :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline-color: Highlight; }
}
@media print {
  .pp-ds { color: #000; background: #fff; }
  .pp-ds :where(.pp-section, .pp-hero__art, .pp-callout, .pp-cta, .pp-card, .pp-tool-shell) { background: #fff; color: #000; box-shadow: none; }
  .pp-ds .pp-table-scroll { overflow: visible; }
  .pp-ds .pp-table { min-inline-size: 0; font-size: 0.75rem; }
  .pp-ds .pp-table :where(th, td) { padding: 0.4rem; }
  .pp-ds :where(h2, h3) { break-after: avoid; }
  .pp-ds :where(figure, .pp-callout) { break-inside: avoid; }
  .pp-ds .pp-cta a { color: #000; }
}