/*
 * License page redesign - shared base (Figma file Og4bnOnNLXTI3hU6IqX9ZE).
 * Loaded first on templates/license-page.php; every other assets/css/license/*.css depends on it.
 *
 * Contents: @font-face (self-hosted Inter), design tokens (--lpl-*), neutralisation of the legacy
 * style.css tag rules inside .lpl-*, .lpl-page / .lpl-container, and the shared primitives
 * .lpl-tag, .lpl-btn (+ --primary / --ghost), .lpl-h2, .lpl-lead.
 *
 * Page background (frame 2:3 "Frame 2147225275") is plain white (#fff, sampled); the purple
 * sections own their backgrounds (hero: image fill of node 2:4).
 */

/* ---- Fonts: Inter 100-900 variable, latin + cyrillic subsets, self-hosted --------------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../../fonts/inter-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../../fonts/inter-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../../fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Tokens (all values read from Figma; source node in the comment) --------------------- */
:root {
  --lpl-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* colours */
  --lpl-white: #fff;
  --lpl-page-bg: #fff;                         /* frame 2:3 wrapper */
  --lpl-ink: #080d0d;                          /* 2:9 / 2:90 dark label text, dot */
  --lpl-navy: #0d0c41;                         /* 2:116 H2 on light */
  --lpl-purple-tag: #640ea1;                   /* 2:114 tag pill */
  --lpl-purple-btn-text: #7612a4;              /* 2:15 / 2:304 primary button text */
  --lpl-yellow: #f5b319;                       /* 2:14 / 2:303 primary button */
  --lpl-muted: #6f7781;                        /* 2:86 card label on light */
  --lpl-muted-hero: #899698;                   /* 2:12 hero subtitle (desktop) */
  --lpl-soft-light: #e1e1e1;                   /* 2:96 card label on glass */
  --lpl-lead: #e0e0e0;                         /* 2:166 lead paragraph on purple */
  --lpl-glass: rgba(255, 255, 255, 0.06);      /* 2:6 / 2:18 / 2:20 overlay */
  --lpl-glass-strong: rgba(255, 255, 255, 0.1);/* 2:92 / 2:97 hero glass cards */
  --lpl-note-bg: rgba(4, 4, 4, 0.06);          /* 2:103 */
  --lpl-card-from: #fff;                       /* 2:85 / 2:100 gradient top */
  --lpl-card-to: #f5dfff;                      /* gradient bottom */

  /* radii */
  --lpl-r-pill: 999px;
  --lpl-r-btn: 15px;                           /* 2:14 */
  --lpl-r-card: 20px;                          /* 2:85 */
  --lpl-r-photo: 25px;                         /* 2:84 */
  --lpl-r-note: 16px;                          /* 2:103 */
  --lpl-r-nav: 22px;                           /* 2:20 */

  /* layout */
  --lpl-container: 1360px;                     /* 2:20 / 2:112 content width (side margin 280 @1920) */
  --lpl-gutter: 7px;                           /* mobile frame: 376 of 390 -> 7px each side */
  --lpl-design-w: 1920px;

  /* ТЗ "Master template - Money pages": semantic colours shared by every section (do not redefine per section) */
  --lpl-ok: #16a36a;                           /* green check / target market / active */
  --lpl-ok-soft: #e5f6ee;
  --lpl-no: #d23a5a;                           /* red cross / restricted / prohibited */
  --lpl-no-soft: #fbe9ed;
  --lpl-warn: #f5b319;                         /* partial / attention (= --lpl-yellow) */
  --lpl-b2c: #640ea1;                          /* B2C accent (= brand purple) */
  --lpl-b2c-soft: #f3e8fb;
  --lpl-b2b: #1f5fbf;                          /* B2B accent (corporate blue) */
  --lpl-b2b-soft: #e8f0fc;
  --lpl-line: #e1e2ee;                         /* hairlines on light sections */

  /* motion tokens (engine: assets/css/license/motion.css + assets/js/license/motion.js) */
  --lpl-ease: cubic-bezier(0.22, 1, 0.36, 1);  /* default ease-out for every transition/animation */
  --lpl-ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --lpl-dur-fast: 0.2s;
  --lpl-dur: 0.45s;
  --lpl-dur-slow: 0.8s;

  /* type scale shared by primitives */
  --lpl-h2-size: 60px;
  --lpl-h2-tracking: -1.8px;
  --lpl-tag-size: 14px;
}
@media (min-width: 768px) {
  :root { --lpl-gutter: 24px; }                /* derived: no tablet frame */
}
@media (max-width: 767.98px) {
  :root {
    --lpl-h2-size: 22px;                       /* mobile frame 290:196 */
    --lpl-h2-tracking: -0.22px;
    --lpl-tag-size: 10px;                      /* mobile frame 290:195 */
  }
}

