@charset "UTF-8";
/* -------------------------------------------

Name: 		Plax
Version:    1.0
Developer:	Nazar Miller (millerDigitalDesign)
Portfolio:  https://themeforest.net/user/millerdigitaldesign/portfolio?ref=MillerDigitalDesign

p.s. I am available for Freelance hire (UI design, web development). email: miller.themes@gmail.com

------------------------------------------- */
/*--------------------------------------------

1. common
    - main
    - typography
    - breadcrumbs
    - button
    - frames
    - spaces
2. components
    - preloader
    - scrollbar
    - back to top
    - top panel
    - top menu
    - menu button
    - banner
    - content list
    - brands
    - facts
    - testimonials
    - accordion
    - illustrations
    - steps
    - icon box
    - team
    - vacancie
    - blog
    - comments
    - form
    - text lists
    - price
    - footer

--------------------------------------------*/
/* -------------------------------------------
   Tokens remapped to the InnovestX Design Language System (DLS).
   Values come from dls-tokens.css — do not invent.
   Variable NAMES are kept so all downstream rules inherit the DLS palette.
------------------------------------------- */
/* Font family — Graphik TH is the DLS's only UI typeface */
/* Accent / brand */
/* was coral #F27457 -> Lavender 500 #5656f1 (brand) */
/* was teal  #03A6A6 -> Cyanblue 500 #0080ff (info/links) */
/* was       #A0CDCD -> Lavender 200 #b1b1f9 */
/* was       #F2FAFA -> Lavender 50  #eeeefe (light surface) */
/* Neutrals (Gunmetal ramp) */
/* was #0D5152 -> Gunmetal 800 #1c1e22 (primary text/heading) */
/* was #898D96 -> Gunmetal 250 #89909f (secondary text) */
/* was #C4C4C4 -> Gunmetal 50  #c1c5cd (borders/disabled) */
/* tint of Gunmetal 250 */
/* white (screen bg) */
/* was #1B1717 -> Gunmetal 850 #101113 */
/* was #272626 -> Gunmetal 700 #292c32 */
/* Gradients rebuilt on the Lavender brand ramp */
/* -------------------------------------------

main

------------------------------------------- */
html,
body {
  padding: 0;
  margin: 0;
  font-family: "Graphik TH", -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

*,
*:before,
*:after {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.mil-wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
}

/* The top panel is position:fixed and out of flow, so the scroll content must
   reserve its height or every page's first content renders underneath it. The
   offset tracks the header's responsive heights (130px → 80px at ≤1200px).
   #1276 — .mil-utility-bar is a separate fixed strip that Header renders as
   #smooth-content's *descendant* (not a sibling — see the wider layout note
   at .mil-utility-bar below), so a sibling combinator can't reach this
   padding from the bar. :has() is the only presence-conditional selector
   that can look down the tree from here, and it's fine to depend on: it's
   broadly supported in every target browser as of this project's timeline. */
#smooth-content {
  padding-top: 130px;
}
#smooth-content:has(.mil-utility-bar) {
  padding-top: 170px;
}
@media (max-width: 1400px) {
  #smooth-content {
    padding-top: 80px;
  }
  #smooth-content:has(.mil-utility-bar) {
    padding-top: 120px;
  }
}

.mil-relative {
  position: relative;
}

/* -------------------------------------------

typography

------------------------------------------- */
* {
  font-family: "Graphik TH", -apple-system, "Helvetica Neue", Arial, sans-serif;
  color: rgb(28, 30, 34);
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-weight: 500;
  font-family: "Graphik TH", -apple-system, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.3;
  /* Thai stacks vowel and tone marks above/below the base consonant and relies
     on the glyph's own side bearings to keep them clear of the neighbouring
     character. Negative tracking pulls those bearings in and the marks collide.
     Production ships zero tracking site-wide for the same reason. */
  letter-spacing: normal;
}
h1 span,
h2 span,
h3 span,
h4 span,
h5 span,
h6 span,
.h1 span,
.h2 span,
.h3 span,
.h4 span,
.h5 span,
.h6 span {
  font-weight: 500;
  font-family: "Graphik TH", -apple-system, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.3;
  letter-spacing: normal;
}

/* Display/h1/h2 scale tracks production (h1 = 55px). The inherited vendor scale
   was ~40% larger — a single mil-display heading occupied 575px of vertical
   height, pushing everything below the fold. mil-display keeps a touch more
   line-height than the vendor's 1.15 so Thai marks aren't clipped by the box. */
h1,
.h1 {
  font-size: 55px;
}
h1.mil-display,
.h1.mil-display {
  font-size: 68px;
  line-height: 1.2;
}
@media screen and (max-width: 992px) {
  h1,
  .h1 {
    font-size: 40px;
  }
  h1.mil-display,
  .h1.mil-display {
    font-size: 44px;
  }
}

h2,
.h2 {
  font-size: 40px;
}
@media screen and (max-width: 992px) {
  h2,
  .h2 {
    font-size: 30px;
  }
}

h4,
.h4 {
  font-size: 30px;
  letter-spacing: normal;
}
@media screen and (max-width: 992px) {
  h4,
  .h4 {
    font-size: 26px;
  }
}

h5,
.h5 {
  font-size: 22px;
  letter-spacing: normal;
}

h6,
.h6 {
  font-size: 18px;
  letter-spacing: normal;
}

.mil-text-xs {
  font-size: 14px;
}

.mil-text-s {
  font-size: 18px;
}
@media screen and (max-width: 992px) {
  .mil-text-s {
    font-size: 16px;
  }
}

.mil-text-m {
  font-size: 18px;
}
@media screen and (max-width: 992px) {
  .mil-text-m {
    font-size: 16px;
  }
}

.mil-text-xl {
  font-size: 32px;
}

a {
  text-decoration: none;
  color: inherit;
}

.mil-dark {
  color: rgb(28, 30, 34);
}
.mil-dark * {
  color: rgb(28, 30, 34);
}

.mil-light {
  color: rgb(238, 238, 254);
}

.mil-soft {
  color: rgb(137, 144, 159);
}
.mil-soft * {
  color: rgb(137, 144, 159);
}

.mil-pale {
  color: rgb(193, 197, 205);
}

.mil-pale-2 {
  color: rgb(137, 144, 159);
}

.mil-dark-soft {
  color: rgb(177, 177, 249);
}
.mil-dark-soft * {
  color: rgb(177, 177, 249);
}

.mil-accent {
  color: rgb(86, 86, 241);
}

.mil-text-right {
  text-align: right;
}

.mil-text-center {
  text-align: center;
}

@media (max-width: 1200px) {
  .mil-sm-text-center {
    text-align: center;
  }
}

@media (max-width: 1200px) {
  .mil-sm-text-left {
    text-align: left;
  }
}

blockquote {
  font-size: 24px;
}
blockquote.mil-center {
  text-align: center;
}
blockquote img {
  margin: 0 auto;
  width: 60px;
  height: 60px;
  object-fit: cover;
  object-position: top;
  border-radius: 50%;
}
blockquote.mil-with-bg {
  background-color: rgb(238, 238, 254);
  border-radius: 40px;
  padding: 60px 30px;
}
blockquote.mil-with-bg-2 {
  background: linear-gradient(0deg, #d0d0fb 0%, #eeeefe 100%);
  border-radius: 40px;
  padding: 60px 30px;
}
blockquote.mil-lg {
  padding: 80px;
}
@media screen and (max-width: 992px) {
  blockquote.mil-lg {
    padding: 60px 30px;
  }
}
blockquote .mil-customer {
  display: flex;
  align-items: center;
}
blockquote .mil-customer img {
  margin-right: 15px;
  margin-left: 0;
}
blockquote svg.mil-accent path {
  fill: rgb(86, 86, 241);
}
blockquote.mil-dark {
  background: linear-gradient(0deg, #2f2f85 0%, #3d3dab 100%);
}

@media (max-width: 1200px) {
  br {
    display: none;
  }
}

.mil-hr {
  background-color: rgb(193, 197, 205);
  height: 1px;
  width: 100%;
}

.mil-text-img img {
  width: 100px;
  display: inline;
}
@media (max-width: 992px) {
  .mil-text-img img {
    width: 70px;
  }
}

.mil-text-gradient {
  color: rgb(255, 255, 255);
}

@supports (--css: variables) {
  .mil-text-gradient {
    background: linear-gradient(to right, rgb(177, 177, 249), rgb(238, 238, 254));
    color: transparent;
    background-clip: text;
  }
}
.mil-text-gradient-2 {
  color: rgb(28, 30, 34);
}

@supports (--css: variables) {
  .mil-text-gradient-2 {
    background: linear-gradient(to right, rgb(28, 30, 34), rgb(0, 128, 255));
    color: transparent;
    background-clip: text;
  }
}
.mil-text-gradient-3 {
  color: rgb(28, 30, 34);
}

@supports (--css: variables) {
  .mil-text-gradient-3 {
    background: linear-gradient(to right, rgb(28, 30, 34), 50%, rgba(28, 30, 34, 0.8));
    color: transparent;
    background-clip: text;
  }
}
img,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  max-width: 100%;
}

/* -------------------------------------------

breadcrumbs

------------------------------------------- */
.mil-breadcrumbs {
  display: flex;
}
.mil-breadcrumbs.mil-center {
  justify-content: center;
}
.mil-breadcrumbs li {
  list-style-type: none;
}
.mil-breadcrumbs li:after {
  content: "|";
  margin: 0 15px;
  color: rgb(177, 177, 249);
}
.mil-breadcrumbs li a {
  font-family: "Graphik TH", -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
}
.mil-breadcrumbs li a:hover {
  color: rgb(86, 86, 241);
}
.mil-breadcrumbs li:last-child {
  opacity: 0.4;
  cursor: not-allowed;
}
.mil-breadcrumbs li:last-child a {
  pointer-events: none;
}
.mil-breadcrumbs li:last-child:after {
  display: none;
  margin: 0;
}
.mil-breadcrumbs.mil-pub-info li {
  opacity: 0.4;
  cursor: default;
}
.mil-breadcrumbs.mil-pub-info li a {
  pointer-events: none;
}

/* -------------------------------------------

buttons

------------------------------------------- */
.mil-btn {
  border: none;
  white-space: nowrap;
  background-color: rgb(86, 86, 241);
  border-radius: 9999px; /* DLS: buttons are always full pills */
  font-family: "Graphik TH", -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-weight: 500; /* DLS: button label = Medium 500 */
  color: rgb(255, 255, 255);
  transition: 0.2s cubic-bezier(0, 0, 0.3642, 1);
  display: flex;
  justify-content: center;
  align-items: center;
  display: inline-flex;
  /* NC-345 — base sizing so a variant-less .mil-btn (CMS-authored in-content
     buttons carry no .mil-sm/.mil-m) never hugs its text (~29px tall was
     measured). The size variants below override both values. */
  padding: 14px 32px;
  min-height: 48px;
}
.mil-btn.mil-fw {
  width: 100%;
}
.mil-btn.mil-sm {
  padding: 0 20px;
  height: 48px;
  font-size: 16px;
}
.mil-btn.mil-m {
  padding: 0 30px;
  height: 56px;
  font-size: 16px;
}
.mil-btn.mil-md {
  padding: 0 30px;
  height: 72px;
  font-size: 16px;
}
@media screen and (max-width: 992px) {
  .mil-btn.mil-md {
    padding: 0 25px;
    height: 62px;
  }
}
.mil-btn.mil-border {
  color: rgb(86, 86, 241);
  border: solid 1px rgb(86, 86, 241);
  background-color: transparent;
}
/* The secondary pill (footer App Store, header Login). It used to be
   #eeeefe on #eeeefe — the exact background of .mil-footer-with-bg — with
   #89909f label text, so in the footer it was invisible and everywhere else it
   read as disabled. White fill + accent label + accent hairline gives it a real
   edge on both the tinted footer and the white header, and lifts the label to
   ~5.6:1 against its own fill. box-sizing is border-box globally, so the
   hairline doesn't change the 48px pill height. */
.mil-btn.mil-light {
  background-color: rgb(255, 255, 255);
  color: rgb(86, 86, 241);
  border: 1px solid rgba(86, 86, 241, 0.4);
}
/* .mil-btn:hover is a brightness() filter, which is a no-op on white. */
.mil-btn.mil-light:hover {
  background-color: rgb(238, 238, 254);
  border-color: rgb(86, 86, 241);
}
.mil-btn.mil-grey {
  background-color: rgb(193, 197, 205);
  color: rgb(255, 255, 255);
}
.mil-btn.mil-transp {
  background-color: transparent;
  color: rgb(193, 197, 205);
}
.mil-btn.mil-add-arrow:after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f061";
  margin-left: 15px;
  font-size: 12px;
  transition: 0.2s cubic-bezier(0, 0, 0.3642, 1);
}
.mil-btn.mil-add-play:after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f04b";
  margin-left: 15px;
  font-size: 12px;
  transition: 0.2s cubic-bezier(0, 0, 0.3642, 1);
}
.mil-btn:hover {
  filter: brightness(110%);
}
.mil-btn:hover.mil-add-arrow:after {
  transform: translateX(3px);
}

