/*
 * License page hero - master template (spec block 1). Markup: template-parts/license/hero.php.
 * Figma: desktop 2:4 (1920 x 978, text group 2:5, card band 2:83), mobile 258:4 / 259:11454 (390 x 648, cards 259:112).
 * Breakpoints: >= 1024 = desktop frame; < 768 = mobile frame; 768-1023 = derived (mobile text, scaled desktop band).
 *
 * Card band: every size is written in "design px" (--u) so the band keeps the Figma proportions in any container:
 * desktop --u = container / 1360 (= 1px at 1920), mobile --u = container / 376 (= 1px at 390).
 * Values written as calc(N * var(--u)) are Figma values; anything marked "derived" has no Figma node.
 *
 * Motion: a quick load entrance (<= 600 ms, keyframes below; H1 only translates so it stays the LCP element).
 * Without JS / with reduced motion everything is simply in its final state. Stat values are static (as in Figma).
 *
 * Round 2 (2026-10-15): trust badge, alert plate box, "Compliant with" line and the Suitability Score widget have no
 * Figma node and were taken off the page. The alert text is a plain 2:12 lead paragraph.
 * 2026-10-20 (owner): trust badge, "Compliant with" line and the Suitability Score / Overview widget are back (TZ
 * elements). No Figma node exists for them, so every value in the "TZ" blocks below is derived from the hero's own
 * Figma tokens: Inter, glass rgba(255,255,255,0.1) (2:92 / 2:97), radius 20 (2:100), white text, yellow #f5b319 (2:14).
 * Class names are the 2026-10-14 ones (backups/hero.css.pre-alert-center-20261015). Previous version of this file:
 * hero.css.pre-tz-restore-20261020.
 * TZ round 2 (2026-10-20, previous version: hero.css.pre-tz-hero2-20261020): alert plate back (.lpl-hero__alert),
 * "Compliant with" smaller and under the buttons (the split layout was removed on 2026-10-21).
 * All derived from the same hero tokens - none of them has a Figma node.
 */

.lpl-sec--hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 130px 0 39px;                          /* 258:5 top 130; cards end 609 of 648 */
  background: #2a0d4d;
  color: #fff;
}

/* ---- background: purple glows + hairline square grid + rings (pure CSS, no images) ------------------------- */
/* 2026-10-20 (client): back to the grid-with-gradients background of the first master template (2026-10-13),
   in the lighter purple of the vector Figma redraw it replaced (hero-vector-bg*.svg, kept on disk).
   Previous version: hero.css.pre-grid-bg-20261020. */
.lpl-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(70% 55% at 50% 118%, rgba(214, 130, 255, 0.55), transparent 70%),
    radial-gradient(46% 46% at 94% 6%, rgba(150, 70, 232, 0.45), transparent 70%),
    radial-gradient(40% 50% at 4% 40%, rgba(124, 52, 205, 0.5), transparent 72%),
    linear-gradient(180deg, #2a0358 0%, #44086c 55%, #5e1a86 100%);
}
.lpl-hero__bg::before,
.lpl-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
}
.lpl-hero__bg::before {                          /* square grid, faded towards the edges */
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 75% 75% at 50% 30%, #000 8%, transparent 78%);
  mask-image: radial-gradient(ellipse 75% 75% at 50% 30%, #000 8%, transparent 78%);
}
.lpl-hero__bg::after {                           /* concentric rings rising from the bottom centre */
  background: repeating-radial-gradient(circle at 50% 140%, transparent 0 190px, rgba(255, 255, 255, 0.1) 190px 191px, transparent 191px 320px);
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 70%);
  mask-image: linear-gradient(to top, #000 0%, transparent 70%);
}

.lpl-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lpl-hero__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;                                      /* 259:10945 / 2:5 */
  width: 100%;
  min-width: 0;
  text-align: center;
  transition: opacity 0.2s ease;
}
/* 244:3: the text block is dimmed while the nav dropdown is open */
.lpl-sub-open .lpl-hero__text { opacity: 0.7; }

