/* ============================================================
   PARDEE 2026 — BEAVER BUILDER CORE MODULES + ROWS (defaults only)

   THE RULE: if a control exists in the Beaver Builder panel it takes effect. This file never
   out-ranks BB. Where BB has a field, the default lives in BB — Global Settings (row width/padding, module margins),
   Global Styles (heading/text/button typography, colours, button border/padding), form defaults and the "Pardee style"
   selects (inc/bb-global-layer.php fills BB's own fields at render via `fl_builder_node_settings`). This file keeps
   ONLY what BB has no field for: the italic accent <em>, eyebrow uppercase, hairline rules and dashes, the heading
   measure, side-by-side button pairs, the hero/panel column layouts, the star row, the pull quote.

   Every rule is `:where()`-gated: (0,0,0) for the gate, then at most one class/element so the whole selector is
   ≤ (0,2,0) — BB's per-node CSS (`.fl-node-x…`, ≥ (0,2,0), loaded after this file) wins on every tie, and BB's
   own base rules ((0,1,0)–(0,2,1)) win on the properties they set. No `.fl-node-*`, no `!important`, ever.
   Plain CSS (not SCSS): Compass/Ruby Sass 3.4 cannot parse `:where()`; enqueued after style.css with the theme version.

   Heading level → role (the client picks a level, never a class): h1 banner · h2 section · h3 sub · h4 card · h6 eyebrow
   ============================================================ */

/* ── Links: a link no stylesheet colours keeps its surroundings' colour on hover instead of Bootstrap's blue (Bootstrap
   sits in a lower cascade layer). (0,0,0): any theme, module or BB colour rule, hover or not, wins over it. ── */
:where(a:hover) { color: unset; }

/* ── Keyboard focus (WCAG 2.4.7 / 1.4.11): every link, button and focusable control shows the surface-aware ring from the
   tokens (_tokens.scss --pardee-focus-*): a 2px ring in the colour that contrasts with the surface, 2px off the control,
   with the gap filled by a halo of the opposite colour so the ring holds on photos, cards and same-colour buttons.
   (0,1,0): a component or module that draws its own focus style (class + :focus-visible, (0,2,0)) keeps it. ── */
