/*
Theme Name: Windsor Life Settlements
Description: Life settlement broker site: state and city hubs, company directory, calculator, blog. Mobile design at 899px, editorial breadcrumb and rail labels, Gravity Forms calculator embed.
Author: The Object Group
Version: 1.47.1
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: wls
*/

/* ── Tokens ───────────────────────────────────────────────────────── */
:root {
  --wls-navy: #0c2b3f;
  --wls-navy-deep: #081f2e;
  --wls-navy-hover: #153c53;
  --wls-ink: #10222e;
  --wls-body: #4a5b66;
  --wls-muted: #5a6b76;
  /* Was #7b8894, which is 3.63:1 on white — below AA for the 10-13.5px
     eyebrows, rail heads, meta lines and captions that use it. Measured 918
     failing instances across the site. #5f6b77 is 5.45:1 on white and 4.9:1
     on --wls-pale, and reads as the same quiet grey. */
  --wls-label: #5f6b77;
  --wls-link: #1d5b7e;
  --wls-gold: #b8873a;
  /* Gold for SMALL TEXT on light grounds. --wls-gold is 3.20:1 on white,
     which fails AA at the 10.5-12px the eyebrows use. This is not an
     invention: preview 06 already sets its own eyebrow to #8a6115 on light.
     5.52:1 on white, 4.91:1 on --wls-pale. --wls-gold keeps its job on rules,
     borders and anything on navy. */
  --wls-gold-text: #8a6115;
  --wls-gold-light: #d8ab61;
  --wls-pale: #eef2f6;
  /* The previews carry two separate pale ramps. --wls-pale is the ACCENT
     pale (--color-accent-100) and is blue-tinted; this is the NEUTRAL one
     (--color-neutral-100), near-white and barely cool. Backgrounds behind
     imagery use the neutral — the accent reads visibly blue at that size. */
  --wls-neutral-100: #f6f8fa;
  --wls-neutral-200: #e3e9ef;   /* image slots behind figures and cards */
  --wls-pale-accent: #a9cbe0;
  --wls-rule: #cdd8e0;
  --wls-rule-soft: #dbe4ea;
  --wls-footer-text: #e7edf2;
  --wls-gold-bright: #e0a83c;   /* footer column heads and review stars */
  --wls-footer-dim: #9fb0bd;

  --wls-font-body: 'Barlow', system-ui, sans-serif;
  --wls-font-head: 'Newsreader', Georgia, serif;
  /* Second serif, not a replacement. Seven previews specify Newsreader for
     headings; three specify Playfair Display. Scoped below by body class —
     never swap --wls-font-head to this. */
  --wls-font-display: 'Playfair Display', Georgia, serif;

  --wls-max: 1180px;
  --wls-gutter: clamp(16px, 4vw, 40px);
  --wls-sticky-top: 32px;
  --wls-measure: 44em;

  /* `.wls-two`'s gutter. It fed the tail prose's max-width until Q-075 made
     the company profile's numbered band a single column; the tail now shares
     `--wls-measure` with that band instead. Still the hero grid's gutter. */
  --wls-two-gap: 64px;
}

/* ── Base, scoped ─────────────────────────────────────────────────── */
#wls-root, #wls-root *, #wls-root *::before, #wls-root *::after { box-sizing: border-box; }
/* THE HORIZONTAL GUARD IS `clip`, NOT `hidden`, AND THE DIFFERENCE IS THE
   ONLY REASON ANY position:sticky IN THIS THEME WORKS.

   `overflow-x: hidden` with `overflow-y: visible` is not a thing CSS allows:
   the spec makes the used value of the other axis `auto`, so this rule turned
   #wls-root into a SCROLL CONTAINER. Its height is auto, so it never actually
   scrolls — and a sticky element inside a scroll container that cannot scroll
   never sticks. Every `position: sticky` in this file is a descendant of
   #wls-root, so every one of them was dead.

   Measured on /life-settlement/ at 1440 before the change:

     .wls-rail computed position   sticky, top 32px
     rail viewport-top at scrollY 0      619
     rail viewport-top at scrollY 1500  -881   <- scrolled away with the page

   And proved by A/B in the same session: setting overflow-x to visible made
   it stick at 32, and setting it to `clip` did the same while still clipping.
   `clip` does not create a scroll container, so overflow-y stays `visible`.

   The design asks for this. Previews 07 and 09 write the rail as
   `position:sticky;top:32px` inline and preview 08 uses `top:96px`, so the
   sticky rail is the design and it had simply never rendered.

   `hidden` first, then `clip`: a browser without `clip` support keeps exactly
   today's behaviour rather than losing the horizontal guard. Verified after
   the change that no page gains horizontal overflow. */
#wls-root {
  background: #fff; color: var(--wls-ink);
  font-family: var(--wls-font-body); font-size: 15px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}
#wls-root h1, #wls-root h2, #wls-root h3, #wls-root h4 {
  font-family: var(--wls-font-head); font-weight: 400;
  line-height: 1.1; letter-spacing: -.01em; margin: 0;
}
#wls-root p { margin: 0; }
#wls-root ul, #wls-root ol { margin: 0; padding: 0 0 0 1.15em; }
#wls-root li { margin: 0 0 10px; }
#wls-root a { color: var(--wls-link); text-decoration: none; }
#wls-root a:hover { color: var(--wls-navy); }
/* An <img> carrying width/height attributes gets them as PRESENTATIONAL HINTS,
   which sit below every author rule. `max-width:100%` constrains the width and
   leaves the height hint standing, so the image stretches. Elementor's own
   stylesheet supplied the `height:auto` that stops that; removing Elementor
   removed it, and nothing here replaced it.

   Measured on staging across nine representative pages, ignoring deliberate
   object-fit crops: TWO images genuinely stretched — page 163's offer sheet at
   1152x1563 where production renders 817x665 (40% off its natural ratio), and
   a content image on the directory page at 660x1280 against a natural 1920x1280
   (66% off). Both carry height attributes and neither had a CSS height.

   THE SELECTOR IS BARE ON PURPOSE. `#wls-root img { height:auto }` would be
   (1,0,1) and would beat `.wls-card-img img`, `.wls-hero-fig img`,
   `.wls-fig-img img`, `.wls-fig-slot img` and `.wls-related-img img` — all
   (0,1,1) — silently un-cropping every card, hero figure, company figure and
   related thumbnail on the site. A bare `img` is (0,0,1): it outranks the
   attribute hint, which is all it needs to do, and loses to every one of those
   crop rules. Placed here, ahead of them, so source order agrees too. */
img { height: auto; }
#wls-root img { display: block; max-width: 100%; }
#wls-root ::selection { background: #cfe0ea; }
#wls-root :focus-visible { outline: 2px solid var(--wls-link); outline-offset: 2px; }

.wls-wrap { max-width: var(--wls-max); margin: 0 auto; padding-left: var(--wls-gutter); padding-right: var(--wls-gutter); }
.wls-eyebrow { font-weight: 600; font-size: 12px; letter-spacing: .24em; text-transform: uppercase; }
.wls-rule-gold { display: flex; align-items: center; gap: 12px; margin-top: 24px; }
.wls-rule-gold::before { content: ''; width: 40px; height: 1px; background: var(--wls-gold); }
.wls-rule-gold > span { color: var(--wls-gold); }

/* ── Buttons ──────────────────────────────────────────────────────── */
.wls-btn {
  display: inline-block; font-weight: 600; font-size: 14.5px;
  letter-spacing: .03em; padding: 13px 22px; border: 1px solid transparent;
  transition: background .15s, color .15s, border-color .15s;
}
#wls-root .wls-btn--gold  { background: rgba(216,171,97,.12); color: #fff; border-color: var(--wls-gold-light); }
#wls-root .wls-btn--gold:hover { background: rgba(216,171,97,.22); color: #fff; }
#wls-root .wls-btn--ghost { color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.3); }
#wls-root .wls-btn--ghost:hover { background: rgba(255,255,255,.08); color: #fff; }
#wls-root .wls-btn--navy  { background: var(--wls-navy); color: #fff; border-color: var(--wls-navy); font-size: 14px; padding: 12px 18px; }
#wls-root .wls-btn--navy:hover { background: var(--wls-navy-hover); color: #fff; }
#wls-root .wls-btn--line  { color: var(--wls-navy); border-color: var(--wls-rule); font-size: 14px; padding: 12px 18px; }
#wls-root .wls-btn--line:hover { background: var(--wls-pale); color: var(--wls-navy); }
#wls-root .wls-btn--pale  { background: var(--wls-pale-accent); color: var(--wls-navy); border-color: var(--wls-pale-accent); font-size: 15px; padding: 14px 26px; }
#wls-root .wls-btn--pale:hover { background: #c3dcec; color: var(--wls-navy); }
#wls-root .wls-btn--outline-light { color: #fff; border-color: rgba(255,255,255,.45); font-size: 15px; padding: 14px 26px; }
#wls-root .wls-btn--outline-light:hover { background: rgba(255,255,255,.1); color: #fff; }
.wls-btn-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }

/* ── Site header ──────────────────────────────────────────────────── */
/* NOT sticky, and the `position: sticky; top: 0` that used to sit here was
   dead anyway: `.wls-header { position: relative }` in the header block below
   is the same (0,1,0) specificity and comes later, so source order decided it.
   Ninth instance of that trap in this file.

   Removed rather than promoted. A permanently sticky header takes 84px off
   every mobile viewport on every page; the drawer only needs the header
   pinned while it is open, which is what the `:has(.wls-menu-toggle[open])`
   rule in the 1.42.0 block does. z-index stays — `relative` is a positioned
   value, so the desktop submenus still stack correctly against it. */
.wls-header { background: var(--wls-navy); color: #fff; z-index: 40; }
.wls-header .wls-wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 16px; padding-bottom: 16px; }
.wls-brand { display: flex; align-items: center; gap: 10px; color: #fff; flex: none; }
/* Two logo paths, styled the same. WordPress hardcodes width/height
   attributes on .custom-logo (854x272 here) and adds responsive-image
   rules, so the height needs !important to win — the only !important in
   this stylesheet. */
#wls-root .custom-logo-link,
#wls-root .wls-brand { display: flex; align-items: center; line-height: 0; flex: none; color: #fff; }
#wls-root img.custom-logo,
#wls-root .wls-brand img { height: 72px !important; width: auto !important; max-width: none !important; }
@media (max-width: 900px) {
  #wls-root img.custom-logo,
  #wls-root .wls-brand img { height: 52px !important; }
}
.wls-nav { display: flex; align-items: center; gap: 26px; }

/* Menus are <ul class="wls-menu"> — same class in the header and the
   footer, laid out by context. Reset the list here, not per page. */
#wls-root .wls-menu { list-style: none; margin: 0; padding: 0; }
#wls-root .wls-menu li { margin: 0; }
#wls-root .wls-menu li::marker { content: none; }

#wls-root .wls-nav .wls-menu { display: flex; align-items: center; gap: 26px; flex-wrap: nowrap; }
/* #wls-root prefix required: the base rule #wls-root a is an ID selector
   and outranks any bare class rule here. */
#wls-root .wls-nav .wls-menu a,
#wls-root .wls-nav > a:not(.wls-nav-phone) { color: #fff; font-size: 13px; letter-spacing: .04em; white-space: nowrap; }
#wls-root .wls-nav .wls-menu a:hover,
#wls-root .wls-nav > a:not(.wls-nav-phone):hover { color: var(--wls-pale-accent); }
#wls-root .wls-nav .wls-menu .current-menu-item > a { color: var(--wls-pale-accent); }
#wls-root .wls-nav-phone { color: #fff; }
#wls-root .wls-nav-phone:hover { background: rgba(255,255,255,.1); color: #fff; }
.wls-nav-phone { display: flex; align-items: center; gap: 8px; color: #fff; border: 1px solid rgba(255,255,255,.45); padding: 9px 16px; font-weight: 600; font-size: 15px; letter-spacing: .02em; white-space: nowrap; }
#wls-root .wls-nav-phone:hover { background: rgba(255,255,255,.1); color: #fff; }

/* ── Hero ─────────────────────────────────────────────────────────── */
.wls-hero { background: var(--wls-navy); color: #fff; border-top: 1px solid rgba(255,255,255,.12); }
.wls-hero .wls-wrap { padding-top: 52px; padding-bottom: 60px; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(32px,5vw,72px); align-items: center; }
.wls-hero--solo .wls-wrap { grid-template-columns: minmax(0,1fr); }
/* EIGHTH INSTANCE OF THE #wls-root TRAP. This was (0,1,1) and
   `#wls-root h1..h4 { line-height: 1.1 }` is (1,0,1), so the hero's own 1.02
   never applied — measured live, the h1 computed 70.4px where preview 07's
   1.02 gives 65.3px. font-size and max-width were unaffected because the theme
   rule does not set them, which is why only the leading was wrong. */
#wls-root .wls-hero h1 { font-size: clamp(40px,4.8vw,64px); line-height: 1.02; color: #fff; max-width: 14em; }
/* Place names get the design's larger step. Scoped to --place so the 36 state
   and city pages match previews/03-los-angeles and 04-california, while the
   seven other templates sharing parts/hero.php keep the 64px cap — their
   titles run to 81 characters and would not survive it.

   This sits ABOVE the media queries on purpose: the 899px and 430px steps
   carry the same specificity, so they only keep winning on mobile by virtue
   of coming later. Do not move it below them.

   Checked against all 36 titles at 1440, 940 and 407: no overflow anywhere.
   Longest is "Fort Lauderdale", which wraps to two lines at 1440 as two words
   should. max-width is dropped because the design has none; at 80px the 14em
   cap never binds on a 514px column anyway. */
#wls-root .wls-hero--place h1 { font-size: clamp(48px,6vw,80px); line-height: 1; max-width: none; }
/* Cities take a smaller step than states: preview 03 (Los Angeles) sets
   clamp(44px,5.4vw,72px) where preview 04 (California) sets 48/6vw/80. Both
   were getting the state size. */
#wls-root .wls-hero--city h1 { font-size: clamp(44px,5.4vw,72px); }
.wls-hero-fig { margin: 0; border: 1px solid rgba(255,255,255,.25); padding: 10px; }
.wls-hero-fig > div { aspect-ratio: 16/10; overflow: hidden; background: rgba(255,255,255,.08); }
.wls-hero-fig img { width: 100%; height: 100%; object-fit: cover; }

.wls-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-bottom: 22px; }
#wls-root .wls-crumbs a { color: rgba(255,255,255,.6); }
#wls-root .wls-crumbs a:hover { color: #fff; }
#wls-root .wls-crumbs [aria-current] { color: var(--wls-pale-accent); }

/* ── Body layout: rail + prose ────────────────────────────────────── */
.wls-body { padding-top: 72px; padding-bottom: 88px; }
.wls-body-grid { display: grid; grid-template-columns: 240px minmax(0,1fr); gap: clamp(32px,6vw,80px); align-items: start; }

/* -webkit-sticky first, on every sticky in this file. Safari 6.1-12.1 and iOS
   Safari 6-12.5 only honour the prefixed value, and this audience skews old
   enough to be worth the one line. The unprefixed declaration follows, so any
   browser that understands it takes it. */
.wls-rail { position: -webkit-sticky; position: sticky; top: var(--wls-sticky-top); }
.wls-rail-head { font-weight: 600; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--wls-label); margin-bottom: 14px; }
.wls-rail-list { display: flex; flex-direction: column; border-top: 1px solid var(--wls-rule); }
.wls-rail-list a { padding: 10px 2px; border-bottom: 1px solid var(--wls-rule); font-size: 14px; color: var(--wls-navy); }
#wls-root .wls-rail-list a:hover, .wls-rail-list a[aria-current="true"] { color: var(--wls-link); }
.wls-rail-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 26px; }

/* Share block */
.wls-share { margin-top: 30px; }
.wls-share .wls-rail-head { margin-bottom: 10px; }
.wls-share-list { display: flex; flex-direction: column; border-top: 1px solid var(--wls-rule); }
#wls-root .wls-share-list a,
#wls-root .wls-share-list button,
#wls-root .wls-copy-link {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 2px; border: 0; border-bottom: 1px solid var(--wls-rule);
  background: transparent; cursor: pointer; text-align: left;
  font-family: var(--wls-font-body); font-size: 14px; color: var(--wls-navy);
}
#wls-root .wls-share-list a:hover,
#wls-root .wls-share-list button:hover,
#wls-root .wls-copy-link:hover { color: var(--wls-link); }
/* The label swaps to "Copied" for two seconds. "Copy link" is the wider of
   the two strings, so without a floor the row would shrink on click and snap
   back — a jump right under the pointer that reads as a mis-click. 5.5em is
   measured: "Copy link" is 5.4em at this size. */
#wls-root .wls-copy-label { display: inline-block; min-width: 5.5em; }
.wls-share-list svg { flex: none; color: var(--wls-link); }

/* ── Prose: styles bare editor HTML, no wrappers required ───────────
   Descendant selectors, not child selectors: the body copy is wrapped in
   .wls-section / .wls-lede at render time, so > would stop matching. ── */
.wls-prose { max-width: var(--wls-measure); }

/* #wls-root prefix is required on every rule that sets a margin here.
   The base resets (#wls-root p { margin: 0 }, and the h1-h4 rule) are ID
   selectors, so a bare .wls-prose p never applied and the body copy had
   no margins at all — which is why the live page read denser than the
   design despite the values matching. */
#wls-root .wls-prose p { font-size: 16.5px; line-height: 1.72; color: var(--wls-body); margin: 0 0 16px; text-wrap: pretty; }
#wls-root .wls-prose > p:first-of-type,
#wls-root .wls-prose .wls-lede > p:first-child { font-size: 19px; line-height: 1.66; color: var(--wls-ink); margin-bottom: 18px; }
#wls-root .wls-prose h2 { font-size: clamp(26px,2.6vw,32px); margin: 0 0 16px; }
#wls-root .wls-prose h3 { font-size: 21px; line-height: 1.25; margin: 28px 0 12px; }
#wls-root .wls-prose ul, #wls-root .wls-prose ol { font-size: 16.5px; line-height: 1.68; color: var(--wls-body); margin: 0 0 18px; }
.wls-prose strong { color: var(--wls-ink); }
/* SEVENTH INSTANCE OF THE #wls-root TRAP. This was (0,2,1) and
   `#wls-root a { text-decoration: none }` is (1,0,1), so the theme's prose
   underline never applied — measured live, every prose link computed
   text-decoration-line: none. The only underlined links on the site were the
   ones whose content carries an inline `text-decoration: underline`, which is
   why two links in the same paragraph rendered differently.

   Preview 07 underlines prose links throughout: twelve inline
   `text-decoration:underline;text-underline-offset:3px`. `.wls-article a`
   already carries the prefix and has always worked; `.wls-prose a` did not. */
#wls-root .wls-prose a { text-decoration: underline; text-underline-offset: 3px; }
#wls-root .wls-prose blockquote { margin: 0 0 16px; font-family: var(--wls-font-head); font-size: 20px; line-height: 1.4; color: var(--wls-navy); border-left: 2px solid var(--wls-gold); padding-left: 18px; }
#wls-root .wls-prose blockquote p { margin: 0; font: inherit; color: inherit; }

/* Section wrapper written by wls_prepare_content(): hairline between H2s */
.wls-section { scroll-margin-top: var(--wls-sticky-top); }
#wls-root .wls-prose .wls-section > *:last-child,
#wls-root .wls-prose .wls-lede > *:last-child { margin-bottom: 0; }
.wls-section + .wls-section { border-top: 1px solid var(--wls-rule); margin-top: 44px; padding-top: 44px; }
.wls-lede + .wls-section { border-top: 1px solid var(--wls-rule); margin-top: 44px; padding-top: 44px; }

/* Numbered process list: <ol class="wls-steps"> */
#wls-root .wls-steps { list-style: none; padding: 0; margin: 0 0 18px; counter-reset: step; border-top: 1px solid var(--wls-rule); }
#wls-root .wls-steps > li { counter-increment: step; display: grid; grid-template-columns: 44px minmax(0,1fr); gap: 16px; border-bottom: 1px solid var(--wls-rule); padding: 16px 0; margin: 0; font-size: 16px; line-height: 1.68; color: var(--wls-body); }
.wls-steps > li::before { content: counter(step,decimal-leading-zero); font-family: var(--wls-font-head); font-size: 22px; color: var(--wls-gold); line-height: 1.2; }

/* Two-up comparison: <div class="wls-twoup"><div class="wls-twoup-yes">… */
.wls-twoup { display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: 28px; margin-bottom: 18px; }
.wls-twoup > div { border-top: 2px solid var(--wls-rule); padding-top: 16px; }
.wls-twoup > .wls-twoup-yes { border-top-color: var(--wls-gold); }
#wls-root .wls-twoup p { font-size: 16px; line-height: 1.5; color: var(--wls-ink); font-weight: 600; margin: 0 0 12px; }
#wls-root .wls-twoup ul { font-size: 15.5px; line-height: 1.65; color: var(--wls-body); margin: 0; }

/* ── FAQ: native <details>, no script ─────────────────────────────── */
.wls-faq { border-bottom: 1px solid var(--wls-rule); }
.wls-faq:first-of-type { border-top: 1px solid var(--wls-rule); }
.wls-faq > summary {
  list-style: none; cursor: pointer; padding: 16px 4px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  color: var(--wls-navy); font-family: var(--wls-font-body); font-size: 16px; line-height: 1.35;
}
.wls-faq > summary::-webkit-details-marker { display: none; }
.wls-faq > summary::after { content: '+'; font-weight: 600; font-size: 20px; line-height: 1; color: var(--wls-link); flex: none; }
.wls-faq[open] > summary::after { content: '\2013'; }
#wls-root .wls-faq > summary:hover { background: var(--wls-pale); }
#wls-root .wls-faq > *:not(summary) { background: var(--wls-pale); padding: 0 4px; font-size: 15px; line-height: 1.68; color: var(--wls-body); text-wrap: pretty; margin: 0; }
.wls-faq > *:not(summary):first-of-type { padding-top: 14px; }
.wls-faq > *:last-child { padding-bottom: 20px; }

/* ── CTA band ─────────────────────────────────────────────────────── */
.wls-cta { background: var(--wls-navy); color: #fff; }
.wls-cta .wls-wrap { padding-top: 72px; padding-bottom: 72px; text-align: center; }
#wls-root .wls-cta h2 { font-size: clamp(30px,3.4vw,42px); margin: 0 0 18px; }
#wls-root .wls-cta-hours { margin: 0 0 26px; font-size: 14px; line-height: 1.6; letter-spacing: .06em; color: rgba(255,255,255,.7); }
.wls-cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ── Explore More ─────────────────────────────────────────────────── */
.wls-explore { background: var(--wls-pale); border-top: 1px solid var(--wls-rule); }
.wls-explore .wls-wrap { padding-top: clamp(48px,6vw,80px); padding-bottom: clamp(48px,6vw,80px); }
/* Preview 02's "While you wait" section sets h2 { margin: 0 0 28px } and pads
   the section clamp(48px,6vw,80px). The heading carried margin:0 here, so the
   card grid sat flush against it — measured 0px between the two. */
#wls-root .wls-explore h2 { font-size: clamp(26px,2.8vw,34px); margin: 0 0 28px; }
.wls-band-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 30px; }
#wls-root .wls-band-head p { font-size: 15.5px; line-height: 1.7; color: var(--wls-body); margin: 0; max-width: 40em; text-wrap: pretty; }
.wls-eyebrow--gold { color: var(--wls-gold); margin-bottom: 16px; }
.wls-cards { display: grid; grid-template-columns: repeat(auto-fill,minmax(280px,1fr)); gap: clamp(20px,2.4vw,30px); }
.wls-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--wls-rule-soft); color: var(--wls-ink); }
#wls-root .wls-card:hover { border-color: var(--wls-navy); color: var(--wls-ink); }
.wls-card-img { aspect-ratio: 16/10; overflow: hidden; border-bottom: 1px solid var(--wls-rule-soft); background: var(--wls-rule-soft); }
.wls-card-img img { width: 100%; height: 100%; object-fit: cover; }
.wls-card-txt { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.wls-card-txt h3 { font-size: 24px; line-height: 1.15; color: var(--wls-navy); }
#wls-root .wls-card-txt p { font-size: 14px; line-height: 1.58; color: var(--wls-muted); text-wrap: pretty; }
.wls-card-more { margin-top: auto; padding-top: 8px; font-weight: 600; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--wls-link); }

/* ── Footer ───────────────────────────────────────────────────────────
   Matches the approved home-page footer exactly: gold column heads, the
   boxed review score with gold stars, and a stacked legal block. The
   column grid is auto-fit with a 200px minimum and is deliberately NOT
   overridden at any breakpoint — that is what produces four columns on
   desktop and one on a phone. ── */
.wls-footer { background: #08202f; color: #c5d8e4; }
.wls-footer .wls-wrap { padding-top: clamp(48px,6vw,72px); padding-bottom: 32px; }
.wls-footer-cols { display: grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap: clamp(28px,4vw,48px); }
.wls-footer-head { font-weight: 400; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--wls-gold-bright); margin-bottom: 18px; }
.wls-footer-links { display: flex; flex-direction: column; gap: 9px; }
#wls-root .wls-footer-links .wls-menu { display: flex; flex-direction: column; gap: 9px; list-style: none; margin: 0; padding: 0; }
/* #wls-root-prefixed, because #wls-root a (1,0,1) beats a plain
   .wls-footer-links a (0,1,1) and this rule never applied. The footer links
   were therefore rendering in --wls-link (#1d5b7e) on the footer navy — 2.3:1,
   the worst contrast on the site, on every page. #c5d8e4 is 11.4:1.
   Measured 162 failing instances across the audit sample. */
