/* =====================================================================
   LeadsNimble Privacy / Legal page — the TextCRM Privacy widget ported
   into this project's design system.

   Source of the STRUCTURE:
     TextCRM_LandingPage_WordPress/.../assets/css/privacy-policy.css
       (.textcrm-privacy: centred hero + one content card, dotted halo,
        brand top strip, TOC panel, numbered sections)

   Source of the SKIN (this is the part that changes):
     leadsnimble_html/src/css/themes/aurora-nightfall/tokens.css
     leadsnimble_html/src/css/base/{1-reset,2-layout,3-utilities,4-responsive}.css

   Same conventions as lnew-price-hero.css / lnew-faq.css / lnew-why.css:
   the theme's tokens are resolved to LITERAL values and re-scoped under
   --lnpp-*, LIGHT is the default mode, and [data-mode="dark"] flips the
   palette (the same switch the nav writes). The dark block is emitted at
   [data-mode="dark"] .lnew-pp so it outranks the light values on
   specificity rather than on source order.

   The numbers this file is built on, all lifted from the token contract
   rather than invented:
     section   112px block padding (84 / 64 / 54 at 1040 / 760 / 460)
     gutter    28px (24 / 20 / 16)
     header    860px max-width, centred
     title     clamp(38px, 5vw, 62px) — the same page-hero scale
               lnew-price-hero.css and lnew-feat-hero.css use
     card      900px max-width, radius 24 (--radius-lg), 1px --line,
               --surface fill, --shadow-lg
     accent    linear-gradient(100deg,#6366f1 0%,#a855f7 52%,#22d3ee 100%)
     eyebrow   #eef0ff / #5b46e0 / #e0e3ff  (light)
     radii     12 / 18 / 24 / 30 / 100px

   CONTROLS WRITE TOKENS; MEDIA QUERIES WRITE PROPERTIES — see
   [[elementor-control-css-beats-media-queries]]. Every Style control in the
   widget sets a --lnpp-* token, so the responsive steps at the bottom of
   this file keep the last word instead of being outranked by a (0,4,0)
   control rule.

   ONE deliberate departure from the TextCRM original: it drives its
   entrance with GSAP. Here the motion is the family's own CSS reveal
   (.lnew-reveal + --i stagger + .is-in), so the page carries no
   third-party dependency and the legal text is fully visible with JS off.
   For a legal document that is a correctness requirement, not a nicety.
   ===================================================================== */

/* Local reset. :where()-wrapped so it carries ZERO specificity — a bare
   `.lnew-pp a {}` would be (0,1,1) and outrank the component rules it is
   meant to sit beneath. See [[nav-widget-feature]] for the four cascade
   traps this avoids. Do not unwrap. */
.lnew-pp, .lnew-pp *, .lnew-pp *::before, .lnew-pp *::after { box-sizing: border-box; }

/* The `hidden` guard: a UA's `[hidden]{display:none}` carries zero
   specificity, so any display:flex/grid here would out-rank it. */
.lnew-pp [hidden] { display: none !important; }

:where(.lnew-pp) :where(a) { color: inherit; text-decoration: none; }
:where(.lnew-pp) :where(p) { margin: 0; }
:where(.lnew-pp) :where(ul, ol) { margin: 0; padding: 0; list-style: none; }
:where(.lnew-pp) :where(li) { margin: 0; }
:where(.lnew-pp) :where(svg) { display: block; }
:where(.lnew-pp) :where(h1, h2, h3, h4, h5, h6) { margin: 0; }
:where(.lnew-pp) :where(b, strong) { font-weight: 700; }
:where(.lnew-pp) :where(i, em) { font-style: italic; }

