@font-face { font-family:'IRANSansX'; src:url('/landing/assets/fonts/IRANSansXFaNum-Light.woff2')     format('woff2'); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'IRANSansX'; src:url('/landing/assets/fonts/IRANSansXFaNum-Regular.woff2')   format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'IRANSansX'; src:url('/landing/assets/fonts/IRANSansXFaNum-Medium.woff2')    format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'IRANSansX'; src:url('/landing/assets/fonts/IRANSansXFaNum-DemiBold.woff2')  format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'IRANSansX'; src:url('/landing/assets/fonts/IRANSansXFaNum-Bold.woff2')      format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'IRANSansX'; src:url('/landing/assets/fonts/IRANSansXFaNum-ExtraBold.woff2') format('woff2'); font-weight:800; font-style:normal; font-display:swap; }
@font-face { font-family:'IRANSansX'; src:url('/landing/assets/fonts/IRANSansXFaNum-Black.woff2')     format('woff2'); font-weight:900; font-style:normal; font-display:swap; }

:root {
  --blue:       #06A2FF;
  --blue-dot:   #00B4FF;

  --ink:        #121212;
  --body:       #525252;
  --label:      #989898;
  --muted:      #7C7C7C;

  --line:       #E1E1E1;
  --edge:       #DCDCDC;
  --bg:         #F7F7F7;
  --card:       #FFFFFF;
  --hero-plate: #F2F2F5;
  --tab-idle:   #F0F0F0;
  --dark:       #121212;
  --dark-rule:  #BCBCBC;

  --wrap:      920px;
  --wrap-wide: 1256px;
  --gutter:     20px;
  --sec-gap:    48px;
  --sec-pad:    32px;

  --r-hero:     24px;
  --r-card:     20px;
  --r-course:   12px;
  --r-btn:      12px;
  --r-btn-md:   10px;
  --r-btn-sm:    7px;
  --r-pill:    999px;

  --t-xs:  11px;
  --t-sm:  13px;
  --t-md:  15px;
  --t-lg:  24px;
  --t-h1:  38px;
  --t-num: 72px;

  --sh-card: 0 2px 4px rgba(0,0,0,.06), 0 0 10px 1px rgba(227,227,224,.5);
  --sh-tab:  0 2px 4px rgba(0,0,0,.02);

  --footer-bg: #121212;
  --cta-overlap: 48px;
  --elev-3: 0 24px 60px rgba(18,30,60,.22);
  --fs-body: 15px;  --lh-body: 24px;
  --fs-h2:   24px;  --lh-h2:   32px;
  --fs-small:13px;  --lh-small:22px;
  --w-reg:  400;    --w-demi:  600;
  --t-disabled: #BDBDBD;
  --t-heading:  #121212;
  --ease-out: cubic-bezier(.22, .8, .3, 1);
}

@media (max-width: 760px) {
  :root { --cta-overlap: 90px; }

  :root { --sec-gap: 32px; }
}

:root {

  --azk-brand:            #06A2FF;
  --azk-brand-hover:      #1EBEFF;
  --azk-brand-active:     #008FFF;
  --azk-brand-bg:         #F5FDFF;
  --azk-brand-bg-hover:   #D6F5FF;
  --azk-brand-border:     #B5F0FF;
  --azk-brand-text:       #086CC5;
  --azk-brand-text-active:#0E385D;

  --azk-ink:              #121212;
  --azk-ink-hover:        #989898;
  --azk-ink-active:       #656565;
  --azk-ink-pressed-text: #3D3D3D;
  --azk-text-disabled:    #7C7C7C;
  --azk-text-light:       #F7F7F7;
  --azk-border:           #BDBDBD;
  --azk-border-secondary: #DCDCDC;
  --azk-bg-container:     #FFFFFF;

  --azk-fill-quaternary:  rgba(0, 0, 0, .02);
  --azk-fill-tertiary:    rgba(0, 0, 0, .04);
  --azk-fill-secondary:   rgba(0, 0, 0, .06);

  --azk-error:            #FF4D4F;
  --azk-error-hover:      #FF7875;
  --azk-error-active:     #F5222D;
  --azk-error-bg:         #FFF1F0;
  --azk-error-border-hover:#FFA39E;

  --azk-space-1:  4px;
  --azk-space-2:  8px;
  --azk-space-3: 12px;
  --azk-space-4: 16px;
  --azk-space-5: 20px;
  --azk-space-6: 24px;
  --azk-space-7: 32px;
  --azk-space-8: 48px;

  --azk-radius-sm:   7px;
  --azk-radius:     10px;
  --azk-radius-lg:  12px;
  --azk-radius-card:20px;
  --azk-radius-xl:  24px;
  --azk-radius-pill:999px;

  --azk-line:        1px;

  --azk-t-xs-size:   11px; --azk-t-xs-line:   20px;
  --azk-t-sm-size:   13px; --azk-t-sm-line:   22px;
  --azk-t-md-size:   15px; --azk-t-md-line:   24px;
  --azk-t-lg-size:   20px; --azk-t-lg-line:   28px;
  --azk-t-xl-size:   24px; --azk-t-xl-line:   32px;
  --azk-t-2xl-size:  30px; --azk-t-2xl-line:  38px;
  --azk-t-3xl-size:  38px; --azk-t-3xl-line:  46px;
  --azk-w-regular:   400;
  --azk-w-demi:      600;
  --azk-w-bold:      700;

  --azk-color-accent:        var(--azk-brand);
  --azk-color-text:          var(--azk-ink);
  --azk-color-text-muted:    var(--azk-text-disabled);
  --azk-color-surface:       var(--azk-bg-container);
  --azk-color-border:        var(--azk-border-secondary);

  --azk-focus-ring: 3px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  /* The canvas behind the page, which is what a phone shows when a scroll runs
     past either end and the page rubber-bands. `html` had no background, so that
     area fell back to body's — and at the bottom of every page that put the page
     colour directly under a black footer, which is the white strip that appears
     under it when you pull up. Two stops, split at the middle of the VIEWPORT
     (hence `fixed`, so the split does not travel with the scroll): the top half
     is the colour the pages start with, the bottom half the footer's own. */
  background: linear-gradient(to bottom,
              var(--bg) 0 50%, #121212 50% 100%) fixed;
}

body {
  font-family: 'IRANSansX', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: var(--t-sm);
  line-height: 22px;
  color: var(--ink);
  background: var(--bg);
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

:where(a, button, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 4px;
}

@media print {
  body { background: #fff; }
}

main { display: flex; flex-direction: column; gap: var(--sec-gap); }
main > section { padding-block: var(--sec-pad); }

.azk-wrap {
  width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin-inline: auto; padding-inline: var(--gutter);
}
.azk-wrap-wide { max-width: calc(var(--wrap-wide) + 2 * var(--gutter)); }

.azk-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

.azk-eyebrow {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--t-md); line-height: 24px; color: var(--label);
  margin-block-end: 12px;
}
.azk-eyebrow::before {
  content: ''; flex: none; width: 5px; height: 5px;
  border-radius: 50%; background: var(--blue-dot);
}

.azk-h2 { font-size: var(--t-lg); line-height: 32px; font-weight: 600; color: var(--ink); }
.azk-h2 b, .azk-accent { color: var(--blue); font-weight: inherit; }

.azk-button {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--azk-space-1);
  height: 40px;
  padding-inline: var(--azk-space-4);
  border-radius: var(--azk-radius);
  border: var(--azk-line) solid transparent;
  font-size: var(--azk-t-md-size); line-height: var(--azk-t-md-line);
  font-weight: var(--azk-w-regular);
  white-space: nowrap; text-align: center;
  background: var(--azk-button-bg, transparent);
  border-color: var(--azk-button-border, transparent);
  color: var(--azk-button-fg, var(--azk-ink));
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.azk-button-label { padding-inline: var(--azk-space-1); }

.azk-button-icon-glyph { flex: none; width: 16px; height: 16px; }

.azk-button--sm {
  height: 32px; padding-inline: var(--azk-space-3);
  border-radius: var(--azk-radius-sm);
  font-size: var(--azk-t-sm-size); line-height: var(--azk-t-sm-line);
}
.azk-button--lg {
  height: 48px;
  border-radius: var(--azk-radius-lg);
}

.azk-button--icon-only { width: 40px; padding-inline: 0; }
.azk-button--icon-only.azk-button--sm { width: 32px; }
.azk-button--icon-only.azk-button--lg { width: 48px; }

.azk-button--primary               { --azk-button-bg: var(--azk-ink);        --azk-button-fg: #FFFFFF; }
.azk-button--primary:hover         { --azk-button-bg: var(--azk-ink-hover);  --azk-button-fg: var(--azk-text-light); }
.azk-button--primary:active        { --azk-button-bg: var(--azk-ink-active); --azk-button-border: var(--azk-ink-active);
                                  --azk-button-fg: var(--azk-text-light); }

.azk-button--outline               { --azk-button-bg: var(--azk-bg-container); --azk-button-border: var(--azk-ink);
                                  --azk-button-fg: var(--azk-ink); }
.azk-button--outline:hover         { --azk-button-bg: var(--azk-fill-quaternary); }
.azk-button--outline:active        { --azk-button-bg: var(--azk-fill-tertiary); --azk-button-border: var(--azk-ink-active);
                                  --azk-button-fg: var(--azk-ink-pressed-text); }

.azk-button--brand                 { --azk-button-bg: var(--azk-brand);        --azk-button-fg: #FFFFFF; }
.azk-button--brand:hover           { --azk-button-bg: var(--azk-brand-hover);  --azk-button-fg: var(--azk-text-light); }
.azk-button--brand:active          { --azk-button-bg: var(--azk-brand-active); --azk-button-fg: var(--azk-text-light); }

.azk-button--text                  { --azk-button-fg: var(--azk-ink); }
.azk-button--text:hover            { --azk-button-fg: var(--azk-ink-hover); }
.azk-button--text:active           { --azk-button-fg: var(--azk-text-disabled); }

.azk-button--primary.azk-button--ghost        { --azk-button-bg: var(--azk-fill-quaternary); --azk-button-fg: var(--azk-ink); }
.azk-button--primary.azk-button--ghost:hover  { --azk-button-bg: var(--azk-fill-tertiary); }
.azk-button--primary.azk-button--ghost:active { --azk-button-bg: var(--azk-fill-secondary); }

.azk-button--outline.azk-button--ghost        { --azk-button-border: var(--azk-border-secondary); }
.azk-button--outline.azk-button--ghost:hover  { --azk-button-bg: var(--azk-fill-quaternary); --azk-button-border: var(--azk-border-secondary);
                                          --azk-button-fg: var(--azk-ink); }
.azk-button--outline.azk-button--ghost:active { --azk-button-bg: var(--azk-fill-tertiary); --azk-button-border: var(--azk-ink-active);
                                          --azk-button-fg: var(--azk-ink-active); }

.azk-button--brand.azk-button--ghost          { --azk-button-bg: var(--azk-brand-bg); --azk-button-fg: var(--azk-brand-active); }
.azk-button--brand.azk-button--ghost:hover    { --azk-button-bg: var(--azk-brand-bg-hover); --azk-button-fg: var(--azk-brand-active); }
.azk-button--brand.azk-button--ghost:active   { --azk-button-bg: var(--azk-brand-bg-hover); --azk-button-fg: var(--azk-brand-text-active); }

.azk-button--primary.azk-button--danger        { --azk-button-bg: var(--azk-error);        --azk-button-fg: var(--azk-text-light); }
.azk-button--primary.azk-button--danger:hover  { --azk-button-bg: var(--azk-error-hover); }
.azk-button--primary.azk-button--danger:active { --azk-button-bg: var(--azk-error-active); --azk-button-border: transparent; }

.azk-button--outline.azk-button--danger        { --azk-button-bg: var(--azk-bg-container); --azk-button-border: var(--azk-error);
                                           --azk-button-fg: var(--azk-error); }
.azk-button--outline.azk-button--danger:hover  { --azk-button-bg: var(--azk-error-bg); --azk-button-border: var(--azk-error-border-hover); }
.azk-button--outline.azk-button--danger:active { --azk-button-bg: var(--azk-bg-container); --azk-button-border: var(--azk-error-border-hover);
                                           --azk-button-fg: var(--azk-error-active); }

.azk-button--text.azk-button--danger           { --azk-button-fg: var(--azk-error); }
.azk-button--text.azk-button--danger:hover     { --azk-button-bg: var(--azk-error-bg); --azk-button-fg: var(--azk-error-hover); }
.azk-button--text.azk-button--danger:active    { --azk-button-bg: transparent; --azk-button-fg: var(--azk-error-active); }

.azk-button[disabled],
.azk-button[aria-disabled="true"] {
  --azk-button-bg: var(--azk-fill-quaternary);
  --azk-button-border: var(--azk-border-secondary);
  --azk-button-fg: var(--azk-border);
  cursor: not-allowed; pointer-events: none;
}
.azk-button--text[disabled],
.azk-button--text[aria-disabled="true"] { --azk-button-bg: transparent; --azk-button-border: transparent; }

.azk-button[data-loading="true"] { position: relative; pointer-events: none; }
.azk-button[data-loading="true"] > * { visibility: hidden; }
.azk-button[data-loading="true"]::after {
  content: ''; position: absolute; inset: 50% auto auto 50%;
  width: 16px; height: 16px; margin: -8px 0 0 -8px;
  border: 2px solid currentColor; border-inline-start-color: transparent;
  border-radius: 50%;
  animation: azk-button-spin .7s linear infinite;
}
@keyframes azk-button-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .azk-button[data-loading="true"]::after { animation-duration: 2.4s; }
}

.azk-dropdown { position: relative; display: inline-block; }

.azk-dropdown-trigger {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 8px;
  min-width: 123px; height: 40px; padding-inline: 16px;
  border: var(--azk-line) solid var(--azk-border-secondary);
  border-radius: 8px; background: var(--azk-color-surface);
  font-size: var(--azk-t-sm-size); line-height: var(--azk-t-sm-line);
  color: var(--azk-color-text); cursor: pointer; white-space: nowrap;
  transition: border-color .18s ease;
}
.azk-dropdown-trigger:hover { border-color: var(--azk-brand-border); }
.azk-dropdown-trigger[aria-expanded="true"] { border-color: var(--azk-brand); }
.azk-dropdown-chevron {
  flex: none; width: 16px; height: 16px;
  transition: transform .18s var(--ease-out);
}
.azk-dropdown-trigger[aria-expanded="true"] .azk-dropdown-chevron { transform: rotate(180deg); }

.azk-dropdown-menu {
  position: absolute; z-index: 20; inset-inline-start: 0; top: calc(100% + 4px);
  min-width: 133px; padding: 4px; margin: 0; list-style: none;
  border-radius: var(--azk-radius-lg); background: var(--azk-color-surface);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .08), 0 0 0 1px rgba(0, 0, 0, .04);
}
.azk-dropdown-menu[hidden] { display: none; }
.azk-dropdown-menu-head {
  padding: 5px 12px;
  font-size: var(--azk-t-xs-size); line-height: var(--azk-t-xs-line);
  color: var(--azk-color-text-muted);
}
.azk-dropdown-item {
  display: flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 5px 12px; border-radius: 6px; cursor: pointer;
  font-size: var(--azk-t-sm-size); line-height: var(--azk-t-sm-line);
  color: var(--azk-color-text); white-space: nowrap;
}
.azk-dropdown-item:hover,
.azk-dropdown-item[data-active="true"] { background: var(--azk-fill-tertiary); }
.azk-dropdown-item[aria-selected="true"] { font-weight: var(--azk-w-demi); }

.azk-dropdown-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; }

.azk-table-scroll { overflow-x: auto; scrollbar-width: thin; }
.azk-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  border-radius: var(--azk-radius-lg); overflow: hidden;
  background: var(--azk-color-surface);
  font-size: var(--azk-t-sm-size); line-height: var(--azk-t-sm-line);
}
.azk-table caption {
  padding: 8px; text-align: start;
  font-size: var(--azk-t-sm-size); line-height: var(--azk-t-sm-line);
  color: var(--azk-color-text);
}
.azk-table th {
  height: 56px; padding-inline: 16px; text-align: start;
  font-weight: var(--azk-w-demi); color: var(--azk-color-text);
  background: var(--azk-fill-quaternary);
  white-space: nowrap;
}
.azk-table td {
  height: 64px; padding: 16px; vertical-align: middle;
  font-weight: var(--azk-w-regular); color: var(--azk-color-text);
}
.azk-table tbody tr + tr th,
.azk-table tbody tr + tr td { border-block-start: var(--azk-line) solid var(--azk-border-secondary); }
.azk-table tbody th {
  background: none; font-weight: var(--azk-w-regular);
  display: flex; align-items: center; gap: 16px; height: 64px;
}
.azk-table-logo { flex: none; width: 32px; height: 32px; object-fit: contain; }
.azk-table-logo-fallback {
  flex: none; display: grid; place-items: center; width: 32px; height: 32px;
  border-radius: 50%; background: var(--azk-fill-tertiary);
  font-size: var(--azk-t-xs-size); color: var(--azk-color-text-muted);
}
.azk-table-empty, .azk-table-note {
  padding: 24px 16px; text-align: center;
  font-size: var(--azk-t-sm-size); line-height: var(--azk-t-sm-line);
  color: var(--azk-color-text-muted);
}