#wls-root .wls-footer-links a,
#wls-root .wls-footer a { color: #c5d8e4; font-size: 15px; }
#wls-root .wls-footer a:hover { color: #fff; }
.wls-footer-note { color: #7fa8c2; }
.wls-footer-score { border: 1px solid rgba(143,192,221,.3); padding: 18px; display: inline-flex; flex-direction: column; }
.wls-footer-score b { font-family: var(--wls-font-head); font-weight: 400; font-size: 26px; line-height: 1; color: #fff; }
.wls-footer-score span { font-size: 14px; letter-spacing: 2px; color: var(--wls-gold-bright); margin: 6px 0 4px; }
.wls-footer-score small { font-size: 12px; color: #7fa8c2; }
.wls-footer-legal { border-top: 1px solid rgba(143,192,221,.2); margin-top: clamp(36px,5vw,56px); padding-top: 24px; }
#wls-root .wls-footer-legal p { max-width: 80ch; font-size: 12px; line-height: 1.6; color: #6d8ba0; text-wrap: pretty; margin: 0 0 16px; }
#wls-root .wls-footer-legal p:last-child { font-size: 13px; color: #7fa8c2; margin: 0; max-width: none; }

/* Featured-image fallback: 13 records have none, and cards assume one. */
.wls-thumb-fallback {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; background: var(--wls-navy);
}
/* It fills its slot rather than declaring its own ratio. wls_thumbnail() is
   called only from archive.php, always inside .wls-card-img, which is 16/10
   and clips: the previous 3/2 box overflowed that slot and took its own
   border-bottom out of view with it. A bare call site would need a sized
   parent, which is the normal contract for a fill-the-box element. */
.wls-thumb-fallback img { width: 52%; height: auto; opacity: .8; }

/* ── Calculator results page ──────────────────────────────────────────
   /calc-thank-you/. The figure itself comes from the [policy_calc_sc]
   shortcode, whose markup is INLINE-STYLED — extracted verbatim from the old
   child theme, maths and all. Inline styles beat stylesheet rules, so these
   overrides carry !important, exactly as the shortcode's own mobile block
   does. The class names are the contract and must not change:
   calc_results, wls-figure, wls-head, wls-label, wls-value, wls-ch,
   wls-cf, wls-cn.

   Overriding rather than editing the PHP is deliberate: a typo in that file
   breaks the calculation, not just the appearance. ── */
.wls-calc-hero { background: var(--wls-navy); color: #fff; border-top: 1px solid rgba(255,255,255,.12); }
.wls-calc-hero .wls-wrap { padding-top: clamp(40px,5vw,68px); padding-bottom: clamp(40px,5vw,64px); }
#wls-root .wls-calc-hero h1 { font-size: clamp(30px,3.4vw,46px); line-height: 1.06; color: #fff; margin: 0; max-width: 22ch; text-wrap: balance; }
.wls-calc-out { margin: clamp(26px,3vw,38px) 0 clamp(28px,3vw,36px); }
#wls-root .wls-calc-hours { font-size: 14px; color: var(--wls-pale-accent); margin: 18px 0 0; }
/* Viatical eligibility note, form 25 only — see page-calc-thank-you.php.
   Deliberately the same treatment as the term disclaimer (13.5px #7fa8c2,
   80ch, 5.78:1 on the hero navy) so the page carries one disclaimer register
   rather than two competing ones.

   #wls-root is not decoration here: #wls-root p { margin: 0 } is (1,0,1) and
   a plain .wls-calc-elig at (0,1,0) would lose the margin silently. */
#wls-root .wls-calc-elig {
  font-size: 13.5px; line-height: 1.6; color: #7fa8c2;
  max-width: 80ch; margin: 30px 0 0; text-wrap: pretty;
}

/* The shortcode's own type and colour, remapped to the design. */
#wls-root .calc_results .content { max-width: 620px !important; margin: 0 !important; text-align: left !important; }
#wls-root .calc_results .wls-figure {
  font-family: var(--wls-font-head) !important;
  font-size: clamp(60px,9vw,104px) !important; line-height: 1 !important;
  color: var(--wls-pale-accent) !important; letter-spacing: -.02em !important;
  margin: 14px 0 0 !important;
}
/* Form 24's figure is a range, roughly 20 characters against 8, so it takes
   its own step. Distinguished by the body class the shortcode sets, since the
   renderer gives both the same .wls-figure class. */
body.wls-form-24 #wls-root .calc_results .wls-figure {
  font-size: clamp(38px,5vw,64px) !important;
}
#wls-root .calc_results .wls-head {
  font-family: var(--wls-font-head) !important;
  font-size: clamp(26px,3vw,34px) !important; line-height: 1.15 !important; color: #fff !important;
}
/* The renderer writes color:#10233f inline on .content — navy text on the
   navy hero, so form 24's status headline ("Not Currently Qualified",
   "Need More Info", "Strong Candidate") rendered invisible. Every other
   block was already covered: .wls-figure, .wls-head, .content > div, a,
   ol li and the table cells all have overrides. .content itself did not,
   and the status is a direct text node inside it rather than a child div.

   !important is required because the colour is inline. */
#wls-root .calc_results .content { color: #fff !important; }
#wls-root .calc_results .content > div { color: #c3d4e0 !important; }
/* .wls-head is itself a direct child div of .content, so the rule above —
   (1,2,1) — outranked the .wls-head rule at (1,1,1) and the form 21/25
   headline came out in the caption colour instead of white. Measured:
   rgb(195,212,224) where the design (preview 02, h1.wls-h1) is #fff.
   (1,3,0) here beats (1,2,1) on class count. */
#wls-root .calc_results .content > .wls-head { color: #fff !important; }
/* Same loss for the figure: .content > div (1,2,1) was overriding
   .calc_results .wls-figure (1,1,1), so the headline number rendered in the
   caption colour instead of the design's pale accent. Measured
   rgb(195,212,224) where preview 02 sets #a9cbe0. */
#wls-root .calc_results .content > .wls-figure { color: var(--wls-pale-accent) !important; }

/* Form 24's status headline — "Strong Candidate", "Need More Info",
   "Not Eligible", which preview 02 defines as the headline for the term
   states. The renderer gives it no .wls-head class, so it is matched by the
   thing that does distinguish it: it is the only .content the renderer hands
   the Cheltenham heading stack to inline. Targeting it by position instead
   was wrong — for forms 21 and 25 the first .content is the whole result
   block, not a headline, so the size landed on the wrapper.

   Matched to .wls-head, not to preview 02's larger h1 clamp: this template
   already emits its own H1 in the hero, and two headlines at 52px compete. */
#wls-root .calc_results .content[style*="Cheltenham"] {
  font-size: clamp(26px, 3vw, 34px) !important;
  line-height: 1.15 !important;
  margin-bottom: 4px !important;
}
#wls-root .calc_results a { color: #fff !important; text-decoration: underline !important; }
#wls-root .calc_results ol li { color: #e7edf2 !important; }
/* The gold rule the renderer draws between blocks.

   Preview 02 draws it 40x1px, not 64x2px, and sets it beside the caption in a
   flex row rather than above it. The width and weight are matched here; the
   POSITION is not, because the renderer emits the rule and the caption as two
   sibling divs and moving one beside the other needs a DOM change in
   inc/windsor-calculators.php, which is out of bounds. Recorded as a residual
   difference rather than approximated with a float, which would have to be
   cleared again by the table and the paragraphs that follow it in four of the
   six states. */
#wls-root .calc_results div[style*="height: 2px"] {
  background: var(--wls-gold) !important;
  width: 40px !important; height: 1px !important;
  margin: 22px 0 14px !important;
}

/* VIATICAL — the second rule is a section divider, not a repeat of the first.

   The renderer draws the same 64x2 gold rule twice: once under the figure and
   again between the "an estimate, not an offer" note and the three closing
   paragraphs. Preview 02 draws the second one as a full-width hairline at
   rgba(255,255,255,.18) with 24px of padding under it, which is what separates
   the figure from the reading matter and stops the block reading as one long
   run of text.

   `~` rather than :nth-child: it selects any 2px rule that FOLLOWS another, so
   it cannot accidentally catch the first one whatever order the renderer's
   branches emit. */
#wls-root .calc_results div[style*="height: 2px"] ~ div[style*="height: 2px"] {
  background: rgba(255,255,255,.18) !important;
  width: auto !important;
  margin: 26px 0 24px !important;
}
/* Preview 02 caps the viatical paragraphs and sets them 16.5px. The renderer
   runs them full width at 17px, which is what made the block read as an
   undifferentiated slab. .wls-figure and the rules are excluded so the figure
   keeps its own scale.

   54.5ch, not the design's 60ch, and the difference is not a compromise. The
   design puts `max-width:60ch` on a WRAPPER div whose font-size is the
   section's base, so the ch resolves against that and the box measures 567px.
   There is no wrapper in the renderer's markup, so the cap has to sit on the
   paragraphs themselves — where ch resolves against their own 16.5px and 60ch
   would be 624px, half a line longer than the design. 54.5ch at 16.5px is the
   same 567px. Measured: 567px against the design's 567px at 1440. */
body.wls-form-25 #wls-root .calc_results .content > div:not(.wls-figure):not([style*="height: 2px"]) {
  font-size: 16.5px !important;
  line-height: 1.6 !important;
  max-width: 54.5ch !important;
}

/* TERM — the specification table.

   Preview 02: container border-top rgba(255,255,255,.18), max-width 640,
   rows padding 15px 0 with a border-bottom rgba(255,255,255,.12) and none on
   the last, label 15.5px #9fb8c8, value 16px/600 #fff RIGHT aligned.

   The renderer instead puts a border-TOP on rows 2 and 3, which draws the same
   two interior lines but leaves the group with no rule above it, and sets the
   value 19px — three points larger than the design, which is what made the
   rows taller than they should be. */
#wls-root .calc_results table:not([style*="border-radius"]) {
  border-top: 1px solid rgba(255,255,255,.18) !important;
  max-width: 640px !important;
  margin: 32px 0 0 !important;
}
#wls-root .calc_results .wls-label,
#wls-root .calc_results .wls-value {
  padding: 15px 0 !important;
  border-top: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.12) !important;
}
#wls-root .calc_results tr:last-child .wls-label,
#wls-root .calc_results tr:last-child .wls-value { border-bottom: 0 !important; }
#wls-root .calc_results .wls-label {
  font-size: 15.5px !important; line-height: 1.45 !important;
  color: #9fb8c8 !important; text-align: left !important;
}
#wls-root .calc_results .wls-value {
  font-size: 16px !important; line-height: 1.45 !important; font-weight: 600 !important;
  color: #fff !important; text-align: right !important;
}

/* TERM — "Two ways to sell the same policy."

   The renderer writes text-align:center inline on this h3. Preview 02 sets no
   alignment at all, so it sits left with the rest of the content, and sizes it
   clamp(22px,2.4vw,28px) with 36px above and 18px below.

   Qualified `h3.wls-head` deliberately: .wls-head is also the life and
   viatical headline, which is a div and must keep the larger step above. */
#wls-root .calc_results h3.wls-head {
  font-size: clamp(22px,2.4vw,28px) !important;
  line-height: 1.3 !important;
  text-align: left !important;
  margin: 36px 0 18px !important;
}

/* TERM — the direct-buyer / Windsor comparison.

   The border colour already matched the design at rgba(255,255,255,.2); what
   made the panel read heavy was the filled #10233f header bar the renderer
   draws across the top, the 8px radius, and the missing hairline between the
   two columns. Preview 02 has no header bar: the eyebrow sits inside each
   panel on the panel's own ground, and the two panels are separated by a 1px
   gap over the border colour.

   The renderer's <th> cells are restyled into that eyebrow rather than being
   removed, since the markup is not ours to change. */
#wls-root .calc_results table[style*="border-radius"] {
  border-color: rgba(255,255,255,.2) !important;
  border-radius: 0 !important;
  margin: 0 0 34px !important;
}
#wls-root .calc_results table[style*="border-radius"] th + th,
#wls-root .calc_results table[style*="border-radius"] td + td {
  border-left: 1px solid rgba(255,255,255,.2) !important;
}
#wls-root .calc_results .wls-ch,
#wls-root .calc_results .wls-cf,
#wls-root .calc_results .wls-cn { background: #0f2c40 !important; }
#wls-root .calc_results th + th.wls-ch,
#wls-root .calc_results td + td.wls-cf,
#wls-root .calc_results td + td.wls-cn { background: #123549 !important; }
#wls-root .calc_results .wls-ch {
  padding: 20px 20px 0 !important;
  font-size: 11.5px !important; letter-spacing: .14em !important;
  font-weight: 400 !important; color: #9fb8c8 !important;
}
/* Preview 02 sets this eyebrow #b8873a. On the Windsor panel's #123549 that
   measures 4.02:1, below AA for 11.5px text — the same call already recorded
   in 1.28.0, where the design's own gold was replaced on light grounds by
   --wls-gold-text. This is the dark-ground half of it: --wls-gold-light
   already exists and measures 6.08:1 on the same ground. */
#wls-root .calc_results th + th.wls-ch { color: var(--wls-gold-light) !important; }
#wls-root .calc_results .wls-cf {
  padding: 14px 20px 12px !important;
  font-size: 26px !important; line-height: 1.15 !important;
  color: #fff !important; font-family: var(--wls-font-head) !important;
}
#wls-root .calc_results .wls-cn {
  padding: 0 20px 20px !important;
  font-size: 15.5px !important; line-height: 1.55 !important;
  color: #c3d4e0 !important;
}

/* TERM — the closing disclaimer.

   Found while regression-testing the six states, not in the brief. The
   renderer writes it #5a6472, which on the navy hero measures 2.44:1 — the
   only element under AA anywhere in the result block, and it renders on every
   term result. Every other block was already covered because the overrides key
   off `.content`, and this div is a direct child of .calc_results instead.

   Preview 02 sets it 13.5px #7fa8c2 with an 80ch measure, which is 5.78:1.
   Taking the design's own value rather than inventing one. */
#wls-root .calc_results > div[style*="font-size: 14px"] {
  font-size: 13.5px !important; line-height: 1.6 !important;
  color: #7fa8c2 !important; max-width: 80ch !important;
  margin-top: 30px !important;
}

/* Form 24's status table and comparison table. */
#wls-root .calc_results table { margin: 26px 0 !important; }

/* Next steps + reviews */
.wls-calc-next .wls-steps { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,240px),1fr)); gap: clamp(24px,3vw,44px); }
.wls-calc-next .wls-steps > div { border-top: 2px solid var(--wls-navy); padding-top: 22px; }
#wls-root .wls-calc-next .wls-steps h3 { font-family: var(--wls-font-body); font-size: 19px; font-weight: 600; color: var(--wls-navy); margin: 0 0 10px; }
#wls-root .wls-calc-next .wls-steps p { font-size: 16px; line-height: 1.6; color: var(--wls-body); margin: 0; text-wrap: pretty; }
.wls-calc-reviews { background: var(--wls-pale); border-top: 1px solid var(--wls-rule); border-bottom: 1px solid var(--wls-rule); }
.wls-calc-reviews .wls-wrap { padding-top: clamp(40px,4vw,60px); padding-bottom: clamp(40px,4vw,60px); }
.wls-calc-reviews-grid { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: clamp(28px,6vw,72px); align-items: center; }
.wls-calc-score { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
#wls-root .wls-calc-score b { font-family: var(--wls-font-head); font-weight: 400; font-size: 52px; line-height: 1; color: var(--wls-navy); }
#wls-root .wls-calc-score span { color: var(--wls-gold-bright); font-size: 18px; letter-spacing: 3px; }
#wls-root .wls-calc-quote { font-family: var(--wls-font-head); font-size: clamp(20px,2.2vw,26px); line-height: 1.4; color: var(--wls-ink); margin: 0 0 14px; text-wrap: pretty; }
#wls-root .wls-calc-cite { font-size: 14.5px; color: var(--wls-body); margin: 0; }

/* ── Header: two renderings of one menu ───────────────────────────
   Above 899px the desktop bar shows the links plus a bordered phone
   button. At 899px and below it is replaced by the phone number and a
   <details> hamburger whose panel drops below the header bar. <details>
   means no JavaScript; parts/nav-primary.php emits both branches from the
   same wp_nav_menu call, so an editor's menu drives desktop and mobile
   alike. ── */
.wls-header { position: relative; }
.wls-desktopbar { display: flex; align-items: center; gap: clamp(14px,2.2vw,28px); flex: none; }
.wls-mobilebar { display: none; align-items: center; gap: clamp(10px,3vw,18px); flex: none; }
#wls-root .wls-mobile-phone { color: #fff; font-size: clamp(14px,3.6vw,17px); font-weight: 500; white-space: nowrap; }
.wls-menu-toggle > summary {
  list-style: none; display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; cursor: pointer; color: #fff;
}
.wls-menu-toggle > summary::-webkit-details-marker { display: none; }
.wls-menu-toggle > summary::marker { content: ''; }
.wls-menupanel {
  padding: 8px clamp(16px,4vw,40px) 20px;
  border-top: 1px solid rgba(255,255,255,.15);
  background: var(--wls-navy);
}
#wls-root .wls-menu-mobile { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
#wls-root .wls-menu-mobile a { color: #e8f0f5; font-size: 17px; padding: 13px 0; display: block; }

/* Submenus — depth 2. The live menu has 5 children under Life Settlements
   and 8 under Viatical Settlements.

   Desktop: the panel opens on :hover and on :focus-within, so it works with
   no JavaScript and for keyboard users. assets/wls.js adds click-to-open and
   Escape-to-close on top, and keeps aria-expanded honest.

   Mobile: the walker renders each parent as a nested <details>, so the
   accordion is native. */
#wls-root .wls-menu { position: relative; }
#wls-root .wls-menu > li { position: relative; }
#wls-root .wls-menu > li > .wls-sub-toggle {
  appearance: none; background: none; border: 0; padding: 0 0 0 5px; margin: 0;
  color: inherit; cursor: pointer; line-height: 1; display: inline-flex; align-items: center;
}
/* THE PANEL IS CAPPED AND SCROLLS. Life Settlements carries nine children and
   Viatical Settlements seven, and nothing stopped either running off the
   bottom of a short laptop screen — there was no max-height and no overflow
   anywhere on this rule.

   The cap is measured from the viewport, not guessed: the panel opens at the
   bottom of the 84px header, so `100vh - 108px` leaves the header plus a 24px
   breathing gap below the panel at any window height. On a tall screen the
   nine items are 368px and the cap never binds; on a 600px-tall window it
   binds at 492px and the panel scrolls instead of disappearing off the edge.

   overscroll-behavior: contain so reaching the end of the panel does not
   start scrolling the page underneath it. The scrollbar is left visible here,
   unlike the directory chips — this is a genuine list that can be longer than
   its box, and the bar is the only thing that says so. */
#wls-root .wls-menu .sub-menu {
  position: absolute; top: 100%; left: -14px; z-index: 70;
  min-width: 260px; margin: 0; padding: 8px 0;
  list-style: none; display: none;
  background: var(--wls-navy); border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 18px 40px rgba(8,31,46,.35);
  max-height: calc(100vh - 108px);
  max-height: calc(100dvh - 108px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
#wls-root .wls-menu > li:hover > .sub-menu,
#wls-root .wls-menu > li:focus-within > .sub-menu,
#wls-root .wls-menu > li.wls-open > .sub-menu { display: block; }
#wls-root .wls-menu .sub-menu a {
  display: block; padding: 10px 18px; font-size: 14px; line-height: 1.35;
  color: #e8f0f5; white-space: normal;
}
#wls-root .wls-menu .sub-menu a:hover { background: rgba(255,255,255,.08); color: #fff; }
/* Hover bridge: the 1px gap between item and panel would close it mid-move. */
#wls-root .wls-menu > li.menu-item-has-children::after {
  content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 10px;
}

/* Mobile accordion */
#wls-root .wls-menu-mobile .wls-m-has-children > details > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center;
  justify-content: space-between; gap: 12px;
  color: #e8f0f5; font-size: 17px; padding: 13px 0;
}
#wls-root .wls-menu-mobile .wls-m-has-children > details > summary::-webkit-details-marker { display: none; }
#wls-root .wls-menu-mobile .wls-m-has-children > details[open] > summary svg { transform: rotate(180deg); }
#wls-root .wls-menu-mobile .wls-menu-sub {
  list-style: none; margin: 0 0 6px; padding: 2px 0 6px 14px;
  border-left: 1px solid rgba(255,255,255,.18);
}
#wls-root .wls-menu-mobile .wls-menu-sub a { font-size: 15px; padding: 10px 0; color: #c5d8e4; }
/* The closed panel must not lay out — absolutely positioned, it would
   otherwise shrink to the 44px summary and push its links off-canvas. */
.wls-menu-toggle:not([open]) .wls-menupanel { display: none !important; }


/* ── Responsive ───────────────────────────────────────────────────
   One breakpoint at 899px carries the mobile design; 430px is a second
   step for the narrowest phones. Type drops to a 34px H1, inputs go to
   16px (anything smaller makes iOS zoom the viewport on focus), and
   touch targets clear 44px. ── */
@media (max-width: 899px) {
  .wls-desktopbar { display: none; }
  .wls-mobilebar { display: flex; }
  .wls-menupanel { position: absolute; left: 0; right: 0; top: 100%; z-index: 60; }

  /* Hero and rail */
  .wls-hero .wls-wrap { grid-template-columns: minmax(0,1fr); padding-top: 34px; padding-bottom: 40px; gap: 28px; }
  #wls-root .wls-hero h1 { font-size: 34px; max-width: none; }
  /* A place name is one or two words, so it carries more size than the
     sentence-length headings the 34px step was written for. */
  #wls-root .wls-hero--place h1 { font-size: 46px; line-height: 1.02; }
  .wls-hero--place .wls-rule-gold { margin-top: 18px; }
  .wls-body-grid { grid-template-columns: minmax(0,1fr); gap: 0; }
  .wls-body { padding-top: 36px; padding-bottom: 56px; }
  /* The rail dissolves into the grid so the section list can sit above the
     content. The rail CTA repeats the hero buttons on mobile, so it is hidden.

     THE SHARE BLOCK IS HIDDEN HERE AND RE-RENDERED AFTER THE ARTICLE by
     parts/share-mobile.php. It used to be moved with `.wls-prose { order: 1 }`
     and `.wls-share { order: 2 }`, which put six focusable controls 9,000px
     down the page while leaving them third in the DOM — measured, and written
     up in parts/rail.php. `order` moves boxes and never tab order, so the two
     rules are gone rather than adjusted. */
  .wls-rail { display: contents; }
  .wls-body-grid { row-gap: 32px; }
  .wls-rail-cta { display: none; }
  .wls-rail .wls-share { display: none; }
  .wls-rail-phone { display: none; }

  /* Section headings */
  #wls-root .wls-prose h2 { font-size: 25px; }

  /* Breadcrumbs: last two levels only. */
  .wls-crumbs > *:nth-last-child(n+4) { display: none; }

  /* CTA buttons go full width rather than sitting half-width side by side. */
  .wls-cta-row { flex-direction: column; }
  .wls-cta-row > .wls-btn { width: 100%; text-align: center; padding-top: 15px; padding-bottom: 15px; }

  /* Calculator-form mobile overrides moved — see the .wls-gf mobile block
     further down, after the base rules. They were dead here. */
  .wls-calc-band .wls-wrap { padding-top: 40px; padding-bottom: 56px; }

  /* Calculator results page */
  .wls-calc-reviews-grid { grid-template-columns: 1fr; gap: 24px; }
  .wls-calc-next .wls-steps { grid-template-columns: 1fr; }
  /* Form 21 and 25 emit a short single figure; form 24 emits a range
     ("$142,000 to $186,000") into the same .wls-figure element, which the
     shortcode's markup gives us no way to distinguish by class. The body
     class wls-form-24 does distinguish it, so the range keeps a size that
     fits 350px of usable width. */
  body:not(.wls-form-24) #wls-root .calc_results .wls-figure { font-size: 54px !important; }
  body.wls-form-24 #wls-root .calc_results .wls-figure { font-size: 34px !important; }
  /* Form 24's comparison table is two columns of currency; let it scroll
     rather than crushing the figures. */
  #wls-root .calc_results table { display: block; overflow-x: auto; }
  /* Company profile. Ported verbatim from previews/05-abacus-life.html,
     which uses this same 899px breakpoint. */
  /* .wls-two mobile collapse moved below the base rule — it was dead here.
     See the block after `.wls-two { display: grid … }`. */
  .wls-specs { grid-template-columns: 1fr !important; }
  .wls-num, .wls-num + .wls-num { padding-top: 46px !important; }
  .wls-faqs { grid-template-columns: 1fr !important; }

  /* ── Article (single.php) ──
     Ported from previews/08, but SCOPED. The preview writes these against
     bare .wls-rail / .wls-share / .wls-body / .wls-article, which in this
     theme are shared with page.php, page-location.php and index.php — those
     already have their own 899px behaviour a few lines above. Every rule here
     is qualified so the article layout cannot reach them. */
  .wls-main { padding: 32px 20px 48px !important; }
  .wls-lede-sec { padding: 32px 20px 0 !important; }
  #wls-root .wls-h1 { font-size: 34px !important; line-height: 1.1 !important; }
  .wls-meta { gap: 8px 20px !important; margin-top: 20px !important; }
  .wls-byline { margin-left: 0 !important; }
  .wls-figsec { padding: 18px 20px 0 !important; }
  .wls-figsec .wls-fig { padding: 0 !important; border: 0 !important; }
  .wls-figsec .wls-corner { display: none !important; }
  .wls-body--article { grid-template-columns: 1fr !important; gap: 0 !important; row-gap: 32px !important; }
  .wls-rail--article { display: contents !important; }
  .wls-rail--article .wls-filed,
  .wls-rail--article .wls-published,
  .wls-rail--article .wls-share { display: none !important; }
  .wls-article { order: 1 !important; }
  .wls-share-mobile { display: block !important; padding: 0 20px 40px !important; }
  .wls-calc-sec { padding: 0 20px 28px !important; }
  .wls-calc-sec .wls-calc-card { max-width: none !important; padding: 24px 20px 22px !important; }
  .wls-explore-pad { padding: 44px 20px 52px !important; }
  #wls-root .wls-explore h2.wls-explore-h2 { font-size: 26px !important; }
  .wls-explore-count { display: none !important; }
  .wls-related { grid-template-columns: 1fr !important; gap: 20px !important; }
  /* The design zeroes the .wls-two gap because .wls-num supplies its own
     rhythm. The hero has no .wls-num, so stacking it at gap 0 would butt the
     figure against the buttons. */
  .wls-comphero .wls-two { gap: 32px !important; }
}

@media (max-width: 430px) {
  #wls-root .wls-h1 { font-size: 31px !important; }
  #wls-root .wls-hero h1 { font-size: 31px; }
  #wls-root .wls-hero--place h1 { font-size: 40px; }
}


/* ── Calculator card + Gravity Forms ──────────────────────────────
   GF's own stylesheet is disabled in functions.php, so these rules are
   the whole appearance of the form. Selectors target GF's markup
   (.gform_wrapper, .gfield, .ginput_container) rather than the theme's
   own classes. If Gravity Forms changes its markup in a major version,
   this block is the thing to check. ── */
.wls-calc-band { border-top: 1px solid var(--wls-rule); }
.wls-calc-band .wls-wrap { padding-top: 72px; padding-bottom: 88px; }
/* The embedded calculator's card. The border was always declared here; it
   simply never won until the hero rule above was scoped. Background and shadow
   are added so the card reads as a card on the plain white it sits on.
   Corners stay square: the theme has no radius anywhere outside the home
   block's resets and the calculator's own result tables. */
.wls-calc-card {
  max-width: 620px; margin: 0 auto; padding: clamp(24px,4vw,44px);
  background: #fff; border: 1px solid var(--wls-rule);
  box-shadow: 0 1px 3px rgba(12,43,63,.06), 0 8px 24px rgba(12,43,63,.06);
}
.wls-calc-head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 30px; }
.wls-calc-head svg { color: var(--wls-gold); }
#wls-root .wls-calc-head h2 { font-size: clamp(26px,2.6vw,32px); }
/* `.wls-calc-head .wls-eyebrow--gold` was here and is deleted, not kept "just
   in case": parts/calc-embed.php is the only file that emits .wls-calc-head,
   and 1.42.0 replaced its eyebrow with the .wls-calc-cta question, so nothing
   could ever match it again. A rule with no possible emitter is the same
   liability as a class with no rule — verify-theme.py catches the second and
   is blind to the first. */
#wls-root .wls-calc-fallback { font-size: 16px; line-height: 1.7; color: var(--wls-body); text-align: center; margin-bottom: 20px; }

#wls-root .wls-gf .gform_wrapper { margin: 0; }
#wls-root .wls-gf .gform_fields { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
#wls-root .wls-gf .gfield { margin: 0; padding: 0; }
#wls-root .wls-gf .gfield--width-full { grid-column: 1 / -1; }

/* Hidden fields must leave the grid entirely.
   Gravity Forms renders a hidden field as a .gfield list item like any
   other, so with display:grid on .gform_fields each one would claim a
   cell and open a gap between the visible fields. These four classes
   cover GF's hidden, admin-only and conditionally-hidden states. */
#wls-root .wls-gf .gfield.gform_hidden,
#wls-root .wls-gf .gfield.gfield--type-hidden,
#wls-root .wls-gf .gfield_visibility_hidden,
#wls-root .wls-gf .gfield_visibility_administrative,
#wls-root .wls-gf .gform_hidden,
#wls-root .wls-gf input[type=hidden] { display: none !important; }

/* GF's honeypot is a real field it hides itself; keep it out of the grid
   without unhiding it. */
