/*
 * License page / Jurisdictions = light horizontal carousel (spec Block 11).
 * Cards: country flag + jurisdiction name + short tag pill. Scroll-snap + prev/next buttons + progress track;
 * the next card peeks in at the right edge (edge fade). Deliberately quiet (white cards, hairline borders,
 * small heading) so it does not compete with the main CTA.
 * Tokens come from base.css (--lpl-*).
 */
.lpl-sec--jurisdictions {
  position: relative;
  box-sizing: border-box;
  padding: 70px 0;
  font-family: var(--lpl-font, 'Inter', system-ui, sans-serif);
}
.lpl-sec--jurisdictions *,
.lpl-sec--jurisdictions *::before,
.lpl-sec--jurisdictions *::after { box-sizing: border-box; }

.lpl-jur__wrap {
  width: 100%;
  max-width: 1408px; /* 1360 content + 2x24 gutter */
  margin-inline: auto;
  padding-inline: 7px;
}

/* ---- header ---------------------------------------------------------------------------------- */
.lpl-jur__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}
.lpl-jur__headline {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  max-width: 760px;
  min-width: 0;
}
.lpl-sec--jurisdictions .lpl-tag.lpl-jur__tag {
  display: inline-flex;
  align-items: center;
  align-self: center;   /* VQA: pill centred above the centred title / lede (base .lpl-tag is flex-start) */
  justify-content: center;
  height: 36px;
  padding: 8px 14px;
  margin: 0;
  border-radius: 999px;
  background: var(--lpl-purple-tag, #640ea1);
  color: #fff;
  font: 600 10px/20px var(--lpl-font, 'Inter', sans-serif);
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
}
.lpl-sec--jurisdictions .lpl-h2.lpl-jur__title {
  margin: 0;
  padding: 0;
  color: #000;
  font: 600 26px/1.2 var(--lpl-font, 'Inter', sans-serif);
  letter-spacing: -0.5px;
}
.lpl-sec--jurisdictions .lpl-lead.lpl-jur__lead {
  max-width: 640px;
  margin: 0;
  padding: 0;
  color: #4a4f5c;
  font: 400 14px/22px var(--lpl-font, 'Inter', sans-serif);
  letter-spacing: 0;
}

/* ---- prev / next ------------------------------------------------------------------------------ */
.lpl-jur__nav { display: none; flex: none; gap: 10px; }
.lpl-sec--jurisdictions .lpl-jur__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--lpl-line, #e1e2ee);
  border-radius: 50%;
  background: #fff;
  color: var(--lpl-navy, #0d0c41);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition:
    background-color var(--lpl-dur-fast, 0.2s) var(--lpl-ease, ease),
    border-color var(--lpl-dur-fast, 0.2s) var(--lpl-ease, ease),
    color var(--lpl-dur-fast, 0.2s) var(--lpl-ease, ease),
    opacity var(--lpl-dur-fast, 0.2s) var(--lpl-ease, ease),
    transform var(--lpl-dur-fast, 0.2s) var(--lpl-ease, ease);
}
@media (hover: hover) {
  .lpl-sec--jurisdictions .lpl-jur__btn:not([aria-disabled='true']):hover {
    background: var(--lpl-purple-tag, #640ea1);
    border-color: var(--lpl-purple-tag, #640ea1);
    color: #fff;
  }
}
.lpl-sec--jurisdictions .lpl-jur__btn:not([aria-disabled='true']):active { transform: scale(0.94); }
.lpl-sec--jurisdictions .lpl-jur__btn[aria-disabled='true'] { opacity: 0.35; cursor: default; }
.lpl-sec--jurisdictions .lpl-jur__btn:focus-visible,
.lpl-sec--jurisdictions .lpl-jur__scroller:focus-visible,
.lpl-sec--jurisdictions a.lpl-jur__card:focus-visible { outline: 2px solid var(--lpl-purple-tag, #640ea1); outline-offset: 3px; }

/* ---- scroller --------------------------------------------------------------------------------- */
.lpl-jur__carousel { position: relative; }
.lpl-jur__scroller {
  --fl: 0px; /* edge fades, driven by jurisdictions.js (.has-prev / .has-next) */
  --fr: 0px;
  position: relative; /* offsetParent for the drag/settle maths in jurisdictions.js */
  margin: -12px -7px;
  padding: 12px 7px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 7px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  /* VQA: --fh / --fhr = the part of the edge that is fully hidden before the fade starts */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, transparent var(--fh, 0px), #000 var(--fl), #000 calc(100% - var(--fr)), transparent calc(100% - var(--fhr, 0px)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, transparent var(--fh, 0px), #000 var(--fl), #000 calc(100% - var(--fr)), transparent calc(100% - var(--fhr, 0px)), transparent 100%);
}
.lpl-jur__scroller::-webkit-scrollbar { display: none; }
/* VQA: the left fade equals the scroller's side padding (7 / 24px) and fully hides the card that scrolled past: a
   10px sliver of the previous card showed as a stray hairline at the left edge (and the 36px fade washed out the
   first card's own border) */
.lpl-jur__scroller.has-prev { --fl: 7px; --fh: 3px; }
.lpl-jur__scroller.has-next { --fr: 48px; }
.lpl-jur__scroller.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.lpl-jur__scroller.is-dragging .lpl-jur__card { pointer-events: none; }

.lpl-sec--jurisdictions .lpl-jur__list {
  display: flex;
  align-items: stretch;
  gap: 14px;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lpl-sec--jurisdictions .lpl-jur__item {
  flex: 0 0 auto;
  width: min(268px, 78vw);
  margin: 0;
  padding: 0;
  scroll-snap-align: start;
}
.lpl-sec--jurisdictions .lpl-jur__item::before { content: none; }

/* card */
.lpl-sec--jurisdictions .lpl-jur__card {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  height: 100%;
  min-height: 84px;
  padding: 16px 18px;
  border: 1px solid var(--lpl-line, #e1e2ee);
  border-radius: 16px;
  background: #fff;
  color: var(--lpl-navy, #0d0c41);
  text-decoration: none;
  transition:
    transform var(--lpl-dur, 0.45s) var(--lpl-ease, ease),
    border-color var(--lpl-dur, 0.45s) var(--lpl-ease, ease),
    box-shadow var(--lpl-dur, 0.45s) var(--lpl-ease, ease);
}
@media (hover: hover) {
  .lpl-sec--jurisdictions a.lpl-jur__card:hover {
    transform: translateY(-3px);
    border-color: var(--lpl-purple-tag, #640ea1);
    box-shadow: 0 16px 28px -20px rgba(100, 14, 161, 0.55);
  }
  .lpl-sec--jurisdictions a.lpl-jur__card:hover .lpl-jur__go { color: var(--lpl-purple-tag, #640ea1); transform: translateX(3px); }
}
.lpl-jur__flag {
  flex: none;
  display: block;
  width: 48px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 6px;
  background: var(--lpl-b2c-soft, #f3e8fb);
  box-shadow: 0 0 0 1px rgba(13, 12, 65, 0.12);
}
.lpl-jur__flag img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  -webkit-user-drag: none;
  user-select: none;
}
.lpl-jur__info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.lpl-jur__name {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--lpl-navy, #0d0c41);
  font-weight: 600;
  font-size: 17px;
  line-height: 22px;
}
.lpl-jur__pill {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--lpl-b2c-soft, #f3e8fb);
  color: var(--lpl-purple-tag, #640ea1);
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
}
.lpl-jur__go {
  flex: none;
  display: block;
  color: #9a9fb0;
  transition: color var(--lpl-dur-fast, 0.2s) var(--lpl-ease, ease), transform var(--lpl-dur, 0.45s) var(--lpl-ease, ease);
}

/* progress track */
.lpl-jur__progress {
  position: relative;
  height: 3px;
  margin-top: 22px;
  border-radius: 3px;
  background: var(--lpl-line, #e1e2ee);
  overflow: hidden;
}
.lpl-jur__thumb {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  border-radius: 3px;
  background: var(--lpl-purple-tag, #640ea1);
  will-change: left, width;
}

/* everything fits: no controls needed */
.lpl-sec--jurisdictions.is-static .lpl-jur__nav,
.lpl-sec--jurisdictions.is-static .lpl-jur__progress { display: none; }
.lpl-sec--jurisdictions.is-static .lpl-jur__scroller { cursor: default; }

@media (min-width: 768px) {
  .lpl-sec--jurisdictions { padding: 90px 0; }
  .lpl-jur__wrap { padding-inline: 24px; }
  .lpl-jur__head { margin-bottom: 32px; }
  .lpl-jur__nav { display: flex; }
  .lpl-sec--jurisdictions .lpl-tag.lpl-jur__tag { height: 40px; font-size: 12px; }
  .lpl-sec--jurisdictions .lpl-h2.lpl-jur__title { font-size: 34px; letter-spacing: -1px; }
  .lpl-sec--jurisdictions .lpl-lead.lpl-jur__lead { font-size: 16px; line-height: 25px; }
  .lpl-jur__scroller { margin: -12px -24px; padding: 12px 24px; scroll-padding-inline: 24px; }
  .lpl-jur__scroller.has-prev { --fl: 24px; --fh: 20px; }
  .lpl-sec--jurisdictions .lpl-jur__item { width: 300px; }
  .lpl-jur__flag { width: 56px; }
  .lpl-sec--jurisdictions .lpl-jur__card { min-height: 92px; padding: 18px 20px; gap: 16px; }
  .lpl-jur__name { font-size: 18px; line-height: 24px; }
}

@media (min-width: 1200px) {
  .lpl-sec--jurisdictions { padding: 100px 0; }
  .lpl-sec--jurisdictions .lpl-tag.lpl-jur__tag { height: 44px; font-size: 14px; }
  .lpl-sec--jurisdictions .lpl-h2.lpl-jur__title { font-size: 40px; }
  /* four cards exactly fill the scroller (the old fixed 340px width clipped the 4th card by ~42px) */
  .lpl-sec--jurisdictions .lpl-jur__scroller { container-type: inline-size; }
  .lpl-sec--jurisdictions .lpl-jur__item { width: calc((100cqw - 3 * 14px) / 4); }
  /* four cards fill the row, so the next card's 10px sliver in the side padding is hidden too (VQA) */
  .lpl-jur__scroller.has-next { --fr: 24px; --fhr: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .lpl-jur__scroller { scroll-behavior: auto; }
}

/* VQA: balanced title lines */
.lpl-sec--jurisdictions .lpl-h2.lpl-jur__title { text-wrap: balance; }

/* 2026-10-16 restore of the pre-Figma look: the old base.css centred this head ("lpl-heads-centered", incl. the
   prev / next buttons under the title); base.css now centres only restrictions / process / turnkey, so the same
   rules live here. */
.lpl-page .lpl-sec .lpl-jur__head {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 20px !important;
  text-align: center !important;
}
.lpl-page .lpl-sec .lpl-jur__headline {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
  max-width: none !important;
  flex: none !important;
  text-align: center !important;
}
.lpl-page .lpl-sec .lpl-jur__head .lpl-lead,
.lpl-page .lpl-sec .lpl-jur__head [class*="__lead"] {
  flex: none !important;
  width: 100% !important;
  max-width: 860px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}
.lpl-page .lpl-sec .lpl-jur__head h2 {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 100% !important;
}
.lpl-page .lpl-sec .lpl-jur__nav { justify-content: center !important; margin-left: auto !important; margin-right: auto !important; }