/*
 * License page: Why section = spec Block 2 "Trust signals + benefits". Markup: template-parts/license/why.php.
 * Figma: desktop 2:112 (1360 wide: head 2:113, gap 50, row 2:117 = image card 2:118 621 x 596 + accordion 2:124 676.2),
 * mobile 259:10951 (376 wide, blocks 37 apart).
 * Figma fix round 2 (2026-10-15): eyebrow, e-mail / social row, site seal and Quick Stats have no Figma node and are no
 * longer rendered (styles removed); site seal and Quick Stats (key figures 2x2) are back since 2026-10-20. The intro lead is copywriter text without a node: drawn with the 2:137 / 259:10971
 * body-text tokens of this section.
 * Motion contract: scroll reveals are done by motion.js on [data-lpl-reveal] (opacity/translate/scale only);
 * everything here that moves uses transform / colours / grid-template-rows.
 */

.lpl-sec--why {
  --lpl-why-font: var(--lpl-font, 'Inter', sans-serif);
  --why-purple: var(--lpl-purple-tag, #640ea1);
  --why-navy: var(--lpl-navy, #0d0c41);
  --why-text: #838181;           /* 2:137 */
  --why-line: #e1e2ee;           /* 2:133 */
  font-family: var(--lpl-why-font);
}

.lpl-sec--why *,
.lpl-sec--why *::before,
.lpl-sec--why *::after {
  box-sizing: border-box;
}

/* neutralise old style.css globals (h2/h3 margin+colour, p margin, img margin, ul) */
.lpl-sec--why h2,
.lpl-sec--why h3,
.lpl-sec--why p,
.lpl-sec--why ul,
.lpl-sec--why li,
.lpl-sec--why figure,
.lpl-sec--why figcaption {
  margin: 0;
  padding: 0;
}
.lpl-sec--why ul,
.lpl-sec--why li { list-style: none; }
.lpl-sec--why li::before { content: none; }
.lpl-sec--why img { margin: 0; max-width: none; height: auto; }
.lpl-sec--why svg { max-width: none; }

.lpl-sec--why .lpl-why {
  display: flex;
  flex-direction: column;
  gap: 37px;                     /* 259:10951 */
}

/* ---- heading 2:113 / 259:10947: left-aligned (overrides the global "heads centred" rule of base.css) --------- */
.lpl-page .lpl-sec.lpl-sec--why .lpl-why__head {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 24px !important;
  text-align: left !important;
}
.lpl-page .lpl-sec.lpl-sec--why .lpl-why__head-main {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 12px;                     /* 2:113 */
  text-align: left !important;
}
.lpl-page .lpl-sec.lpl-sec--why .lpl-why__head h2,
.lpl-page .lpl-sec.lpl-sec--why .lpl-why__head [class*="__lead"] {
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-align: left !important;
}

.lpl-sec--why .lpl-why__tag {
  align-self: flex-start;
  padding: 12px 16px;            /* 2:114 */
  font-family: var(--lpl-why-font);
}

.lpl-sec--why .lpl-why__title {
  max-width: 297px;              /* 259:10950 */
  color: var(--why-navy);
  font-family: var(--lpl-why-font);
  font-weight: 600;
  font-size: 22px;
  line-height: 29px;
  letter-spacing: -0.22px;
}

/* intro under the H2 (crb_lic_why_lead = copywriter text, no Figma node): the section's body-text tokens
   259:10971 (Inter 400 12 / 21, #838181) / 2:137 (18 / 26); gap 12 = 2:113; width = the 2:113 head frame (fill) */
.lpl-sec--why .lpl-why__lead {
  max-width: none;
  color: var(--why-text);
  font-family: var(--lpl-why-font);
  font-weight: 400;
  font-size: 12px;
  line-height: 21px;
  letter-spacing: 0;
}

/* ---- body ------------------------------------------------------------------------------------------------- */
.lpl-sec--why .lpl-why__body {
  display: flex;
  flex-direction: column;
  gap: 37px;                     /* 259:10951 */
}
.lpl-sec--why .lpl-why__side {
  display: flex;
  flex-direction: column;
  gap: 16px;                     /* derived (only the card is in it now) */
  min-width: 0;
}

/* ---- expert image card 2:118 / 259:10952 -------------------------------------------------------------------- */
.lpl-sec--why .lpl-expert {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 621 / 596;
  border: 1px solid #000;
  border-radius: 29px;           /* 259:10952 */
  background: linear-gradient(180deg, #330a6e 0%, #8315a5 100%);
}
/* image 259:10953: 362 x 340 at 6 / 20 of the 376 card (positions are from the outer edge, the 1px border is inside) */
.lpl-sec--why .lpl-expert__pic,
.lpl-sec--why .lpl-expert > .lpl-expert__img {
  position: absolute;
  /* % of the padding box (card minus the 1px border): (100% + 2px) = the outer Figma size */
  top: calc(20 / 361 * (100% + 2px) - 1px);
  left: calc(6 / 376 * (100% + 2px) - 1px);
  width: calc(362 / 376 * (100% + 2px));
  height: calc(340 / 361 * (100% + 2px));
  overflow: hidden;
  border-radius: 37px;
}
.lpl-sec--why .lpl-expert__pic { display: block; }
.lpl-sec--why .lpl-expert__img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 37px;
  object-fit: cover;
  object-position: 50% 100%;     /* Figma 2:119 cut-out: object-bottom */
  transition: transform var(--lpl-dur-slow, 0.8s) var(--lpl-ease, ease);
}
@media (hover: hover) {
  .lpl-sec--why .lpl-expert:hover .lpl-expert__img { transform: scale(1.03); }
}

/* glass bar 259:10954: name pill + role */
.lpl-sec--why .lpl-expert__bar {
  position: absolute;
  left: calc(14 / 376 * (100% + 2px) - 1px);
  right: calc(15 / 376 * (100% + 2px) - 1px);
  top: calc(299 / 361 * (100% + 2px) - 1px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.13);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.lpl-sec--why .lpl-expert__name {
  flex: none;
  padding: 5px 12px;             /* 259:10955 */
  border-radius: 999px;
  background: #fff;
  color: #080d0d;
  font-family: var(--lpl-why-font);
  font-weight: 600;
  font-size: 10px;
  line-height: 22px;
  letter-spacing: 0;
  white-space: nowrap;
}
.lpl-sec--why .lpl-expert__role {
  min-width: 0;
  color: #030303;                /* 259:10957 */
  font-weight: 600;
  font-size: 10px;
  line-height: 22px;
  text-align: right;
}

/* ---- TZ badge under the photo (crb_lic_why_seal_*; no Figma node, restored 2026-10-20 from the 2026-10-14 version) ---- */
.lpl-sec--why .lpl-why__seal {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px 12px 14px;
  border: 1px solid var(--why-line);
  border-radius: 20px;
  background: linear-gradient(180deg, #fff 0%, #faf5fe 100%);
  color: var(--why-navy);
  text-decoration: none;
  transition: transform var(--lpl-dur, 0.45s) var(--lpl-ease, ease), box-shadow var(--lpl-dur, 0.45s) var(--lpl-ease, ease), border-color var(--lpl-dur-fast, 0.2s) var(--lpl-ease, ease);
}
a.lpl-why__seal:hover,
a.lpl-why__seal:focus-visible {
  transform: translateY(-2px);
  border-color: #c79fe6;
  box-shadow: 0 14px 28px -16px rgba(100, 14, 161, 0.5);
}
.lpl-sec--why .lpl-why__seal-art {
  flex: none;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(180deg, #330a6e 0%, #8315a5 100%);   /* the expert card gradient */
  color: #fff;
}
.lpl-sec--why .lpl-why__seal-art img { width: 40px; height: 40px; object-fit: contain; }
.lpl-sec--why .lpl-why__seal-art svg { width: 36px; height: 36px; transition: transform 0.9s var(--lpl-ease, ease); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .lpl-sec--why .lpl-why__seal:hover .lpl-why__seal-art svg { transform: rotate(18deg); }
}
.lpl-sec--why .lpl-why__seal-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
}
.lpl-sec--why .lpl-why__seal-text strong { font-weight: 600; }
.lpl-sec--why .lpl-why__seal-text small {
  color: var(--why-text);
  font-weight: 400;
  font-size: 12.5px;
  line-height: 18px;
}
@media (min-width: 768px) {
  .lpl-sec--why .lpl-why__seal-text { font-size: 16px; line-height: 22px; }
  .lpl-sec--why .lpl-why__seal-text small { font-size: 14px; line-height: 20px; }
}

/* ---- key figures 2x2 (crb_lic_why_stats; no Figma node, restored 2026-10-20) --------------------------------------
   Between the head and the body row, full container width, always 2 columns (spec: "mini 2x2"). From 1024 the two
   columns follow the body row (photo 621 / list 676.2 of 1360, gap 24) so each card sits over its column.
   Card = the badge style above (border #e1e2ee, radius 20, white -> #faf5fe); icon tile = the badge tile gradient. */
.lpl-sec--why .lpl-why__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.lpl-sec--why .lpl-why__stats--odd .lpl-why__stat:last-child { grid-column: 1 / -1; }
.lpl-sec--why .lpl-why__stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--why-line);
  border-radius: 20px;
  background: linear-gradient(180deg, #fff 0%, #faf5fe 100%);
  transition: transform var(--lpl-dur, 0.45s) var(--lpl-ease, ease), box-shadow var(--lpl-dur, 0.45s) var(--lpl-ease, ease), border-color var(--lpl-dur-fast, 0.2s) var(--lpl-ease, ease);
}
@media (hover: hover) {
  .lpl-sec--why .lpl-why__stat:hover {
    transform: translateY(-2px);
    border-color: #c79fe6;
    box-shadow: 0 14px 28px -16px rgba(100, 14, 161, 0.5);
  }
}
.lpl-sec--why .lpl-why__stat-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: linear-gradient(180deg, #330a6e 0%, #8315a5 100%);   /* the expert card / badge tile gradient */
  color: #fff;
}
.lpl-sec--why .lpl-why__stat-ico svg { width: 20px; height: 20px; }
.lpl-sec--why .lpl-why__stat-ico img { width: 22px; height: 22px; object-fit: contain; }
.lpl-sec--why .lpl-why__stat-txt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.lpl-sec--why .lpl-why__stat-val {
  color: var(--why-navy);
  font-family: var(--lpl-why-font);
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -0.2px;
  overflow-wrap: anywhere;
}
.lpl-sec--why .lpl-why__stat-lab {
  color: var(--why-text);
  font-family: var(--lpl-why-font);
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  overflow-wrap: anywhere;
}
@media (min-width: 768px) {
  .lpl-sec--why .lpl-why__stats { gap: 16px 24px; }
  .lpl-sec--why .lpl-why__stat {
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding: 16px 20px 16px 16px;
  }
  .lpl-sec--why .lpl-why__stat-ico { width: 52px; height: 52px; border-radius: 14px; }
  .lpl-sec--why .lpl-why__stat-ico svg { width: 26px; height: 26px; }
  .lpl-sec--why .lpl-why__stat-ico img { width: 32px; height: 32px; }
  .lpl-sec--why .lpl-why__stat-val { font-size: 24px; line-height: 30px; letter-spacing: -0.4px; }
  .lpl-sec--why .lpl-why__stat-lab { font-size: 14px; line-height: 20px; }
}
@media (min-width: 1024px) {
  .lpl-sec--why .lpl-why__stats { grid-template-columns: calc(621 / 1360 * 100%) calc(676.2 / 1360 * 100%); justify-content: space-between; gap: 16px 0; }
  .lpl-sec--why .lpl-why__stat-val { font-size: 28px; line-height: 34px; letter-spacing: -0.6px; }
}

/* ---- accordion 2:124 / 259:10958 -------------------------------------------------------------------------- */
.lpl-sec--why .lpl-why__list {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.lpl-sec--why .lpl-why__items {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.lpl-sec--why .lpl-why__item + .lpl-why__item {
  padding-top: 14px;             /* row - 14 - line - 14 - row */
  border-top: 1px solid var(--why-line);
}

.lpl-sec--why .lpl-why__q {
  margin: 0;
  padding: 0;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: 0;
  color: inherit;
}
.lpl-sec--why .lpl-why__toggle {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: inherit;
  font: inherit;
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.lpl-sec--why .lpl-why__item.is-static .lpl-why__toggle { cursor: default; }
.lpl-sec--why .lpl-why__toggle:focus-visible {
  outline: 2px solid var(--why-purple);
  outline-offset: 2px;
  border-radius: 10px;
}

.lpl-sec--why .lpl-why__q-text {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 320px;              /* 2026-10-20 (client): one width open and closed, = the open box 259:10970, so a
                                    title never re-wraps when its row opens (was 305 closed / 320 open) */
  color: #000;
  font-family: var(--lpl-why-font);
  font-weight: 600;
  font-size: 16px;
  line-height: 34px;
  overflow-wrap: anywhere;
  transition: color var(--lpl-dur-fast, 0.2s) var(--lpl-ease, ease);
}
/* closed row: a one-line title sits centred on the icon (2:146 at y 10 of the 54 row, 259:10980 at y 3 of 40);
   a two-line title starts at the top like 2:128 */
.lpl-sec--why .lpl-why__item:not(.is-open) .lpl-why__q-text {
  display: flex;
  align-items: center;
  min-height: 40px;              /* 259:10964 icon */
}
@media (min-width: 768px) {
  .lpl-sec--why .lpl-why__item:not(.is-open) .lpl-why__q-text { min-height: 54px; }   /* 2:130 icon */
}
.lpl-sec--why .lpl-why__item.is-open .lpl-why__q-text {   /* 259:10970 / 2:136 */
  color: #130030;
  line-height: 40px;
}
@media (hover: hover) {
  .lpl-sec--why .lpl-why__item:not(.is-static) .lpl-why__toggle:hover .lpl-why__q-text { color: var(--why-purple); }
}

.lpl-sec--why .lpl-why__icon {                /* 259:10964: 40 yellow circle, chevron 20 turned down */
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 100px;
  background: var(--lpl-yellow, #f5b319);
  transition: transform var(--lpl-dur-fast, 0.2s) var(--lpl-ease, ease), box-shadow var(--lpl-dur, 0.45s) var(--lpl-ease, ease);
}
.lpl-sec--why .lpl-why__icon img {
  grid-area: 1 / 1;
  display: block;
  transition: opacity var(--lpl-dur-fast, 0.2s) var(--lpl-ease, ease), transform var(--lpl-dur, 0.45s) var(--lpl-ease, ease);
}
.lpl-sec--why .lpl-why__icon-open { width: 20px; height: 20px; transform: rotate(90deg); }
.lpl-sec--why .lpl-why__icon-close { width: 14.8429px; height: 14.8751px; opacity: 0; transform: rotate(-90deg); }   /* 2:140 */
.lpl-sec--why .lpl-why__item.is-open .lpl-why__icon-open { opacity: 0; transform: rotate(180deg); }
.lpl-sec--why .lpl-why__item.is-open .lpl-why__icon-close { opacity: 1; transform: none; }
@media (hover: hover) {
  .lpl-sec--why .lpl-why__toggle:hover .lpl-why__icon { box-shadow: 0 8px 18px -8px rgba(245, 179, 25, 0.8); transform: scale(1.06); }
}

/* panel: 0fr -> 1fr grid collapse, content stays in the DOM */
.lpl-sec--why .lpl-why__panel {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows var(--lpl-dur, 0.45s) var(--lpl-ease, ease), visibility 0s linear var(--lpl-dur, 0.45s);
}
.lpl-sec--why .lpl-why__item.is-open .lpl-why__panel {
  grid-template-rows: 1fr;
  visibility: visible;
  transition-delay: 0s, 0s;
}
.lpl-sec--why .lpl-why__panel-clip {
  min-height: 0;
  overflow: hidden;
}
.lpl-sec--why .lpl-why__a {                   /* 259:10971: 12 / 21, #838181, 320 wide, 14 under the title */
  max-width: 320px;
  padding-top: 14px;
  color: var(--why-text);
  font-family: var(--lpl-why-font);
  font-weight: 400;
  font-size: 12px;
  line-height: 21px;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity var(--lpl-dur-fast, 0.2s) var(--lpl-ease, ease), transform var(--lpl-dur, 0.45s) var(--lpl-ease, ease);
}
.lpl-sec--why .lpl-why__item.is-open .lpl-why__a {
  opacity: 1;
  transform: none;
  transition-delay: 0.08s;
}
.lpl-sec--why .lpl-why__a p { margin: 0; color: inherit; font-size: inherit; line-height: inherit; }
.lpl-sec--why .lpl-why__a p + p { margin-top: 12px; }

/* without JS everything is readable */
html:not(.lpl-js) .lpl-sec--why .lpl-why__panel { grid-template-rows: 1fr; visibility: visible; }
html:not(.lpl-js) .lpl-sec--why .lpl-why__a { opacity: 1; transform: none; }

/* CTA 259:10993: full width on mobile, 37 under the accordion */
.lpl-sec--why .lpl-why__cta {
  gap: 6px;
  width: 100%;
  margin-top: 37px;
  white-space: normal;           /* a long admin caption wraps instead of overflowing */
  text-align: center;
  font-family: var(--lpl-why-font);
  font-size: 14px;
}
.lpl-sec--why .lpl-why__cta .lpl-btn__icon { transition: transform var(--lpl-dur-fast, 0.2s) var(--lpl-ease, ease); }
.lpl-sec--why .lpl-why__cta:hover .lpl-btn__icon { transform: translateX(3px); }

/* ---- >= 768 (derived: no tablet frame): stacked, desktop type -------------------------------------------- */
@media (min-width: 768px) {
  .lpl-sec--why { padding: 100px 0; }

  .lpl-sec--why .lpl-why { gap: 50px; }      /* 2:112 */

  .lpl-sec--why .lpl-why__title {
    max-width: none;
    font-size: 40px;
    line-height: 1.1;
    letter-spacing: -1.2px;
  }
  .lpl-sec--why .lpl-why__lead { font-size: 18px; line-height: 26px; }

  .lpl-sec--why .lpl-expert { max-width: 621px; }

  .lpl-sec--why .lpl-why__q-text { max-width: 574px; font-size: 24px; }   /* open and closed alike (2:136 width) */
  .lpl-sec--why .lpl-why__a { max-width: 574px; font-size: 18px; line-height: 26px; }
  .lpl-sec--why .lpl-why__icon { width: 54px; height: 54px; }

  .lpl-sec--why .lpl-why__cta { width: auto; align-self: flex-start; margin-top: 14px; font-size: 16px; }
}

/* ---- desktop frame 2:112 (>= 1024) ---------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .lpl-sec--why .lpl-why__title {
    font-size: var(--lpl-h2-size, 60px);
    line-height: normal;
    letter-spacing: var(--lpl-h2-tracking, -1.8px);
  }

  .lpl-sec--why .lpl-why__body {             /* 2:117: card 621 + accordion 676.2, space-between */
    flex-direction: row;
    align-items: stretch;                    /* customer fix 2026-10-16, see "right column" below */
    justify-content: space-between;
    gap: 24px;
  }
  .lpl-sec--why .lpl-why__body--solo { justify-content: flex-start; }
  .lpl-sec--why .lpl-why__side { flex: 0 0 calc(621 / 1360 * 100%); justify-content: flex-start; }
  .lpl-sec--why .lpl-why__list { flex: 0 0 calc(676.2 / 1360 * 100%); }

  /* Right column (customer feedback 2026-10-16 "vertical alignment of the elements right of her photo"):
     Figma centres the accordion on the card, but Figma draws a row open; with every row closed (customer rule) the
     centred list floated with ~95px of empty space above and below and grew both ways when a row opened.
     Now the column is exactly as tall as the photo: the first row starts at the photo's top edge, the CTA sits on its
     bottom edge, and the free height is shared equally by the rows (each row centred in its slot, the 14px row
     padding / divider of 2:124 stay the minimum). Opening a row takes its height from that shared space, so the CTA
     and the photo do not move; only when the open row needs more than the photo height (~1280 wide) does the column
     grow downwards, the photo staying put at the top. */
  .lpl-sec--why .lpl-why__list { justify-content: flex-start; }
  .lpl-sec--why .lpl-why__items { flex: 1 1 auto; gap: 0; }
  .lpl-sec--why .lpl-why__item {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 14px 0;
  }
  .lpl-sec--why .lpl-why__item:first-child { padding-top: 0; }
  .lpl-sec--why .lpl-why__item:last-child { padding-bottom: 0; }
  .lpl-sec--why .lpl-why__item > * { flex: none; }
  .lpl-sec--why .lpl-why__cta { flex: none; }
  .lpl-sec--why .lpl-why__body--solo .lpl-why__list { justify-content: center; }
  .lpl-sec--why .lpl-why__body--solo .lpl-why__cta { margin-top: 0; }

  .lpl-sec--why .lpl-expert { max-width: none; border-radius: 40px; }
  /* image 2:119: 617 x 580 at 2 / 15 */
  .lpl-sec--why .lpl-expert__pic,
  .lpl-sec--why .lpl-expert > .lpl-expert__img {
    top: calc(15 / 596 * (100% + 2px) - 1px);
    left: calc(2 / 621 * (100% + 2px) - 1px);
    width: calc(617 / 621 * (100% + 2px));
    height: calc(580 / 596 * (100% + 2px));
  }
  /* bar 2:120: 580 wide at 19 / 529.31 */
  .lpl-sec--why .lpl-expert__bar {
    left: calc(19 / 621 * (100% + 2px) - 1px);
    right: calc(22 / 621 * (100% + 2px) - 1px);
    top: calc(529.31 / 596 * (100% + 2px) - 1px);
  }
  .lpl-sec--why .lpl-expert__name { font-size: 14px; }   /* 2:122 */
  .lpl-sec--why .lpl-expert__role { color: #fff; font-size: 14px; }   /* 2:123 */
}

/* mobile section padding (259:10951 sits 70 below the hero) */
@media (max-width: 767px) {
  .lpl-sec--why { padding: 70px 0; }
}

/* Default portrait (2026-10-20): the customer's photo of Katerina with the background removed, drawn in the Figma
   cut-out box 2:119 / 259:10953 above on the purple card gradient (like the Figma design). The full-bleed rectangular
   photo mode (.lpl-expert--photo, 2026-10-16) is gone; see why.css.pre-seal-cutout-20261020. */

/* Suitability Score widget under the photo + list row (Curacao, Tobique - owner 2026-10-21). Markup and the
   white / purple look come from hero.php + hero.css (.lpl-why__score .lpl-score); here only the placement and
   a thin border, since the card now sits on the white section instead of the purple hero. */
.lpl-sec--why .lpl-why__score { min-width: 0; }         /* spacing = the .lpl-why column gap (37 / 50) */
.lpl-sec--why .lpl-why__score .lpl-score {
  width: 100%;                                    /* full container width (owner 2026-10-21) */
  margin: 0;
  border: 1px solid rgba(100, 14, 161, 0.28);    /* soft purple outline: faint line + blurred glow (owner 2026-10-21) */
  box-shadow: 0 0 0 1px rgba(100, 14, 161, 0.08), 0 0 22px 2px rgba(100, 14, 161, 0.28);
}
/* the section resets p / ul margins + paddings (top of this file): give the widget back its own spacing */
.lpl-sec--why .lpl-why__score .lpl-score__sub {  /* the section p reset also removed the pill padding -> text touched the edges */
  margin-left: auto;
  padding: 2px 12px;
  white-space: nowrap;
}
.lpl-sec--why .lpl-why__score .lpl-score__facts { margin-top: 18px; padding-top: 18px; }