.mil-buttons-frame {
  display: flex;
  justify-content: flex-start;
}
.mil-buttons-frame a {
  margin-right: 15px;
}
.mil-buttons-frame a:last-child {
  margin-right: 0;
}
@media screen and (max-width: 1200px) {
  .mil-buttons-frame {
    justify-content: center;
  }
}
@media screen and (max-width: 992px) {
  .mil-buttons-frame {
    flex-direction: column;
    align-items: center;
  }
  .mil-buttons-frame a {
    margin-right: 0;
    margin-bottom: 15px;
  }
  .mil-buttons-frame a:last-child {
    margin-bottom: 0;
  }
}
.mil-buttons-frame.mil-center {
  justify-content: center;
}

.mil-adaptive-right {
  float: right;
}
@media screen and (max-width: 1200px) {
  .mil-adaptive-right {
    float: inherit;
  }
}

.mil-link {
  font-family: "Graphik TH", -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  /* No negative tracking — it crushes Thai vowel and tone marks. The former
     `-2%` was invalid CSS anyway (letter-spacing takes a length, not a
     percentage), so browsers were already dropping it. */
  letter-spacing: normal;
}

/* -------------------------------------------

frames

------------------------------------------- */
.mil-out-frame {
  overflow: hidden;
  border-radius: 40px;
  padding-left: 100px;
  padding-right: 100px;
  transform: translateX(-100px);
  background-color: rgb(238, 238, 254);
  background-size: cover;
  background-position: left;
  width: calc(100% + 200px);
}
.mil-out-frame.mil-bg-1 {
  background: linear-gradient(0deg, #d0d0fb 0%, #eeeefe 100%);
}
.mil-out-frame.mil-bg-2 {
  background: linear-gradient(180deg, #5656f1 0%, #8e8ef6 100%);
}
.mil-out-frame.mil-bg-3 {
  background: linear-gradient(0deg, #2f2f85 0%, #3d3dab 100%);
}
.mil-out-frame.mil-bg-4 {
  background-color: rgb(41, 44, 50);
}
.mil-out-frame.mil-visible {
  overflow: visible;
}
@media (max-width: 1536px) {
  .mil-out-frame {
    border-radius: 0;
  }
}
.mil-out-frame.mil-image {
  background-image: url(../img/home-2/bg.png);
  background-size: cover;
}
.mil-out-frame.mil-image-2 {
  background-image: url(../img/home-4/bg.png);
  background-size: cover;
}
.mil-out-frame.mil-out-image-fix {
  padding-bottom: 340px;
  margin-bottom: 300px;
}
@media screen and (max-width: 1200px) {
  .mil-out-frame.mil-out-image-fix {
    padding-bottom: 80px;
    margin-bottom: 80px;
  }
}
.mil-out-frame.mil-out-top {
  background-color: rgb(41, 44, 50);
  position: relative;
  border-radius: 0 0 40px 40px;
}
.mil-out-frame.mil-out-top:before {
  content: "";
  position: absolute;
  z-index: 999;
  top: -80px;
  left: 0;
  background-color: rgb(41, 44, 50);
  height: 81px;
  width: 100%;
  display: block;
  border-radius: 40px 40px 0 0;
}

.mil-gradient-plus {
  filter: blur(100px);
  background-color: rgb(193, 197, 205);
  border-radius: 50%;
  width: 1000px;
  height: 400px;
  position: absolute;
  bottom: -200px;
  right: -100px;
}

/* -------------------------------------------

space

------------------------------------------- */
.mil-mt-15 {
  margin-top: 15px;
}

.mil-mt-30 {
  margin-top: 30px;
}

.mil-mt-60 {
  margin-top: 60px;
}

.mil-mt-130 {
  margin-top: 130px;
}

.mil-mb-10 {
  margin-bottom: 10px;
}

.mil-mb-15 {
  margin-bottom: 15px;
}

.mil-mb-20 {
  margin-bottom: 20px;
}

.mil-mb-25 {
  margin-bottom: 25px;
}

.mil-mb-30 {
  margin-bottom: 30px;
}

.mil-mb-40 {
  margin-bottom: 40px;
}

.mil-mb-50 {
  margin-bottom: 50px;
}

.mil-mb-60 {
  margin-bottom: 60px;
}

.mil-mb-80 {
  margin-bottom: 80px;
}

.mil-mb-160 {
  margin-bottom: 160px;
}

.mil-mb-80-adaptive-30 {
  margin-bottom: 80px;
}
@media (max-width: 1200px) {
  .mil-mb-80-adaptive-30 {
    margin-bottom: 30px;
  }
}

.mil-p-80-80 {
  padding-top: 80px;
  padding-bottom: 80px;
}

.mil-p-50-80 {
  padding-top: 50px;
  padding-bottom: 80px;
}

.mil-p-160-160 {
  padding-top: 160px;
  padding-bottom: 160px;
}
@media (max-width: 1200px) {
  .mil-p-160-160 {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}

.mil-p-160-0 {
  padding-top: 160px;
}
@media (max-width: 1200px) {
  .mil-p-160-0 {
    padding-top: 80px;
  }
}

.mil-p-160-80 {
  padding-top: 160px;
  padding-bottom: 80px;
}
@media (max-width: 1200px) {
  .mil-p-160-80 {
    padding-top: 80px;
    padding-bottom: 0;
  }
}

.mil-p-0-160 {
  padding-bottom: 160px;
}
@media (max-width: 1200px) {
  .mil-p-0-160 {
    padding-bottom: 80px;
  }
}

.mil-space-fix {
  height: 160px;
}

.mil-p-0-80 {
  padding-bottom: 80px;
}
@media (max-width: 1200px) {
  .mil-p-0-80 {
    padding-bottom: 0;
  }
}

.mil-p-80-160 {
  padding-top: 80px;
  padding-bottom: 160px;
}
@media (max-width: 1200px) {
  .mil-p-80-160 {
    padding-top: 0;
    padding-bottom: 80px;
  }
}

.mil-p-0-130 {
  padding-bottom: 130px;
}
@media (max-width: 1200px) {
  .mil-p-0-130 {
    padding-bottom: 50px;
  }
}

.mil-p-160-100 {
  padding-top: 160px;
  padding-bottom: 100px;
}
@media (max-width: 1200px) {
  .mil-p-160-100 {
    padding-top: 80px;
    padding-bottom: 20px;
  }
}

.mil-p-160-130 {
  padding-top: 160px;
  padding-bottom: 130px;
}
@media (max-width: 1200px) {
  .mil-p-160-130 {
    padding-top: 80px;
    padding-bottom: 50px;
  }
}

/* -------------------------------------------

preloader

------------------------------------------- */
.mil-preloader {
  width: 100vw;
  height: 100vh;
  background-color: rgb(86, 86, 241);
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mil-preloader .mil-load {
  position: absolute;
  bottom: 15px;
  left: 15px;
  background-color: rgb(255, 255, 255);
  height: 5px;
  width: 0;
  border-radius: 3px;
}

/* -------------------------------------------

scrollbar

------------------------------------------- */
/*::-webkit-scrollbar {
    display: none;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}*/
.mil-progress-track {
  position: absolute;
  height: 100vh;
  top: 0;
  right: 0;
  width: 4px;
  z-index: 999;
}
.mil-progress-track .mil-progress {
  width: 100%;
  height: 0;
  background-color: rgb(86, 86, 241);
}
@media screen and (max-width: 768px) {
  .mil-progress-track {
    display: none;
  }
}

/* -------------------------------------------

back to top

------------------------------------------- */
.progress-wrap {
  position: fixed;
  right: 30px;
  bottom: 30px;
  height: 72px;
  width: 72px;
  background-color: rgb(86, 86, 241);
  cursor: pointer;
  display: block;
  border-radius: 50px;
  z-index: 998;
  opacity: 0;
  visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.4s cubic-bezier(0, 0, 0.3642, 1);
}
.progress-wrap .active-progress {
  opacity: 1;
  visibility: visible;
}
.progress-wrap:after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f062";
  z-index: 1;
  color: rgb(255, 255, 255);
}
.progress-wrap:hover {
  filter: brightness(110%);
}

/* -------------------------------------------

top panel

------------------------------------------- */
/* The panel is opaque, not transparent. The vendor default let the page show
   through and gave the header no edge, so the whole chrome read as disabled;
   #smooth-content already reserves the panel's height (padding-top: 130px), so
   nothing sits behind it and going opaque costs no layout. Shadow matches
   production's separation from the content below. */
.mil-top-panel {
  position: fixed;
  z-index: 998;
  top: 0;
  left: 0;
  width: 100%;
  height: 130px;
  display: flex;
  align-items: center;
  background-color: rgb(255, 255, 255);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
  transition: 0.4s cubic-bezier(0, 0, 0.3642, 1);
}
.mil-top-panel .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mil-top-panel .mil-menu-buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
/* #1348 — the top-row secondary controls (locale, search, Login) live in this
   wrapper. display:contents keeps them as direct flex children of
   .mil-menu-buttons on desktop, so the gap:12px row is byte-identical to before
   the wrapper existed. At <=1200px it flips to display:none (below) and the
   controls reappear inside the hamburger drawer via .mil-drawer-actions. */
.mil-header-actions {
  display: contents;
}
.mil-drawer-actions {
  display: none;
}
.mil-top-panel.mil-active {
  background-color: rgb(255, 255, 255);
  height: 100px;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}
@media (max-width: 1400px) {
  .mil-top-panel {
    height: 80px;
    background-color: rgb(255, 255, 255);
  }
  .mil-top-panel.mil-active {
    height: 80px;
  }
  /* #1348 — collapse the top row to logo + Open Account + hamburger so it fits
     a phone (~345px inner at 375px). The locale / search / Login controls move
     into the hamburger drawer (.mil-drawer-actions, revealed below); tighten the
     remaining CTA + gap so the pill never clips at the right edge. */
  .mil-top-panel .mil-header-actions {
    display: none;
  }
  .mil-top-panel .mil-menu-buttons {
    gap: 8px;
  }
  .mil-top-panel .mil-menu-buttons .mil-btn.mil-sm {
    padding: 0 14px;
    font-size: 15px;
  }
  .mil-top-menu .mil-drawer-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin: 8px 5px 0;
    padding: 12px 10px 4px;
    border-top: 1px solid rgba(28, 30, 34, 0.08);
    pointer-events: inherit;
  }
  .mil-drawer-actions .mil-drawer-link {
    display: block;
    width: 100%;
    padding: 10px 15px;
    border-radius: 10px;
    /* Matches the desktop nav's ink treatment — the drawer is the same nav. */
    color: rgb(28, 30, 34);
    font-family: "Graphik TH", -apple-system, "Helvetica Neue", Arial, sans-serif;
    font-weight: 600;
    font-size: 15px;
  }
  .mil-drawer-actions .mil-drawer-login {
    color: rgb(86, 86, 241);
    font-weight: 600;
  }
}
/* Mid-desktop condense. Between the full desktop header (>1200px) and the
   hamburger drawer (<=1200px), laptop widths (~1280-1440px) can't fit the whole
   row — logo + horizontal nav + locale/search + Login + Open Account pills —
   inside the capped container, so the trailing CTA clips at the container edge
   (the fixed panel has no horizontal scroll). Tighten the top-level nav spacing,
   the button gap and the two header pills here only; the hamburger stays
   reserved for <=1200px and the >=1441px layout is untouched. Child combinators
   keep dropdown items unconstrained (matching the top-level tab-width cap).
   Selectors are prefixed with .mil-top-panel to raise specificity above the
   base .mil-top-menu rules (which appear later in source order) so the
   condensed margin/padding/font actually win — disjoint from the #1263
   max-width cap. */
@media (min-width: 1201px) and (max-width: 1440px) {
  .mil-top-panel .mil-top-menu > ul > li {
    margin-right: 6px;
  }
  .mil-top-panel .mil-top-menu > ul > li > a,
  .mil-top-panel .mil-top-menu > ul > li > .mil-nav-link {
    padding: 0 9px;
    font-size: 14px;
  }
  .mil-top-panel .mil-menu-buttons {
    gap: 8px;
  }
  .mil-top-panel .mil-btn.mil-sm {
    padding: 0 14px;
  }
}
/* The logo is a flex child of the space-between top panel; without a shrink
   guard a crowded header lets flexbox squeeze the box and the img's global
   max-width:100% clamps its width while a fixed height stays put, distorting
   the mark. flex-shrink:0 removes that clamp path; capping only max-height
   with width:auto plus object-fit:contain preserves the aspect ratio for any
   uploaded logo dimensions. 40px keeps it proportional to the nav text + pill
   CTAs across the 130px idle and 100px scrolled panel heights. */
.mil-logo {
  flex-shrink: 0;
}
.mil-logo img {
  max-height: 40px;
  width: auto;
  object-fit: contain;
  display: block;
}

/* -------------------------------------------

top menu

------------------------------------------- */
.mil-top-menu ul {
  display: flex;
}
.mil-top-menu ul li {
  list-style-type: none;
  margin-right: 15px;
  position: relative;
}
.mil-top-menu ul li:last-child {
  margin-right: 0;
}
/* #1266 — link-less grouping tabs (targetType 'none', #927) render as a
   non-navigating .mil-nav-link span, not an <a>. Without sharing this rule they
   fell back to UA defaults: black text (vs grey), no 48px flex box (so they sat
   at a lower baseline than sibling links). #1263 — the span also lacked
   white-space: nowrap, so long multi-word labels wrapped word-by-word and broke
   the flex header. Folding the span into the anchor rule gives full parity. */
/* Nav labels are ink, not the #89909f "soft" grey the vendor shipped — grey-on-
   white at weight 500 is the same treatment this stylesheet uses for disabled /
   de-emphasised text, so the whole nav read as inert. Ink at 600 lands ~15:1 on
   the panel; the accent stays reserved for hover + the active tab so the
   selected item is still the only coloured thing in the row. */
.mil-top-menu ul li a,
.mil-top-menu ul li .mil-nav-link {
  border-radius: 10px;
  height: 48px;
  padding: 0 15px;
  color: rgb(28, 30, 34);
  font-family: "Graphik TH", -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  letter-spacing: normal;
  z-index: 1;
  white-space: nowrap;
  font-size: 15px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  justify-content: space-between;
  transition: 0.2s cubic-bezier(0, 0, 0.3642, 1);
}
.mil-top-menu ul li a:before {
  content: "";
  opacity: 0;
  height: 1px;
  position: absolute;
  bottom: 0;
  left: 15px;
  right: 15px;
  background: rgb(86, 86, 241);
}
.mil-top-menu ul li a:hover,
.mil-top-menu ul li .mil-nav-link:hover {
  color: rgb(86, 86, 241);
}
.mil-top-menu ul li.mil-has-children > a,
.mil-top-menu ul li.mil-has-children > .mil-nav-link {
  padding-right: 24px;
}
.mil-top-menu ul li.mil-has-children > a:before,
.mil-top-menu ul li.mil-has-children > .mil-nav-link:before {
  right: 24px;
}
.mil-top-menu ul li.mil-has-children > a:after,
.mil-top-menu ul li.mil-has-children > .mil-nav-link:after {
  content: url('data:image/svg+xml,<svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.5 1.25C0.5 1.25 2.63316 3.38316 4 4.75C4 4.75 6.13316 2.61683 7.5 1.25" stroke="%23898D96" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  position: absolute;
  right: 8px;
  margin-top: -1px;
}
.mil-top-menu ul li.mil-active > a {
  color: rgb(86, 86, 241);
}
.mil-top-menu ul li.mil-active > a:before {
  opacity: 1;
}
/* #1263 — on desktop, cap top-level tab width so an extreme label (e.g. a long
   CMS test tab) can never widen the nav row enough to push the logo / switcher /
   CTAs out of alignment. nowrap (above) keeps each label on one line; overflow
   hidden hard-clips the excess (these items are display:flex, so text-overflow
   ellipsis would not render a glyph — the card allows "single line or otherwise
   constrained"). Child combinators keep dropdown items unconstrained. At
   <=1200px the menu is a full-width vertical drawer with room, so no cap there. */
@media (min-width: 1201px) {
  .mil-top-menu > ul > li > a,
  .mil-top-menu > ul > li > .mil-nav-link {
    max-width: 12rem;
    overflow: hidden;
  }
}
.mil-top-menu ul li ul {
  pointer-events: none;
  min-width: 160px;
  border-radius: 10px;
  background-color: rgb(255, 255, 255);
  padding: 15px;
  position: absolute;
  top: 48px;
  flex-direction: column;
  opacity: 0;
  transform: translateY(10px);
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
  transition: 0.4s cubic-bezier(0, 0, 0.3642, 1);
  /* NC-463: --mil-edge is the offset `.mil-nav-flip-up` (below) anchors
     `bottom` to when JS flips this submenu upward — matches this level's own
     `top` value so the flipped box sits flush against the same edge. */
  --mil-edge: 48px;
}
/* WHY: a submenu nested inside a submenu (level 3+) flies out to the side,
   anchored to the right edge of its parent item (already position:relative),
   instead of inheriting the top-level drop-down offset that dropped it straight
   down over the sibling items in the same column. */
.mil-top-menu ul li ul li ul {
  top: 0;
  left: 100%;
  --mil-edge: 0px;
}
/* NC-463: added by Header.tsx (MenuItem) once it measures that this submenu
   would overflow past the bottom of the viewport — flips it to grow upward
   from the same edge it would otherwise hang down from, instead of clipping. */
.mil-top-menu ul li ul.mil-nav-flip-up {
  top: auto !important;
  bottom: var(--mil-edge) !important;
}
.mil-top-menu ul li ul li {
  margin-bottom: 5px;
  margin-right: 0;
}
.mil-top-menu ul li ul li:last-child {
  margin-bottom: 0;
}
.mil-top-menu ul li ul li a {
  justify-content: flex-start;
  height: 38px;
}
.mil-top-menu ul li ul li a:before {
  display: none;
}
.mil-top-menu ul li ul li a:hover {
  background-color: rgb(238, 238, 254);
}
/* WHY: child combinator (> ul) so hovering a menu item reveals only its own
   direct submenu — a descendant combinator revealed every nested submenu in the
   subtree at once, so a deep child flyout showed as soon as the top menu opened. */
.mil-top-menu ul li:hover > ul {
  pointer-events: all;
  opacity: 1;
  transform: translateY(0);
}

.mil-top-panel.mil-active .mil-top-menu ul li:hover ul {
  border-radius: 0 0 10px 10px;
}

.mil-dark-1 .mil-top-menu ul li a {
  background-color: transparent;
}
.mil-dark-1 .mil-top-menu ul li.mil-active a {
  color: rgb(238, 238, 254);
}
.mil-dark-1 .mil-top-menu ul li ul {
  background-color: rgb(0, 128, 255);
}
.mil-dark-1 .mil-top-menu ul li ul li a {
  background-color: transparent;
  color: rgb(238, 238, 254);
}
.mil-dark-1 .mil-top-menu ul li ul li:hover a {
  background-color: rgba(255, 255, 255, 0.1);
  color: rgb(255, 255, 255);
}
.mil-dark-1 .mil-top-menu ul li:hover > a {
  background-color: rgba(255, 255, 255, 0.1);
  color: rgb(255, 255, 255);
}
/* WHY: child combinator, matching the light-theme rule — reveal only the
   directly-hovered item's submenu, not every nested submenu below it. */
.mil-dark-1 .mil-top-menu ul li:hover > ul {
  pointer-events: all;
  opacity: 1;
  transform: translateY(0);
}
.mil-dark-1.mil-active {
  background-color: rgb(28, 30, 34);
}
.mil-dark-1.mil-active .mil-top-menu ul li ul {
  background-color: rgb(28, 30, 34);
}

.mil-dark-2 .mil-top-menu ul li a {
  background-color: transparent;
  color: rgb(238, 238, 254);
  opacity: 0.7;
}
.mil-dark-2 .mil-top-menu ul li.mil-active a {
  color: rgb(238, 238, 254);
  opacity: 1;
}
.mil-dark-2 .mil-top-menu ul li ul {
  background-color: rgb(41, 44, 50);
}
.mil-dark-2 .mil-top-menu ul li ul li a {
  background-color: transparent;
  color: rgb(238, 238, 254);
}
.mil-dark-2 .mil-top-menu ul li ul li:hover a {
  opacity: 1;
  background-color: rgba(255, 255, 255, 0.1);
  color: rgb(255, 255, 255);
}
.mil-dark-2 .mil-top-menu ul li.mil-has-children > a:after {
  content: url("data:image/svg+xml,%3Csvg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.5 1.25C0.5 1.25 2.63316 3.38316 4 4.75C4 4.75 6.13316 2.61683 7.5 1.25' stroke='%23F8F8F8' stroke-opacity='0.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}
.mil-dark-2 .mil-top-menu ul li:hover > a {
  background-color: rgba(255, 255, 255, 0.1);
  color: rgb(255, 255, 255);
  opacity: 1;
}
/* WHY: child combinator, matching the light-theme rule — reveal only the
   directly-hovered item's submenu, not every nested submenu below it. */
.mil-dark-2 .mil-top-menu ul li:hover > ul {
  pointer-events: all;
  opacity: 1;
  transform: translateY(0);
}
.mil-dark-2.mil-active {
  background-color: rgb(41, 44, 50);
}
.mil-dark-2.mil-active .mil-top-menu ul li ul {
  background-color: rgb(41, 44, 50);
}

@media (max-width: 1400px) {
  .mil-top-menu {
    position: absolute;
    pointer-events: none;
    top: 80px;
    left: 0;
    background-color: rgb(255, 255, 255);
    width: 100%;
    opacity: 0;
    transform: translateY(10px);
    box-shadow: 0 5px 5px rgba(28, 30, 34, 0.1);
    padding: 0 0 15px 0;
    transition: 0.4s cubic-bezier(0, 0, 0.3642, 1);
  }
  .mil-top-menu.mil-active {
    pointer-events: all;
    opacity: 1;
    transform: translateY(0);
  }
  .mil-top-menu ul {
    padding: 5px;
    flex-direction: column;
  }
  .mil-top-menu ul li {
    width: 100%;
  }
  .mil-top-menu ul li ul {
    border-radius: 10px !important;
    transform: none !important;
    box-shadow: none;
    position: static;
    opacity: 1;
    max-height: 0;
    padding: 0;
    overflow: hidden;
    background-color: rgb(238, 238, 254);
  }
  .mil-top-menu ul li ul li {
    opacity: 0;
    transition: 0.4s cubic-bezier(0, 0, 0.3642, 1);
  }
  .mil-top-menu ul li:hover a {
    background-color: rgb(255, 255, 255);
  }
  /* WHY: child combinator so a tapped/hovered accordion row expands only its
     own submenu, not every nested level in its subtree at once. */
  /* NC-463: hardcoded 400px + overflow:hidden (inherited from the collapsed
     state above) hard-clipped submenus taller than 400px — switch to a
     viewport-relative cap with a scrollbar for the rest. */
  .mil-top-menu ul li:hover > ul {
    padding: 5px 0;
    max-height: min(60vh, 400px);
    overflow-y: auto;
  }
  .mil-top-menu ul li:hover ul li {
    opacity: 1;
  }
  .mil-top-menu ul li:hover ul li a {
    background-color: inherit;
  }
  .mil-top-menu ul li:last-child:hover ul {
    margin-bottom: 0;
  }
  .mil-top-menu ul li.mil-active > a {
    box-shadow: none;
    color: rgb(86, 86, 241);
  }
}
@media (max-width: 1400px) {
  .mil-dark-1 {
    background-color: rgb(28, 30, 34);
  }
  .mil-dark-1 .mil-top-menu {
    background-color: rgb(28, 30, 34);
  }
  .mil-dark-2 {
    background-color: rgb(41, 44, 50);
  }
  .mil-dark-2 .mil-top-menu {
    background-color: rgb(41, 44, 50);
  }
}
/* -------------------------------------------

menu button

------------------------------------------- */
.mil-menu-btn {
  margin-left: 15px;
  background-color: rgb(238, 238, 254);
  padding: 25px 15px;
  border-radius: 10px;
  height: 24px;
  cursor: pointer;
  display: none;
  justify-content: center;
  align-items: center;
  transition: 0.4s cubic-bezier(0, 0, 0.3642, 1);
}
@media screen and (max-width: 1400px) {
  .mil-menu-btn {
    display: flex;
  }
}
.mil-menu-btn span, .mil-menu-btn span:after, .mil-menu-btn span:before {
  content: "";
  display: block;
  width: 24px;
  height: 2px;
  background: rgb(28, 30, 34);
  backface-visibility: hidden;
  transition: inherit;
}
.mil-menu-btn span {
  position: relative;
}
.mil-menu-btn span:after, .mil-menu-btn span:before {
  position: absolute;
}
.mil-menu-btn span:before {
  top: -8px;
}
.mil-menu-btn span:after {
  top: 8px;
}
.mil-menu-btn.mil-active span {
  transform: rotate(45deg);
}
.mil-menu-btn.mil-active span:before {
  transform: translate(0px, 8px) rotate(-90deg);
}
.mil-menu-btn.mil-active span:after {
  width: 24px;
  transform: translate(0px, -8px) rotate(-90deg);
}

/* -------------------------------------------

locale switcher

------------------------------------------- */
/* #1267 — the TH/EN switcher renders <button class="mil-lang-option mil-link">
   inside .mil-lang-switcher, but none of those classes were styled (.mil-link
   sets font only), so the native button chrome — a grey background box + border
   — showed through. Reset the button and skin it with the header's grey-idle /
   indigo-active nav palette (rgb(86,86,241) is the existing active-nav colour). */
.mil-lang-switcher {
  display: flex;
  align-items: center;
  gap: 2px;
}
.mil-lang-option {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 8px;
  color: rgb(137, 144, 159);
  transition: 0.2s cubic-bezier(0, 0, 0.3642, 1);
}
.mil-lang-option:hover {
  color: rgb(86, 86, 241);
}
.mil-lang-option.mil-active {
  color: rgb(86, 86, 241);
  font-weight: 600;
}

.mil-dark-1 .mil-menu-btn {
  background-color: rgb(0, 128, 255);
}
.mil-dark-1 .mil-menu-btn span, .mil-dark-1 .mil-menu-btn span:after, .mil-dark-1 .mil-menu-btn span:before {
  background-color: rgb(238, 238, 254);
}

.mil-dark-2 .mil-menu-btn {
  background-color: rgb(16, 17, 19);
}
.mil-dark-2 .mil-menu-btn span, .mil-dark-2 .mil-menu-btn span:after, .mil-dark-2 .mil-menu-btn span:before {
  background-color: rgb(238, 238, 254);
}

/* -------------------------------------------

banner

------------------------------------------- */
.mil-banner {
  position: relative;
  overflow: hidden;
  background-color: rgb(238, 238, 254);
  height: 100vh;
  min-height: 900px;
  display: flex;
  align-items: center;
  padding-top: 40px;
}
.mil-banner .mil-banner-img {
  width: 100%;
}
.mil-banner .mil-banner-img img {
  float: right;
}
.mil-banner .mil-banner-img.mil-banner-img-out img {
  transform: translateX(-80px);
  width: 190%;
  float: left;
}
@media screen and (max-width: 1200px) {
  .mil-banner {
    height: auto;
    padding: 80px 0;
    padding-bottom: 0;
  }
  .mil-banner .container {
    margin-top: 0;
  }
  .mil-banner .mil-banner-text {
    text-align: center;
  }
  .mil-banner .mil-banner-img img {
    width: 100% !important;
    transform: none !important;
  }
  .mil-banner .mil-banner-img.mil-120 img {
    width: 120% !important;
  }
  .mil-banner .mil-banner-img.mil-banner-img-out img {
    transform: none;
    width: 110% !important;
    float: left;
  }
}
.mil-banner.mil-banner-inner {
  height: auto;
  background-color: transparent;
  min-height: 680px;
  padding-top: 80px;
  margin-top: 0;
}
.mil-banner.banner-short {
  padding-bottom: 80px;
  height: 60vh;
  align-items: flex-end;
}
.mil-banner.mil-dark-1 {
  background: linear-gradient(90deg, #1c1e22 0%, #2f2f85 50%, #1c1e22 100%);
}
.mil-banner.mil-dark-2 {
  background-color: #1c1e22;
  background: linear-gradient(90deg, #1c1e22 0%, rgba(86, 86, 241, 0.4) 50%, #1c1e22 100%);
}

.mil-radial-g-1 {
  background-color: rgb(0, 128, 255);
  opacity: 0.6;
  position: absolute;
  width: 100vw;
  height: 100vw;
  top: -170%;
  left: 0;
  border-radius: 50%;
  filter: blur(200px);
}

.mil-radial-g-2 {
  background-color: rgb(86, 86, 241);
  opacity: 0.6;
  position: absolute;
  width: 100vw;
  height: 100vw;
  top: -170%;
  left: 0;
  border-radius: 50%;
  filter: blur(200px);
}

.mil-radial-g-3 {
  background-color: #ebe717;
  opacity: 1;
  position: absolute;
  width: 60vw;
  height: 300px;
  bottom: -200px;
  right: 0;
  border-radius: 500px 0 0 0;
  filter: blur(200px);
}

/* -------------------------------------------

content list

------------------------------------------- */
.mil-banner-list {
  display: flex;
}
.mil-banner-list li {
  display: flex;
  align-items: center;
  position: relative;
  list-style-type: none;
  margin-bottom: 30px;
  margin-right: 30px;
  color: rgb(177, 177, 249);
  transition: 0.4s cubic-bezier(0, 0, 0.3642, 1);
}
.mil-banner-list li:last-child {
  margin-right: 0;
}
.mil-banner-list li:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f00c";
  margin-right: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  border: solid 2px rgb(177, 177, 249);
  color: rgb(177, 177, 249);
  width: 36px;
  height: 36px;
  border-radius: 50%;
}
.mil-banner-list.mil-type-2 li {
  color: rgb(28, 30, 34);
}
.mil-banner-list.mil-type-2 li:before {
  border: solid 2px rgb(0, 128, 255);
  color: rgb(0, 128, 255);
}

.mil-list-1 li {
  position: relative;
  padding-left: 45px;
  list-style-type: none;
  margin-bottom: 30px;
  transition: 0.4s cubic-bezier(0, 0, 0.3642, 1);
}
@media screen and (max-width: 992px) {
  .mil-list-1 li {
    opacity: 1;
  }
}
.mil-list-1 li:before {
  content: "";
  display: block;
  width: 1px;
  height: calc(100% + 30px);
  background-color: rgb(238, 238, 254);
  position: absolute;
  top: 0;
  left: 14px;
}
.mil-list-1 li:after {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  box-shadow: 0 0 0 8px rgb(238, 238, 254);
  background-color: rgb(0, 128, 255);
  position: absolute;
  top: 6px;
  left: 8px;
}
.mil-list-1 li:last-child {
  margin-bottom: 0;
}
.mil-list-1 li:last-child:before {
  display: none;
}
.mil-list-1.mil-accent li:after {
  background-color: rgb(86, 86, 241);
}

.mil-list-2 li {
  position: relative;
  padding-left: 56px;
  list-style-type: none;
  margin-bottom: 30px;
  transition: 0.4s cubic-bezier(0, 0, 0.3642, 1);
}
.mil-list-2 li:after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f00c";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: rgb(0, 128, 255);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: rgb(238, 238, 254);
  position: absolute;
  top: -4px;
  left: 0;
}
.mil-list-2 li:last-child {
  margin-bottom: 0;
}
.mil-list-2.mil-type-2 li:after {
  background-color: rgb(0, 128, 255);
  color: rgb(255, 255, 255);
}
.mil-list-2.mil-type-3 li:after {
  background-color: rgb(28, 30, 34);
  color: rgb(0, 128, 255);
}
.mil-list-2.mil-accent li:after {
  background-color: rgb(86, 86, 241);
}

/* -------------------------------------------

brands

------------------------------------------- */
.mil-brand {
  margin: 0 auto;
  opacity: 0.5;
  filter: grayscale(100%);
  transition: 0.4s cubic-bezier(0, 0, 0.3642, 1);
}
.mil-brand img {
  display: inline-block;
}
.mil-brand:hover {
  opacity: 1;
  filter: grayscale(0);
}

.mil-brand-card {
  background-color: rgb(41, 44, 50);
  border-radius: 40px;
  padding: 30px;
}
/* Award logos render in their own colours. The vendor template desaturated
   these tiles because it used them for PARTNER logos, where a uniform muted
   strip is the point; here each tile is an award the CMS holds a colour asset
   for, and the editor's image is the content. */
.mil-brand-card img {
  filter: none;
  opacity: 1;
}

/* -------------------------------------------

facts

------------------------------------------- */
.mil-fact-bg {
  padding: 60px;
  border-radius: 40px;
  background: linear-gradient(0deg, #2f2f85 0%, #3d3dab 100%);
}

/* -------------------------------------------

testimonials

------------------------------------------- */
.mil-testi-pagination {
  margin-top: 60px;
  width: 100%;
  display: flex;
  justify-content: center;
}
.mil-testi-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: rgb(137, 144, 159);
  transition: 0.2s cubic-bezier(0, 0, 0.3642, 1);
}
.mil-testi-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: rgb(86, 86, 241);
}

.mil-slider-nav-1 {
  position: absolute;
  z-index: 2;
  top: 27%;
  left: -132px;
  display: flex;
  justify-content: space-between;
  width: calc(100% + 144px + 120px);
}

.mil-testi-prev {
  cursor: pointer;
  text-align: center;
  background-color: rgb(86, 86, 241);
  height: 72px;
  width: 72px;
  border-radius: 50%;
  transition: 0.4s cubic-bezier(0, 0, 0.3642, 1);
  display: flex;
  justify-content: center;
  align-items: center;
}
.mil-testi-prev:after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f054";
  transform: rotate(180deg);
  color: rgb(255, 255, 255);
}
.mil-testi-prev.swiper-button-disabled {
  background-color: rgba(193, 197, 205, 0.2);
  cursor: not-allowed;
}

.mil-testi-next {
  cursor: pointer;
  text-align: center;
  background-color: rgb(86, 86, 241);
  height: 72px;
  width: 72px;
  border-radius: 50%;
  transition: 0.4s cubic-bezier(0, 0, 0.3642, 1);
  display: flex;
  justify-content: center;
  align-items: center;
}
.mil-testi-next:after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f054";
  color: rgb(255, 255, 255);
}
.mil-testi-next.swiper-button-disabled {
  background-color: rgba(193, 197, 205, 0.2);
  cursor: not-allowed;
}

/* -------------------------------------------

accordion

------------------------------------------- */
.mil-accordion {
  width: 100%;
}
.mil-accordion .mil-accordion-group .mil-accordion-menu {
  color: rgb(28, 30, 34);
  padding: 30px 0;
  cursor: pointer;
  user-select: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}
@media screen and (max-width: 992px) {
  .mil-accordion .mil-accordion-group .mil-accordion-menu {
    align-items: flex-start;
  }
}
.mil-accordion .mil-accordion-group .mil-accordion-menu h5 {
  width: calc(100% - 45px);
}
.mil-accordion .mil-accordion-group .mil-accordion-menu .mil-accordion-icon {
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  background-color: rgb(238, 238, 254);
  transition: 0.4s cubic-bezier(0, 0, 0.3642, 1);
}
.mil-accordion .mil-accordion-group .mil-accordion-menu .mil-accordion-icon.mil-dark {
  background-color: rgb(28, 30, 34);
}
.mil-accordion .mil-accordion-group .mil-accordion-menu .mil-accordion-icon.mil-dark i {
  color: rgb(238, 238, 254);
}
@media screen and (max-width: 992px) {
  .mil-accordion .mil-accordion-group .mil-accordion-menu .mil-accordion-icon {
    width: 30px;
    height: 30px;
  }
}
.mil-accordion .mil-accordion-group .mil-accordion-menu .mil-accordion-icon.mil-active {
  background-color: rgb(86, 86, 241);
}
.mil-accordion .mil-accordion-group .mil-accordion-menu .mil-accordion-icon.mil-active i {
  color: rgb(255, 255, 255);
}
.mil-accordion .mil-accordion-group .mil-accordion-content {
  padding-right: 100px;
  height: 0;
  overflow: hidden;
  margin-bottom: 15px;
}
@media screen and (max-width: 992px) {
  .mil-accordion .mil-accordion-group .mil-accordion-content {
    padding-right: 0;
  }
}
.mil-accordion .mil-accordion-group:last-child .mil-accordion-content {
  margin-bottom: 0;
}

/* -------------------------------------------

illustrations

------------------------------------------- */
.mil-image-frame {
  position: relative;
  overflow: hidden;
  border-radius: 40px;
  width: 100%;
}
.mil-image-frame.mil-visible-overflow {
  overflow: visible;
}
.mil-image-frame img {
  width: 100%;
  border-radius: 40px;
}
.mil-image-frame .mil-img-box {
  text-align: center;
  position: absolute;
  right: -60px;
  bottom: -60px;
  width: 225px;
  height: 225px;
  border-radius: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mil-image-frame .mil-img-box.mil-left-box {
  right: auto;
  left: -60px;
}
.mil-image-frame .mil-img-box.mil-left-max {
  left: -120px;
}
.mil-image-frame .mil-img-box.mil-right-max {
  right: -50px;
  bottom: -50px;
}
.mil-image-frame .mil-img-box.mil-accent-box {
  background: linear-gradient(180deg, #5656f1 0%, #8e8ef6 100%);
}
.mil-image-frame .mil-img-box.mil-soft-box {
  background: linear-gradient(0deg, #d0d0fb 0%, #eeeefe 100%);
}
.mil-image-frame .mil-img-box div {
  width: 100%;
}
.mil-image-frame .mil-img-box img {
  position: static !important;
  width: 90px;
  border-radius: 0;
  margin: 0 auto;
}
@media (max-width: 1200px) {
  .mil-image-frame .mil-img-box {
    display: inline-flex;
    right: auto;
    left: 15px;
    bottom: 15px;
    width: 175px;
    height: 175px;
    padding: 30px 30px;
  }
  .mil-image-frame .mil-img-box br {
    display: block;
  }
  .mil-image-frame .mil-img-box.mil-left-box {
    right: auto;
    left: 15px;
  }
}
.mil-image-frame.mil-image-frame-2 {
  padding-bottom: 180%;
}
.mil-image-frame.mil-image-frame-2 img {
  position: absolute;
  top: 0;
  left: 0;
}

.mil-illustration-absolute {
  width: 800px;
  margin: 0 auto;
  height: 400px;
  position: relative;
}
.mil-illustration-absolute img {
  position: absolute;
  width: 100%;
  /* Fill the fixed 800x400 frame. `cover` still stops off-ratio sources overflowing
     (the original reason for constraining this img) but, unlike `contain`, leaves no
     letterbox gutter for globals.css's 40px radius to land in — NC-298. Off-ratio
     sources are centre-cropped: the CMS feeds photos through a slot the template
     filled with edgeless art, and cropping was chosen over square corners. */
  height: 100%;
  object-fit: cover;
}
@media screen and (max-width: 992px) {
  .mil-illustration-absolute {
    width: 100%;
    height: auto;
  }
  .mil-illustration-absolute img {
    position: static;
  }
}
.mil-illustration-absolute.mil-type-2 {
  height: 250px;
}
@media screen and (max-width: 992px) {
  .mil-illustration-absolute.mil-type-2 {
    width: 100%;
    height: auto;
  }
}
.mil-illustration-absolute.mil-type-3 {
  height: 350px;
}
@media screen and (max-width: 992px) {
  .mil-illustration-absolute.mil-type-3 {
    width: 100%;
    height: auto;
  }
}

.mil-illustration-fix {
  margin-bottom: 160px;
}
@media screen and (max-width: 992px) {
  .mil-illustration-fix {
    padding-bottom: 80px;
    margin-bottom: 0;
  }
}

.mil-gradient-1 {
  position: absolute;
  z-index: -1;
  width: 130%;
  height: 70%;
  left: -30%;
  top: 50%;
  background: #5656f1;
  opacity: 0.7;
  transform: translate(0, -50%);
  filter: blur(250px);
}

.mil-video-pos {
  width: 100%;
  position: absolute;
}
.mil-video-pos .mil-video {
  border-radius: 40px;
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 135px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mil-video-pos .mil-video img {
  width: 100%;
  height: 100%;
  position: absolute;
  object-fit: cover;
  object-position: center;
  top: 0;
  left: 0;
}
.mil-video-pos .mil-video .mil-video-play {
  background-color: rgb(86, 86, 241);
  width: 220px;
  height: 220px;
  border-radius: 50%;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.4s cubic-bezier(0, 0, 0.3642, 1);
}
.mil-video-pos .mil-video .mil-video-play i {
  font-size: 24px;
  color: rgb(238, 238, 254);
}
.mil-video-pos .mil-video .mil-video-play:hover {
  transform: scale(1.1);
}
@media screen and (max-width: 1200px) {
  .mil-video-pos {
    position: static;
  }
}

/* -------------------------------------------

steps

------------------------------------------- */
.mil-step {
  opacity: 0.6;
  transition: 0.4s cubic-bezier(0, 0, 0.3642, 1);
}
.mil-step:hover {
  opacity: 1;
}
@media screen and (max-width: 992px) {
  .mil-step {
    opacity: 1;
  }
}

/* -------------------------------------------

icon box

------------------------------------------- */
.mil-icon-box {
  display: flex;
  border-radius: 40px;
  flex-direction: column;
  height: 100%;
}
/* Flex stretch only equalizes cards within one wrapped row; a min-height
   floor plus fixed line-caps on both the title and the description bound the
   worst-case card content so the floor always dominates — every product card
   renders the same height across the whole grid regardless of copy length or
   which row it lands in. Scoped to the Investment Products grid so the
   knowledge grid, which shares .mil-icon-box, keeps its natural per-item
   height + CTA. */
.mil-product-grid .mil-icon-box {
  min-height: 380px;
}
.mil-product-grid .mil-icon-box h5,
.mil-product-grid .mil-icon-box p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.mil-icon-box img {
  display: block;
  width: 60px;
}
.mil-icon-box.mil-with-bg {
  padding: 60px 30px;
  background-color: rgb(238, 238, 254);
}
.mil-icon-box.mil-dark {
  padding: 60px 30px;
  background: linear-gradient(0deg, #2f2f85 0%, #3d3dab 100%);
}
.mil-icon-box.mil-dark-2 {
  padding: 60px 30px;
  background-color: rgb(41, 44, 50);
}
.mil-icon-box.mil-bg-fix {
  padding: 60px 30px;
}
.mil-icon-box.mil-center {
  text-align: center;
}
.mil-icon-box.mil-center img {
  margin-left: auto;
  margin-right: auto;
}
.mil-icon-box.mil-hover {
  padding: 60px 30px;
  transition: 0.2s cubic-bezier(0, 0, 0.3642, 1);
}
.mil-icon-box.mil-hover:hover, .mil-icon-box.mil-hover.mil-hover-active {
  background-color: rgb(238, 238, 254);
}
.mil-icon-box.mil-hover:hover h5, .mil-icon-box.mil-hover:hover p, .mil-icon-box.mil-hover.mil-hover-active h5, .mil-icon-box.mil-hover.mil-hover-active p {
  color: rgb(28, 30, 34);
}
@media screen and (max-width: 992px) {
  .mil-icon-box {
    width: 100%;
    height: auto;
  }
  .mil-product-grid .mil-icon-box {
    min-height: auto;
  }
  .mil-icon-box.mil-hover {
    background-color: rgb(238, 238, 254);
  }
  .mil-icon-box.mil-hover h5 {
    color: rgb(28, 30, 34);
  }
}
@media screen and (max-width: 768px) {
  .mil-icon-box.mil-bg-fix {
    background-color: rgba(193, 197, 205, 0.05);
  }
}

.mil-icon-box-2 {
  display: flex;
  align-items: flex-start;
}
.mil-icon-box-2 img {
  margin-right: 30px;
}
.mil-icon-box-2 p {
  width: 81%;
}
.mil-icon-box-2.mil-hover {
  opacity: 0.5;
  cursor: default;
  transition: 0.4s cubic-bezier(0, 0, 0.3642, 1);
}
.mil-icon-box-2.mil-hover .mil-button-transform {
  padding: 0;
  background-color: transparent;
  color: rgb(86, 86, 241);
}
.mil-icon-box-2.mil-hover:hover, .mil-icon-box-2.mil-hover.mil-hover-active {
  opacity: 1;
}
.mil-icon-box-2.mil-hover:hover .mil-button-transform, .mil-icon-box-2.mil-hover.mil-hover-active .mil-button-transform {
  background-color: rgb(86, 86, 241);
  padding: 0 30px;
  color: rgb(255, 255, 255);
}
@media screen and (max-width: 992px) {
  .mil-icon-box-2.mil-hover {
    flex-direction: column;
    opacity: 1;
  }
}

.mil-icon-box-2-frame:hover .mil-icon-box-2.mil-hover {
  opacity: 0.5;
}
.mil-icon-box-2-frame:hover .mil-icon-box-2.mil-hover .mil-button-transform {
  padding: 0;
  background-color: transparent;
  color: rgb(86, 86, 241);
}
.mil-icon-box-2-frame:hover .mil-icon-box-2.mil-hover:hover {
  opacity: 1;
}
.mil-icon-box-2-frame:hover .mil-icon-box-2.mil-hover:hover .mil-button-transform {
  background-color: rgb(86, 86, 241);
  padding: 0 30px;
  color: rgb(255, 255, 255);
}

/* -------------------------------------------

team

------------------------------------------- */
.mil-team-card {
  text-align: center;
}
.mil-team-card .mil-portrait {
  position: relative;
  padding-bottom: 130%;
  border-radius: 40px;
  overflow: hidden;
  /* NC-349 — fallback surface behind portraits that don't fill the box. */
  background-color: #ebe8f4;
}
.mil-team-card .mil-portrait img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
  /* NC-349 — anchor the crop to the TOP (replaces the centre anchor that sat
     at the end of this block and silently won): executive sources are
     full-body portraits (ratios 0.33–0.51) in this ~3:4 box; the 50% 50%
     centre crop removed the heads entirely. */
  object-position: top center;
}

/* 2026-09 page-parity review (management-committee vs production) — a
   visible bordered card with the photo inset, matching production's
   frame.png card chrome. Scoped to `.mil-exec-page-bg` (the executive
   page's own wrapper, management-committee/page.tsx only) so board-of-
   directors' bare circular photos (round-2 page-parity review, no border)
   are untouched. Border colour reuses the existing brand accent
   (rgb(86, 86, 241), already used for borders elsewhere in this
   stylesheet) rather than inventing a new one — production's own frame.png
   border colour was read from a screenshot, not colour-picked, so this is
   a close match, not a measured value. */
.mil-exec-page-bg .mil-team-card .mil-portrait {
  border: 1px solid rgba(86, 86, 241, 0.35);
}
.mil-exec-page-bg .mil-team-card .mil-portrait img {
  /* Percentage top/left/width/height (not width/height:100% at top:0/left:0)
     is what actually insets an absolutely positioned child: the containing
     block for percent sizing here is this element's padding box, so
     100%/100% at 0/0 fills it regardless of any padding on the parent. */
  top: 10%;
  left: 10%;
  width: 80%;
  height: 80%;
}

/* -------------------------------------------

vacancie

------------------------------------------- */
.mil-vacancie {
  position: relative;
  overflow: hidden;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 60px 100px;
  transform: translateX(-100px);
  background: rgb(238, 238, 254);
  width: calc(100% + 200px);
  border-radius: 40px;
}
.mil-vacancie:after {
  content: "";
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(0deg, #2f2f85 0%, #3d3dab 100%);
  width: 100%;
  height: 100%;
  z-index: 1;
  transition: 0.2s cubic-bezier(0, 0, 0.3642, 1);
}
.mil-vacancie .mil-left {
  display: block;
  z-index: 2;
  padding-right: 60px;
}
.mil-vacancie .mil-right {
  display: flex;
  justify-content: flex-end;
  z-index: 2;
}
.mil-vacancie .mil-tags {
  font-size: 14px;
  display: flex;
}
.mil-vacancie .mil-tags li {
  list-style-type: none;
  margin-right: 30px;
  color: rgb(137, 144, 159);
}
.mil-vacancie:hover:after {
  opacity: 1;
}
.mil-vacancie:hover h4 {
  color: rgb(238, 238, 254);
}
@media screen and (max-width: 992px) {
  .mil-vacancie {
    transform: translateX(0);
    width: 100%;
    padding: 60px;
    flex-direction: column;
    align-items: flex-start;
  }
  .mil-vacancie .mil-left {
    margin-bottom: 30px;
    padding-right: 0;
  }
}
@media screen and (max-width: 768px) {
  .mil-vacancie .mil-tags {
    flex-direction: column;
  }
  .mil-vacancie .mil-tags li {
    margin-right: 0;
    margin-bottom: 15px;
  }
}

/* -------------------------------------------

blog

------------------------------------------- */
.mil-blog-card {
  display: block;
  background-color: rgb(238, 238, 254);
  border-radius: 40px;
}
.mil-blog-card .mil-card-cover {
  position: relative;
  overflow: hidden;
  overflow: hidden;
  border-radius: 40px;
  padding-bottom: 65%;
}
.mil-blog-card .mil-card-cover img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.mil-blog-card .mil-descr {
  padding: 30px 30px 40px;
}

.mil-pub-cover {
  width: 100%;
  padding-bottom: 50%;
  position: relative;
  border-radius: 40px;
  overflow: hidden;
}
.mil-pub-cover img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
  object-position: center;
}
.mil-pub-cover.mil-inner {
  padding-bottom: 65%;
}
@media screen and (max-width: 768px) {
  .mil-pub-cover {
    padding-bottom: 65%;
  }
}

.mil-pup-tags {
  display: flex;
  padding: 0;
}
.mil-pup-tags li {
  list-style-type: none;
  margin-right: 10px;
}
.mil-pup-tags li:last-child {
  margin-right: 0;
}
.mil-pup-tags li a {
  font-size: 14px;
  display: block;
  padding: 6px 30px;
  border-radius: 10px;
  border: solid 1px rgb(193, 197, 205);
  color: rgb(193, 197, 205);
  transition: 0.2s cubic-bezier(0, 0, 0.3642, 1);
}
.mil-pup-tags li a:hover {
  color: rgb(0, 128, 255);
  border: solid 1px rgb(0, 128, 255);
}
@media screen and (max-width: 768px) {
  .mil-pup-tags {
    flex-direction: column;
  }
  .mil-pup-tags li {
    margin-bottom: 15px;
    margin-right: 0;
  }
  .mil-pup-tags li:last-child {
    margin-bottom: 0;
  }
  .mil-pup-tags li a {
    text-align: center;
  }
}

.mil-share-frame {
  display: flex;
  align-items: center;
}
.mil-share-frame h6 {
  margin-right: 15px;
}
@media screen and (max-width: 768px) {
  .mil-share-frame {
    flex-direction: column;
  }
  .mil-share-frame h6 {
    margin-bottom: 15px;
    margin-right: 0;
  }
}

.mil-pup-share {
  display: flex;
  padding: 0;
}
.mil-pup-share li {
  list-style-type: none;
  margin-right: 10px;
}
.mil-pup-share li:last-child {
  margin-right: 0;
}
.mil-pup-share li a {
  font-size: 14px;
  display: block;
  padding: 6px 15px;
  border-radius: 10px;
  background-color: rgb(238, 238, 254);
  color: rgb(193, 197, 205);
  transition: 0.2s cubic-bezier(0, 0, 0.3642, 1);
}
.mil-pup-share li a i {
  color: rgb(193, 197, 205);
  margin-right: 10px;
}
.mil-pup-share li a:hover {
  background-color: rgb(0, 128, 255);
  color: rgb(255, 255, 255);
}
.mil-pup-share li a:hover i {
  color: rgb(255, 255, 255);
}

.mil-next-post {
  padding: 60px 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  border-top: solid 1px rgb(193, 197, 205);
  border-bottom: solid 1px rgb(193, 197, 205);
}
.mil-next-post .mil-descr {
  text-align: right;
  padding-right: 60px;
}
.mil-next-post .mil-cover {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 40px;
  overflow: hidden;
}
.mil-next-post .mil-cover img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: 0.4s cubic-bezier(0, 0, 0.3642, 1);
}
.mil-next-post .mil-cover i {
  background-color: rgb(86, 86, 241);
  color: rgb(255, 255, 255);
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.5);
  transition: 0.4s cubic-bezier(0, 0, 0.3642, 1);
}
.mil-next-post .mil-cover:hover img {
  transform: scale(1.1);
}
.mil-next-post .mil-cover:hover i {
  transform: scale(1);
  opacity: 1;
}
@media screen and (max-width: 768px) {
  .mil-next-post {
    flex-direction: column;
  }
  .mil-next-post .mil-descr {
    text-align: center;
    margin-bottom: 30px;
    padding: 0;
  }
}

/* -------------------------------------------

comments

------------------------------------------- */
.mil-comments li {
  list-style-type: none;
}
.mil-comments li .mil-comment {
  display: flex;
  margin-bottom: 60px;
}
.mil-comments li .mil-comment .mil-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
}
.mil-comments li .mil-comment .mil-avatar img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.mil-comments li .mil-comment .mil-comment-text {
  position: relative;
  padding-left: 30px;
  width: calc(100% - 60px);
}
.mil-comments li .mil-comment .mil-comment-text .mil-reply {
  position: absolute;
  top: 0;
  right: 0;
  font-weight: 500;
  font-size: 14px;
  font-family: "Graphik TH", -apple-system, "Helvetica Neue", Arial, sans-serif;
  color: rgb(86, 86, 241);
}
.mil-comments li ul {
  padding-left: 90px;
}
@media screen and (max-width: 768px) {
  .mil-comments li .mil-comment .mil-avatar {
    width: 40px;
    height: 40px;
  }
  .mil-comments li .mil-comment .mil-comment-text {
    padding-left: 15px;
    width: calc(100% - 40px);
  }
  .mil-comments li ul {
    padding-left: 55px;
  }
}

/* -------------------------------------------

form

------------------------------------------- */
.mil-input {
  width: 100%;
  height: 70px;
  border: solid 1px rgba(137, 144, 159, 0.2);
  font-weight: 500;
  font-size: 14px;
  font-family: "Graphik TH", -apple-system, "Helvetica Neue", Arial, sans-serif;
  border-radius: 20px;
  padding: 0 30px;
}
.mil-input::placeholder {
  font-weight: 500;
  font-size: 14px;
  font-family: "Graphik TH", -apple-system, "Helvetica Neue", Arial, sans-serif;
}

textarea {
  width: 100%;
  border: solid 1px rgb(193, 197, 205);
  border-radius: 20px;
  padding: 30px 30px;
}
textarea::placeholder {
  font-weight: 500;
  font-size: 14px;
  font-family: "Graphik TH", -apple-system, "Helvetica Neue", Arial, sans-serif;
}

.mil-checkbox-frame {
  display: flex;
  align-items: center;
}
.mil-checkbox-frame p {
  padding-left: 15px;
}

.mil-checkbox {
  position: relative;
  height: 24px;
  width: 24px;
}

.mil-checkbox label {
  background-color: rgb(255, 255, 255);
  border: 1px solid rgb(193, 197, 205);
  border-radius: 3px;
  cursor: pointer;
  height: 24px;
  width: 24px;
  left: 0;
  position: absolute;
  top: 0;
}

.mil-checkbox label:after {
  border: 2px solid rgb(255, 255, 255);
  border-top: none;
  border-right: none;
  content: "";
  height: 6px;
  left: 5px;
  opacity: 0;
  position: absolute;
  top: 6px;
  transform: rotate(-45deg);
  width: 12px;
}

.mil-checkbox input[type=checkbox] {
  visibility: hidden;
}

.mil-checkbox input[type=checkbox]:checked + label {
  background-color: rgb(86, 86, 241);
  border-color: rgb(86, 86, 241);
}

.mil-checkbox input[type=checkbox]:checked + label:after {
  opacity: 1;
}

.mil-subscripe-form {
  position: relative;
  display: flex;
}
.mil-subscripe-form .mil-input {
  margin-right: 15px;
}
@media screen and (max-width: 768px) {
  .mil-subscripe-form {
    flex-direction: column;
  }
  .mil-subscripe-form .mil-input {
    margin-bottom: 15px;
  }
}

/* -------------------------------------------

text list

------------------------------------------- */
.mil-text-list li {
  text-align: left !important;
  display: flex;
  align-items: center;
  list-style-type: none;
  margin-bottom: 10px;
}
.mil-text-list li:before {
  display: block;
  content: "";
  background-color: rgb(177, 177, 249);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 20px;
}
.mil-text-list li:last-child {
  margin-bottom: 0;
}
.mil-text-list.mil-check li:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f00c";
  padding: 5px;
  font-size: 10px;
  color: rgb(0, 128, 255);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: rgb(238, 238, 254);
}
.mil-text-list.mil-check.mil-type-2 li:before {
  background-color: rgb(0, 128, 255);
  color: rgb(238, 238, 254);
}

/* -------------------------------------------

price

------------------------------------------- */
.mil-switcher {
  position: relative;
  display: flex;
  justify-content: center;
  background-color: rgb(28, 30, 34);
  border: solid 5px rgb(28, 30, 34);
  width: 245px;
  padding: 0;
  border-radius: 50px;
}
.mil-switcher:after {
  content: "-30%";
  background: linear-gradient(180deg, #5656f1 0%, #8e8ef6 100%);
  padding: 10px 15px;
  border-radius: 40px;
  position: absolute;
  top: -20px;
  right: -20px;
  font-family: "Graphik TH", -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: rgb(255, 255, 255);
}
.mil-switcher span {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 120px;
  text-align: center;
  height: 60px;
  cursor: pointer;
  color: #fff;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 500;
  font-family: "Graphik TH", -apple-system, "Helvetica Neue", Arial, sans-serif;
  margin-right: 5px;
  transition: 0.2s cubic-bezier(0, 0, 0.3642, 1);
}
.mil-switcher span:last-child {
  margin-right: 0;
}
.mil-switcher span.mil-active {
  background-color: #fff;
  color: rgb(28, 30, 34);
}

.mil-price-card {
  padding: 60px 30px;
  text-align: center;
  border-radius: 40px;
}
.mil-price-card .mil-sup-text {
  font-size: 18px;
  margin-left: 5px;
}
.mil-price-card.mil-featured {
  background: linear-gradient(0deg, #2f2f85 0%, #3d3dab 100%);
}
.mil-price-card li {
  list-style: none;
}
@media screen and (max-width: 768px) {
  .mil-price-card {
    background-color: rgba(193, 197, 205, 0.05);
  }
}

/* -------------------------------------------

footer

------------------------------------------- */
footer .mil-footer-logo {
  display: inline-block;
}
footer .mil-footer-list li {
  list-style-type: none;
}
footer .mil-footer-list li a {
  transition: 0.2s cubic-bezier(0, 0, 0.3642, 1);
}
footer .mil-footer-list li a:hover {
  color: rgb(28, 30, 34);
}
footer .mil-footer-list.mil-footer-list-2 {
  display: flex;
}
footer .mil-footer-list.mil-footer-list-2 li {
  margin-right: 30px;
  margin-bottom: 0;
}
footer .mil-footer-list.mil-footer-list-2 li a {
  transition: 0.2s cubic-bezier(0, 0, 0.3642, 1);
}
footer .mil-footer-list.mil-footer-list-2 li a:hover {
  color: rgb(255, 255, 255);
}
@media (max-width: 768px) {
  footer .mil-footer-list.mil-footer-list-2 {
    flex-direction: column;
  }
  footer .mil-footer-list.mil-footer-list-2 li {
    margin-bottom: 15px;
  }
}
footer .mil-footer-bottom {
  padding-top: 60px;
  padding-bottom: 60px;
  border-top: solid 1px rgba(137, 144, 159, 0.2);
}
footer.mil-footer-with-bg {
  background-color: rgb(238, 238, 254);
}
footer.mil-footer-with-bg .mil-footer-bottom {
  border-top: solid 1px rgba(137, 144, 159, 0.2);
}
footer.mil-footer-dark {
  background-color: rgb(28, 30, 34);
}
footer.mil-footer-dark .mil-footer-bottom {
  border-top: solid 1px rgba(0, 128, 255, 0.2);
}
footer.mil-footer-dark-2 {
  background-color: rgb(41, 44, 50);
}
footer.mil-footer-dark-2 .mil-footer-bottom {
  border-top: solid 1px rgba(137, 144, 159, 0.2);
}

.mil-footer-space-fix {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}

.mil-subscripe-form-footer {
  position: relative;
}
.mil-subscripe-form-footer input {
  background-color: transparent;
  height: 65px;
}
.mil-subscripe-form-footer input:focus {
  outline: inherit;
}
.mil-subscripe-form-footer button {
  background-color: transparent;
  border: none;
  position: absolute;
  top: 20px;
  right: 25px;
  font-size: 22px;
  cursor: pointer;
}
.mil-subscripe-form-footer button i {
  color: rgb(238, 238, 254);
}
.mil-subscripe-form-footer button i.mil-dark {
  color: rgb(28, 30, 34);
}

/* CW W3 — static-rich body Pages rendered via @cms/lexical-renderer.
   No tailwind typography plugin exists; provide plain semantic prose
   spacing for the body content wrapper. */
.mil-content {
  max-width: 760px;
  margin: 0 auto;
  line-height: 1.7;
}
.mil-content h1,
.mil-content h2,
.mil-content h3,
.mil-content h4 {
  margin-top: 1.6em;
  margin-bottom: 0.5em;
  line-height: 1.25;
}
.mil-content p {
  margin-bottom: 1.2em;
}
.mil-content ul,
.mil-content ol {
  margin-bottom: 1.2em;
  padding-left: 1.5em;
}
.mil-content li {
  margin-bottom: 0.4em;
}
.mil-content img {
  max-width: 100%;
  height: auto;
  margin: 1.5em 0;
}
.mil-content .mil-cover {
  width: 100%;
  margin-bottom: 2em;
}

/* -------------------------------------------

consent banner

------------------------------------------- */
/* The PDPA banner is rendered at the document root (outside #smooth-content)
   and had no styling, so it fell into normal flow at the page bottom with its
   buttons clipped at the viewport edge. Pin it as a fixed bottom bar above the
   back-to-top control; stack the actions under the text on narrow screens so
   neither button is ever clipped. */
.mil-consent-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  background-color: rgb(255, 255, 255);
  box-shadow: 0 -5px 15px rgba(28, 30, 34, 0.08);
  padding: 20px 0;
}
.mil-consent-banner .mil-consent-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.mil-consent-banner .mil-consent-text {
  margin: 0;
  flex: 1;
}
.mil-consent-banner .mil-consent-policy-link {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}
.mil-consent-banner .mil-consent-policy-link:hover,
.mil-consent-banner .mil-consent-policy-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.mil-consent-banner .mil-consent-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .mil-consent-banner .mil-consent-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  .mil-consent-banner .mil-consent-actions {
    justify-content: center;
  }
}

/* -------------------------------------------

utility bar + header search

------------------------------------------- */
/* #1276 — a thin brand-scoped bar above .mil-top-panel for quick external
   links (webtrade, fund buy, ...).
   Both elements are siblings rendered back-to-back by Header.tsx, but
   .mil-top-panel is position:fixed — a normal-flow bar placed before it does
   NOT push it down, it just gets painted over by the panel. So the bar is
   fixed too, pinned as its own 40px strip above the panel, and the panel is
   shifted down via the `.mil-utility-bar ~ .mil-top-panel` sibling combinator
   — which only matches when the bar element actually exists in the DOM, so
   the offset is automatically conditional on utilityLinks being non-empty
   (Header renders no bar at all when the list is empty). The page-content
   offset that mirrors the panel's height lives on #smooth-content above,
   using :has() since #smooth-content is an ancestor, not a sibling, of the
   bar — a sibling combinator can't reach it from here. */
.mil-utility-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 40px;
  z-index: 999;
  /* Home review 2026-09-13 (Figma 1:5 "Top Utility Bar") — the bar is the
     brand lavender in BOTH scroll states, not gunmetal. Nothing in this build
     ever changed its colour on scroll; the dark bar merely blended over the
     dark hero and read as a stripe over white content. Height stays 40 (the
     NC-369 120px header ruling); the design's 44 is not adopted. Edited in
     place under D-QAFB-1: this block is CW-authored (#1276), not vendor. */
  background-color: rgb(86, 86, 241);
}
.mil-utility-bar ~ .mil-top-panel {
  top: 40px;
}
.mil-utility-bar .container {
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.mil-utility-bar ul {
  display: flex;
  align-items: center;
  gap: 8px;
  /* Pills never wrap — narrow viewports scroll the strip instead of breaking
     the 12px labels across the 40px bar (home review 2026-09-13). */
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  white-space: nowrap;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Quick-access links render as rounded pills rather than plain inline text —
   an inline-flex pill with its own padding/background sits centred in the 40px
   strip; the tinted translucent fill reads on the dark bar and brightens on
   hover. Pill height (~10px padding + 13px line) clears the strip comfortably. */
/* Home review 2026-09-13 (Figma 24:3930 `[common]_button`, secondary/lavender):
   `#eeeff1` pill, `#5656f1` 12/20 Medium text, 2×12 padding, radius 32, gap 8.
   The design draws no hover; a plain white lift is the smallest legible one. */
.mil-utility-bar a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: rgb(86, 86, 241);
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
  padding: 2px 12px;
  border-radius: 32px;
  background-color: rgb(238, 239, 241);
  border: 0;
  transition: background-color 0.2s ease;
}
.mil-utility-bar a:hover {
  background-color: rgb(255, 255, 255);
}

/* The magnifier button reuses the existing mil-menu-buttons flex row; the
   inline form drops in next to it without disturbing panel height. */
.mil-search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: currentColor;
  padding: 4px;
}
.mil-header-search {
  display: flex;
  align-items: center;
}
.mil-header-search input {
  border: none;
  border-bottom: 1px solid currentColor;
  background: transparent;
  font-size: 14px;
  padding: 2px 4px;
  outline: none;
}

/* #1461 Entry Takeover — full-viewport entry gate (spec §4.3). z-index must
   clear the fixed chrome (.mil-consent-banner at 1000 is the current max). */
.mil-entry-takeover {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.85);
}
.mil-entry-takeover__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  max-width: min(90vw, 900px);
  max-height: 90vh;
}
.mil-entry-takeover__image {
  max-width: 100%;
  max-height: 70vh;
  object-fit: contain;
}
.mil-entry-takeover__dismiss {
  padding: 12px 32px;
  border: 1px solid #fff;
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}
.mil-entry-takeover__dismiss:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* -------------------------------------------