.lnew-pp {
  /* ---- motion ---- */
  --lnpp-ease: cubic-bezier(.22,1,.36,1);
  --lnpp-rv-dist: 40px;
  --lnpp-rv-dur: 1s;
  --lnpp-rv-step: 60ms;

  /* ---- geometry ---- */
  --lnpp-pad-top: 112px;
  --lnpp-pad-bottom: 112px;
  --lnpp-gutter: 28px;
  --lnpp-head-maxw: 860px;
  --lnpp-intro-maxw: 700px;
  --lnpp-maxw: 900px;

  --lnpp-title-size: clamp(38px, 5vw, 62px);
  --lnpp-intro-size: 18px;

  --lnpp-card-radius: 24px;
  --lnpp-card-pad: 44px;
  --lnpp-toc-radius: 18px;
  --lnpp-sec-gap: 40px;

  /* ---- ambient aurora (the hero2 device, dialled down for a text page) ---- */
  --lnpp-aurora-op: .36;
  --lnpp-aurora-1: rgba(99,102,241,.55);
  --lnpp-aurora-2: rgba(34,211,238,.4);
  --lnpp-aurora-blur: 70px;

  --lnpp-dot-op: .5;
  --lnpp-dot-color: rgba(109,92,245,.22);

  /* ---- type ---- */
  --lnpp-font-sans: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --lnpp-font-head: 'Parkinsans', 'DM Sans', sans-serif;

  /* ---- palette · LIGHT (the site's default mode) ---- */
  --lnpp-bg-1: #d7e0ef;
  --lnpp-bg-2: #f0f4fb;
  --lnpp-bg-stop: 55%;
  /* ONE token carries the whole background, and its default IS the gradient.
     It cannot be `background: var(--lnpp-bg), linear-gradient(...)` with the
     token holding a flat colour: in the `background` shorthand only the FINAL
     layer may carry a colour, so a colour in first position makes the whole
     declaration invalid and the browser drops it — the section then paints
     nothing and every palette flip below silently does nothing. Keeping it as
     one value means the Style control's flat colour REPLACES the gradient,
     which is also what that control's label promises. */
  --lnpp-bg: linear-gradient(180deg, var(--lnpp-bg-1) 0%, var(--lnpp-bg-2) var(--lnpp-bg-stop), var(--lnpp-bg-2) 100%);
  --lnpp-ink: #12122a;
  --lnpp-body: #454a63;
  --lnpp-muted: #6b7089;
  --lnpp-muted-2: #9498b0;
  --lnpp-line: #e7e9f4;
  --lnpp-line-2: #f0f1f8;

  --lnpp-card-bg: #ffffff;
  --lnpp-toc-bg: #f7f8fd;
  --lnpp-num-ink: #ffffff;

  --lnpp-eyebrow-bg: #eef0ff;
  --lnpp-eyebrow-ink: #5b46e0;
  --lnpp-eyebrow-border: #e0e3ff;

  --lnpp-grad-1: #6366f1;
  --lnpp-grad-2: #a855f7;
  --lnpp-grad-3: #22d3ee;
  --lnpp-accent-grad: linear-gradient(100deg, var(--lnpp-grad-1) 0%, var(--lnpp-grad-2) 52%, var(--lnpp-grad-3) 100%);
  --lnpp-accent: #6d5cf5;
  --lnpp-accent-halo: rgba(139,124,255,.28);
  --lnpp-accent-soft-bg: #eef0ff;
  --lnpp-accent-soft-border: #e0e3ff;

  --lnpp-glass-blur: none;
  --lnpp-glass-hi: transparent;

  --lnpp-shadow-sm: 0 1px 2px rgba(30,30,80,.05), 0 2px 6px rgba(30,30,80,.05);
  --lnpp-shadow-lg: 0 30px 70px rgba(30,30,80,.16);

  position: relative;
  isolation: isolate;
  overflow-x: clip;
  padding-top: var(--lnpp-pad-top);
  padding-bottom: var(--lnpp-pad-bottom);
  background: var(--lnpp-bg);

  /* The theme type leak. twentytwentyfive pushes font-weight 300,
     letter-spacing -0.1px and text-wrap pretty into everything that does not
     assert otherwise — see [[wp-theme-inherited-type-leak]]. A legal page is
     nearly all inherited body copy, so it is the widget most exposed to it. */
  font-family: var(--lnpp-font-sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: normal;
  text-wrap: wrap;
  color: var(--lnpp-body);
  -webkit-font-smoothing: antialiased;
}

/* ---- palette · DARK ([data-mode="dark"] on <html>, written by the nav) ---- */
[data-mode="dark"] .lnew-pp {
  --lnpp-bg-1: #0c0c18;
  --lnpp-bg-2: #090910;
  --lnpp-bg-stop: 100%;
  --lnpp-ink: #f5f6ff;
  --lnpp-body: #b8bed6;
  --lnpp-muted: #949bbb;
  --lnpp-muted-2: #6d7398;
  --lnpp-line: rgba(255,255,255,.10);
  --lnpp-line-2: rgba(255,255,255,.06);

  --lnpp-card-bg: rgba(255,255,255,.035);
  --lnpp-toc-bg: rgba(255,255,255,.03);

  --lnpp-eyebrow-bg: rgba(255,255,255,.05);
  --lnpp-eyebrow-ink: #cdc6ff;
  --lnpp-eyebrow-border: rgba(255,255,255,.12);

  --lnpp-accent: #8b7cff;
  --lnpp-accent-soft-bg: rgba(139,124,255,.12);
  --lnpp-accent-soft-border: rgba(139,124,255,.24);

  /* the dark band is nearly black, so the aurora needs real presence */
  --lnpp-aurora-op: .7;
  --lnpp-dot-op: .35;
  --lnpp-dot-color: rgba(139,124,255,.30);

  --lnpp-glass-blur: blur(14px) saturate(150%);
  --lnpp-glass-hi: rgba(255,255,255,.10);

  --lnpp-shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --lnpp-shadow-lg: 0 34px 74px rgba(0,0,0,.62);
}

/* =====================================================================
   Decorations — aurora blobs + the two side dot fields.
   Both are aria-hidden, pointer-events:none and sit at z-index 0 under the
   content, so they can never intercept a click on a TOC link.
   ===================================================================== */
.lnew-pp__bg,
.lnew-pp__dots {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.lnew-pp__glow {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(var(--lnpp-aurora-blur));
  opacity: var(--lnpp-aurora-op);
}
.lnew-pp__glow--1 {
  width: 620px; height: 420px;
  top: -180px; left: 50%;
  transform: translateX(-62%);
  background: var(--lnpp-aurora-1);
}
.lnew-pp__glow--2 {
  width: 460px; height: 340px;
  top: -60px; left: 50%;
  transform: translateX(18%);
  background: var(--lnpp-aurora-2);
}

.lnew-pp__dotField {
  position: absolute;
  top: 180px;
  width: 190px; height: 380px;
  opacity: var(--lnpp-dot-op);
  background-image: radial-gradient(var(--lnpp-dot-color) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
}
.lnew-pp__dotField--left  { left: 2%; }
.lnew-pp__dotField--right { right: 2%; }

/* =====================================================================
   Shell
   ===================================================================== */
.lnew-pp__inner {
  position: relative;
  z-index: 1;
  max-width: calc(var(--lnpp-maxw) + var(--lnpp-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--lnpp-gutter);
}

/* =====================================================================
   Header
   ===================================================================== */
.lnew-pp__head {
  max-width: var(--lnpp-head-maxw);
  margin-inline: auto;
  text-align: center;
  margin-bottom: 52px;
}

.lnew-pp__badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--lnpp-font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--lnpp-eyebrow-ink);
  background: var(--lnpp-eyebrow-bg);
  border: 1px solid var(--lnpp-eyebrow-border);
  padding: 7px 14px;
  border-radius: 100px;
}
.lnew-pp__badgeIcon { display: flex; }
.lnew-pp__badgeIcon svg { width: 14px; height: 14px; }

.lnew-pp__heading {
  font-family: var(--lnpp-font-head);
  font-weight: 500;
  font-size: var(--lnpp-title-size);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--lnpp-ink);
  margin-top: 20px;
  text-wrap: balance;
}
/* The accent word. Same background-clip:text technique as
   `.lnew-faq__accent`. `color: transparent` (not -webkit-text-fill-color) so
   a browser without background-clip:text still shows the gradient box rather
   than nothing — and forced-colors mode gets the override below. */
.lnew-pp__headingAccent {
  background: var(--lnpp-accent-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
@media (forced-colors: active) {
  .lnew-pp__headingAccent { color: CanvasText; background: none; }
}

.lnew-pp__updated {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  padding: 8px 16px;
  border-radius: 100px;
  background: var(--lnpp-card-bg);
  border: 1px solid var(--lnpp-line);
  box-shadow: var(--lnpp-shadow-sm);
  backdrop-filter: var(--lnpp-glass-blur);
  -webkit-backdrop-filter: var(--lnpp-glass-blur);
  font-size: 13.5px;
  color: var(--lnpp-muted);
}
.lnew-pp__updatedDot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--lnpp-accent);
  box-shadow: 0 0 0 4px var(--lnpp-accent-halo);
  flex: none;
}
.lnew-pp__updatedLabel { font-weight: 500; }
.lnew-pp__updatedDate  { color: var(--lnpp-ink); font-weight: 600; }

.lnew-pp__intro {
  max-width: var(--lnpp-intro-maxw);
  margin-inline: auto;
  margin-top: 24px;
  font-size: var(--lnpp-intro-size);
  line-height: 1.7;
  color: var(--lnpp-muted);
  text-wrap: pretty;
}
.lnew-pp__intro--secondary { margin-top: 14px; }

/* =====================================================================
   Content card
   ===================================================================== */
.lnew-pp__card {
  position: relative;
  background: var(--lnpp-card-bg);
  border: 1px solid var(--lnpp-line);
  border-radius: var(--lnpp-card-radius);
  padding: var(--lnpp-card-pad);
  box-shadow: var(--lnpp-shadow-lg);
  backdrop-filter: var(--lnpp-glass-blur);
  -webkit-backdrop-filter: var(--lnpp-glass-blur);
  /* clips the top accent strip to the card's own rounded corners */
  overflow: hidden;
}

/* The aurora top strip. `--accent` is a modifier the widget adds, so the
   strip can be switched off without changing the card's own geometry. */
.lnew-pp--accent .lnew-pp__card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--lnpp-accent-grad);
}

