/* ==========================================================================
   Prodaff — inner-page content styles
   --------------------------------------------------------------------------
   Loaded alongside site.css on every generated inner page. Reuses the same
   design tokens (colors, radii, shadows, type) so inner pages read as part
   of the same system as the homepage, without touching site.css itself.
   ========================================================================== */

/* Inner pages have no dark hero band under the header, so the header should
   always read in its solid "scrolled past the hero" state (site.js still
   toggles the literal .is-stuck class on scroll -- this just makes the
   default/unstuck look identical to it on pages that never need to be
   transparent). */
body.pd-inner .pd-header {
  background: rgba(255,255,255,0.92);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom-color: var(--line);
  box-shadow: 0 6px 24px -18px rgba(11,16,32,0.5);
}
body.pd-inner .pd-logo__light { display: none; }
body.pd-inner .pd-logo__dark  { display: block; }
body.pd-inner .pd-nav__link { color: var(--text-mid); }
body.pd-inner .pd-nav__link:hover { color: var(--blue); background: var(--blue-soft); }
body.pd-inner .pd-header__cta .pd-btn--outline { background: #fff; border-color: var(--line); color: var(--text); }
body.pd-inner .pd-header__cta .pd-btn--outline:hover { background: var(--blue-soft); color: var(--blue); }
body.pd-inner .pd-burger { border-color: var(--line); background: #fff; }
body.pd-inner .pd-burger span { background: var(--text); }

/* The always-on backdrop-filter on .pd-header just above makes the header
   establish a new containing block for its own fixed-position descendants
   (per spec, backdrop-filter/filter/transform on an ancestor do this) --
   .pd-mobile is nested inside <header> and is itself `position: fixed` with
   `inset: var(--nav-h) 0 0 0`, so its "bottom: 0" was resolving against the
   header's own ~74px-tall box instead of the viewport, collapsing the open
   mobile menu sheet to a sliver a few pixels tall instead of a full-height
   scrollable panel. site.css never hits this on the homepage since there
   .pd-header only ever gets backdrop-filter once the user has scrolled past
   the hero (.is-stuck) -- on inner pages it's unconditional. Giving the
   panel an explicit viewport-relative height sidesteps the containing-block
   substitution regardless of which box ends up being the actual one. */
body.pd-inner .pd-mobile {
  top: var(--nav-h);
  bottom: auto;
  height: calc(100vh - var(--nav-h));
}

/* breadcrumb */
.pd-crumb { display: flex; align-items: center; gap: 0.4rem; margin: 0 0 1rem;
  font-size: 0.8rem; font-weight: 600; color: var(--text-muted); }
.pd-crumb a { color: var(--text-muted); text-decoration: none; }
.pd-crumb a:hover { color: var(--blue); }
.pd-crumb span[aria-hidden] { opacity: 0.5; }
.pd-crumb b { color: var(--text-mid); font-weight: 600; }

/* page hero band -- contains its own decorative layers (faint dot field +
   slow-drifting aurora blobs, reusing the homepage's own .pd-aurora
   component) so every inner page opens with the same sense of motion and
   depth as the homepage hero, instead of a flat static band. */
.pd-pagehero {
  position: relative; overflow: hidden; isolation: isolate;
  padding-top: calc(var(--nav-h) + var(--pad-y) * 0.55); padding-bottom: var(--pad-y);
}
.pd-pagehero .pd-aurora span { opacity: 0.3; }
.pd-pagehero .pd-aurora span:nth-child(3) { display: none; }
.pd-pagehero__cta { margin-top: 1.6rem; display: flex; gap: 0.8rem; flex-wrap: wrap; }
.pd-pagehero__shot { margin-top: 2.5rem; border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow-lg); border: 1px solid var(--line); }
.pd-pagehero__shot img { width: 100%; }

/* two-column hero layout -- copy/CTA on the left, a decorative "product
   card" mockup on the right, instead of one flat centered text band. The
   card is pure CSS (dot-chrome + skeleton bars + a floating check chip,
   reusing the same icon language as .pd-checklist/.pd-audience elsewhere)
   since extract_hero deliberately never lifts a real content screenshot up
   here -- this way every page gets the same dynamic, product-forward
   opening regardless of what its source content happens to contain. */
.pd-pagehero__grid {
  display: grid; grid-template-columns: 1.15fr 0.85fr; align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}
.pd-pagehero__art { position: relative; }
.pd-pagehero__art-ring {
  position: absolute; inset: -20% -8%; z-index: -1;
  background: radial-gradient(55% 55% at 50% 45%, rgba(3,79,244,0.20), transparent 72%);
}

/* Real product screenshot in the page hero (see build.py's inner-page
   generator) -- replaces the old placeholder "browser mockup" card (dot
   chrome + skeleton bars + a floating check chip) with the page's own real
   dashboard screenshot, reusing the same soft "matte" frame already used
   for in-body screenshots elsewhere (.pd-shot-frame) so the hero visual
   reads as an actual product shot instead of a generic decoration. */
.pd-pagehero__art--shot .pd-shot-frame {
  box-shadow: var(--shadow-lg);
}
.pd-pagehero__art--shot .pd-shot-frame img {
  width: 100%; height: auto; display: block;
}
.pd-pagehero__art-card {
  position: relative; margin-inline: auto; max-width: 360px;
  padding: 1.35rem 1.5rem 1.75rem; border-radius: var(--r-lg);
  background: rgba(255,255,255,0.78); border: 1px solid rgba(255,255,255,0.7);
  box-shadow: var(--shadow-lg);
  -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
}
.pd-pagehero__art-card::after {
  content: ""; position: absolute; z-index: -1; inset: 16px -16px -16px 16px;
  border-radius: var(--r-lg); border: 1px solid var(--line);
  background: linear-gradient(160deg, var(--blue-soft), transparent);
}
.pd-pagehero__art-dots { display: flex; gap: 6px; margin-bottom: 1.25rem; }
.pd-pagehero__art-dots span { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.pd-pagehero__art-dots span:nth-child(1) { background: #f4a63b; }
.pd-pagehero__art-dots span:nth-child(2) { background: #38c172; }
.pd-pagehero__art-bars { display: grid; gap: 0.7rem; }
.pd-pagehero__art-bars i {
  display: block; height: 12px; border-radius: 6px;
  background: linear-gradient(90deg, var(--bg-tint), var(--blue-soft));
}
.pd-pagehero__art-bars i:nth-child(1) { width: 88%; }
.pd-pagehero__art-bars i:nth-child(2) { width: 62%; }
.pd-pagehero__art-bars i:nth-child(3) { width: 74%; }
.pd-pagehero__art-bars i:nth-child(4) { width: 46%; background: linear-gradient(90deg, var(--blue), var(--indigo)); }
.pd-pagehero__art-chip {
  position: absolute; right: -16px; bottom: -16px; display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 14px; color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--indigo));
  box-shadow: 0 14px 28px -10px rgba(3,79,244,0.55);
}
.pd-pagehero__art-chip svg { width: 22px; height: 22px; }
@media (max-width: 900px) {
  .pd-pagehero__grid { grid-template-columns: 1fr; }
  .pd-pagehero__art { display: none; }
}

/* blog post hero -- unlike the product pages above (which have no real
   screenshot to show and fall back to the CSS-only mockup), every post has
   a genuine featured image plus author/date metadata already sitting in the
   blog listing data. Surfacing that here, instead of the generic mockup
   card, is what actually identifies the page as a specific article rather
   than another feature page. */
.pd-post-meta__hero {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem;
  margin: 0 0 0.9rem; font-size: 0.85rem; font-weight: 600; color: var(--text-muted);
}
.pd-post-meta__hero span[aria-hidden] { opacity: 0.5; }
.pd-post-meta__hero b { color: var(--text-mid); }

.pd-pagehero__art--photo {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow-lg); border: 1px solid var(--line);
  aspect-ratio: 4 / 3;
}
.pd-pagehero__art--photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
@media (max-width: 900px) {
  .pd-pagehero__art--photo { display: block; aspect-ratio: 16 / 9; margin-top: 1.75rem; }
}

/* prose content */
.pd-prose { max-width: 74ch; }
.pd-prose--wide { max-width: none; }
.pd-prose h2 { margin: 2.6rem 0 1rem; font-size: clamp(1.4rem, 2.6vw, 1.85rem);
  font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; color: var(--text); }
.pd-prose h2:first-child { margin-top: 0; }
.pd-prose h3 { margin: 1.8rem 0 0.7rem; font-size: 1.2rem; font-weight: 750; color: var(--text); }
.pd-prose h4 { margin: 1.4rem 0 0.5rem; font-size: 1rem; font-weight: 700; color: var(--blue);
  text-transform: uppercase; letter-spacing: 0.06em; }
.pd-prose h5 { margin: 0 0 0.25rem; font-size: 1rem; font-weight: 750; color: var(--text); }
.pd-prose p { margin: 0 0 1.1rem; color: var(--text-mid); font-size: 1rem; line-height: 1.75; }
.pd-prose ul, .pd-prose ol { margin: 0 0 1.4rem; padding: 0; list-style: none; display: grid; gap: 0.65rem; }
.pd-prose ul li, .pd-prose ol li { display: flex; gap: 0.65rem; font-size: 0.975rem; line-height: 1.6; color: var(--text-mid); }
.pd-prose ul li::before {
  content: ""; flex: none; width: 18px; height: 18px; margin-top: 3px; border-radius: 50%;
  background: var(--bg-tint); background-image: linear-gradient(135deg, var(--blue), var(--indigo));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center/12px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center/12px no-repeat;
}
.pd-prose ol { counter-reset: pd-ol; }
.pd-prose ol li::before { content: counter(pd-ol); counter-increment: pd-ol; background-image: none;
  background: var(--blue); -webkit-mask: none; mask: none; color: #fff; font-size: 0.7rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; }
.pd-prose a { color: var(--blue); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.pd-prose blockquote { margin: 1.6rem 0; padding: 1.25rem 1.5rem; border-left: 3px solid var(--blue);
  background: var(--bg-alt); border-radius: 0 var(--r-sm) var(--r-sm) 0; color: var(--text-mid);
  font-size: 1.0625rem; line-height: 1.65; font-style: italic; }
.pd-prose figure { margin: 1.6rem 0; }
.pd-prose img { border-radius: var(--r); border: 1px solid var(--line); max-height: 560px; object-fit: contain; background: var(--bg-alt); }
.pd-prose figcaption { margin-top: 0.6rem; font-size: 0.82rem; color: var(--text-muted); text-align: center; }

/* plain feature/benefit checklist sitting directly in the prose column
   (see render_list) -- was a single thin column of gradient-circle-mask
   bullets; each item now sits in its own soft tile with a real check-mark
   chip and a hover lift, and 2+ items lay out in a responsive grid instead
   of one long stacked list, so a run of 5-8 bullet points reads as a
   considered block instead of a wall of bare text. */
.pd-prose ul.pd-checklist {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0.65rem; margin: 0 0 1.5rem;
}
.pd-prose ul.pd-checklist li {
  align-items: flex-start; padding: 0.7rem 0.9rem; border-radius: var(--r);
  background: var(--bg-alt); border: 1px solid var(--line-soft);
  font-size: 0.9rem; color: var(--text-mid);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease),
              border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.pd-prose ul.pd-checklist li:hover {
  transform: translateY(-2px); box-shadow: var(--shadow-sm); border-color: #cfdcf6; background: #fff;
}
.pd-prose ul.pd-checklist li::before { content: none; }
.pd-prose ul.pd-checklist li > svg {
  flex: none; width: 20px; height: 20px; padding: 3px; margin-top: 1px;
  border-radius: 50%; color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--indigo));
  box-shadow: 0 4px 10px -4px rgba(3,79,244,0.55);
}

/* "For Managers" / "For Employees" style audience callouts (see
   group_audience_callouts) -- previously an inert one-item bullet list
   (just the label) directly followed by a bare paragraph, with no visual
   relationship between the two. Merged into a proper card with an icon,
   and 2+ consecutive callouts sit side by side instead of stacking. */
.pd-audience-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.1rem; margin: 0.4rem 0 1.75rem;
}
.pd-audience {
  padding: 1.35rem 1.4rem; border-radius: var(--r-lg); background: #fff;
  border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.pd-audience:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: #cfdcf6; }
.pd-audience__icon {
  display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 0.9rem;
  border-radius: 12px; background: linear-gradient(150deg, var(--blue-lift), var(--indigo));
  color: #fff; box-shadow: 0 8px 18px -8px rgba(3, 79, 244, 0.5);
}
.pd-audience__icon svg { width: 20px; height: 20px; }
.pd-prose .pd-audience h4 {
  margin: 0 0 0.4rem; font-size: 0.95rem; font-weight: 800;
  color: var(--text); text-transform: none; letter-spacing: -0.01em;
}
.pd-audience p { margin: 0; font-size: 0.875rem; color: var(--text-mid); line-height: 1.6; }

/* comparison tables lifted out of Word-pasted content */
.pd-table-wrap { margin: 1.6rem 0 2rem; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); }
.pd-table { width: 100%; border-collapse: collapse; font-size: 0.925rem; }
.pd-table th, .pd-table td { padding: 0.8rem 1.1rem; text-align: left; border-bottom: 1px solid var(--line-soft); }
.pd-table th { background: var(--bg-alt); font-weight: 700; color: var(--text); }
.pd-table tr:last-child td { border-bottom: none; }
.pd-table td { color: var(--text-mid); }

