/*
 * License page: Permitted activities = TZ block 7 (grid of cards, B2C / B2B / both marked on every card).
 * Grid 3 columns (desktop) / 2 (tablet) / 1 compact column (mobile). Audience is colour-coded by the card fill and by the
 * visible .lpl-types__pill; the legend above the grid explains the colours.
 *
 * Visual language = Figma "LICENCE TYPES" 105:38481 (desktop) / 260:21671 (mobile):
 *   B2C  deep violet gradient #4a027d -> #6610a3      (105:38491 / 260:21679)
 *   B2B  light magenta gradient #8a15a5 -> #a923c8    (105:38530 / 260:21741)
 *   both = violet -> magenta (derived)
 * Values from Figma: head row / title 60/83.6 -3px #000 / lede 18/26 #2a2a2a right-aligned 432 wide / tag pill 44px,
 * card radius 20 (mobile 31), padding 26 28 (mobile 22 24), title 24/34 600 white (mobile 18/29 -0.18),
 * text 14/22 #e9e9e9 (mobile 12/21), icons 24-28px outline, gaps 14 (mobile 12).
 * Marked "derived" = no Figma frame (tablet sizes, 3-column card width, both-audience colour, tag pill on cards).
 * Shared tokens --lpl-b2c / --lpl-b2b (+ -soft) come from base.css and are not redefined here.
 * Motion: scroll reveal comes from motion.js ([data-lpl-reveal], opacity/translate only); card hover uses
 * transform / shadow; icon strokes draw in when the section enters the viewport.
 */

.lpl-sec--types {
  --lpl-types-font: var(--lpl-font, 'Inter', sans-serif);
  --ty-ink: #000;                 /* 105:38487 title */
  --ty-lede: #2a2a2a;             /* 105:38488 lede */
  --ty-text: #e9e9e9;             /* 105:38537 card text */
  /* card gradients (Figma) */
  --ty-b2c-from: #4a027d;
  --ty-b2c-to: #6610a3;
  --ty-b2b-from: #8a15a5;
  --ty-b2b-to: #a923c8;
  font-family: var(--lpl-types-font);
}

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

.lpl-sec--types h2,
.lpl-sec--types h3,
.lpl-sec--types p,
.lpl-sec--types ul,
.lpl-sec--types li {
  margin: 0;
  padding: 0;
}
.lpl-sec--types ul,
.lpl-sec--types li { list-style: none; }
.lpl-sec--types li::before { content: none; }
.lpl-sec--types svg { max-width: none; }

.lpl-sec--types .lpl-types {
  display: flex;
  flex-direction: column;
  gap: 37px;                      /* mobile 260:21671 */
}

/* ---- head: 105:38483 (row, items-end) / 260:21672 (column, gap 12) ------------------------- */
.lpl-sec--types .lpl-types__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;                      /* 260:21673 */
}

.lpl-sec--types .lpl-types__head-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;                      /* 260:21673 */
  min-width: 0;
}

.lpl-sec--types .lpl-types__tag {
  align-self: center;             /* VQA: base .lpl-tag is align-self:flex-start, which left the pill at the edge above a centred title */
  padding: 12px 16px;             /* 105:38485 / 260:21674 */
  font-family: var(--lpl-types-font);
}

.lpl-sec--types .lpl-types__title {
  color: var(--ty-ink);
  font-family: var(--lpl-types-font);
  font-weight: 600;
  font-size: 22px;                /* 260:21676 */
  line-height: 29px;
  letter-spacing: -0.22px;
}

.lpl-sec--types .lpl-types__intro {
  color: var(--ty-lede);
  font-family: var(--lpl-types-font);
  font-weight: 400;
  font-size: 14px;                /* 260:21677 */
  line-height: 21px;
}

/* ---- legend (TZ: colour key; swatches use the card gradients) ------------------------------ */
.lpl-sec--types .lpl-types__legend {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px 40px;
  padding: 18px 20px;
  border: 1px solid var(--lpl-line, #e1e2ee);
  border-radius: 20px;
  background: #fbfaff;
}

.lpl-sec--types .lpl-types__key {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.lpl-sec--types .lpl-types__key-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ty-ink);
  font-weight: 600;
  font-size: 15px;
  line-height: 22px;
}

.lpl-sec--types .lpl-types__dot {
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 5px;
  background: linear-gradient(180deg, var(--ty-b2c-from), var(--ty-b2c-to));
}
.lpl-sec--types .lpl-types__key--b2b .lpl-types__dot {
  background: linear-gradient(180deg, var(--ty-b2b-from), var(--ty-b2b-to));
}

.lpl-sec--types .lpl-types__key-note {
  padding-left: 24px;
  color: var(--ty-lede);
  font-size: 13.5px;
  line-height: 21px;
}

.lpl-sec--types .lpl-types__legend--plain {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 36px;
  padding: 12px 20px;
}

/* ---- grid ---------------------------------------------------------------------------------- */
.lpl-sec--types .lpl-types__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;                      /* 260:21678 */
}