footer social icons + cookie settings

------------------------------------------- */
/* Footer.tsx renders the "Follow us on" row with .mil-follow / .mil-social-icons
   / .social-icon / .mil-social-icon-img, none of which had a rule in any loaded
   stylesheet — so the <ul> fell back to UA defaults and the row rendered as a
   vertical bulleted list. These rules are the missing half of that markup. */
.mil-follow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.mil-social-icons {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.mil-social-icons li {
  list-style: none;
  margin: 0;
}

.mil-social-icons .social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(28, 30, 34, 0.06);
  color: rgb(28, 30, 34);
  font-size: 16px;
  line-height: 1;
  transition: 0.2s cubic-bezier(0, 0, 0.3642, 1);
}
/* The universal `* { color }` rule at the top of this file paints every element
   directly, so the glyph would not inherit the anchor's hover colour without an
   explicit override here (a class selector outranks the universal one). */
.mil-social-icons .social-icon i {
  color: inherit;
  font-size: inherit;
}
.mil-social-icons .social-icon:hover {
  background-color: rgb(86, 86, 241);
  color: rgb(255, 255, 255);
}

/* A custom uploaded icon can be any aspect ratio; the box is fixed and
   object-fit (set inline by Footer.tsx) keeps it undistorted. */
.mil-social-icon-img {
  display: block;
  width: 20px;
  height: 20px;
}

/* CookieSettingsLink renders a real <button> for the PDPA withdraw-consent
   event. With no rule it inherited the OS button chrome (outset border, grey
   fill, 13.33px system font) in the middle of a row of text links. Reset it to
   the plain-text treatment its sibling policy links get — colour is left to
   inherit so the .mil-soft parent keeps the whole row one colour. */
.mil-cookie-settings-link {
  display: inline;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: inherit;
  transition: 0.2s cubic-bezier(0, 0, 0.3642, 1);
}
.mil-cookie-settings-link:hover {
  color: rgb(28, 30, 34);
  text-decoration: underline;
}