/*
 * License page: Pricing (slug "fees") - master template block 3.
 * Figma: desktop band 2:159 (top half: watermark 2:363, head 2:161, cards 2:167, total + CTA 2:301),
 *        mobile band 259:11000 (top half: watermark 259:11002, head 259:11004, cards 259:11010, total + CTA 259:11143).
 *
 * Background: vertical gradient #330a6e -> #8315a5 of the whole band, shared with the comparison section. The two partials
 * are separate sections, so each paints its own slice; the split colour is the linear interpolation at the split line
 * (middle of the 110px / 70px gap between the two halves), compare.css continues from the same colour:
 *   desktop: rgb(91.81 15.61 138.06)   mobile: rgb(104.17 17.31 146.55)
 * Primitives from base.css: .lpl-container, .lpl-tag, .lpl-h2/--dark, .lpl-lead, .lpl-btn/--primary, tokens.
 * base.css centres every section head (!important, earlier customer request); this section follows Figma 2:161 instead
 * (tag + H2 left, lead right), so the head rules below carry a more specific selector + !important.
 */

.lpl-sec--fees {
  --lpl-fees-top: #330a6e;
  --lpl-fees-split: rgb(91.81 15.61 138.06);
  position: relative;
  overflow: hidden;
  padding: 90px 0 55px;                         /* 2:159 py 90; half of the 110px gap to the comparison half */
  background: linear-gradient(180deg, var(--lpl-fees-top), var(--lpl-fees-split));
  font-family: var(--lpl-font);
  color: #fff;
}

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

/* top-right glow (Figma Ellipse 2, 113:38968: 509px at x1566 y-165, export bleeds 39.29% -> 909px) */
.lpl-sec--fees::after {
  content: '';
  position: absolute;
  z-index: 0;
  top: -365px;
  right: -355px;
  width: 909px;
  height: 909px;
  background: url('../../img/license/fees-ellipse-2.svg') center / 100% 100% no-repeat;
  pointer-events: none;
}

/* background word "COSTS" (2:363): Inter Bold 500 / 19.6, gradient text rgba(255,255,255,.07) -> .01,
   box x-117 y47 2146x482 in the 1920 frame, text centred in the box */
.lpl-fees__mark {
  position: absolute;
  z-index: 0;
  top: 47px;
  left: calc(50% - 1077px);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2146px;
  height: 482px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.01));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-family: var(--lpl-font);
  font-size: 500px;
  font-weight: 700;
  line-height: 19.6px;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

.lpl-fees__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 60px;                                     /* 2:160 gap 60 (head -> cards -> total) */
}

/* ---------- head (2:161): tag + H2 left (716), lead right (525, right-aligned), bottoms aligned ---------- */
.lpl-page .lpl-sec.lpl-sec--fees .lpl-fees__head {
  display: flex !important;                      /* own layout: base.css no longer flexes every section head */
  flex-direction: row !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 48px !important;
  text-align: left !important;
}

.lpl-page .lpl-sec.lpl-sec--fees .lpl-fees__head-main {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 16px;                                     /* 2:162 */
  flex: 0 1 716px !important;
  width: auto !important;
  max-width: 716px !important;
  min-width: 0;
  text-align: left !important;
}

.lpl-page .lpl-sec.lpl-sec--fees .lpl-fees__head h2 {
  margin: 0 !important;
  max-width: 716px !important;
  text-align: left !important;
}

.lpl-page .lpl-sec.lpl-sec--fees .lpl-fees__head .lpl-fees__lead {
  flex: 0 1 525px !important;
  width: auto !important;
  max-width: 525px !important;
  margin: 0 !important;
  text-align: right !important;                  /* 2:166 */
}

/* ---------- cards (2:167): 3 x 440, gap 20 ---------- */
.lpl-fees__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* glass card 2:168 / 2:248 */
.lpl-fees__card {
  --fees-text: #e0e0e0;
  --fees-title: #fff;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 36px;                                     /* 2:169 */
  min-width: 0;
  min-height: 620px;                             /* 2:167 h620 */
  margin: 0;
  padding: 36px 28px;                            /* content at x28 y36, 384 wide */
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(153, 153, 153, 0.2));
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  color: var(--fees-text);
  list-style: none;
}