#wls-root .wls-gf .gform_validation_container { display: none !important; }
/* Sentence-case bold, not the 11px uppercase micro-label this was. The
   design sets the field label as ordinary bold body type; uppercase at 11px
   with .14em tracking is both harder to read and taller than it looks,
   because the tracking forces more labels onto two lines. */
#wls-root .wls-gf .gfield_label {
  display: block; font-weight: 600; font-size: 14px; letter-spacing: 0;
  text-transform: none; color: #3c4d59; margin: 0 0 6px;   /* preview 06 */
  line-height: 1.35;
}
/* The design shows neither the asterisk nor the "* indicates required
   fields" legend. Every field in these three forms is required, so the
   asterisk carries no information — it is noise on every row. Hidden rather
   than removed: GF owns the markup, and screen readers still get the
   `aria-required="true"` the inputs already carry. */
#wls-root .wls-gf .gfield_required,
#wls-root .wls-gf .gform_required_legend { display: none !important; }
#wls-root .wls-gf input[type=text],
#wls-root .wls-gf input[type=email],
#wls-root .wls-gf input[type=tel],
#wls-root .wls-gf input[type=number],
#wls-root .wls-gf select,
#wls-root .wls-gf textarea {
  /* White fill, not the filled grey box this used to be — the design shows
     #fff with a light border (preview 06: `border:1px solid #c8d5de;
     background:#fff`). --wls-rule is #cdd8e0, within a few units of the
     design's #c8d5de, so the existing token is kept rather than adding a
     near-duplicate hex.

     background-COLOR, not the `background` shorthand: the select's chevron is
     a background-image with its own position, and the shorthand would wipe
     both. Verified after the change that the chevron still renders at
     calc(100% - 14px) 50%. The focus rule below is an outline, so it is
     unaffected by the fill. */
  width: 100%; background-color: #fff; border: 1px solid var(--wls-rule);
  border-radius: 0; padding: 12px 14px; font-family: var(--wls-font-body);
  font-size: 15px; line-height: 1.4; color: var(--wls-ink); appearance: none;
}
#wls-root .wls-gf select {
  /* navy chevron, matching the calculator design */
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%230c2b3f' stroke-width='1.6'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
  padding-right: 38px;
}
#wls-root .wls-gf input:focus,
#wls-root .wls-gf select:focus,
#wls-root .wls-gf textarea:focus { outline: 2px solid var(--wls-link); outline-offset: 1px; }
#wls-root .wls-gf .gform_footer { margin: 22px 0 0; padding: 0; }
#wls-root .wls-gf .gform_button {
  width: 100%; background: var(--wls-navy); color: #fff; border: 1px solid var(--wls-navy);
  border-radius: 0; font-family: var(--wls-font-body); font-weight: 600; font-size: 15px;
  letter-spacing: .03em; padding: 15px 22px; cursor: pointer;
  transition: background .15s;
}
#wls-root .wls-gf .gform_button:hover { background: var(--wls-navy-hover); }

/* Multi-page navigation — form 24 only, but these are shared .wls-gf rules
   because the form is not home-page-specific.

   GF emits the pager buttons as
     <button class='gform_next_button gform-theme-button button'>
     <button class='gform_previous_button gform-theme-button gform-theme-button--secondary button'>
   and .gform_button — the rule above — matches ONLY the final-page submit, so
   next/previous fell back to browser chrome.

   On specificity: no Gravity Forms stylesheet is enqueued on this site. The
   only CSS that loads is wls-fonts and style.css, and WordPress's four inline
   blocks carry no `button` or `.button` rule. Checked rather than assumed —
   `gform-theme-button` and `gform-theme-button--secondary` have nothing behind
   them, so (1,2,0) here is enough and no !important is needed.

   flex:1 rather than the submit button's width:100%: page 2 carries Previous
   and Next together, and two 100%-wide buttons would stack. Page 1 has only
   Next, which then fills the row and matches the submit button. */
#wls-root .wls-gf .gform_page_footer {
  display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 0; padding: 0;
}
#wls-root .wls-gf .gform_next_button,
#wls-root .wls-gf .gform_previous_button {
  flex: 1 1 0; min-width: 0;
  background: var(--wls-navy); color: #fff; border: 1px solid var(--wls-navy);
  border-radius: 0; font-family: var(--wls-font-body); font-weight: 600;
  font-size: 15px; letter-spacing: .03em; padding: 15px 22px; cursor: pointer;
  transition: background .15s;
}
#wls-root .wls-gf .gform_next_button:hover { background: var(--wls-navy-hover); }
/* Previous is GF's own --secondary; treated as the ghost of the pair. */
#wls-root .wls-gf .gform_previous_button {
  background: #fff; color: var(--wls-navy);
}
#wls-root .wls-gf .gform_previous_button:hover { background: var(--wls-neutral-100); }

/* Section headings — the page-break and section titles on form 24
   ("Policy Basics", "Optional Questions", "Contact Information").
   There was no rule for these at all, so they fell to the global heading
   rule and rendered at 15px, inheriting #wls-root's own font-size: smaller
   than the 14px field labels are bold, which is the wrong way round for the
   structural headings of a three-page form.

   The face is deliberately NOT set here. These are <h3>, so they take the
   page's heading face — Playfair on the home page, Newsreader on the
   calculator pages — which is the two-face system working as intended and
   matches preview 06, where section heads are the serif at 400. */
#wls-root .wls-gf .gsection {
  margin: 10px 0 2px; padding: 18px 0 0;
  border-top: 1px solid var(--wls-rule-soft);
}
#wls-root .wls-gf .gsection:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
#wls-root .wls-gf .gsection_title {
  font-size: 20px; font-weight: 400; line-height: 1.25;
  color: var(--wls-navy); margin: 0;
}
#wls-root .wls-gf .gsection_description {
  font-family: var(--wls-font-body); font-size: 14.5px; line-height: 1.6;
  color: var(--wls-muted); margin: 6px 0 0;
}

/* Page 3 puts Previous alongside the SUBMIT button rather than Next.

   THIS USED TO BE `order: -1` ON THE SUBMIT, AND THAT WAS A TAB-ORDER BUG.
   Gravity Forms emits Previous first, and the submit inherits width:100% from
   the .gform_button rule above, so it claimed a whole flex row and Previous
   wrapped below it. Lifting the submit with `order` fixed the picture and left
   the DOM alone: a keyboard user on the last page of a 71-field form reached
   "Previous" first and, pressing Enter on what looked like the button under
   their finger, went back a page instead of submitting.

   The fix is to stop the submit claiming a whole row. Given an auto width it
   sits beside Previous in the order GF wrote them — secondary left, primary
   right, which is the conventional arrangement anyway — so the visual order
   and the tab order are the same sequence and no property has to move either.

   flex:2 rather than 1, so the primary action is the wider of the two. Below
   430px they wrap, still Previous then Submit.

   This cannot disturb page 2: .gform_button exists only on the final page.
   Page 2's pair is .gform_previous_button + .gform_next_button, both
   flex:1 1 0, and neither is touched here — they stay side by side. */
#wls-root .wls-gf .gform_page_footer .gform_button { flex: 2 1 0; width: auto; min-width: 0; }

/* Step indicator.
   Form 24's definition sets pagination.type = "steps" with three EMPTY page
   labels, so GF emits three numerals against nothing. Styled rather than
   hidden: the form is 3 pages and 71 fields, so position matters, and GF
   supplies real state classes (.gf_step_active / .gf_step_pending) so a
   genuine progress indicator needs no invented content. The empty labels are
   collapsed rather than filled — writing them is a content decision.
   To reverse this to a hide, replace the whole block with
   #wls-root .wls-gf .gf_page_steps { display: none; } */
#wls-root .wls-gf .gf_page_steps {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 24px; padding: 0 0 18px;
  border-bottom: 1px solid var(--wls-rule-soft);
}
#wls-root .wls-gf .gf_step {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--wls-font-body); font-size: 13px; font-weight: 600;
  letter-spacing: .04em; color: var(--wls-label);
}
#wls-root .wls-gf .gf_step + .gf_step::before {
  content: ""; width: 18px; height: 1px; background: var(--wls-rule);
  display: block; flex: none;
}
#wls-root .wls-gf .gf_step_number {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex: none;
  border: 1px solid var(--wls-rule); background: #fff;
  font-size: 13px; color: var(--wls-label);
}
#wls-root .wls-gf .gf_step_active .gf_step_number {
  background: var(--wls-navy); border-color: var(--wls-navy); color: #fff;
}
#wls-root .wls-gf .gf_step_completed .gf_step_number {
  background: var(--wls-neutral-200); border-color: var(--wls-rule); color: var(--wls-navy);
}
#wls-root .wls-gf .gf_step_active { color: var(--wls-navy); }
/* The three labels are empty strings in the form definition. */
#wls-root .wls-gf .gf_step_label:empty { display: none; }

/* Step indicator hidden — a design call, reversing the styled treatment added
   in 1.22.0. Placed AFTER the .gf_page_steps display:flex above, not before:
   both rules are (1,2,0), so this is decided by source order, and the first
   attempt sat higher in the file and lost. The .gf_step rules are left in
   place so restoring the indicator is a one-line delete, not a rebuild. */
#wls-root .wls-gf .gf_page_steps { display: none; }

/* Calculator form, mobile.
   THESE RULES USED TO SIT AT LINE ~460, BEFORE THE BASE .wls-gf BLOCK, AND
   WERE ENTIRELY DEAD. Every one is (1,2,0) and so is the base rule it means to
   override, so source order decided — and the base rules come later in the
   file. Measured at 390 with the media query matching: inputs computed 15px
   rather than the intended 16px, and the submit button 15px/15px rather than
   16px/17px.

   The input rule is the one that mattered: below 16px, iOS Safari zooms the
   page when a field takes focus, on every calculator on the site. Moving the
   block after the base rules is the whole fix — no values changed. */
@media (max-width: 899px) {
  #wls-root .wls-gf .gform_fields { grid-template-columns: minmax(0,1fr); }
  /* Matches the base rule's attribute selectors exactly. A bare
     `#wls-root .wls-gf input` is (1,1,1) and loses to the base
     `#wls-root .wls-gf input[type=text]` at (1,2,1) — measured: the input
     stayed at 15px while the select, whose base rule is a plain (1,1,1),
     correctly went to 16px. */
  #wls-root .wls-gf input[type=text],
  #wls-root .wls-gf input[type=email],
  #wls-root .wls-gf input[type=tel],
  #wls-root .wls-gf input[type=number],
  #wls-root .wls-gf select,
  #wls-root .wls-gf textarea { font-size: 16px; padding-top: 14px; padding-bottom: 14px; }
  #wls-root .wls-gf .gform_button,
  #wls-root .wls-gf .gform_next_button,
  #wls-root .wls-gf .gform_previous_button { padding-top: 17px; padding-bottom: 17px; font-size: 16px; }
  #wls-root .wls-gf .gf_page_steps { gap: 8px; }
  #wls-root .wls-gf .gf_step + .gf_step::before { width: 12px; }
}
#wls-root .wls-gf .gfield_description,
#wls-root .wls-gf .gform_validation_errors { font-size: 13px; line-height: 1.5; }
#wls-root .wls-gf .gfield_description.validation_message,
#wls-root .wls-gf .gform_validation_errors { color: #9a3412; margin-top: 6px; }
#wls-root .wls-gf .gfield_error input,
#wls-root .wls-gf .gfield_error select { border-color: #9a3412; }
#wls-root .wls-gf .gform_confirmation_message { font-size: 17px; line-height: 1.6; color: var(--wls-ink); text-align: center; }

/* ── Company profile ──────────────────────────────────────────────────
   /life-settlement-comp/{slug}/ — 42 published profiles.

   Structure and class names follow previews/05-abacus-life.html. The preview
   carries no portable stylesheet: 17 .wls-* rules, 11 of them !important
   mobile overrides, against 125 inline style attributes. Everything below the
   mobile block is extracted from those inline attributes. Where a declaration
   is adapted, the reason is on the rule.

   HEADINGS MATCH THE DESIGN. This preview specifies Playfair Display at 500,
   and since 1.18.0 the theme renders it — scoped by body class at the end of
   this file, alongside the article and home page, which are the other two
   previews that ask for Playfair.

   This comment previously claimed the opposite: that the theme deliberately
   used Newsreader because "the previews use Playfair" and a third family was
   not worth it. Both halves were wrong. Playfair is not a third family, and
   the previews are split — SEVEN specify Newsreader (00, 01, 02, 03, 04, 07,
   09) and THREE specify Playfair (05, 06, 08). The original claim was
   generalised from this one preview without checking the other nine, and it
   survived into CLAUDE.md. Do not re-derive it: check all ten before making a
   statement about the design system.

   One deliberate divergence remains:
     - The gutter is the theme's --wls-gutter (40px at 1440) rather than the
       preview's flat 32px, so columns are 518px rather than 526px. Changing
       the token would move every other template.
   ── */

/* Section rhythm. The preview's .wls-sec also carries max-width and side
   padding; here the inner .wls-wrap owns both, so this is vertical only. */
.wls-sec { padding-top: 44px; }

/* ── Hero ── */
.wls-comphero { padding-top: 56px; }
/* Q-083. The base `.wls-two` carries `align-items: start`, which is right for
   the numbered band — those blocks must align to their headings — and wrong
   here: the copy column runs longer than the screen-capture figure, so the
   figure sat pinned to the top of the hero and read as detached. Scoped at
   (1,2,0) against the base rule's (0,1,0) about 2,700 lines earlier; the base
   rule is NOT touched. Below 900px the grid is a single column and this has no
   effect. */
#wls-root .wls-comphero .wls-two { align-items: center; }

/* The shared .wls-rule-gold sits below the H1 elsewhere; the design puts it
   above, so the margin flips. */
.wls-comphero .wls-rule-gold { margin: 0 0 14px; }
/* The shared rule is 40px; the design draws it at 26px here. */
.wls-comphero .wls-rule-gold::before { width: 26px; }

/* The design holds the H1 at 58px at every width — it has no mobile step for
   it, unlike .wls-hero elsewhere in this theme. 14.9vw puts the clamp's upper
   bound in reach at exactly 390px, so 58px holds from a phone up and only
   shrinks on narrower hardware. */
#wls-root .wls-comphero h1 {
  font-size: clamp(40px, 14.9vw, 58px); line-height: 1.06;
  letter-spacing: -.015em; margin: 0 0 22px; color: var(--wls-navy);
}

.wls-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.wls-tag {
  display: inline-flex; align-items: center;
  font-family: var(--wls-font-body); font-weight: 600;
  font-size: 11px; letter-spacing: .14em; padding: 3px 10px;
  border: 1px solid var(--wls-navy); color: var(--wls-navy);
}

/* Verbatim except --color-neutral-800 (#3f5162) -> --wls-body (#4a5b66),
   the nearest theme token. */
#wls-root .wls-summary {
  font-size: 17px; line-height: 1.62; max-width: 32em;
  margin: 0 0 30px; color: var(--wls-body); text-wrap: pretty;
}
.wls-comphero .wls-btn-row { margin-top: 0; }
#wls-root .wls-comphero .wls-btn {
  font-size: 15px; padding: 12px 20px;
  /* The design's button is inline-flex at line-height 1.2. The theme's
     .wls-btn is inline-block, so it inherits the body line-height and stands
     5px taller. */
  line-height: 1.2;
}
.wls-comphero .wls-btn-row { gap: 12px; }

/* Blueprint frame: hairline box with registration marks outside it. The
   preview's unprefixed .blueprint/.corner are namespaced here — this page
   loads Gravity Forms, and short generic class names collide. */
.wls-blueprint { position: relative; border: 1px solid var(--wls-rule); }
/* The 14px inset belongs to the figure, not the frame — the score card uses
   the same frame with no padding of its own. */
.wls-fig { padding: 14px; margin: 0; }
.wls-corner { position: absolute; width: 11px; height: 11px; color: rgba(13,43,63,.55); }
.wls-corner::before, .wls-corner::after { content: ''; position: absolute; background: currentColor; }
.wls-corner::before { left: 5px; top: 0; width: 1px; height: 100%; }
.wls-corner::after  { top: 5px; left: 0; width: 100%; height: 1px; }
.wls-corner--tl { top: -6px; left: -6px; }
.wls-corner--tr { top: -6px; right: -6px; }
.wls-corner--bl { bottom: -6px; left: -6px; }
.wls-corner--br { bottom: -6px; right: -6px; }

.wls-fig-img { width: 100%; aspect-ratio: 16/10; background: var(--wls-neutral-100); }
/* contain, not cover: the design's image slot is fit="contain", and the
   featured images are site screenshots that must not be cropped. */
.wls-fig-img img { width: 100%; height: 100%; object-fit: contain; }
#wls-root .wls-fig figcaption {
  display: flex; justify-content: space-between; gap: 16px;
  font-family: var(--wls-font-body); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  font-size: 10px; margin-top: 10px; color: var(--wls-label);
}

/* Review score card. Rendered only when wls_review_scores() can read the
   ratings out of the prose with certainty — see functions.php. auto-fit rather
   than the design's fixed 1fr 1fr, because most profiles carry one platform
   and a fixed pair would leave half the frame empty. */
.wls-scores {
  display: grid; margin: 0 0 18px;
  /* One equal column per platform, however many there are. The design fixes
     1fr 1fr, but most profiles carry a single platform and a fixed pair would
     leave half the frame empty. auto-flow beats repeat(auto-fit, minmax(0,1fr))
     here — a 0 minimum makes auto-fit generate hundreds of empty tracks. */
  grid-auto-flow: column; grid-auto-columns: 1fr;
}
.wls-score { padding: 16px 18px; }
.wls-score + .wls-score { border-left: 1px solid var(--wls-rule); }
#wls-root .wls-score-n {
  font-family: var(--wls-font-body); font-weight: 600; font-size: 38px;
  line-height: 1; letter-spacing: -.02em; color: var(--wls-navy);
}
#wls-root .wls-score-m {
  display: flex; align-items: center; gap: 7px; margin-top: 6px;
  font-family: var(--wls-font-body); font-weight: 600; font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--wls-label);
}
.wls-score-m svg { flex: none; }

/* ── Two-column pair ── */
.wls-two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--wls-two-gap); align-items: start; }
/* 13 profiles have no featured image; the hero runs single column. */
.wls-two--solo { grid-template-columns: minmax(0,1fr); }

/* .wls-two collapses to one column below 900px.
   THIS RULE USED TO SIT AT LINE ~539, ABOVE THE BASE RULE, AND WAS DEAD.
   Both are (0,1,0), so source order decided and the two-column base won at
   every width. Measured at 390 on /life-settlement-comp/bridge-life-settlements/
   and /lifetrust/: the grid stayed 1fr 1fr and a child rendered 465px wide in
   a 390 viewport. Fifth instance of this trap in this build. */
@media (max-width: 899px) {
  .wls-two { grid-template-columns: minmax(0,1fr); gap: 0; }
  #wls-root .wls-comphero .wls-two { gap: 32px; }
}

/* ── Spec band ── */
.wls-specband { padding-top: 44px; }
.wls-specs {
  display: grid; grid-template-columns: repeat(3, 1fr); margin: 0;
  border-top: 1px solid var(--wls-rule); border-left: 1px solid var(--wls-rule);
}
.wls-specs > div {
  border-right: 1px solid var(--wls-rule); border-bottom: 1px solid var(--wls-rule);
  padding: 18px 22px 20px;
}
/* ── Q-075  The numbered band is ONE COLUMN on the company profile ────────
   `.wls-numband` exists so `.wls-two` is not touched: that grid is shared with
   this template's own hero and with other templates. See the template for why
   the two-column split was removed rather than retuned.

   IT TAKES THE THEME'S BODY MEASURE, NOT THE FULL WRAP, and that is a
   deliberate deviation from the brief's "full measure". Measured at 1440 with
   the band running the wrap's full 1100px, the paragraph was 1063px wide:

     Coventry Direct  102 characters per line
     Bridge           108
     OvidLife         132

   Against a typographic norm of 45-75 and this theme's own prose at about 80.
   `--wls-measure` is 44em = 660px, which is exactly what `.wls-prose` uses
   sitewide, so the band now measures ~76 characters and agrees with every
   other page. Going from the old 481px column to 623px of text is still the
   widening that was asked for — 59 characters to 76.

   THE TAIL SHARES THIS VALUE, which is what keeps Q-077 true. That rule used
   to compute one column of `.wls-two`; there is no such column on this
   template any more, so the derivation is gone and both simply take
   `--wls-measure`. Same width, flush left and right edges, one token. */
.wls-numband { max-width: var(--wls-measure); }

/* Q-084. The last cell stretches to the final grid line, so an incomplete row
   closes the border frame itself and the template no longer pads the grid with
   empty cells. `-1` is the last EXPLICIT grid line, which makes this correct
   for every count without knowing any of them:

     6 specs  last cell already ends at line 4   no-op
     5 specs  cell in column 2, ends at line 4   spans the last two columns
     4 specs  cell in column 1, ends at line 4   spans the whole row
     mobile   one column, -1 is line 2           no-op

   Six profiles currently have no email and rendered five values and a hole. */
#wls-root .wls-specs > div:last-child { grid-column-end: -1; }
#wls-root .wls-specs dt {
  font-family: var(--wls-font-body); font-weight: 600; font-size: 11px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--wls-label);
  margin-bottom: 6px;
}
#wls-root .wls-specs dd {
  margin: 0; font-family: var(--wls-font-body); font-weight: 600;
  font-size: 22px; letter-spacing: -.01em; overflow-wrap: anywhere;
}

/* ── Numbered blocks ── */
.wls-num { display: flex; gap: 18px; padding-top: 72px; }
.wls-num + .wls-num { padding-top: 56px; }
.wls-num-i {
  font-family: var(--wls-font-body); font-weight: 600; font-size: 13px;
  letter-spacing: .18em; color: var(--wls-gold); padding-top: 10px; flex: none;
  /* Proportional digits make "01" and "02" different widths, so each block's
     body starts at a slightly different x. The design has the same 1-2px
     drift; tabular figures remove it. */
  font-variant-numeric: tabular-nums;
}
/* min-width:0 so long unbroken strings in the WYSIWYG cannot widen the
   flex item past its column. */
.wls-num-body { min-width: 0; }
#wls-root .wls-num h2 { font-size: 30px; line-height: 1.16; margin: 0 0 16px; }
#wls-root .wls-num p {
  font-size: 15.5px; line-height: 1.68; color: var(--wls-body);
  margin: 0 0 14px; text-wrap: pretty;
}
#wls-root .wls-num p:last-child { margin-bottom: 0; }
#wls-root .wls-num a { text-decoration: underline; text-underline-offset: 3px; }

/* The FAQ heading uses the same numeral, but baseline-aligned rather than
   padded, because it sits beside the heading instead of a block of copy. */
.wls-num-head { display: flex; gap: 18px; align-items: baseline; margin-bottom: 26px; }
.wls-num-head .wls-num-i { padding-top: 0; }
#wls-root .wls-num-head h2 { font-size: 30px; line-height: 1.16; margin: 0; }

/* ── FAQ ── */
/* The field is now bare <details>/<summary>/<p> on all 26 profiles — the
   Elementor markup is gone — so the design's accordion applies directly.
   Every answer is a single <p>; none carry lists or tables.

   TWO COLUMNS, BUT NOT columns:2. The design uses multicol. Measured against
   the real 16-item Abacus list, multicol makes the item on the column boundary
   jump columns on 14 of 16 possible interactions: open any of the first seven
   and the eighth hops to the right-hand column, and back again. A grid keeps
   the design's two-column shape with none of that. The cost is reading order —
   questions run across rows rather than down columns. */
.wls-faqs {
  border-top: 1px solid var(--wls-rule);
  display: grid; grid-template-columns: 1fr 1fr;
  column-gap: 56px; align-items: start;
  /* Every accordion row carries a bottom hairline, so the list ends on a rule.
     44px — the same step .wls-sec uses — keeps that rule off the stamp below.
     This margin owns the gap on its own; .wls-stamp deliberately has no top
     margin, because adjacent siblings collapse to the larger of the two rather
     than adding up, and splitting it across both rules would read as 44px
     while looking like it should be 68px. */
  margin-bottom: 44px;
}
#wls-root .wls-faqs summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 15px 4px; border-bottom: 1px solid var(--wls-rule);
  font-family: var(--wls-font-body); font-size: 15px; line-height: 1.35;
  color: var(--wls-ink);
}
#wls-root .wls-faqs summary::-webkit-details-marker { display: none; }
#wls-root .wls-faqs summary::marker { content: ''; }
#wls-root .wls-faqs summary::after {
  content: '+'; font-family: var(--wls-font-body); font-weight: 600;
  font-size: 19px; line-height: 1; color: var(--wls-link); flex: none;
}
#wls-root .wls-faqs details[open] summary::after { content: '\2013'; }
#wls-root .wls-faqs summary:hover { background: var(--wls-pale); }
#wls-root .wls-faqs details > *:not(summary) {
  margin: 0; padding: 12px 4px 18px;
  border-bottom: 1px solid var(--wls-rule); background: var(--wls-pale);
  font-size: 14.5px; line-height: 1.6; color: var(--wls-body); text-wrap: pretty;
}
#wls-root .wls-faqs details a { text-decoration: underline; text-underline-offset: 3px; }

/* Verified stamp. The design places this after the FAQs as a tracked-caps
   line, not as a row in the spec grid. Moving it out also drops the grid from
   three rows to the design's two. --color-neutral-600 in the preview is
   #7b8894, which is --wls-label exactly. */
#wls-root .wls-stamp {
  font-family: var(--wls-font-body); font-weight: 600; font-size: 11px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--wls-label);
  /* No top margin — .wls-faqs owns that gap. The 56px below is the intro's
     step, and it is what separates the stamp from the calculator band's rule.
     The design's own FAQ section closes on 64px, but it ends the page there;
     here the band follows and brings its own 72px, so the tighter step keeps
     the boundary from opening up too far. */
  margin: 0 0 56px;
}

/* ── Trailing prose: post_content and notes_plain ── */
/* .wls-prose centres its measure, which reads as drifting off-grid under the
   left-aligned blocks above. Left-align it here without touching the shared
   rule. */
.wls-tail { margin-left: 0; }

#wls-root .wls-note {
  font-size: 13px; line-height: 1.6; color: var(--wls-muted); margin: 18px 0 0;
}

/* ── Blog article ─────────────────────────────────────────────────────
   single.php, from previews/08-you-probably-dont-qualify.html.

   The article does NOT use the shared hero-plus-body layout. It opens on
   white with .wls-lede-sec, puts the featured image in its own .wls-figsec,
   and its rail carries metadata rather than a table of contents.

   NAME COLLISION, deliberate: the preview calls the body GRID .wls-body,
   while this theme uses .wls-body for the body SECTION (which carries
   padding) and .wls-body-grid for the grid inside it. Rather than rename
   either, single.php emits .wls-body .wls-body--article on the grid and the
   modifier resets the section padding it would otherwise inherit. .wls-main
   supplies the padding instead, as it does in the design.
   ── */

.wls-lede-sec { max-width: var(--wls-max); margin: 0 auto; padding: 56px var(--wls-gutter) 0; }
.wls-lede-sec .wls-rule-gold { margin: 0 0 20px; }
.wls-lede-sec .wls-rule-gold::before { width: 26px; }

/* Flat 62px, as the design has it; the 899px and 430px steps below take over
   on small screens. Navy on white — this H1 is not the white-on-navy hero
   heading the other templates use, so it is a separate rule, not a variant. */
#wls-root .wls-h1 {
  font-size: 62px; line-height: 1.06; letter-spacing: -.015em;
  margin: 0; max-width: 16em; color: var(--wls-navy); text-wrap: balance;
}

.wls-meta {
  display: flex; flex-wrap: wrap; gap: 32px; align-items: baseline;
  border-top: 1px solid var(--wls-rule); margin-top: 34px; padding-top: 14px;
  font-family: var(--wls-font-body); font-weight: 600; font-size: 12px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--wls-label);
}
.wls-byline { margin-left: auto; }