/* ---- Document-level ---------------------------------------------------------------------- */
.lpl-body {
  margin: 0;
  background: var(--lpl-page-bg);
  font-family: var(--lpl-font);
  line-height: normal;
  color: var(--lpl-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
}

/*
 * Neutralise the legacy global rules of style.css (body 1.6 line-height, h1-h6 colour/margins,
 * p margin, ul li padding/margin, img margin, a:hover colour, .container width).
 * :where() keeps specificity at 0 so section classes always win, and base.css loads after style.css.
 */
:where(.lpl-header, .lpl-page, .lpl-footer) {
  font-family: var(--lpl-font);
  box-sizing: border-box;
}
:where(.lpl-header, .lpl-page, .lpl-footer) *,
:where(.lpl-header, .lpl-page, .lpl-footer) *::before,
:where(.lpl-header, .lpl-page, .lpl-footer) *::after {
  box-sizing: border-box;
}
:where(.lpl-header, .lpl-page, .lpl-footer) :is(h1, h2, h3, h4, h5, h6) {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
}
:where(.lpl-header, .lpl-page, .lpl-footer) p { margin: 0; font-size: inherit; }
:where(.lpl-header, .lpl-page, .lpl-footer) :is(ul, ol) { margin: 0; padding: 0; list-style: none; }
/* `ul li` (specificity 0,0,2) is what style.css uses for padding/margin: match it so load order decides */
:where(.lpl-header, .lpl-page, .lpl-footer) :is(ul, ol) li { margin: 0; padding: 0; }
:where(.lpl-header, .lpl-page, .lpl-footer) img { margin: 0; max-width: 100%; height: auto; }
:where(.lpl-header, .lpl-page, .lpl-footer) a { color: inherit; text-decoration: none; transition: none; }
:where(.lpl-header, .lpl-page, .lpl-footer) a:hover { color: inherit; }
:where(.lpl-header, .lpl-page, .lpl-footer) button { font: inherit; color: inherit; }
/* style.css `ol li::before { content: counter(item) "." }` painted a "1." inside the hero breadcrumb pill (specificity 0,0,3: equalled here, base loads later) */
:where(.lpl-header, .lpl-page, .lpl-footer) ol { counter-reset: none; }
:where(.lpl-header, .lpl-page, .lpl-footer) ol li::before { content: none; counter-increment: none; }
/* style.css `canvas, svg { max-width: 100% }` leaks too (would shrink the restrictions map) */
:where(.lpl-header, .lpl-page, .lpl-footer) svg { max-width: none; }
/* style.css `table { margin: 1.5em 0 }` leaked +24px into the compare table (QA) */
:where(.lpl-header, .lpl-page, .lpl-footer) table { margin: 0; }

.lpl-page {
  display: block;
  position: relative;
  overflow-x: clip;       /* decorative blobs/watermarks may bleed past the viewport */
}

/* ---- Container: 1360px content, fluid below ------------------------------------------------ */
.lpl-container {
  width: min(100% - 2 * var(--lpl-gutter), var(--lpl-container));
  margin-inline: auto;
}

.lpl-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.lpl-sr-only:focus,
.lpl-sr-only:focus-visible {
  position: fixed !important;
  top: 8px; left: 8px;
  width: auto; height: auto;
  margin: 0; padding: 10px 16px;
  overflow: visible;
  clip: auto;
  background: #fff; color: #0d0c41;
  border-radius: 8px;
  z-index: 100000;
}

/* Shared focus ring (not in Figma: required for keyboard access) */
.lpl-header :focus-visible,
.lpl-page :focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.lpl-page .lpl-btn--primary:focus-visible { outline-color: var(--lpl-purple-btn-text); }

/* ---- .lpl-tag : purple pill label ("FEE BREAKDOWN", "WHY ANJOUAN") - nodes 2:114 / 2:163 --- */
.lpl-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  padding: 12px 16px;
  border-radius: var(--lpl-r-pill);
  background: var(--lpl-purple-tag);
  color: #fff;
  font-family: var(--lpl-font);
  font-weight: 600;
  font-size: var(--lpl-tag-size);
  line-height: 20px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---- .lpl-h2 : section heading. Light-section values (2:116); .lpl-h2--dark = purple sections (2:165) */
.lpl-h2 {
  margin: 0;
  font-family: var(--lpl-font);
  font-weight: 600;
  font-size: var(--lpl-h2-size);
  line-height: normal;
  letter-spacing: var(--lpl-h2-tracking);
  color: var(--lpl-navy);
}
.lpl-h2--dark { color: #fff; }
@media (min-width: 768px) {
  .lpl-h2--dark { letter-spacing: -3px; line-height: 83.6px; }   /* node 2:165 */
}
@media (max-width: 767.98px) {
  .lpl-h2 { line-height: 29px; }                                   /* node 290:196 */
}

/* ---- .lpl-lead : intro paragraph beside headings on purple sections (2:166) -------------- */
.lpl-lead {
  margin: 0;
  font-family: var(--lpl-font);
  font-weight: 400;
  font-size: 18px;
  line-height: 26px;
  color: var(--lpl-lead);
}

/* ---- .lpl-btn : 2:14 / 2:303 (primary), 2:18 (ghost) -------------------------------------- */
.lpl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 54px;
  padding: 14px 22px;
  border: 0;
  border-radius: var(--lpl-r-btn);
  overflow: clip;
  font-family: var(--lpl-font);
  font-weight: 600;
  font-size: 16px;
  line-height: 25.2px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: filter 0.2s ease, background-color 0.2s ease;
}
.lpl-btn--primary { background: var(--lpl-yellow); color: var(--lpl-purple-btn-text); }
.lpl-btn--ghost { background: var(--lpl-glass); color: #fff; }
.lpl-btn--primary:hover { filter: brightness(1.06); color: var(--lpl-purple-btn-text); }
.lpl-btn--ghost:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
.lpl-btn__icon {
  display: block;
  flex: none;
  width: 16px;
  height: 16px;
}

/* ---- Reduced motion: one switch for every section (the motion engine also checks it) ---------- */
@media (prefers-reduced-motion: reduce) {
  .lpl-page *,
  .lpl-page *::before,
  .lpl-page *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- section head with a long lede: the side column is built for ~4 lines (Figma); longer copy drops under the title ---- */
.lpl-head--stack {
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 20px !important;
}
.lpl-head--stack > [class*="__head-main"] { max-width: none !important; }
.lpl-head--stack > .lpl-lead,
.lpl-head--stack > [class*="__lead"] {
  flex: none !important;
  max-width: 860px !important;
  text-align: left !important;
}

/* lpl-heads-centered: the section heads that Figma centres (restrictions 31:1159, process 64:2606, turnkey 82:60).
   The other sections follow their own Figma head (tag + H2 left, lead right) in their own CSS. */
.lpl-page .lpl-sec .lpl-restr__head,
.lpl-page .lpl-sec .lpl-process__head,
.lpl-page .lpl-sec .lpl-turnkey__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-restr__head-main,
.lpl-page .lpl-sec .lpl-restr__headline,
.lpl-page .lpl-sec .lpl-process__head-main,
.lpl-page .lpl-sec .lpl-process__headline,
.lpl-page .lpl-sec .lpl-turnkey__head-main,
.lpl-page .lpl-sec .lpl-turnkey__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-restr__head .lpl-lead,
.lpl-page .lpl-sec .lpl-restr__head [class*="__lead"],
.lpl-page .lpl-sec .lpl-restr__head [class*="__intro"],
.lpl-page .lpl-sec .lpl-process__head .lpl-lead,
.lpl-page .lpl-sec .lpl-process__head [class*="__lead"],
.lpl-page .lpl-sec .lpl-process__head [class*="__intro"],
.lpl-page .lpl-sec .lpl-turnkey__head .lpl-lead,
.lpl-page .lpl-sec .lpl-turnkey__head [class*="__lead"],
.lpl-page .lpl-sec .lpl-turnkey__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-restr__head h2,
.lpl-page .lpl-sec .lpl-process__head h2,
.lpl-page .lpl-sec .lpl-turnkey__head h2 {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 100% !important;
}