/* ---- breadcrumb pill (258:6 mobile / 2:6 desktop) --------------------------------------------------------- */
.lpl-hero__crumbs {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  margin-bottom: 4px;                             /* 258:5 gap 24 between the pill and the text group (20 + 4) */
  padding: 6px 8px;
  border-radius: var(--lpl-r-pill);
  background: var(--lpl-glass);
}
.lpl-hero__crumb-list {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  height: 27px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lpl-hero__crumb {
  min-width: 0;
  font-weight: 500;
  font-size: 10px;                                /* 258:10 */
  line-height: 22px;
  color: #fff;
  white-space: nowrap;
}
.lpl-hero__crumb:not(:first-child)::before {
  content: "/";
  margin-right: 4px;
  opacity: 0.6;
}
.lpl-hero__crumb:nth-child(2)::before { content: none; }   /* design: pill + text, no separator */
.lpl-hero__crumb:not(:last-child) { flex: none; }
.lpl-hero__crumb:last-child { overflow: hidden; text-overflow: ellipsis; }
.lpl-hero__crumb a,
.lpl-hero__crumb span { color: inherit; }
.lpl-hero__crumb--home { flex: none; }
.lpl-hero__crumb--home > a,
.lpl-hero__crumb--home > span {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1px 8px;                               /* 258:8 */
  border-radius: var(--lpl-r-pill);
  background: #fff;
  color: var(--lpl-ink);
  font-weight: 600;
}
.lpl-hero__crumb:not(.lpl-hero__crumb--home) a:hover { text-decoration: underline; }

/* ---- TZ: trust badge (crb_lic_hero_trust_*), glass pill between the breadcrumb and the H1 ----------------- */
.lpl-hero__trust {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  margin: 0;
  padding: 6px 14px 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--lpl-r-pill);
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(12.5px);
  backdrop-filter: blur(12.5px);
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  color: #fff;
  text-align: left;
}
.lpl-hero__trust-ico { flex: none; width: 18px; height: 18px; color: var(--lpl-yellow); }
.lpl-hero__trust-img { flex: none; display: block; width: auto; height: 20px; max-width: 48px; object-fit: contain; }
a.lpl-hero__trust { color: #fff; transition: background-color 0.2s ease, border-color 0.2s ease, transform var(--lpl-dur-fast) var(--lpl-ease); }
a.lpl-hero__trust:hover { background: rgba(245, 179, 25, 0.14); border-color: rgba(245, 179, 25, 0.6); transform: translateY(-1px); }

/* ---- title / lead / buttons (258:11-258:19) -------------------------------------------------------------- */
.lpl-hero__title {
  margin: 0;
  width: 100%;
  font-weight: 600;
  font-size: 28px;
  line-height: 33px;
  letter-spacing: -1px;
  text-wrap: balance;
  color: #fff;
}
.lpl-hero__lead {
  margin: 0;
  width: 100%;
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  color: #dbdbdb;
}
.lpl-hero__lead + .lpl-hero__lead { margin-top: -8px; }   /* several intro paragraphs: derived spacing */

/* ---- TZ round 2: alert plate (crb_lic_hero_alert_*, Curacao "LOK Reform Alert"), under the H1, above the lead ----
   Thin glass plate, icon left, bold yellow label + text. Derived from the hero tokens (no Figma node); radius 20 like
   the cards because the copywriter text runs over several lines (a pill would not hold it). */
.lpl-hero__alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  max-width: 940px;                               /* = the lead width 2:12 */
  margin: 0;
  padding: 12px 16px 12px 12px;
  border: 1px solid rgba(245, 179, 25, 0.42);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(12.5px);
  backdrop-filter: blur(12.5px);
  color: #fff;
  text-align: left;
}
.lpl-hero__alert.is-plain { padding-left: 16px; }
.lpl-hero__alert-ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(245, 179, 25, 0.16);
  color: var(--lpl-yellow);
}
.lpl-hero__alert-svg { display: block; width: 18px; height: 18px; }
.lpl-hero__alert-img { display: block; width: auto; height: 20px; max-width: 24px; object-fit: contain; }
.lpl-hero__alert-body {
  min-width: 0;
  margin: 0;
  font-weight: 400;
  font-size: 13px;
  line-height: 20px;
  color: #dbdbdb;
}
.lpl-hero__alert-label {
  display: block;
  margin-bottom: 2px;
  font-weight: 700;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lpl-yellow);
}
.lpl-hero__alert-ico + .lpl-hero__alert-body { padding-top: 1px; }
.lpl-hero__alert-text { display: block; }
.lpl-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 7px;                                       /* 258:13 */
}
.lpl-hero__btn {
  gap: 6px;                                       /* 258:14 */
  max-width: 100%;                /* a long admin label wraps inside the button instead of running off the screen */
  white-space: normal;
  text-align: center;
  font-size: 14px;
  transition: transform var(--lpl-dur-fast) var(--lpl-ease), filter 0.2s ease, background-color 0.2s ease, box-shadow var(--lpl-dur-fast) var(--lpl-ease);
}
.lpl-hero__btn:hover { transform: translateY(-2px); }
.lpl-hero__btn:active { transform: translateY(0); }
.lpl-hero__btn.lpl-btn--primary:hover { box-shadow: 0 12px 24px -10px rgba(245, 179, 25, 0.55); }
.lpl-hero__btn .lpl-btn__icon { transition: transform var(--lpl-dur-fast) var(--lpl-ease); }
.lpl-hero__btn:hover .lpl-btn__icon { transform: translateX(3px); }