/* Every comparison table here follows the same shape: a left-aligned
   "Feature" label column, then one plan/product column per remaining
   column (yes/no check-pills, or short badges). Those pill columns were
   inheriting the label column's left alignment, so every pill sat flush
   against the left edge of its column instead of sitting under its
   "Starter" / "Prodaff" / etc. header -- center them (headers included, so
   the header text lines up over the pills below it). */
.pd-table th:not(:first-child),
.pd-table td:not(:first-child) { text-align: center; }
.pd-table td:not(:first-child) .pd-check-pill { margin-inline: auto; }
.pd-th-badge { display: inline-block; vertical-align: middle; }

/* A .pd-btn that ends up nested inside a .pd-prose paragraph (e.g. a
   standalone CTA link pulled from Word-pasted content, as on the pricing
   and FAQ pages) was losing its intended button styling to the more
   specific `.pd-prose a` link rule above (blue underlined text instead of
   a solid white-on-blue button). */
.pd-prose a.pd-btn { text-decoration: none; font-weight: 600; }
.pd-prose a.pd-btn.pd-btn--primary { color: #fff; }
.pd-prose a.pd-btn.pd-btn--outline { color: var(--text); }

/* card grid (feature / step / benefit boxes) */
.pd-cardgrid { display: grid; gap: 1.25rem; margin: 0.5rem 0 2rem;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.pd-cardgrid .pd-card { height: 100%; display: flex; flex-direction: column; }
.pd-cardgrid .pd-card img { width: 44px; height: 44px; object-fit: contain; margin-bottom: 0.9rem; border: none; border-radius: 0; }

/* numbered step badge ("01", "02"...) pulled out of a plain paragraph and
   given the same colored tile treatment as the homepage's numbered
   why-choose-us list, instead of rendering as an undifferentiated line
   of body text sitting above the card copy. */
.pd-card__step {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin-bottom: 1.1rem; flex: none;
  border-radius: 12px; background: linear-gradient(150deg, var(--blue-lift), var(--indigo));
  color: #fff; font-size: 0.95rem; font-weight: 800; letter-spacing: -0.02em;
  box-shadow: 0 8px 18px -8px rgba(3,79,244,0.55);
}

/* check-mark list nested inside a cardgrid card -- mirrors the homepage's
   own .pd-checks treatment so feature bullets read as a clean checklist
   instead of falling back to unstyled browser-default bullet dots. */
.pd-card__checks { margin: 0.85rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.55rem; }
.pd-card__checks li { display: flex; gap: 0.6rem; font-size: 0.875rem; line-height: 1.55; color: var(--text-mid); }
.pd-card__checks svg { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--blue); }
.pd-card > p:last-child, .pd-card > .pd-card__checks:last-child { margin-bottom: 0; }
.pd-card > p { margin: 0 0 0.35rem; }

/* use-case cards -- lifted to match the homepage card treatment (white
   surface, hairline border, hover elevation) with a small numbered tag
   instead of a flat tinted box. */
.pd-usecases { margin: 0 0 2rem; padding: 0; list-style: none; display: grid; gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.pd-usecases li {
  padding: 1.4rem 1.35rem; border: 1px solid var(--line); border-radius: var(--r);
  background: #fff; box-shadow: var(--shadow-sm);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.pd-usecases li:hover { transform: translateY(-4px); border-color: #cfdcf6; box-shadow: var(--shadow); }
.pd-usecases__n {
  display: inline-block; margin-bottom: 0.7rem; padding: 0.25rem 0.55rem;
  border-radius: var(--r-pill); background: var(--blue-soft); color: var(--blue);
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em;
}
.pd-usecases h5 { margin: 0 0 0.35rem; font-size: 0.975rem; font-weight: 750; color: var(--text); }
.pd-usecases p { margin: 0; font-size: 0.875rem; color: var(--text-mid); line-height: 1.55; }

/* text+screenshot split section (see render_section_body) -- the image
   sits in the homepage's own .pd-figure frame, but needs an explicit fluid
   width since inner-page source screenshots come in with hard-coded
   intrinsic width/height attributes that would otherwise render at native
   pixel size and overflow (or under-fill) the split column. */
body.pd-inner .pd-figure img { width: 100%; height: auto; display: block; }

/* Inner-page text+screenshot splits are frequently a short (1-3 line)
   paragraph next to a screenshot that is a near-perfect square (source
   assets across this corpus are overwhelmingly 751x751). Two problems
   compound here:
   1. The shared .pd-split component top-aligns its columns (align-items:
      start) by default -- fine when both columns run a similar length,
      but it strands a short paragraph at the top of an otherwise-empty
      column next to a much taller image.
   2. Stretching that square image to fill the *entire* ~530-550px grid
      column (the .pd-figure img width:100% rule above) makes the image
      column roughly as tall as it is wide -- turning a two-line paragraph
      into a section that's 500+px tall, which reads as broken/empty no
      matter how the short column is aligned internally.
   Centering the columns (#1) plus capping how wide -- and therefore how
   tall -- the screenshot itself is allowed to render (#2) fixes both at
   once: the section becomes a normal, proportionate height, and the short
   copy sits centered beside a reasonably sized image instead of a
   room-filling one. */
body.pd-inner .pd-split { align-items: center; }
body.pd-inner .pd-split .pd-figure {
  max-width: 420px; width: 100%; margin-inline: auto;
}
@media (max-width: 720px) {
  body.pd-inner .pd-split .pd-figure { max-width: 380px; }
}

/* The client's real Prodaff 2.0 product screenshots (served from
   dist/assets/screenshots/, unlike the legacy near-square scraped assets
   above) are wide ~2:1 dashboard shots dense with small UI text and
   numbers -- the compact ~420px half-column above (tuned for the old
   near-square assets) reads as an illegible thumbnail for these. These
   splits get a wider two-column layout instead: heading + info table on
   the left, the screenshot at a generous size on the right (DOM order
   already puts content first, image second, so no reordering is needed --
   just widen the image's column). Scoped by the .pd-shot-frame wrapper
   (see build.py's swap_content_image) so legacy, non-swapped pages keep
   the original compact split above. */
body.pd-inner .pd-split:has(.pd-shot-frame) {
  grid-template-columns: 1fr 1.35fr;
  gap: clamp(1.5rem, 3vw, 2.25rem);
  /* Top-align rather than center -- the info table (see restyle_intro_table)
     is taller than the screenshot, and centering pushed the image down so
     its top no longer lined up with the heading above the table, reading
     as misaligned. Top-aligning keeps the image flush with the heading;
     the shorter image now just leaves quiet space below itself, which is
     the correct side for that gap to fall on. */
  align-items: start;
}
body.pd-inner .pd-split:has(.pd-shot-frame) > .pd-figure {
  max-width: none;
  width: 100%;
}
@media (max-width: 1080px) {
  body.pd-inner .pd-split:has(.pd-shot-frame) {
    grid-template-columns: 1fr;
  }
}

/* Soft "matte" frame around the real product screenshots -- a padded,
   tinted box around a plain photo (per the client's reference layout),
   rather than a mocked-up browser window. */
body.pd-inner .pd-shot-frame {
  display: block;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--bg-alt);
}
body.pd-inner .pd-shot-frame img {
  width: 100%; height: auto; display: block;
  border-radius: 8px;
}

/* Two-tone intro panel (see build.py's restyle_intro_panel) -- a dark
   content half (heading, plain dot-bullet list, "Book a demo" button) and
   a light half holding the screenshot, both inside one seamless rounded
   card. Per the client's reference layout (dark "Timeline view" panel
   beside a product screenshot card). Overrides the plainer :has(.pd-shot-
   frame) split above -- same specificity, later in the file, so it wins;
   see that rule's comment for why the *un*-panelled split still needs to
   exist for pages that don't get this treatment. */
/* Standalone heading block above the panel (see build.py's
   restyle_intro_panel) -- plain page-heading styling, not the dark panel's
   white-on-ink treatment, since it now sits on the light page background. */
body.pd-inner .pd-intro__heading {
  margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}

body.pd-inner .pd-split.pd-intropanel {
  /* Content column stays compact (it's now just a short bullet list + a
     button, no heading) and the image column gets more of the row so the
     screenshot reads larger. */
  grid-template-columns: 0.9fr 1.5fr;
  align-items: stretch;
  gap: 0;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
body.pd-inner .pd-intropanel__dark {
  background: var(--ink);
  color: var(--d-text);
  padding: clamp(1.75rem, 3.5vw, 2.5rem);
  display: flex; flex-direction: column; justify-content: center;
}
body.pd-inner .pd-intropanel__list {
  margin: 0 0 1.5rem; padding: 0; list-style: none;
  display: grid; gap: 0.55rem;
}
body.pd-inner .pd-intropanel__list li {
  /* Smaller than the page's usual body copy -- with the heading gone this
     column is lighter content, so a smaller size keeps it visually
     balanced against the now-larger image column instead of looking
     oversized/empty. */
  position: relative; padding-left: 1.05rem;
  font-size: 0.8125rem; line-height: 1.55; color: var(--d-soft);
}
body.pd-inner .pd-intropanel__list li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--blue-lift);
}
body.pd-inner .pd-intropanel__list strong { color: #fff; }
body.pd-inner .pd-intropanel__cta { align-self: flex-start; }
body.pd-inner .pd-intropanel__light {
  background: var(--bg-alt);
  /* Less padding than before so the screenshot itself occupies more of the
     column -- combined with the wider column track above, this is what
     makes the image read as noticeably larger. */
  padding: clamp(1rem, 2vw, 1.5rem);
  display: flex; align-items: center; justify-content: center;
}
body.pd-inner .pd-intropanel__light .pd-figure { max-width: none; width: 100%; }
body.pd-inner .pd-intropanel__light .pd-shot-frame { background: #fff; box-shadow: var(--shadow-sm); }
@media (max-width: 1080px) {
  body.pd-inner .pd-split.pd-intropanel { grid-template-columns: 1fr; }
  body.pd-inner .pd-intropanel__dark { padding-bottom: 1.75rem; }
}

/* Label/value info table replacing the checklist + audience cards next to
   the real screenshots (see build.py's restyle_intro_table) -- a compact
   card with a tinted label column and a plain value column, echoing the
   client's reference layout (Company Stage / Business Profile / ...). */
body.pd-inner .pd-infotable {
  margin-top: 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #fff;
}
body.pd-inner .pd-infotable__row {
  display: grid;
  grid-template-columns: minmax(130px, 0.85fr) 1.15fr;
  border-top: 1px solid var(--line);
}
body.pd-inner .pd-infotable__row:first-child { border-top: none; }
body.pd-inner .pd-infotable__label {
  padding: 1rem 1.1rem;
  background: var(--bg-alt);
  border-right: 1px solid var(--line);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text);
}
body.pd-inner .pd-infotable__value {
  padding: 1rem 1.1rem;
  font-size: 0.9rem;
  color: var(--text-mid);
  line-height: 1.6;
}
body.pd-inner .pd-infotable__value p { margin: 0; }
body.pd-inner .pd-infotable__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.45rem; }
body.pd-inner .pd-infotable__list li { position: relative; padding-left: 1rem; }
body.pd-inner .pd-infotable__list li::before { content: "\2022"; position: absolute; left: 0; color: var(--blue); }
@media (max-width: 640px) {
  body.pd-inner .pd-infotable__row { grid-template-columns: 1fr; }
  body.pd-inner .pd-infotable__label { border-right: none; border-bottom: 1px solid var(--line); }
}

@media (max-width: 720px) {
  body.pd-inner .pd-split:has(.pd-shot-frame) .pd-figure { max-width: 100%; }
}

/* card carousel -- used instead of a wrapping grid once a cardgrid has 5+
   cards, since a wrapping grid can't guarantee every row fills evenly at
   every viewport width (that's what produced a lone orphaned card sitting
   by itself on the last row). A horizontal, snap-scrolling track never
   leaves a partial row. */
.pd-carousel { margin: 0.5rem 0 2rem; }
.pd-carousel__track {
  display: flex; gap: 1.25rem; margin: 0 -0.15rem; padding: 0.15rem 0.15rem 0.9rem;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.pd-carousel__track::-webkit-scrollbar { display: none; }
.pd-carousel__track.pd-usecases { margin: 0; }
.pd-carousel__track > .pd-card,
.pd-carousel__track > li {
  flex: 0 0 min(280px, 82vw); scroll-snap-align: start;
}
@media (min-width: 720px) {
  .pd-carousel__track > .pd-card,
  .pd-carousel__track > li { flex-basis: calc((100% - 1.25rem * 2) / 3); }
}
.pd-carousel__nav { display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 0.25rem; }
.pd-carousel__btn {
  display: grid; place-items: center; width: 42px; height: 42px; flex: none;
  border-radius: 50%; border: 1px solid var(--line); background: #fff;
  color: var(--text-mid); cursor: pointer; transition: 0.2s var(--ease);
}
.pd-carousel__btn:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-soft); }
.pd-carousel__btn svg { width: 16px; height: 16px; }
.pd-carousel__btn:disabled { opacity: 0.35; cursor: default; pointer-events: none; }