/* Dotted corner halo — the TextCRM card's signature, re-tinted. */
.lnew-pp__card::after {
  content: "";
  position: absolute;
  right: -40px;
  bottom: -40px;
  width: 210px; height: 210px;
  background-image: radial-gradient(var(--lnpp-dot-color) 1.5px, transparent 1.5px);
  background-size: 20px 20px;
  opacity: .55;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(circle at 100% 100%, #000, transparent 72%);
          mask-image: radial-gradient(circle at 100% 100%, #000, transparent 72%);
}

/* =====================================================================
   Table of contents
   ===================================================================== */
.lnew-pp__toc {
  position: relative;
  z-index: 1;
  background: var(--lnpp-toc-bg);
  border: 1px solid var(--lnpp-line);
  border-radius: var(--lnpp-toc-radius);
  padding: 26px 28px;
  margin-bottom: 44px;
}

.lnew-pp__tocTitle {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--lnpp-font-head);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--lnpp-ink);
  margin-bottom: 18px;
}
.lnew-pp__tocTitleIcon {
  display: flex;
  color: var(--lnpp-accent);
}
.lnew-pp__tocTitleIcon svg { width: 18px; height: 18px; }

.lnew-pp__tocList {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 28px;
}

.lnew-pp__tocLink {
  display: flex;
  align-items: baseline;
  gap: 11px;
  padding: 7px 8px;
  margin-inline: -8px;
  border-radius: 10px;
  font-size: 15px;
  color: var(--lnpp-body);
  transition: color .2s var(--lnpp-ease), background-color .2s var(--lnpp-ease);
}
.lnew-pp__tocNum {
  flex: none;
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--lnpp-accent);
  opacity: .8;
}
.lnew-pp__tocLabel { text-wrap: pretty; }