/* ---- TZ: "Compliant with:" line (crb_lic_hero_compliant_*): small, UNDER the buttons (TZ round 2) -------------- */
.lpl-hero__compliant {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 8px;
  margin-top: -6px;                               /* derived: 14px under the buttons, reads as their caption */
}
.lpl-hero__compliant-label { font-weight: 500; font-size: 12px; line-height: 18px; color: #dbdbdb; }
.lpl-hero__compliant-logo {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 4px 10px;
  border-radius: 8px;
  background: #fff;
}
.lpl-hero__compliant-img { display: block; width: auto; height: 20px; max-width: 130px; object-fit: contain; }
.lpl-hero__compliant-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 4px 12px 4px 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  font-weight: 600;
  font-size: 12px;
  line-height: 18px;
  color: #fff;
  text-align: left;
}
.lpl-hero__compliant-chip svg { flex: none; width: 16px; height: 16px; color: var(--lpl-yellow); }

/* ---- TZ: Suitability Score / Overview widget (crb_lic_hero_score_*) ----------------------------------------
   Standard look: glass card between the buttons and the card band. Curacao (.lpl-hero--tight, owner 2026-10-21):
   white card with purple text UNDER the card band, amber text instead of yellow for readability (bars stay yellow). */
.lpl-score {
  --score-ink: #fff;
  --score-ink-soft: #dbdbdb;
  --score-max: rgba(255, 255, 255, 0.55);
  --score-line: rgba(255, 255, 255, 0.14);
  --score-amber: var(--lpl-yellow);
  --score-amber-ico: var(--lpl-yellow);
  --score-amber-bg: rgba(245, 179, 25, 0.16);
  container-type: inline-size;
  width: 100%;
  margin-top: 24px;                               /* same gap as buttons -> cards (258:5) */
  padding: 20px 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(12.5px);
  backdrop-filter: blur(12.5px);
  color: var(--score-ink);
  text-align: left;
}
.lpl-hero--tight .lpl-score,
.lpl-why__score .lpl-score {
  --score-ink: #640ea1;                           /* purple text (the site's tag purple) */
  --score-ink-soft: rgba(100, 14, 161, 0.7);
  --score-max: rgba(100, 14, 161, 0.7);
  --score-line: rgba(100, 14, 161, 0.12);
  --score-amber: #8a5a00;                         /* dark amber, readable on white */
  --score-amber-ico: #a86c00;
  --score-amber-bg: rgba(245, 179, 25, 0.22);
  margin-top: 20px;
  border: 0;
  background: #fff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 18px 40px -24px rgba(20, 0, 50, 0.55);
}
.lpl-score__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-bottom: 18px;
}
.lpl-score__flag {
  display: block;
  flex: none;
  width: 32px;
  height: 24px;
  overflow: hidden;
  border-radius: 5px;
  box-shadow: 0 0 0 1px var(--score-line);
}
.lpl-score__flag img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.lpl-score__title { margin: 0; font-weight: 600; font-size: 14px; line-height: 22px; letter-spacing: 0.04em; text-transform: uppercase; }
.lpl-score__sub {
  margin: 0 0 0 auto;
  padding: 1px 10px;
  border-radius: var(--lpl-r-pill);
  background: var(--score-amber-bg);
  font-weight: 600;
  font-size: 12px;
  line-height: 22px;
  color: var(--score-amber);
}