/* comparison-table section given its own tinted, textured panel instead of
   sitting as a bare table directly on the page background. */
.pd-table-panel {
  position: relative; overflow: hidden; isolation: isolate;
  padding: clamp(1.1rem, 3vw, 1.75rem); border-radius: var(--r-lg);
  background: linear-gradient(165deg, var(--blue-soft) 0%, #fff 55%);
  border: 1px solid var(--line);
}
.pd-table-panel .pd-deco__grid { opacity: 0.7; }
.pd-table-panel .pd-table-wrap { border-color: rgba(3,79,244,0.12); background: #fff; }

/* comparison-table yes/no pill badges (replaces raw ✅/❌ emoji, which
   renders inconsistently across platforms) */
.pd-check-pill {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.3rem 0.7rem; border-radius: var(--r-pill);
  font-size: 0.8125rem; font-weight: 700; white-space: nowrap;
}
.pd-check-pill svg { width: 13px; height: 13px; flex: none; }
.pd-check-pill--yes  { background: rgba(16,163,74,0.1); color: #0f9d58; }
.pd-check-pill--no   { background: rgba(220,38,38,0.08); color: #dc2626; }
.pd-check-pill--warn { background: rgba(217,119,6,0.12); color: #b45309; }
.pd-table tbody tr:hover td { background: var(--bg-tint); }

/* small badge on a table column header (e.g. pricing table's "Grow" column
   marked with a separate "Popular" tag) */
.pd-th-badge {
  display: inline-block; margin-left: 0.3rem; padding: 0.12rem 0.5rem;
  border-radius: var(--r-pill); background: var(--blue-soft); color: var(--blue);
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.03em; vertical-align: 1px;
}

/* a bare emoji glyph appearing anywhere else in a table cell (e.g. a
   header label like "Prodaff ✅") -- a small inline icon, no pill. */
.pd-cell-ico { display: inline-flex; vertical-align: -2px; margin-left: 0.3rem; }
.pd-cell-ico svg { width: 14px; height: 14px; }
.pd-cell-ico--yes  { color: #0f9d58; }
.pd-cell-ico--no   { color: #dc2626; }
.pd-cell-ico--warn { color: #b45309; }

/* raw "Follow Us" icon links (contact page) -- alias onto the homepage's
   own .pd-social treatment instead of inheriting the generic checklist
   bullet styling (and instead of the bare <svg> collapsing to 0x0 with no
   width/height of its own). */
.pd-prose .social-link { display: flex; gap: 0.55rem; list-style: none; padding: 0; margin: 0.5rem 0 0; }
.pd-prose .social-link li::before { display: none; }
.pd-prose .social-link li { display: block; }
.pd-prose .social-link a {
  display: grid; place-items: center; width: 24px; height: 24px;
  border: 1px solid var(--line); border-radius: 11px; color: var(--text-mid);
  transition: 0.22s var(--ease);
}
.pd-prose .social-link a:hover { border-color: var(--blue); background: var(--blue); color: #fff; }
.pd-prose .social-link svg { width: 16px; height: 16px; fill: currentColor; }

/* author / meta byline for blog posts */
.pd-byline { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 1.6rem;
  color: var(--text-muted); font-size: 0.85rem; }

/* blog listing grid (index / pagination / author archive pages) */
.pd-postgrid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); margin: 0 0 2.5rem; }
.pd-post__excerpt { margin: -0.6rem 0 1.1rem; color: var(--text-mid); font-size: 0.875rem; line-height: 1.6; }

/* pricing tabs (Monthly / Quarterly / Yearly) */
.pd-pricetabs__nav { display: flex; justify-content: center; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 2rem; }
.pd-pricetabs__nav .pd-tab { width: auto; }
.pd-pricegrid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.pd-price-card { position: relative; padding: 2rem 1.75rem; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: #fff; box-shadow: var(--shadow-sm); }
.pd-price-card--popular { border-color: var(--blue); box-shadow: var(--shadow); }
.pd-price-card__badge { position: absolute; top: -13px; left: 1.75rem; padding: 0.3rem 0.8rem; border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--blue), var(--indigo)); color: #fff; font-size: 0.72rem; font-weight: 700; }
.pd-price-card h3 { margin: 0.4rem 0 0.35rem; font-size: 1.15rem; font-weight: 800; }
.pd-price-card__desc { margin: 0 0 1.25rem; color: var(--text-mid); font-size: 0.875rem; }
.pd-price-card__amount { margin: 0 0 1.4rem; font-size: 2.25rem; font-weight: 800; color: var(--text); }
.pd-price-card__amount sup { font-size: 1.1rem; font-weight: 700; vertical-align: 4px; }
.pd-price-card__amount sub { font-size: 0.7rem; font-weight: 600; color: var(--text-muted); vertical-align: 2px; }
/* "Contact us" style plan (no numeric price) -- reset the inherited big
   number styling down to a normal heading + caption pairing. */
.pd-price-card__amount .price-contact { display: block; font-size: 1.3rem; font-weight: 800; }
.pd-price-card__amount .price-contact-sub { margin: 0.4rem 0 0; font-size: 0.8125rem; font-weight: 500; color: var(--text-muted); }
.pd-price-card .pd-checks { margin-bottom: 1.6rem; }
.pd-price-card .pd-checks li::before {
  content: ""; flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%;
  background-image: linear-gradient(135deg, var(--blue), var(--indigo));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center/12px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center/12px no-repeat;
}
.pd-price-card .pd-btn { width: 100%; justify-content: center; }

/* FAQ accordion -- on the homepage the FAQ section sits amid many other
   rich sections so a bare list of rows works. Every inner-page body section
   is now its own elevated white card (see the section-card layout below),
   so the FAQ list gets a quieter *inset* tinted panel instead of a second
   nested white card-on-a-card. */
body.pd-inner .pd-faq {
  margin-top: 1.5rem; padding: 0.25rem clamp(1.1rem, 4vw, 2.25rem) 0.5rem;
  background: var(--bg-alt); border: 1px solid var(--line-soft); border-radius: var(--r-lg);
}

/* simple pagination row */
.pd-pagenav { display: flex; justify-content: center; gap: 0.6rem; margin-top: 1rem; }
.pd-pagenav a, .pd-pagenav span { display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 0.9rem; border-radius: var(--r-sm); border: 1px solid var(--line);
  font-weight: 700; font-size: 0.875rem; color: var(--text-mid); text-decoration: none; }
.pd-pagenav a:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-soft); }
.pd-pagenav .is-current { background: var(--blue); border-color: var(--blue); color: #fff; }

@media (max-width: 720px) {
  .pd-pagehero { padding-top: calc(var(--nav-h) + var(--pad-y) * 0.4); }
}

/* ==========================================================================
   Intro section -- the first content section directly under the page hero
   (see render_body_sections). Previously this was a completely undecorated
   .pd-section, which read as a flat gap between the rich animated hero and
   the rest of the page's styled sections. Gets its own quieter "overview"
   identity here: a soft dot-field instead of an orb, a small kicker label
   when the source gave it no heading of its own, a bigger/emphasized lede
   treatment for bare intro copy, and a glowing frame around its screenshot
   when the intro pairs one with text.
   ========================================================================== */
.pd-intro { padding-top: clamp(2.75rem, 6vw, 4rem); }
.pd-intro .pd-deco__dots { opacity: 0.6; }

/* bare intro paragraph with no heading and no paired screenshot -- read as
   a short centered statement instead of a plain left-aligned body graf. */
.pd-intro > .pd-shell > .pd-intro__statement {
  max-width: 66ch; margin: 0 auto; text-align: center; position: relative;
}
.pd-intro > .pd-shell > .pd-intro__statement::before {
  content: ""; display: block; width: 34px; height: 3px; margin: 0 auto 1.15rem;
  border-radius: var(--r-pill); background: linear-gradient(90deg, var(--blue), var(--indigo));
}
.pd-intro > .pd-shell > .pd-intro__statement > p:first-child {
  font-size: clamp(1.05rem, 1.7vw, 1.3rem); font-weight: 620; line-height: 1.55;
  color: var(--text); letter-spacing: -0.01em;
}
/* a bare intro list (e.g. a row of quick trust facts) -- horizontal chips
   instead of a plain left-aligned bullet column. */
.pd-intro > .pd-shell > .pd-intro__statement ul {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.65rem; margin: 0.3rem 0 0;
}
.pd-intro > .pd-shell > .pd-intro__statement ul li {
  display: inline-flex; align-items: center; gap: 0.45rem; text-align: left;
  padding: 0.5rem 1.1rem; border-radius: var(--r-pill);
  background: var(--blue-soft); border: 1px solid rgba(3,79,244,0.14);
  font-size: 0.85rem; font-weight: 650; color: var(--navy);
}
.pd-intro > .pd-shell > .pd-intro__statement ul li::before { display: none; }
.pd-intro > .pd-shell > .pd-intro__statement ul li svg { width: 15px; height: 15px; flex: none; color: var(--blue); }

/* bare intro paragraph paired with a screenshot -- left-aligned emphasized
   copy with a soft accent bar, instead of a plain narrow paragraph. */
.pd-intro__split .pd-intro__statement {
  padding-left: 1.25rem; border-left: 3px solid var(--blue-soft);
}

/* the screenshot itself, wherever it appears in the intro section (bare
   split above, or the heading+copy "media merge" case) -- a soft color
   glow behind the existing framed figure, echoing the hero's own aurora
   glow instead of a plain flat card. */
.pd-intro .pd-figure { position: relative; isolation: isolate; }
.pd-intro .pd-figure::before {
  content: ""; position: absolute; inset: -16% -12%; z-index: -1;
  background: radial-gradient(60% 60% at 50% 40%, rgba(3, 79, 244, 0.18), transparent 72%);
}

@media (max-width: 720px) {
  .pd-intro { padding-top: clamp(2.25rem, 8vw, 3rem); }
}

/* ==========================================================================
   Section-card layout -- the whole-page redesign requested for inner pages.
   Previously every body section was a full-bleed band with a plain white or
   var(--bg-alt) background, sitting flush against the section above and
   below it -- one continuous flat surface top to bottom. Body sections now
   float as individual white cards (rounded corners, hairline border, a
   colored top accent bar, a numbered "01/02..." chip ahead of the heading)
   on a soft tinted page canvas, with the section's own existing decorative
   orb/dots glowing through the gap around each card instead of sitting flush
   behind flat-colored content. The hero band and the closing CTA band keep
   their own distinct full-bleed treatments and are excluded (:not(.pd-cta-band),
   and .pd-pagehero is a different element entirely).
   ========================================================================== */
body.pd-inner main { background: var(--bg-alt); }
body.pd-inner .pd-pagehero { background: #fff; }

body.pd-inner .pd-section:not(.pd-cta-band) {
  background: transparent !important;
  padding-block: clamp(1.5rem, 3.4vw, 2.5rem);
}
body.pd-inner .pd-section:not(.pd-cta-band) > .pd-shell {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  padding: clamp(1.9rem, 4.5vw, 3.25rem) clamp(1.35rem, 4vw, 3rem);
}
body.pd-inner .pd-section:not(.pd-cta-band) > .pd-shell::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: linear-gradient(90deg, var(--blue), var(--indigo));
}
body.pd-inner .pd-section--alt:not(.pd-cta-band) > .pd-shell::before {
  background: linear-gradient(90deg, var(--indigo), var(--blue));
}

/* numbered step chip ahead of a section's eyebrow (see render_body_sections) */
.pd-head .pd-section__no {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; margin-bottom: 0.9rem; border-radius: 10px;
  background: var(--bg-tint); color: var(--blue);
  font-size: 0.85rem; font-weight: 800; letter-spacing: -0.01em;
}

@media (max-width: 720px) {
  body.pd-inner .pd-section:not(.pd-cta-band) { padding-block: 1rem; }
}

/* closing "Ready to get started?" band -- explicit outer top/bottom spacing
   per request (was using the shared .pd-section padding-block value on both
   sides). */
body.pd-inner .pd-cta-band {
  padding-top: 30px;
  padding-bottom: 70px;
}

/* ==========================================================================
   Blog post hero -- full-bleed dark gradient band with a centered title,
   replacing the light aurora .pd-pagehero on single blog posts. Sits above
   the two-column article layout (sidebar Table of Contents + content) below.
   ========================================================================== */
.pd-posthero {
  position: relative; isolation: isolate; overflow: hidden;
  padding-top: calc(var(--nav-h) + 3.25rem); padding-bottom: 3.25rem;
  background: linear-gradient(120deg, #0a1638 0%, #132a72 48%, #1d3fae 100%);
}
.pd-posthero::before {
  content: ""; position: absolute; inset: -30% -10% auto -10%; height: 480px; z-index: -1;
  background: radial-gradient(60% 60% at 30% 15%, rgba(255,255,255,0.16), transparent 72%);
}
.pd-posthero::after {
  content: ""; position: absolute; inset: auto -10% -35% -10%; height: 420px; z-index: -1;
  background: radial-gradient(55% 55% at 75% 100%, rgba(125,168,255,0.28), transparent 70%);
}
.pd-posthero .pd-shell { max-width: 840px; text-align: center; }
.pd-posthero .pd-crumb { justify-content: center; color: rgba(255,255,255,0.6); }
.pd-posthero .pd-crumb a { color: rgba(255,255,255,0.6); }
.pd-posthero .pd-crumb a:hover { color: #fff; }
.pd-posthero .pd-crumb b { color: #fff; }
.pd-posthero h1.pd-h2 {
  color: #fff; margin: 1.1rem 0 1rem; font-size: clamp(1.75rem, 3.4vw, 2.65rem);
  line-height: 1.22; letter-spacing: -0.01em;
}
.pd-posthero .pd-post-meta__hero {
  justify-content: center; color: rgba(255,255,255,0.72);
}
.pd-posthero .pd-post-meta__hero b { color: #fff; }
@media (max-width: 720px) {
  .pd-posthero { padding-top: calc(var(--nav-h) + 2rem); padding-bottom: 2.25rem; }
}

/* lead image -- the post's real featured image, now shown as the opening
   figure of the article body instead of sitting beside the hero title. */
.pd-post-lead {
  margin: 0 0 1.75rem; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--shadow);
}
.pd-post-lead img { display: block; width: 100%; height: auto; }

/* ==========================================================================
   Two-column article layout -- a sticky left Table of Contents sidebar next
   to the article body. Body sections keep their existing card treatment
   (see the section-card rules above); they simply render inside the narrower
   right-hand column here instead of full page width.
   ========================================================================== */
.pd-post-layout {
  display: grid; grid-template-columns: 260px minmax(0, 1fr); align-items: start;
  gap: 2.5rem; max-width: var(--shell); margin: 0 auto; padding: 2.75rem 1.5rem 0;
}
.pd-post-toc {
  position: sticky; top: calc(var(--nav-h) + 18px);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 1.25rem 1.35rem; box-shadow: var(--shadow-sm);
  max-height: calc(100vh - var(--nav-h) - 36px); overflow-y: auto;
}
.pd-post-toc__title {
  margin: 0 0 0.75rem; font-size: 0.76rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-muted);
}
.pd-post-toc__list {
  list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column;
  border-left: 2px solid var(--line);
}
.pd-post-toc__list a {
  display: block; margin-left: -2px; padding: 0.42rem 0 0.42rem 0.9rem;
  border-left: 2px solid transparent; font-size: 0.85rem; line-height: 1.35;
  color: var(--text-muted); text-decoration: none; transition: color 0.15s, border-color 0.15s;
}
.pd-post-toc__list a:hover { color: var(--text-mid); }
.pd-post-toc__list a.is-active { color: var(--blue); border-left-color: var(--blue); font-weight: 700; }

.pd-post-content { min-width: 0; }
.pd-post-content h2.pd-h2[id],
.pd-post-content h3[id] { scroll-margin-top: calc(var(--nav-h) + 24px); }

/* The AI-summary / intro statement now sits in the narrower right-hand
   article column next to the sticky TOC, so it reads better as normal
   left-aligned body copy than as a centered pull-quote-style statement.
   Any bullet list inside it (e.g. a "Key Features:" / "Best for:" list
   pulled straight from Word-pasted content, with no check-icon markup of
   its own) previously fell into the centered pill/chip treatment meant for
   short tag-style items -- for full sentences that wraps and centers badly
   with no bullet marker at all. Restored to a plain left-aligned checklist
   with the same checkmark bullet used throughout the rest of the article. */
.pd-post-content .pd-intro > .pd-shell > .pd-intro__statement {
  max-width: none; margin: 0; text-align: left; padding-left: 0; border-left: none;
}
.pd-post-content .pd-intro > .pd-shell > .pd-intro__statement::before { margin: 0 0 1.15rem; }
.pd-post-content .pd-intro > .pd-shell > .pd-intro__statement > p:first-child { text-align: left; }
.pd-post-content .pd-intro > .pd-shell > .pd-intro__statement ul:not(.pd-checklist) {
  display: grid; grid-template-columns: 1fr; justify-content: stretch;
  gap: 0.65rem; margin: 0.3rem 0 1.4rem;
}
.pd-post-content .pd-intro > .pd-shell > .pd-intro__statement ul:not(.pd-checklist) li {
  display: flex; align-items: flex-start; gap: 0.65rem; text-align: left;
  padding: 0; border-radius: 0; background: none; border: none;
  font-size: 0.975rem; font-weight: 400; line-height: 1.6; color: var(--text-mid);
}
.pd-post-content .pd-intro > .pd-shell > .pd-intro__statement ul:not(.pd-checklist) li::before {
  content: ""; display: block; flex: none; width: 18px; height: 18px; margin-top: 3px; border-radius: 50%;
  background: var(--bg-tint); background-image: linear-gradient(135deg, var(--blue), var(--indigo));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center/12px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center/12px no-repeat;
}

/* .pd-checklist lists (proper svg check-icon markup) that happen to sit
   inside the intro/AI-summary block previously got pulled into the plain
   pill/chip rules above by specificity, losing their tile background and
   check-badge icon and rendering as a bare dot + text. Re-assert the same
   grid-tile checklist treatment used everywhere else in the article. */
.pd-post-content .pd-intro > .pd-shell > .pd-intro__statement ul.pd-checklist {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0.65rem; margin: 0.3rem 0 1.4rem; justify-content: stretch;
}
.pd-post-content .pd-intro > .pd-shell > .pd-intro__statement ul.pd-checklist li {
  display: flex; align-items: flex-start; text-align: left;
  padding: 0.7rem 0.9rem; border-radius: var(--r); background: var(--bg-alt);
  border: 1px solid var(--line-soft); font-size: 0.9rem; font-weight: 400; color: var(--text-mid);
}
.pd-post-content .pd-intro > .pd-shell > .pd-intro__statement ul.pd-checklist li::before { content: none; }
.pd-post-content .pd-intro > .pd-shell > .pd-intro__statement ul.pd-checklist li > svg {
  flex: none; width: 20px; height: 20px; padding: 3px; margin-top: 1px;
  border-radius: 50%; color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--indigo));
  box-shadow: 0 4px 10px -4px rgba(3,79,244,0.55);
}

@media (max-width: 980px) {
  .pd-post-layout { grid-template-columns: 1fr; padding-top: 2rem; }
  .pd-post-toc {
    position: relative; top: 0; max-height: none; margin-bottom: 0.5rem;
  }
}