/* ── Featured image ── */
.wls-figsec { max-width: var(--wls-max); margin: 0 auto; padding: 28px var(--wls-gutter) 0; }
.wls-fig { padding: 14px; margin: 0; }
.wls-fig-slot { width: 100%; aspect-ratio: 21/9; background: var(--wls-neutral-200); overflow: hidden; }
.wls-fig-slot img { width: 100%; height: 100%; object-fit: cover; }

/* ── Body ── */
.wls-main { max-width: var(--wls-max); margin: 0 auto; padding: 56px var(--wls-gutter) 72px; }
.wls-body--article {
  display: grid; grid-template-columns: 200px minmax(0,1fr); gap: 64px;
  align-items: start; padding: 0;   /* see the note on the name collision */
}
.wls-rail--article { top: 96px; display: flex; flex-direction: column; gap: 24px; }
.wls-rail-label {
  font-family: var(--wls-font-body); font-weight: 600; font-size: 11px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--wls-label);
  margin-bottom: 6px;
}
.wls-rail-value { font-family: var(--wls-font-body); font-weight: 600; font-size: 19px; color: var(--wls-navy); }
.wls-filed, .wls-published { margin: 0; }
.wls-rail--article .wls-share { margin-top: 0; }

/* 41em here, against 44em for .wls-prose elsewhere. */
.wls-article { max-width: 41em; }

/* Article prose. .wls-prose's typography is scoped to .wls-prose, so none of
   it reaches .wls-article — without these an article renders as unstyled
   browser defaults. Posts with no <h2> show it worst: wls_prepare_content()
   returns them untouched, so the article is bare <p> tags with no spacing.
   verify-theme.py cannot catch this — .wls-article has a rule, it just had no
   typography under it.

   Paragraph values are verbatim from preview 08 (17.5px / 1.68 / 0 0 20px).
   The preview's article contains only <p> and <a>, so everything below that
   is adapted from .wls-prose at the article's larger 17.5px base and is NOT a
   verbatim port — headings, lists, quotes and tables are marked as such.
   --color-neutral-800 (#3f5162) becomes --wls-body (#4a5b66), the same
   substitution used on the company profile and location pages. */
#wls-root .wls-article p {
  font-size: 17.5px; line-height: 1.68; color: var(--wls-body);
  margin: 0 0 20px; text-wrap: pretty;
}
/* #wls-root prefix required: the base #wls-root a rule is an ID selector and
   sets text-decoration:none, so a bare .wls-article a never applied. */
#wls-root .wls-article a { text-decoration: underline; text-underline-offset: 3px; }
.wls-article strong { color: var(--wls-ink); }

/* Adapted from .wls-prose, not present in preview 08. */
#wls-root .wls-article h2 { font-size: clamp(26px,2.6vw,32px); line-height: 1.16; margin: 0 0 16px; }
#wls-root .wls-article h3 { font-size: 21px; line-height: 1.25; margin: 28px 0 12px; }
#wls-root .wls-article h4 { font-size: 18px; line-height: 1.3; margin: 24px 0 10px; }
#wls-root .wls-article ul,
#wls-root .wls-article ol {
  font-size: 17.5px; line-height: 1.68; color: var(--wls-body); margin: 0 0 20px; padding-left: 22px;
}
#wls-root .wls-article li { margin: 0 0 8px; }
#wls-root .wls-article blockquote {
  margin: 0 0 20px; font-family: var(--wls-font-head); font-size: 21px; line-height: 1.4;
  color: var(--wls-navy); border-left: 2px solid var(--wls-gold); padding-left: 18px;
}
#wls-root .wls-article blockquote p { margin: 0; font: inherit; color: inherit; }
.wls-article img { height: auto; margin: 0 0 20px; }
#wls-root .wls-article .wls-section > *:last-child,
#wls-root .wls-article .wls-lede > *:last-child { margin-bottom: 0; }

/* ── Calculator ──
   The design frames the calculator itself rather than putting it in a banded
   strip: no rule above it, and a narrower card. parts/calc-embed.php is
   shared and untouched, so its band chrome is neutralised here instead. */
.wls-calc-sec { max-width: var(--wls-max); margin: 0 auto; padding: 0 var(--wls-gutter) 84px; }
.wls-calc-sec .wls-calc-band { border-top: 0; }
.wls-calc-sec .wls-calc-band .wls-wrap { max-width: none; padding: 0; }
.wls-calc-sec .wls-calc-card { max-width: 520px; padding: 34px 34px 30px; }
/* Single column, stated rather than inferred. The shared .wls-gf grid is
   repeat(auto-fit,minmax(220px,1fr)) with a 16px gap; inside this 520px card
   that leaves 452px of content, and two columns would need 456px. It lands on
   one column by four pixels. The design shows one column, so pin it — widen
   the card by 5px otherwise and the calculator silently becomes two-up. */
#wls-root .wls-calc-sec .wls-gf .gform_fields { grid-template-columns: minmax(0,1fr); }

/* Rail share is visible on desktop, so this band is not. They swap at 899px. */
.wls-share-mobile { display: none; max-width: var(--wls-max); margin: 0 auto; padding: 0 var(--wls-gutter) 8px; }

/* ── Related reading ── */
.wls-explore-pad { max-width: var(--wls-max); margin: 0 auto; padding: 76px var(--wls-gutter) 84px; }
/* Element-qualified: the shared #wls-root .wls-explore h2 rule carries a
   type selector and would otherwise win at clamp(26px,2.8vw,34px). */
#wls-root .wls-explore h2.wls-explore-h2 { font-size: 32px; line-height: 1.1; margin: 0; }
.wls-explore-count {
  font-family: var(--wls-font-body); font-weight: 600; font-size: 12px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--wls-label);
  margin-left: auto;
}
.wls-related { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; }
/* #wls-root prefix required: the card is an <a>, and #wls-root a sets the
   link colour at (1,0,1). A plain .wls-related-card never won. */
#wls-root .wls-related-card { display: flex; flex-direction: column; padding: 12px; color: var(--wls-ink); }
.wls-related-img { width: 100%; aspect-ratio: 3/2; background: var(--wls-neutral-200); overflow: hidden; }
.wls-related-img img { width: 100%; height: 100%; object-fit: cover; }
.wls-related-txt { padding: 16px 4px 6px; }
.wls-related-kicker {
  font-family: var(--wls-font-body); font-weight: 600; font-size: 11px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--wls-gold);
  margin-bottom: 8px;
}
#wls-root .wls-related-txt h3 { font-size: 22px; line-height: 1.24; margin: 0 0 10px; color: var(--wls-navy); }
#wls-root .wls-related-txt p { font-size: 14.5px; line-height: 1.6; color: var(--wls-muted); margin: 0; text-wrap: pretty; }

/* ── Playfair Display, scoped ─────────────────────────────────────────
   The design uses two serif faces. Newsreader is the default and is set by
   the global heading rule near the top of this file, ported verbatim from the
   seven previews that specify it. These three templates specify Playfair
   Display instead:

     05-abacus-life          company profile   weight 500
     08-you-probably-...     blog article      weight 500
     06-home-page-windsor    home page         weight 400

   Scoped by body class rather than by section, because the split is per page
   type. #wls-root is in each selector deliberately: without it these carry no
   ID and would lose to the global #wls-root h1,h2,h3,h4 rule regardless of
   source order. See the specificity note in CLAUDE.md.
   ── */
body.single-life-settlement-comp #wls-root h1,
body.single-life-settlement-comp #wls-root h2,
body.single-life-settlement-comp #wls-root h3,
body.single-life-settlement-comp #wls-root h4,
body.single-post #wls-root h1,
body.single-post #wls-root h2,
body.single-post #wls-root h3,
body.single-post #wls-root h4 {
  font-family: var(--wls-font-display); font-weight: 500;
}

body.home #wls-root h1,
body.home #wls-root h2,
body.home #wls-root h3,
body.home #wls-root h4 {
  font-family: var(--wls-font-display); font-weight: 400;
}

/* ═══════════════════════════════════════════════════════════════════════
   Listing templates — archive.php, home.php, taxonomy.php, search.php,
   404.php, index.php. No design preview exists for any of these, so the
   values below are taken from the token set and type scale the ten
   previews establish, not invented: card-label treatment for the
   pagination, .wls-band-head's paragraph metrics for the archive intro,
   and the neutral pale + soft rule the previews use for secondary panels.
   ═══════════════════════════════════════════════════════════════════════ */

/* Pagination.
   the_posts_pagination() emits core markup carrying no wls-* class, so
   verify-theme.py structurally cannot see it, and it shipped completely
   unstyled on /windsor-articles/ and all three taxonomy archives —
   measured flush against the card grid at 0px separation, rendering as
   run-together 15px body text.

   #wls-root is required on the link rules: #wls-root a (1,0,1) sets the
   link colour, and a plain .page-numbers (0,1,0) loses to it. */
#wls-root .wls-body .pagination { margin-top: 44px; }
#wls-root .pagination .nav-links {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
#wls-root .pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; height: 42px; padding: 0 14px;
  border: 1px solid var(--wls-rule-soft); background: #fff;
  font-family: var(--wls-font-body); font-weight: 600; font-size: 13px;
  letter-spacing: .08em; color: var(--wls-link); text-decoration: none;
}
#wls-root .pagination a.page-numbers:hover {
  border-color: var(--wls-navy); color: var(--wls-navy);
}
#wls-root .pagination .page-numbers.current {
  background: var(--wls-navy); border-color: var(--wls-navy); color: #fff;
}
#wls-root .pagination .page-numbers.dots {
  border-color: transparent; background: none; color: var(--wls-label);
  min-width: 0; padding: 0 4px;
}

/* Empty state — archive.php and taxonomy.php.
   Only reachable with no results, so it is rendered as a deliberate panel
   rather than a stray sentence. #wls-root is required: #wls-root p sets
   margin:0 and a plain .wls-empty (0,1,0) would lose. */
#wls-root .wls-empty {
  margin: 0; padding: 40px 28px; text-align: center;
  border: 1px solid var(--wls-rule-soft); background: var(--wls-neutral-100);
  font-size: 16.5px; line-height: 1.72; color: var(--wls-muted);
}

/* Taxonomy term intro.
   Spacing only. The element already carries .wls-prose, and a term
   description is an opening paragraph, so the existing lede rule
   (#wls-root .wls-prose > p:first-of-type — 19px/1.66, ink) is the right
   treatment and this defers to it rather than competing.

   An earlier draft set its own 18px here. That selector computed to
   (1,2,1) — an exact tie with the lede rule — so it won only on source
   order, which is the fragility CLAUDE.md warns about. Deferring removes
   the contest entirely.

   The trailing paragraph's bottom margin collapses with this 36px rather
   than adding to it (no padding or border on the wrapper); measured at
   36px to the band head.

   No term has a description today, so this renders nowhere until someone
   adds one at Life Settlement Co -> Company Types, which the taxonomy.php
   docblock invites. Verified by forcing the element into the page. */
#wls-root .wls-tax-intro { margin-bottom: 36px; }

/* Search form — search.php's no-results branch.
   get_search_form() with no searchform.php in the theme emits core's
   default markup, which renders as browser-default chrome. Matched to
   .wls-btn and the card border language. */
#wls-root .searchform div { display: flex; flex-wrap: wrap; gap: 10px; }
#wls-root .searchform input[type="text"] {
  flex: 1 1 240px; min-width: 0; padding: 12px 14px;
  border: 1px solid var(--wls-rule); background: #fff;
  font-family: var(--wls-font-body); font-size: 15.5px; color: var(--wls-ink);
}
#wls-root .searchform input[type="text"]:focus {
  outline: 2px solid var(--wls-link); outline-offset: -2px;
}
#wls-root .searchform input[type="submit"] {
  padding: 12px 22px; border: 1px solid var(--wls-navy);
  background: var(--wls-navy); color: #fff; cursor: pointer;
  font-family: var(--wls-font-body); font-weight: 600; font-size: 14.5px;
  letter-spacing: .03em;
}
#wls-root .searchform input[type="submit"]:hover { background: var(--wls-navy-hover); }

/* Front page wrapper — front-page.php.
   The home design arrives as a self-contained block pasted into page 15,
   carrying its own sections, spacing and inline styles. This wrapper must
   therefore impose nothing: no width, padding, colour or type, or it would
   pre-empt that block's own styling.

   flow-root is the one thing it genuinely needs. Without a block formatting
   context the pasted block's first and last child margins collapse straight
   through the wrapper and push it away from the header and footer. It is a
   structural fix with no visual opinion. */
.wls-home { display: flow-root; }

/* Calculator results type faces.
   inc/windsor-calculators.php writes font-family inline, so these have to be
   !important; the file is a verbatim extraction and is not edited.

   1.19.0 put the HEADING face on all of .content to kill the last Cheltenham
   fallthrough. That was too broad: the caption and the "Estimated net amount"
   label are body copy in the design (preview 02 renders them in Barlow, with
   no font-family of their own), and they came out in Newsreader. So .content
   now takes the BODY face, and the heading face is reapplied only where the
   design has it — the figure and the head, which already carry their own
   overrides above, plus form 24's status, which is the first .content and has
   no .wls-head class to hang off. */
#wls-root .calc_results .content { font-family: var(--wls-font-body) !important; }
#wls-root .calc_results .content[style*="Cheltenham"] { font-family: var(--wls-font-head) !important; }

/* Home page calculator tabs — the state class assets/home-tabs.js toggles.
   Behaviour only; every other rule for .wls-tab / .wls-panel is design and
   arrives inline with the pasted block.

   The !important is load-bearing, for the same reason as the calculator
   .content rule above: all three .wls-panel divs are authored with an inline
   `display:grid`, and an inline declaration beats any selector regardless of
   specificity. Without !important this rule loses, the script runs, the class
   lands, and every panel stays visible. The preview's own stylesheet writes it
   the same way.

   Scoped to #wls-root so it cannot leak, and kept here rather than in the
   pasted block because the block's <style> element is stripped on paste — it
   is the carrier for 24 dead @font-face blocks — and this rule has to outlive
   that. */
#wls-root .wls-closed,
.wls-root .wls-closed { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════
   
Home page content block — parts/home-block.php
   ═══════════════════════════════════════════════════════════════════════

   Lifted out of the fragment's own <style> element. 82 selectors came in:

     46  rescoped to  #wls-root .wls-home
     29  left as delivered — they already target a .wls-* hook
      7  dropped

   THE RESCOPING IS NOT COSMETIC. As delivered these rules were written for a
   standalone preview and describe themselves as a "defensive reset: beats
   theme rules". They were scoped to .wls-root — but header.php line 23 emits
   <div id="wls-root" class="wls-root">,
carrying BOTH the id and the class on
   every page of the site. So #wls-root h1..h6,
#wls-root p,
#wls-root a,
#wls-root *,
.wls-root * and friends would have restyled all sixteen
   templates,
not just the front page.

   #wls-root .wls-home X is (1,
1,
1) against the original (1,
0,
1): still higher
   than the theme rules the reset was written to beat,
but it cannot reach any
   other template. .wls-home is the wrapper front-page.php emits.

   Dropped,
and why:
     #wls-root .wls-closed   already defined above; not duplicated here
     #wls-root .wls-headrow  x2   header chrome — no such element in the block
     .wls-desktop            x2   no such element in the block
     .wls-mobile             x2   no such element in the block
   (.wls-desktop / .wls-mobile do NOT collide with the theme's .wls-desktopbar
   and .wls-mobilebar — different class names. They are simply unused.)

   .wls-h0 … .wls-h12 are renamed .wls-hov0 … .wls-hov12 here and in the
   partial. See the partial's docblock: .wls-h1 is already the theme's article
   H1 and would have hijacked the home calculator CTA.
   ═══════════════════════════════════════════════════════════════════════ */
#wls-root .wls-home { background:#fff;color:#10222e;font-family:'Barlow',system-ui,sans-serif;width:100%;overflow-x:hidden;-webkit-font-smoothing:antialiased }
/* Home page content block, pasted into page 15. The theme supplies the
   reset, fonts, header and footer. The standalone preview's body{margin:0}
   was dropped here on purpose - it would reach the whole document. */
#wls-root .wls-home * { box-sizing:border-box }
#wls-root .wls-home a { color:#1d5b7e;text-decoration:none }
#wls-root .wls-home a:hover { color:#0c2b3f }
#wls-root .wls-home ::selection { background:#cfe0ea }
#wls-root .wls-home img { max-width:100% }

/* --- defensive reset: beats theme rules, loses to this design's inline styles --- */
#wls-root .wls-home,
#wls-root .wls-home * { box-sizing:border-box }
#wls-root .wls-home h1,
#wls-root .wls-home h2,
#wls-root .wls-home h3,
#wls-root .wls-home h4,
#wls-root .wls-home h5,
#wls-root .wls-home h6,
#wls-root .wls-home p,
#wls-root .wls-home blockquote,
#wls-root .wls-home figure,
#wls-root .wls-home figcaption,
#wls-root .wls-home ul,
#wls-root .wls-home ol,
#wls-root .wls-home li,
#wls-root .wls-home span,
#wls-root .wls-home div { margin:0;padding:0;border:0;border-radius:0;box-shadow:none;background:none;
 font-family:inherit;font-size:inherit;font-weight:inherit;font-style:normal;
 text-transform:none;letter-spacing:normal;line-height:inherit;color:inherit;
 text-align:left;text-shadow:none;text-decoration:none;float:none;width:auto;max-width:none;min-height:0;list-style:none }
#wls-root .wls-home section,
#wls-root .wls-home header,
#wls-root .wls-home footer,
#wls-root .wls-home nav,
#wls-root .wls-home article,
#wls-root .wls-home aside { margin:0;padding:0;border:0;border-radius:0;box-shadow:none;background:none;float:none;width:auto;max-width:none }
#wls-root .wls-home a { font:inherit;color:#1d5b7e;text-decoration:none;text-transform:none;letter-spacing:normal;
 border:0;border-radius:0;box-shadow:none;background:none;padding:0;margin:0;display:inline }
#wls-root .wls-home a:hover { color:#0c2b3f;text-decoration:none }
#wls-root .wls-home img { max-width:100%;height:auto;border:0;border-radius:0;box-shadow:none;display:block }
#wls-root .wls-home svg { display:inline-block;vertical-align:middle;max-width:none;height:auto }
#wls-root .wls-home button { font-family:inherit;border-radius:0;box-shadow:none;text-transform:none;letter-spacing:normal;
 width:auto;max-width:none;min-height:0;height:auto;line-height:normal;margin:0 }
#wls-root .wls-home [hidden] { display:none !important }
.wls-case-label { display:none }
.wls-stat-a { padding:0 clamp(16px,2.4vw,32px) 0 0 }
.wls-stat-b,
.wls-stat-c { border-left:1px solid #cdd8e0 }
.wls-stat-b { padding:0 clamp(16px,2.4vw,32px) }
.wls-stat-c { padding:0 0 0 clamp(16px,2.4vw,32px) }

@media (max-width:899px)  {
.wls-case-label { display:block }
.wls-stat-a { padding:0 }
.wls-stat-b,
.wls-stat-c { padding:0;border-left:0;border-top:1px solid #cdd8e0;padding-top:24px }
 /* Pull each label up toward its number. */
#wls-root .wls-stat-a>div:last-child,
#wls-root .wls-stat-b>div:last-child,
#wls-root .wls-stat-c>div:last-child { margin-top:4px !important }
 /* Balanced scale: H1 34px. */
#wls-root .wls-home h1 { font-size:34px !important }
#wls-root .wls-home h2 { font-size:26px !important }
 /* 16px minimum stops iOS zooming the page on focus; 44px touch targets. */
#wls-root .wls-tab { padding:13px 16px !important;font-size:14px !important }
 /* Case cards: first/final offer pair stays two-up — it is a comparison. */
}

@media (max-width:430px)  {
#wls-root .wls-home h1 { font-size:31px !important }
}
.wls-root .wls-tab { appearance:none;border:1px solid #dbe4ea;border-bottom-color:#dbe4ea;background:#f6f9fb;color:#5a6b76;font:600 15px/1 Barlow,sans-serif;padding:14px 20px;margin-bottom:-1px;cursor:pointer }
.wls-root .wls-tab.is-on { border-color:#0c2b3f;border-bottom-color:#fff;background:#fff;color:#0c2b3f }
#wls-root .wls-home :focus-visible { outline:2px solid #1d5b7e;outline-offset:2px }
.wls-root .wls-hov0:hover { background:rgba(255,255,255,.1) !important }
.wls-root .wls-hov1:hover { background:#a8d1e9 !important }
.wls-root .wls-hov2:hover { background:rgba(255,255,255,.1) !important }
.wls-root .wls-hov3:hover { background:rgba(255,255,255,.08) !important }
.wls-root .wls-hov4:hover { background:#1d5b7e !important }
.wls-root .wls-hov5:hover { color:#a8d1e9 !important }
.wls-root .wls-hov6:hover { background:#eef2f6 !important }
.wls-root .wls-hov7:hover { background:#e2eaf0 !important }
.wls-root .wls-hov8:hover { border-color:#1d5b7e !important }
.wls-root .wls-hov9:hover { border-color:#1d5b7e !important }
.wls-root .wls-hov10:hover { border-color:#1d5b7e !important }
.wls-root .wls-hov11:hover { background:#a8d1e9 !important }
.wls-root .wls-hov12:hover { background:rgba(255,255,255,.1) !important }

/* Gravity Forms inside the home block's tab panels.
   The theme's generic pin is #wls-root .wls-gf .gform_fields, set to
   repeat(auto-fit, minmax(220px,1fr)) for the full-width calculator band. A
   home tab panel is only ~504px wide at 1440, so auto-fit resolves to TWO
   columns there and the fields sit side by side. Measured, not assumed: the
   life panel came back "244px 244px".

   (1,3,0) against the generic rule's (1,2,0), so this wins on specificity
   rather than source order — the trap that caught the .wls-calc-sec pin three
   times during the article build. */
#wls-root .wls-home .wls-panel .gform_fields {
  grid-template-columns: repeat(2, minmax(0,1fr));
}
/* Everything spans both columns unless Gravity Forms says otherwise, so the
   rendering today is unchanged — measured identical before and after. The
   point is the second rule: the design pairs Policy face amount | Insured age
   and Phone | Email, and that is a PER-FIELD setting in the form editor
   (Field Width: Half), which GF emits as .gfield--width-half. The flat
   one-column pin this replaces would have silently overridden that setting,
   so the editor change would have appeared to do nothing.

   CSS cannot choose the pairs on its own without hardcoding field IDs or
   :nth-child positions, both of which break the moment a field is added. */
#wls-root .wls-home .wls-panel .gform_fields > .gfield { grid-column: span 2; }
#wls-root .wls-home .wls-panel .gform_fields > .gfield--width-half { grid-column: span 1; }

/* Form-control element resets from the block are DELIBERATELY NOT PORTED.
   The block contains zero bare <input>, <select>, <textarea> or <label> — its
   only controls are the three .wls-tab buttons and three Gravity Forms
   shortcodes. So those resets were dead for the block's own markup and reached
   only into GF, where rescoping had raised them from (1,0,1) to (1,1,1) — an
   exact tie with #wls-root .wls-gf select/input, won on source order because
   this section is last in the file. A CSSOM audit over 621 elements inside the
   panels found 49 properties where they beat the theme's form styling,
   including width:auto defeating .wls-gf select's width:100%, which pushed a
   select 391px wide inside a 312px panel at 390.
   The mobile 16px iOS-zoom guard they also carried is redundant: the theme
   already sets it at @media (max-width:899px) for .wls-gf input/select.
   Removed: input, input::placeholder, label, select, textarea */

/* ═══════════════════════════════════════════════════════════════════════
   1.25.0 — calculator results hero, and content-SVG sizing
   ═══════════════════════════════════════════════════════════════════════ */

/* The verdict is the H1. Preview 02 sets it at clamp(34px,4vw,52px) white
   serif directly under the eyebrow; the six states are listed in
   page-calc-thank-you.php's docblock. */
#wls-root .wls-calc-hero h1.wls-calc-h1 {
  font-family: var(--wls-font-head);
  font-size: clamp(34px, 4.4vw, 60px);
  line-height: 1.06; letter-spacing: -.015em;
  color: #fff; margin: 0 0 6px; max-width: 20ch; text-wrap: balance;
}

/* The renderer's OWN copy of the headline, now that the H1 carries it.
   Hidden rather than removed: inc/windsor-calculators.php is a verbatim
   extraction and is not edited.

   Two selectors, because the renderer expresses the headline two ways:
     - forms 21 and 25 put it in the first child of the first .content —
       a .wls-head for the two negative states, an unclassed 18px div for
       the two qualified ones.
     - form 24 puts the status in the first .content itself, as bare text
       with the Cheltenham stack inline, which is the only thing that
       distinguishes it.
   Scoped to :first-child so the term block's gold rule and its
   "Estimated net amount" caption — which sit in the SECOND .content — are
   untouched. */
#wls-root .calc_results > .content:first-child > div:first-child,
#wls-root .calc_results .content[style*="Cheltenham"] { display: none !important; }

/* Result block alignment.
   .content was already margin:0 / text-align:left, but nothing styled
   .calc_results itself, so the renderer's inline `max-width: 640px;
   margin: 0 auto` survived on the outer wrapper and indented the whole
   block from the hero's left edge. Form 24 is the one that emits it. */
#wls-root .calc_results {
  max-width: none !important;
  margin-left: 0 !important; margin-right: 0 !important;
  text-align: left !important;
}

/* Content SVGs with no intrinsic size.
   Three pages carry Elementor-era inline icons written as
   <svg viewBox="0 0 24 24"> with no width, height or class. An SVG with no
   width defaults to 300x150, so they render as giant slabs — 15 of them on
   /recent-life-settlement-cases-and-what-they-paid-windsor/.

   Scoped three ways so it cannot reach real graphics:
     - only inside .wls-prose / .wls-article, so the header logo, the footer
       icons, the calculator card icon and .wls-figsec are all out of reach;
     - only where the author set no width attribute, which leaves the one
       genuine chart on that page (width="100%", viewBox 0 0 470 300) alone;
     - inline-block at 1em so they sit on the text baseline as intended. */
#wls-root .wls-prose svg:not([width]),
#wls-root .wls-article svg:not([width]) {
  width: 1.05em; height: 1.05em;
  vertical-align: -0.15em; margin-right: .4em;
  flex: none; fill: none; stroke: currentColor; stroke-width: 1.8;
}

/* Standalone pages — page-standalone.php.
   The wrapper imposes NOTHING. These pages arrive as complete designs with
   their own stylesheet in post_content, and any width, padding, colour or
   type here would pre-empt it. flow-root is the one thing it needs: without a
   block formatting context the page's first and last child margins collapse
   straight through the wrapper. Same reasoning as .wls-home.

   Note what is NOT here: no svg sizing. The 1.25.0 rule
   `.wls-prose svg:not([width])` deliberately cannot reach inside this
   wrapper, because a self-styled page sizes its own icons — page 6051 does it
   with six `svg{}` rules of its own. Measured with that page's intact markup:
   icons 20x20 and 26x26, chart 389x248. The theme has no opinion to add. */
.wls-standalone { display: flow-root; }

/* ═══════════════════════════════════════════════════════════════════════
   Calculator page — page-calculator.php, preview 00
   ═══════════════════════════════════════════════════════════════════════ */
#wls-root .wls-calc-hero2 {
  background: var(--wls-navy); color: #fff;
  border-top: 1px solid rgba(255,255,255,.12);
}
/* ROW ONE IS SIZED BY ITS CONTENT, NOT BY THE CARD — Q-060.
   The card spans both rows in the right column and is the tallest thing in the
   grid, so with implicit rows the browser split its height between them and
   row one grew far past the copy. The leftover height rendered as dead navy
   between the copy block and the stats.

   `auto 1fr`: row one shrinks to the copy, row two takes the rest, and the
   card simply extends past the stats as it always did. Not a negative margin
   and not a min-height on the copy — both would leave the row lying about its
   own size.

   Measured at 1440, gap from copy bottom to stats top:

     |                    | today | after Q-059+Q-061 | + this rule |
     | 148 / 391 / 2539   | 150px | 204px             | 110px       |
     | 3406 / 2102        | 110px | 110px             | 110px       |

   The middle column is why this is not optional. Removing the subtitle and the
   gold prompt takes 107px out of the copy column, so WITHOUT this rule those
   three pages get 54px worse, not better. The two changes ship together.

   110px is the design's own spacing — the 72px grid gap plus the 38px
   margin-top on .wls-calc-stats — and it is what the two pages the client did
   not complain about were already rendering.

   Only two rows are named because the desktop grid has two. The mobile block
   below collapses to one column with three areas, where a third row is implied
   at `auto`; measured at 390, nothing moves. */
#wls-root .wls-calc-hero2 .wls-wrap {
  padding-top: 56px; padding-bottom: 72px;
  display: grid; grid-template-columns: minmax(0,1fr) minmax(430px,560px);
  grid-template-areas: 'copy form' 'stats form';
  grid-template-rows: auto 1fr;
  gap: clamp(32px,5vw,72px); align-items: start;
}
#wls-root .wls-calc-copy { grid-area: copy; padding-top: 8px; }
#wls-root .wls-calc-h1b {
  font-size: clamp(40px,4.6vw,62px); line-height: 1.02; color: #fff; max-width: 11em; margin: 0;
}
/* `.wls-calc-sub` is BACK — Q-078. It was deleted in 1.42.3 along with the
   markup that emitted it, on an instruction that turned out to have meant the
   gold prompt only. Values are the originals, unchanged.

   `#wls-root .wls-calc-hero2 .wls-rule-gold` stays deleted: the gold prompt
   really did come off this template (Q-059) and nothing emits it here now.
   `.wls-rule-gold` itself is untouched — parts/hero.php still uses it. */
#wls-root .wls-calc-sub {
  font-size: 19px; line-height: 1.6; color: var(--wls-pale-accent-text,#c3d4e0);
  margin: 24px 0 0; max-width: 34ch;
}

/* The optional hero subheading on prose pages — Part 1, 1.46.0.
   Values are `.wls-calc-sub`'s above, unchanged: same navy ground, same role
   directly under the same H1, so this borrows a treatment the client has
   already signed off rather than inventing one. The markup renders only when
   the field holds something, so no existing page gains an element. */
#wls-root .wls-hero-sub {
  font-size: 19px; line-height: 1.6; color: var(--wls-pale-accent-text,#c3d4e0);
  margin: 18px 0 0; max-width: 40ch;
}

#wls-root .wls-calc-stats {
  grid-area: stats; display: grid; gap: 0; margin-top: 38px; max-width: 420px;
  border-top: 1px solid rgba(255,255,255,.18);
}
#wls-root .wls-calc-stat {
  display: flex; gap: 18px; padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,.18);
}
#wls-root .wls-calc-stat-n {
  font-family: var(--wls-font-head); font-size: 26px; line-height: 1;
  color: var(--wls-pale-accent); min-width: 2.6em; flex: none;
}
#wls-root .wls-calc-stat-l { font-size: 14.5px; line-height: 1.45; color: #c3d4e0; }

/* The form card. .wls-gf is on the same element, so all 40 form rules apply.

   SCOPED TO .wls-calc-hero2 — Q-082, and this was a real leak. This rule is
   the CALCULATOR TEMPLATE's hero card, which sits on navy, where a 30%-white
   border is right. It was not scoped, and at (1,1,0) it beat the shared
   `.wls-calc-card` at (0,1,0) EVERYWHERE — so every embedded calculator on a
   white page drew a 30%-white border on white and read as no card at all.
   Measured before: the article embed, the standard-page embed and the company
   profile embed all computed `1px solid rgba(255,255,255,.3)`. */
#wls-root .wls-calc-hero2 .wls-calc-card {
  grid-area: form; background: #fff; color: var(--wls-ink);
  border: 1px solid rgba(255,255,255,.3); padding: clamp(24px,3vw,34px);
  /* The embed's shadow is inherited from the shared rule and is meaningless
     here: 6% navy on a navy ground renders nothing. Reset rather than left to
     compute, so this card stays the flat panel preview 00 draws. */
  box-shadow: none;
}
#wls-root .wls-calc-card-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  border-bottom: 1px solid var(--wls-rule-soft); padding-bottom: 16px; margin-bottom: 24px;
}
#wls-root .wls-calc-card-head h2 { font-size: 24px; color: var(--wls-navy); margin: 0; }
/* The hero card's form grid.
   The generic .wls-gf pin is repeat(auto-fit,minmax(220px,1fr)), which needs
   about 456px of track before it will produce two columns. The card was giving
   the field area ~320px, so every gfield--width-half in the markup stacked
   anyway — the same trap already fixed for .wls-home .wls-panel.

   Fixed at both ends: the card is widened above, and the grid is made
   explicitly two-column with full spanning both and half spanning one, so the
   layout follows the form editor's Field Width setting rather than guessing
   from available space. (1,3,0) beats the generic (1,2,0) on specificity, not
   source order. */