.lpl-score__rows {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lpl-score__row { margin: 0; padding: 0; }
.lpl-score__row::before { content: none; }
.lpl-score__line {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.lpl-score__label { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 500; font-size: 14px; line-height: 20px; color: var(--score-ink); }
.lpl-score__label small { display: block; font-weight: 400; font-size: 12px; line-height: 16px; color: var(--score-ink-soft); }
.lpl-score__row-img { flex: none; display: block; width: 22px; height: 22px; object-fit: contain; }
.lpl-score__val { flex: none; font-weight: 600; font-size: 20px; line-height: 22px; font-variant-numeric: tabular-nums; color: var(--score-ink); }
.lpl-score__val b { font-weight: 600; }
.lpl-score__max { font-weight: 500; font-size: 13px; color: var(--score-max); }

.lpl-score__bar {
  height: 6px;
  overflow: hidden;
  border-radius: var(--lpl-r-pill);
  background: var(--score-line);
}
.lpl-score__fill {
  display: block;
  width: calc(var(--v) * 100%);                  /* final state = default (no JS) */
  height: 100%;
  border-radius: inherit;
  background: var(--lpl-yellow);
  box-shadow: 0 0 12px rgba(245, 179, 25, 0.5);
  transition: width 0.9s var(--lpl-ease) calc(0.15s + var(--r, 0) * 0.12s);
}
/* start state until motion.js reveals the widget ([data-lpl-reveal] -> .is-revealed); the 4s animation is a failsafe
   so the bars can never stay empty */
html.lpl-js:not(.lpl-motion-off) .lpl-score:not(.is-revealed) .lpl-score__fill { width: 0; animation: lpl-bar-failsafe 0.01s 4s forwards; }
@keyframes lpl-bar-failsafe { to { width: calc(var(--v) * 100%); } }

.lpl-score__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 12px;
  margin: 18px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--score-line);
  list-style: none;
}
.lpl-score__fact { display: flex; align-items: flex-start; gap: 10px; min-width: 0; margin: 0; padding: 0; }
.lpl-score__fact::before { content: none; }
.lpl-score__fact:nth-child(odd):last-child { grid-column: 1 / -1; }   /* odd count: no hole next to the last one */
.lpl-score__fact-ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--score-amber-bg);
  color: var(--score-amber-ico);
}
.lpl-score__fact-ico svg { width: 18px; height: 18px; }
.lpl-score__fact-img { display: block; width: 20px; height: 20px; object-fit: contain; }
.lpl-score__fact-text { display: block; min-width: 0; }
.lpl-score__fact-label { display: block; font-weight: 500; font-size: 12px; line-height: 16px; color: var(--score-ink-soft); }
.lpl-score__fact-value { display: block; margin-top: 2px; font-weight: 600; font-size: 13px; line-height: 18px; color: var(--score-ink); overflow-wrap: anywhere; }

/* widget wide enough: bars side by side, facts in one row */
@container (min-width: 640px) {
  .lpl-score__rows { grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr)); gap: 32px; }
  .lpl-score__facts { grid-template-columns: repeat(var(--f, 4), minmax(0, 1fr)); gap: 16px 20px; }
  .lpl-score__fact:nth-child(odd):last-child { grid-column: auto; }
}

/* ======================= card band (Quick Stats) ========================================================= */
.lpl-hero__band {
  container-type: inline-size;
  width: 100%;
  margin-top: 24px;                               /* 258:5 gap: buttons -> cards row */
}
/* Curacao only (hero.php adds .lpl-hero--tight, owner 2026-10-21): cards raised right under the buttons */
.lpl-hero--tight .lpl-hero__band {
  margin-top: -8px;                               /* the 26u art headroom of .lpl-hero__cards stays */
}
.lpl-hero__cards {
  --u: calc(100cqw / 376);                        /* mobile: 1 design px of the 376 frame */
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;                 /* 259:112 */
  row-gap: calc(20 * var(--u));                   /* derived: cost card under the row */
  padding-top: calc(26 * var(--u));               /* 259:112 row is 167 high, cards (max 141) sit at its bottom */
  text-align: left;
}