@media (hover: hover) {
  .lnew-pp__tocLink:hover {
    color: var(--lnpp-ink);
    background: var(--lnpp-accent-soft-bg);
  }
  .lnew-pp__tocLink:hover .lnew-pp__tocNum { opacity: 1; }
}
.lnew-pp__tocLink:focus-visible {
  outline: 2px solid var(--lnpp-accent);
  outline-offset: 2px;
}

/* =====================================================================
   Policy sections
   ===================================================================== */
.lnew-pp__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--lnpp-sec-gap);
}

/* scroll-margin so an in-page jump clears the sticky header. The JS reads the
   live nav height for the smooth path; this is the fallback for a plain
   hash-link load, where no script runs at all. */
.lnew-pp__section { scroll-margin-top: 96px; }

.lnew-pp__secHead {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 16px;
}

.lnew-pp__num {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding-inline: 8px;
  border-radius: 11px;
  background: var(--lnpp-accent-grad);
  color: var(--lnpp-num-ink);
  font-family: var(--lnpp-font-head);
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.lnew-pp__secIcon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 11px;
  background: var(--lnpp-accent-soft-bg);
  border: 1px solid var(--lnpp-accent-soft-border);
  color: var(--lnpp-accent);
}
.lnew-pp__secIcon svg { width: 18px; height: 18px; }

.lnew-pp__secTitle {
  font-family: var(--lnpp-font-head);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--lnpp-ink);
  text-wrap: balance;
}

/* =====================================================================
   Section prose

   These are real descendant selectors, NOT :where()-wrapped: the content is
   author-written rich text from a WYSIWYG field, so these rules have to beat
   the local reset above rather than sit under it.
   ===================================================================== */
.lnew-pp__body { padding-left: 47px; }   /* aligns under the title, past the 34px chip + 13px gap */

.lnew-pp__body > * + * { margin-top: 14px; }

.lnew-pp__body p {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--lnpp-body);
  text-wrap: pretty;
}

.lnew-pp__body h3 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 26px 0 0;
  font-family: var(--lnpp-font-head);
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--lnpp-ink);
}
/* The sub-heading marker is a BAR, not a dot. A dot here would sit at the same
   left edge and the same size as the `ul li::before` bullets directly beneath
   it, so an <h3> introducing a list read as just another item in that list.
   A vertical bar reads as a heading rule at a glance. */