.azk-table-state { padding: 24px 16px; text-align: center;
  font-size: var(--azk-t-sm-size); line-height: var(--azk-t-sm-line); }
.azk-table-state[data-state="loading"] { color: var(--azk-color-text-muted); }
.azk-table-state[data-state="empty"]   { color: var(--azk-color-text-muted); }
.azk-table-state[data-state="partial"] { color: var(--azk-color-text); }
.azk-table-state[data-state="error"]   { color: var(--azk-error); }
.azk-table-state[data-state="retrying"]{ color: var(--azk-color-text-muted); }
.azk-table-retry { margin-inline-start: 8px; }
.azk-table-skeleton td { height: 64px; }
.azk-table-skeleton span {
  display: block; height: 14px; border-radius: 7px;
  background: linear-gradient(90deg, var(--azk-fill-quaternary), var(--azk-fill-tertiary), var(--azk-fill-quaternary));
  background-size: 200% 100%; animation: azk-table-shimmer 1.4s linear infinite;
}
@keyframes azk-table-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  .azk-table-skeleton span { animation: none; }
}

.azk-tabs {
  display: flex; flex-direction: row; align-items: center; gap: 24px;
  overflow-x: auto; scrollbar-width: none;
}
.azk-tabs::-webkit-scrollbar { display: none; }

.azk-tabs-item {
  flex: none; display: inline-flex; align-items: center; gap: 8px;
  padding-block: 8px; background: none; border: 0; cursor: pointer;
  font-size: var(--azk-t-md-size); line-height: var(--azk-t-md-line);
  font-weight: var(--azk-w-regular); color: var(--azk-border);
  white-space: nowrap;
  transition: color .18s ease;
}
.azk-tabs-item img, .azk-tabs-item svg { flex: none; width: 24px; height: 24px; }
.azk-tabs-item[aria-selected="true"] { color: var(--azk-color-text); }
.azk-tabs-item[aria-selected="true"]::after {
  content: ''; position: absolute; inset-inline: 0; bottom: 0; height: 2px;
  background: var(--azk-brand); border-radius: 2px;
}
.azk-tabs-item { position: relative; }
.azk-tabs-item:hover:not([disabled]) { color: var(--azk-ink-hover); }
.azk-tabs-item[disabled] { cursor: not-allowed; color: var(--azk-border); }
.azk-tabs-soon {
  font-size: var(--azk-t-xs-size); line-height: var(--azk-t-xs-line);
  padding-inline: 8px; border-radius: var(--azk-radius-sm);
  background: var(--azk-fill-quaternary); color: var(--azk-color-text-muted);
}
.azk-tabs-panel:focus-visible { outline: 3px solid var(--azk-brand); outline-offset: 4px; }