/* head row 2:170: icon tile 68 + title, gap 24 */
.lpl-fees__card-head {
  display: flex;
  align-items: center;
  gap: 24px;
}

.lpl-fees__icon {
  position: relative;
  flex: none;
  width: 68px;
  height: 68px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);        /* 2:171 Overlay */
  color: #fff;
}

.lpl-fees__icon picture,
.lpl-fees__icon img { display: block; }
.lpl-fees__icon img { position: absolute; max-width: none; }
/* icon frames inside the 68 tile: 2:172 gov 52x50 @8,9 ; 2:212 formation 48 @10,10 ; 2:252 annual 60 @4,4 */
.lpl-fees__icon--gov img { left: 8px; top: 9px; width: 52px; height: 50px; }
.lpl-fees__icon--formation img { left: 10px; top: 10px; width: 48px; height: 48px; }
.lpl-fees__icon--annual img { left: 4px; top: 4px; width: 60px; height: 60px; }
/* office / support (2026-10-20, drawn on the 48px canvas of formation, white stroke like gov / annual) */
.lpl-fees__icon--office img,
.lpl-fees__icon--support img { left: 10px; top: 10px; width: 48px; height: 48px; }
/* own icon uploaded in the admin (2026-10-20): centred in the tile, 52px desktop / 32px mobile, kept as uploaded */
.lpl-fees__icon--own img { left: 50%; top: 50%; width: 52px; height: 52px; object-fit: contain; transform: translate(-50%, -50%); }

.lpl-fees__card-title {
  flex: 0 1 272px;                               /* 2:178 w272 */
  min-width: 0;
  max-width: 272px;
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  line-height: 34px;
  color: var(--fees-title);
}

/* body 2:179: intro, gap 34, list */
.lpl-fees__card-body {
  display: flex;
  flex-direction: column;
  gap: 34px;
  min-width: 0;
}

/* intro 2:180 / 2:181 (paragraph column, no gap); also carries the card price line (copywriter text, no Figma price slot) */
.lpl-fees__intro {
  display: flex;
  flex-direction: column;
  font-size: 14px;
  line-height: 22px;
  color: var(--fees-text);
}
.lpl-fees__intro p { margin: 0; }

.lpl-fees__list {
  display: flex;
  flex-direction: column;
  gap: 22px;                                     /* 2:182 */
  margin: 0;
  padding: 0;
  list-style: none;
}

.lpl-fees__item {
  display: flex;
  align-items: center;
  gap: 14px;                                     /* 2:183 */
  margin: 0;
  padding: 0;
  font-size: 14px;
  line-height: 22px;
  color: var(--fees-text);
}

/* check icon (2:184): both Figma exports stacked, the dark one (2:224, light card) fades in on the light state */
.lpl-fees__chk {
  position: relative;
  display: block;
  flex: none;
  width: 24px;
  height: 24px;
}
.lpl-fees__chk img { position: absolute; inset: 0; display: block; width: 24px; height: 24px; }
.lpl-fees__chk-dark { opacity: 0; }

/* ---------- light state = Figma 2:208 under the cursor (Polygon 2:364): hover / keyboard focus, desktop pointer only.
   Default: three glass cards (2:168 / 2:248). Mobile / touch (259:11000): glass only. The gradient of 2:208 cannot be
   transitioned, so it sits on ::before and fades in; colours, icon filters and the two check exports cross-fade,
   nothing changes size (no layout shift). */
.lpl-fees__card::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, #fff, #f5dfff);
  opacity: 0;
  pointer-events: none;
}
.lpl-fees__card > * { position: relative; z-index: 1; }
.lpl-fees__card:focus { outline: none; }
.lpl-fees__card:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@media (min-width: 768px) {
  /* glass default: the formation export is black (made for the light card), gov / annual are white */
  .lpl-fees__icon--formation img { filter: invert(1); }
}