.lpl-sec--types .lpl-types__card {
  --c: var(--lpl-b2c, #640ea1);
  --lpl-ico-bg: #5a0a93;          /* fill of the poker back card = middle of the gradient */
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;                      /* 260:21679 */
  min-width: 0;
  padding: 22px 24px;             /* 260:21679 */
  border-radius: 31px;            /* 260:21679 */
  background: linear-gradient(180deg, var(--ty-b2c-from) 0%, var(--ty-b2c-to) 100%);
  color: var(--ty-text);
  transition: transform var(--lpl-dur, 0.45s) var(--lpl-ease, ease), box-shadow var(--lpl-dur, 0.45s) var(--lpl-ease, ease);
}

.lpl-sec--types .lpl-types__card--b2b {
  --c: var(--lpl-b2b, #1f5fbf);
  --lpl-ico-bg: #9a1cb6;
  background: linear-gradient(180deg, var(--ty-b2b-from) 0%, var(--ty-b2b-to) 100%);
}

/* both audiences: violet -> magenta (derived) */
.lpl-sec--types .lpl-types__card--both {
  --c: var(--lpl-b2c, #640ea1);
  --lpl-ico-bg: #7a0f9e;
  background: linear-gradient(160deg, var(--ty-b2c-from) 0%, var(--ty-b2b-to) 100%);
}

@media (hover: hover) {
  .lpl-sec--types .lpl-types__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 36px -22px rgba(74, 2, 125, 0.7);
  }
}

.lpl-sec--types .lpl-types__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 28px;
}

.lpl-sec--types .lpl-types__ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;                    /* 245:298 / 245:306 icon slot */
  height: 28px;
  color: #fff;
  perspective: 160px;
}

.lpl-sec--types .lpl-types__svg {
  display: block;
  width: 28px;
  height: 28px;
  transform-origin: 50% 50%;
}