.lnew-pp__body h3::before {
  content: "";
  flex: none;
  width: 3px; height: 15px;
  border-radius: 2px;
  background: var(--lnpp-accent-grad);
}
.lnew-pp__body h3 + * { margin-top: 10px; }

.lnew-pp__body ul,
.lnew-pp__body ol {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.lnew-pp__body li {
  position: relative;
  padding-left: 22px;
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--lnpp-body);
}
.lnew-pp__body ul li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: .62em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--lnpp-accent);
  opacity: .85;
}
/* ordered lists keep real numbers — a counter, so the reset's list-style:none
   does not silently strip the numbering an author expects from <ol>. */
.lnew-pp__body ol { counter-reset: lnpp-ol; }
.lnew-pp__body ol li { counter-increment: lnpp-ol; }
.lnew-pp__body ol li::before {
  content: counter(lnpp-ol) ".";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--lnpp-accent);
  font-variant-numeric: tabular-nums;
}

.lnew-pp__body strong, .lnew-pp__body b { color: var(--lnpp-ink); font-weight: 700; }

/* Animated underline, drawn with a background so it never shifts layout. */
.lnew-pp__body a {
  color: var(--lnpp-accent);
  font-weight: 500;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size .28s var(--lnpp-ease);
  overflow-wrap: anywhere;         /* a long mailto never blows out the card */
}
@media (hover: hover) {
  .lnew-pp__body a:hover { background-size: 100% 1px; }
}
.lnew-pp__body a:focus-visible {
  outline: 2px solid var(--lnpp-accent);
  outline-offset: 2px;
  border-radius: 3px;
}

/* =====================================================================
   Reveal — the family convention (.lnew-reveal + --i stagger + .is-in),
   identical to lnew-faq.css so the whole site animates as one system.
   ===================================================================== */
.lnew-pp .lnew-reveal {
  opacity: 0;
  transform: translate3d(0, var(--lnpp-rv-dist), 0);
  transition: opacity var(--lnpp-rv-dur) var(--lnpp-ease),
              transform var(--lnpp-rv-dur) var(--lnpp-ease);
  transition-delay: calc(var(--i, 0) * var(--lnpp-rv-step));
}
.lnew-pp .lnew-reveal.is-in { opacity: 1; transform: none; }
/* never pre-hide inside the editor — an author must see what they are editing */
.elementor-editor-active .lnew-pp .lnew-reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .lnew-pp .lnew-reveal { opacity: 1; transform: none; transition: none; }
  .lnew-pp__body a,
  .lnew-pp__tocLink { transition: none; }
  .lnew-pp { scroll-behavior: auto; }
}

/* =====================================================================
   Responsive — the reference's own steps (base/4-responsive.css):
   1040 / 760 / 460 for gutter, section padding and head spacing.
   Media queries write PROPERTIES; the Style controls above write TOKENS.
   ===================================================================== */
@media (max-width: 1040px) {
  .lnew-pp {
    padding-top: 84px;
    padding-bottom: 84px;
    --lnpp-gutter: 24px;
  }
  .lnew-pp__head { margin-bottom: 44px; }
  .lnew-pp__card { padding: 36px; }
}

@media (max-width: 860px) {
  /* One column below the point where two TOC columns would wrap mid-label. */
  .lnew-pp__tocList { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .lnew-pp {
    padding-top: 64px;
    padding-bottom: 64px;
    --lnpp-gutter: 20px;
    --lnpp-intro-size: 17px;
  }
  .lnew-pp__head { margin-bottom: 36px; }
  .lnew-pp__card { padding: 28px 24px; border-radius: 20px; }
  .lnew-pp__toc { padding: 22px; margin-bottom: 34px; }
  .lnew-pp__content { gap: 34px; }
  .lnew-pp__secTitle { font-size: 20px; }

  /* The prose un-indents: at this width the 47px rail costs more readable
     line length than the alignment is worth. */
  .lnew-pp__body { padding-left: 0; }

  /* The dot fields sit where the card now is — drop them rather than let
     them show through the text. */
  .lnew-pp__dots { display: none; }
}

@media (max-width: 460px) {
  .lnew-pp {
    padding-top: 54px;
    padding-bottom: 54px;
    --lnpp-gutter: 16px;
  }
  .lnew-pp__card { padding: 22px 18px; }
  .lnew-pp__toc { padding: 18px; }
  .lnew-pp__body p,
  .lnew-pp__body li { font-size: 16px; }

  /* The number + icon + title row runs out of room; the title drops to its
     own line rather than compressing to two words per line. */
  .lnew-pp__secHead { flex-wrap: wrap; gap: 10px; }
  .lnew-pp__secTitle { flex-basis: 100%; font-size: 19px; }
}