#wls-root .wls-calc-card .gform_fields {
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
}
#wls-root .wls-calc-card .gform_fields > .gfield { grid-column: span 2; }
#wls-root .wls-calc-card .gform_fields > .gfield--width-half { grid-column: span 1; }

#wls-root .wls-calc-step {
  font-family: var(--wls-font-body); font-weight: 600; font-size: 11px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--wls-label);
  white-space: nowrap; flex: none;
}

/* Numbered eligibility list, 01-04.
   The design numbers the eligibility H3s and does NOT number the
   value-factor ones, and nothing in the markup distinguishes the two groups —
   both are plain H3s in the same article. wls_prepare_content() gives each
   H2 section an id derived from its heading, so the counter is scoped to that
   section by id. That is brittle by nature: rewording the H2 changes the id
   and the numbers disappear. Flagged as such rather than hidden — the durable
   fix is a marker in the content. */
/* 01-04 numbering. Keyed to .wls-numbered, which page-calculator.php sets by
   matching the H2 TEXT for "eligible" — see that file. The first version keyed
   off the heading-derived id and broke on any rewording.

   Two selectors so both the current markup and the durable one work: flat H3s
   today, and an <ol> once the content is converted, which is the semantic form
   and is in the content manifest. Neither is dead — the H3 form renders now,
   and the <ol> form is the same rule applied to a list the theme already
   styles elsewhere. */
#wls-root .wls-calc-prose .wls-numbered { counter-reset: wls-elig; }
#wls-root .wls-calc-prose .wls-numbered h3,
#wls-root .wls-calc-prose .wls-numbered > ol > li {
  counter-increment: wls-elig; display: grid;
  grid-template-columns: auto minmax(0,1fr); gap: 18px; align-items: start;
  font-family: var(--wls-font-body); font-weight: 600; font-size: 17px;
  letter-spacing: .01em; color: var(--wls-navy); margin: 30px 0 8px;
}
#wls-root .wls-calc-prose .wls-numbered > ol { list-style: none; padding: 0; margin: 0; }
#wls-root .wls-calc-prose .wls-numbered h3::before,
#wls-root .wls-calc-prose .wls-numbered > ol > li::before {
  content: counter(wls-elig,decimal-leading-zero);
  font-family: var(--wls-font-head); font-weight: 400; font-size: 26px;
  line-height: 1; color: var(--wls-gold);
}

/* Sub-heads in these two templates are BODY font, not the prose serif.
   Preview 00 sets every H3 in the article as Barlow 600 — 17px in the
   eligibility list, 16.5px in the value-factor group — where #wls-root h3
   was giving them the heading serif at 21px. Measured by the diff harness as
   font-family Barlow->Newsreader and font-size 17px->21px.

   The design also draws the value factors as a 2x2 grid of hairline-separated
   cells. That needs each H3 and its paragraph wrapped as a cell, and the
   content is a flat run of H3s and Ps, so it is NOT attempted here — CSS
   cannot group siblings into cells. Recorded as a content-structure gap. */
#wls-root .wls-calc-prose h3 {
  font-family: var(--wls-font-body); font-weight: 600; font-size: 17px;
  letter-spacing: .01em; line-height: 1.35; color: var(--wls-navy); margin: 30px 0 8px;
}
/* The 2x2 value-factor grid. gap:1px over a rule-coloured ground gives
   hairlines without doubling borders where cells meet — the technique
   preview 00 uses. page-calculator.php wraps each H3+P into a cell. */
#wls-root .wls-calc-prose .wls-vf {
  display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
  gap: 1px; background: var(--wls-rule); border: 1px solid var(--wls-rule);
  margin: 26px 0;
}
#wls-root .wls-calc-prose .wls-vf-cell { background: #fff; padding: 22px 24px; }
#wls-root .wls-calc-prose .wls-vf-cell h3 { font-size: 16.5px; margin: 0 0 8px; }
#wls-root .wls-calc-prose .wls-vf-cell p { margin: 0; }

/* The lede H2 is a step larger than the rest, per preview 00. */
#wls-root .wls-calc-prose .wls-section:first-child h2 { font-size: clamp(28px,3vw,38px); line-height: 1.14; }

/* ═══════════════════════════════════════════════════════════════════════
   Company directory — page-directory.php, previews 09 and 01
   ═══════════════════════════════════════════════════════════════════════ */
#wls-root .wls-dir-hero { background: #fff; border-bottom: 1px solid var(--wls-rule); }
/* Preview 09 pads the hero 64px top / 56px bottom; these were reversed. */
#wls-root .wls-dir-hero .wls-wrap {
  padding-top: 64px; padding-bottom: 56px;
  display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,1fr);
  gap: clamp(32px,6vw,88px); align-items: start;
}
/* Preview 09: clamp(38px,4.4vw,60px), margin 0 0 26px, max-width 20em. The
   theme had 52px with a 16ch cap, which forced the title onto three lines
   where the design sets two — measured 484px wide, 3 lines, at 1440. */
#wls-root .wls-dir-h1 {
  font-size: clamp(38px,4.4vw,60px); line-height: 1.05; color: var(--wls-navy);
  margin: 0 0 26px; max-width: 20em;
}
/* No measure cap: the intro column is already the narrower 1.35fr side of the
   hero grid, and a 44ch cap on top of that wrapped it one line longer than the
   design. Measured by the harness as line-count 5 -> 6. */
#wls-root .wls-dir-intro p {
  font-size: 17px; line-height: 1.66; color: var(--wls-body); margin: 0;
}
#wls-root .wls-dir-roles {
  position: -webkit-sticky; position: sticky; top: var(--wls-sticky-top); align-self: start;
  border-top: 1px solid var(--wls-rule); padding-top: 20px;
}
#wls-root .wls-dir-roles-head { color: var(--wls-label); display: block; margin-bottom: 18px; }
#wls-root .wls-dir-role {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 18px;
  padding: 16px 0; border-top: 1px solid var(--wls-rule-soft);
}
#wls-root .wls-dir-role--total { border-bottom: 1px solid var(--wls-rule-soft); }
#wls-root .wls-dir-role-l { font-family: var(--wls-font-head); font-size: 22px; color: var(--wls-navy); }
#wls-root .wls-dir-role-n {
  font-size: 13.5px; line-height: 1.5; color: var(--wls-label); max-width: 26em; margin-top: 2px;
}
#wls-root .wls-dir-role-c {
  font-family: var(--wls-font-head); font-size: 32px; color: var(--wls-navy); flex: none;
}

#wls-root .wls-dir-grid-sec { padding-top: 56px; padding-bottom: 64px; }
/* Preview 09 sets this at 34px; the shared .wls-band-head h2 is 22.5px. */
#wls-root .wls-dir-grid-sec .wls-band-head h2 { font-size: clamp(26px,2.8vw,34px); line-height: 1.14; }
#wls-root .wls-dir-controls {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 28px;
}
/* Hidden until wls.js wires them, so nothing inert is shown without JS. */
#wls-root .wls-dir-chips { display: none; flex-wrap: wrap; gap: 8px; }
#wls-root .wls-dir-search { display: none; margin-left: auto; }
#wls-root [data-wls-filter].wls-js .wls-dir-chips { display: flex; }
#wls-root [data-wls-filter].wls-js .wls-dir-search { display: block; }
#wls-root .wls-dir-chip {
  border: 1px solid var(--wls-rule); background: #fff; color: var(--wls-body);
  font-family: var(--wls-font-body); font-weight: 600; font-size: 13px;
  letter-spacing: .06em; padding: 9px 16px; cursor: pointer;
}
#wls-root .wls-dir-chip[aria-pressed="true"] {
  background: var(--wls-navy); border-color: var(--wls-navy); color: #fff;
}
#wls-root .wls-dir-search input {
  min-width: 220px; padding: 9px 12px; font-family: var(--wls-font-body);
  font-size: 14px; color: var(--wls-ink); background: #fff; border: 1px solid var(--wls-rule);
}
#wls-root .wls-dir-cards {
  display: grid; grid-template-columns: repeat(auto-fill,minmax(280px,1fr));
  gap: clamp(20px,2.4vw,32px);
}
#wls-root .wls-dir-card {
  display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--wls-rule-soft); color: var(--wls-ink);
}
#wls-root .wls-dir-card:hover { border-color: var(--wls-navy); color: var(--wls-ink); }
/* The monitor frame: a pale inset panel with the shot contained, not cropped. */
#wls-root .wls-dir-shot {
  background: #f6f9fb; border-bottom: 1px solid var(--wls-rule-soft);
  aspect-ratio: 16/10; overflow: hidden; padding: 10px;
}
#wls-root .wls-dir-shot img {
  width: 100%; height: 100%; object-fit: contain; object-position: center;
}
#wls-root .wls-dir-txt {
  padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1;
}
#wls-root .wls-dir-role-e {
  font-weight: 600; font-size: 10.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--wls-gold);
}
#wls-root .wls-dir-name {
  font-family: var(--wls-font-head); font-size: 21px; line-height: 1.2; color: var(--wls-navy);
}
#wls-root .wls-dir-txt p {
  font-size: 14px; line-height: 1.58; color: var(--wls-muted); margin: 0; text-wrap: pretty;
}
#wls-root .wls-dir-more {
  margin-top: auto; padding-top: 8px; font-weight: 600; font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--wls-link);
}
#wls-root .wls-dir-morerow {
  display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 44px;
}
#wls-root .wls-btn--navy {
  background: var(--wls-navy); color: #fff; border: 1px solid var(--wls-navy);
  font-weight: 600; font-size: 15px; letter-spacing: .03em; padding: 14px 26px; cursor: pointer;
}
#wls-root .wls-btn--navy:hover { background: var(--wls-navy-hover); color: #fff; }

/* Directory FAQ, paired two-column with the due-diligence panel — preview 09
   draws a sticky .85fr column beside a 1.15fr accordion column. The template
   moves the nine <details> out of the article to build this; see its docblock. */
#wls-root .wls-dir-faq { padding-top: 80px; padding-bottom: 88px; }
#wls-root .wls-dir-faq-grid {
  display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr);
  gap: clamp(32px,6vw,88px); align-items: start;
}
#wls-root .wls-dir-ask { position: -webkit-sticky; position: sticky; top: var(--wls-sticky-top); }
#wls-root .wls-dir-ask-body { border-top: 1px solid var(--wls-rule); padding-top: 22px; }
#wls-root .wls-dir-ask-body h2 { font-size: clamp(28px,3vw,38px); margin: 0 0 20px; }
#wls-root .wls-dir-ask-body p {
  font-size: 16.5px; line-height: 1.7; color: var(--wls-body); margin: 0 0 16px; text-wrap: pretty;
}
#wls-root .wls-dir-faq-head { color: var(--wls-label); display: block; margin-bottom: 18px; }
#wls-root .wls-dir-faq-list > .wls-prose { max-width: none; border-top: 1px solid var(--wls-rule); }

@media (max-width: 899px) {
  #wls-root .wls-dir-faq-grid { grid-template-columns: minmax(0,1fr); }
  #wls-root .wls-dir-ask { position: static; }
}

/* FAQ accordion. Page 3647 already ships nine <details> in its content, and
   preview 09 draws them as an accordion; the theme was rendering them as flat
   headings. Shared with the calculator page, whose FAQ is the same shape. */
/* Measured against preview 09, which is the ONLY design that specifies an FAQ
   treatment — preview 00's single <details> is the mobile menu, so the
   calculator pages inherit this one.

   The design is hairline rows on a transparent ground: no card, no border box,
   no radius. Each row carries its own bottom rule; the open answer sits on
   #eef2f6 with a rule beneath it. Measured deltas that this closes:

     row background     #fff        -> transparent
     row bottom rule    none        -> 1px --wls-rule
     summary size       16.5px      -> 16px
     summary leading    1.4         -> 1.35
     +/- sign           --wls-gold  -> #1d5b7e at 600
     answer padding     0 4px 20px  -> 14px 4px 20px
     answer ground      on <details> -> on the answer, with its own rule

   The rounded white card the client photographed was NOT this rule: it came
   from an inline `border:1px solid #d8d8d8;border-radius:8px` on the <details>
   element, now stripped in wls_strip_legacy_widgets(). */
#wls-root .wls-prose details { border-top: 0; background: transparent; }
#wls-root .wls-prose details[open] { background: transparent; }
#wls-root .wls-prose details > summary {
  cursor: pointer; list-style: none; padding: 16px 4px;
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  border-bottom: 1px solid var(--wls-rule);
  font-family: var(--wls-font-body); font-weight: 600; font-size: 16px;
  line-height: 1.35; color: var(--wls-navy);
}
#wls-root .wls-prose details > summary:hover { background: var(--wls-pale); }
#wls-root .wls-prose details > summary::-webkit-details-marker { display: none; }
#wls-root .wls-prose details > summary::after {
  content: "+"; font-weight: 600; font-size: 20px; line-height: 1;
  color: var(--wls-link); flex: none;
}
#wls-root .wls-prose details[open] > summary::after { content: "\2013"; }
#wls-root .wls-prose details > *:not(summary) {
  margin: 0; padding: 14px 4px 20px; background: var(--wls-pale);
  border-bottom: 1px solid var(--wls-rule);
  font-size: 15px; line-height: 1.68; color: var(--wls-body);
}

@media (max-width: 899px) {
  #wls-root .wls-calc-hero2 .wls-wrap {
    grid-template-columns: minmax(0,1fr);
    grid-template-areas: 'copy' 'form' 'stats';
  }
  #wls-root .wls-dir-hero .wls-wrap { grid-template-columns: minmax(0,1fr); }
  #wls-root .wls-dir-search { margin-left: 0; }
  #wls-root .wls-dir-search input { min-width: 0; width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Home block: the two feature blocks stack image-first on mobile
   ═══════════════════════════════════════════════════════════════════════

   The two sections put the image on OPPOSITE SIDES of the text in source
   order, which is the design alternating left/right down the page:

     Term policies   <img> first, then the text <div>   -> image on the LEFT
     Qualifying      text <div> first, then the <img>   -> image on the RIGHT

   Both grids are `auto-fit` and collapse to one column, which stacks in source
   order — so on mobile Term read image -> text and Qualifying read text ->
   image. The client confirmed image-first is correct for both.

   FIXED WITH `order`, NOT BY MOVING THE MARKUP. Reordering the source would
   put the image on the left in both blocks at desktop and destroy the
   alternation, which is intended.

   736px IS MEASURED, NOT GUESSED, and it is a coupling worth knowing about.
   The grids are `repeat(auto-fit, minmax(320px,1fr))` with
   `gap: clamp(32px,5vw,64px)` inside a `max-width:1180px` box padded
   `clamp(16px,4vw,40px)`. Two 320px tracks plus the gap stop fitting at
   exactly 736px:

     viewport   738  737  736 | 735  734
     columns      2    2    2 |   1    1

   Both blocks turn over at the same width — verified separately, because they
   are NOT written identically: Term policies is `minmax(320px,1fr)` and
   Qualifying is `minmax(min(100%,320px),1fr)`. Above a 320px container those
   are the same value, so the collapse point matches; the `min(100%,…)` only
   differs below that, where it stops the track overflowing its container.

   If the padding, the gap or the 320px floor is ever changed, this query has
   to move with them.

   The selector reaches the image's anchor as a DIRECT child of the grid. The
   "Read why" button is inside the text column, so it is a grandchild and is
   not matched. */
@media (max-width: 735px) {
  #wls-root .wls-home [data-screen-label="Qualifying"] > div > a { order: -1; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Accessibility corrections from the 134-URL audit
   ═══════════════════════════════════════════════════════════════════════ */

/* Gold TEXT on light grounds takes the darker gold; gold RULES, borders and
   anything on navy keep --wls-gold, which is 5.9:1 there and needs no help.

   Applied to the whole family rather than one class at a time — the audit
   found the same 3.2:1 failure in .wls-rule-gold > span (company hero, article
   lede), .wls-num-i (the 01-05 numerals on company profiles) and
   .wls-related-kicker, not just .wls-eyebrow--gold. */
#wls-root .wls-eyebrow--gold,
#wls-root .wls-rule-gold > span,
#wls-root .wls-num-i,
#wls-root .wls-related-kicker,
#wls-root .wls-dir-role-e,
#wls-root .wls-steps > li::before { color: var(--wls-gold-text); }

/* Back to the brand gold wherever the ground is navy. */
#wls-root .wls-hero .wls-eyebrow--gold,
#wls-root .wls-hero .wls-rule-gold > span,
#wls-root .wls-calc-hero .wls-eyebrow--gold,
#wls-root .wls-calc-hero2 .wls-eyebrow--gold,
#wls-root .wls-calc-hero2 .wls-rule-gold > span,
#wls-root .wls-cta .wls-eyebrow--gold,
#wls-root .wls-cta .wls-rule-gold > span { color: var(--wls-gold); }

/* Breadcrumb links on the navy hero.
   #wls-root a sets --wls-link (#1d5b7e), which is 1.99:1 on navy — the worst
   contrast on the site, on the "Home" crumb of every hero page. Yoast emits
   the trail as plain anchors, so the crumb wrapper has to restate the colour. */
#wls-root .wls-hero .wls-crumbs a,
#wls-root .wls-calc-hero .wls-crumbs a,
#wls-root .wls-calc-hero2 .wls-crumbs a { color: var(--wls-pale-accent); }
#wls-root .wls-hero .wls-crumbs a:hover { color: #fff; }

/* ── The company profile's crumb is on a LIGHT ground (Q-080) ──────────────
   .wls-comphero USED TO BE IN THE RULE ABOVE and it does not belong there.
   It has no background of its own, so it sits on #wls-root's white — every
   other hero in that list is navy. Measured on a profile with a crumb
   injected, before this rule existed:

     wrapper and separators   rgba(255,255,255,.6)   white on white, INVISIBLE
     links                    #a9cbe0                1.71:1
     current page             #a9cbe0                1.71:1

   1.71:1 would have been the worst contrast on the site, beating the 1.99:1
   navy-crumb case this file already records — and the separators would not
   have rendered at all. Removed from the navy group rather than overridden:
   both forms are (1,2,1), so an override would have been an exact tie decided
   by source order, which is the trap this file has now hit thirteen times.

   Q-080 asks for parts/hero.php's treatment, and everything except colour is
   exactly that — 11.5px, .12em tracking, caps, 22px below, same separator,
   first element in the hero column. Only the palette is re-grounded, using the
   tokens the 1.28.0 contrast decision already established for light grounds.

     wrapper and separators   --wls-label  #5f6b77    5.45:1
     links                    --wls-link   #1d5b7e    7.37:1
     current page             --wls-navy   #0c2b3f   13.77:1

   Current page is the darkest, which keeps the navy heroes' relationship —
   there the current crumb is the BRIGHTEST of the three. Emphasis in both
   cases; the direction just follows the ground. */
#wls-root .wls-comphero .wls-crumbs { color: var(--wls-label); }
#wls-root .wls-comphero .wls-crumbs a { color: var(--wls-link); }
#wls-root .wls-comphero .wls-crumbs a:hover { color: var(--wls-navy); }
#wls-root .wls-comphero .wls-crumbs [aria-current] { color: var(--wls-navy); }

/* The directory search field at 14px triggers the iOS focus zoom below 16px,
   the same defect fixed for the calculator forms in 1.22.0. */
@media (max-width: 899px) {
  #wls-root .wls-dir-search input { font-size: 16px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   The four standalone designs: theme heading rules neutralised
   ═══════════════════════════════════════════════════════════════════════

   `#wls-root h1, h2, h3, h4` sets font-family and letter-spacing at (1,0,1).
   None of these four pages uses the theme's type system, and none of them asks
   for tracking, so both declarations reach in and change a design that is not
   the theme's. Measured: 6079's 46px h1 tightened by 0.46px, every h3 on 6051
   and 6079, every h2 on 2933, and on 163 — whose headings carry no
   font-family of their own and rely on inheriting Georgia from the page root —
   both h1 and h2 rendered in Newsreader.

   :where() is doing the real work. It contributes NOTHING to specificity, so
   these selectors land at exactly (1,0,1) — the same weight as the theme rule
   they must beat, winning only because they come later in the file, and losing
   to every one of the designs' own rules, which all carry at least one class.
   That is precisely the wanted behaviour: apply only where the design has no
   opinion. A plain `.wls-invest h1` would be (1,1,1) and would have beaten the
   design's own `.wls__h1` tracking instead of deferring to it.

   `inherit` rather than a named family, so each design keeps supplying its own
   root font rather than having a second copy of it recorded here. */
#wls-root :where(.wls-recent) :is(h1, h2, h3, h4),
#wls-root :where(.wls-casestudy) :is(h1, h2, h3, h4),
#wls-root :where(.wls-invest) :is(h1, h2, h3, h4),
#wls-root :where(.wls-brokers) :is(h1, h2, h3, h4) {
  font-family: inherit;
  letter-spacing: normal;
}

/* ═══════════════════════════════════════════════════════════════════════
   Page 6051 — /recent-life-settlement-cases-and-what-they-paid-windsor/
   Ported from previews/10-recent-cases.html. parts/standalone-6051.php

   FAITHFUL PORT. Every declaration below is the preview's, unedited — the
   only change is the selector prefix. The design is self-contained and does
   NOT use the theme's scale: Georgia serif headings and a system sans stack
   instead of Newsreader/Playfair/Barlow, its own --navy/--ink/--muted tokens,
   and an 860px breakpoint rather than the theme's 899px. That divergence is
   deliberate; see CLAUDE.md. Do not reconcile it toward the theme.

   WHY THE ROOT IS RENAMED. The preview scopes everything to `.wls`. So does
   preview 11, and the two disagree on 17 of the 24 selectors they share —
   .wn is 760px here and 720px there, .btn is white-on-navy here and
   navy-on-light there, .band .grid is four columns here and three there. One
   `.wls` namespace cannot hold both in one stylesheet, so each page gets its
   own root: .wls-recent here, .wls-casestudy on 6079. Nothing else is renamed.

   WHY #wls-root. Without it these rules lose to the theme's own. `#wls-root a`
   is (1,0,1) and the preview's `.wls .study .more` is (0,3,0) — the theme wins
   and the case-study link renders in the link colour instead of navy. The
   prefix is applied uniformly, so the design's internal cascade is unchanged.
   ═══════════════════════════════════════════════════════════════════════ */

#wls-root .wls-recent{--navy:#0B3954; --navy-d:#072a3e; --tint:#eff4f7; --tint2:#e2ecf2;
  --ink:#22303a; --muted:#5c6b78; --faint:#94a3b0;
  --rule:#e3e9ee; --white:#fff; --alt:#f7f9fa;
  --gold:#B98B2E;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --serif:Georgia,"Times New Roman",serif;}
#wls-root .wls-recent *{box-sizing:border-box}
#wls-root .wls-recent{margin:0;background:var(--white);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
#wls-root .wls-recent .w{max-width:1040px;margin:0 auto;padding:0 24px}
#wls-root .wls-recent .wn{max-width:760px;margin:0 auto;padding:0 24px}
#wls-root .wls-recent .hero{background:var(--navy);color:#fff;padding:72px 0 64px}
#wls-root .wls-recent .hero h1{font-family:var(--serif);font-size:42px;line-height:1.18;margin:0 0 20px;font-weight:normal;max-width:16em}
#wls-root .wls-recent .hero h1 em{font-style:normal;color:#8fc4e0}
#wls-root .wls-recent .hero .t{font-size:20px;color:#c8d8e4;margin:0 0 32px;max-width:34em}
#wls-root .wls-recent .btnrow{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
#wls-root .wls-recent .btn{display:inline-flex;align-items:center;gap:11px;background:transparent;color:#fff;
  font-family:var(--serif);font-size:18px;padding:16px 26px;border-radius:4px;
  border:1px solid rgba(255,255,255,.55);text-decoration:none;line-height:1;white-space:nowrap}