.lpl-hcard {
  position: relative;
  flex: none;
  margin: 0;
  overflow: hidden;
  border-radius: calc(15 * var(--u));
  background: linear-gradient(180deg, #fff 0%, #f5dfff 100%);   /* 259:114 / 121 / 126: all three white on mobile */
  -webkit-backdrop-filter: blur(calc(12.5 * var(--u)));
  backdrop-filter: blur(calc(12.5 * var(--u)));
  color: #000;
}
.lpl-hcard__art {
  position: absolute;
  display: block;
  max-width: none;
  margin: 0;
  pointer-events: none;
}
.lpl-hcard__clip {
  position: absolute;
  display: block;
  overflow: hidden;
}

/* text block "Label: / (blank line) / value" (259:115 / 125 / 127) */
.lpl-hcard__stat {
  position: absolute;
  display: flex;
  flex-direction: column;
  margin: 0;
  font-family: var(--lpl-font);
  font-weight: 500;
  font-size: calc(11 * var(--u));
  color: #6f7781;
}
.lpl-hcard__label {
  display: block;
  line-height: calc(9 * var(--u));
}
.lpl-hcard__value {
  display: block;
  /* Figma line box = 9 (8 on card A); the taller line box with negative margins keeps one line exactly there
     and only gives a wrapped value (longer page data) room to breathe */
  margin: calc(6 * var(--u)) 0 calc(-3 * var(--u));
  font-weight: 600;
  font-size: calc(11 * var(--u));
  line-height: calc(15 * var(--u));
  color: #000;
  overflow-wrap: anywhere;
}

/* photo card + label pill: desktop only (the mobile frame has neither) */
.lpl-hcard--photo { display: none; }

/* A - hourglass (259:114): 121 x 141 */
.lpl-hcard--a { width: calc(121 * var(--u)); height: calc(141 * var(--u)); }
.lpl-hcard--a .lpl-hcard__art {               /* 259:116: 115.538 x 134.865, rotate 1deg */
  left: calc(39.57 * var(--u));
  top: calc(-26.91 * var(--u));
  width: calc(115.538 * var(--u));
  height: calc(134.865 * var(--u));
  object-fit: cover;
  transform: rotate(1deg);
}
.lpl-hcard--a .lpl-hcard__stat {
  right: calc(12 * var(--u));
  bottom: calc(10.2 * var(--u));
  width: calc(78 * var(--u));
  align-items: flex-end;
  text-align: right;
}
.lpl-hcard--a .lpl-hcard__label { line-height: calc(8 * var(--u)); }
.lpl-hcard--a .lpl-hcard__value { margin-top: calc(4.5 * var(--u)); margin-bottom: calc(-3.5 * var(--u)); }

/* B - tax (259:121): 120 x 109, text at the top */
.lpl-hcard--b { width: calc(120 * var(--u)); height: calc(109 * var(--u)); }
.lpl-hcard--b .lpl-hcard__clip { left: calc(44 * var(--u)); top: calc(30 * var(--u)); width: calc(81 * var(--u)); height: calc(79 * var(--u)); }
.lpl-hcard--b .lpl-hcard__art {               /* 259:124 inset -17.66% -33.17% -49.21% -6.35% of 81 x 79 */
  left: calc(-5.14 * var(--u));
  top: calc(-13.95 * var(--u));
  width: calc(113.01 * var(--u));
  height: calc(131.83 * var(--u));
}
.lpl-hcard--b .lpl-hcard__stat { left: calc(11 * var(--u)); top: calc(10 * var(--u)); max-width: calc(100 * var(--u)); }

/* C - handshake (259:126): 121 x 141, art mirrored */
.lpl-hcard--c { width: calc(121 * var(--u)); height: calc(141 * var(--u)); }
.lpl-hcard--c .lpl-hcard__art {               /* 259:128: left -15.7%, right 29.75%, aspect 122.633 / 142.787 */
  left: calc(-19 * var(--u));
  top: calc(-14.05 * var(--u));
  width: calc(104 * var(--u));
  height: calc(121.09 * var(--u));
  transform: scaleX(-1);
}
.lpl-hcard--c .lpl-hcard__stat { left: calc(12.24 * var(--u)); bottom: calc(11.2 * var(--u)); max-width: calc(100 * var(--u)); }

/* D - cost card: not in the mobile frame; derived = the desktop card (2:100) at full width under the row, 1:1 px */
.lpl-hcard--d {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  width: 100%;
  padding: 32px 16px 31px;
  border-radius: 20px;
}
.lpl-hcard--d:not(:has(> *)) { display: none; }
.lpl-hcard--d .lpl-hcard__stat {
  position: static;
  min-height: 0;
  font-size: 20px;
}
.lpl-hcard--d .lpl-hcard__label { line-height: 16px; }
.lpl-hcard--d .lpl-hcard__value { margin: 12px 0 -4px; font-size: 22px; line-height: 24px; }
.lpl-hcard__note {
  display: flex;
  align-items: center;
  align-self: stretch;
  min-height: 84px;
  margin: 0;
  padding: 8px 6px 8px 12px;
  border-radius: 16px;
  background: rgba(4, 4, 4, 0.06);
  font-weight: 500;
  font-size: 14px;
  line-height: 22px;
  color: #000;
}
.lpl-hcard__msg {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  margin: auto 0 0;                               /* 2:105 sits at the bottom of the 2:101 column, also when a page has no note */
  padding: 0;
  list-style: none;
}
.lpl-hcard__msg li { margin: 0; padding: 0; }
.lpl-hcard__msg li::before { content: none; }
.lpl-hcard__msg a {
  display: block;
  width: 34px;
  height: 34px;
  transition: transform var(--lpl-dur-fast) var(--lpl-ease), opacity var(--lpl-dur-fast) var(--lpl-ease);
}
.lpl-hcard__msg a:hover { transform: translateY(-2px); opacity: 0.75; }
.lpl-hcard__msg img { display: block; width: 34px; height: 34px; max-width: none; }
.lpl-hcard__msg a:focus-visible { outline-color: #7612a4; }

/* ---- entrance on load (hero is above the fold): <= 600 ms in total, never hides content without JS ---- */
@keyframes lpl-hero-in   { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
@keyframes lpl-hero-rise { from { translate: 0 12px; } to { translate: 0 0; } }
@media (prefers-reduced-motion: no-preference) {
  html.lpl-js:not(.lpl-motion-off) .lpl-hero__crumbs,
  html.lpl-js:not(.lpl-motion-off) .lpl-hero__trust,
  html.lpl-js:not(.lpl-motion-off) .lpl-hero__alert,
  html.lpl-js:not(.lpl-motion-off) .lpl-hero__compliant,
  html.lpl-js:not(.lpl-motion-off) .lpl-hero__lead,
  html.lpl-js:not(.lpl-motion-off) .lpl-hero__actions,
  html.lpl-js:not(.lpl-motion-off) .lpl-hero__band {
    animation: lpl-hero-in 0.38s var(--lpl-ease) both;
    animation-delay: calc(var(--i, 0) * 30ms);
  }
  html.lpl-js:not(.lpl-motion-off) .lpl-hero__title {       /* LCP element: moves, never fades */
    animation: lpl-hero-rise 0.4s var(--lpl-ease) both;
    animation-delay: calc(var(--i, 0) * 30ms);
  }
  .lpl-hcard--a .lpl-hcard__art,
  .lpl-hcard--b .lpl-hcard__art,
  .lpl-hcard--c .lpl-hcard__art { transition: translate var(--lpl-dur) var(--lpl-ease); }
  .lpl-hcard--a:hover .lpl-hcard__art,
  .lpl-hcard--b:hover .lpl-hcard__art,
  .lpl-hcard--c:hover .lpl-hcard__art { translate: 0 -4px; }
}

/* ---- 768-1023 (derived: no tablet frame): mobile text, the desktop card band scaled to the container --------- */
@media (min-width: 768px) {
  .lpl-sec--hero { padding-bottom: 48px; }
  .lpl-hero__crumbs { width: auto; max-width: 100%; }
  .lpl-hero__title { max-width: 900px; }
  .lpl-hero__lead { max-width: 940px; }
  .lpl-hero__band { margin-top: 35px; }
  .lpl-hero--tight .lpl-hero__band { margin-top: -16px; }   /* Curacao: only the tall side cards reach the buttons line, never the centred buttons */
  .lpl-score { width: min(100%, 940px); margin-top: 35px; padding: 24px 28px; }   /* TZ: 940 = the lead width 2:12 */
  .lpl-hero--tight .lpl-score { margin-top: 28px; }   /* TZ: 940 = the lead width 2:12 */
  .lpl-score__title { font-size: 15px; }

  /* desktop band 2:83: 1360 wide, five cards bottom-aligned on one line */
  .lpl-hero__cards {
    --u: calc(100cqw / 1360);
    flex-wrap: nowrap;
    justify-content: center;
    gap: calc(20 * var(--u));
    padding-top: 0;
  }
  .lpl-hcard {
    border-radius: calc(20 * var(--u));
    background: rgba(255, 255, 255, 0.1);         /* 2:92 / 2:97 glass */
    color: #fff;
  }
  .lpl-hcard--a,
  .lpl-hcard--d { background: linear-gradient(180deg, #fff 0%, #f5dfff 100%); color: #000; }   /* 2:85 / 2:100 */

  .lpl-hcard__stat { font-size: calc(20 * var(--u)); color: #e1e1e1; }
  .lpl-hcard__label { line-height: calc(16 * var(--u)); }
  .lpl-hcard__value {
    margin: calc(12 * var(--u)) 0 calc(-4 * var(--u));   /* Figma: blank 16px line + 16px value line */
    font-size: calc(22 * var(--u));
    line-height: calc(24 * var(--u));
    color: #fff;
  }
  .lpl-hcard--a .lpl-hcard__stat,
  .lpl-hcard--d .lpl-hcard__stat { color: #6f7781; }
  .lpl-hcard--a .lpl-hcard__value,
  .lpl-hcard--d .lpl-hcard__value { color: #000; }
  .lpl-hcard--a .lpl-hcard__label { line-height: calc(16 * var(--u)); }
  .lpl-hcard--a .lpl-hcard__value { margin: calc(12 * var(--u)) 0 calc(-4 * var(--u)); }

  /* photo 2:84: 325 x 313, radius 25; pill 2:88 overlaps the photo and card A */
  .lpl-hcard--photo {
    display: block;
    z-index: 2;
    width: calc(325 * var(--u));
    height: calc(313 * var(--u));
    overflow: visible;
    border-radius: calc(25 * var(--u));
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .lpl-hcard__photo-img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    border-radius: inherit;
    object-fit: cover;
    object-position: center bottom;
  }
  .lpl-hcard__pill {
    position: absolute;
    left: calc(282 * var(--u));
    top: calc(83 * var(--u));
    display: flex;
    align-items: center;
    gap: calc(10 * var(--u));
    min-width: calc(166.11 * var(--u));
    height: calc(42.41 * var(--u));
    padding: 0 calc(19 * var(--u));
    border-radius: var(--lpl-r-pill);
    background: #fff;
    filter: drop-shadow(0 calc(14 * var(--u)) calc(12.1 * var(--u)) rgba(0, 0, 0, 0.5));
    color: #080d0d;
    font-weight: 600;
    font-size: calc(14 * var(--u));
    line-height: calc(22.4 * var(--u));
    white-space: nowrap;
  }
  .lpl-hcard__dot {
    flex: none;
    width: calc(7 * var(--u));
    height: calc(7 * var(--u));
    border-radius: calc(24 * var(--u));
    background: #080d0d;
  }

  /* A 2:85: 210 x 258, hourglass 2:87 (273 x 318.669, rotate 1deg), text right-aligned at the bottom */
  .lpl-hcard--a { width: calc(210 * var(--u)); height: calc(258 * var(--u)); }
  .lpl-hcard--a .lpl-hcard__art {
    left: calc(26.48 * var(--u));
    top: calc(-109.52 * var(--u));
    width: calc(273 * var(--u));
    height: calc(318.669 * var(--u));
  }
  .lpl-hcard--a .lpl-hcard__stat { right: calc(20 * var(--u)); bottom: calc(25.7 * var(--u)); width: calc(169 * var(--u)); }

  /* B 2:92: 210 x 211 glass, art clip 2:94 (167 x 163 at 51.6 / 57.6), text at the top */
  .lpl-hcard--b { width: calc(210 * var(--u)); height: calc(211 * var(--u)); }
  .lpl-hcard--b .lpl-hcard__clip { left: calc(51.6 * var(--u)); top: calc(57.6 * var(--u)); width: calc(167 * var(--u)); height: calc(163 * var(--u)); }
  .lpl-hcard--b .lpl-hcard__art { left: calc(-10.6 * var(--u)); top: calc(-28.79 * var(--u)); width: calc(232.97 * var(--u)); height: calc(272 * var(--u)); }
  .lpl-hcard--b .lpl-hcard__stat { left: calc(19 * var(--u)); top: calc(27.3 * var(--u)); max-width: calc(172 * var(--u)); }

  /* C 2:97: 210 x 258 glass, handshake 2:99 mirrored, text bottom-left */
  .lpl-hcard--c { width: calc(210 * var(--u)); height: calc(258 * var(--u)); }
  .lpl-hcard--c .lpl-hcard__art { left: calc(-29.84 * var(--u)); top: calc(-46.78 * var(--u)); width: calc(210.67 * var(--u)); height: calc(245.31 * var(--u)); }
  .lpl-hcard--c .lpl-hcard__stat { left: calc(21 * var(--u)); bottom: calc(33.7 * var(--u)); max-width: calc(170 * var(--u)); }

  /* D 2:100: 325 x 313 (grows upward when it carries more than one stat), column 2:101 at 16 / 32, gap 22 */
  .lpl-hcard--d {
    width: calc(325 * var(--u));
    min-height: calc(313 * var(--u));
    gap: calc(22 * var(--u));
    padding: calc(32 * var(--u)) calc(17 * var(--u)) calc(31 * var(--u)) calc(16 * var(--u));
    border-radius: calc(20 * var(--u));
  }
  .lpl-hcard--d .lpl-hcard__stat { min-height: calc(88 * var(--u)); width: calc(292 * var(--u)); font-size: calc(20 * var(--u)); }
  .lpl-hcard--d .lpl-hcard__label { line-height: calc(16 * var(--u)); }
  .lpl-hcard--d .lpl-hcard__value { margin: calc(12 * var(--u)) 0 calc(-4 * var(--u)); font-size: calc(22 * var(--u)); line-height: calc(24 * var(--u)); }
  .lpl-hcard__note {                              /* 2:103: padding 8 / 12, radius 16, text 2:104 280 wide, 3 lines */
    min-height: calc(84 * var(--u));
    padding: calc(8 * var(--u)) 0 calc(8 * var(--u)) calc(12 * var(--u));
    border-radius: calc(16 * var(--u));
    font-size: calc(14 * var(--u));
    line-height: calc(22 * var(--u));
  }
  .lpl-hcard__msg { gap: calc(16 * var(--u)); }
  .lpl-hcard__msg a,
  .lpl-hcard__msg img { width: calc(34 * var(--u)); height: calc(34 * var(--u)); }
}

/* ======================= desktop frame 2:4 (>= 1024) ====================================================== */
@media (min-width: 1024px) {
  .lpl-sec--hero { padding: 179px 0 61px; }       /* 2:5 top 179; band 2:83 ends at 917 of 978 */

  .lpl-hero__crumbs {                             /* 2:6 */
    height: 50px;
    margin-bottom: 0;
    padding: 8px 10px;
  }
  .lpl-hero__crumb-list { gap: 10px; height: auto; }
  .lpl-hero__crumb { font-size: 14px; line-height: 22px; }
  .lpl-hero__crumb--home > a, .lpl-hero__crumb--home > span { padding: 5px 12px; }   /* 2:8 */

  .lpl-hero__title {                              /* 2:11: 70 / 83.6, -3px; 1209 wide */
    max-width: 1209px;
    font-size: clamp(44px, 3.646vw, 70px);        /* 70 at 1920; derived proportional size below */
    line-height: 1.1943;
    letter-spacing: -0.04286em;
  }
  .lpl-hero__lead {                               /* 2:12: 18 / 26, #899698, 940 wide */
    max-width: 940px;
    font-size: 18px;
    line-height: 26px;
    color: #899698;
  }
  .lpl-hero__btn { font-size: 16px; }             /* 2:15 / 2:19 */
  .lpl-hero__trust { padding: 6px 16px 6px 12px; font-size: 14px; line-height: 22px; }   /* TZ: crumb text size 2:8 */
  .lpl-hero__compliant-label,
  .lpl-hero__compliant-chip { font-size: 13px; line-height: 20px; }
  .lpl-hero__alert { gap: 14px; padding: 14px 20px 14px 14px; }
  .lpl-hero__alert-body { font-size: 14px; line-height: 22px; }
  .lpl-hero__alert-label { font-size: 13px; line-height: 20px; }
}