/* tag on every card (TZ: editor marks a card B2C / B2B graphically); derived: white plaque, token text colour */
.lpl-sec--types .lpl-types__pill {
  flex: none;
  margin-left: auto;
  padding: 3px 10px;
  border-radius: 999px;
  background: #fff;
  color: var(--c);
  font-weight: 600;
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.lpl-sec--types .lpl-types__card-title {
  color: #fff;
  font-family: var(--lpl-types-font);
  font-weight: 600;
  font-size: 18px;                /* 260:21680 */
  line-height: 29px;
  letter-spacing: -0.18px;
  overflow-wrap: anywhere;
}

.lpl-sec--types .lpl-types__card-text {
  color: var(--ty-text);
  font-weight: 400;
  font-size: 12px;                /* 260:21681 / 260:21743 */
  line-height: 21px;
  overflow-wrap: anywhere;
}
.lpl-sec--types .lpl-types__card--b2c .lpl-types__card-text { color: #fff; }   /* 260:21681 */

/* icon micro-motion on hover (one gesture per icon family) */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .lpl-sec--types .lpl-types__svg { transition: transform 0.7s var(--lpl-ease, ease); }
  .lpl-sec--types .lpl-types__card:hover .lpl-types__svg { transform: rotate(-8deg) scale(1.12); }
  .lpl-sec--types .lpl-types__card[data-icon="casino"]:hover .lpl-types__svg { transform: rotate(120deg) scale(1.08); }
  .lpl-sec--types .lpl-types__card[data-icon="gears"]:hover .lpl-types__svg { transform: rotate(60deg) scale(1.08); }
  .lpl-sec--types .lpl-types__card[data-icon="crypto"]:hover .lpl-types__svg { transform: rotateY(360deg) scale(1.08); }
  .lpl-sec--types .lpl-types__card[data-icon="sports"]:hover .lpl-types__svg { animation: lpl-types-bounce 0.6s var(--lpl-ease, ease); }
  .lpl-sec--types .lpl-types__card[data-icon="poker"]:hover .lpl-types__svg { transform: rotate(6deg) scale(1.1); }
  .lpl-sec--types .lpl-types__card[data-icon="lottery"]:hover .lpl-types__svg { transform: rotate(-14deg) scale(1.1); }
  @keyframes lpl-types-bounce {
    0% { transform: translateY(0); }
    35% { transform: translateY(-5px) rotate(-10deg); }
    70% { transform: translateY(1px) rotate(4deg); }
    100% { transform: translateY(0); }
  }
}

/* stroke draw-in when the section scrolls into view; end state = fully drawn (default / no JS) */
@media (prefers-reduced-motion: no-preference) {
  .lpl-sec--types .lpl-types__svg * {
    stroke-dasharray: 1.02;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 1.1s var(--lpl-ease-io, ease) calc(var(--i, 0) * 90ms + 250ms);
  }
  html.lpl-js:not(.lpl-motion-off) .lpl-sec--types:not(.is-inview) .lpl-types__svg * {
    stroke-dashoffset: 1.02;
    transition: none;
  }
}

/* ---- tablet: 2 columns (derived: no tablet frame) ---------------------------------------- */
@media (min-width: 640px) {
  .lpl-sec--types .lpl-types__legend:not(.lpl-types__legend--plain) { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .lpl-sec--types .lpl-types__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

  .lpl-sec--types .lpl-types__card { padding: 26px 28px; border-radius: 20px; gap: 20px; }   /* 105:38530 / 105:38531 */
  .lpl-sec--types .lpl-types__card-title { font-size: 20px; line-height: 28px; letter-spacing: 0; }
  .lpl-sec--types .lpl-types__card-text { margin-top: 16px; font-size: 14px; line-height: 22px; color: var(--ty-text); }
  .lpl-sec--types .lpl-types__card--b2c .lpl-types__card-text { color: var(--ty-text); }       /* 105:38498 */
}

@media (min-width: 768px) {
  .lpl-sec--types { padding: 50px 0 100px; }

  .lpl-sec--types .lpl-types { gap: 50px; }                     /* 105:38482 */
  .lpl-sec--types .lpl-types__head,
  .lpl-sec--types .lpl-types__head-main { gap: 16px; }          /* 105:38484 */

  .lpl-sec--types .lpl-types__title {
    font-size: 40px;                                            /* derived tablet scale */
    line-height: 1.18;
    letter-spacing: -1.6px;
  }

  .lpl-sec--types .lpl-types__intro { font-size: 18px; line-height: 26px; }   /* 105:38488 */
}

/* ---- desktop: 3 x n, Figma head row --------------------------------------------------------- */
@media (min-width: 1024px) {
  .lpl-sec--types .lpl-types__head {
    flex-direction: row;
    align-items: flex-end;                                      /* 105:38483 */
    justify-content: space-between;
    gap: 32px;
  }
  .lpl-sec--types .lpl-types__head-main { flex: 0 1 827px; }    /* 105:38487 */
  .lpl-sec--types .lpl-types__title { font-size: 44px; line-height: 1.2; letter-spacing: -2px; }   /* derived 1024-1199 */

  .lpl-sec--types .lpl-types__intro { flex: 0 1 432px; text-align: right; }                       /* 105:38488 */

  /* long lede (more than ~240 chars): under the title, left aligned, so the right column does not become a tower */
  .lpl-sec--types .lpl-types__head--long { flex-direction: column; align-items: flex-start; gap: 16px; }
  .lpl-sec--types .lpl-types__head--long .lpl-types__head-main { flex: none; }
  .lpl-sec--types .lpl-types__head--long .lpl-types__intro { flex: none; max-width: 860px; text-align: left; }

  .lpl-sec--types .lpl-types__legend { padding: 20px 28px; gap: 14px 56px; }
  .lpl-sec--types .lpl-types__key-note { font-size: 14px; }

  .lpl-sec--types .lpl-types__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .lpl-sec--types .lpl-types__card-title { font-size: 24px; line-height: 34px; }               /* 105:38495 */
  .lpl-sec--types .lpl-types__card-text { margin-top: 16px; }                                 /* title -> body 36 (105:38532) */
}

@media (min-width: 1200px) {
  .lpl-sec--types .lpl-types__title {
    font-size: 60px;                                            /* 105:38487 */
    line-height: 83.6px;
    letter-spacing: -3px;
  }
}

@media (max-width: 767px) {
  .lpl-sec--types { padding: 35px 0 70px; }
  .lpl-sec--types .lpl-types__key-note { padding-left: 0; }
}

/* ---- VQA: no orphan cards ----------------------------------------------------------------------------
   Desktop: 6-track grid, every card spans 2 tracks; a last row of 2 cards spans 3 + 3 (fills the row), a lone last
   card sits centred. Tablet (2 columns): an odd last card spans the full row. */
@media (min-width: 640px) and (max-width: 1023.98px) {
  .lpl-sec--types .lpl-types__grid > .lpl-types__card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .lpl-sec--types .lpl-types__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .lpl-sec--types .lpl-types__grid > .lpl-types__card { grid-column: span 2; }
  .lpl-sec--types .lpl-types__grid > .lpl-types__card:last-child:nth-child(3n + 2) { grid-column: span 3; }
  .lpl-sec--types .lpl-types__grid > .lpl-types__card:nth-last-child(2):nth-child(3n + 1) { grid-column: span 3; }
  .lpl-sec--types .lpl-types__grid > .lpl-types__card:last-child:nth-child(3n + 1):not(:only-child) { grid-column: 3 / span 2; }
  .lpl-sec--types .lpl-types__grid > .lpl-types__card:only-child { grid-column: 2 / span 4; }
}

/* VQA: balanced title lines (no one-word last line) */
.lpl-sec--types .lpl-types__title { text-wrap: balance; }
.lpl-sec--types .lpl-types__intro { text-wrap: pretty; }

/* 2026-10-16 restore of the pre-Figma look: the old base.css centred this head ("lpl-heads-centered", !important,
   so it beat the desktop row layout above). base.css now centres only restrictions / process / turnkey, so the same
   rules live here, scoped to this section. */
.lpl-page .lpl-sec .lpl-types__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-types__head-main {
  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-types__head .lpl-lead,
.lpl-page .lpl-sec .lpl-types__head [class*="__intro"] {
  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-types__head h2 {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 100% !important;
}
.lpl-sec--types .lpl-types__cta-solo { text-align: center; max-width: 860px; margin: 0 auto; }