#wls-root .wls-recent .btn svg{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#wls-root .wls-recent .btn:hover{background:rgba(255,255,255,.08)}
#wls-root .wls-recent .btn.on-light{color:var(--navy);border-color:rgba(11,57,84,.45)}
#wls-root .wls-recent .btn.on-light:hover{background:rgba(11,57,84,.06)}
#wls-root .wls-recent .hnote{font-size:14px;color:#9db8cb;margin-top:18px}
#wls-root .wls-recent .hgrid{display:grid;grid-template-columns:1.18fr .82fr;gap:44px;align-items:center}
#wls-root .wls-recent .ladder{display:block}
#wls-root .wls-recent .ladder .l1{fill:#fff;font:600 15px var(--sans);font-variant-numeric:tabular-nums}
#wls-root .wls-recent .ladder .l1.dim{fill:#a9c2d3}
#wls-root .wls-recent .ladder .l2{fill:#8ea9bd;font:400 12px var(--sans)}
#wls-root .wls-recent .ladder .l3{fill:#7f9bb0;font:400 12px var(--sans)}
#wls-root .wls-recent .figcap{font-size:13px;color:#9db8cb;margin:10px 0 0;line-height:1.5}
#wls-root .wls-recent .band{background:var(--tint);border-bottom:1px solid var(--rule)}
#wls-root .wls-recent .band .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;padding:34px 0}
#wls-root .wls-recent .band .hd{display:block}
#wls-root .wls-recent .band .hd svg{margin-bottom:9px}
#wls-root .wls-recent .band .hd svg{width:26px;height:26px;display:block;stroke:var(--navy);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.72}
#wls-root .wls-recent .band b{display:block;font-size:32px;font-weight:600;color:var(--navy);letter-spacing:-.02em;line-height:1.1}
#wls-root .wls-recent .band span{display:block;font-size:14px;color:var(--muted);margin-top:8px;line-height:1.4}
#wls-root .wls-recent section{padding:64px 0}
#wls-root .wls-recent h2{font-family:var(--serif);font-size:30px;font-weight:normal;line-height:1.25;margin:0 0 14px}
#wls-root .wls-recent .sub{font-size:18px;color:var(--muted);margin:0 0 38px;max-width:36em}
#wls-root .wls-recent .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
#wls-root .wls-recent .step svg{width:36px;height:36px;display:block;stroke:var(--navy);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.8;margin-bottom:14px}
#wls-root .wls-recent .step .n{font-family:var(--sans);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);margin-bottom:6px}
#wls-root .wls-recent .step h3{font-family:var(--serif);font-size:20px;font-weight:normal;margin:0 0 8px}
#wls-root .wls-recent .step .t{margin:0;font-size:16px;color:var(--muted)}
#wls-root .wls-recent .cases{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
#wls-root .wls-recent .card{border:1px solid #d3dde5;border-radius:12px;overflow:hidden;background:#fff;display:flex;flex-direction:column;box-shadow:0 1px 3px rgba(11,57,84,.07)}
#wls-root .wls-recent .card .top{padding:20px 22px 18px;background:var(--navy);color:#fff}
#wls-root .wls-recent .card .top b{font-family:var(--serif);font-size:23px;font-weight:normal;display:block;line-height:1.2;color:#fff}
#wls-root .wls-recent .card .top .car{font-size:14px;color:#8fc4e0;display:block;margin-top:7px;line-height:1.35}
#wls-root .wls-recent .card .top .cs{font-size:13px;color:#9db8cb;display:block;margin-top:2px;line-height:1.35}
#wls-root .wls-recent .card .body{padding:4px 22px 0}
#wls-root .wls-recent .row{padding:16px 0;border-bottom:1px solid #e6ecf1}
#wls-root .wls-recent .row .lab{font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
#wls-root .wls-recent .row .val{font-size:24px;font-weight:600;letter-spacing:-.015em;font-variant-numeric:tabular-nums;line-height:1.15}
#wls-root .wls-recent .row .pc{font-size:13px;color:var(--faint);margin-top:3px}
#wls-root .wls-recent .row.win .val{font-size:30px;color:var(--navy)}
#wls-root .wls-recent .row.gain{border-bottom:0;padding-bottom:20px}
#wls-root .wls-recent .row.gain .val{font-size:20px;color:#8a6a1c}
#wls-root .wls-recent .card .foot{padding:14px 22px;border-top:1px solid #e6ecf1;font-size:14px;color:var(--muted);margin-top:auto}
#wls-root .wls-recent .card .foot b{color:var(--ink);font-weight:600}
#wls-root .wls-recent .card details{border-top:1px solid var(--rule)}
#wls-root .wls-recent .card summary{padding:14px 22px;cursor:pointer;font-size:15px;font-weight:600;color:var(--navy)}
#wls-root .wls-recent .card details img{width:100%;display:block;border-top:1px solid var(--rule)}
#wls-root .wls-recent .study{display:grid;grid-template-columns:.92fr 1.08fr;gap:0;border:1px solid var(--rule);border-radius:12px;overflow:hidden;background:#fff;margin-top:26px}
#wls-root .wls-recent .study .pic{background:var(--alt);min-height:260px}
#wls-root .wls-recent .study .pic img{width:100%;height:100%;object-fit:cover;display:block}
#wls-root .wls-recent .study .txt{padding:34px 36px}
#wls-root .wls-recent .study .kicker{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);margin-bottom:10px}
#wls-root .wls-recent .study h3{font-family:var(--serif);font-size:26px;font-weight:400;line-height:1.25;margin:0 0 12px;color:var(--ink)}
#wls-root .wls-recent .study .more{display:inline-block;margin-top:16px;font-size:16px;font-weight:600;color:var(--navy)}
#wls-root .wls-recent .trust{background:var(--navy);color:#fff;padding:56px 0}
#wls-root .wls-recent .tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:38px}
#wls-root .wls-recent .titem svg{width:38px;height:38px;display:block;margin-bottom:14px}
#wls-root .wls-recent .titem h3{font-family:var(--serif);font-size:20px;font-weight:normal;margin:0 0 8px;color:#fff}
#wls-root .wls-recent .titem .t{margin:0;font-size:16px;line-height:1.55;color:#b6cddc}
#wls-root .wls-recent .tbar{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:44px;padding-top:30px;border-top:1px solid rgba(255,255,255,.16)}
#wls-root .wls-recent .tbar b{font-size:34px;font-weight:600;line-height:1}
#wls-root .wls-recent .tbar .stars{color:var(--gold);font-size:19px;letter-spacing:2px}
#wls-root .wls-recent .tbar span{font-size:15px;color:#9db8cb}
#wls-root .wls-recent .tbar .sep{color:rgba(255,255,255,.25)}
#wls-root .wls-recent .close{background:var(--tint);padding:60px 0;text-align:center}
#wls-root .wls-recent .close h2{margin-bottom:10px}
#wls-root .wls-recent .close .t{color:var(--muted);margin:0 0 26px}
#wls-root .wls-recent .fine{font-size:13px;color:var(--faint);line-height:1.6;padding:34px 0 70px}
@media(max-width:860px){
#wls-root .wls-recent .band .grid{grid-template-columns:repeat(2,1fr);gap:26px}
#wls-root .wls-recent .band .hd{display:flex;align-items:center;gap:10px}
#wls-root .wls-recent .band .hd svg{margin-bottom:0;width:24px;height:24px}
#wls-root .wls-recent .steps{grid-template-columns:1fr;gap:26px}
#wls-root .wls-recent .cases{grid-template-columns:1fr;gap:18px}
#wls-root .wls-recent .tgrid{grid-template-columns:1fr;gap:30px}
#wls-root .wls-recent .study{grid-template-columns:1fr}
#wls-root .wls-recent .study .txt{padding:28px 24px}
#wls-root .wls-recent .hgrid{grid-template-columns:1fr;gap:34px}
#wls-root .wls-recent .hero h1{font-size:32px}
#wls-root .wls-recent .hero .t{font-size:18px}
#wls-root .wls-recent h2{font-size:25px}
#wls-root .wls-recent section{padding:48px 0}
}
#wls-root .wls-recent *{font-family:var(--sans)}
#wls-root .wls-recent h1,#wls-root .wls-recent h2,#wls-root .wls-recent h3,#wls-root .wls-recent .card .top b,#wls-root .wls-recent .titem h3{font-family:var(--serif) !important}
#wls-root .wls-recent .btn{font-family:var(--serif) !important}
#wls-root .wls-recent a{text-decoration:none}
#wls-root .wls-recent .hero,#wls-root .wls-recent .hero h1,#wls-root .wls-recent .hero .t,#wls-root .wls-recent .hnote{color:#fff}
#wls-root .wls-recent .hero h1{color:#fff !important}
#wls-root .wls-recent .hero h1 em{color:#8fc4e0 !important}
#wls-root .wls-recent .hero .t{color:#c8d8e4 !important}
#wls-root .wls-recent .hnote{color:#9db8cb !important}
#wls-root .wls-recent .btn,#wls-root .wls-recent .btn:link,#wls-root .wls-recent .btn:visited,#wls-root .wls-recent .btn:hover{color:#fff !important;text-decoration:none !important}
#wls-root .wls-recent .btn.on-light,#wls-root .wls-recent .btn.on-light:link,#wls-root .wls-recent .btn.on-light:visited,#wls-root .wls-recent .btn.on-light:hover{color:var(--navy) !important}
#wls-root .wls-recent .band b{color:var(--navy) !important}
#wls-root .wls-recent .band span,#wls-root .wls-recent .sub,#wls-root .wls-recent .step .n{color:var(--muted)}
#wls-root .wls-recent h2,#wls-root .wls-recent .step h3{color:var(--ink) !important}
#wls-root .wls-recent .trust h3{color:#fff !important}
#wls-root .wls-recent .titem .t{color:#b6cddc !important}
#wls-root .wls-recent .tbar,#wls-root .wls-recent .tbar b{color:#fff !important}
#wls-root .wls-recent .tbar span{color:#9db8cb !important}
#wls-root .wls-recent .card summary{color:var(--navy) !important}
#wls-root .wls-recent .row.win .val{color:var(--navy) !important}
#wls-root .wls-recent .row.gain .val{color:#8a6a1c !important}
#wls-root .wls-recent .figcap{color:#9db8cb !important}
#wls-root .wls-recent{font-size:17px;line-height:1.6;color:var(--ink)}
#wls-root .wls-recent .w,#wls-root .wls-recent .wn{margin-left:auto;margin-right:auto}
#wls-root .wls-recent .t{font-size:17px;line-height:1.65;color:var(--ink);margin:0 0 20px}
#wls-root .wls-recent .t:last-child{margin-bottom:0}
#wls-root .wls-recent .hero h1{font-size:42px;line-height:1.18;margin:0 0 20px;font-weight:400;letter-spacing:0}
#wls-root .wls-recent .hero .t{font-size:20px;line-height:1.55;margin:0 0 32px}
#wls-root .wls-recent h2{font-size:30px;line-height:1.25;margin:0 0 14px;font-weight:400;letter-spacing:0}
#wls-root .wls-recent .sub{font-size:18px;line-height:1.6;margin:0 0 38px}
#wls-root .wls-recent .study h3{font-size:26px;line-height:1.25;margin:0 0 12px;font-weight:400}
#wls-root .wls-recent .study .t{font-size:17px;line-height:1.65;margin:0}
#wls-root .wls-recent .step h3,#wls-root .wls-recent .titem h3{font-size:20px;line-height:1.3;margin:0 0 8px;font-weight:400}
#wls-root .wls-recent .step .t,#wls-root .wls-recent .titem .t{font-size:16px;line-height:1.55;margin:0}
#wls-root .wls-recent .band b{font-size:32px;line-height:1.1;font-weight:600;display:block}
#wls-root .wls-recent .band span{font-size:14px;line-height:1.4}
#wls-root .wls-recent .card .top b{font-size:23px;line-height:1.2;font-weight:400;color:#fff !important}
#wls-root .wls-recent .card .top .car{font-size:14px;color:#8fc4e0 !important}
#wls-root .wls-recent .card .top .cs{font-size:13px;color:#9db8cb !important}
#wls-root .wls-recent .row .val{font-size:24px;line-height:1.15;font-weight:600}
#wls-root .wls-recent .row.win .val{font-size:30px}
#wls-root .wls-recent .row.gain .val{font-size:20px}
#wls-root .wls-recent .btn{font-size:18px;line-height:1;font-weight:400}
#wls-root .wls-recent .figcap{font-size:13px;line-height:1.5;margin:10px 0 0}
#wls-root .wls-recent .fine{font-size:13px;line-height:1.6}
#wls-root .wls-recent .close .t{font-size:17px;margin:0 0 26px;color:var(--muted)}
@media(max-width:860px){
#wls-root .wls-recent .hero h1{font-size:32px}
#wls-root .wls-recent .hero .t{font-size:18px}
#wls-root .wls-recent h2{font-size:25px}
}

/* ═══════════════════════════════════════════════════════════════════════
   Page 6079 — /viatical-settlement-case-study/
   Ported from previews/11-viatical-case-study.html. parts/standalone-6079.php

   Same terms as the block above: values verbatim, selectors prefixed, root
   renamed from `.wls` to `.wls-casestudy` because the two standalone designs
   collide on `.wls`. Georgia serif and system sans by design.
   ═══════════════════════════════════════════════════════════════════════ */

#wls-root .wls-casestudy{
  --navy:#0B3954; --tint:#eff4f7; --ink:#22303a; --muted:#5c6b78; --faint:#94a3b0;
  --rule:#e3e9ee; --white:#fff; --alt:#f7f9fa; --gold:#B98B2E;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --serif:Georgia,"Times New Roman",serif;
}
#wls-root .wls-casestudy *{box-sizing:border-box}
#wls-root .wls-casestudy{font-family:var(--sans);font-size:17px;line-height:1.6;color:var(--ink);-webkit-font-smoothing:antialiased}
#wls-root .wls-casestudy .w{max-width:1040px;margin:0 auto;padding:0 24px}
#wls-root .wls-casestudy .wn{max-width:720px;margin:0 auto;padding:0 24px}
#wls-root .wls-casestudy a{text-decoration:none}
#wls-root .wls-casestudy .t a{text-decoration:underline;color:var(--navy) !important}

/* hero */
#wls-root .wls-casestudy .hero{background:var(--navy);padding:70px 0 62px}
#wls-root .wls-casestudy .kick{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#8fc4e0;margin:0 0 16px}
#wls-root .wls-casestudy .hero h1{font-family:var(--serif) !important;font-size:46px;line-height:1.15;font-weight:400;margin:0 0 20px;color:#fff !important;max-width:15em}
#wls-root .wls-casestudy .hero .lede{font-size:20px;line-height:1.55;color:#c8d8e4 !important;margin:0 0 30px;max-width:33em}
#wls-root .wls-casestudy .hnote{font-size:14px;color:#9db8cb !important;margin:0}

/* proof band */
#wls-root .wls-casestudy .band{background:var(--tint);border-bottom:1px solid var(--rule)}
#wls-root .wls-casestudy .band .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;padding:34px 0}
#wls-root .wls-casestudy .band svg{width:26px;height:26px;display:block;stroke:var(--navy);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.72;margin-bottom:11px}
#wls-root .wls-casestudy .band b{display:block;font-family:var(--serif) !important;font-size:19px;font-weight:400;line-height:1.3;color:var(--ink) !important;margin-bottom:5px}
#wls-root .wls-casestudy .band span{display:block;font-size:15px;line-height:1.5;color:var(--muted)}

/* sections */
#wls-root .wls-casestudy section{padding:60px 0}
#wls-root .wls-casestudy h2{font-family:var(--serif) !important;font-size:30px;line-height:1.25;font-weight:400;margin:0 0 16px;color:var(--ink) !important;letter-spacing:0}
#wls-root .wls-casestudy h3{font-family:var(--serif) !important;font-size:21px;line-height:1.3;font-weight:400;margin:34px 0 10px;color:var(--ink) !important}
#wls-root .wls-casestudy .t{font-size:17px;line-height:1.7;color:var(--ink);margin:0 0 20px}
#wls-root .wls-casestudy .t:last-child{margin-bottom:0}

/* figure */
#wls-root .wls-casestudy figure{margin:34px 0 0;border:1px solid #d3dde5;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 1px 3px rgba(11,57,84,.07)}
#wls-root .wls-casestudy figure img{width:100%;display:block}
#wls-root .wls-casestudy .pair{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule)}
#wls-root .wls-casestudy .pair img{height:100%;object-fit:cover}
#wls-root .wls-casestudy .cap{font-size:14px;line-height:1.5;color:var(--muted);padding:15px 20px;border-top:1px solid var(--rule);margin:0}

/* pull quote */
#wls-root .wls-casestudy .pull{background:var(--navy);padding:64px 0}
#wls-root .wls-casestudy .pull .q{font-family:var(--serif) !important;font-size:27px;line-height:1.45;color:#fff !important;margin:0 0 22px}
#wls-root .wls-casestudy .pull .who{font-size:15px;color:#8fc4e0 !important;margin:0}
#wls-root .wls-casestudy .pull .mark{color:var(--gold);font-family:var(--serif);font-size:54px;line-height:.6;display:block;margin-bottom:10px}

/* emails */
#wls-root .wls-casestudy .mails{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px}
#wls-root .wls-casestudy .mails a{display:block;min-height:120px;background:var(--alt);border:1px solid #d3dde5;border-radius:10px;overflow:hidden;background:#fff;box-shadow:0 1px 3px rgba(11,57,84,.07)}
#wls-root .wls-casestudy .mails img{width:100%;display:block}

/* buttons */
#wls-root .wls-casestudy .btnrow{display:flex;gap:16px;flex-wrap:wrap;align-items:center;justify-content:center}
#wls-root .wls-casestudy .btn{display:inline-flex;align-items:center;gap:11px;background:transparent;
  font-family:var(--serif) !important;font-size:18px;line-height:1;padding:16px 26px;border-radius:4px;
  border:1px solid rgba(11,57,84,.45);color:var(--navy) !important;white-space:nowrap;text-decoration:none !important}
#wls-root .wls-casestudy .btn svg{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#wls-root .wls-casestudy .btn:hover{background:rgba(11,57,84,.06)}

/* closing */
#wls-root .wls-casestudy .close{background:var(--tint);padding:60px 0;text-align:center}
#wls-root .wls-casestudy .close h2{margin-bottom:10px}
#wls-root .wls-casestudy .close .t{color:var(--muted);margin:0 0 26px}
#wls-root .wls-casestudy .fine{font-size:13px;line-height:1.65;color:var(--faint);padding:34px 0 66px;margin:0}

@media(max-width:860px){
  #wls-root .wls-casestudy .hero{padding:52px 0 46px}
  #wls-root .wls-casestudy .hero h1{font-size:32px}
  #wls-root .wls-casestudy .hero .lede{font-size:18px}
  #wls-root .wls-casestudy h2{font-size:25px}
  #wls-root .wls-casestudy section{padding:46px 0}
  #wls-root .wls-casestudy .band .grid{grid-template-columns:1fr;gap:26px}
  #wls-root .wls-casestudy .band svg{margin-bottom:0}
  #wls-root .wls-casestudy .mails{grid-template-columns:1fr}
  #wls-root .wls-casestudy .pair{grid-template-columns:1fr}
  #wls-root .wls-casestudy .pull .q{font-size:22px}
}

/* ═══════════════════════════════════════════════════════════════════════
   Page 2933 — /life-settlement/invest-in-life-settlements/
   From reference/recovered-source/. parts/standalone-2933.php

   NOT a designer preview — no preview exists for this page. Recovered from
   production's served HTML source and verified two ways: zero elementor-*
   classes in the extracted subtree, and a stylesheet byte-identical to the one
   still in staging's post_content.

   A THIRD design system, distinct from the theme AND from previews 10/11:
   Cormorant Garamond over Open Sans on cream, BEM `wls__` names, fluid clamp()
   sizing, no fixed breakpoint. Values below are the author's, unedited.

   Only the root `.wls` became `.wls-invest`; `wls__*` names are untouched and
   appear nowhere else in the theme. Every selector gained exactly one id, so
   the design's internal cascade is unchanged while the block clears the
   theme's own rules.
   ═══════════════════════════════════════════════════════════════════════ */
#wls-root .wls-invest {
  --navy:        #1B3A57;
  --navy-deep:   #12293F;
  --ink:         #24313C;
  --cream:       #F4EFE6;
  --paper:       #FCFAF6;
  --rule:        #CFC4B2;
  --muted:       #6B7683;

  --display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --body: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  background: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

#wls-root .wls-invest *, #wls-root .wls-invest *::before, #wls-root .wls-invest *::after { box-sizing: border-box; }

#wls-root .wls__inner {
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(3rem, 8vw, 6rem) clamp(1.25rem, 5vw, 2.5rem);
}

#wls-root /* ---------- Opening ---------- */

.wls__eyebrow {
  font-family: var(--body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1.75rem;
}

#wls-root .wls__h1 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(2.25rem, 6vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -0.005em;
  color: var(--navy-deep);
  margin: 0 0 2rem;
}

#wls-root /* The thesis. This is the one place the page raises its voice. */
.wls__thesis {
  font-family: var(--display);
  font-size: clamp(1.5rem, 3.6vw, 2.125rem);
  line-height: 1.28;
  color: var(--navy);
  margin: 0 0 2.25rem;
  padding-left: clamp(1rem, 3vw, 1.75rem);
  border-left: 2px solid var(--navy);
}

#wls-root .wls__thesis em {
  font-style: normal;
  font-weight: 600;
}

#wls-root .wls-invest p {
  margin: 0 0 1.35rem;
  max-width: 40rem;
}

#wls-root .wls__lede { font-size: 1.0625rem; }

#wls-root .wls__lede--last { margin-bottom: 0; }

#wls-root /* ---------- Sections ---------- */

.wls__section {
  margin-top: clamp(3rem, 7vw, 4.5rem);
  padding-top: clamp(2rem, 5vw, 3rem);
  border-top: 1px solid var(--rule);
}

#wls-root .wls__h2 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  line-height: 1.2;
  color: var(--navy-deep);
  margin: 0 0 1.5rem;
}

#wls-root .wls-invest strong { font-weight: 700; color: var(--navy-deep); }

#wls-root /* ---------- Legal ---------- */

.wls__legal {
  margin-top: 2rem;
  padding: 1.5rem clamp(1rem, 3vw, 1.75rem);
  background: var(--paper);
  border: 1px solid var(--rule);
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--muted);
}

#wls-root .wls__legal p { margin: 0; max-width: none; }

#wls-root /* ---------- Close ---------- */

.wls__close {
  margin-top: clamp(3rem, 7vw, 4.5rem);
  padding: clamp(2rem, 5vw, 3rem) clamp(1.5rem, 5vw, 3rem);
  background: var(--navy-deep);
  color: #EDE7DB;
}

#wls-root .wls__close .wls__h2 { color: #FCFAF6; margin-top: 0; }
#wls-root .wls__close p { color: #D6CFC2; }
#wls-root .wls__close strong { color: #FCFAF6; }

#wls-root .wls__placeholder {
  display: block;
  padding: 0.9rem 1.1rem;
  border: 1px dashed #6E8299;
  color: #A9BACB;
  font-size: 0.875rem;
  line-height: 1.6;
  margin-bottom: 1.35rem;
}

#wls-root /* ---------- Profile ---------- */

.wls__profile {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 1.75rem);
  margin-bottom: 1.75rem;
}

#wls-root .wls__portrait {
  flex: 0 0 auto;
  width: clamp(88px, 18vw, 120px);
  height: clamp(88px, 18vw, 120px);
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #4A6076;
  background: #24313C;
  line-height: 0;
}

#wls-root .wls__portrait img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  object-fit: cover !important;
  object-position: 30% 12%;
  border-radius: 50% !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

#wls-root .wls__profile-name {
  font-family: var(--display);
  font-size: clamp(1.375rem, 3vw, 1.75rem);
  line-height: 1.2;
  color: #FCFAF6;
  margin: 0 0 0.25rem;
  max-width: none;
}

#wls-root .wls__profile-role {
  font-family: var(--body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #A9BACB;
  margin: 0;
  max-width: none;
}

@media (max-width: 30rem) {
  #wls-root .wls__profile { gap: 1rem; }
}

#wls-root .wls__cta {
  display: inline-block;
  margin-top: 0.75rem;
  padding: 0.95rem 2rem;
  background: #FCFAF6;
  color: var(--navy-deep);
  font-family: var(--body);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background 0.18s ease, transform 0.18s ease;
}

#wls-root .wls__cta:hover, #wls-root .wls__cta:focus-visible {
  background: #FFFFFF;
  transform: translateY(-1px);
}

#wls-root .wls-invest a:focus-visible {
  outline: 2px solid #C9A227;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  #wls-root .wls-invest * { transition: none !important; }
}


/* ═══════════════════════════════════════════════════════════════════════
   Page 163 — /life-settlement/life-settlement-brokers/
   From reference/recovered-source/. The partial that emitted these classes,
   parts/standalone-163.php, was DELETED in 1.43.1 — page 163 moved to the
   default template and the partial had been unreachable since. These rules
   therefore have no emitter today and are kept only because removing 50
   selectors is a separate decision; see the handback.

   NOT a designer preview; same recovery and verification as 2933 above.

   THIS ONE WAS A WHOLE-DOCUMENT STYLESHEET. It styled `:root`, `*`, `body`
   and bare `h1/h2/p/table/th/td/figure` — element selectors, which is why
   losing the class attributes did not make it inert the way it did on the
   other four pages. On staging today it restyles the entire page, header and
   footer included. `:root` and `body` are mapped onto the page root here and
   `*` onto its descendants, which ends that.

   Page-scoping is load-bearing rather than tidy: .wrap, .hero, .kpis,
   .callout, .math, .cta and .fine are generic enough to collide, and `.hero`
   already belongs to 6051 and 6079 in this file. Not one is renamed.
   ═══════════════════════════════════════════════════════════════════════ */
#wls-root .wls-brokers {
  /* Windsor brand navy, confirmed by Nick 3 August 2026. */
  --accent:      #0B3954;
  --accent-soft: #eff4f7;

  --ink:     #22303a;
  --muted:   #5c6b78;
  --faint:   #94a3b0;
  --rule:    #e3e9ee;
  --surface: #ffffff;
  --alt:     #f7f9fa;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --serif: Georgia, "Times New Roman", serif;
}
#wls-root .wls-brokers * { box-sizing:border-box }
#wls-root .wls-brokers { margin:0; background:var(--surface); color:var(--ink); font-family:var(--serif);
       font-size:18px; line-height:1.65; -webkit-font-smoothing:antialiased }
