/* ---------- Local Pack pillar page: two-column hero with a floating
   avatar portrait ---------- */
.lp-hero{
  display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s6); align-items:center;
}
/* Opt out of the sitewide centered-hero rule (site.css .band--tight .wrap):
   this hero is a two-column split (copy left, figure right on desktop),
   where centered copy reads mismatched next to the image beside it. */
.band--tight .lp-hero{ text-align:left; }
.band--tight .lp-hero .eyebrow{ justify-content:flex-start; }
.band--tight .lp-hero .lede,
.band--tight .lp-hero > p{ margin-inline:0; }
@media (min-width:900px){
  .lp-hero{ grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:var(--s7); }
}
.lp-hero__body{ min-width:0; }
.lp-hero__title{ max-width:none; }
.lp-hero__lede{ max-width:56ch; }
.lp-hero__figure{
  position:relative; order:-1; margin-inline:auto; max-width:360px;
}
@media (min-width:900px){
  .lp-hero__figure{ order:2; max-width:none; }
}
.lp-hero__link{ display:block; }
/* Feathered edge, not a hard-edged card: the mask fades the image itself to
   transparent well inside its box, so a rectangular box-shadow would show a
   square shadow around a round fade, wrong shape. filter:drop-shadow follows
   the masked (post-alpha) silhouette instead, so the shadow reads as coming
   from the portrait itself. border-radius is redundant once masked - the
   visible content already ends short of the corners. */