:where(a[href], area[href], button, summary, [role="button"], [role="tab"], [role="link"], [role="menuitem"], [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: var(--pardee-focus-w, 2px) solid var(--pardee-focus-ring, #022534);
  outline-offset: var(--pardee-focus-gap, 2px);
  box-shadow: 0 0 0 var(--pardee-focus-gap, 2px) var(--pardee-focus-halo, #fff6f0);
}

/* ── Rows: text colour follows the surface token (the row's own Text/Heading colour fields still win) ─────── */
:where(.fl-row[data-pardee-spacing]) > .fl-row-content-wrap { color: var(--pardee-fg); }
:where(.fl-row[data-pardee-spacing] .fl-col[data-pardee-surface]) > .fl-col-content { color: var(--pardee-fg); }

/* Several column groups in one row: the gap between groups (design .hp__head margin-bottom). BB has no column-group field. */
:where(.fl-row[data-pardee-spacing]:not([data-pardee-spacing="module"]) .fl-row-content) > .fl-col-group + .fl-col-group { margin-top: clamp(40px, 5vw, 64px); }
/* A group that ends with a Separator is a hairline foot rule: the next group sits 22px under it (home 02 Proof). */
:where(.fl-row[data-pardee-spacing]:not([data-pardee-spacing="module"]) .fl-row-content) > .fl-col-group:where(:has(> .fl-col > .fl-col-content > .fl-module-separator:last-child)) + .fl-col-group { margin-top: 22px; }
/* a group that is ONLY a hairline (the People impact rule) sits 28px under the group above (design .hp-people__impact margin-top) */
:where(.fl-row[data-pardee-spacing]:not([data-pardee-spacing="module"]) .fl-row-content) > .fl-col-group.fl-col-group:where(:has(> .fl-col > .fl-col-content > .fl-module-separator:only-child)) { margin-top: 28px; }

/* Equal-height panel columns (panel padding/border are the column's own fields, filled by the Pardee panel select) */
:where(.fl-row[data-pardee-spacing] .fl-row-content) > .fl-col-group.fl-col-group:where(:has(> .fl-col[data-pardee-panel])) { display: flex; flex-wrap: wrap; align-items: stretch; }   /* wrap: four panel columns at 50% on tablet (Owner Leasing decision strip) run off the row without it */   /* .x.x = (0,2,0): above BB's base .fl-col-group, below any per-node rule */
:where(.fl-row[data-pardee-spacing] .fl-col[data-pardee-panel]) > .fl-col-content { height: 100%; }
:where(.fl-row[data-pardee-spacing] .fl-col[data-pardee-panel="hairline"] + .fl-col[data-pardee-panel="hairline"]) > .fl-col-content { border-left-width: 0; }
@media (max-width: 768px) {
  :where(.fl-row[data-pardee-spacing] .fl-row-content) > .fl-col-group.fl-col-group:where(:has(> .fl-col[data-pardee-panel])) { flex-wrap: wrap; }
  :where(.fl-row[data-pardee-spacing] .fl-row-content > .fl-col-group:has(> .fl-col[data-pardee-panel])) > .fl-col { flex: 0 0 100%; max-width: 100%; }
  :where(.fl-row[data-pardee-spacing] .fl-col[data-pardee-panel="hairline"] + .fl-col[data-pardee-panel="hairline"]) > .fl-col-content { border-left-width: 1px; border-top-width: 0; }
}

/* ── Hero rows ("Page banner" spacing): columns vertically centred; a photo background = the full-bleed photo hero ── */
:where(.fl-row[data-pardee-spacing="hero"] .fl-row-content) > .fl-col-group.fl-col-group { display: flex; align-items: center; }
:where(.fl-row[data-pardee-spacing="hero"][data-pardee-surface="photo"]) > .fl-row-content-wrap { min-height: 760px; display: flex; align-items: flex-end; }
:where(.fl-row[data-pardee-spacing="hero"][data-pardee-surface="photo"]) .fl-module-heading { color: var(--pp-cream); text-shadow: 0 6px 30px rgba(0, 0, 0, .55); }
:where(.fl-row[data-pardee-spacing="hero"][data-pardee-surface="photo"]) h1.fl-module-heading { max-width: 14ch; }
:where(.fl-row[data-pardee-spacing="hero"][data-pardee-surface="photo"]) h6.fl-module-heading, :where(.fl-row[data-pardee-spacing="hero"][data-pardee-surface="photo"]) p.fl-module-heading:where([data-pardee-as="h6"]) { color: var(--pp-blush); text-shadow: 0 2px 14px rgba(0, 0, 0, .6); }
:where(.fl-row[data-pardee-spacing="hero"][data-pardee-surface="photo"]) .fl-module-rich-text,
:where(.fl-row[data-pardee-spacing="hero"][data-pardee-surface="photo"] .fl-module-rich-text) h5, :where(.fl-row[data-pardee-spacing="hero"][data-pardee-surface="photo"] .fl-module-rich-text) p { color: rgba(255, 246, 240, .92); text-shadow: 0 2px 18px rgba(0, 0, 0, .55); max-width: 640px; }
@media (max-width: 992px) { :where(.fl-row[data-pardee-spacing="hero"][data-pardee-surface="photo"]) > .fl-row-content-wrap { min-height: 640px; } }
@media (max-width: 768px) {
  :where(.fl-row[data-pardee-spacing="hero"] .fl-row-content) > .fl-col-group.fl-col-group { flex-wrap: wrap; }
  :where(.fl-row[data-pardee-spacing="hero"] .fl-row-content > .fl-col-group) > .fl-col { flex: 0 0 100%; max-width: 100%; }
  :where(.fl-row[data-pardee-spacing="hero"][data-pardee-surface="photo"]) > .fl-row-content-wrap { min-height: 560px; }
}

/* ── Two Button modules in a row sit side by side (BB lays a column out as a flex column; no field for this) ──── */
/* ── Two CTAs side by side (a Button module followed by another): the column becomes a 2-track GRID — buttons take one track each
   (14px apart, the design's CTA gap), every other module spans both tracks and keeps its own measure (h1 20ch, lede 62ch…).
   A flex-row version would force `max-width: 100%` on the spanning modules and silently kill every heading/lede measure in
   any column with a CTA pair (hero h1 on one line). (0,4,0) beats BB's `.fl-col-content` display rules,
   including equal-height (`.fl-col-group-equal-height .fl-col-content`, 0,2,0). */
:where(.fl-row[data-pardee-spacing]) .fl-col-content.fl-col-content.fl-col-content.fl-col-content:where(:has(> .fl-module-button + .fl-module-button)) { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-content: center; align-items: center; justify-items: start; }
:where(.fl-row[data-pardee-spacing] .fl-col-content:has(> .fl-module-button + .fl-module-button)) > .fl-module.fl-module { grid-column: 1 / -1; min-width: 0; width: auto; }   /* (0,2,0): spans both tracks; BB's per-node width fields still win */
:where(.fl-row[data-pardee-spacing] .fl-col-content:has(> .fl-module-button + .fl-module-button)) > .fl-module.fl-module-button { grid-column: auto; justify-self: start; }
:where(.fl-row[data-pardee-align="center"]) .fl-col-content.fl-col-content.fl-col-content.fl-col-content:where(:has(> .fl-module-button + .fl-module-button)) { grid-template-columns: auto auto; justify-content: center; justify-items: center; }
@media (max-width: 768px) {
  :where(.fl-row[data-pardee-spacing]) .fl-col-content.fl-col-content.fl-col-content.fl-col-content:where(:has(> .fl-module-button + .fl-module-button)) { grid-template-columns: minmax(0, 1fr); }
  :where(.fl-row[data-pardee-spacing] .fl-col-content:has(> .fl-module-button + .fl-module-button)) > .fl-module.fl-module-button { grid-column: 1 / -1; justify-self: stretch; }
}
/* ── Tablet: a CTA pair in a narrow or right/centre-aligned column can exceed the column (900px audit overflow) — let it wrap ── */
@media (max-width: 992px) and (min-width: 769px) {
  /* `minmax(0, max-content)` would give auto-fit a 0px minimum → dozens of zero-width tracks, buttons 16–33px wide and overlapping
     (measured on /private/, /about-us/, /looking-to-buy/ at 900). A 250px minimum = one track per button
     when two fit side by side (column ≥ 514px), else the pair stacks; tracks still grow to max-content. The minimum is at
     least 34% of the column, so a wide column holds two tracks, never a third empty one: modules spanning the row keep
     every track, and an empty third track would take the width the second button needs for its one-line label. */
  :where(.fl-row[data-pardee-spacing]) .fl-col-content.fl-col-content.fl-col-content.fl-col-content:where(:has(> .fl-module-button + .fl-module-button)) { grid-template-columns: repeat(auto-fit, minmax(max(250px, 34%), max-content)); justify-content: start; }
  :where(.fl-row[data-pardee-spacing] .fl-col-content:has(> .fl-module-button + .fl-module-button)) > .fl-module.fl-module-button { max-width: 100%; }
  /* a button with no partner on its grid row (the next button sits on its own line, or there is none) spans the row, so the
     track split never narrows it below the column and its label stays on one line when the column has room */
  :where(.fl-row[data-pardee-spacing] .fl-col-content:has(> .fl-module-button + .fl-module-button)) > .fl-module.fl-module-button:not(:has(+ .fl-module-button:not([data-pardee-break]))):not(.fl-module-button:not([data-pardee-break]) + .fl-module) { grid-column: 1 / -1; }
  :where(.fl-row[data-pardee-spacing]) .fl-col[data-pardee-col-align="right"] > .fl-col-content.fl-col-content.fl-col-content.fl-col-content:where(:has(> .fl-module-button + .fl-module-button)) { grid-template-columns: minmax(0, 1fr); justify-items: end; }
  :where(.fl-row[data-pardee-spacing]) .fl-col[data-pardee-col-align="center"] > .fl-col-content.fl-col-content.fl-col-content.fl-col-content:where(:has(> .fl-module-button + .fl-module-button)) { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  :where(.fl-row[data-pardee-spacing] .fl-col[data-pardee-col-align] .fl-col-content:has(> .fl-module-button + .fl-module-button)) > .fl-module.fl-module-button { grid-column: 1 / -1; }
}
/* ── A CTA pair whose labels cannot each keep one line side by side stacks, at every width: the button-pairs
   script (pardee-properties-bb-modules assets/js/pardee-button-pairs.js) marks the column content with
   data-pp-btn-stack. (0,5,0) beats the pair tracks above; each button keeps its own width and the row's alignment. ── */
:where(.fl-row[data-pardee-spacing]) .fl-col-content.fl-col-content.fl-col-content.fl-col-content[data-pp-btn-stack] { grid-template-columns: minmax(0, 1fr); }
:where(.fl-row[data-pardee-spacing] .fl-col-content[data-pp-btn-stack]) > .fl-module.fl-module-button { grid-column: 1 / -1; }
/* ── A button-only column beside a text column (CTA band: copy left, button right): the button column is never
   narrower than its button's one-line label, and the text column gives up the width instead. Two-column groups
   only, side-by-side widths only; where the designed width already fits the button nothing moves. ── */
@media (min-width: 993px) {
  :where(.fl-row[data-pardee-spacing]) .fl-col-group.fl-col-group.fl-col-group:where(:has(> .fl-col:nth-child(2):last-child):has(> .fl-col > .fl-col-content > .fl-module-button)) { flex-wrap: nowrap; }   /* (0,3,0): over BB's group wrap */
  :where(.fl-row[data-pardee-spacing] .fl-col-group:has(> .fl-col:nth-child(2):last-child):has(> .fl-col > .fl-col-content > .fl-module-button)) > .fl-col { min-width: 0; }
  :where(.fl-row[data-pardee-spacing] .fl-col-group:has(> .fl-col:nth-child(2):last-child)) > .fl-col:where(:has(> .fl-col-content > .fl-module-button):not(:has(> .fl-col-content > .fl-module:not(.fl-module-button)))) { flex-shrink: 0; min-width: max-content; }
}
/* the same on tablets, without holding the columns on one line (a page or BB medium width may stack them there): a column
   holding one button keeps at least its one-line width and the text column beside it takes what is left, so where the
   designed widths already fit nothing moves. Groups with a column set to full width on medium screens
   (data-pardee-col-medium) stack as set. (0,3,0): over BB's equal-height column flex (0,2,0); a page's own column rule of
   the same weight loads later and still wins. */
@media (min-width: 769px) and (max-width: 992px) {
  :where(.fl-row[data-pardee-spacing]) .fl-col-group:where(:has(> .fl-col:nth-child(2):last-child):has(> .fl-col > .fl-col-content > .fl-module-button:only-child):not(:has(> .fl-col[data-pardee-col-medium]))) > .fl-col.fl-col:where(:not(:has(> .fl-col-content > .fl-module-button:only-child))) { flex: 1 1 0%; min-width: 0; }
  :where(.fl-row[data-pardee-spacing]) .fl-col-group:where(:has(> .fl-col:nth-child(2):last-child):not(:has(> .fl-col[data-pardee-col-medium]))) > .fl-col.fl-col:where(:has(> .fl-col-content > .fl-module-button:only-child)) { flex: 0 0 auto; min-width: max-content; }
}

/* ── Row text alignment ("Pardee section → Text alignment → Centred"): a row-level default; each module's own Align wins ── */
:where(.fl-row[data-pardee-align="center"]) .fl-module-heading,
:where(.fl-row[data-pardee-align="center"]) .fl-module-rich-text,
:where(.fl-row[data-pardee-align="center"]) .fl-module-button,
:where(.fl-row[data-pardee-align="center"]) .fl-module-separator { text-align: center; margin-left: auto; margin-right: auto; }
:where(.fl-row[data-pardee-align="center"] .fl-module-rich-text) h5, :where(.fl-row[data-pardee-align="center"] .fl-module-rich-text) p:where([data-pardee-as="h5"]) { text-align: center; margin-left: auto; margin-right: auto; }
/* BB writes each module's margins per node (0,2,0), so `margin: auto` never centres a measured block: centre the column's flex items
   instead (BB's .fl-col-content is already a flex column). (0,2,0) — a per-node width/margin still wins. */
:where(.fl-row[data-pardee-align="center"]) .fl-col-content.fl-col-content { align-items: center; }
:where(.fl-row[data-pardee-align="center"] .fl-col-content) > .fl-module:not(.fl-module-button) { width: 100%; }   /* buttons keep their own width so a pair stays on one line */
:where(.fl-row[data-pardee-align="center"][data-pardee-width="narrow"]) .fl-module-rich-text { max-width: 46ch; }   /* design .scheduler-cta__body / .final__copy: 724px measure on the narrow centred CTA bands only — the footer's centred © row must keep its line */

/* ── Vertical rhythm inside a column lives in the render filter (inc/bb-global-layer.php: eyebrow→heading 18, heading→text 22,
   text/heading→button 28, heading→list 16 as each module's Margin Top, and the module above drops its margin-bottom) — BB writes
   those per node at (0,2,0), which is where an editor's own field still wins. Nothing here. */
:where(.fl-row[data-pardee-spacing] .fl-module-heading) + .fl-module-rich-text:where(:has(> p > .pardee-stars)) { margin-top: -4px; }   /* star row 16px under its heading */

/* ── Heading — family/size/weight per level come from BB Global Styles; here: measure, balance, the accent <em> ── */
:where(.fl-row[data-pardee-spacing]) .fl-module-heading { margin: 0; text-wrap: balance; }
:where(.fl-row[data-pardee-spacing]) h1.fl-module-heading { max-width: var(--pardee-measure-hero); }
:where(.fl-row[data-pardee-spacing]) h2.fl-module-heading { max-width: var(--pardee-measure-section); }
:where(.fl-row[data-pardee-spacing] h1.fl-module-heading[data-pardee-heading="sm"]) { max-width: 16ch; }
.fl-module-heading[data-pardee-heading="statement"] { max-width: 68ch; margin-left: auto; margin-right: auto; }   /* (0,2,0) = BB's per-node margin rule, which still wins when set; beats BB's base .fl-module margin */
/* the home designs' italic section headings run on one line at desktop (design .hp__head .hp__h { max-width: none }) */
:where(.fl-row[data-pardee-spacing]) .fl-module-heading[data-pardee-heading-style="italic"] { max-width: none; }
/* design: `.hp__head .hp__h { white-space: nowrap }` ≥1100 — only the section-head h2 (heading column + lede column); split-copy h2s
   (Prep, Difference) wrap in the design too. A split whose h2 must stay on one line (People) gets a wide enough column instead. */
@media (min-width: 1100px) { :where(.fl-row[data-pardee-spacing]:not([data-pardee-spacing="module"]) .fl-col-group:has(> .fl-col + .fl-col > .fl-col-content > .fl-module-rich-text:only-child) > .fl-col:first-child) h2.fl-module-heading[data-pardee-heading-style="italic"] { white-space: nowrap; } }
:where(.fl-row[data-pardee-spacing]) h6.fl-module-heading, :where(.fl-row[data-pardee-spacing]) p.fl-module-heading:where([data-pardee-as="h6"]) { color: var(--pardee-eyebrow-color); max-width: none; }
/* the editor's own <em> = the italic accent (design .hp__h em: clay on light, blush on dark). BB has no field for it. */
:where(.fl-row[data-pardee-spacing] .fl-module-heading) em { font-family: var(--font-script); font-style: italic; font-weight: 400; color: var(--pardee-h-accent, var(--pardee-fg-muted)); }
:where(.fl-row[data-pardee-spacing] .fl-module-heading[data-pardee-heading="statement"]) em { color: var(--pardee-eyebrow-color); }   /* after the generic em rule: same specificity, later wins */
:where(.fl-row[data-pardee-spacing] .fl-module-heading) a { color: inherit; text-decoration: none; }
/* Section head = [headings] + [one Text module] columns: the h2 runs on one line, the lede sits 4px off the baseline */
:where(.fl-row[data-pardee-spacing]:not([data-pardee-spacing="module"]) .fl-col-group:has(> .fl-col + .fl-col > .fl-col-content > .fl-module-rich-text:only-child) > .fl-col:first-child) h2.fl-module-heading { max-width: none; }
:where(.fl-row[data-pardee-spacing]:not([data-pardee-spacing="module"]) .fl-col-group:has(> .fl-col + .fl-col > .fl-col-content > .fl-module-rich-text:only-child) > .fl-col + .fl-col > .fl-col-content) > .fl-module-rich-text:where(:only-child) { padding-bottom: 4px; }

/* ── Text (rich text) — family/size from Global Styles; here: measure, muted colour, inline semantics ─────── */
:where(.fl-row[data-pardee-spacing]) .fl-module-rich-text { color: var(--pardee-fg-muted); max-width: 62ch; text-wrap: pretty; }
:where(.fl-row[data-pardee-spacing] .fl-module-rich-text) > :first-child { margin-top: 0; }
:where(.fl-row[data-pardee-spacing] .fl-module-rich-text) > :last-child  { margin-bottom: 0; }
:where(.fl-row[data-pardee-spacing] .fl-module-rich-text) p  { margin: 0 0 1em; }
:where(.fl-row[data-pardee-spacing] .fl-module-rich-text) strong { font-weight: var(--pardee-w-bold); color: var(--pardee-fg); }
:where(.fl-row[data-pardee-spacing] .fl-module-rich-text) a { color: var(--pardee-fg); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
:where(.fl-row[data-pardee-spacing] .fl-module-rich-text) a:hover { text-decoration-thickness: 2px; }
:where(.fl-row[data-pardee-spacing] .fl-module-rich-text) small { font-size: 12.5px; line-height: 1.6; letter-spacing: .03em; color: var(--pardee-fg-faint, var(--pardee-fg-muted)); }
/* Star row beside a review count: `<p><span class="pardee-stars" aria-hidden="true"></span>2,200+ five-star reviews</p>` */
:where(.fl-row[data-pardee-spacing] .fl-module-rich-text) p:where(:has(> .pardee-stars)) { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: var(--pardee-w-bold); letter-spacing: .01em; color: var(--pardee-fg); max-width: none; }   /* bold */
.pardee-stars {
  display: inline-block; flex: 0 0 auto; width: 88px; height: 16px; background: #B5651D;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6.1 6.7.8-4.9 4.6 1.3 6.6L12 17.3l-6 3.3 1.3-6.6L2.4 9.4l6.7-.8z'/%3E%3C/svg%3E") 0 0 / 18px 16px repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6.1 6.7.8-4.9 4.6 1.3 6.6L12 17.3l-6 3.3 1.3-6.6L2.4 9.4l6.7-.8z'/%3E%3C/svg%3E") 0 0 / 18px 16px repeat-x;
}
/* Pull quote (TinyMCE blockquote): hairline above, italic display 23px, <cite> as an eyebrow */
:where(.fl-row[data-pardee-spacing] .fl-module-rich-text) blockquote { margin: 1.4em 0; padding: 22px 0 0; border: 0; border-top: 1px solid var(--pardee-line); max-width: none; background: transparent; }   /* the hairline spans the column like the ones below it */
:where(.fl-row[data-pardee-spacing] .fl-module-rich-text blockquote) p { font-family: var(--font-display); font-weight: 400; font-style: italic; font-size: 23px; line-height: 1.4; letter-spacing: .014em; color: var(--pardee-fg); margin: 0 0 18px; max-width: 560px; text-wrap: pretty; }
:where(.fl-row[data-pardee-spacing]) .fl-module-rich-text:where(:has(> blockquote)) { max-width: none; }
:where(.fl-row[data-pardee-spacing] .fl-module-rich-text blockquote) cite { display: block; font-family: var(--font-body); font-style: normal; font-weight: var(--pardee-w-bold); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; line-height: 1.6; color: var(--pardee-eyebrow-color); }
:where(.fl-row[data-pardee-spacing] .fl-module-rich-text blockquote) > :last-child { margin-bottom: 0; }
/* the "large" paragraph (h5 in TinyMCE) reads as a lede */
:where(.fl-row[data-pardee-spacing] .fl-module-rich-text) h5, :where(.fl-row[data-pardee-spacing] .fl-module-rich-text) p:where([data-pardee-as="h5"]) { font-family: var(--font-body); font-weight: var(--pardee-body-weight); font-size: var(--pardee-lede-fs); line-height: 1.55; letter-spacing: .01em; color: var(--pardee-lede-fg, var(--pardee-fg-muted)); max-width: 56ch; margin: 0 0 1em; }
:where(.fl-row[data-pardee-spacing] .fl-module-rich-text) h5:last-child, :where(.fl-row[data-pardee-spacing] .fl-module-rich-text) p:where([data-pardee-as="h5"]):last-child { margin-bottom: 0; }   /* the module margin carries the gap (lede→CTA 28) */
:where(.fl-row[data-pardee-spacing] .fl-module-rich-text) h2,
:where(.fl-row[data-pardee-spacing] .fl-module-rich-text) h3,
:where(.fl-row[data-pardee-spacing] .fl-module-rich-text) h4 { color: var(--pardee-fg); margin: 1.4em 0 .5em; }
:where(.fl-row[data-pardee-spacing] .fl-module-rich-text) ul,
:where(.fl-row[data-pardee-spacing] .fl-module-rich-text) ol { padding-left: 1.2em; margin: 0 0 1em; }
:where(.fl-row[data-pardee-spacing] .fl-module-rich-text) li { margin: 0 0 .4em; }
:where(.fl-row[data-pardee-spacing] .fl-module-rich-text) hr { border: 0; border-top: 1px solid var(--pardee-line); margin: 1.6em 0; }

/* ── Button — colours, typography, border, padding come from BB Global Styles; the Outline / Text link / Small selects fill
   the module's own fields (inc/bb-global-layer.php). Here: only the inline-flex label+icon layout and the hover gap. ── */
:where(.fl-row[data-pardee-spacing] .fl-module-button) a.fl-button,
:where(.fl-row[data-pardee-spacing] .fl-module-button-group) a.fl-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; white-space: nowrap; text-decoration: none; }
:where(.fl-row[data-pardee-spacing] .fl-module-button .fl-button) .fl-button-icon { font-size: 14px; transition: transform var(--dur-base) var(--ease-soft); }
:where(.fl-row[data-pardee-spacing] .fl-module-button .fl-button:hover) .fl-button-icon-after { transform: translateX(3px); }
:where(.fl-row[data-pardee-spacing] .fl-module-button[data-pardee-button="textlink"]) a.fl-button,
:where(.fl-row[data-pardee-spacing] .fl-module-button[data-pardee-button="link"]) a.fl-button { font-size: 12px; letter-spacing: .2em; gap: 8px; transition: gap var(--dur-base) var(--ease-soft); }
:where(.fl-row[data-pardee-spacing] .fl-module-button[data-pardee-button="link"]) a.fl-button { font-size: 11px; letter-spacing: .14em; color: var(--pardee-eyebrow-color); }   /* design .hp-people__impact-link */
:where(.fl-row[data-pardee-spacing] .fl-module-button[data-pardee-button="textlink"]) a.fl-button { white-space: normal; line-height: 1.5; }   /* a long text link wraps inside a narrow cell (Owner Leasing decision strip) instead of overprinting its neighbour */
:where(.fl-row[data-pardee-spacing] .fl-module-button[data-pardee-button="textlink"]) a.fl-button:hover,
:where(.fl-row[data-pardee-spacing] .fl-module-button[data-pardee-button="link"]) a.fl-button:hover { gap: 14px; }
:where(.fl-row[data-pardee-spacing] .fl-module-button[data-pardee-button="textlink"] a.fl-button) .fl-button-icon,
:where(.fl-row[data-pardee-spacing] .fl-module-button[data-pardee-button="link"] a.fl-button) .fl-button-icon { font-size: 11px; }
:where(.fl-row[data-pardee-spacing] .fl-module-button-group) .fl-button-group-buttons { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; }
/* Label + icon on one centred line, 48px tall whatever the icon's font metrics: BB's base `.fl-builder-content .fl-button:is(a, button)`
   (0,2,1) sets inline-block, so this one layout rule sits at (0,3,1) — BB never writes `display` per node (Width → Full still works). */
.fl-row[data-pardee-spacing] .fl-module-button a.fl-button,
.fl-row[data-pardee-spacing] .fl-module-button-group a.fl-button { display: inline-flex; align-items: center; justify-content: center; }
.fl-row[data-pardee-spacing] .fl-module-button a.fl-button .fl-button-icon { line-height: inherit; }   /* the icon (16.9px FA) takes the button's 16px line box, not its own */
/* Component Library §04 button states (BB has no field): press = scale .96 with no colour change; keyboard focus = the site focus ring
   (surface-aware ring + halo, tokens --pardee-focus-*), which stays visible on a same-colour section. Hover colours stay BB's
   (Global Styles / the Pardee style select). */
:where(.fl-row[data-pardee-spacing] .fl-module-button) a.fl-button,
:where(.fl-row[data-pardee-spacing] .fl-module-button-group) a.fl-button { transition: background-color var(--dur-base) var(--ease-soft), color var(--dur-base) var(--ease-soft), border-color var(--dur-base) var(--ease-soft), transform var(--dur-fast) var(--ease-soft); }
:where(.fl-row[data-pardee-spacing] .fl-module-button) a.fl-button:active,
:where(.fl-row[data-pardee-spacing] .fl-module-button-group) a.fl-button:active { transform: scale(.96); }
:where(.fl-row[data-pardee-spacing] .fl-module-button) a.fl-button:focus-visible,
:where(.fl-row[data-pardee-spacing] .fl-module-button-group) a.fl-button:focus-visible { outline: var(--pardee-focus-w) solid var(--pardee-focus-ring); outline-offset: var(--pardee-focus-gap); box-shadow: 0 0 0 var(--pardee-focus-gap) var(--pardee-focus-halo); }
:where(.fl-row[data-pardee-spacing] .fl-module-button[data-pardee-button="textlink"]) a.fl-button:active,
:where(.fl-row[data-pardee-spacing] .fl-module-button[data-pardee-button="link"]) a.fl-button:active { transform: none; }   /* text links: gap grows, nothing scales */

/* ── List (core List module) — item padding is the module's own field (form default 11/24); here: the hairline + dash ── */
:where(.fl-row[data-pardee-spacing] .fl-module-list) .fl-list { list-style: none; }
:where(.fl-row[data-pardee-spacing] .fl-module-list .fl-list) .fl-list-item { position: relative; border-top: 1px solid var(--pardee-line); font-size: 14px; line-height: 1.5; color: var(--pardee-fg); }
:where(.fl-row[data-pardee-spacing] .fl-module-list .fl-list .fl-list-item)::before { content: ""; position: absolute; left: 0; top: 18px; width: 12px; height: 1px; background: var(--pardee-list-dash, var(--pp-terracotta)); }
[data-pardee-surface="ink"], [data-pardee-surface="ink-mid"], [data-pardee-surface="ink-deep"],
[data-pardee-surface="sable"], [data-pardee-surface="chocolate"], [data-pardee-surface="espresso"] { --pardee-list-dash: var(--pp-blush); }
[data-pardee-surface="sable"], [data-pardee-surface="chocolate"], [data-pardee-surface="espresso"], [data-pardee-surface="terracotta"] { --pardee-check-color: var(--pp-cream); }   /* rust checks vanish on brown bands — the designs use cream ticks there (Owner Leasing tenant evaluation) */
:where(.fl-row[data-pardee-spacing] .fl-module-list .fl-list) .fl-list-item-icon { display: none; }
:where(.fl-row[data-pardee-spacing] .fl-module-list .fl-list .fl-list-item-content) > * { margin: 0; }
/* List → Numbered: a 01 02 … counter in the eyebrow style instead of the dash */
:where(.fl-row[data-pardee-spacing] .fl-module-list) .fl-list-ordered { counter-reset: pardee-li; }
:where(.fl-row[data-pardee-spacing] .fl-module-list .fl-list-ordered) .fl-list-item { counter-increment: pardee-li; padding-left: 40px; }
:where(.fl-row[data-pardee-spacing] .fl-module-list .fl-list-ordered .fl-list-item)::before { content: counter(pardee-li, decimal-leading-zero); width: auto; height: auto; background: none; top: 15px; font-family: var(--font-body); font-weight: var(--pardee-w-bold); font-size: 11px; letter-spacing: .14em; line-height: inherit; color: var(--pardee-eyebrow-color); }   /* top = the row's padding + the row's own line-height, so the counter's baseline sits on the text's first-line baseline (designs: grid + align-items: baseline) */
/* "Pardee style → List style → Uppercase label rows" (home 04): uppercase labels between hairlines, no dash */
:where(.fl-row[data-pardee-spacing] .fl-module-list[data-pardee-list="rows"] .fl-list) .fl-list-item { font-weight: var(--pardee-w-bold); font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; line-height: 21px; }
:where(.fl-row[data-pardee-spacing] .fl-module-list[data-pardee-list="rows"] .fl-list .fl-list-item)::before { display: none; }
:where(.fl-row[data-pardee-spacing] .fl-module-list[data-pardee-list="rows"] .fl-list) .fl-list-item:where(:last-child) { border-bottom: 1px solid var(--pardee-line); }
/* "Pardee style → List style → Checklist": a 16px circled check (design .ss-check / .prep-check), terracotta on light rows, blush on dark */
:where(.fl-row[data-pardee-spacing] .fl-module-list[data-pardee-list="check"] .fl-list .fl-list-item)::before { top: 13px; width: 16px; height: 16px; background: var(--pardee-check-color, var(--pp-terracotta)); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M8 12.5l2.6 2.5L16 9.5'/%3E%3C/svg%3E") center / 16px 16px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M8 12.5l2.6 2.5L16 9.5'/%3E%3C/svg%3E") center / 16px 16px no-repeat; }
:where(.fl-row[data-pardee-spacing] .fl-module-list[data-pardee-list="check"] .fl-list) .fl-list-item { padding: 16px 0 16px 34px; border-top: 1px solid var(--pardee-line); font-size: 15px; line-height: 1.5; color: var(--pardee-check-fg, inherit); }   /* design .ss-checklist li: hairline rows, 16px pad */
:where(.fl-row[data-pardee-spacing] .fl-module-list[data-pardee-list="check"] .fl-list .fl-list-item)::before { top: 19px; }
:where([data-pardee-surface="ink"], [data-pardee-surface="ink-deep"], [data-pardee-surface="ink-mid"], [data-pardee-surface="sable"], [data-pardee-surface="chocolate"], [data-pardee-surface="espresso"]) .fl-module-list[data-pardee-list="check"] { --pardee-check-fg: rgba(255, 246, 240, .9); }

/* ── Photo ───────────────────────────────────────────────── */
:where(.fl-row[data-pardee-spacing] .fl-module-photo) .fl-photo-img { border-radius: var(--pardee-r-card); }
:where(.fl-row[data-pardee-spacing] .fl-module-photo) .fl-photo-caption { font-family: var(--font-body); font-weight: 400; font-size: 12px; letter-spacing: .04em; line-height: 1.5; color: var(--pardee-fg-muted); margin-top: 10px; }
/* on dark rows the caption is the portrait credit (design home 10 .hp-people__cap): italic display 18px, blush, left */
:where(.fl-row[data-pardee-spacing][data-pardee-surface="ink"], .fl-row[data-pardee-spacing][data-pardee-surface="ink-deep"], .fl-row[data-pardee-spacing][data-pardee-surface="ink-mid"], .fl-row[data-pardee-spacing][data-pardee-surface="sable"], .fl-row[data-pardee-spacing][data-pardee-surface="chocolate"], .fl-row[data-pardee-spacing][data-pardee-surface="espresso"]) .fl-module-photo .fl-photo-caption {   /* (0,2,0): above BB's base .fl-photo-caption size */ font-family: var(--font-display); font-style: italic; font-size: 18px; line-height: 1.65; letter-spacing: .02em; color: var(--pp-blush); text-align: left; margin-top: 14px; }

/* ── Separator — colour is the module's own field (form default = the surface hairline via the render filter) ── */
:where(.fl-row[data-pardee-spacing] .fl-module-separator) .fl-separator { border-top-style: solid; }

/* ── Accordion — item border (bottom hairline), item spacing (0) and label/content padding are the module's OWN fields (form defaults +
   the render filter swap BB's stock box for the hairline; an editor's border wins). Here: the top rule, the +/− circle, type. BB 2.9 nests
   `span.fl-accordion-button-icon > i.fl-accordion-button-icon.fas` — the span is the circle, the <i> is BB's own Font Awesome +/− (the
   Icon fields), so no ::before glyph here (a second glyph renders as tofu). ── */
:where(.fl-row[data-pardee-spacing] .fl-module-accordion) .fl-accordion { border-bottom: 1px solid var(--pardee-line); }   /* items carry the top hairline (BB field), this is the closing one */
:where(.fl-row[data-pardee-spacing] .fl-module-accordion) .fl-accordion-item { margin: 0; background: transparent; }
:where(.fl-row[data-pardee-spacing] .fl-module-accordion) .fl-accordion-button { background: transparent; border: 0; }
.fl-module-content .fl-accordion-button { position: relative; }
.fl-module-content .fl-accordion-button:hover,
.fl-module-content .fl-accordion-button:focus { position: relative; }   /* (0,3,0): BB's accordion frontend.css resets the button on :hover / :focus (`all: unset`, (0,2,0), later in the cascade), which would drop the position above and re-anchor the +/− circle to the column on hover and after a click — measurable only with a CDP mouse hover; static audits cannot see it */
.fl-module-content span.fl-accordion-button-icon, .fl-module-content i.fl-accordion-button-icon { opacity: 1; }
.fl-module-content span.fl-accordion-button-icon { display: flex; align-items: center; justify-content: center; }   /* (0,2,1): BB's per-node rule sets the icon span display:block, which kills the centring */   /* (0,2,1): BB's per-node `.fl-node-x .fl-accordion-button-icon { opacity: .5 }` greys every toggle */   /* the +/− circle positions against the button, not the page (BB's base sets static) */
/* the label sits inside an <h3> (BB 2.11 a11y markup): Global Styles' h3 size would hit it — (0,2,0) matches BB's own per-node
   label typography, which still wins by loading later */
.fl-module-content .fl-accordion-button,
.fl-module-content .fl-accordion-button-label { font-family: var(--font-display); font-weight: 400; font-size: 22px; letter-spacing: -.005em; line-height: 1.25; color: var(--pardee-fg); }
:where(.fl-row[data-pardee-spacing] .fl-module-accordion) .fl-accordion-button:hover { color: var(--pardee-fg-muted); }
/* Keyboard focus = the site ring. (0,3,0) like the position rule above: BB's accordion `:focus { all: unset }` (0,2,0) loads later
   and otherwise strips the outline, leaving a focused question with no visible ring. */
.fl-module-content .fl-accordion-button:focus-visible { outline: var(--pardee-focus-w) solid var(--pardee-focus-ring); outline-offset: var(--pardee-focus-gap); box-shadow: 0 0 0 var(--pardee-focus-gap) var(--pardee-focus-halo); }
:where(.fl-row[data-pardee-spacing] .fl-module-accordion) .fl-accordion-button-label { padding: 0; }
:where(.fl-row[data-pardee-spacing] .fl-module-accordion) span.fl-accordion-button-icon { opacity: 1; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; margin: 0; border: 1px solid var(--pardee-outline); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; line-height: 1; color: var(--pardee-fg); transition: background var(--dur-base) var(--ease-soft), color var(--dur-base) var(--ease-soft); }
:where(.fl-row[data-pardee-spacing] .fl-module-accordion) i.fl-accordion-button-icon { opacity: 1; position: static; width: auto; height: auto; margin: 0; padding: 0; border: 0; border-radius: 0; transform: none; font-size: 12px; line-height: 1; color: inherit; display: block; }   /* the <i> is only its glyph; the circle (span, inline-flex) centres it — a 100%-sized <i> puts the glyph on the top edge */
:where(.fl-row[data-pardee-spacing] .fl-module-accordion) i.fl-accordion-button-icon::before { display: block; line-height: 1; }
:where(.fl-row[data-pardee-spacing] .fl-module-accordion) span.fl-accordion-button-icon { line-height: 1; }   /* Font Awesome solid: .fas sets the family + weight 900 */
:where(.fl-row[data-pardee-spacing] .fl-module-accordion .fl-accordion-item-active) span.fl-accordion-button-icon { background: var(--pardee-fg); border-color: var(--pardee-fg); color: var(--pardee-btn-fg); }
:where(.fl-row[data-pardee-spacing] .fl-module-accordion) .fl-accordion-content { border: 0; background: transparent; font-family: var(--font-body); font-weight: var(--pardee-body-weight); font-size: 15px; line-height: 1.7; color: var(--pardee-fg-muted); max-width: 72ch; }   /* design .faq__body / .lm-faq answers run ~717px */
:where(.fl-row[data-pardee-spacing] .fl-module-accordion .fl-accordion-content) > :first-child { margin-top: 0; }
:where(.fl-row[data-pardee-spacing] .fl-module-accordion .fl-accordion-content) > :last-child  { margin-bottom: 0; }

/* A Gravity Form embed inside a panel column: the column is the card — no second frame (Buying / Owner Leasing form cards) */
.fl-row[data-pardee-spacing] .fl-col[data-pardee-panel] .pardee-embed--gform .pardee-embed__panel { border: 0; padding: 0; background: transparent; }   /* (0,3,0): the module's dark-row panel styling is (0,2,0); the column IS the card */

/* ── Phone ───────────────────────────────────────────────── */
@media (max-width: 768px) {
  .fl-module-content .fl-accordion-button, .fl-module-content .fl-accordion-button-label { font-size: 18px; }
  :where(.fl-row[data-pardee-spacing]) h1.fl-module-heading,
  :where(.fl-row[data-pardee-spacing]) h2.fl-module-heading { max-width: 100%; }
  :where(.fl-row[data-pardee-spacing] .fl-module-button:not([data-pardee-button="textlink"]):not([data-pardee-button="link"])) .fl-button { width: 100%; white-space: normal; line-height: 1.2; text-align: center; }
  :where(.fl-row[data-pardee-spacing] .fl-module-button .fl-button) .fl-button-text { line-height: 1.2; white-space: normal; }
  /* phones: the arrow sits at the design's 10px flex gap (.btn gap: 10px) — BB core's own icon margin (8px, 0,3,1) is
     dropped so a full-width label has the width the design gives it. (0,4,2); text links already zero it below. */
  .fl-row[data-pardee-spacing] .fl-module-button a.fl-button i.fl-button-icon-after { margin-left: 0; }
  .fl-row[data-pardee-spacing] .fl-module-button a.fl-button i.fl-button-icon-before { margin-right: 0; }
  :where(.fl-row[data-pardee-spacing] .fl-module-button[data-pardee-button="textlink"]) .fl-button,
  :where(.fl-row[data-pardee-spacing] .fl-module-button[data-pardee-button="link"]) .fl-button { width: auto; line-height: 1.4; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  :where(.fl-row[data-pardee-spacing] .fl-module-button .fl-button) .fl-button-icon,
  :where(.fl-row[data-pardee-spacing] .fl-module-button) a.fl-button,
  :where(.fl-row[data-pardee-spacing] .fl-module-accordion) .fl-accordion-button-icon { transition: none; }
  :where(.fl-row[data-pardee-spacing] .fl-module-button) a.fl-button:active { transform: none; }
}

/* ── Button arrow = the design's 14px line arrow (Lucide arrow-right), not the Font Awesome glyph ──
   BB's icon field only offers icon fonts; the FA arrow is a 17px filled glyph in a 24×16 box while every design export draws a
   1.2px-stroke arrow at 14px (11px on text links). The glyph is replaced with an SVG mask in currentColor, so the module's icon
   colour fields still apply. (0,3,1) — BB writes the icon's colour/size per node at (0,2,1) → (0,3,1). Other FA icons untouched. */
.fl-row[data-pardee-spacing] .fl-button i.fl-button-icon.fa-arrow-right,
.fl-row[data-pardee-spacing] .fl-button i.fl-button-icon.fa-long-arrow-alt-right,
.fl-row[data-pardee-spacing] .fl-button i.fl-button-icon.icon-pp-arrow-right,
.fl-row[data-pardee-spacing] .fl-module-content i.icon-pp-arrow-right {   /* module CTAs (grid-links, numbered rows…) use the same 1em line arrow */
  width: 1.08em; height: 1.08em; flex: 0 0 auto; font-size: inherit; line-height: 0;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
}
.fl-row[data-pardee-spacing] .fl-button i.fl-button-icon.fa-arrow-right::before,
.fl-row[data-pardee-spacing] .fl-button i.fl-button-icon.fa-long-arrow-alt-right::before,
.fl-row[data-pardee-spacing] .fl-button i.fl-button-icon.icon-pp-arrow-right::before,
.fl-row[data-pardee-spacing] .fl-module-content i.icon-pp-arrow-right::before { content: none; }
.fl-row[data-pardee-spacing] .fl-module-content i.icon-pp-arrow-right { display: inline-block; vertical-align: -0.12em; }

/* Hero display headings wrap like the exports (.hero__h1 sits in a ~9.5em measure: "Numbers are validation, / not the lead.") */
:where(.fl-row[data-pardee-spacing="hero"]) h1.fl-module-heading { max-width: 9.6em; }

/* a Text module that is only a <small> note (strip footnotes) runs the full column, like the exports' .ss-note (696px) */
:where(.fl-row[data-pardee-spacing]) .fl-module-rich-text:where(:has(> p:only-child > small:only-child)) { max-width: 92ch; }

/* ── Glass panel column (design .final__form): BB paints the translucent fill + ring per node (render filter); the blur is CSS-only.
   Dark tokens stay in force inside (no data-pardee-surface), so labels are tan and inputs are underline-only. */
:where(.fl-row[data-pardee-spacing]) .fl-col[data-pardee-panel="glass"] > .fl-col-content { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

/* ── List style "grid" (design .lifetime__list / .offer__grid): two columns, hairline rows, a vertical hairline between the columns,
   no marker. BB writes item padding per node (14px 0, render filter); the grid + hairlines live here. */
:where(.fl-row[data-pardee-spacing] .fl-module-list[data-pardee-list="grid"]) .fl-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
:where(.fl-row[data-pardee-spacing] .fl-module-list[data-pardee-list="grid"] .fl-list .fl-list-item)::before { display: none; }
:where(.fl-row[data-pardee-spacing] .fl-module-list[data-pardee-list="grid"] .fl-list) .fl-list-item { margin: 0; border-top: 1px solid var(--pardee-line); }
:where(.fl-row[data-pardee-spacing] .fl-module-list[data-pardee-list="grid"] .fl-list) .fl-list-item:nth-child(odd) { padding-right: 18px; }
:where(.fl-row[data-pardee-spacing] .fl-module-list[data-pardee-list="grid"] .fl-list) .fl-list-item:nth-child(even) { padding-left: 18px; border-left: 1px solid var(--pardee-line); }
@media (max-width: 768px) {
  :where(.fl-row[data-pardee-spacing] .fl-module-list[data-pardee-list="grid"]) .fl-list { grid-template-columns: 1fr; }
  :where(.fl-row[data-pardee-spacing] .fl-module-list[data-pardee-list="grid"] .fl-list) .fl-list-item:nth-child(even) { padding-left: 0; border-left: 0; }
}

/* ── Accordion label with a meta slot (design .srch summary: name left, "5 SAVED SEARCHES" right, toggle far right):
   `<span class="pardee-acc-meta">5 saved searches</span>` inside the item label. */
:where(.fl-row[data-pardee-spacing] .fl-module-accordion) .fl-accordion-button-label:has(> .pardee-acc-meta) { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding-right: 60px; }
:where(.fl-row[data-pardee-spacing] .fl-module-accordion) .pardee-acc-meta { font-family: var(--font-body); font-weight: var(--pardee-w-bold); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--pardee-fg-muted); white-space: nowrap; }

/* ── CTA pair: a button marked "on its own line" (data-pardee-break) spans the grid — design stacks button, then text link (Access, Offer, Lifetime). */
:where(.fl-row[data-pardee-spacing] .fl-col-content:has(> .fl-module-button + .fl-module-button)) > .fl-module.fl-module-button[data-pardee-break] { grid-column: 1 / -1; }
/* ── Column content alignment (data-pardee-col-align on the column): centres / right-aligns the modules and a CTA pair inside one column ── */
:where(.fl-row[data-pardee-spacing]) .fl-col[data-pardee-col-align="center"] > .fl-col-content.fl-col-content.fl-col-content { align-items: center; justify-items: center; justify-content: center; text-align: center; }
:where(.fl-row[data-pardee-spacing]) .fl-col[data-pardee-col-align="right"]  > .fl-col-content.fl-col-content.fl-col-content { align-items: flex-end; justify-items: end; justify-content: end; text-align: right; }
:where(.fl-row[data-pardee-spacing]) .fl-col[data-pardee-col-align="center"] > .fl-col-content.fl-col-content.fl-col-content.fl-col-content:where(:has(> .fl-module-button + .fl-module-button)) { grid-template-columns: auto auto; align-items: center; }
:where(.fl-row[data-pardee-spacing]) .fl-col[data-pardee-col-align="right"]  > .fl-col-content.fl-col-content.fl-col-content.fl-col-content:where(:has(> .fl-module-button + .fl-module-button)) { grid-template-columns: auto auto; align-items: center; }   /* the column's own align-items (flex-end) must not bottom-align a text link beside a button */
:where(.fl-row[data-pardee-spacing] .fl-col[data-pardee-col-align="center"]) .fl-module-button { justify-self: center; }
:where(.fl-row[data-pardee-spacing] .fl-col[data-pardee-col-align="right"]) .fl-module-button { justify-self: end; }
/* ── List style "plain" (design .agree__points): dash marker, no hairlines, 14px between items ── */
:where(.fl-row[data-pardee-spacing] .fl-module-list[data-pardee-list="plain"] .fl-list) .fl-list-item { border: 0; margin: 0 0 14px; }
:where(.fl-row[data-pardee-spacing] .fl-module-list[data-pardee-list="plain"] .fl-list) .fl-list-item:last-child { margin-bottom: 0; }
:where(.fl-row[data-pardee-spacing] .fl-module-list[data-pardee-list="plain"] .fl-list .fl-list-item)::before { top: .65em; }
/* ── An accordion panel that is a tag row (popular searches) runs the full width, not the 64ch reading measure ── */
:where(.fl-row[data-pardee-spacing] .fl-module-accordion) .fl-accordion-content:has(.pardee-tags) { max-width: none; }

/* hero lede on a photo: .92 (design .hero__sub) — restated after the generic .fl-module-rich-text h5 rule, which had the last word at equal specificity */
:where(.fl-row[data-pardee-spacing="hero"][data-pardee-surface="photo"] .fl-module-rich-text) h5, :where(.fl-row[data-pardee-spacing="hero"][data-pardee-surface="photo"] .fl-module-rich-text) p { color: rgba(255, 246, 240, .92); }

/* accordion names on a cream-warm row are ink (design .srch__name: --pp-ink); the toggle keeps its own colours */
:where(.fl-row[data-pardee-spacing][data-pardee-surface="cream-warm"] .fl-module-accordion) .fl-module-content .fl-accordion-button-label { color: var(--pp-ink); }   /* (0,2,0), after the generic label rule */
:where(.fl-row[data-pardee-spacing] .fl-module-accordion) i.fl-accordion-button-icon { font-size: 20px; }   /* design toggles draw a 20px "+" glyph inside the circle */
.fl-module-content .fl-accordion-item-active i.fl-accordion-button-icon { color: inherit; }   /* (0,3,1): BB paints the icon per node; open = cream glyph on the ink circle */

/* phones: a column's vertical hairline (sub-bar divider, BB per-node border) is a desktop device — columns stack */
@media (max-width: 768px) { .fl-row[data-pardee-spacing] .fl-col[data-pardee-panel="none"] > .fl-col-content { border-left-width: 0 !important; padding-left: 0; } }

/* phones: the header template's legacy top bar (ppbbm-top-bar, row .top-bar-container) hides its content below 768px but keeps a 96px
   empty band above the nav. The row goes with it. */
@media (max-width: 768px) { .fl-builder-content > .fl-row.top-bar-container { display: none; } }

/* ── heading style "bold": the export left an h3/h4 at the browser's 700 (Listing Marketing overview, offer papers) ── */
:where(.fl-row[data-pardee-spacing]) .fl-module-heading[data-pardee-heading-style="bold"] { font-weight: 700; }
/* ── centred / right pairs: the button rule above is (0,2,0) — restated at (0,2,0) AFTER it so the column alignment wins ── */
:where(.fl-row[data-pardee-spacing] .fl-col[data-pardee-col-align="center"]) .fl-module.fl-module-button { justify-self: center; }
:where(.fl-row[data-pardee-spacing] .fl-col[data-pardee-col-align="right"]) .fl-module.fl-module-button { justify-self: end; }
:where(.fl-row[data-pardee-align="center"]) .fl-col-content.fl-col-content.fl-col-content.fl-col-content:where(:has(> .fl-module-button + .fl-module-button)) { grid-template-columns: max-content max-content; justify-content: center; }
:where(.fl-row[data-pardee-align="center"] .fl-col-content:has(> .fl-module-button + .fl-module-button)) > .fl-module.fl-module-button { justify-self: center; }
/* hero on a photo: the micro line (<small>) reads at .78 (design .hero__micro), not the note's .6 */
:where(.fl-row[data-pardee-spacing="hero"][data-pardee-surface="photo"] .fl-module-rich-text) small { color: rgba(255, 246, 240, .78); }

/* the exports' .display--xl (our md size) is capped at min(22ch, 920px) with balanced wrapping (pardee-type.css) */
:where(.fl-row[data-pardee-spacing]) h2.fl-module-heading[data-pardee-heading="md"] { max-width: min(24ch, 920px); text-wrap: balance; }   /* 22ch clipped a single-line head (prep 13); 24ch keeps the two-line heads */
:where(.fl-row[data-pardee-spacing]) h2.fl-module-heading[data-pardee-heading="xl"] { max-width: min(24ch, 920px); text-wrap: balance; }

/* dash lists on dark rows read at cream .9 (design .ss-vs__list li) — the check variant already does */
:where([data-pardee-surface="ink"], [data-pardee-surface="ink-deep"], [data-pardee-surface="ink-mid"], [data-pardee-surface="sable"], [data-pardee-surface="chocolate"], [data-pardee-surface="espresso"]) .fl-module-list:not([data-pardee-list="check"]) .fl-list-item { color: rgba(255, 246, 240, .9); }
/* centred / right-aligned CTA pairs stack below tablet — declared last so it wins over the alignment rules above */
@media (max-width: 992px) {
  :where(.fl-row[data-pardee-align="center"]) .fl-col-content.fl-col-content.fl-col-content.fl-col-content:where(:has(> .fl-module-button + .fl-module-button)),
  :where(.fl-row[data-pardee-spacing]) .fl-col[data-pardee-col-align="center"] > .fl-col-content.fl-col-content.fl-col-content.fl-col-content:where(:has(> .fl-module-button + .fl-module-button)),
  :where(.fl-row[data-pardee-spacing]) .fl-col[data-pardee-col-align="right"] > .fl-col-content.fl-col-content.fl-col-content.fl-col-content:where(:has(> .fl-module-button + .fl-module-button)) { grid-template-columns: minmax(0, 1fr); justify-content: stretch; }
  :where(.fl-row[data-pardee-align="center"] .fl-col-content:has(> .fl-module-button + .fl-module-button)) > .fl-module.fl-module-button { grid-column: 1 / -1; }
}
/* dark-row list colour must not reach the uppercase row labels (home pillars) */
:where([data-pardee-surface="ink"], [data-pardee-surface="ink-deep"], [data-pardee-surface="ink-mid"], [data-pardee-surface="sable"], [data-pardee-surface="chocolate"], [data-pardee-surface="espresso"]) .fl-module-list[data-pardee-list="rows"] .fl-list-item { color: var(--pardee-fg); }
/* centred CTA pairs: spanning modules inflate max-content tracks, so the two buttons hug the centre line instead */
:where(.fl-row[data-pardee-align="center"]) .fl-col-content.fl-col-content.fl-col-content.fl-col-content:where(:has(> .fl-module-button + .fl-module-button)),
:where(.fl-row[data-pardee-spacing]) .fl-col[data-pardee-col-align="center"] > .fl-col-content.fl-col-content.fl-col-content.fl-col-content:where(:has(> .fl-module-button + .fl-module-button)) { grid-template-columns: 1fr 1fr; justify-content: stretch; }
:where(.fl-row[data-pardee-align="center"] .fl-col-content:has(> .fl-module-button + .fl-module-button)) > .fl-module.fl-module-button,
:where(.fl-row[data-pardee-spacing] .fl-col[data-pardee-col-align="center"] .fl-col-content:has(> .fl-module-button + .fl-module-button)) > .fl-module.fl-module-button { justify-self: end; }
:where(.fl-row[data-pardee-align="center"] .fl-col-content:has(> .fl-module-button + .fl-module-button)) > .fl-module.fl-module-button ~ .fl-module.fl-module-button,
:where(.fl-row[data-pardee-spacing] .fl-col[data-pardee-col-align="center"] .fl-col-content:has(> .fl-module-button + .fl-module-button)) > .fl-module.fl-module-button ~ .fl-module.fl-module-button { justify-self: start; }
@media (max-width: 992px) {
  :where(.fl-row[data-pardee-align="center"] .fl-col-content:has(> .fl-module-button + .fl-module-button)) > .fl-module.fl-module-button,
  :where(.fl-row[data-pardee-spacing] .fl-col[data-pardee-col-align="center"] .fl-col-content:has(> .fl-module-button + .fl-module-button)) > .fl-module.fl-module-button { grid-column: 1 / -1; justify-self: center; }
}

/* ── Text links follow the export family (mockups win). Buyer pages: Bodoni 13 uppercase with a hairline; seller
   pages (row data-pardee-family="seller"): Gotham 13.5 bold sentence-case, underlined. (0,3,1) beats BB's per-node typography. ── */
.fl-row[data-pardee-spacing] .fl-module-button[data-pardee-button="textlink"] a.fl-button { font-family: var(--pardee-tl-font); font-size: var(--pardee-tl-size); font-weight: var(--pardee-tl-weight); letter-spacing: var(--pardee-tl-ls); text-transform: var(--pardee-tl-case); text-decoration: var(--pardee-tl-underline); text-underline-offset: 4px; text-decoration-thickness: 1px; border-bottom-width: var(--pardee-tl-border); gap: var(--pardee-tl-gap); }
.fl-row[data-pardee-spacing] .fl-module-button[data-pardee-button="textlink"] a.fl-button .fl-button-text { font: inherit; letter-spacing: inherit; text-transform: inherit; }
/* panel eyebrows (mockup .ss-vs__k / .prep-vendor__k / .lm-system__k): 10.5px */
:where(.fl-row[data-pardee-spacing] .fl-col[data-pardee-panel]) h6.fl-module-heading, :where(.fl-row[data-pardee-spacing] .fl-col[data-pardee-panel]) p.fl-module-heading:where([data-pardee-as="h6"]) { font-size: 10.5px; letter-spacing: .2em; }

/* text-link colour + arrow size by family (buyer .alink ink-mid / 11px arrow · seller .sell-tcta #012F48 / 13px) */
.fl-row[data-pardee-spacing] .fl-module-button[data-pardee-button="textlink"] a.fl-button { color: var(--pardee-tl-color); }
.fl-row[data-pardee-spacing] .fl-module-button[data-pardee-button="textlink"] a.fl-button i.fl-button-icon { width: var(--pardee-tl-icon); height: var(--pardee-tl-icon); font-size: var(--pardee-tl-icon); }
:where(.fl-module-rich-text.pardee-tl-links) p > a:not(.pardee-tag):not(.pardee-btn) { font-family: var(--pardee-tl-font); font-size: var(--pardee-tl-size); font-weight: var(--pardee-tl-weight); letter-spacing: var(--pardee-tl-ls); text-transform: var(--pardee-tl-case); text-decoration: var(--pardee-tl-underline); text-underline-offset: 4px; color: var(--pardee-tl-color); }   /* mockup .sell-tcta rows written as one Text module with " · " separators (SD / SN keep-exploring) — class pardee-tl-links on the module */
.fl-module.pardee-tl-upper { --pardee-tl-color: var(--pp-ink-mid); }   /* .lm-case__link is ink-mid, not the seller #012F48 */

/* ── Centred CTA pairs centre as a PAIR.
   Having the two buttons hug the centre gutter reads off-centre as soon as the labels differ in
   width (About "Start here": pair centre 672 against the row's 720). The design is one flex row, justify-content:center.
   Two max-content tracks between minmax(0,1fr) spacers do that. The spanning modules would inflate the intrinsic
   tracks, so they take `contain: inline-size` — their max-content contribution becomes 0 while `width: 100%` still
   fills the row and each module's own measure (h2 24ch, rich-text 46/62ch) and centring survive. Declared last so it
   beats the hug rules above; below 993px the pair stacks. ── */
:where(.fl-row[data-pardee-align="center"]) .fl-col-content.fl-col-content.fl-col-content.fl-col-content:where(:has(> .fl-module-button + .fl-module-button)),
:where(.fl-row[data-pardee-spacing]) .fl-col[data-pardee-col-align="center"] > .fl-col-content.fl-col-content.fl-col-content.fl-col-content:where(:has(> .fl-module-button + .fl-module-button)) {
    grid-template-columns: minmax(0, 1fr) max-content max-content minmax(0, 1fr);
    justify-content: stretch;
}
:where(.fl-row[data-pardee-align="center"] .fl-col-content:has(> .fl-module-button + .fl-module-button)) > .fl-module.fl-module,
:where(.fl-row[data-pardee-spacing] .fl-col[data-pardee-col-align="center"] .fl-col-content:has(> .fl-module-button + .fl-module-button)) > .fl-module.fl-module { width: 100%; min-width: 0; contain: inline-size; justify-self: center; }
:where(.fl-row[data-pardee-align="center"] .fl-col-content:has(> .fl-module-button + .fl-module-button)) > .fl-module.fl-module-button,
:where(.fl-row[data-pardee-spacing] .fl-col[data-pardee-col-align="center"] .fl-col-content:has(> .fl-module-button + .fl-module-button)) > .fl-module.fl-module-button { grid-column: 2; width: auto; contain: none; justify-self: start; }
:where(.fl-row[data-pardee-align="center"] .fl-col-content:has(> .fl-module-button + .fl-module-button)) > .fl-module.fl-module-button ~ .fl-module.fl-module-button,
:where(.fl-row[data-pardee-spacing] .fl-col[data-pardee-col-align="center"] .fl-col-content:has(> .fl-module-button + .fl-module-button)) > .fl-module.fl-module-button ~ .fl-module.fl-module-button { grid-column: 3; }
/* a button marked "on its own line" still spans and centres */
:where(.fl-row[data-pardee-align="center"] .fl-col-content:has(> .fl-module-button + .fl-module-button)) > .fl-module.fl-module-button[data-pardee-break],
:where(.fl-row[data-pardee-spacing] .fl-col[data-pardee-col-align="center"] .fl-col-content:has(> .fl-module-button + .fl-module-button)) > .fl-module.fl-module-button[data-pardee-break] { grid-column: 1 / -1; justify-self: center; }
@media (max-width: 992px) {
    :where(.fl-row[data-pardee-align="center"]) .fl-col-content.fl-col-content.fl-col-content.fl-col-content:where(:has(> .fl-module-button + .fl-module-button)),
    :where(.fl-row[data-pardee-spacing]) .fl-col[data-pardee-col-align="center"] > .fl-col-content.fl-col-content.fl-col-content.fl-col-content:where(:has(> .fl-module-button + .fl-module-button)) { grid-template-columns: minmax(0, 1fr); }
    :where(.fl-row[data-pardee-align="center"] .fl-col-content:has(> .fl-module-button + .fl-module-button)) > .fl-module.fl-module-button,
    :where(.fl-row[data-pardee-spacing] .fl-col[data-pardee-col-align="center"] .fl-col-content:has(> .fl-module-button + .fl-module-button)) > .fl-module.fl-module-button,
    /* the second button is placed by a (0,4,0) sibling rule above — match it here or the stack keeps track 3 */
    :where(.fl-row[data-pardee-align="center"] .fl-col-content:has(> .fl-module-button + .fl-module-button)) > .fl-module.fl-module-button ~ .fl-module.fl-module-button,
    :where(.fl-row[data-pardee-spacing] .fl-col[data-pardee-col-align="center"] .fl-col-content:has(> .fl-module-button + .fl-module-button)) > .fl-module.fl-module-button ~ .fl-module.fl-module-button { grid-column: 1 / -1; justify-self: center; }
}

/* The arrow's spacing is the flex gap alone (design .alink: `gap: 8px`, and 14px on hover). BB core adds its own
   `.fl-builder-content .fl-button i.fl-button-icon-after { margin-left: 8px }` (0,3,1) on top of it, which pushed the
   chevron 16px off the label on every text link — visible against the mockup on home 02 Proof "See the full track
   record". Zero it here at (0,6,2) so only --pardee-tl-gap decides, hover included. */
.fl-row[data-pardee-spacing] .fl-module-button[data-pardee-button="textlink"] a.fl-button i.fl-button-icon { margin: 0; }

/* …and the rule's distance from the label is the line box, which the textlink rule never set: BB Global Styles' button
   typography covers `.fl-builder-content .fl-button:is(a, button)` (0,2,1) and pins `line-height: 16px`, so the hairline
   rode 5px under the label where the design sits at 8.4px. Design .alink declares no line-height — it inherits the
   mockup's body 1.65 — so take that. (The mockup's own 8.4px is measured in "Bodoni 72": opened over file:// it cannot
   load the Typekit bodoni-pt-variable, whose line box is shorter. 1.65 is the design's declaration; 6.5px is what the
   production face gives for it. Follow the declaration, not the mockup's pixel.) */
.fl-row[data-pardee-spacing] .fl-module-button[data-pardee-button="textlink"] a.fl-button { line-height: 1.65; }

/* ── Links on dark/brown surfaces default to CREAM ─────────────────────────────────────────────
   Prose/list anchors inside a dark row read the surface link tokens instead of whatever ink they
   inherited; without it the Useful Tools band on the blog category template renders ink-on-sable. Kept at
   (0,1,1)/(0,2,1) via :where() on the surface list so ANY classed rule — kit link styles, a module's
   own link chrome, page CSS, and per-node manual colours — still outranks this default. */
:where([data-pardee-surface="ink"], [data-pardee-surface="ink-deep"], [data-pardee-surface="ink-mid"], [data-pardee-surface="chocolate"], [data-pardee-surface="espresso"], [data-pardee-surface="sable"], [data-pardee-surface="terracotta"], [data-pardee-surface="photo"]) .fl-module-rich-text a,
:where([data-pardee-surface="ink"], [data-pardee-surface="ink-deep"], [data-pardee-surface="ink-mid"], [data-pardee-surface="chocolate"], [data-pardee-surface="espresso"], [data-pardee-surface="sable"], [data-pardee-surface="terracotta"], [data-pardee-surface="photo"]) .fl-module-list a { color: var(--pardee-link); transition: color var(--dur-base) var(--ease-soft); }
:where([data-pardee-surface="ink"], [data-pardee-surface="ink-deep"], [data-pardee-surface="ink-mid"], [data-pardee-surface="chocolate"], [data-pardee-surface="espresso"], [data-pardee-surface="sable"], [data-pardee-surface="terracotta"], [data-pardee-surface="photo"]) .fl-module-rich-text a:hover,
:where([data-pardee-surface="ink"], [data-pardee-surface="ink-deep"], [data-pardee-surface="ink-mid"], [data-pardee-surface="chocolate"], [data-pardee-surface="espresso"], [data-pardee-surface="sable"], [data-pardee-surface="terracotta"], [data-pardee-surface="photo"]) .fl-module-list a:hover { color: var(--pardee-link-hover); }