@media (min-width: 768px) and (hover: hover) {
  .lpl-fees__card::before,
  .lpl-fees__chk img { transition: opacity var(--lpl-dur, 0.35s) var(--lpl-ease, ease); }
  .lpl-fees__card-title,
  .lpl-fees__intro,
  .lpl-fees__item { transition: color var(--lpl-dur, 0.35s) var(--lpl-ease, ease); }
  .lpl-fees__icon { transition: background-color var(--lpl-dur, 0.35s) var(--lpl-ease, ease); }
  .lpl-fees__icon img { transition: filter var(--lpl-dur, 0.35s) var(--lpl-ease, ease); }

  .lpl-fees__card:hover,
  .lpl-fees__card:focus-visible {
    --fees-text: #000;
    --fees-title: #000;
  }
  .lpl-fees__card:hover::before,
  .lpl-fees__card:focus-visible::before { opacity: 1; }
  .lpl-fees__card:hover .lpl-fees__icon,
  .lpl-fees__card:focus-visible .lpl-fees__icon { background-color: #f4e0ff; }          /* 2:211 */
  .lpl-fees__card:hover .lpl-fees__icon--gov img,
  .lpl-fees__card:hover .lpl-fees__icon--annual img,
  .lpl-fees__card:hover .lpl-fees__icon--office img,
  .lpl-fees__card:hover .lpl-fees__icon--support img,
  .lpl-fees__card:focus-visible .lpl-fees__icon--gov img,
  .lpl-fees__card:focus-visible .lpl-fees__icon--annual img,
  .lpl-fees__card:focus-visible .lpl-fees__icon--office img,
  .lpl-fees__card:focus-visible .lpl-fees__icon--support img { filter: brightness(0); }
  .lpl-fees__card:hover .lpl-fees__icon--formation img,
  .lpl-fees__card:focus-visible .lpl-fees__icon--formation img { filter: none; }
  .lpl-fees__card:hover .lpl-fees__chk-dark,
  .lpl-fees__card:focus-visible .lpl-fees__chk-dark { opacity: 1; }
  .lpl-fees__card:hover .lpl-fees__chk-light,
  .lpl-fees__card:focus-visible .lpl-fees__chk-light { opacity: 0; }

  /* one light card at a time: while the pointer is over another card, a keyboard-focused card stays glass */
  .lpl-fees__cards:has(.lpl-fees__card:hover) .lpl-fees__card:focus-visible:not(:hover) { --fees-text: #e0e0e0; --fees-title: #fff; }
  .lpl-fees__cards:has(.lpl-fees__card:hover) .lpl-fees__card:focus-visible:not(:hover)::before { opacity: 0; }
  .lpl-fees__cards:has(.lpl-fees__card:hover) .lpl-fees__card:focus-visible:not(:hover) .lpl-fees__icon { background-color: rgba(255, 255, 255, 0.06); }
  .lpl-fees__cards:has(.lpl-fees__card:hover) .lpl-fees__card:focus-visible:not(:hover) .lpl-fees__icon--gov img,
  .lpl-fees__cards:has(.lpl-fees__card:hover) .lpl-fees__card:focus-visible:not(:hover) .lpl-fees__icon--annual img,
  .lpl-fees__cards:has(.lpl-fees__card:hover) .lpl-fees__card:focus-visible:not(:hover) .lpl-fees__icon--office img,
  .lpl-fees__cards:has(.lpl-fees__card:hover) .lpl-fees__card:focus-visible:not(:hover) .lpl-fees__icon--support img { filter: none; }
  .lpl-fees__cards:has(.lpl-fees__card:hover) .lpl-fees__card:focus-visible:not(:hover) .lpl-fees__icon--formation img { filter: invert(1); }
  .lpl-fees__cards:has(.lpl-fees__card:hover) .lpl-fees__card:focus-visible:not(:hover) .lpl-fees__chk-dark { opacity: 0; }
  .lpl-fees__cards:has(.lpl-fees__card:hover) .lpl-fees__card:focus-visible:not(:hover) .lpl-fees__chk-light { opacity: 1; }

  /* currency colour (below): deep tones on the light state, back to the glass tones for the "other" focused card */
  .lpl-fees__cur,
  .lpl-fees__m { transition: color var(--lpl-dur, 0.35s) var(--lpl-ease, ease), background-color var(--lpl-dur, 0.35s) var(--lpl-ease, ease), border-color var(--lpl-dur, 0.35s) var(--lpl-ease, ease); }
  .lpl-fees__card::after { transition: box-shadow var(--lpl-dur, 0.35s) var(--lpl-ease, ease); }
  .lpl-fees__card:hover,
  .lpl-fees__card:focus-visible { --cur-usd: #12784f; --cur-eur: #2558c4; }
  .lpl-fees__card--usd:hover,
  .lpl-fees__card--usd:focus-visible { --cur-text: #12784f; --cur-line: #1f9d6b; --cur-ring: rgba(31, 157, 107, 0.4); --cur-bg: rgba(31, 157, 107, 0.1); --cur-bd: rgba(31, 157, 107, 0.45); }
  .lpl-fees__card--eur:hover,
  .lpl-fees__card--eur:focus-visible { --cur-text: #2558c4; --cur-line: #2f6fdf; --cur-ring: rgba(47, 111, 223, 0.38); --cur-bg: rgba(47, 111, 223, 0.09); --cur-bd: rgba(47, 111, 223, 0.42); }
  .lpl-fees__cards:has(.lpl-fees__card:hover) .lpl-fees__card:focus-visible:not(:hover) { --cur-usd: #6ee7b3; --cur-eur: #b3cdff; }
  .lpl-fees__cards:has(.lpl-fees__card:hover) .lpl-fees__card--usd:focus-visible:not(:hover) { --cur-text: #6ee7b3; --cur-line: #2fbf86; --cur-ring: rgba(110, 231, 179, 0.35); --cur-bg: rgba(31, 157, 107, 0.24); --cur-bd: rgba(110, 231, 179, 0.5); }
  .lpl-fees__cards:has(.lpl-fees__card:hover) .lpl-fees__card--eur:focus-visible:not(:hover) { --cur-text: #b3cdff; --cur-line: #5b8ff2; --cur-ring: rgba(143, 180, 255, 0.35); --cur-bg: rgba(47, 111, 223, 0.28); --cur-bd: rgba(143, 180, 255, 0.55); }
}

/* ---------- currency colour (2026-10-20, card field "currency"): USD = green, EUR = blue, only where set.
   Glass card: light tones (contrast >= 4.5 on the glass over the purple band); light state: deep tones on #fff / #f5dfff
   (hover rules above). Accent = 1px ring + 3px top line on ::after (above the light-state ::before, under the content),
   chip next to the title, USD / EUR amounts in the intro, the tick list and the total line. */
.lpl-fees__card--usd { --cur-text: #6ee7b3; --cur-line: #2fbf86; --cur-ring: rgba(110, 231, 179, 0.35); --cur-bg: rgba(31, 157, 107, 0.24); --cur-bd: rgba(110, 231, 179, 0.5); }
.lpl-fees__card--eur { --cur-text: #b3cdff; --cur-line: #5b8ff2; --cur-ring: rgba(143, 180, 255, 0.35); --cur-bg: rgba(47, 111, 223, 0.28); --cur-bd: rgba(143, 180, 255, 0.55); }

.lpl-fees__card--usd::after,
.lpl-fees__card--eur::after {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 3px 0 var(--cur-line), inset 0 0 0 1px var(--cur-ring);
  pointer-events: none;
}

.lpl-fees__cur {
  flex: none;
  align-self: flex-start;
  margin-left: auto;
  padding: 3px 9px;
  border: 1px solid var(--cur-bd);
  border-radius: 999px;
  background: var(--cur-bg);
  color: var(--cur-text);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.06em;
}

/* desktop: the chip sits in the card's top-right padding (head row starts 36px down), so the title keeps its 272px */
@media (min-width: 768px) {
  .lpl-fees__card-head { position: relative; }
  .lpl-fees__cur { position: absolute; top: -26px; right: -14px; }
}

.lpl-fees__m { font-weight: 600; white-space: nowrap; }
.lpl-fees__m--usd { color: var(--cur-usd, #6ee7b3); }
.lpl-fees__m--eur { color: var(--cur-eur, #b3cdff); }

/* ---------- total + CTA (2:301): total line left, button right, no plate ---------- */
.lpl-fees__plate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px 40px;
}

/* 2:302: Inter 18 / 26, #e0e0e0. Total line, then (copy order) the CTA lead and the "Paid Separately" note: copywriter
   lines without their own Figma slot, same text token, one paragraph per line */
.lpl-fees__plate-text {
  flex: 0 1 1000px;
  min-width: 0;
  max-width: 1000px;
  font-size: 18px;
  font-weight: 400;
  line-height: 26px;
  color: #e0e0e0;
  overflow-wrap: anywhere;
}
.lpl-fees__plate-text p,
.lpl-fees__plate-text h3 { margin: 0; font: inherit; color: inherit; }

/* only a button (no text): it keeps its Figma place at the right end of the row */
.lpl-fees__plate--bare { justify-content: flex-end; }

/* ---------- grey block "paid separately" (2026-10-20): under the total + button, on the dark band.
   Overlay tone of the icon tile (2:171), card radius, text tokens of the card intro / list. */
.lpl-fees__sep {
  padding: 24px 28px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.06);
  color: #e0e0e0;
  font-size: 14px;
  line-height: 22px;
}
.lpl-fees__plate + .lpl-fees__sep { margin-top: -36px; }    /* 24px under the total row instead of the 60px section gap */
.lpl-fees__sep-title {
  margin: 0 0 8px;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}
.lpl-fees__sep-text { margin: 0; }
.lpl-fees__sep-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.lpl-fees__sep-list li { position: relative; margin: 0; padding-left: 18px; }
.lpl-fees__sep-list li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.7;
}

/* 2:303: base .lpl-btn (54h, 14/22 padding, radius 15, gap 12, Inter 600 16 / 25.2, #f5b319 / #7612a4) */
.lpl-fees__btn {
  flex: 0 1 auto;
  max-width: 520px;
  white-space: normal;                           /* a sentence-long page label wraps instead of overflowing */
  text-align: left;
}

.lpl-fees__chev { display: block; flex: none; width: 16px; height: 16px; transition: transform var(--lpl-dur) var(--lpl-ease); }
@media (hover: hover) {
  .lpl-fees__btn:hover .lpl-fees__chev { transform: translateX(4px); }
}

/* Figma 2:162/2:309: the H2 text box is 176px for two 83.6px lines (text centred, +4.5px) and the left column overflows the
   216px head row by 15.5px; the lead (right) sits on the row bottom, the next block starts 60px under the row */
@media (min-width: 1000px) {
  .lpl-page .lpl-sec.lpl-sec--fees .lpl-fees__head h2 { padding-top: 4.5px !important; }
  .lpl-page .lpl-sec.lpl-sec--fees .lpl-fees__head-main { margin-bottom: -15.5px !important; }
}

/* ---------- responsive ---------- */
@media (min-width: 1000px) {
  .lpl-fees__cards[data-count='2'] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lpl-fees__cards[data-count='1'] { grid-template-columns: minmax(0, 440px); }
}

/* derived (no tablet frame): one card per row below 1000px, head stacked */
@media (max-width: 999px) {
  .lpl-fees__cards { grid-template-columns: minmax(0, 1fr); }
  .lpl-fees__card { min-height: 0; }
  .lpl-page .lpl-sec.lpl-sec--fees .lpl-fees__head { flex-direction: column !important; align-items: stretch !important; gap: 20px !important; }
  .lpl-page .lpl-sec.lpl-sec--fees .lpl-fees__head-main { flex: none !important; max-width: none !important; }
  .lpl-page .lpl-sec.lpl-sec--fees .lpl-fees__head h2 { max-width: none !important; }
  .lpl-page .lpl-sec.lpl-sec--fees .lpl-fees__head .lpl-fees__lead { flex: none !important; max-width: none !important; text-align: left !important; }
}

/* mobile frame 259:11000 */
@media (max-width: 767.98px) {
  .lpl-sec--fees {
    --lpl-fees-split: rgb(104.17 17.31 146.55);
    padding: 90px 0 35px;                        /* py 90; half of the 70px gap */
  }

  .lpl-sec--fees::after { top: -536px; right: -536px; }   /* 259:11205 x217 y-336 */

  /* upper part of Ellipse 1 (259:11001: x-367 y1616, 946px export from x-567 y1416); the rest is in compare.css */
  .lpl-sec--fees::before {
    content: '';
    position: absolute;
    z-index: 0;
    left: -567px;
    bottom: -535px;
    width: 946px;
    height: 946px;
    background: url('../../img/license/fees-ellipse-1.svg') center / 100% 100% no-repeat;
    pointer-events: none;
  }

  /* 259:11002: 117px, opacity .7, box x-47 y20.84 491x78.88 */
  .lpl-fees__mark {
    top: 20.84px;
    left: calc(50% - 242px);
    width: 491px;
    height: 78.88px;
    font-size: 117px;
    opacity: 0.7;
  }

  .lpl-fees__inner { gap: 36px; }                /* 259:11003 */

  .lpl-page .lpl-sec.lpl-sec--fees .lpl-fees__head { gap: 20px !important; }        /* 259:11004 */
  .lpl-page .lpl-sec.lpl-sec--fees .lpl-fees__head .lpl-fees__lead { font-size: 12px; line-height: 21px; }   /* 259:11009 */

  .lpl-fees__cards { gap: 20px; }

  /* 259:11011: p 22, head row 44, gap 36 */
  .lpl-fees__card { gap: 36px; padding: 22px; border-radius: 20px; }
  .lpl-fees__card-head { gap: 24px; min-height: 44px; }
  .lpl-fees__icon { width: 44px; height: 44px; border-radius: 12px; }
  .lpl-fees__icon--gov img { left: 0; top: 1px; width: 43px; height: 42px; }          /* 259:11015 */
  .lpl-fees__icon--formation img { left: 1px; top: 1px; width: 42px; height: 42px; }  /* 259:11255 */
  .lpl-fees__icon--annual img { left: 5px; top: 3.5px; width: 32px; height: 35px; }   /* 259:11302 */
  .lpl-fees__icon--own img { width: 32px; height: 32px; }
  .lpl-fees__icon--office img,
  .lpl-fees__icon--support img { left: 1px; top: 1px; width: 42px; height: 42px; }   /* 42px canvas like 259:11255 */
  /* 259:11021: one line, the head row may run 12px into the right padding (row 338 in a 326 box) */
  .lpl-fees__card-title { flex: 1 1 auto; max-width: none; margin-right: -12px; font-size: 16px; line-height: 34px; }

  .lpl-fees__card-body { gap: 21px; }            /* 259:11022 */
  .lpl-fees__intro { font-size: 12px; line-height: 21px; }
  .lpl-fees__list { gap: 12px; }                 /* 259:11025 */
  .lpl-fees__item { font-size: 12px; line-height: 21px; }

  /* 259:11143: column, gap 16; total 14 / 26; button full width, 14px */
  .lpl-fees__plate { flex-direction: column; align-items: stretch; gap: 16px; }
  .lpl-fees__plate-text { flex: none; font-size: 14px; line-height: 26px; }
  .lpl-fees__btn { width: 100%; max-width: none; font-size: 14px; justify-content: center; text-align: center; }

  /* in the 22px top padding too, so the one-line title of 259:11021 keeps its width */
  .lpl-fees__card-head { position: relative; }
  .lpl-fees__cur { position: absolute; top: -17px; right: -12px; padding: 1px 7px; font-size: 10px; line-height: 14px; }
  .lpl-fees__sep { padding: 18px 22px; font-size: 12px; line-height: 21px; }
  .lpl-fees__plate + .lpl-fees__sep { margin-top: -20px; }  /* 16px, like the 259:11143 gap */
  .lpl-fees__sep-title { margin-bottom: 6px; font-size: 14px; line-height: 22px; }
  .lpl-fees__sep-list li::before { top: 8px; }
}