.lp-hero__figure img{
  display:block; width:100%; height:auto;
  -webkit-mask-image:radial-gradient(ellipse 62% 62% at 50% 46%, #000 45%, transparent 100%);
  mask-image:radial-gradient(ellipse 62% 62% at 50% 46%, #000 45%, transparent 100%);
  filter:drop-shadow(0 26px 46px rgba(0,0,0,.5));
  transition:transform .35s cubic-bezier(0.22, 0.68, 0.24, 1);
}
.lp-hero__link:hover img,
.lp-hero__link:focus-visible img{ transform:scale(1.08); }
@media (prefers-reduced-motion: reduce){
  .lp-hero__figure img{ transition:none; }
}
/* A soft ambient glow behind the portrait - the "floating" read comes from
   the feathered edge + glow, not a card frame. */
.lp-hero__figure::before{
  content:""; position:absolute; inset:-10%; z-index:-1; border-radius:50%;
  background:radial-gradient(60% 60% at 50% 40%, color-mix(in srgb, var(--beacon-hi) 22%, transparent), transparent 70%);
  filter:blur(4px);
}

/* ---------- Weighted ranking-factor bars: the same numbers the .answer
   block states in prose, restated visually for scanners and for AI
   crawlers that weight structured, labelled data highly. ---------- */
.lp-weights{ display:flex; flex-direction:column; gap:1rem; margin:1.5rem 0 0; }
.lp-weights__row{ display:flex; flex-direction:column; gap:.35rem; }
.lp-weights__label{ display:flex; justify-content:space-between; align-items:baseline; gap:.5rem; font-size:.92rem; }
.lp-weights__label strong{ color:var(--ink); }
.lp-weights__pct{ font-family:var(--mono); font-size:.85rem; color:var(--ink-faint); flex:none; }
.lp-weights__track{ height:8px; border-radius:4px; background:var(--rule); overflow:hidden; }
.lp-weights__fill{ height:100%; border-radius:4px; background:var(--beacon); }

/* ---------- Interactive factor dial: hovering or focusing one of the four
   list items lights up the matching compass point, spoke and label on the
   visual beside it. Deliberately not a pie/donut - these four figures are
   independent survey estimates (they were already shown as separate bars
   above, not slices of one whole), so a "parts of 100%" chart shape would
   misrepresent them. A compass instead just links each item to a point,
   makes no proportional claim, and reads as one connected instrument
   rather than four disconnected numbers. CSS-only (:has), no inline
   script - content pages on this site don't carry custom JS, only React
   components do, and everything here degrades to a static, correctly
   labelled diagram if :has() isn't supported. ---------- */
.lp-factors{
  display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s6); align-items:center;
  margin-top:1.25rem;
}
@media (min-width:860px){
  .lp-factors{ grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:var(--s7); }
}
.lp-factors__list{ margin:0; }
.lp-factors__list li{ cursor:default; border-radius:4px; outline-offset:6px; }
.lp-factors__list li:focus-visible{ outline:2px solid var(--beacon-hi); }

.lp-factors__dial{
  position:relative; order:-1; margin-inline:auto; max-width:320px; width:100%;
}
@media (min-width:860px){ .lp-factors__dial{ order:2; max-width:340px; } }
.lp-factors__dial svg{ display:block; width:100%; height:auto; overflow:visible; }
.lp-factors__ring{ fill:none; stroke:var(--rule); stroke-width:1; stroke-dasharray:2 6; }
.lp-factors__hub{ fill:var(--chart-2); stroke:var(--rule-hard); stroke-width:1; }
.lp-factors__pin{ fill:var(--beacon); }
.lp-factors__pin-hole{ fill:var(--chart); }
.lp-factors__spoke{
  stroke:var(--rule-hard); stroke-width:1.5;
  opacity:.55; transition:opacity .25s ease, stroke .25s ease;
}
.lp-factors__node circle{
  fill:var(--chart-2); stroke:var(--rule-hard); stroke-width:1.5;
  transition:fill .25s ease, stroke .25s ease, r .25s ease;
}
.lp-factors__tag{
  position:absolute; display:flex; flex-direction:column; gap:.1rem;
  font-family:var(--ui); font-size:.72rem; line-height:1.2; text-align:center;
  color:var(--ink-faint); opacity:.75; transform:translate(-50%,-50%) scale(1);
  transition:opacity .25s ease, transform .25s ease, color .25s ease;
  pointer-events:none; white-space:nowrap;
}
.lp-factors__tag b{ font-family:var(--mono); font-size:.7rem; font-weight:600; color:var(--ink-soft); }
.lp-factors__tag--distance{ top:9%; left:50%; }
.lp-factors__tag--relevance{ top:50%; left:91%; text-align:left; }
.lp-factors__tag--prominence{ top:91%; left:50%; }
.lp-factors__tag--hours{ top:50%; left:9%; text-align:right; }

/* Active state: hovering/focusing an <li> sets --lp-active on every
   element sharing its data-factor (spoke, node, tag) via :has(). */
.lp-factors:has(.lp-factors__list li[data-factor="distance"]:is(:hover,:focus-visible)) [data-factor="distance"],
.lp-factors:has(.lp-factors__list li[data-factor="relevance"]:is(:hover,:focus-visible)) [data-factor="relevance"],
.lp-factors:has(.lp-factors__list li[data-factor="prominence"]:is(:hover,:focus-visible)) [data-factor="prominence"],
.lp-factors:has(.lp-factors__list li[data-factor="hours"]:is(:hover,:focus-visible)) [data-factor="hours"]{
  --lp-active:1;
}
.lp-factors__spoke{ opacity:calc(.55 + (var(--lp-active,0) * .45)); }
.lp-factors:has(.lp-factors__list li[data-factor="distance"]:is(:hover,:focus-visible)) .lp-factors__spoke[data-factor="distance"],
.lp-factors:has(.lp-factors__list li[data-factor="relevance"]:is(:hover,:focus-visible)) .lp-factors__spoke[data-factor="relevance"],
.lp-factors:has(.lp-factors__list li[data-factor="prominence"]:is(:hover,:focus-visible)) .lp-factors__spoke[data-factor="prominence"],
.lp-factors:has(.lp-factors__list li[data-factor="hours"]:is(:hover,:focus-visible)) .lp-factors__spoke[data-factor="hours"]{
  stroke:var(--beacon-hi);
}
.lp-factors:has(.lp-factors__list li[data-factor="distance"]:is(:hover,:focus-visible)) .lp-factors__node[data-factor="distance"] circle,
.lp-factors:has(.lp-factors__list li[data-factor="relevance"]:is(:hover,:focus-visible)) .lp-factors__node[data-factor="relevance"] circle,
.lp-factors:has(.lp-factors__list li[data-factor="prominence"]:is(:hover,:focus-visible)) .lp-factors__node[data-factor="prominence"] circle,
.lp-factors:has(.lp-factors__list li[data-factor="hours"]:is(:hover,:focus-visible)) .lp-factors__node[data-factor="hours"] circle{
  fill:var(--beacon-hi); stroke:var(--beacon-hi); r:17;
}
.lp-factors:has(.lp-factors__list li[data-factor="distance"]:is(:hover,:focus-visible)) .lp-factors__tag--distance,
.lp-factors:has(.lp-factors__list li[data-factor="relevance"]:is(:hover,:focus-visible)) .lp-factors__tag--relevance,
.lp-factors:has(.lp-factors__list li[data-factor="prominence"]:is(:hover,:focus-visible)) .lp-factors__tag--prominence,
.lp-factors:has(.lp-factors__list li[data-factor="hours"]:is(:hover,:focus-visible)) .lp-factors__tag--hours{
  opacity:1; color:var(--ink); transform:translate(-50%,-50%) scale(1.1);
}
/* Highlight the matching list item too, so the link reads both ways. */
.lp-factors__list li[data-factor]:is(:hover,:focus-visible){ color:var(--ink); }
.lp-factors__list li[data-factor]:is(:hover,:focus-visible) strong{ color:var(--beacon-focus); }

@media (prefers-reduced-motion: reduce){
  .lp-factors__spoke, .lp-factors__node circle, .lp-factors__tag{ transition:none; }
}

/* ---------- Invisibility-trap section: text + a feathered geo-grid photo.
   Same feathering technique as the hero avatar (mask-image, drop-shadow
   instead of box-shadow so the shadow follows the faded silhouette), tuned
   softer/wider here since this is a landscape photo, not a portrait, and
   reads as "premium" rather than "portrait cutout" at this aspect ratio. */
.lp-trap{
  display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s6); align-items:center;
}
@media (min-width:900px){
  .lp-trap{ grid-template-columns:minmax(0,1fr) minmax(0,.9fr); gap:var(--s7); }
}
.lp-trap__figure{ position:relative; margin:0; }
.lp-trap__figure img{
  display:block; width:100%; height:auto;
  -webkit-mask-image:radial-gradient(ellipse 92% 88% at 50% 50%, #000 58%, transparent 100%);
  mask-image:radial-gradient(ellipse 92% 88% at 50% 50%, #000 58%, transparent 100%);
  filter:drop-shadow(0 30px 54px rgba(16,22,28,.28));
}

/* ---------- Floating Map Check-Ins flow graphic, no card/frame ----------
   Two prior attempts (mix-blend-mode:screen, then a mask-image feather)
   were both papering over the real bug: the asset was flattened to JPG
   at processing time, which has no alpha channel, silently baking its
   background in as solid near-black. The source PNG actually carries
   real alpha transparency around the graphic already (verified on the
   raw pixel data - corner alpha ~0.008, i.e. transparent). Re-exported
   straight from that PNG to WebP, which supports alpha, so the
   background is genuinely gone, not faded or blended to look gone. No
   mask needed any more - masking would now just crop into real content
   (the card corners, the REAL JOBS/LOCATIONS/PROOF strip) for no
   reason. The JPG fallback (alpha-less browsers only) flattens onto a
   near-black matching this band, since JPG has no transparency to give
   it. Sits directly in the band, not inside .wrap, so it can run wider
   than the 1120px text column. */
.lp-flow{
  margin:var(--s6) auto; max-width:900px; width:92%;
}
.lp-flow img{
  display:block; width:100%; height:auto;
  filter:drop-shadow(0 20px 50px rgba(0,0,0,.5));
}

/* ---- plain-language "where the pack sits" visual + short-version folds ---- */
.lp-serpmap{ margin:1.5rem 0 0; width:100%; max-width:420px; }
.lp-serpmap__svg{ display:block; width:100%; height:auto; aspect-ratio:360 / 320; border-radius:12px; border:1px solid var(--rule); background:var(--chart,#f4f5f0); }
.lp-serpmap figcaption{ font-size:.85rem; color:var(--ink-soft); margin-top:.55rem; }
#plain-terms .lede{ max-width:60ch; }
#plain-terms .faq{ margin-top:1.25rem; }