#wls-root .wls-brokers .wrap { max-width:1200px; margin:0 auto; padding:0 24px }
#wls-root .wls-brokers .eyebrow { font-family:var(--sans); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
            color:var(--accent); font-weight:600; margin:64px 0 20px }
#wls-root .wls-brokers h1 { font-size:34px; line-height:1.25; margin:0 0 18px; font-weight:normal }
#wls-root .wls-brokers .lede { font-size:20px; color:var(--muted); margin:0 0 44px }
#wls-root .wls-brokers .hero { background:var(--accent-soft); border-radius:10px; padding:40px 32px; text-align:center; margin:0 0 12px }
#wls-root .wls-brokers .hero .fig { font-family:var(--sans); font-size:64px; font-weight:600; letter-spacing:-.02em; color:var(--accent); line-height:1 }
#wls-root .wls-brokers .hero .cap { font-family:var(--sans); font-size:15px; color:var(--muted); margin-top:14px }
#wls-root .wls-brokers .kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--rule);
         border:1px solid var(--rule); border-radius:10px; overflow:hidden; margin:12px 0 52px }
#wls-root .wls-brokers .kpi { background:var(--surface); padding:22px 18px }
#wls-root .wls-brokers .kpi b { display:block; font-family:var(--sans); font-size:30px; font-weight:600; letter-spacing:-.015em }
#wls-root .wls-brokers .kpi span { display:block; font-family:var(--sans); font-size:13px; color:var(--muted); margin-top:6px; line-height:1.4 }
#wls-root .wls-brokers h2 { font-size:25px; font-weight:normal; margin:52px 0 16px; line-height:1.3 }
#wls-root .wls-brokers p { margin:0 0 18px }
#wls-root .wls-brokers figure { margin:34px 0 }
#wls-root .wls-brokers figure img { width:100%; display:block; border:1px solid var(--rule); border-radius:8px }
#wls-root .wls-brokers figcaption { font-family:var(--sans); font-size:13px; color:var(--faint); margin-top:12px }
#wls-root .wls-brokers .tablewrap { overflow-x:auto; -webkit-overflow-scrolling:touch; margin:26px 0 }
#wls-root .wls-brokers table { width:100%; border-collapse:collapse; font-size:17px }
#wls-root .wls-brokers th { font-family:var(--sans); font-size:11px; letter-spacing:.13em; text-transform:uppercase;
      color:var(--muted); text-align:left; font-weight:600; padding:0 16px 12px;
      border-bottom:2px solid var(--rule); white-space:nowrap }
#wls-root .wls-brokers td { padding:13px 16px; border-bottom:1px solid var(--rule); white-space:nowrap }
#wls-root .wls-brokers th.amt, #wls-root .wls-brokers td.amt { text-align:right; font-variant-numeric:tabular-nums }
#wls-root .wls-brokers tr.hl td { background:var(--accent-soft) }
#wls-root .wls-brokers .callout { border-left:3px solid var(--accent); padding:6px 0 6px 22px; margin:34px 0; font-size:20px }
#wls-root .wls-brokers .math { background:var(--alt); border-radius:10px; padding:26px 28px; margin:30px 0 }
#wls-root .wls-brokers .math dl { margin:0; display:grid; grid-template-columns:1fr auto; gap:12px 20px; font-family:var(--sans); font-size:16px }
#wls-root .wls-brokers .math dt { color:var(--muted) }
#wls-root .wls-brokers .math dd { margin:0; text-align:right; font-variant-numeric:tabular-nums }
#wls-root .wls-brokers .math dt.tot, #wls-root .wls-brokers .math dd.tot { border-top:1px solid var(--rule); padding-top:14px; font-weight:600 }
#wls-root .wls-brokers .math dd.tot { color:var(--accent) }
#wls-root .wls-brokers .cta { background:var(--accent); color:#fff; border-radius:10px; padding:36px 32px; margin:56px 0 24px; text-align:center }
#wls-root .wls-brokers .cta h2 { color:#fff; margin:0 0 12px; font-size:25px }
#wls-root .wls-brokers .cta p { color:#c8d8e4; margin:0 0 22px; font-size:17px }
#wls-root .wls-brokers .cta a { display:inline-block; background:#fff; color:var(--accent); font-family:var(--sans);
          font-weight:600; font-size:17px; padding:14px 30px; border-radius:6px; text-decoration:underline }
#wls-root .wls-brokers .fine { font-family:var(--sans); font-size:13px; color:var(--faint); line-height:1.6;
         border-top:1px solid var(--rule); padding-top:22px; margin:44px 0 72px }
@media (max-width:640px) {
  #wls-root .wls-brokers { font-size:17px }
  #wls-root .wls-brokers h1 { font-size:27px } #wls-root .wls-brokers h2 { font-size:22px }
  #wls-root .wls-brokers .hero { padding:32px 20px } #wls-root .wls-brokers .hero .fig { font-size:48px }
  #wls-root .wls-brokers .kpis { grid-template-columns:repeat(2,1fr) }
  #wls-root .wls-brokers .lede { font-size:18px } #wls-root .wls-brokers .callout { font-size:18px }
}

/* ═══════════════════════════════════════════════════════════════════════
   Page 163 — the one class added to the recovered design
   ═══════════════════════════════════════════════════════════════════════

   Kept out of the ported block above so that block stays a verbatim port.

   The page carried two H1s and opened with an orphan H3. The H3 became the
   design's own div.eyebrow; the case study's H1 became h2.headline. Demoting
   the tag alone would have dropped that headline from the design's 34px H1
   step to its 25px H2 step — a different heading than the one drawn — so the
   class restates the design's own h1 declarations, including the 27px step its
   640px block sets. No value here is invented.

   (1,2,0) against the design's `#wls-root .wls-brokers h2` at (1,1,1), so it
   wins on class count and not on source order. */
#wls-root .wls-brokers .headline {
  font-size: 34px; line-height: 1.25; margin: 0 0 18px; font-weight: normal;
}

/* THE FRAME ELEMENTOR WAS SUPPLYING — measured, not inferred.

   The recovered stylesheet says `.wrap { max-width: 1200px }`, and that value
   never once reached the screen. Measured on production at 1440, where
   Elementor is still active, the case-study .wrap renders **865px** inside an
   `elementor-widget-wrap` of 885 with 10px of padding. The design was authored
   and has only ever been seen inside that column. Lift Elementor away and the
   same markup expands 39%, which at 18px Georgia takes the measure from about
   82 characters a line to about 115 — that is what read as sections running
   together, because the vertical rhythm stayed put while every line got longer.

   Checked against the other three recovered/ported pages before assuming this
   was general, and it is not — 163 is the only one Elementor was constraining:

     163   production 865   staging 1200   <- constrained
     2933  production 736   staging  736   its own 46rem is narrower than the
                                           column, so Elementor never bound it
     6051  production 1440  staging 1440   full-bleed by design
     6079  production 1440  staging 1440   full-bleed by design

   These are theme additions, NOT part of the port: the recovered source file
   is untouched and still says 1200px. They live outside the ported block for
   that reason. The 10px is Elementor's widget-wrap padding, which is also the
   outer gutter production has at 390 and staging did not. */
#wls-root .wls-brokers { padding-left: 10px; padding-right: 10px; }
#wls-root .wls-brokers .wrap { max-width: 865px; }
@media (max-width: 640px) {
  #wls-root .wls-brokers .headline { font-size: 27px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   States hub — page-states.php, from preview 01
   ═══════════════════════════════════════════════════════════════════════

   Values are the preview's. The card grid deliberately reuses .wls-cards /
   .wls-card, which preview 01 draws identically to the article and directory
   grids — repeat(auto-fill, minmax(280px,1fr)) with a 16/10 cropped image — so
   there is no parallel .wls-statecards rule set to keep in step. */
#wls-root .wls-states-hero { background: var(--wls-navy); color: #fff; }
#wls-root .wls-states-hero .wls-wrap { padding-top: clamp(40px,5vw,72px); padding-bottom: clamp(40px,5vw,72px); }
#wls-root .wls-states-h1 {
  font-size: clamp(38px,4.4vw,58px); line-height: 1.05; margin: 0;
  max-width: 24em; color: #fff;
}
#wls-root .wls-states-kicker { display: flex; align-items: center; gap: 12px; margin-top: 26px; }
#wls-root .wls-states-kicker span:last-child {
  font-weight: 600; font-size: 12px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--wls-gold-light);
}
#wls-root .wls-states-rule { width: 40px; height: 1px; background: var(--wls-gold-light); flex: none; }

#wls-root .wls-states-intro { padding-top: clamp(40px,5vw,72px); padding-bottom: 0; }
#wls-root .wls-states-intro .wls-prose > *:first-child { margin-top: 0; }

#wls-root .wls-states-band { background: var(--wls-pale); border-top: 1px solid var(--wls-rule); }
#wls-root .wls-states-band .wls-wrap { padding-top: 56px; padding-bottom: 80px; }
/* Preview 01 sets both two-column rows .85fr / 1.15fr, where the shared
   .wls-two base is an even 1fr 1fr. Scoped to this template so the shared
   class keeps its own behaviour everywhere else. */
#wls-root .wls-states-intro .wls-two,
#wls-root .wls-states-head {
  grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr);
  gap: clamp(32px,6vw,88px);
}
#wls-root .wls-states-head { align-items: end; margin-bottom: 32px; }
@media (max-width: 899px) {
  #wls-root .wls-states-intro .wls-two,
  #wls-root .wls-states-head { grid-template-columns: minmax(0,1fr); gap: 24px; }
}
#wls-root .wls-states-head h2 { font-size: clamp(26px,2.8vw,34px); margin: 0; }
#wls-root .wls-states-head p {
  font-size: 16.5px; line-height: 1.7; color: var(--wls-body);
  margin: 0 0 18px; text-wrap: pretty;
}

/* Revealed by wls.js adding .wls-js, so a no-JS visitor never sees an inert
   field. Same contract as the company directory. */
#wls-root .wls-states-search { display: none; flex-wrap: wrap; align-items: center; gap: 14px; }
#wls-root .wls-js .wls-states-search { display: flex; }
#wls-root .wls-states-search input {
  flex: 1; min-width: 220px; padding: 11px 14px;
  font-family: var(--wls-font-body); font-size: 16px; color: var(--wls-ink);
  background: #fff; border: 1px solid var(--wls-rule);
}
#wls-root .wls-states-count {
  font-weight: 600; font-size: 12px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--wls-label);
}
@media (max-width: 899px) {
  #wls-root .wls-states-head { margin-bottom: 24px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Directory — "Why it matters", preview 09 section 2
   ═══════════════════════════════════════════════════════════════════════

   The design places this between the role panel and the card grid. The
   template did not render it at all, so its copy fell through into the prose
   column below the grid and nothing appeared above the cards. Values are the
   preview's; the buttons reuse .wls-btn--navy and .wls-btn--line, which
   already carry exactly the design's filled and outlined treatments. */
#wls-root .wls-dir-why { border-top: 1px solid var(--wls-rule); }
#wls-root .wls-dir-why .wls-wrap { padding-top: 56px; padding-bottom: 64px; }
#wls-root .wls-dir-why-grid {
  grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr);
  gap: clamp(32px,6vw,88px);
  align-items: start;
}
#wls-root .wls-dir-why-head { border-top: 1px solid var(--wls-rule); padding-top: 22px; }
#wls-root .wls-dir-why-head h2 { font-size: clamp(26px,2.8vw,34px); line-height: 1.14; margin: 0 0 28px; }
#wls-root .wls-dir-why-btns { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
#wls-root .wls-dir-why-body > p { font-size: 16.5px; line-height: 1.7; margin: 0 0 18px; text-wrap: pretty; }
#wls-root .wls-dir-why-body > p:last-child { margin-bottom: 0; }
@media (max-width: 899px) {
  #wls-root .wls-dir-why-grid { grid-template-columns: minmax(0,1fr); gap: 24px; }
  #wls-root .wls-dir-why .wls-wrap { padding-top: 40px; padding-bottom: 44px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Preview 07's two list components
   ═══════════════════════════════════════════════════════════════════════

   Both are the design's own values, mapped onto tokens that already hold
   exactly those colours: --wls-ink #10222e, --wls-body #4a5b66,
   --wls-rule #cdd8e0, --wls-gold #b8873a.

   THE STEP LIST. Preview 07 renders it as
     ol  list-style:none; padding:0; margin:0 0 18px; counter-reset:step;
         border-top:1px solid #cdd8e0
     li  counter-increment:step; display:grid;
         grid-template-columns:44px minmax(0,1fr); gap:16px;
         border-bottom:1px solid #cdd8e0; padding:16px 0; margin:0
     no. font-family Newsreader; font-size:22px; line-height:1.2; colour gold
     txt font-size:16px; line-height:1.68; colour --wls-body
     b   colour --wls-ink

   The number comes from a CSS counter, so no markup is generated for it — the
   ::before box becomes the first grid item. `decimal-leading-zero` gives the
   design's "01", "02".

   Scoped to .wls-steps, which wls_build_design_components() puts on an <ol>
   only when EVERY item opens with a <strong>. Nine of the eleven ordered lists
   on this site are plain enumerations — including two legal lists on
   /terms-and-conditions/ — and they keep the ordinary list styling. */
#wls-root .wls-prose ol.wls-steps,
#wls-root .wls-article ol.wls-steps {
  list-style: none; padding: 0; margin: 0 0 18px;
  counter-reset: wls-step;
  border-top: 1px solid var(--wls-rule);
}
#wls-root .wls-prose ol.wls-steps > li,
#wls-root .wls-article ol.wls-steps > li {
  counter-increment: wls-step;
  display: grid; grid-template-columns: 44px minmax(0,1fr); gap: 16px;
  border-bottom: 1px solid var(--wls-rule);
  padding: 16px 0; margin: 0;
  font-size: 16px; line-height: 1.68; color: var(--wls-body);
}
/* The design sets this #b8873a, which is 3.20:1 on white — below AA, and at
   22px regular it is not WCAG "large text" (that needs 24px). --wls-gold-text
   is the same hue at 5.52:1 and is the standing 1.28.0 decision for gold on a
   light ground. The gold RULE below keeps --wls-gold: a border is decorative
   and carries no contrast requirement. */
#wls-root .wls-prose ol.wls-steps > li::before,
#wls-root .wls-article ol.wls-steps > li::before {
  content: counter(wls-step, decimal-leading-zero);
  font-family: var(--wls-font-head); font-weight: 400;
  font-size: 22px; line-height: 1.2; color: var(--wls-gold-text);
}
#wls-root .wls-prose ol.wls-steps > li strong,
#wls-root .wls-article ol.wls-steps > li strong { color: var(--wls-ink); font-weight: 600; }
/* The generated wrapper. Without it <strong> and the sentence after it are two
   separate grid items and the text drops into the 44px number column. */
#wls-root .wls-steps > li > .wls-step-txt { display: block; min-width: 0; }

/* THE COMPARISON PAIR. Preview 07:
     wrap  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
           gap:28px; margin-bottom:18px
     col1  border-top:2px solid #b8873a; padding-top:16px
     col2  border-top:2px solid #cdd8e0; padding-top:16px
     p     font-size:16px; line-height:1.5; colour --wls-ink; weight 600;
           margin:0 0 12px
     ul    font-size:15.5px; line-height:1.65; colour --wls-body; margin:0
   The content is a flat run of two lead-in paragraphs each followed by a list;
   wls_build_design_components() pairs them. */
#wls-root .wls-pair {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
  gap: 28px; margin-bottom: 18px;
}
#wls-root .wls-pair-col { border-top: 2px solid var(--wls-rule); padding-top: 16px; }
#wls-root .wls-pair-col:first-child { border-top-color: var(--wls-gold); }
#wls-root .wls-prose .wls-pair-col > p,
#wls-root .wls-article .wls-pair-col > p {
  font-size: 16px; line-height: 1.5; color: var(--wls-ink);
  font-weight: 600; margin: 0 0 12px;
}
#wls-root .wls-prose .wls-pair-col > ul,
#wls-root .wls-article .wls-pair-col > ul {
  font-size: 15.5px; line-height: 1.65; color: var(--wls-body); margin: 0;
}



/* ═══════════════════════════════════════════════════════════════════════
   1.42.0 — mobile pass
   ═══════════════════════════════════════════════════════════════════════

   Appended as one block, last in the file, because most of it overrides
   rules that already exist. Two rules at equal specificity are decided by
   source order and @media adds none, which is the trap this file has now
   recorded eight times. Everything here that must beat an existing rule
   either carries #wls-root or sits after the rule it overrides — usually
   both. Where a rule was simply wrong it was edited in place instead of
   being shadowed from down here; see the .gform_page_footer block and the
   rail's deleted `order` pair.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Q-012  The mobile drawer could not be closed ─────────────────────
   Measured on staging at 390x844 before this change:

     drawer, submenus closed              349px
     drawer, "Life Settlements" open      895px   <- taller than the viewport
     drawer, all three open              1509px
     .wls-header position                relative
     summary top after scrolling 300px   -280px   (gone)

   <details> was toggling correctly the whole time — taps at all five points
   of the 44px summary opened and closed it. What failed is that reading the
   nine-item submenu requires scrolling, scrolling takes a non-sticky header
   off-screen, and the only control that closes the drawer goes with it.

   Two rules fix it and neither needs JavaScript:
     the panel never grows past the viewport, so the page need not move;
     the bar sticks while the drawer is open, so the control cannot leave
     even when it does.

   The sticky is scoped to [open] deliberately. A permanently sticky header
   would take 84px off every mobile viewport on every page — a design change
   nobody asked for — to solve a problem that only exists while the drawer
   is showing. ── */
@media (max-width: 899px) {
  .wls-menu-toggle[open] { position: static; }
  .wls-header:has(.wls-menu-toggle[open]) { position: -webkit-sticky; position: sticky; top: 0; z-index: 60; }
  /* :has() is unsupported in older Safari and Firefox ESR, where the header
     stays relative. The max-height below is what makes that acceptable: the
     drawer cannot outgrow the viewport, so the summary stays on screen with
     or without the sticky. The sticky is the belt; this is the braces. */
  #wls-root .wls-menupanel {
    max-height: calc(100vh - 84px);
    max-height: calc(100dvh - 84px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
}
/* The summary carries both icons; [open] picks. Doing this in CSS rather than
   in script means the state is honest with JavaScript off, which matters here
   because <details> is what actually opens and closes the thing. */
.wls-menu-toggle > summary > svg { display: block; }
.wls-menu-toggle > summary > .wls-icon-close,
.wls-menu-toggle[open] > summary > .wls-icon-bars { display: none; }
.wls-menu-toggle[open] > summary > .wls-icon-close { display: block; }

/* ── Q-002  Return to top ─────────────────────────────────────────────
   Hidden until assets/wls.js reveals it past two viewport heights, the same
   contract the directory's filter chips use: nothing inert is ever shown.

   Left of centre-bottom on mobile, bottom-right on desktop, and always clear
   of the safe-area inset so it does not sit under an iPhone's home
   indicator. 44px square, which is the minimum touch target this theme uses
   everywhere else. ── */
#wls-root .wls-totop {
  position: fixed; z-index: 70;
  right: calc(16px + env(safe-area-inset-right, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  width: 44px; height: 44px; padding: 0;
  display: none; align-items: center; justify-content: center;
  background: var(--wls-navy); color: #fff;
  border: 1px solid rgba(255,255,255,.28); border-radius: 0;
  cursor: pointer; opacity: 0; transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, background .15s;
}
#wls-root .wls-totop.is-on { display: flex; opacity: 1; transform: none; }
#wls-root .wls-totop:hover { background: var(--wls-navy-hover); }
#wls-root .wls-totop:focus-visible { outline: 2px solid var(--wls-gold-light); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  #wls-root .wls-totop { transition: none; transform: none; }
}

/* ── Q-005 / Q-014  Orphan words ──────────────────────────────────────
   `text-wrap: balance` on every display heading and on the step lead-ins.
   Measured before: every one of these computed `text-wrap: wrap`, so a
   heading whose last word did not fit dropped that word alone onto its own
   line — "reviewed." on the directory band head, "policy?" on the
   calculator H2, "60." and "be sold." on the numbered steps.

   `balance` rather than `pretty`: these are short, and balance evens the
   line lengths across the whole block, which is what a display heading
   wants. `pretty` only protects the last line and leaves the earlier ones
   ragged. Browsers cap balancing at a handful of lines and fall back to
   normal wrapping beyond that, so long headings are unaffected rather than
   slow. Body copy already uses `pretty` and is left alone. ── */
#wls-root .wls-hero h1,
#wls-root .wls-h1,
#wls-root .wls-dir-h1,
#wls-root .wls-calc-h1b,
#wls-root .wls-states-h1,
#wls-root .wls-band-head h2,
#wls-root .wls-dir-why-head h2,
#wls-root .wls-states-head h2,
#wls-root .wls-cta h2,
#wls-root .wls-prose h2,
#wls-root .wls-prose h3,
#wls-root .wls-article h2,
#wls-root .wls-article h3,
#wls-root .wls-explore h2,
#wls-root .wls-calc-card-head h2,
#wls-root .wls-num-head h2 { text-wrap: balance; }
/* The step and numbered-list lead-ins are inline <strong> inside a block, so
   the property has to go on the block that contains them. */
#wls-root .wls-steps > li > .wls-step-txt,
#wls-root .wls-numbered h3,
#wls-root .wls-pair-col > p:first-child { text-wrap: balance; }

/* ── Q-006  The directory filter area ─────────────────────────────────
   Measured at 390 before: the four chips wrapped 3 + 1 across two rows, and
   the search sat at 194px inside a 358px row with the rest of the row empty,
   because `.wls-dir-search` is a <label> shrinking to its content while the
   `width: 100%` in the mobile block applied to the INPUT inside it. Fixing
   the input alone could never have worked.

   The whole strip is now a two-row grid below 900px: chips on one line that
   scrolls sideways if the vocabulary grows, search filling the row beneath.
   A horizontal scroller rather than a wrap, so the strip is always exactly
   two rows however many company types exist — it reads as a control, not as
   ragged text. Scrollbar hidden because the chips themselves are the
   affordance and a visible bar under four buttons looks broken. ── */
@media (max-width: 899px) {
  #wls-root .wls-dir-controls {
    display: grid; grid-template-columns: minmax(0,1fr); gap: 12px;
    align-items: stretch; margin-bottom: 22px;
  }
  #wls-root [data-wls-filter].wls-js .wls-dir-chips {
    display: flex; flex-wrap: nowrap; gap: 8px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: none;
    /* Bleed to the viewport edges so a scrolled chip is not clipped mid-word
       against the gutter, then pad the ends back to the text column. */
    margin: 0 calc(var(--wls-gutter) * -1); padding: 2px var(--wls-gutter);
  }
  #wls-root .wls-dir-chips::-webkit-scrollbar { display: none; }
  #wls-root .wls-dir-chip { flex: none; white-space: nowrap; padding: 11px 16px; }
  #wls-root .wls-dir-search { display: block; margin-left: 0; width: 100%; }
  #wls-root .wls-dir-search input {
    width: 100%; min-width: 0; padding: 12px 14px;
    /* 16px, or iOS Safari zooms the viewport when the field takes focus. */
    font-size: 16px; line-height: 1.4;
  }
}

/* ── Q-013 / Q-053  The CTA band's phone button ───────────────────────
   Measured at 390 before: 358x53, display:block, width:358px — a fourteen-
   character phone number stretched across the whole viewport by
   `.wls-cta-row > .wls-btn { width: 100% }`. It read as a banner rather than
   as something to press.

   It now sizes to its content and centres, and carries the same handset icon
   the desktop header's phone button uses so the two read as one affordance.
   `width: auto` needs to beat that 100% rule: this block is later in the
   file and both are (0,2,0) inside the same query, so source order decides
   and this wins. The Settlement Calculator button beside it keeps full width
   — it is the primary action and the design gives it the row. ── */
#wls-root .wls-btn--tel {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
}
#wls-root .wls-btn--tel > svg { flex: none; }

/* Q-081. Same treatment for the calculator button. The 10px gap is the
   design's own value — parts/home-block.php:64-71 draws the calculator and
   handset pair together at 17px / stroke 1.5 / gap 10px, and that pair is what
   the client pointed at as correct. It is 1px wider than --btn--tel's 9px,
   which predates it; invisible at this size, and changing --tel would move six
   phone buttons for nothing. Recorded rather than reconciled. */
#wls-root .wls-btn--calc {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
}
#wls-root .wls-btn--calc > svg { flex: none; }
@media (max-width: 899px) {
  .wls-cta-row > .wls-btn--tel {
    width: auto; align-self: center; padding-left: 26px; padding-right: 26px;
  }
}

/* ── Q-015  The stat rows read as one run-on line ─────────────────────
   FIXED ENTIRELY IN COPY — there is no CSS here, and that is the finding.

   "2012" beside "Estimates built on brokered offers since" reads as one
   sentence, so at 390, where the two sit 18px apart, it read as "2012
   estimates built on brokered offers since". The first attempt treated that
   as a layout problem and stacked the number above the label below 900px.

   The parity harness rejected it: preview 00 keeps the pair side by side at
   390 — number 68px, label at x=106 — and stacking produced nine new deltas,
   three of them HIGH, against a design that was never wrong. The label was.
   Rewritten in page-calculator.php so every label completes its own number,
   and the design is left alone. Deltas back to zero.

   Kept as a comment rather than deleted: the next person to look at this at
   390 will see the same thing the client saw, and this says where the fix
   went. ── */

/* ── Q-016  Paired form fields sat at different heights ───────────────
   Measured at 390 in the life calculator card: both cells 146x96, but the
   "Amount of the policy's death benefit?" label wrapped to 38px where "Age"
   stayed at 19px, so the two inputs started 19px apart — the taller label
   pushed its own input down while the shorter one left a gap under it.

   Grid already stretches the two cells to equal height; nothing was using
   that. Making the field a column flex and giving the input wrapper
   `margin-top: auto` pins every input to the bottom of its cell, so a
   one-line label and a three-line label still line their inputs up.

   Applies to all three calculators and to any future paired fields, because
   it keys off .gfield rather than off a field id. ── */
#wls-root .wls-gf .gform_fields > .gfield {
  display: flex; flex-direction: column; min-width: 0;
}
#wls-root .wls-gf .gform_fields > .gfield > .ginput_container { margin-top: auto; }
/* The validation message must stay below the input it describes, so it is
   excluded from the auto margin by coming after it in the flex column. */
#wls-root .wls-gf .gform_fields > .gfield > .gfield_description,
#wls-root .wls-gf .gform_fields > .gfield > .validation_message { margin-top: 6px; }

/* ── Q-022  The share block after the article ─────────────────────────
   Rendered by parts/share-mobile.php on every rail template, and shown only
   where the rail's own copy is hidden. Exactly one is ever on screen, so the
   DOM order matches the visual order at both widths — which is the entire
   point of the change; see parts/rail.php for the measurement. ── */
/* The base `.wls-share-mobile { display: none }` and the 899px
   `display: block !important` that single.php already relies on both apply to
   this modifier unchanged, so no display rule is repeated here. Only the
   spacing differs: the article band follows a calculator card, this one
   follows the prose column. */
@media (max-width: 899px) {
  #wls-root .wls-share-mobile--rail { padding-top: 4px !important; padding-bottom: 44px !important; }
}

/* ── Q-008  The directory role panel, two copies ──────────────────────
   One in the hero's right column at 900px and up, exactly as preview 09
   draws it; one after the "Why it matters" band below that, so the argument
   is what a reader meets after the title rather than four rows of counts.
   See parts/dir-roles.php for why this is duplicated markup and why that is
   safe here. ── */