.azk-back-to-top {
  position: fixed; inset-block-end: 24px; inset-inline-start: 24px; z-index: 90;
  display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 50%; background: #fff; color: var(--ink);
  box-shadow: 0 4px 16px rgba(18,18,18,.14);
  transition: background-color .18s ease, transform .18s ease;
}
.azk-back-to-top[hidden] { display: none; }
.azk-back-to-top:hover { background: #F4F4F4; transform: translateY(-2px); }
.azk-back-to-top svg { width: 18px; height: 18px; }

.azk-back-to-top:focus-visible {
  outline: 2px solid var(--blue); outline-offset: 2px;
}

@media (max-width: 980px) {
  .azk-back-to-top { inset-block-end: 16px; inset-inline-start: 16px; width: 40px; height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .azk-back-to-top { transition: none; }
  .azk-back-to-top:hover { transform: none; }
}

@media print {
  .azk-back-to-top { display: none; }
}

.azk-closing-cta { padding-block: 0; }
.azk-closing-cta .azk-closing-cta-band { margin-block-start: 0; }

.azk-closing-cta-band {
  position: relative; z-index: 2; overflow: hidden; max-width: 920px;
  display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap;
  background-color: #FDFDFD;
  background-image: var(--azk-cta-glow,
                    radial-gradient(266px 271px at 33.3% -59.8%,
                                    rgba(0,181,255,.089) 0%, rgba(255,255,255,.47) 100%));
  border: 0; box-shadow: inset 0 0 0 0.5px #FFFFFF, var(--elev-3); border-radius: 20px;
  padding: 32px; margin: 48px auto 0;
}
.azk-closing-cta-band > * { position: relative; z-index: 1; }
.azk-closing-cta-band h3 { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--w-demi); color: var(--t-heading); }

@media (max-width: 760px) {

  .azk-closing-cta-band { padding: 32px 20px; text-align: center; justify-content: center; }
  .azk-closing-cta-band h3 { font-size: 24px; }
}
@media (max-width: 980px) {
  .azk-closing-cta { padding-block-start: 32px; }
  .azk-closing-cta-band { flex-direction: column; align-items: stretch; gap: 24px; text-align: center; }
  .azk-closing-cta-band .azk-button { align-self: center; }
}

@media (max-width: 720px) {

  .azk-closing-cta-band { flex-direction: column; text-align: center; }
}

.azk-closing-cta-btn { min-width: 160px; }

.azk-closing-cta-btn .azk-button-icon-glyph { display: var(--azk-cta-icon, block); }
@media (max-width: 760px) { .azk-closing-cta-btn { min-width: 152px; } }

.azk-closing-cta-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.azk-closing-cta-lede {
  font-size: var(--azk-t-md-size); line-height: var(--azk-t-md-line);
  color: var(--body);
}
.azk-closing-cta-lede:empty { display: none; }

.azk-contact-modal {
  position: fixed; inset: 0; margin: auto;
  width: 605px; max-width: calc(100% - 32px); max-height: calc(100% - 32px);
  padding: 0;
  border: 0; border-radius: 24px; background: #fff; color: var(--ink);
  box-shadow: 0 24px 60px rgba(18,18,18,.22);
}
.azk-contact-modal::backdrop { background: rgba(18,18,18,.45); }

.azk-contact-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px; border-block-end: 1px solid #F0F0F0;
}
.azk-contact-modal-title { font-size: var(--t-md); line-height: 24px; font-weight: 600; }
.azk-contact-modal-x {
  display: grid; place-items: center; width: 32px; height: 32px;
  border-radius: var(--r-btn-md); color: var(--ink); box-shadow: inset 0 0 0 1px var(--edge);
}
.azk-contact-modal-x:hover { background: #F7F7F7; }
.azk-contact-modal-x svg { width: 16px; height: 16px; }

.azk-contact-modal-body { padding: 28px 24px 24px; text-align: center; }
.azk-contact-modal-art { width: 162px; height: auto; margin: 0 auto 24px; }
.azk-contact-modal-lede { font-size: var(--t-md); line-height: 24px; }
.azk-contact-modal-num { margin-block: 20px; padding: 18px; border-radius: var(--r-card); background: #EAF6FE; }
.azk-contact-modal-num-label { display: block; font-size: var(--t-sm); line-height: 22px; color: var(--blue); }
.azk-contact-modal-num-val { display: block; margin-block-start: 8px; font-size: var(--t-lg); line-height: 32px; font-weight: 700; color: var(--blue); }
.azk-contact-modal-ok { width: 100%; }

.azk-footer {
  background: var(--footer-bg); color: #C7CAD3;
  margin-top: calc(var(--cta-overlap) * -1);
  padding: calc(37px + var(--cta-overlap)) 0 32px;
}
.azk-footer-wrap { max-width: 1280px; padding: 0 32px; }

.azk-footer-top { display: grid; grid-template-columns: 279.5fr 150fr 150fr 279.5fr; gap: 119px; padding-bottom: 32px; }
@media (max-width: 1200px) { .azk-footer-top { gap: 48px; } }

.azk-footer-mark { display: inline-block; line-height: 0; }
.azk-footer-mark img { width: 132px; height: 26px; }

.azk-footer-desc { font-size: var(--fs-body); line-height: var(--lh-body); margin-top: 24px; color: #fff; }
@media (max-width: 980px) {
  .azk-footer-desc { margin-top: 16px; }
}
.azk-footer h4 { color: #fff; font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--w-demi); margin-bottom: 24px; }
@media (max-width: 980px) { .azk-footer h4 { margin-bottom: 16px; } }
.azk-footer ul { list-style: none; display: grid; gap: 0; }
.azk-footer ul a { color: #fff; font-size: var(--fs-body); line-height: var(--lh-body);
  display: flex; align-items: center; justify-content: flex-start; min-height: 40px;
  border-radius: 10px; transition: color .18s; }
.azk-footer ul a:hover { color: #fff; opacity: .75; }

.azk-footer-addr { display: flex; flex-direction: column; gap: 12px;
  font-size: var(--fs-body); line-height: var(--lh-body); color: #fff; }
.azk-footer-addr a { color: var(--blue); direction: ltr; display: inline-block;
                     font-size: var(--fs-small); line-height: var(--lh-small); }

.azk-footer-bottom {
  box-shadow: inset 0 1px 0 var(--t-disabled); padding: 16px 0 0;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  text-align: start; font-size: var(--fs-small); line-height: var(--lh-small); color: #fff;
}
.azk-footer-socials { display: flex; gap: 8px; }
.azk-footer-socials a {
  width: 40px; height: 40px; border: 0; border-radius: 12px; background: none;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, transform .15s var(--ease-out);
}
.azk-footer-socials img { width: 40px; height: 40px; }
.azk-footer-socials a:hover { background: rgba(255,255,255,.06); transform: translateY(-2px); }

@media (max-width: 860px) {
  .azk-footer-top {

    grid-template-columns: repeat(2, min(150px, calc((100% - 64px) / 2))) minmax(0, 1fr);

    justify-content: start;
    gap: 24px 32px;
  }
  .azk-footer-top > :nth-child(1),
  .azk-footer-top > :nth-child(4) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 980px) {

  .azk-footer { padding-block-start: 120px; padding-block-end: 24px; }
  .azk-footer-wrap { padding-inline: var(--gutter); }
  .azk-footer-top { padding-bottom: 24px; }

  .azk-footer-bottom {
    flex-direction: column; align-items: center; gap: 0;
    box-shadow: none; padding: 0; text-align: center;
  }
  .azk-footer-bottom .azk-footer-socials { order: 1; justify-content: center; }
  .azk-footer-bottom > span {
    order: 2; width: 100%; margin-block-start: 24px; padding-block-start: 24px;
    box-shadow: inset 0 1px 0 var(--t-disabled);
    color: var(--label);
  }
}

@media (prefers-reduced-motion: reduce) {
  .azk-footer-socials a { transition: none; }
  .azk-footer-socials a:hover { transform: none; }
}

.azk-header { position: sticky; top: 0; z-index: 100; padding-block: 32px 0; }

.azk-header-pill {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 760px; max-width: calc(100% - 2 * var(--gutter)); height: 48px;
  margin-inline: auto; padding: 8px 12px;
  background: rgba(255,255,255,.6); border-radius: var(--r-btn);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.azk-header-brand img { width: 112px; height: 22px; }

.azk-header-nav { display: flex; }
.azk-header-nav a {
  display: inline-flex; align-items: center; height: 32px; padding-inline: 12px;
  border-radius: var(--r-btn-sm); font-size: var(--t-sm); line-height: 22px; color: var(--ink);
  transition: background-color .18s ease;
}
.azk-header-nav a:hover { background: rgba(18,18,18,.05); }

.azk-header-burger { display: none; width: 32px; height: 32px; padding: 7px 4px; }
.azk-header-burger span { display: block; height: 2px; border-radius: 2px; background: #5A5A5A; }
.azk-header-burger span + span { margin-block-start: 5px; }
.azk-header-drawer { display: none; }
.azk-header-drawer a { color: var(--ink); }

#azkHeaderData { display: none; }

@media (max-width: 980px) {
  .azk-header { padding-block-start: 12px; }
  .azk-header { transition: transform .26s var(--ease-out, ease); will-change: transform; }
  .azk-header.azk-header-away { transform: translateY(calc(-100% - 12px)); }

  .azk-header-pill { width: 100%; height: 48px; padding-inline: 8px; }
  .azk-header-nav { display: none; }

  .azk-header-burger { display: block; order: 1; width: 26px; height: 26px; }
  .azk-header-brand { order: 2; }
  .azk-header-cta, #azkHeaderCta { order: 3; }
  .azk-header-brand img { width: 92px; height: 18px; }

  .azk-header-drawer {
    display: block; position: absolute; inset-inline: var(--gutter); top: 68px;
    padding: 8px; background: #fff; border-radius: var(--r-card);
    box-shadow: 0 12px 32px rgba(18,18,18,.12);
  }
  .azk-header-drawer[hidden] { display: none; }
  .azk-header-drawer a { display: block; padding: 14px 12px; font-size: var(--t-md); }
  .azk-header-drawer a + a { border-block-start: 1px solid #F0F0F0; }
}

@media (prefers-reduced-motion: reduce) {
  .azk-header { transition: none; }
  .azk-header.azk-header-away { transform: none; }
}

@media print {
  .azk-header { display: none; }
}

.azk-skip-link {
  position: absolute; top: 0; inset-inline-start: 0; z-index: 200;
  padding: 12px 20px;
  background: var(--ink); color: #fff;
  border-radius: 0 0 12px 0;
  font-size: var(--t-md); line-height: 24px;
}

.azk-skip-link:not(:focus) {
  width: 1px; height: 1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.azk-skip-link:focus {
  outline: 2px solid var(--blue); outline-offset: 2px;
}

.commission-tier-card {
  border-radius: 12px;
  border: 1px solid #DCDCDC;
  background: radial-gradient(140.98% 74.18% at 43.26% 7.08%,
                              var(--wash, #FFFFFF) 0%, rgba(255,255,255,0) 100%);
}
.commission-tier-card[data-tier="platinum"] { --wash: var(--wash-platinum); }
.commission-tier-card[data-tier="gold"]     { --wash: var(--wash-gold); }
.commission-tier-card[data-tier="silver"]   { --wash: var(--wash-silver); }
.commission-tier-card[data-tier="bronze"]   { --wash: var(--wash-bronze); }
.commission-tier-card[data-tier="cash"]     { --wash: var(--wash-bronze); }

@media (min-width: 861px) {
  .commission-tier-card {
    height: 232px; padding: 16px;
    display: flex; flex-direction: column;
    justify-content: center; align-items: center;
    gap: 20px; flex: 1 0 0;
  }
  .commission-tier-card .commission-tier-gem,
  .commission-tier-card img {
    width: 64px; height: 64px; padding: 0 8px;
    display: flex; justify-content: center; align-items: center;
    flex-shrink: 0; aspect-ratio: 1 / 1; object-fit: contain;
  }
}
.commission-tier-card img { object-fit: contain; }

.commission-tier-select-menu {
  width: 181px; padding: 4px;
  display: flex; flex-direction: column; align-items: flex-start;
  border-radius: 12px; background: #FFF; border: 0;
  box-shadow: 0 6px 16px 0 rgba(0,0,0,.08),
              0 3px 6px -4px rgba(0,0,0,.12),
              0 9px 28px 8px rgba(0,0,0,.05);
}
.commission-tier-select-menu button {
  display: flex; height: 40px; padding: 5px 12px;
  justify-content: flex-end; align-items: center; gap: 8px;
  align-self: stretch; border-radius: 6px; background: transparent;
  overflow: hidden; color: rgba(0,0,0,.88);
  text-align: right; text-overflow: ellipsis;
  font-size: 13px; font-weight: 400; line-height: 22px;
}
.commission-tier-select-menu button:hover,
.commission-tier-select-menu button.commission-sel {
  background: rgba(0,0,0,.04);
}
.commission-tier-select-menu button img {
  width: 16px; height: 16px; padding: 0 2px;
  flex-shrink: 0; aspect-ratio: 1 / 1; object-fit: contain;
}

.commission-bnf-grid.commission-is-copper,
#benefitsGrid.commission-is-copper { position: relative; }
.commission-is-copper > .commission-bnf-card {
  filter: blur(3px); opacity: .5; pointer-events: none; user-select: none;
}
.commission-copper-veil {
  position: absolute; inset: 0; z-index: 1;
  background: rgba(247, 247, 247, .35);
  backdrop-filter: blur(2px);
}
.commission-copper-card {
  position: absolute; z-index: 2;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 407px; max-width: calc(100% - 32px);
  padding: 20px;
  border-radius: 20px; border: 1px solid #BDBDBD; background: #FFF;
  box-shadow: 0 6px 16px rgba(0,0,0,.08), 0 9px 28px 8px rgba(0,0,0,.05);
  text-align: right; line-height: var(--lh-body);
}

.commission-bnf-cost {
  background-image: linear-gradient(180deg, #FFFDF3 0%, #FDF8E7 100%);
}

#main { display: block; }

:root {
  --blue:        #05A1FF;
  --blue-deep:   #0089E0;

  --ink:         #121212;
  --t-heading:   #121212;
  --t-strong:    #121212;
  --t-nav:       #2D2F2F;
  --t-body:      #525252;
  --t-soft:      #7C7C7C;
  --t-disabled:  #BDBDBD;

  --bg-page:     #F7F7F7;
  --bg-card:     #F2F2F2;
  --bg-white:    #FFFFFF;
  --border:      #EFEFEF;
  --divider:     #EBEBEB;

  --wash-platinum: #F0F5FF;
  --wash-gold:     #FFFBE6;
  --wash-silver:   #F0F0F0;
  --wash-bronze:   #FFF2E8;

  --tier-platinum: #0F249E;
  --tier-gold:     #FAAD14;
  --tier-silver:   #7D7D7D;
  --tier-bronze:   #FA541C;
  --tier-cash:     #121212;

  --elev-2:      0 10px 24px rgba(18,30,60,.09);
  --elev-3:      0 24px 60px rgba(18,30,60,.22);
  --footer-bg:   #111111;
  --cta-overlap: 48px;

  --r-card: 16px;
  --shadow-card: 0 1px 2px rgba(18, 18, 18, .04);
  --shadow-float: 0 14px 34px rgba(18, 30, 60, .10);

  --ease-out: cubic-bezier(.22, .8, .3, 1);

  --fs-display:    38px; --lh-display:    46px;
  --fs-display-m:  30px; --lh-display-m:  38px;
  --fs-h2:         24px; --lh-h2:         32px;
  --fs-h3:         20px; --lh-h3:         28px;
  --fs-body:       15px; --lh-body:       24px;
  --fs-small:      13px; --lh-small:      22px;
  --fs-micro:      11px; --lh-micro:      20px;
  --w-reg:         400;
  --w-demi:        600;

  --line:        #DBDBDB;
  --line-soft:   #E0E0E0;
}

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

html { scroll-behavior:auto; }
#commRows, #benefitsGrid, #matrixInline, #faqList { overflow-anchor:none; }
html { background-color:var(--bg-page); }
body {
  font-family:'IRANSansX', 'Vazirmatn', system-ui, -apple-system, sans-serif;

  background:url('/landing/assets/img/hero-bg.webp') no-repeat top center / 100% auto, var(--bg-page);
  color:var(--t-body);
  font-size:14px;
  line-height:2;
  direction:rtl;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img { max-width:100%; display:block; }
a { color:var(--blue); text-decoration:none; }
button { font-family:inherit; cursor:pointer; }

.commission-only-m { display:none; }
@media (max-width:860px) { .commission-only-m { display:revert; } .commission-only-d { display:none; } }

.commission-wrap { max-width:1160px; margin:0 auto; padding:0 24px; }

.commission-section { padding:32px 0; }
.commission-panel-shell ~ .commission-section { margin-top:48px; }

.commission-section-head { text-align:center; max-width:920px; margin:0 auto 32px; }
.commission-section-head h2 { font-size:var(--fs-h2); font-weight:var(--w-demi); color:var(--t-heading); line-height:var(--lh-h2); margin-bottom:12px; }
.commission-section-head p  { font-size:var(--fs-body); line-height:var(--lh-body); color:var(--t-body); }
.commission-btn-primary > svg:first-child, .commission-matrix-open-link > svg:first-child { margin-inline-start:-4px; }
.commission-btn-primary > svg:last-child,  .commission-matrix-open-link > svg:last-child  { margin-inline-end:-4px; }

:where(a, button, input, [tabindex]):focus-visible {
  outline:2px solid var(--blue); outline-offset:2px; border-radius:6px;
}

:root { --hdr-w:760px; }
.commission-hdr.commission-hdr-hidden { transform:translateY(calc(-100% - 18px)); opacity:0; pointer-events:none; }
@media (prefers-reduced-motion:reduce) { }

#nav { display:flex; gap:0; }

#nav a {
  color:var(--ink); font-size:var(--fs-small); line-height:var(--lh-small);
  font-weight:var(--w-reg); transition:color .18s, background .18s; position:relative;
  display:inline-flex; align-items:center; height:32px; padding:0 16px;
  border-radius:7px;
}
#nav a:hover { color:var(--ink); background:rgba(18,18,18,.04); }
#nav a.commission-active { color:var(--ink); font-weight:var(--w-reg); }

@media (max-width: 860px) {
  :root { --hdr-w:100%; }
  #nav { display:none; }
}

.commission-hero {
  padding:130px 0 0; overflow:hidden;
  background:none;
}
.commission-hero .commission-wrap { position:relative; }
:root { --hero-arc-w:838px; }
.commission-hero-gems { position:relative; height:150px; max-width:var(--hero-arc-w); margin:0 auto; }
.commission-hero-arc { position:absolute; left:-7.04%; top:-39px; width:100%; height:auto; }
@media (min-width:721px) and (max-width:956px) {
  .commission-hero-arc { left:-24px; }
}
.commission-gem { position:absolute; height:auto; will-change:transform; }
.commission-g1 { width:73px; left:18.08%; top:54px; }
.commission-g2 { width:64px; left:38.78%; top:1px; }
.commission-g3 { width:51px; left:58.59%; top:2px; }
.commission-g4 { width:35px; left:77.39%; top:40.5px; }
.commission-hero-title {
  text-align:center; font-weight:var(--w-demi); color:#121212;
  font-size:var(--fs-display); line-height:var(--lh-display); margin:28px 0 6px;
}

@media (max-width: 720px) {

  .commission-hero-gems { height:79.5px; max-width:none; }
  .commission-hero-arc { top:-9px; left:-4.48%; width:111.34%; }

  .commission-g1 { width:46.8px; left:9.25%;  top:26px; }
  .commission-g2 { width:41px;   left:37.01%; top:1px;  }
  .commission-g3 { width:32.7px; left:62.99%; top:0;    }
  .commission-g4 { width:22.44px;left:86.57%; top:22px; }
  body { background-size:800px auto, auto; }
}

.commission-timeline-sec { padding:26px 0 56px; overflow-x:clip; }
.commission-timeline { position:relative; padding-top:73px; padding-bottom:66px; }

.commission-tl-mascot {
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:76px; height:65px;
  filter:drop-shadow(0 8px 14px rgba(18,30,60,.18));
}

.commission-timeline-line {
  position:absolute; top:0; bottom:0; left:50%; width:0;
  border-left:1.5px dashed #BDBDBD;
}

.commission-tl-item {
  position:relative; width:28.78%;

  box-shadow:inset 0 0 0 1.5px #FFF;
  background:url('/landing/assets/img/pattern-bg.webp') 0% 0% / 50px 50px repeat,
             var(--bg-page);
  padding:32px; margin-bottom:8px;
  font-size:var(--fs-small); color:var(--t-body); line-height:var(--lh-small);
}
.commission-tl-item.commission-right { border-radius:20px 20px 20px 0; }
.commission-tl-item.commission-left  { border-radius:20px 20px 0 20px; }
.commission-tl-item.commission-right { margin-right:18.79%; margin-left:auto; }
.commission-tl-item.commission-left  { margin-left:18.71%;  margin-right:auto; }

.commission-tl-item.commission-left[data-fig="tl-2"] { padding-top:24px; }

.commission-tl-fig { position:absolute; display:block; }

.commission-tl-fx { position:absolute; inset:0; display:block; pointer-events:none; }
.commission-tl-ic  { display:block; width:100%; height:100%;
                     filter:drop-shadow(0 10px 16px rgba(18,30,60,.14)); }
[data-fig="tl-1"] .commission-tl-fig { width:35px;  height:51px;  top:21px; right:-18px; left:auto;  bottom:auto; transform:none; }
[data-fig="tl-2"] .commission-tl-fig { width:80px;  height:80px;  top:23px; left:-40px;  right:auto; bottom:auto; transform:none; }
[data-fig="tl-3"] .commission-tl-fig { width:80px;  height:80px;  top:85px; right:-29px; left:auto;  bottom:auto; transform:none; }
[data-fig="tl-4"] .commission-tl-fig { width:124px; height:124px; top:3px;  left:-62px;  right:auto; bottom:auto; transform:none; }

.commission-tl-dot {
  position:absolute; bottom:0; width:12px; height:12px; border-radius:50%;
  background:#BDBDBD;
}
.commission-tl-item.commission-right .commission-tl-dot { left:calc(-8.4433% - 6.69px); }
.commission-tl-item.commission-left  .commission-tl-dot { right:calc(-8.7213% - 7.70px); }

@media (max-width: 720px) {
  .commission-timeline { padding-top:66px; }
  .commission-tl-mascot { width:58px; }
  .commission-timeline-line { left:50%; }
  .commission-tl-item { width:100%; margin:0 0 14px; }
  .commission-tl-item.commission-right { margin-right:0; margin-left:0; }
  .commission-tl-item.commission-left  { margin-left:0;  margin-right:0; }
  .commission-tl-item.commission-right { padding:22px 34px 22px 24px; }
  .commission-tl-item.commission-left  { padding:22px 24px 22px 40px; }
  .commission-tl-item.commission-right[data-fig="tl-3"] { padding-right:46px; }
  .commission-tl-item.commission-left[data-fig="tl-4"]  { padding-left:44px; }
  .commission-tl-body { overflow-wrap:break-word; }
  [data-tour="tl-1"] .commission-tl-ic { height:47px; top:16px;    right:-14px; left:auto;  bottom:auto; transform:none; }
  [data-tour="tl-2"] .commission-tl-ic { height:60px; top:50%;     left:-14px;  right:auto; bottom:auto; transform:translateY(-50%) scaleX(-1); }
  [data-tour="tl-3"] .commission-tl-ic { height:46px; bottom:2px;  right:-12px; left:auto;  top:auto;    transform:none; }
  [data-tour="tl-4"] .commission-tl-ic { height:54px; top:32px;    left:-16px;  right:auto; bottom:auto; transform:none; }
  .commission-tl-dot { display:none; }
}

#definitions { padding:56px 0 32px; }
.commission-def-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; max-width:920px; margin:0 auto; }
.commission-def-card {
  position:relative;

  border-radius:20px;
  box-shadow:inset 0 0 0 1.5px #FFF;
  background:url('/landing/assets/img/pattern-bg.webp') 0% 0% / 50px 50px repeat,
             var(--bg-page);

  display:flex; flex-direction:column; justify-content:center;
  padding:32px 32px 32px 64px; overflow:visible; min-height:188px;
}
.commission-def-card h3 {
  font-size:var(--fs-body); line-height:var(--lh-body); font-weight:var(--w-demi);
  color:var(--t-strong); margin-bottom:12px;
}
.commission-def-card h3 .commission-def-sub { margin-inline-start:4px; }
.commission-def-card p  { font-size:var(--fs-small); line-height:var(--lh-small); color:var(--t-body); }
.commission-def-card b  { color:var(--t-body); font-weight:400; }
.commission-def-ic { position:absolute; width:auto; filter:drop-shadow(0 10px 16px rgba(18,30,60,.14)); }

.commission-def-card:first-child .commission-def-ic { width:57px; height:82px; left:1px; top:53px; bottom:auto; transform:none; }
.commission-def-card:last-child  .commission-def-ic { width:57px; height:69px; left:1px; top:69px; bottom:auto; transform:none; }

.commission-panel-shell { max-width:1160px; margin:0 auto; padding:0 24px; }
.commission-panel-card {
  max-width:920px; margin:0 auto;
  background:var(--bg-white); border-radius:20px;

  padding:24px;
}
.commission-panel-card .commission-wrap { max-width:none; padding:0; }
.commission-panel-card .commission-section { padding:0; }
.commission-panel-card > .commission-section + .commission-section { margin-top:32px; }
.commission-panel-card .commission-tier-cards,
.commission-panel-card .commission-calc-grid,
.commission-panel-card .commission-tier-selectbar,
.commission-panel-card .commission-benefits-grid,
.commission-panel-card .commission-comm-tabs,
.commission-panel-card .commission-comm-table,
.commission-panel-card .commission-comm-foot { max-width:872px; }
@media (max-width: 860px) {
  .commission-panel-shell { padding:0; }
  .commission-panel-card { background:none; border-radius:0; padding:0; max-width:none; }
  .commission-panel-card .commission-wrap { max-width:1160px; padding:0 24px; }
  .commission-panel-card .commission-section { padding:32px 0; }
  .commission-panel-card > .commission-section + .commission-section { margin-top:0; }
}

.commission-tier-cards {
  display:grid; grid-template-columns:repeat(4, 1fr); gap:24px;
  max-width:872px; margin:0 auto;
  background:none; border-radius:0; padding:0;
}
.commission-tier-card {

  border-radius:12px;

  min-height:232px; padding:16px; text-align:center; cursor:pointer;

  display:flex; flex-direction:column; justify-content:center; gap:0;
  transition:transform .2s var(--ease-out), box-shadow .2s, background .2s, border-color .2s;
}
.commission-tier-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-float); }

.commission-tier-card img { width:64px; height:64px; margin:0 auto 20px; transition:transform .25s var(--ease-out); }
.commission-tier-card:hover img { transform:scale(1.08) rotate(-4deg); }
.commission-tc-lbl  { font-size:var(--fs-small); line-height:var(--lh-small); color:var(--t-body); margin-bottom:8px; }
.commission-tc-name { font-size:var(--fs-body); line-height:var(--lh-body); font-weight:var(--w-reg); color:var(--t-strong); }
.commission-tier-card.commission-active .commission-tc-name { font-size:var(--fs-h3); line-height:var(--lh-h3); font-weight:var(--w-demi); }
.commission-tier-card.commission-active { background:var(--ink); border-color:#DCDCDC; }
.commission-tier-card.commission-active .commission-tc-lbl  { color:#999999; }
.commission-tier-card.commission-active .commission-tc-name { color:#fff; }

:root { --tier-wash-x:15.27%; }
.commission-tier-card[data-tier="bronze"]   { background:radial-gradient(82.65% 108.39% at var(--tier-wash-x) 0%, var(--wash-bronze)   0%, rgba(255,255,255,0) 100%); }
.commission-tier-card[data-tier="silver"]   { background:radial-gradient(82.65% 108.39% at var(--tier-wash-x) 0%, var(--wash-silver)   0%, rgba(255,255,255,0) 100%); }
.commission-tier-card[data-tier="gold"]     { background:radial-gradient(82.65% 108.39% at var(--tier-wash-x) 0%, var(--wash-gold)     0%, rgba(255,255,255,0) 100%); }
.commission-tier-card[data-tier="platinum"] { background:radial-gradient(82.65% 108.39% at var(--tier-wash-x) 0%, var(--wash-platinum) 0%, rgba(255,255,255,0) 100%); }

.commission-tier-card.commission-active[data-tier] {
  background:url('/landing/assets/img/pattern-bg.webp') 0% 0% / 50px 50px repeat, #121212;
}
@media (max-width: 720px) {

  .commission-tier-cards { display:grid; grid-template-columns:repeat(4, 1fr); gap:6px;
    background:var(--bg-white); border-radius:20px; padding:12px 8px; }
  .commission-tier-card { min-height:188px; padding:20px 6px 16px; }
}

.commission-calc-grid {
  display:flex;
  padding:4px;
  justify-content:flex-end;
  align-items:center;
  align-self:stretch;
  border-radius:12px;

  border:0; box-shadow:inset 0 0 0 1.5px #F0F0F0;
  background:url('/landing/assets/img/pattern-bg.webp') 0% 0% / 50px 50px repeat,
             var(--bg-page);
  max-width:872px; margin:0 auto;
}
.commission-calc-panel { flex:0 0 333px; align-self:stretch;
  display:flex; flex-direction:column; justify-content:center; gap:24px; }

.commission-calc-panel {
  background:var(--bg-white);
  border:0; box-shadow:inset 0 0 0 1px #F0F0F0;
  border-radius:12px;
  padding:24px 32px;
}
.commission-calc-panel h3 {
  font-size:var(--fs-h3); line-height:var(--lh-h3); font-weight:var(--w-demi);
  color:var(--t-strong); margin:0;
}
.commission-calc-panel .commission-sub {
  font-size:var(--fs-small); line-height:var(--lh-small); color:var(--t-body);
  margin:0; padding-bottom:24px; border-bottom:1px solid var(--line);
}

.commission-matrix-open-link {
  display:none; align-items:center; gap:8px; background:none; border:none;
  color:var(--t-strong); font-size:var(--fs-small); line-height:var(--lh-small);
  font-weight:var(--w-reg); padding:0; margin-bottom:14px;
}
.commission-matrix-open-link svg { transition:transform .2s; }
.commission-matrix-open-link:active svg { transform:translateX(-3px); }

.commission-slider-block { padding:0; border-bottom:0; display:flex; flex-direction:column; }
.commission-slider-block + .commission-slider-block { margin-top:8px; }
.commission-slider-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; height:24px; }
.commission-slider-top .commission-lbl { font-size:var(--fs-body); line-height:var(--lh-body); font-weight:var(--w-demi); color:var(--t-strong); }
.commission-slider-top .commission-val { font-size:var(--fs-small); line-height:var(--lh-small); font-weight:var(--w-demi); color:var(--ink); transition:transform .18s var(--ease-out); }
.commission-slider-top .commission-val.commission-bump { transform:scale(1.12); }
.commission-slider-ends { display:flex; justify-content:space-between; margin-top:12px;
  font-size:var(--fs-micro); line-height:var(--lh-micro); font-weight:var(--w-demi); color:var(--t-disabled); }

.commission-rng { display:block; margin:1.5px 0; -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:27px;
  background:linear-gradient(to left, var(--blue) var(--fill,50%), #F0F0F0 var(--fill,50%));
  outline-offset:4px; }
@media (max-width: 760px) {
  .commission-rng { height:44px; margin:-17.5px 0; background-size:100% 6px; background-position:center;
         background-repeat:no-repeat; }
  .commission-rng::-moz-range-track    { height:6px; }
  .commission-rng::-moz-range-progress { height:6px; }
}
.commission-rng::-webkit-slider-thumb {
  -webkit-appearance:none; width:20px; height:20px; border-radius:50%;
  background:#fff; border:0.5px solid #DBDBDB;
  box-shadow:0 3px 1px rgba(0,0,0,.04), 0 3px 8px rgba(0,0,0,.12);
  cursor:grab; transition:transform .15s var(--ease-out), box-shadow .2s;
}
.commission-rng::-webkit-slider-thumb:hover  { transform:scale(1.12); }
.commission-rng::-webkit-slider-thumb:active { cursor:grabbing; transform:scale(1.2); box-shadow:0 2px 10px rgba(72,159,248,.5); }
.commission-rng::-moz-range-thumb {
  width:20px; height:20px; border-radius:50%; background:#fff; border:0.5px solid #DBDBDB;
  box-shadow:0 3px 1px rgba(0,0,0,.04), 0 3px 8px rgba(0,0,0,.12);
}
.commission-rng::-moz-range-track { height:6px; border-radius:27px; background:#F0F0F0; }
.commission-rng::-moz-range-progress { height:6px; border-radius:27px; background:var(--blue); }

.commission-calc-result { display:flex; align-items:center; gap:12px; padding-top:24px; margin-top:0; border-top:1px solid var(--line); }

.commission-calc-result-gem { width:35px; height:35px; flex:none; filter:drop-shadow(0 6px 12px rgba(18,30,60,.18)); transition:transform .3s var(--ease-out); }
.commission-calc-result-gem.commission-pop { transform:scale(1.15) rotate(-8deg); }
.commission-calc-result-txt { flex:1; }
#calcSummary {
  font-size:var(--fs-small); line-height:var(--lh-small); color:var(--t-body);
  display:block; min-height:calc(var(--lh-small) * 2);
}
.commission-tier-out { font-size:var(--fs-h3); line-height:var(--lh-h3); font-weight:var(--w-demi); color:var(--t-strong); margin-top:4px; }
.commission-tier-out.commission-t-platinum { color:var(--tier-platinum); }
.commission-tier-out.commission-t-gold     { color:var(--tier-gold); }
.commission-tier-out.commission-t-silver   { color:var(--tier-silver); }
.commission-tier-out.commission-t-bronze   { color:var(--tier-bronze); }
.commission-tier-out.commission-t-cash     { color:var(--tier-cash); }

.commission-matrix-panel {
  display:flex;
  padding:32px 16px;
  flex-direction:column;
  justify-content:flex-start;
  align-items:stretch;
  gap:0;
  flex:1 0 0;
  align-self:stretch;
  background:none; border-radius:0;
}
.commission-matrix-panel > #matrixInline { width:100%; }

.commission-mx-grid {
  display:grid; grid-template-columns:minmax(0, 1fr) repeat(4, 80.5px);
  column-gap:4px; row-gap:0; align-items:stretch; justify-content:start;
}
.commission-mx-h {
  font-size:var(--fs-small); line-height:var(--lh-small); font-weight:var(--w-demi);
  color:var(--t-body); display:flex; align-items:center; justify-content:flex-start;
  text-align:start; padding:0 8px; min-height:83.8px; margin-bottom:8px;
}
.commission-mx-rowlbl {
  font-size:var(--fs-small); line-height:var(--lh-small); font-weight:var(--w-demi);
  color:var(--t-body); display:flex; align-items:center; padding:0 8px;
}
.commission-mx-rule { grid-column:1 / -1; height:1px; background:var(--line); margin:8px 0; }
.commission-mx-rule:last-child { background:none; margin:0; height:0; }
.commission-mx-h.commission-mx-h-lbl { font-weight:var(--w-reg); }
.commission-mx-cell {
  background:var(--bg-white); border:0; border-radius:10px;
  min-height:83.8px; display:flex; align-items:center; justify-content:center;
  font-size:var(--fs-small); line-height:var(--lh-small); font-weight:var(--w-reg); cursor:pointer;
  transition:transform .18s var(--ease-out), box-shadow .2s, background .2s,
             color .2s, border-color .2s;
}
.commission-mx-cell:hover { transform:translateY(-2px); box-shadow:var(--elev-2); }

.commission-mx-cell.commission-t-platinum { color:var(--tier-platinum); }
.commission-mx-cell.commission-t-gold     { color:var(--tier-gold); }
.commission-mx-cell.commission-t-silver   { color:var(--tier-silver); }
.commission-mx-cell.commission-t-bronze   { color:var(--tier-bronze); }
.commission-mx-cell.commission-t-cash     { color:var(--tier-cash); }

.commission-mx-cell.commission-tier-picked { border-color:transparent; }

.commission-mx-cell.commission-mx-active { color:#fff; border-color:transparent; border-radius:12px; font-weight:var(--w-demi); }
.commission-mx-cell.commission-mx-active.commission-t-platinum { background-color:var(--tier-platinum); background-image:none; box-shadow:none; }
.commission-mx-cell.commission-mx-active.commission-t-gold     { background-color:var(--tier-gold);     background-image:none; box-shadow:none; }
.commission-mx-cell.commission-mx-active.commission-t-silver   { background-color:var(--tier-silver);   background-image:none; box-shadow:none; }
.commission-mx-cell.commission-mx-active.commission-t-bronze   { background-color:var(--tier-bronze);   background-image:none; box-shadow:none; }
.commission-mx-cell.commission-mx-active.commission-t-cash     { background-color:var(--tier-cash);     background-image:none; box-shadow:none; }
@keyframes mxPulse { 0%{transform:scale(1)} 45%{transform:scale(1.07)} 100%{transform:scale(1)} }
.commission-mx-cell.commission-mx-active.commission-pulse { animation:mxPulse .45s var(--ease-out); }

@media (max-width: 980px) {
  .commission-calc-grid { grid-template-columns:1fr; }
  .commission-matrix-panel { display:none; }
  .commission-matrix-open-link { display:inline-flex; }
  .commission-calc-panel { flex:1 1 auto; }
}

.commission-tier-selectbar { display:flex; align-items:center; justify-content:flex-start; gap:12px;
  max-width:872px; margin:0 auto 32px; flex-wrap:wrap; min-height:40px; }
.commission-tier-selectbar h2 { font-size:var(--fs-h3); line-height:var(--lh-h3); font-weight:var(--w-demi); color:var(--t-heading); }
.commission-tier-select { position:relative; }
.commission-tier-select-btn {
  display:flex; align-items:center; gap:26px; background:var(--bg-white);
  border:1px solid var(--t-disabled); border-radius:8px; padding:0 16px; height:40px;
  font-size:var(--fs-small); line-height:var(--lh-small); font-weight:var(--w-reg); color:rgba(0,0,0,.40);
  min-width:123px; justify-content:space-between;
  transition:border-color .2s, box-shadow .2s;
}
.commission-tier-select-btn:hover { border-color:#DCDCDC; }
.commission-tier-select .commission-chev { transition:transform .22s var(--ease-out); color:var(--t-soft); }
.commission-tier-select.commission-open .commission-chev { transform:rotate(180deg); }
.commission-tier-select-menu {
  position:absolute; top:calc(100% + 6px); right:0; left:0; z-index:60;
  background:var(--bg-white); border:1px solid var(--border); border-radius:12px;
  box-shadow:var(--shadow-float); overflow:hidden;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .18s, transform .18s var(--ease-out), visibility .18s;
}
.commission-tier-select.commission-open .commission-tier-select-menu { opacity:1; visibility:visible; transform:none; }
.commission-tier-select-menu button {
  display:flex; align-items:center; gap:10px; width:100%; padding:10px 14px;
  background:none; border:none; color:var(--t-strong);
  font-size:var(--fs-small); line-height:var(--lh-small); font-weight:var(--w-reg);
  transition:background .15s;
}
.commission-tier-select-menu button:hover { background:var(--bg-card); }
.commission-tier-select-menu button.commission-sel { color:var(--blue); }

.commission-tier-select-menu img { width:22px; height:auto; }

.commission-benefits-grid {
  display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto auto;
  column-gap:24px; row-gap:24px; max-width:872px; margin:0 auto; align-items:start;
}
.commission-bnf-cost        { grid-column:2; grid-row:1 / span 2; }
.commission-bnf-offers-card { grid-column:1; grid-row:1; }
.commission-bnf-up          { grid-column:1; grid-row:2; }

.commission-bnf-card {
  position:relative; border-radius:20px; padding:32px;
  border:0; box-shadow:inset 0 0 0 1.5px var(--border);
  background:url('/landing/assets/img/pattern-bg.webp') 0% 0% / 50px 50px repeat;
}
.commission-bnf-cost        { height:432px; }
.commission-bnf-offers-card { height:232px; }
.commission-bnf-up          { height:176px; }
.commission-bnf-card h3 { font-size:var(--fs-body); line-height:var(--lh-body); font-weight:var(--w-demi); color:var(--t-strong); margin-bottom:16px; }

.commission-bnf-cost {
  --wash: var(--wash-gold);
  background:url('/landing/assets/img/pattern-bg.webp') 0% 0% / 50px 50px repeat,
             radial-gradient(120% 120% at 50% 0%, var(--wash) 0%, rgba(255,255,255,0) 100%);

  box-shadow:inset 0 0 0 1.5px #EFEFEF;
  text-align:right;
}
.commission-bnf-cost[data-tier="platinum"] { --wash:var(--wash-platinum); }
.commission-bnf-cost[data-tier="gold"]     { --wash:var(--wash-gold); }
.commission-bnf-cost[data-tier="silver"]   { --wash:var(--wash-silver); }
.commission-bnf-cost[data-tier="bronze"]   { --wash:var(--wash-bronze); }
.commission-bnf-cost h3 { text-align:right; }
.commission-bnf-cost .commission-cost-big, .commission-bnf-cost .commission-cost-cap { text-align:right; }
.commission-cost-big { font-size:var(--fs-display); line-height:var(--lh-display); font-weight:var(--w-demi); color:var(--ink); margin-top:16px;
  display:flex; align-items:baseline; justify-content:flex-start; gap:0; }
.commission-cost-big .commission-pct { font-size:var(--fs-h2); line-height:var(--lh-h2); font-weight:var(--w-demi); }
.commission-cost-cap { font-size:var(--fs-body); line-height:var(--lh-body); color:var(--ink); margin-top:16px; }
.commission-cost-note {
  margin-top:16px; padding:32px; text-align:right;
  background:rgba(0,0,0,.02); border:1px solid rgba(0,0,0,.06); border-radius:20px;
}
.commission-cost-note h4 { font-size:var(--fs-body); line-height:var(--lh-body); font-weight:var(--w-demi); color:var(--t-strong); margin-bottom:12px; }
.commission-cost-note p  { font-size:var(--fs-body); line-height:var(--lh-body); color:var(--t-body); }
.commission-cost-btn {
  display:block; margin-top:32px; margin-inline-start:0; margin-inline-end:auto;
  height:40px; padding:0 20px;
  background:var(--bg-white); border:1px solid var(--line); border-radius:10px;
  font-family:inherit; font-size:var(--fs-body); line-height:var(--lh-body); font-weight:var(--w-reg);
  color:var(--t-strong); cursor:pointer;
  transition:border-color .18s, transform .15s var(--ease-out), box-shadow .2s;
}
.commission-cost-btn:hover { border-color:#CFCFCF; transform:translateY(-1px); box-shadow:var(--shadow-card); }
.commission-bnf-none { font-size:var(--fs-body); line-height:var(--lh-body); color:var(--t-body); }

.commission-bnf-lead { font-size:var(--fs-body); line-height:var(--lh-body); color:var(--t-body); margin-bottom:16px; }
.commission-bnf-offers { display:grid; gap:8px; }

.commission-bnf-offer { display:flex; align-items:center; gap:8px; min-height:24px;
  font-size:var(--fs-body); line-height:var(--lh-body); }
.commission-bnf-offer .commission-dot { width:5px; height:5px; border-radius:50%; flex:none; }
.commission-bnf-offer .commission-dot.commission-g { background:#52C41A; }
.commission-bnf-offer .commission-dot.commission-o { background:#FAAD14; }
.commission-bnf-offer .commission-dot.commission-n { background:#BDBDBD; }
.commission-bnf-offer .commission-cnt  { font-weight:var(--w-reg); color:var(--t-body); flex:none; }
.commission-bnf-offer .commission-desc { font-weight:var(--w-demi); color:var(--t-body); flex:1; }
.commission-up-txt { font-size:var(--fs-body); line-height:var(--lh-body); color:var(--t-body); }
.commission-up-txt b { color:var(--t-body); font-weight:var(--w-demi); }

@media (max-width: 900px) {
  .commission-benefits-grid { grid-template-columns:1fr; grid-template-rows:none; }
  .commission-bnf-cost, .commission-bnf-offers-card, .commission-bnf-up { grid-column:1; grid-row:auto; height:auto; }
}

.commission-comm-tabs { display:flex; gap:8px; margin:0 auto 32px; max-width:872px; overflow-x:auto; padding-bottom:0; scrollbar-width:none; }

.commission-comm-tabs { padding-top:4px; margin-top:-4px; }
.commission-comm-tabs::-webkit-scrollbar { display:none; }

.commission-comm-tab {

  flex:1 1 0; min-width:max-content;
  display:inline-flex; align-items:center; gap:4px; white-space:nowrap;
  background:none; border:0; box-shadow:inset 0 0 0 1px var(--line); border-radius:8px;
  padding:8px 12px; min-height:46px; justify-content:center;
  font-size:var(--fs-body); line-height:var(--lh-body); font-weight:var(--w-reg); color:var(--t-strong);
  font-family:inherit; cursor:pointer;
  transition:background .2s, color .2s, transform .15s var(--ease-out), border-color .2s;
}
.commission-comm-tab .commission-tab-ic { width:30px; height:30px; flex:none; object-fit:contain; }
.commission-comm-tab.commission-active .commission-tab-ic { filter:brightness(1.08); }
.commission-comm-tab:disabled .commission-tab-ic { filter:grayscale(.55); opacity:.75; }

.commission-comm-tab:hover:not(.commission-active):not(:disabled) {
  box-shadow:inset 0 0 0 1px #D5D5D5; transform:translateY(-2px);
}

.commission-comm-tab.commission-active { background:var(--ink); box-shadow:none; color:var(--t-disabled); }
.commission-comm-tab:disabled { cursor:default; color:var(--t-soft); }

.commission-comm-tab .commission-soon {
  display:inline-flex; align-items:center; justify-content:center;
  height:18px; padding-inline:6px; border-radius:99px;
  font-size:10px; line-height:18px; font-weight:500; white-space:nowrap;
  background:#fff; color:#7C7C7C; box-shadow:inset 0 0 0 1px #DCDCDC;
}

.commission-comm-table { max-width:872px; margin:0 auto; background:var(--bg-white); border:0;
  border-radius:12px; overflow:hidden; box-shadow:none; }
.commission-comm-thead { display:grid; grid-template-columns:300fr 286fr 286fr; align-items:center;
  min-height:56px; padding:0 16px; border-bottom:1px solid var(--line); }
.commission-comm-thead .commission-th {
  font-size:var(--fs-small); line-height:var(--lh-small); font-weight:var(--w-demi);
  color:var(--t-strong); text-align:right; position:relative; padding:0 16px;
}
.commission-comm-thead .commission-th-name { text-align:right; }

.commission-comm-row { display:grid; grid-template-columns:300fr 286fr 286fr; align-items:center;
  min-height:64px; padding:0 16px; border-bottom:1px solid var(--line); transition:background .15s; }
.commission-comm-row:last-child { border-bottom:0; }
.commission-comm-row:hover { background:#FBFBFB; }
.commission-comm-name { display:flex; align-items:center; gap:16px; padding:0 16px;
  font-size:var(--fs-small); line-height:var(--lh-small); font-weight:var(--w-reg); color:var(--t-strong); }
.commission-comm-logo { width:40px; height:40px; flex:none; display:grid; place-items:center;
  position:relative; border-radius:50%; overflow:hidden; }
.commission-comm-logo img { position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:contain; background:#fff; }
.commission-comm-mono { display:grid; width:40px; height:40px; border-radius:50%; place-items:center; color:#fff; font-size:13px; font-weight:var(--w-demi); }
.commission-comm-cell { text-align:right; padding:0 16px;
  font-size:var(--fs-small); line-height:var(--lh-small); font-weight:var(--w-reg); color:var(--t-strong); }
.commission-comm-cell.commission-muted { color:var(--t-soft); }
.commission-comm-foot { max-width:872px; margin:12px auto 0; font-size:var(--fs-micro); line-height:var(--lh-micro); color:var(--t-soft); text-align:center; }

.commission-comm-foot:empty { display:none; }
@media (max-width: 720px) {
  .commission-comm-thead, .commission-comm-row { grid-template-columns:1.5fr 1fr 1fr; padding:11px 14px; }
  .commission-comm-logo { width:32px; height:32px; }
  .commission-comm-name { font-size:12.5px; gap:8px; }
}

.commission-cmp-table { max-width:920px; margin:0 auto; background:var(--bg-white); border:0; border-radius:12px; overflow:hidden; box-shadow:none; }
.commission-cmp-row {
  display:grid; grid-template-columns:1.35fr 1fr 1fr .8fr .9fr .9fr .9fr;
  align-items:center; min-height:64px; padding:0 16px;
  border-bottom:1px solid var(--line); font-size:13px; color:var(--t-strong);
  transition:background .15s;
}
.commission-cmp-row:last-child { border-bottom:0; }
.commission-cmp-row:hover { background:#FBFBFB; }
.commission-cmp-c { text-align:right; padding:0 10px; }
.commission-cmp-c em { display:block; font-style:normal; font-size:11px; color:var(--t-soft); margin-top:3px; font-weight:400; }
.commission-cmp-head { min-height:56px; padding:0 16px; border-bottom:1px solid var(--line); font-size:var(--fs-small); line-height:var(--lh-small); font-weight:var(--w-demi); color:var(--t-strong); }
.commission-cmp-head:hover { background:none; }

.commission-cmp-head .commission-cmp-c { position:relative; }
.commission-cmp-head .commission-cmp-c + .commission-cmp-c::before {
  content:""; position:absolute; inset-inline-start:0; top:50%;
  transform:translateY(-50%); width:1px; height:20px; background:var(--border);
}
.commission-cmp-head .commission-cmp-tier, .commission-cmp-row .commission-cmp-tier { text-align:right; }
.commission-cmp-tier { display:flex; align-items:center; gap:8px; font-weight:var(--w-demi); }
.commission-cmp-gem { width:20px; height:26px; flex:none; object-fit:contain; }
.commission-cmp-ex { color:#2E7D45; }
.commission-cmp-gd { color:#B4761A; }
.commission-cmp-head .commission-cmp-ex em { color:#2E7D45; }
.commission-cmp-head .commission-cmp-gd em { color:#B4761A; }
.commission-cmp-na { color:var(--t-soft); }
.commission-cmp-row.commission-t-platinum .commission-cmp-tier { color:var(--tier-platinum); }
.commission-cmp-row.commission-t-gold     .commission-cmp-tier { color:var(--tier-gold); }
.commission-cmp-row.commission-t-silver   .commission-cmp-tier { color:var(--tier-silver); }
.commission-cmp-row.commission-t-bronze   .commission-cmp-tier { color:var(--tier-bronze); }
.commission-cmp-row.commission-t-cash     .commission-cmp-tier { color:var(--tier-cash); }
.commission-cmp-note { max-width:920px; margin:16px auto 0; padding:16px 22px; background:var(--bg-card); border-radius:var(--r-card); font-size:13px; line-height:2; color:var(--t-strong); text-align:center; }
.commission-cmp-note b { font-weight:var(--w-demi); color:var(--t-heading); }
.commission-cmp-legend { max-width:920px; margin:14px auto 0; display:flex; flex-wrap:wrap; justify-content:center; gap:10px 26px; font-size:12px; color:var(--t-body); }
.commission-cmp-key { display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }
.commission-cmp-key b { font-weight:var(--w-demi); color:var(--t-strong); }
.commission-cmp-key-dot { width:8px; height:8px; border-radius:50%; flex:none; }
.commission-cmp-key-dot.commission-ex { background:#2E7D45; }
.commission-cmp-key-dot.commission-gd { background:#B4761A; }
.commission-cmp-key-dot.commission-nm { background:#BDBDBD; }
.commission-cmp-foot { max-width:920px; margin:8px auto 0; font-size:11px; color:var(--t-soft); text-align:center; }

.commission-cmp-extra {
  max-width:920px; margin:24px auto 0; padding:20px 22px; text-align:right;
  background:var(--bg-page); border-radius:var(--r-card);
  box-shadow:inset 0 0 0 1px var(--line);
}
.commission-cmp-extra h3 {
  display:flex; align-items:center; gap:8px; margin:0 0 10px;
  font-size:var(--fs-small); line-height:var(--lh-small);
  font-weight:var(--w-demi); color:var(--t-heading);
}

.commission-cmp-extra h3 svg { flex:none; color:var(--t-soft); }
.commission-cmp-extra p {
  margin:0; font-size:var(--fs-small); line-height:var(--lh-body); color:var(--t-body);
}
@media (max-width: 560px) { .commission-cmp-legend { flex-direction:column; align-items:flex-start; gap:8px; } }
@media (max-width: 900px) {
  .commission-cmp-table { border:0; box-shadow:none; background:transparent; }
  .commission-cmp-head { display:none; }
  .commission-cmp-row { grid-template-columns:1fr 1fr; gap:10px 14px; padding:16px 18px; background:var(--bg-white); border:1px solid var(--border); border-radius:var(--r-card); margin-bottom:12px; box-shadow:var(--shadow-card); }
  .commission-cmp-row .commission-cmp-tier { grid-column:1 / -1; font-size:14px; }
  .commission-cmp-c { text-align:right; font-size:12.5px; }
  .commission-cmp-c::before { content:attr(data-label); display:block; font-size:11px; color:var(--t-soft); margin-bottom:2px; }
  .commission-cmp-c em { display:none; }
}

.commission-sheet { position:fixed; inset:0; z-index:1200; display:flex; align-items:center; justify-content:center; }
.commission-sheet[hidden] { display:none; }
.commission-sheet-scrim { position:absolute; inset:0; background:rgba(0,0,0,.45); }
.commission-sheet-panel {
  position:relative; width:min(605px, calc(100% - 32px)); max-height:88vh; overflow:auto;
  background:var(--bg-white); border-radius:24px; padding:16px 24px 32px;
  display:flex; flex-direction:column; gap:24px;
  box-shadow:var(--elev-3);
  animation:sheetIn .22s var(--ease-out);
}
@keyframes sheetIn { from { opacity:0; transform:translateY(14px) scale(.98); } to { opacity:1; transform:none; } }

.commission-sheet-head { display:flex; align-items:center; justify-content:flex-start; gap:16px; min-height:32px; }
.commission-sheet-x { order:-1; }
.commission-sheet-head h3 { font-size:var(--fs-body); line-height:var(--lh-body); font-weight:var(--w-demi); color:var(--t-strong); }

.commission-sheet-x {
  width:32px; height:32px; display:grid; place-items:center; flex:none;
  background:rgba(0,0,0,.02); border:none; border-radius:7px; color:#525252; cursor:pointer;
  transition:background .18s;
}
.commission-sheet-x:hover { background:rgba(0,0,0,.06); }
.commission-sheet-body { display:flex; flex-direction:column; gap:32px; }

.commission-sheet-art { display:block; width:186px; height:162px; object-fit:contain; margin:0 auto; }
.commission-sheet-body p { font-size:var(--fs-small); line-height:var(--lh-small); color:var(--t-body); margin:0; }
.commission-sheet-info {
  margin-top:-12px; padding:16px; border-radius:8px;
  background:var(--bg-page); border:0; box-shadow:inset 0 0 0 1px var(--line);
  font-size:var(--fs-small); line-height:var(--lh-small); color:var(--t-strong);
}
.commission-sheet-body .commission-sf-cap { display:flex; align-items:center; gap:8px; justify-content:center;
  font-size:var(--fs-small); line-height:var(--lh-small); color:var(--t-strong); }
.commission-sheet-body .commission-sf-row { display:flex; align-items:center; justify-content:center; gap:8px;
  font-size:var(--fs-small); line-height:24px; color:var(--t-strong); }
.commission-sheet-ok {
  display:block; width:100%; margin:8px 0 0; height:40px; padding:0 16px;
  background:var(--bg-white); border:1px solid var(--line); border-radius:10px;
  font-family:inherit; font-size:var(--fs-body); line-height:var(--lh-body);
  font-weight:var(--w-reg); color:var(--t-strong); cursor:pointer;
  transition:background .18s, border-color .18s;
}
.commission-sheet-ok:hover { background:var(--bg-card); border-color:#DCDCDC; }

@media (max-width: 560px) {
  .commission-sheet { align-items:flex-end; }
  .commission-sheet-panel { width:100%; max-height:92vh; border-radius:32px 32px 0 0;
    padding:20px 0 24px; animation:sheetUp .24s var(--ease-out);
    box-shadow:0 9px 28px 8px rgba(0,0,0,.05), 0 3px 6px -4px rgba(0,0,0,.12), 0 6px 16px rgba(0,0,0,.08); }
  .commission-sheet-head, .commission-sheet-body { padding:0 20px; }
  .commission-sheet-art { width:144px; height:126px; }
  .commission-sheet-ok { margin:8px 20px 0; width:calc(100% - 40px); }
  @keyframes sheetUp { from { transform:translateY(100%); } to { transform:none; } }
}

.commission-focus-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; max-width:920px; margin:0 auto; }

.commission-focus-card {
  display:flex; align-items:center; justify-content:flex-end; gap:8px;
  align-self:stretch; padding:32px; overflow:hidden;
  position:relative;
  border-radius:20px;
  border:0;
  background:url('/landing/assets/img/pattern-bg.webp') 0% 0% / 50px 50px repeat,
             var(--bg-page);
}

.commission-focus-card::after {
  content:''; position:absolute; inset:0; z-index:2;
  border-radius:inherit; pointer-events:none;
  box-shadow:inset 0 0 0 1.5px #FFF;
}

.commission-focus-card > div { flex:1 1 auto; min-width:0; }
.commission-focus-ic { order:1; flex:none; filter:drop-shadow(0 10px 16px rgba(18,30,60,.14)); }
.commission-focus-card h3 { font-size:var(--fs-body); line-height:var(--lh-body); font-weight:var(--w-demi); color:var(--t-strong); margin-bottom:12px; }
.commission-focus-card p  { font-size:var(--fs-small); line-height:var(--lh-small); color:var(--t-body); }

.commission-focus-card:nth-child(1) .commission-focus-ic { width:auto; height:73px;  margin-inline-end:-48px; }
.commission-focus-card:nth-child(2) .commission-focus-ic { width:auto; height:88px; align-self:flex-end; margin-bottom:-20px; margin-inline-end:-36px; }
.commission-focus-card:nth-child(4) .commission-focus-ic { width:auto; height:72px; align-self:flex-end; margin-bottom:-26px; margin-inline-end:-28px; transform:rotate(5.36deg); }

.commission-focus-card:nth-child(3) .commission-focus-ic {
  width:93.5px; height:93.5px; object-fit:cover; object-position:50%;
  transform:rotate(146.424deg);

  align-self:flex-end; margin-bottom:-42px; margin-inline-end:-26px;
}

@media (max-width: 820px) {
  .commission-focus-grid { grid-template-columns:1fr; }
  #focus, #definitions { overflow-x:clip; }
  .commission-focus-card { gap:6px; }
}

.commission-faq-wrap { max-width:968px; }
#faqList { background:none; border:1px solid var(--line-soft); border-radius:24px; box-shadow:none; overflow:hidden; padding:24px; }
.commission-faq-item + .commission-faq-item { border-top:1px solid var(--line-soft); margin-top:12px; padding-top:12px; }
.commission-faq-q {
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:28px;
  background:none; border:none; text-align:right; min-height:48px;
  padding:0; font-size:var(--fs-body); line-height:var(--lh-body); font-weight:var(--w-reg); color:var(--t-strong);
}
.commission-fq-chev { flex:none; order:1; color:var(--t-strong); transition:transform .25s var(--ease-out); }
.commission-faq-item.commission-open .commission-fq-chev { transform:rotate(180deg); }
.commission-faq-a { max-height:0; overflow:hidden; transition:max-height .3s var(--ease-out); }
.commission-faq-a-in { padding:12px 0 0; font-size:var(--fs-body); line-height:var(--lh-body); color:var(--t-body); }
.commission-faq-a-in .commission-faq-list { list-style:disc; margin:6px 0; padding-inline-start:20px; }
.commission-faq-a-in .commission-faq-list li { line-height:var(--lh-body); }
.commission-faq-more { text-align:center; margin-top:32px; font-size:var(--fs-body); line-height:var(--lh-body); color:var(--t-strong); }
.commission-faq-more a { font-weight:var(--w-reg); }
@media (max-width:760px) {
  :root     { --cta-overlap:86px; }
}
@media (max-width: 720px) {
}
.commission-footer > .commission-wrap { max-width:1280px; padding:0 32px; }
@media (max-width:1200px) { }
.commission-footer .commission-desc { font-size:var(--fs-body); line-height:var(--lh-body); margin-top:24px; color:#fff; }
@media (max-width: 860px) { }

.commission-msheet-scrim {
  position:fixed; inset:0; z-index:1000; background:rgba(0,0,0,.45);
  opacity:0; visibility:hidden; transition:opacity .25s, visibility .25s;
}
.commission-msheet-scrim.commission-show { opacity:1; visibility:visible; }
.commission-msheet[hidden], .commission-msheet-scrim[hidden] { display:none; }
.commission-msheet {
  position:fixed; z-index:1001; left:0; right:0; bottom:0; top:auto;
  display:flex; flex-direction:column; gap:24px;
  background:var(--bg-white); border-radius:32px 32px 0 0;
  max-height:92vh; overflow:auto; padding:20px 0 24px;
  transform:translateY(102%); transition:transform .34s var(--ease-out);
  box-shadow:0 9px 28px 8px rgba(0,0,0,.05), 0 3px 6px -4px rgba(0,0,0,.12), 0 6px 16px rgba(0,0,0,.08);
}
.commission-msheet.commission-show { transform:none; }
.commission-msheet-head { display:flex; align-items:center; justify-content:flex-start; gap:16px;
  margin:0; padding:0 20px; min-height:32px; }
.commission-msheet-close { order:-1; }
.commission-msheet-head h3 { font-size:var(--fs-body); line-height:var(--lh-body); font-weight:var(--w-demi); color:var(--t-strong); }

.commission-msheet-close {
  width:44px; height:44px; flex:none; display:grid; place-items:center;
  margin:-6px -6px -6px 0;
  background:rgba(0,0,0,.02); border:none; border-radius:7px; color:#525252; cursor:pointer;
}
#matrixSheetBody { display:flex; flex-direction:column; gap:24px; padding:0 20px; }

.commission-mx-col { display:flex; flex-direction:column; gap:6px; min-width:0; }
.commission-mx-band {
  font-size:11px; line-height:14px; min-height:28px;
  font-weight:var(--w-reg); color:var(--t-soft); text-align:start;
}
.commission-msheet-group { margin:0; display:flex; flex-direction:column; gap:12px; }
.commission-msheet-group .commission-sg-lbl { display:flex; align-items:center; gap:8px; min-height:22px;
  font-size:var(--fs-small); line-height:var(--lh-small); font-weight:var(--w-reg);
  color:var(--t-strong); margin:0; }
.commission-msheet-group .commission-sg-lbl::before { content:''; width:4px; height:4px; border-radius:50%; background:var(--t-disabled); flex:none; }
.commission-msheet-group .commission-sg-cells { display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; align-items:start; }
.commission-msheet .commission-mx-cell { position:relative; min-height:66px; background:var(--bg-page);
  font-size:var(--fs-small); line-height:var(--lh-small); }
.commission-msheet-ok {
  display:block; width:calc(100% - 40px); margin:8px 20px 0; height:40px; padding:0 16px;
  background:var(--bg-white); border:1px solid var(--line); border-radius:10px;
  font-family:inherit; font-size:var(--fs-body); line-height:var(--lh-body);
  font-weight:var(--w-reg); color:var(--t-strong); cursor:pointer;
  transition:background .18s, border-color .18s;
}
.commission-msheet-ok:hover { background:var(--bg-card); border-color:#DCDCDC; }

[data-reveal] { opacity:0; transform:translateY(16px); transition:opacity .6s var(--ease-out), transform .6s var(--ease-out); transition-delay:var(--d, 0s); }
[data-reveal].commission-in { opacity:1; transform:none; }

@keyframes gemFloat { 0%,100% { transform:translateY(0) rotate(0); } 50% { transform:translateY(-9px) rotate(-2.5deg); } }
.commission-gem { animation:gemFloat 5.2s ease-in-out infinite; }
.commission-g2 { animation-delay:-1.2s; } .commission-g3 { animation-delay:-2.4s; } .commission-g4 { animation-delay:-3.4s; }

@keyframes mascotBob { 0%,100% { transform:translateY(0) rotate(-1.5deg); } 50% { transform:translateY(-6px) rotate(1.5deg); } }

.commission-def-card, .commission-bnf-card, .commission-focus-card, .commission-tl-item {
  transition:transform .22s var(--ease-out), box-shadow .22s, opacity .6s var(--ease-out);
}
.commission-def-card:hover, .commission-bnf-card:hover, .commission-focus-card:hover { transform:translateY(-3px); box-shadow:var(--elev-2); }

#commRows { transition:opacity .18s; }
#commRows.commission-swap { opacity:0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation:none !important; transition:none !important; }
  [data-reveal] { opacity:1; transform:none; }
}

@media (max-width: 860px) {
  .commission-wrap { padding:0 20px; }
  .commission-panel-shell { padding:0; }
  #nav { display:none; }
  #nav.commission-open {
    display:flex; flex-direction:column; position:absolute;
    inset-inline:20px; top:calc(100% + 8px); z-index:10;
    background:#fff; border-radius:10px; padding:8px;
    box-shadow:0 6px 16px rgba(0,0,0,.08), 0 3px 6px -4px rgba(0,0,0,.12);
  }
  #nav.commission-open a { justify-content:flex-start; width:100%; }

  .commission-hero { padding:84px 0 32px; }
  .commission-timeline-sec, #definitions, .commission-panel-shell, #compare, #focus, #faq { margin-top:32px; }
  .commission-hero-title { font-size:var(--fs-display-m); line-height:var(--lh-display-m); margin:52px 0 0; }

  .commission-timeline-sec { padding:32px 0; }
  .commission-timeline { padding-top:97px; padding-bottom:32px; }
  .commission-tl-mascot { width:76px; height:65px; }
  .commission-tl-item, .commission-tl-item.commission-right, .commission-tl-item.commission-left {
    width:calc(100% - 24px); margin:0 auto 32px; padding:32px;
    border-radius:20px;
  }
  .commission-tl-item.commission-left[data-fig="tl-2"] { padding-top:32px; }
  .commission-tl-item:last-of-type { margin-bottom:0; }
  .commission-tl-dot { display:none; }

  [data-fig="tl-1"] .commission-tl-fig { width:35px;  height:51px;  top:4.5px;  right:-19.5px; left:auto;  bottom:auto; }
  [data-fig="tl-2"] .commission-tl-fig { width:80px;  height:80px;  top:50%; left:-29px; right:auto; bottom:auto; transform:translateY(-50%); }
  [data-fig="tl-3"] .commission-tl-fig { width:80px;  height:80px;  top:86px;   right:-32px;   left:auto;  bottom:auto; }
  [data-fig="tl-4"] .commission-tl-fig { width:124px; height:124px; top:3px;    left:-55px;    right:auto; bottom:auto; }

  #definitions { padding:32px 0; }
  .commission-section-head { margin-bottom:32px; }
  .commission-def-grid { grid-template-columns:1fr; gap:24px; }
  .commission-def-card { min-height:210px; padding:32px 32px 32px 64px; }

  .commission-panel-card { background:none; border-radius:0; padding:0; max-width:none; }
  .commission-panel-card .commission-wrap { max-width:none; padding:0 20px; }
  .commission-panel-card .commission-section { padding:32px 0; }
  .commission-panel-card > .commission-section + .commission-section { margin-top:0; }
  .commission-panel-card #calc { padding-top:0; }
  #benefits, #commission { margin-top:32px; }

  .commission-tier-cards { display:grid; grid-template-columns:repeat(4, 1fr); gap:8px;
    background:none; border-radius:0; padding:0; }
  .commission-tier-card { min-height:186px; padding:8px; gap:0; }
  .commission-tier-card img { width:48px; height:48px; margin-bottom:20px; }
  .commission-tc-lbl  { font-size:var(--fs-micro); line-height:var(--lh-micro); margin-bottom:4px; }
  .commission-tc-name, .commission-tier-card.commission-active .commission-tc-name { font-size:var(--fs-body); line-height:var(--lh-body); }
  .commission-tier-card.commission-active .commission-tc-lbl { color:var(--tier-silver); }

  .commission-calc-grid { display:block; padding:0; background:none; box-shadow:none; border-radius:0; }
  .commission-calc-panel { flex:none; width:100%; border-radius:20px; padding:20px; gap:24px; }
  .commission-matrix-open-link { display:inline-flex; align-self:flex-start; margin:0;
    height:32px; padding:0 16px; border-radius:7px; background:rgba(0,0,0,.02);
    font-size:var(--fs-small); line-height:var(--lh-small); font-weight:var(--w-reg); color:var(--t-strong); }
  .commission-calc-panel .commission-sub { padding-bottom:0; border-bottom:0; }
  .commission-calc-panel .commission-sub + .commission-matrix-open-link { margin-top:-20px; }
  .commission-calc-panel .commission-slider-block:first-of-type { border-top:1px solid var(--line); padding-top:24px; }

  .commission-benefits-grid { grid-template-columns:1fr; grid-template-rows:none; row-gap:24px; }

  .commission-bnf-offers-card { grid-column:1; grid-row:auto; order:1; height:auto; }
  .commission-bnf-cost        { grid-column:1; grid-row:auto; order:2; height:auto; border-radius:16px; }
  .commission-bnf-up          { grid-column:1; grid-row:auto; order:3; height:auto; }

  .commission-comm-tabs { max-width:100%; margin-bottom:32px; }
  .commission-comm-tab  { flex:0 0 auto; }
  .commission-comm-table { background:none; border-radius:0; overflow:visible; }
  .commission-comm-thead, .commission-comm-row {
    grid-template-columns:repeat(3, 1fr); padding:12px; gap:12px;
    border:0; border-radius:12px; min-height:0;
  }
  .commission-comm-thead { min-height:46px; box-shadow:inset 0 0 0 1px var(--line); margin-bottom:8px; align-items:center; }
  .commission-comm-row { min-height:60px; background:var(--bg-white); margin-bottom:8px; }
  .commission-comm-row:last-child { margin-bottom:0; }
  .commission-comm-thead .commission-th, .commission-comm-cell { padding:0; text-align:center; }
  .commission-comm-thead .commission-th-name { text-align:start; }
  .commission-comm-name { padding:0; gap:12px; }
  .commission-comm-logo, .commission-comm-mono { width:36px; height:36px; }

  .commission-focus-grid { grid-template-columns:1fr; gap:24px; }
  .commission-focus-card { padding:32px; min-height:0; }

  .commission-focus-card:nth-child(1) .commission-focus-ic { width:auto; height:73px;  margin-bottom:14px;    margin-inline-end:-48px; }
  .commission-focus-card:nth-child(2) .commission-focus-ic { width:auto; height:96px; align-self:flex-end; margin-bottom:-22px; margin-inline-end:-38px; }
  .commission-focus-card:nth-child(3) .commission-focus-ic { width:93.5px; height:93.5px; align-self:flex-end; margin-bottom:-48px; margin-inline-end:-32px; }
  .commission-focus-card:nth-child(4) .commission-focus-ic { width:auto; height:80px; align-self:flex-end; margin-bottom:-28px; margin-inline-end:-30px; transform:rotate(5.36deg); }

  .commission-faq-wrap { max-width:none; }
  #faqList { border-radius:24px; padding:24px; }
  .commission-faq-q { min-height:40px; gap:12px; }
  .commission-faq-more { margin-top:32px; }

  :root { --cta-overlap:90px; }
  .commission-footer > .commission-wrap { max-width:none; padding:0 20px; }
}

@media (max-width: 400px) {
  .commission-tc-name, .commission-tier-card.commission-active .commission-tc-name { font-size:var(--fs-small); line-height:var(--lh-small); }
}

@media (max-width:900px) {
  .commission-comm-tabs { max-width:100%; }
  .commission-comm-tab  { flex:0 0 auto; }
}

@media (max-width:760px) {
  .commission-tier-select-menu button { min-height:44px; }
  #matrixOpen, .commission-matrix-open-link { display:inline-flex !important; align-items:center; }
  .commission-faq-more a { display:inline-block; padding:12px 4px; }

  .commission-tier-card { min-height:186px; }
  .commission-cost-btn { min-height:44px; }

  .commission-tap44,
  .commission-hdr .commission-btn-primary, .commission-hdr-menu-btn, .commission-tier-select-btn, .commission-matrix-open-link { position:relative; }
  .commission-tap44::after,
  .commission-hdr .commission-btn-primary::after, .commission-hdr-menu-btn::after,
  .commission-tier-select-btn::after, .commission-matrix-open-link::after {
    content:''; position:absolute; top:50%; left:50%;
    width:max(100%, 44px); height:max(100%, 44px);
    transform:translate(-50%, -50%);
  }
  .commission-tier-select.commission-open .commission-tier-select-btn::after { display:none; }

}

.commission-comm-foot { max-width:760px; margin-inline:auto; }

body.commission-dialog-open .commission-azkt-guide { display:none !important; }
@media (max-width:340px) {
  .commission-tier-cards {
    display:flex; overflow-x:auto; gap:8px;
    scroll-snap-type:x mandatory; scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .commission-tier-cards::-webkit-scrollbar { display:none; }
  .commission-tier-card { flex:0 0 46%; scroll-snap-align:center; }
}

.commission-mx-cell[aria-pressed="true"] { font-weight:var(--w-demi); }

.commission-section-tight { padding-top:24px; }

@media (max-width:620px) {
  .commission-azkt-coach  { width:min(340px, calc(100vw - 20px)) !important; gap:6px !important; }
  .commission-azkt-bubble { padding:11px 13px 9px !important; }
  .commission-azkt-tx     { min-height:0 !important; font-size:12.5px !important; line-height:1.85 !important; }
  .commission-azkt-face   { width:46px !important; height:50px !important; }
  .commission-azkt-row    { margin-top:8px !important; }
}
@media (max-width: 860px) {
  .commission-comm-table {
    overflow: visible;
    background: none; border: 0; box-shadow: none; border-radius: 0;
  }
  .commission-comm-table > * { min-width: 0; }
  .commission-comm-table .commission-comm-thead { display: none; }

  .commission-comm-table .commission-comm-row {
    grid-template-columns: 1fr 1fr;
    gap: 12px 14px;
    padding: 14px 16px;
    min-height: 0;
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--r-card);
    box-shadow: var(--shadow-card);
    margin-bottom: 10px;
  }
  .commission-comm-table .commission-comm-row:last-child { margin-bottom: 0; }
  .commission-comm-table .commission-comm-row:hover { background: var(--bg-white); }

  .commission-comm-table .commission-comm-name {
    grid-column: 1 / -1;
    padding: 0; gap: 12px;
    font-size: 14px;
  }
  .commission-comm-table .commission-comm-cell {
    padding: 0; text-align: right;
    font-size: 14px; line-height: 22px;
  }
  .commission-comm-table .commission-comm-cell::before {
    content: attr(data-label);
    display: block;
    font-size: 11px; line-height: 18px; font-weight: var(--w-reg);
    color: var(--t-soft);
  }
}

:root {
  --tier-platinum: #10239E;
  --tier-gold:     #FAAD14;
  --tier-silver:   #7C7C7C;
  --tier-bronze:   #C0620F;
  --tier-cash:     #E75200;
}

.commission-mx-cell.commission-mx-active {
  padding: 24px 8px 20px 8px;
  border-radius: 12px;
  color: #FFF;
}
.commission-mx-cell.commission-t-platinum.commission-mx-active { background: var(--tier-platinum); }
.commission-mx-cell.commission-t-gold.commission-mx-active     { background: var(--tier-gold); }
.commission-mx-cell.commission-t-silver.commission-mx-active   { background: var(--tier-silver); }
.commission-mx-cell.commission-t-bronze.commission-mx-active   { background: var(--tier-bronze); }
.commission-mx-cell.commission-t-cash.commission-mx-active     { background: var(--tier-cash); }

.commission-mx-cell {
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  padding: 32px 16px; gap: 8px;
  flex: 1 0 0; align-self: stretch;
  min-width: 0;
}

.commission-mx-note {
  display: block; padding: 8px; margin: 8px 0 0;
  border-radius: 7px;
  border: 1px solid #EFEFEF;
  background: rgba(255, 255, 255, .66);
  text-align: right;
  font-size: var(--fs-small); line-height: var(--lh-small);
  color: var(--t-body);
}
.commission-mx-note b { font-weight: var(--w-demi); color: inherit; }

.commission-tier-select-menu { direction: rtl; }
.commission-tier-select-menu button {
  flex-direction: row; justify-content: flex-start;
  direction: rtl; text-align: right;
}

.commission-comm-thead,
.commission-comm-row { grid-template-columns: 260fr 160fr 160fr 180fr 130fr; }

.commission-comm-thead .commission-th { position: relative; }
.commission-comm-thead .commission-th + .commission-th::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 50%;
  transform: translateY(-50%); width: 1px; height: 20px;
  background: var(--line, #EFEFEF);
}
@media (max-width: 860px) {

  .commission-comm-thead .commission-th + .commission-th::before { content: none; }
  .commission-comm-thead .commission-th:nth-child(2)::before { content: ""; }
}

#main {
  --azk-cta-glow:
    linear-gradient(150deg, #D4EFF9 0%, #E8F5FC 26%, #FCFDFE 58%, #FFFFFF 100%);
}

.commission-timeline[data-motion="on"] {

  --tl-spring: linear(0, .0053, .0208, .0456, .0787, .1191, .166 17.4%,
                      .2727, .3915, .5153, .6377 40.9%, .6961, .7508, .8012,
                      .8471 55.6%, .8882, .9245, .956 70.6%, .9741, .9884,
                      .9989 84.3%, 1.0058, 1.0097, 1.0113 93.1%, 1.0104,
                      1.0069 98.1%, 1.0038, 1);
  --tl-dot-lit: #BDBDBD;
  --tl-dot-anim: comTlDot;
}

.commission-timeline[data-motion="on"][data-motion-ready] [data-anim] .commission-tl-fig {
  animation-name:            var(--tl-in, none),        var(--tl-idle, none);
  animation-duration:        var(--tl-in-dur, 1.2s),    var(--tl-idle-dur, 6s);
  animation-timing-function: var(--tl-in-ease, var(--tl-spring)), ease-in-out;
  animation-delay:           var(--tl-in-delay, .18s),  var(--tl-idle-delay, 1.7s);
  animation-iteration-count: 1,                         infinite;
  animation-fill-mode:       both,                      none;
  animation-play-state:      paused;
}
.commission-timeline[data-motion="on"][data-motion-ready] .commission-lit[data-anim] .commission-tl-fig {
  animation-play-state: running;
}

.commission-timeline[data-motion="on"] [data-anim="gem"]    { --tl-in: comTlGem;    --tl-in-dur: 1.4s;  --tl-idle: comTlGemFloat; --tl-idle-dur: 6.4s; }
.commission-timeline[data-motion="on"] [data-anim="rocket"] { --tl-in: comTlRocket; --tl-in-dur: 1.25s; --tl-idle: comTlHover;    --tl-idle-dur: 5.2s; }
.commission-timeline[data-motion="on"] [data-anim="calc"]   { --tl-in: comTlCalc;   --tl-in-dur: 1.3s;  --tl-idle: comTlTick;     --tl-idle-dur: 7.5s; }
.commission-timeline[data-motion="on"] [data-anim="cash"]   { --tl-in: comTlCash;   --tl-in-dur: 1.45s; --tl-idle: comTlBreathe;  --tl-idle-dur: 7.8s; }

@keyframes comTlGem {
  0%   { opacity:0; translate:0 -34px; rotate:-26deg; scale:.74; }
  40%  { opacity:1; }
  62%  { translate:0 3px; rotate:5deg;  scale:1.035; }
  80%  { translate:0 0;   rotate:-1deg; scale:1; }
  100% { opacity:1; translate:0 0; rotate:0deg; scale:1; }
}
@keyframes comTlGemFloat {
  0%,100% { translate:0 0;    rotate:0deg; }
  50%     { translate:0 -5px; rotate:-3.5deg; }
}

@keyframes comTlRocket {
  0%   { opacity:0; translate:7px 46px; rotate:13deg; scale:.84; }
  45%  { opacity:1; }
  100% { opacity:1; translate:0 0; rotate:0deg; scale:1; }
}
@keyframes comTlHover {
  0%,100% { translate:0 0;    rotate:0deg; }
  50%     { translate:0 -7px; rotate:-3deg; }
}

@keyframes comTlCalc {
  0%   { opacity:0; translate:0 26px; rotate:-11deg; scale:.78; }
  42%  { opacity:1; translate:0 0;    rotate:3deg;   scale:1.04; }
  60%  { translate:0 -5px; rotate:0deg; scale:1; }
  74%  { translate:0 1px; }
  86%  { translate:0 -3px; }
  100% { opacity:1; translate:0 0; rotate:0deg; scale:1; }
}
@keyframes comTlTick {
  0%,76%,100% { translate:0 0;    rotate:0deg; }
  83%         { translate:0 -4px; rotate:-2.5deg; }
  91%         { translate:0 1px;  rotate:1deg; }
}

@keyframes comTlCash {
  0%   { opacity:0; translate:0 -56px; rotate:-9deg; scale:1 1; }
  44%  { opacity:1; translate:0 0;     rotate:2deg;  scale:1.10 .90; }
  62%  { translate:0 -9px; rotate:-1.5deg; scale:.96 1.06; }
  80%  { translate:0 0;    rotate:.5deg;   scale:1.03 .98; }
  100% { opacity:1; translate:0 0; rotate:0deg; scale:1 1; }
}
@keyframes comTlBreathe {
  0%,100% { translate:0 0;    scale:1; }
  50%     { translate:0 -4px; scale:1.02; }
}

@keyframes comTlMascotBob {
  0%,100% { translate:0 0;    rotate:-1.5deg; }
  50%     { translate:0 -6px; rotate:1.5deg; }
}
.commission-timeline[data-motion="on"] .commission-tl-mascot {
  animation: comTlMascotBob 5.6s ease-in-out infinite;
}

@media (min-width: 721px) {
  .commission-tl-item.commission-right .commission-tl-dot { left:calc(-8.4433% - 5.25px); }
  .commission-tl-item.commission-left  .commission-tl-dot { right:calc(-8.7213% - 6.75px); }

  .commission-timeline[data-motion="on"][data-motion-ready] .commission-tl-dot {
    scale: 0;
    animation: var(--tl-dot-anim, none) .78s var(--tl-spring) .1s both;
    animation-play-state: paused;
  }
  .commission-timeline[data-motion="on"][data-motion-ready] .commission-lit .commission-tl-dot {
    animation-play-state: running;
  }

  @keyframes comTlDot {
    0%   { scale:0; }
    100% { scale:1; }
  }

  .commission-timeline[data-motion="on"][data-motion-ready] .commission-tl-dot::after {
    content:''; position:absolute; inset:0; border-radius:50%;
    border:2px solid #BDBDBD;
    animation: comTlDotRing 1s var(--ease-out) .2s both;
    animation-play-state: paused;
  }
  .commission-timeline[data-motion="on"][data-motion-ready] .commission-lit .commission-tl-dot::after {
    animation-play-state: running;
  }
  @keyframes comTlDotRing {
    0%   { opacity:0;   scale:1; }
    20%  { opacity:.45; }
    100% { opacity:0;   scale:2.6; }
  }
}

.commission-timeline[data-motion="on"] [data-anim="rocket"] .commission-tl-fig::before,
.commission-timeline[data-motion="on"] [data-anim="rocket"] .commission-tl-fig::after {
  content: ''; position: absolute; border-radius: 50%;
  pointer-events: none; z-index: -1;
  transform-origin: 80% 20%;
}
.commission-timeline[data-motion="on"] [data-anim="rocket"] .commission-tl-fig::before {
  left: -8%; top: 68%; width: 50%; height: 36%; rotate: 45deg;
  background: radial-gradient(closest-side,
              rgba(255,168,64,.58) 0%, rgba(255,120,40,.30) 45%, rgba(255,90,30,0) 100%);
  animation: comTlFlameWide 1.9s ease-in-out infinite;
}
.commission-timeline[data-motion="on"] [data-anim="rocket"] .commission-tl-fig::after {
  left: 14%; top: 74%; width: 26%; height: 26%;
  background: radial-gradient(closest-side,
              rgba(255,246,214,.95) 0%, rgba(255,196,86,.72) 40%, rgba(255,132,44,0) 100%);
  animation: comTlFlameCore .28s ease-in-out infinite alternate;
}
@keyframes comTlFlameWide {
  0%,100% { scale:.86 1; opacity:.55; }
  50%     { scale:1.14 1.06; opacity:.95; }}
@keyframes comTlFlameCore {
  from { scale:.78; opacity:.55; }
  to   { scale:1.12; opacity:1; }}
.commission-timeline[data-motion="on"][data-motion-ready] [data-anim="rocket"] .commission-tl-ic {
  animation: comTlShake .22s linear infinite;
}
@keyframes comTlShake {
  0%   { translate:0 0;         rotate:0deg; }
  25%  { translate:.6px -.4px;  rotate:.5deg; }
  50%  { translate:-.5px .5px;  rotate:-.4deg; }
  75%  { translate:.4px .5px;   rotate:.35deg; }
  100% { translate:0 0;         rotate:0deg; }}

.commission-timeline[data-motion="on"] [data-anim="calc"] .commission-tl-fig::before,
.commission-timeline[data-motion="on"] [data-anim="calc"] .commission-tl-fig::after {
  content: ''; position: absolute; z-index: 1;
  width: 5px; height: 4px; border-radius: 1.5px;
  background: #fff; opacity: .3;
}

.commission-timeline[data-motion="on"] [data-anim="calc"] .commission-tl-fig::before {
  left: 30.6%; top: 50%;
  box-shadow: 7px .8px 0 #fff, 14.7px 1.8px 0 #fff;
  animation: comTlKeys 2.4s ease-in-out infinite;
}

.commission-timeline[data-motion="on"] [data-anim="calc"] .commission-tl-fig::after {
  left: 35.6%; top: 43.1%;
  box-shadow: 7.4px .5px 0 #fff, 15px 1px 0 #fff;
  animation: comTlKeys 2.4s ease-in-out .34s infinite;
}
.commission-timeline[data-motion="on"] [data-anim="calc"] .commission-tl-fx::before {
  content: ''; position: absolute; left: 44%; top: 29%; z-index: 2;
  width: 27%; height: 12%; border-radius: 3px;
  background: rgba(232,249,255,.92); opacity: 0;
  rotate: -14deg;
  animation: comTlScreen 2.4s ease-in-out infinite;
}
@keyframes comTlKeys {
  0%,24%      { translate:0 0;      opacity:.3; }
  30%         { translate:0 1.4px;  opacity:1; }
  38%         { translate:0 0;      opacity:.45; }
  46%         { translate:0 1.4px;  opacity:1; }
  54%,100%    { translate:0 0;      opacity:.3; }}
@keyframes comTlScreen {
  0%,56%,100% { opacity:0; }
  64%         { opacity:.85; }
  84%         { opacity:.5; }
  92%         { opacity:0; }}

.commission-timeline[data-motion="on"] [data-anim="cash"] .commission-tl-fig::before,
.commission-timeline[data-motion="on"] [data-anim="cash"] .commission-tl-fig::after {
  content: ''; position: absolute; width: 15%; height: 9%;
  border-radius: 2px; background: #8CD44B;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.55);
  opacity: 0; pointer-events: none; z-index: -1;
}
.commission-timeline[data-motion="on"] [data-anim="cash"] .commission-tl-fig::before {
  left: 40%; top: 34%; animation: comTlNote 5.2s ease-out infinite;
}
.commission-timeline[data-motion="on"] [data-anim="cash"] .commission-tl-fig::after {
  left: 54%; top: 38%; animation: comTlNote 7.1s ease-out infinite -2.6s;
}
@keyframes comTlNote {
  0%      { translate:0 0;      rotate:0deg;  scale:.7; opacity:0; }
  12%     { opacity:.95; }
  55%     { translate:6px -26px; rotate:-16deg; scale:1; opacity:.8; }
  100%    { translate:14px -52px; rotate:-30deg; scale:.86; opacity:0; }}

.commission-timeline[data-motion="on"] [data-anim="gem"] .commission-tl-fig {
  isolation: isolate;
}

.commission-timeline[data-motion="on"] [data-anim="gem"] .commission-tl-fx {
  overflow: hidden; z-index: 1;
  mix-blend-mode: screen;
  -webkit-mask-image: url('/landing/assets/img/tl-ic-1.png');
          mask-image: url('/landing/assets/img/tl-ic-1.png');
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.commission-timeline[data-motion="on"] [data-anim="gem"] .commission-tl-fx::before {
  content: ''; position: absolute; inset: -45% -120%;
  background: linear-gradient(101deg,
              rgba(255,255,255,0)   39%,
              rgba(255,236,198,.30) 45%,
              rgba(255,255,255,.98) 50%,
              rgba(206,234,255,.38) 55%,
              rgba(255,255,255,0)   61%);
  translate: -120% 0; opacity: 0;
  animation: comTlGemPass 5.6s cubic-bezier(.42,0,.28,1) infinite;
}
.commission-timeline[data-motion="on"] [data-anim="gem"] .commission-tl-fx::after {
  content: ''; position: absolute; left: 4%; top: 10%; width: 76%; height: 60%;
  border-radius: 50%;
  background: radial-gradient(closest-side,
              rgba(255,255,255,.95) 0%, rgba(255,248,232,.52) 44%,
              rgba(255,255,255,0) 100%);
  opacity: 0; scale: .45;
  animation: comTlGemFacet 5.6s cubic-bezier(.2,0,.2,1) infinite;
}

.commission-timeline[data-motion="on"] [data-anim="gem"] .commission-tl-fig::before,
.commission-timeline[data-motion="on"] [data-anim="gem"] .commission-tl-fig::after {
  content: ''; position: absolute; z-index: 2; pointer-events: none;
  left: 34%; top: 30%; translate: -50% -50%;
  opacity: 0; scale: .2;
  filter: drop-shadow(0 0 3px rgba(255,255,255,.9));
  animation: comTlGemStar 5.6s cubic-bezier(.2,0,.3,1) infinite;
}
.commission-timeline[data-motion="on"] [data-anim="gem"] .commission-tl-fig::before {
  width: 150%; height: 2px;
  background: linear-gradient(90deg,
              rgba(255,255,255,0) 0%, #FFF 50%, rgba(255,255,255,0) 100%);
}
.commission-timeline[data-motion="on"] [data-anim="gem"] .commission-tl-fig::after {
  width: 2px; height: 116%;
  background: linear-gradient(180deg,
              rgba(255,255,255,0) 0%, #FFF 50%, rgba(255,255,255,0) 100%);
}

.commission-timeline[data-motion="on"] [data-anim="gem"] .commission-tl-ic {
  animation: comTlGemLit 5.6s ease-in-out infinite;
}

.commission-timeline[data-motion="on"] [data-anim="gem"] .commission-tl-fx::before,
.commission-timeline[data-motion="on"] [data-anim="gem"] .commission-tl-fx::after,
.commission-timeline[data-motion="on"] [data-anim="gem"] .commission-tl-fig::before,
.commission-timeline[data-motion="on"] [data-anim="gem"] .commission-tl-fig::after,
.commission-timeline[data-motion="on"] [data-anim="gem"] .commission-tl-ic {
  animation-delay: 1.5s;
  animation-play-state: paused;
}
.commission-timeline[data-motion="on"] .commission-lit[data-anim="gem"] .commission-tl-fx::before,
.commission-timeline[data-motion="on"] .commission-lit[data-anim="gem"] .commission-tl-fx::after,
.commission-timeline[data-motion="on"] .commission-lit[data-anim="gem"] .commission-tl-fig::before,
.commission-timeline[data-motion="on"] .commission-lit[data-anim="gem"] .commission-tl-fig::after,
.commission-timeline[data-motion="on"] .commission-lit[data-anim="gem"] .commission-tl-ic {
  animation-play-state: running;
}

@keyframes comTlGemPass {
  0%, 5%    { translate:-120% 0; opacity:0; }
  11%       { opacity:.9; }
  18%       { opacity:1; }
  25%       { opacity:.75; }
  30%, 100% { translate:120% 0;  opacity:0; }
}
@keyframes comTlGemFacet {
  0%, 13%   { opacity:0;   scale:.45; }
  19%       { opacity:.95; scale:1.08; }
  26%, 100% { opacity:0;   scale:1.32; }
}
@keyframes comTlGemStar {
  0%, 15%   { opacity:0;   scale:.2; }
  19%       { opacity:1;   scale:1.15; }
  22%       { opacity:.85; scale:1; }
  27%, 100% { opacity:0;   scale:.5; }
}
@keyframes comTlGemLit {
  0%, 10%   { filter:drop-shadow(0 10px 16px rgba(18,30,60,.14)) brightness(1)    saturate(1); }
  19%       { filter:drop-shadow(0 12px 20px rgba(18,30,60,.19)) brightness(1.17) saturate(1.12); }
  30%, 100% { filter:drop-shadow(0 10px 16px rgba(18,30,60,.14)) brightness(1)    saturate(1); }
}