#wls-root .wls-dir-roles--after { display: none; }
@media (max-width: 899px) {
  #wls-root .wls-dir-roles--hero { display: none; }
  #wls-root .wls-dir-roles--after {
    display: block; position: static;
    padding: 0 var(--wls-gutter) 44px;
    max-width: var(--wls-max); margin: 0 auto;
    border-top: 0;
  }
}

/* ── Q-001 / Q-003 / Q-010  The qualify prompt ────────────────────────
   One question in three places: the hero's gold slot, the calculator page's
   gold rule, and the head of every embedded calculator card.

   In the hero it reuses .wls-rule-gold, so it inherits the 40px rule and the
   gap. What it does NOT inherit is the eyebrow's tracked uppercase: it is a
   question, and 11px caps at .18em tracking makes a question unreadable and
   makes it look like a label. Sentence case at 15px instead.

   Colour: --wls-gold-light on navy, --wls-gold-text on the calculator card's
   white ground. Both are the standing 1.28.0 split, and the navy half was
   re-measured rather than assumed, because this file's own note that gold is
   "5.9:1 on navy and needs no help" turned out to be describing the FOOTER
   navy, not the hero's:

     ground                    --wls-gold   --wls-gold-light
     #0c2b3f  --wls-navy, hero    4.58:1        6.92:1
     #081f2e  footer              5.27:1        7.96:1
     #123549  results panel       4.02:1        6.08:1

   At 15px regular AA wants 4.5:1, so brand gold clears the hero by 0.08 and
   fails the results panel outright. New text does not get to sit on a margin
   that thin, so this takes the light gold everywhere on navy.

   THE SELECTOR HAS TO BEAT (1,3,0). `#wls-root .wls-hero .wls-rule-gold >
   span` in the accessibility block above restores brand gold for everything
   gold-on-navy, and it is one class heavier than a plain
   `#wls-root .wls-hero-cta > span`. Measured before this was raised: the line
   computed rgb(184,135,58), the brand gold, not the value written here.
   Adding .wls-hero / .wls-calc-hero2 brings these to (1,3,0) and (1,4,0), so
   they win on specificity and source order both. ── */
/* The `.wls-calc-hero2` selector that used to be in this group is gone with
   the prompt it coloured; parts/hero.php is now the only emitter. */
#wls-root .wls-hero-cta > span,
#wls-root .wls-hero .wls-hero-cta > span {
  font-family: var(--wls-font-body); font-size: 15px; line-height: 1.5;
  font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--wls-gold-light);
}
#wls-root .wls-calc-cta {
  font-family: var(--wls-font-body); font-size: 15px; line-height: 1.5;
  font-weight: 500; color: var(--wls-gold-text); margin-top: 10px;
}

/* ── Q-024  Editorial tables in prose ─────────────────────────────────
   Measured at 390 across the three pages that have them: four tables on
   /chapter-2…/ and /the-accelerated-death-benefit-option/ rendered at
   border-collapse: separate, 1px cell padding and no cell borders — browser
   default, no rule anywhere in this stylesheet reached them, because the
   only `table` selectors here are scoped to .calc_results. Two more on the
   term page carried inline 12px type from the Elementor build.

   None of the six overflowed at 390; the defect is legibility, not width. So
   the treatment is the theme's own hairline register — the same rule colour
   and the same 15px body step the FAQ rows and the spec tables use — plus a
   scroll container for the one case a wide table cannot be helped.

   `overflow-x: auto` on a WRAPPER, not on the table: `display: block` on a
   <table> is what the results page had to do to a two-column currency table,
   and it destroys the table's own column sizing. A wrapper leaves the table
   a table. Since the content supplies no wrapper, the scroll is put on the
   table's containing block with `max-width: 100%` on the table itself, which
   is enough for every table here and degrades to a normal table when it
   fits. Verified: zero horizontal page overflow at 390 after the change.

   Scoped to .wls-prose and .wls-article so it cannot reach the four
   standalone designs, whose stylesheets style their own tables and whose
   loose class vocabulary this file has already had to fence off once. ── */
#wls-root .wls-prose table,
#wls-root .wls-article table {
  width: 100%; max-width: 100%; margin: 22px 0 26px;
  border-collapse: collapse; border-top: 1px solid var(--wls-rule);
  font-family: var(--wls-font-body); font-size: 15px; line-height: 1.55;
  color: var(--wls-body);
}
#wls-root .wls-prose table th,
#wls-root .wls-article table th {
  text-align: left; font-weight: 600; color: var(--wls-navy);
  font-size: 13px; letter-spacing: .04em; text-transform: uppercase;
  padding: 12px 14px 12px 0; border-bottom: 1px solid var(--wls-rule);
  vertical-align: bottom;
}
#wls-root .wls-prose table td,
#wls-root .wls-article table td {
  padding: 12px 14px 12px 0; border-bottom: 1px solid var(--wls-rule-soft);
  vertical-align: top;
}
#wls-root .wls-prose table th:last-child,
#wls-root .wls-prose table td:last-child,
#wls-root .wls-article table th:last-child,
#wls-root .wls-article table td:last-child { padding-right: 0; }
#wls-root .wls-prose table caption,
#wls-root .wls-article table caption {
  caption-side: bottom; text-align: left; font-size: 13.5px; line-height: 1.5;
  color: var(--wls-label); padding-top: 10px;
}
/* The inline 12px type the Elementor build left on the term page's two
   tables beats any rule this file can write at plausible specificity, so the
   cells are re-sized from the table down, where no inline style sits. */
#wls-root .wls-prose table[style] th,
#wls-root .wls-prose table[style] td,
#wls-root .wls-article table[style] th,
#wls-root .wls-article table[style] td { font-size: 15px; }
@media (max-width: 899px) {
  #wls-root .wls-prose table,
  #wls-root .wls-article table { font-size: 14.5px; }
  #wls-root .wls-prose table th,
  #wls-root .wls-article table th { font-size: 12px; padding-right: 10px; }
  #wls-root .wls-prose table td,
  #wls-root .wls-article table td { padding-right: 10px; }
}

/* ── Q-054  The footer bottom bar ─────────────────────────────────────
   Copyright and the Terms link on one line, wrapping to two on the
   narrowest phones. The separator is a pseudo-element rather than a
   character in the markup so it disappears with the link if page 847 is ever
   unpublished, and so it is never read out. ── */
#wls-root .wls-footer-bottom {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px;
}
#wls-root .wls-footer-bottom a { color: #c5d8e4; }
#wls-root .wls-footer-bottom a:hover { color: #fff; text-decoration: underline; }
#wls-root .wls-footer-bottom a::before {
  content: '·'; margin-right: 14px; color: rgba(197,216,228,.5);
}
@media (max-width: 430px) {
  #wls-root .wls-footer-bottom a::before { content: none; }
}


/* ═══════════════════════════════════════════════════════════════════════
   1.42.2 — company directory to preview 09
   ═══════════════════════════════════════════════════════════════════════

   Ported from the preview's own inline values, not matched by eye. Preview 09
   writes the card band as

     <section style="background:#eef2f6;border-top:1px solid #cdd8e0">
       <div style="max-width:1180px;margin:0 auto;padding:44px …px 72px">

   and `.wls-wrap` is already `max-width: var(--wls-max)` with the gutter, so
   only the vertical padding and the band chrome are new here.

   Checked before writing, because this file has nine recorded instances of a
   rule that lost: nothing else in the stylesheet sets a background on
   `.wls-dir-grid-sec`, and the only other rules on it are the padding pair
   replaced below and the H2 size. No contest to win.
   ═══════════════════════════════════════════════════════════════════════ */

/* The band. --wls-pale is #eef2f6 and --wls-rule is #cdd8e0, both byte-equal
   to the design, so this is the existing token set rather than new hexes. */
#wls-root .wls-dir-grid-sec {
  background: var(--wls-pale);
  border-top: 1px solid var(--wls-rule);
  /* The section is no longer the wrapper — see page-directory.php. The two
     padding declarations that used to live here (56px/64px) moved onto the
     inner .wls-wrap below and took the design's values while they were at it. */
  padding-top: 0; padding-bottom: 0;
}
#wls-root .wls-dir-grid-sec > .wls-wrap { padding-top: 44px; padding-bottom: 72px; }

/* Preview 09: clamp(26px,2.6vw,34px), and margin-bottom 26px on the head row.
   The 2.8vw here was a transcription slip — both clamp to 34px above about
   1210px, so it only ever differed between 929px and 1214px, which is why it
   survived two audits. */
#wls-root .wls-dir-grid-sec .wls-band-head { margin-bottom: 26px; }
#wls-root .wls-dir-grid-sec .wls-band-head h2 { font-size: clamp(26px,2.6vw,34px); line-height: 1.14; }

/* The count line. The design draws it as tracked caps, not as a sentence:
   font-weight 600, 12px, .2em, uppercase. `.wls-band-head p` sets 15.5px
   sentence case and is (1,2,1); this is (1,3,1) and wins on specificity
   rather than on source order. */
#wls-root .wls-dir-grid-sec .wls-band-head p {
  font-weight: 600; font-size: 12px; line-height: 1.4;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--wls-label); max-width: none;
}

/* The control strip: hairline above and below, 14px of air, 16px gap.
   The theme had no rules on it at all and a 10px gap. */
#wls-root .wls-dir-controls {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
  border-top: 1px solid var(--wls-rule);
  border-bottom: 1px solid var(--wls-rule);
  padding: 14px 0; margin-bottom: 32px;
}
/* Hidden with the chips, revealed by the same .wls-js hook, so a label never
   appears above controls that are not wired yet. */
#wls-root .wls-dir-filter-label { display: none; }
#wls-root [data-wls-filter].wls-js .wls-dir-filter-label { display: block; }
#wls-root .wls-dir-filter-label {
  font-weight: 600; font-size: 11px; line-height: 1.4;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--wls-label); flex: none;
}

/* THE ONE DELIBERATE DIVERGENCE ON THIS PAGE. The design sets both the count
   and the filter label #7b8894, which is `--wls-label`'s original value. On
   this band's #eef2f6 ground that measures 3.22:1 — worse than the 3.63:1 on
   white that the 1.28.0 audit already rejected — and these are 11px and 12px,
   so AA wants 4.5:1. --wls-label is #5f6b77 and measures 4.84:1 on the same
   ground. Same standing decision, same reason. */

/* The cards sit on the band now, so the pale image slot needs to stay lighter
   than its surroundings rather than matching them. The design uses #f6f9fb on
   the slot against #eef2f6 on the band, which the theme already has as
   --wls-neutral-100; stated here because the two are close enough that a
   later "tidy-up" could collapse them and flatten the card. */

@media (max-width: 899px) {
  #wls-root .wls-dir-grid-sec > .wls-wrap { padding-top: 36px; padding-bottom: 52px; }
  /* The label leads the two-row strip rather than sharing a row with the
     scroller, which would eat half the chips' width at 390. */
  #wls-root .wls-dir-controls { display: grid; grid-template-columns: minmax(0,1fr); gap: 12px; padding: 14px 0; }
}

/* ── The "Why it matters" body — TENTH INSTANCE OF THE SPECIFICITY TRAP ──
   `#wls-root .wls-dir-why-body > p` is (1,2,1)? No: (1,1,1). The lede rule
   `#wls-root .wls-prose > p:first-of-type` is (1,2,1), because `:first-of-type`
   counts in the class column — so it beat the directory rule on specificity,
   not on source order, and no amount of moving the block down the file would
   have helped.

   Confirmed by walking the CSSOM on the rendered page rather than by reading:

     #wls-root .wls-prose p                    sp10101   16.5px
     #wls-root .wls-dir-why-body > p           sp10101   16.5px
     #wls-root .wls-prose > p:first-of-type    sp10201   19px   <- winner

   So the design's 16.5px body copy rendered at 19px in the theme's ink colour,
   and the first paragraph of that column was a lede it was never meant to be.
   Preview 09 sets 16.5px in --wls-body for every paragraph in the block.

   Qualified with .wls-dir-why to reach (1,2,1) and placed after the lede rule,
   so it wins on specificity AND order. The colour is restated because the lede
   rule was supplying --wls-ink to the first paragraph only, which is why that
   column had one dark paragraph and the rest grey. */
#wls-root .wls-dir-why .wls-dir-why-body > p {
  font-size: 16.5px; line-height: 1.7; color: var(--wls-body);
  margin: 0 0 18px; text-wrap: pretty;
}
#wls-root .wls-dir-why .wls-dir-why-body > p:last-child { margin-bottom: 0; }

/* ── Explore More card headings: 21px, and SCOPED ──────────────────────
   `.wls-card-txt h3` is 24px and is shared by the explore band, the city
   cards, the states hub and the three listing templates. Previews 00, 07 and
   09 all set the explore card heading at 21px — but preview 01 sets the state
   cards at 24px, so the previews disagree BY CONTEXT rather than one of them
   being stale.

   Changing the shared value would have fixed this page and broken the states
   hub, so the 21px is scoped to .wls-explore. (0,2,1) against the shared
   (0,1,1), so it wins on specificity and the other grids keep 24px. */
#wls-root .wls-explore .wls-card-txt h3 { font-size: 21px; }

@media (max-width: 899px) {
  /* The label sizes to its text rather than filling the grid column, which is
     what the design's flex strip gives it. */
  #wls-root .wls-dir-filter-label { width: max-content; max-width: 100%; }
}

/* ── Hero intro, due-diligence and why-body paragraph metrics ─────────
   Preview 09 gives all three the same shape: a bottom margin on every
   paragraph and none on the last. The theme had no last-paragraph rule for
   two of them and the wrong measure on the third.

   `max-width: 44em`, NOT 44ch. A note on the intro rule read "a 44ch cap
   wrapped it one line longer than the design" and concluded the design had no
   cap at all. The design does have one — it is `44em`, which at 17px is 748px,
   where 44ch is about 374px. The two units were conflated, the cap was
   dropped, and the intro has been rendering one line short of the design
   since. Design line-height is 1.68; the theme had 1.66.

   `:last-of-type` rather than `:last-child` — the why-body's markup is lifted
   out of post_content, so its final node is not reliably the paragraph. */
#wls-root .wls-dir-intro p {
  font-size: 17px; line-height: 1.68; color: var(--wls-body);
  margin: 0 0 16px; max-width: 44em; text-wrap: pretty;
}
#wls-root .wls-dir-intro p:last-of-type { margin-bottom: 0; }
#wls-root .wls-dir-ask-body p:last-of-type { margin-bottom: 0; }
#wls-root .wls-dir-why .wls-dir-why-body > p:last-of-type { margin-bottom: 0; }

/* Explore More heading: the design's 2.6vw, not 2.8vw. Previews 07 and 09
   both write `clamp(26px,2.6vw,34px)` and they are the two pages that draw
   this band; the theme's 2.8vw only diverged between about 929px and 1308px,
   which is why it survived until a 1024 comparison was run. Shared rather
   than scoped, because both previews that specify it agree. */
#wls-root .wls-explore h2 { font-size: clamp(26px,2.6vw,34px); }

/* ── CTA band: hours below the buttons, one line ──────────────────────
   Preview 09 is the only design that draws this band, and it puts the hours
   under the button row at 13px with `opacity:.6`, not above it at 14px on two
   lines. Ported verbatim — including the opacity, which composites to
   rgb(158,170,178) on the band's #0c2b3f and measures 6.17:1, so the design's
   own value clears AA at 13px and needs none of the 1.28.0 darkening.

   The H2's bottom margin goes to the design's 26px, from 18px; the gap under
   the heading was carrying the space the removed hours block used to occupy.

   Later in the file than the base .wls-cta-hours rule at ~line 347, and both
   are (1,1,0), so this wins on source order — the margin has to flip from
   bottom to top or the block sits tight against the buttons. */
#wls-root .wls-cta h2 { margin: 0 0 26px; }
#wls-root .wls-cta-hours {
  margin: 22px 0 0; font-size: 13px; line-height: 1.6;
  letter-spacing: .06em; color: #fff; opacity: .6;
}

/* ── Due-diligence links: underlined, as the design writes them ───────
   ELEVENTH INSTANCE OF THE #wls-root TRAP, and the narrowest one yet.
   `#wls-root a { text-decoration: none }` is (1,0,1). The theme already beats
   it in every body-copy context — .wls-prose, .wls-article, .wls-num,
   .wls-faqs — but .wls-dir-ask-body is none of those, so its two links
   rendered in link blue with no underline.

   Measured across the whole rendered page: these are the ONLY two body links
   on it that were not underlined. Everything else already carried a prefixed
   rule, which is why the gap was invisible until someone looked at this
   column.

   Preview 09 writes both of them inline as
   `text-decoration:underline;text-underline-offset:3px`, so the values are the
   design's, not invented — and they match the offset the other four rules in
   this file already use. (1,1,1) beats (1,0,1) on specificity. */
#wls-root .wls-dir-ask-body a { text-decoration: underline; text-underline-offset: 3px; }

/* ── The role panel has no rule above its eyebrow ─────────────────────
   Preview 09 builds the panel as

     <div …margin-bottom:18px>By role</div>
     <div style="border-top:1px solid #cdd8e0"></div>
     …rows, each border-bottom:1px solid #cdd8e0…

   — the eyebrow first, THEN a divider. The theme put a `border-top` on the
   panel itself, which drew a second line above "By role" that the design does
   not have, and a 20px pad under it. Both removed; the line below the eyebrow
   is the first row's own border, which is the divider the design draws.

   The row rules also take --wls-rule (#cdd8e0), the design's colour, in place
   of --wls-rule-soft (#dbe4ea). Not asked for, but it is the same component
   and the same design value, so the panel now uses one hairline colour rather
   than two. Scoped to .wls-dir-role, which only parts/dir-roles.php emits. */
#wls-root .wls-dir-roles { border-top: 0; padding-top: 0; }
#wls-root .wls-dir-role { border-top: 1px solid var(--wls-rule); }
#wls-root .wls-dir-role--total { border-bottom: 1px solid var(--wls-rule); }

/* ═══════════════════════════════════════════════════════════════════════
   1.42.4 — Q-071, definition lists in prose
   ═══════════════════════════════════════════════════════════════════════

   `.wls-prose` styles p, h2, h3, ul, ol, a, table and details, and has never
   had a dl rule. That went unnoticed until page 163 (Life Settlement Brokers)
   was moved off page-standalone.php onto the default template: its financial
   breakdown is a definition list, and it lost the page-scoped `.wls-brokers
   .math dl` rules along with the wrapper class.

   A RESCOPE CANNOT FIX IT. kses stripped the class attributes on migration, so
   `<div class="math">`, `dt.tot` and `dd.tot` do not exist in post_content —
   only bare `<dl><dt><dd>` survived. These rules therefore have to work on
   unclassed elements. Nothing is written to the database.

   BLAST RADIUS, MEASURED ACROSS ALL 134 SITEMAP URLS: exactly one page has a
   dl inside a prose container — /life-settlement/life-settlement-brokers/, one
   dl, five dt. The 42 company profiles carry `<dl class="wls-specs">`, but that
   sits in the profile's own spec block and NOT inside .wls-prose, so it is
   untouched; verified by rendering, not by reading the template.

   THE VALUES ARE THE DESIGN'S STRUCTURE WITH THE THEME'S TOKENS, and that is a
   deliberate split. The two-column grid, the right-aligned tabular figures, the
   muted labels and the ruled total are lifted from the ported `.wls-brokers
   .math` rules. The colours and the family are the theme's, because the page
   now lives in .wls-prose and a block set in system-sans at #5c6b78 would read
   as foreign beside Barlow prose. The two palettes are within a hair of each
   other anyway — measured on the card ground, the design's #5c6b78 is 5.19:1
   and --wls-label is 5.12:1; the design's accent is 11.51:1 and --wls-navy is
   13.77:1. Both pass AA at 16px either way.

   The card treatment — ground, radius, padding — was on the `.math` wrapper,
   which no longer exists, so it moves onto the dl itself.
   ═══════════════════════════════════════════════════════════════════════ */
#wls-root .wls-prose dl,
#wls-root .wls-article dl {
  display: grid; grid-template-columns: 1fr auto; gap: 12px 20px;
  margin: 30px 0; padding: 26px 28px;
  background: var(--wls-neutral-100); border-radius: 10px;
  font-family: var(--wls-font-body); font-size: 16px; line-height: 1.5;
}
#wls-root .wls-prose dt,
#wls-root .wls-article dt { color: var(--wls-label); margin: 0; }
/* dd carries a 40px margin-inline-start by browser default; (1,1,1) clears it. */
#wls-root .wls-prose dd,
#wls-root .wls-article dd {
  margin: 0; text-align: right; color: var(--wls-ink);
  font-variant-numeric: tabular-nums;
}

/* THE TOTAL ROW IS TARGETED STRUCTURALLY, because dt.tot and dd.tot are gone.
   `:last-of-type` picks the final dt and the final dd whatever the row count,
   so this holds for a dl of any length.

   THE ASSUMPTION IT MAKES IS THAT THE LAST PAIR IS A TOTAL. On page 163 it is
   ("Better off by / $69,650"), and that is the only dl in prose on the site. A
   future dl that simply ends on an ordinary row would get a rule and a weight
   it should not have — at which point the fix is a class on that dl, not a
   cleverer selector. Recorded so the next person does not have to infer it. */
#wls-root .wls-prose dl > dt:last-of-type,
#wls-root .wls-prose dl > dd:last-of-type,
#wls-root .wls-article dl > dt:last-of-type,
#wls-root .wls-article dl > dd:last-of-type {
  border-top: 1px solid var(--wls-rule-soft); padding-top: 14px; font-weight: 600;
}
#wls-root .wls-prose dl > dd:last-of-type,
#wls-root .wls-article dl > dd:last-of-type { color: var(--wls-navy); }

@media (max-width: 430px) {
  #wls-root .wls-prose dl,
  #wls-root .wls-article dl { padding: 20px; gap: 10px 14px; font-size: 15.5px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   1.42.7 — Q-077, the tail prose on company profiles
   ═══════════════════════════════════════════════════════════════════════

   `<div class="wls-prose wls-tail">` carries the trailing post_content on a
   company profile, directly below the two-column numbered band. It read as a
   different font from the band above it — same family, three different rules:

     | | numbered band | tail |
     | paragraph      | .wls-num p     15.5px / 1.68 | .wls-prose p   16.5px / 1.72 |
     | first paragraph| same as rest                 | .wls-prose > p:first-of-type  19px / 1.66 |
     | measure        | ~600px from the grid         | .wls-prose  44em, ~680px |

   So three type sizes stacked down one column, in a block wider than
   everything above it. The client read it as two fonts on one page. It affects
   all 41 profiles that render post_content, not just the one reported.

   SCOPED TO .wls-tail, WHICH IS THE WHOLE POINT. `.wls-prose` is also every
   article, every location page and every standard page, where 16.5px, the 19px
   lede and the 44em measure are all correct and must not move.

   TWELFTH INSTANCE OF SPECIFICITY DECIDING A RULE HERE, so the weights are
   worked out rather than assumed:

     #wls-root .wls-prose p                     (1,1,1)
     #wls-root .wls-prose > p:first-of-type     (1,2,1)   <- the one to beat
     #wls-root .wls-prose.wls-tail > p          (1,2,1)   ties, would lose on
                                                          order for :first-of-type
     #wls-root .wls-prose.wls-tail > p:first-of-type  (1,3,1)  <- wins outright

   Both forms are written out for that reason: the plain one covers every
   paragraph, and the :first-of-type one exists solely to outrank the lede rule.
   Verified by reading the computed value, not by assuming the override landed.

   THE WIDTH IS NOT SET HERE ANY MORE — see the note on the rule below.

   HISTORY, because the reasoning still matters. Q-077 asked for 38em -> 34.5em
   ("518px, matching the band column"). Both were right at 1440 and wrong
   everywhere else: `.wls-wrap` is fluid below its 1180px cap, so the band
   column measured 518 / 518 / 478 / 440 / 382 at 1440 / 1180 / 1100 / 1024 /
   900 and a fixed 518px overshot by up to 136px — larger than the 52px it was
   fixing. It shipped as `calc((100% - var(--wls-two-gap)) / 2)`, deriving the
   column instead of naming it.

   Q-075 then made the band a SINGLE column, so there is no half-column left to
   derive and the calc was deleted rather than left computing a stale number.
   `.wls-numband` and `.wls-prose` both take `--wls-measure`, so the tail and
   the band are the same width by construction.

   One thing worth keeping from that round: `em` on max-width resolves against
   the element's OWN font-size — the 15px inherited from #wls-root, not the
   15.5px the paragraphs render at. Measured, not assumed.

   THE "IT WILL ALWAYS READ AS A DIFFERENT SHAPE" NOTE HERE IS WITHDRAWN. It
   was true while the band was two columns and the tail was a lone full-width
   block beneath them. Q-075 made the band one column at the same measure, so
   the tail is now the same width, the same left edge and the same type as the
   blocks above it — the difference that remained is that it carries no number,
   which is correct, because it is not one of the design's numbered blocks.
   ═══════════════════════════════════════════════════════════════════════ */
/* NO max-width RULE HERE ANY MORE, and the absence is the point. Q-077's calc
   derived one column of the two-column band; Q-075 made that band a single
   column at `--wls-measure`, so `.wls-prose`'s own `max-width: var(--wls-measure)`
   already produces exactly the width the tail needs. An override here would be
   the same number written twice, free to drift. The typography below stays --
   the tail still has to match the band's 15.5px, which .wls-prose does not. */

#wls-root .wls-prose.wls-tail > p,
#wls-root .wls-prose.wls-tail > p:first-of-type {
  font-size: 15.5px; line-height: 1.68; color: var(--wls-body);
  margin: 0 0 14px; text-wrap: pretty;
}
#wls-root .wls-prose.wls-tail > p:last-child { margin-bottom: 0; }

/* Lists carry the same 16.5px base as the paragraphs did and need the same
   correction; .wls-num has no list rule of its own, so these match the
   paragraph metrics rather than a band rule that does not exist. */
#wls-root .wls-prose.wls-tail ul,
#wls-root .wls-prose.wls-tail ol {
  font-size: 15.5px; line-height: 1.68; color: var(--wls-body); margin: 0 0 14px;
}

/* THE MOBILE HEADER BAR KEEPS ITS BARE NUMBER BELOW 430px, and this is a
   measured deviation from Q-079 rather than an oversight.

   Q-079 asked for "Call 1-888-994-6376" plus the handset on all six phone
   buttons. Five of them take it at every width. The sixth, the mobile bar,
   physically cannot: the logo is 163px and the bar shares one row with it and
   the hamburger.

   Measured overflow past the header wrap, deployed vs the full treatment:

     width   1.42.6 (bare number)   + icon and "Call"
     320       32px  (already over)      83px
     360        0px                      43px
     375        0px                      29px
     390        0px                      15px
     414        0px                       0px

   Hiding only the word still left 57 / 18 / 4px at 320 / 360 / 375, because
   the icon and its gap are 25px on their own. So both go below 430px, which
   leaves the bar exactly as it renders today and introduces no regression at
   360 and 375 — real, common handset widths.

   This is the same trade the brief itself made for the desktop header button,
   applied where the measurement said it was needed. From 431px up the mobile
   bar gets the full treatment like everything else.

   NOT FIXED HERE: 320px already overflowed by 32px before this round, with the
   bare number. That is a pre-existing defect in the header at the narrowest
   handset width and it needs its own decision — the logo, the gutter or the
   type has to give. Recorded rather than quietly absorbed into this change. */
@media (max-width: 430px) {
  #wls-root .wls-mobile-phone .wls-phone-call,
  #wls-root .wls-mobile-phone > svg { display: none; }
}