/* =========================================================
   AffiliateGo – Light mode
   Layout 1440 · Container 1200
   Breakpoints: 1199 / 991 / 767 / 480 / 375
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; margin:0; padding:0; }

/* ---------- Tokens ---------- */
:root {
  --font:  "Funnel Sans", sans-serif;
  --fonttitle:  "Funnel Display", sans-serif;

  /* colours (light) – verify against Figma Dev Mode */
  --c-bg: #ffffff;
  --c-text: #23252B;
  --c-muted: #565966;
  --c-surface: #F4F4F6;
  --c-border: #6B6E7B;
  --c-dark: #23252B;
  --c-red: #D4331F;
  --c-red-hover: #000000;
  --c-white: #ffffff;
  --container: 1200px;
  --gutter: 20px;
  --radius-btn: 12px;
  --header-h: 80px;
  --c-red02: #B02815;
}


html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 24px;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
}

ul { margin: 0; padding: 0; list-style: none; }
p  { margin: 0; }
a  { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img, svg { display: block; max-width: 100%; }
h1,h2,h3,h4,h5, h6{font-family: var(--fonttitle);}
.container {width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter);}

/* ---------- Buttons ---------- */
.btn {display: inline-flex;align-items: center;justify-content: center;height: 40px;padding: 0 24px;border: 0;border-radius: var(--radius-btn);font-size: 14px;font-weight: 500;line-height: 1;transition: background-color .2s ease;}
.btn--primary { background: var(--c-red); color: var(--c-white); }
.btn--primary:hover { background: var(--c-red-hover); }

/* ========================================================= GLOBAL HEADER ========================================================= */
.globalheader {position: sticky; top: 0; z-index: 100; background: var(--c-bg);}
.globalheader__inner {position: relative; display: flex; align-items: center; height: var(--header-h);}
.globalheader__logo { flex-shrink: 0; display: block; }
.globalheader__logo img {width: 158px;height: auto;}
.globalheader__nav { margin-left: 40px; }
.globalheader__menu {display: flex;align-items: center;gap: 28px;}
.globalheader__menu a {font-size: 14px;font-weight: 500;color: var(--c-text);transition: color .2s ease;line-height: 20px;}
.globalheader__menu a:hover { color: var(--c-red); }
.globalheader__actions {display: flex;align-items: center;gap: 40px;}
.globalheader__actions--desktop { margin-left: auto; }
.globalheader__actions--mobile { display: none; }
.globalheader__login {font-size: 14px; font-weight: 500;}
.globalheader__login:hover { color: var(--c-red); }
.globalheader__theme {display: inline-flex;align-items: center;justify-content: center;width: 44px;height: 44px;padding: 0;border: 1.5px solid var(--c-border);border-radius: 50%;background: transparent;color: var(--c-text);transition: border-color .2s ease;}
.globalheader__theme:hover { border-color: var(--c-text); }

/* burger (hidden on desktop) */
.globalheader__burger {display: none; margin-left: auto; width: 40px; height: 40px; padding: 0; border: 1px solid var(--c-border); border-radius: var(--radius-btn); background: transparent; flex-direction: column; align-items: center; justify-content: center; gap: 4px;}
.globalheader__burger span {display: block; width: 18px; height: 2px; background: var(--c-text); border-radius: 2px; transition: transform .25s ease, opacity .25s ease;}
.globalheader__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.globalheader__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.globalheader__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ========================================================= GLOBAL FOOTER ========================================================= */
.globalfooter {display: flex; flex-direction: column; gap: 8px; padding: 12px; margin-top: 80px;}
.globalfooter .container{
    max-width: 1416px;
}
.globalfooter__top {display: grid;grid-template-columns: repeat(3, 1fr);gap: 8px;margin-bottom: 8px;}
.globalfooter__card {display: flex;flex-direction: column;justify-content: flex-end;min-height: 190px;padding: 32px;background: var(--c-surface);border-radius: var(--radius-btn);}

.globalfooter__logo { display: block; }
.globalfooter__logo img {width: 138px;height: auto;}
.globalfooter__copy {font-size: 14px;color: var(--c-muted);}
.globalfooter__card--links { justify-content: center; }
.globalfooter__links {display: flex;flex-direction: column;gap: 10px;}
.globalfooter__links a {font-size: 16px;font-weight: 500;transition: color .2s ease;line-height: 24px;}
.globalfooter__links a:hover { color: var(--c-red); }

.globalfooter__label {font-size: 14px; color: var(--c-muted);}
.globalfooter__mail {align-self: flex-start; font-size: 18px; font-weight: 500; text-decoration: underline; text-underline-offset: 4px; word-break: break-word;}
.globalfooter__mail:hover { color: var(--c-red); }

/* bottom row */
.globalfooter__bottom {display: grid; grid-template-columns: 2fr 1fr; gap: 8px;}
.globalfooter__wordmark {display: flex;align-items: center;min-height: 290px;padding: 32px 40px;background: var(--c-dark);overflow: hidden;border-radius: var(--radius-btn);}
.globalfooter__wordmark img {width: 100%;max-width: 718px;height: auto;}
.globalfooter__join {display: flex;flex-direction: column;justify-content: space-between;min-height: 290px;padding: 32px 40px;background: var(--c-red);color: var(--c-white);transition: background-color .2s ease;border-radius: var(--radius-btn);}
.globalfooter__join:hover { background: var(--c-red-hover); }
.globalfooter__join-title {font-size: 48px;font-weight: 600;line-height: 54px;letter-spacing: -0.02em;font-family: var(--fonttitle);}
.globalfooter__join-arrow {align-self: flex-end; transition: transform .25s ease;}
.globalfooter__join:hover .globalfooter__join-arrow { transform: translateX(6px); }

.btn--lg {height: 56px;padding: 0 32px;font-size: 16px;}
.btn--outline {background: var(--c-bg);color: var(--c-text);box-shadow: inset 0 0 0 1.5px var(--c-border);}
.btn--outline:hover { box-shadow: inset 0 0 0 1px var(--c-red); color: var(--c-white); background: var(--c-red);}


.hero {padding: 64px 0 128px;}
.hero__inner {display: grid;grid-template-columns: minmax(0, 1fr) 480px;align-items: center;gap: 80px;}
.hero__eyebrow {margin-bottom: 20px;font-size: 24px;font-weight: 500;color: var(--c-red02);line-height: 30px; font-family: var(--fonttitle);}
.hero__title {max-width: 780px;margin: 0 0 24px;font-size: 76px;font-weight: 600;line-height: 80px;letter-spacing: -0.03em;}
.hero__text {max-width: 520px;margin-bottom: 40px;font-size: 20px;line-height: 30px;color: var(--c-muted);}
.hero__actions { display: flex; gap: 12px; }
.hero__partners {display: flex; align-items: center; gap: 20px; margin-top: 40px;}
.hero__partners-label {font-size: 14px;color: var(--c-muted);white-space: nowrap;}
.hero__logos { display: flex; align-items: center; gap: 24px; }
.hero__logos img {height: 30px;width: auto;}

/* revenue card */
.revenue {--bar-h: 92px; display: flex; flex-direction: column; min-height: 460px; padding: 32px; border-radius: 16px; background: var(--c-dark); color: var(--c-white);}
.revenue__label {display: flex;align-items: center;gap: 8px;font-size: 14px;color: #C4C6CD;}
.revenue__label i {width: 8px;height: 8px;border-radius: 50%;background: var(--c-red);}
.revenue__title {margin: 6px 0;font-size: 56px;font-weight: 600;line-height: 1.1;letter-spacing: -0.03em;}
.revenue__sub {font-size: 16px;color: #C4C6CD;}
.revenue__chart {display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; flex: 1; margin-top: 28px;}
.revenue__col {display: flex; flex-direction: column; justify-content: flex-end; min-height: calc(var(--bar-h) + 64px); /* reserve the full height (label + tallest bar + range) so the card never grows while bars animate */}
.revenue__pct {margin-bottom: 8px;font-size: 20px;font-weight: 500;color: #C4C6CD;font-variant-numeric: tabular-nums;transition: color .3s ease;}
.revenue__col { cursor: default; }
.revenue__bar {display: block; height: calc(var(--bar-h) * var(--k)); background: #434347; border-radius: 4px 4px 0 0; transition: background-color .3s ease;}
.revenue__range {margin-top: 8px;font-size: 14px;color: #C4C6CD;}
.revenue__col--active .revenue__pct { color: var(--c-white);}
.revenue__col--active .revenue__bar { background: var(--c-white);}
.revenue__col--active .revenue__range { color: rgba(255,255,255,.85);}
.revenue__caption {margin-top: 8px;font-size: 14px;color: rgba(255,255,255,.55);}

.revenue__foot {display: flex;align-items: center;justify-content: space-between;gap: 16px;margin-top: 24px;padding-top: 20px;border-top: 1px solid rgba(255,255,255,.14);font-size: 14px;color: #C4C6CD;}
.revenue__foot a {display: inline-flex; align-items: center; gap: 6px; color: var(--c-white); font-weight: 500; white-space: nowrap;}

/* ========================================================= STATS ========================================================= */
.stats { padding-bottom: 80px; }
.stats__grid {display: grid;grid-template-columns: repeat(4, 1fr);gap: 8px;}
.stats__item {display: flex;flex-direction: column;justify-content: flex-end;min-height: 200px;padding: 24px;background: var(--c-surface);border-radius: var(--radius-btn);}
.stats__item:hover, .stats__item--accent { background: #fcede8; }
.stats__item strong {font-variant-numeric: tabular-nums;font-size: 48px;font-weight: 500;line-height: 1.1;letter-spacing: -0.03em;font-family: var(--fonttitle);}
.stats__item span {margin-top: 6px;font-size: 16px;color: var(--c-muted);line-height: 24px;}



/* =========================================================
   OUR BRANDS
   ========================================================= */
.brands { padding: 0 0 128px; }
 
.brands__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
  margin-bottom: 48px;
}
.brands__title {
  margin: 0;
  font-size: 48px;
  font-weight: 600;
  line-height: 54px;
  letter-spacing: -0.03em;
}
.brands__intro {
  max-width: 616px;
  font-size: 20px;
  line-height: 30px;
  color: var(--c-muted);
}
 
.brands__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.brands__cell { display: flex; }
 
.brand-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 455px;
  padding: 40px;
  border-radius: var(--radius-btn);
  background: var(--c-surface);
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), background-color .3s ease;}
.brand-card:hover { transform: translateY(-4px); background: #efeff1; }
.brand-card__logo { width: auto; height: 64px; align-self: flex-start; }
.brand-card__tags {display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px;}
.brand-card__tags li {display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 50px; background: #EAEBEE; font-size: 14px; line-height: 1; color: var(--c-muted);}
 
.brand-card__quote {margin: 16px 0; font-size: 24px; font-weight: 600; line-height: 30px; letter-spacing: -0.01em;}
.brand-card__text {max-width: 480px; font-size: 16px; line-height: 24px; color: var(--c-muted);}
 
.brand-card__best { margin-top: auto; padding-top: 32px; }
.brand-card__best span {display: block; margin-bottom: 4px; font-size: 14px; color: var(--c-red02); font-weight: 500;}
.brand-card__best p {font-size: 16px;   line-height: 24px; font-weight: 500;}
 
.brands__perks {display: flex; align-items: center; flex-wrap: wrap; gap: 12px 48px; margin-top: 48px; padding: 28px 32px; border-radius: var(--radius-btn); background: #FEF2F0;}
.brands__perks li {display: flex; align-items: center; gap: 48px; font-size: 16px; line-height: 24px; font-weight: 500; position: relative; padding-left: 34px;}
.brands__perks li:before{content: ""; background: url(../images/check.svg)no-repeat center; width: 22px; height: 22px; position: absolute; left:0; top:50%; transform: translateY(-50%); }
 

/* =========================================================
   WHY PARTNERS WORK WITH US
   ========================================================= */
.why {padding: 128px 0;}
.why__title {margin: 0 0 48px; font-size: 40px; font-weight: 500; line-height: 1.1; letter-spacing: -0.03em;}
.why__list {display: flex;flex-direction: column;gap: 8px;}
.why-row {display: grid;grid-template-columns: 32px minmax(0, 1fr) 430px;align-items: center;column-gap: 40px;min-height: 124px;padding: 32px 42px;border-radius: 8px;background: var(--c-surface);color: var(--c-text);cursor: default;transition: background-color .35s ease, color .35s ease;}
.why-row--active { background: #d5301d; color: var(--c-white); }
.why-row__icon {display: flex;align-items: center;justify-content: center;width: 40px;height: 40px;}
.why-row__icon img,
.why-row__icon svg { width: 100%; height: 100%; transition: filter .35s ease;}
.why-row  .why-row__icon svg path{ stroke: #23252B;}
.why-row--active .why-row__icon svg path{stroke: #ffffff;}
/* if the icon is an <img>, turn it white on the red row */
.why-row--active .why-row__icon img { filter: brightness(0) invert(1); }
.why-row__title {margin: 0;font-size: 48px;font-weight: 500;line-height: 54px;letter-spacing: -0.03em;}
.why-row__text {font-size: 20px;line-height: 30px;color: var(--c-muted);transition: color .35s ease;}
.why-row--active .why-row__text { color: var(--c-white); } 

/* =========================================================
   COMMISSIONS
   ========================================================= */
.btn--xl {height: 56px;padding: 0 32px;border-radius: var(--radius-btn);font-size: 16px;}

.commissions {
  --first: 25.083%;
  --colw: 18.729%;
  padding: 128px 0;
  background: var(--c-surface);
}

.commissions__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
  margin-bottom: 48px;
}
.commissions__title {
  margin: 0 0 20px;
  font-size: 48px;
  font-weight: 500;
  line-height: 54px;
  letter-spacing: -0.03em;
}
.commissions__text {
  max-width: 560px;
  font-size: 20px;
  line-height: 30px;
  color: var(--c-muted);
}

/* range picker */
.picker {flex-shrink: 0;width: 313px;}
.picker__label {
  margin-bottom: 14px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}
.picker__group {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  padding: 4px;
  border-radius: var(--radius-btn);
  background: var(--c-white);
}
.picker__btn {
  height: 48px;
  border: 0;
  border-radius: 8px;
  background: var(--c-surface);
  color: var(--c-text);
  font-size: 14px;
  font-weight: 500;
  transition: background-color .3s ease, color .3s ease, transform .2s ease;
}
.picker__btn:hover { background: #ebebee; }
.picker__btn:active { transform: scale(.96); }
.picker__btn.is-active { background: var(--c-dark); color: var(--c-white); }
.picker__btn:focus-visible { outline: 2px solid var(--c-red); outline-offset: 2px; }

/* table card */
.comm-card {
  border-radius: 12px;
  background: var(--c-white);
  overflow: hidden;
}
.comm-scroll { overflow-x: auto; }
.comm-wrap { position: relative; min-width: 760px; }

.comm-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  text-align: left;
}
.comm-col-first { width: var(--first); }

.comm-th { padding: 0; font-weight: 400; vertical-align: bottom; cursor: pointer; }
.comm-th--label { cursor: default; }

.comm-cell {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  height: 231px;
  padding: 0 28px 28px;
}
.comm-cell--label {
  max-width: 100%;
  padding-bottom: 36px;
  font-size: 14px;
  line-height: 20px;
  color: var(--c-muted);
}
.comm-cell--label {max-width: 95%;}

.comm-bar {
  display: block;
  width: 56px;
  height: var(--h);
  margin-bottom: 12px;
  border-radius: 6px;
  background: #dcdce0;
  transition: background-color .4s ease;
}
.comm-th.is-active .comm-bar { background: #2b2d36; }

.comm-pct {
  font-size: 48px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  font-family: var(--fonttitle);
}

.comm-table tbody tr { height: 64px; }
.comm-table tbody tr:nth-child(odd) { background: var(--c-surface); }
.comm-table tbody th,
.comm-table tbody td {
  padding: 0 28px;
  font-size: 14px;
  vertical-align: middle;
  font-family: var(--fonttitle);
}
.comm-table tbody th {font-size: 16px;font-weight: 600;}
.comm-table tbody td strong { font-weight: 600; }

/* moving outline over the active column */
.comm-highlight {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--first) + var(--colw) * var(--active, 1));
  width: var(--colw);
  border: 2px solid var(--c-dark);
  border-radius: 12px;
  pointer-events: none;
  transition: left .5s cubic-bezier(.22, 1, .36, 1);
}

.commissions__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 50px;
}
.commissions__foot p {font-size: 16px;font-weight: 500;}



/* =========================================================
   FAQ
   ========================================================= */
[hidden] { display: none !important; }

.faq {padding: 128px 0;background: var(--c-surface);}

.faq__inner {
  display: grid;
  grid-template-columns: 407px minmax(0, 1fr);
  align-items: start;
}

.faq__main { min-width: 0; }

.faq__title {
  margin: 0;
  padding-top: 4px;
  font-size: 48px;
  font-weight: 600;
  line-height: 54px;
  letter-spacing: -0.03em;
}

.faq__tabs {display: flex;flex-wrap: wrap;gap: 8px;margin-bottom: 24px;}
.faq__tab {
  height: 40px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: var(--c-white);
  color: var(--c-text);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color .3s ease, color .3s ease, transform .2s ease;
  line-height: 20px;
}
.faq__tab:hover { background: #ebebee; }
.faq__tab:active { transform: scale(.96); }
.faq__tab.is-active { background: var(--c-dark); color: var(--c-white); }
.faq__tab:focus-visible,
.faq__q:focus-visible { outline: 2px solid var(--c-red); outline-offset: 2px; }

.faq__list {display: flex;flex-direction: column;gap: 8px;}

.faq__item {
  border-radius: 8px;
  background: var(--c-white);
  transition: background-color .35s ease;
}
.faq__item.is-open {background: #FEF2F0;}
.faq__heading { margin: 0; font-size: inherit; font-weight: inherit; }

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  min-height: 77px;
  padding: 0 36px 0 24px;
  border: 0;
  background: transparent;
  color: var(--c-text);
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
  text-align: left;
  cursor: pointer;
}
.faq__item.is-open .faq__q { align-items: flex-start; min-height: 0; padding-top: 24px; }
.faq__item.is-open .faq__icon { margin-top: 4px; }

/* plus / minus icon */
.faq__icon {
  position: relative;
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  margin-right: -6px;
  color: var(--c-text);
  transition: color .3s ease;
}
.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transform: translateY(-50%);
  transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}
.faq__icon::after { transform: translateY(-50%) rotate(90deg); }
.faq__item.is-open .faq__icon {color: var(--c-red02);}
.faq__item.is-open .faq__icon::after { transform: translateY(-50%) rotate(0deg); }

/* answer: smooth height */
.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .45s cubic-bezier(.22, 1, .36, 1);
}
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a-inner { min-height: 0; overflow: hidden; }
.faq__a-inner p {
  max-width: 640px;
  padding: 12px 24px 28px;
  font-size: 16px;
  line-height: 24px;
  color: #35353b;
}

/* items re-enter when a tab changes */
@keyframes faqIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.faq__item.is-entering { animation: faqIn .5s cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(var(--i, 0) * 70ms); }

@media (prefers-reduced-motion: reduce) {
  .faq__item.is-entering { animation: none; }
  .faq__a, .faq__icon::before, .faq__icon::after, .faq__tab { transition: none; }
}

/* =========================================================
   WHAT PARTNERS SAY
   ========================================================= */
.testimonials {padding: 128px 0 96px;}

.testimonials__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 40px;
}
.testimonials__title {
  margin: 0;
  font-size: 48px;
  font-weight: 500;
  line-height: 54px;
  letter-spacing: -0.03em;
}

.testimonials__ctrls { display: flex; gap: 8px; }
.t-ctrl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--c-text);
  border-radius: 50%;
  background: transparent;
  color: var(--c-text);
  transition: background-color .25s ease, color .25s ease, opacity .25s ease, transform .2s ease;
}
.t-ctrl:hover:not(:disabled) { background: var(--c-text); color: var(--c-white); }
.t-ctrl:active:not(:disabled) { transform: scale(.94); }
.t-ctrl:disabled { opacity: .3; cursor: default; }
.t-ctrl:focus-visible { outline: 2px solid var(--c-red); outline-offset: 2px; }
.t-ctrl .t-ctrl__play { display: none; }
.t-ctrl.is-paused .t-ctrl__pause { display: none; }
.t-ctrl.is-paused .t-ctrl__play { display: block; }

.testimonials__viewport {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  outline: none;
}
.testimonials__viewport::-webkit-scrollbar { display: none; }
.testimonials__viewport:focus-visible { outline: 2px solid var(--c-red); outline-offset: 4px; }
.testimonials__track { display: flex; gap: 24px; width: max-content; }

.t-card {
  flex: 0 0 458px;
  min-height: 182px;
  padding: 28px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background: var(--c-white);
  scroll-snap-align: start;
}
.t-card__head { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.t-card__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #ededef;
  font-size: 14px;
  color: var(--c-muted);
  line-height: 20px;
}
.t-card__name {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}
.t-card__name:hover { color: var(--c-red); }
.t-card__site {font-size: 14px;line-height: 20px;color: var(--c-muted);}
.t-card__text {
  margin: 0;
  font-size: 20px;
  line-height: 30px;
}

/* =========================================================
   CONTACT
   ========================================================= */
.contact {--split: 44.33%;padding: 0 0 38px;}

.contact__card {
  position: relative;
  display: grid;
  grid-template-columns: var(--split) 1fr;
  border-radius: 8px;
  background: var(--c-dark);
  color: var(--c-white);
}

.contact__info {
  display: flex;
  flex-direction: column;
  padding: 64px 56px 56px;
}
.contact__title {
  margin: 0 0 32px;
  font-size: 48px;
  font-weight: 500;
  line-height: 54px;
  letter-spacing: -0.03em;
}
.contact__label {margin-bottom: 32px;font-size: 14px;color: #C4C6CD;line-height: 20px;}
.contact__list {display: flex;flex-direction: column;gap: 24px;}
.contact__list li {display: flex;align-items: center;gap: 12px;font-size: 20px;line-height: 30px;}
.contact__list svg {flex-shrink: 0;width: 22px;height: 22px;}
.contact__list a:hover { opacity: .75; }
.contact__telegram { text-decoration: underline; text-underline-offset: 3px; }
.contact__direct {
  margin-top: auto;
  padding-top: 48px;
  font-size: 24px;
  font-weight: 600;
  line-height: 30px;
}

/* ticket divider with two notches */
.contact__divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--split);
  width: 6px;
  margin-left: -3px;
}
.contact__divider::before {
  content: "";
  position: absolute;
  top: 24px;
  bottom: 24px;
  left: 0;
  width: 6px;
  background: radial-gradient(circle, var(--c-white) 1.5px, transparent 2px) center top / 6px 10px repeat-y;
}
.contact__divider::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 30px;
  margin-left: -15px;
  background:
    radial-gradient(circle at 50% 0, var(--c-bg) 14px, transparent 15px) top / 100% 30px no-repeat,
    radial-gradient(circle at 50% 100%, var(--c-bg) 14px, transparent 15px) bottom / 100% 30px no-repeat;
}

/* form */
.contact__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 56px 56px 56px 70px;
}
.field { display: flex; flex-direction: column; }
.field label {margin-bottom: 8px;font-size: 14px;font-weight: 500;line-height: 20px;}
.field input,
.field textarea {
  width: 100%;
  padding: 0 20px;
  border: 1px solid #40424D;
  border-radius: var(--radius-btn);
  background: #2E303B;
  color: var(--c-white);
  font-family: inherit;
  font-size: 16px;
  outline: none;
  transition: border-color .25s ease, background-color .25s ease;
}
.field input {height: 52px;}
.field textarea { height: 140px; padding-top: 16px; resize: vertical; line-height: 1.5; }
.field input::placeholder,
.field textarea::placeholder { color: #8d8d96; }
.field input:focus,
.field textarea:focus { border-color: rgba(255,255,255,.55); background: #383942; }
.field.has-error input { border-color: var(--c-red); }
.field__error { display: none; margin-top: 6px; font-size: 12px; color: #ff8b78; }
.field.has-error .field__error { display: block; }

.contact__submit {
  height: 56px;
  margin-top: 0;
  border: 0;
  border-radius: var(--radius-btn);
  background: var(--c-white);
  color: var(--c-text);
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  transition: background-color .25s ease, transform .2s ease;
}
.contact__submit:hover { background: var(--c-red02); color: var(--c-white);}
.contact__submit:active { transform: scale(.99); }
.contact__submit:disabled { opacity: .7; cursor: default; }
.contact__submit:focus-visible { outline: 2px solid var(--c-red); outline-offset: 2px; }
.contact__status { min-height: 0; font-size: 13px; color: rgba(255,255,255,.85); }
.contact__status:empty { display: none; }


/* == ANIMATION (works with js/app.js, only when JS is on) == */
.js [data-reveal] {opacity: 0;transform: translateY(18px);transition: opacity .7s ease var(--d, 0ms), transform .8s cubic-bezier(.22, 1, .36, 1) var(--d, 0ms);}
.js [data-reveal].is-in { opacity: 1; transform: none;}
/* hero growth card (Figma "Hero – growth card animation"):
   bars appear one by one, the title steps 20% > 25% > 30% > 35% with them,
   and the last bar turns white once the sequence ends (js/app.js) */
.js .revenue__bar { height: 0; }
.js .revenue__pct { opacity: 0; transform: translateY(8px); }
.js .revenue__col.is-grown .revenue__bar {height: calc(var(--bar-h) * var(--k)); transition: height .9s cubic-bezier(.22, 1, .36, 1), background-color .3s ease; }
.js .revenue__col.is-grown .revenue__pct {opacity: 1; transform: none; transition: opacity .6s ease, transform .8s cubic-bezier(.22, 1, .36, 1), color .3s ease; }
.js .revenue:not(.is-played) .revenue__col--active .revenue__bar { background: #434347; }
.js .revenue:not(.is-played) .revenue__col--active .revenue__pct { color: #C4C6CD; }
.js .revenue.is-played .revenue__col.is-grown .revenue__bar { transition: background-color .5s ease; }
.js .revenue.is-played .revenue__col.is-grown .revenue__pct { transition: color .5s ease; }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal],
  .js .revenue__col.is-grown .revenue__bar,
  .js .revenue__col.is-grown .revenue__pct { transition: none; }
}

/* ========================================================= RESPONSIVE ========================================================= */

/* ≤ 1199 */
@media (max-width: 1199px) {
  .hero__inner { grid-template-columns: minmax(0, 1fr) 480px; gap: 48px; }
  .hero__title { font-size: 64px; line-height: 1.1; }
  .hero__logos { gap: 16px; }
  .stats__item { padding: 24px; }
  .stats__item strong { font-size: 34px; }
  .globalheader__menu { gap: 24px; }
  .globalfooter__card,
  .globalfooter__wordmark,
  .globalfooter__join { padding-inline: 28px; }
}

/* ≤ 991 – mobile menu */
@media (max-width: 991px) {
  :root { --header-h: 72px; }
  .hero { padding: 40px 0 56px; }
  .hero__inner { grid-template-columns: 1fr; gap: 40px; }
  .hero__title { max-width: 680px; font-size: 56px; }
  .revenue { min-height: 420px; }
  .stats__grid { grid-template-columns: repeat(2, 1fr); }
  
  .globalheader__burger { display: inline-flex; margin-left: 12px; border: 0; width: 40px; }
  .globalheader__actions--desktop { gap: 12px; }
  .globalheader__actions--desktop .globalheader__login { display: none; }

  .globalheader__nav {position: absolute; top: 100%; left: 0; right: 0; margin: 0; padding: 8px var(--gutter) 24px; background: var(--c-bg); border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); display: none;}
  .globalheader__nav.is-open { display: block;}
  .globalheader__menu {flex-direction: column; align-items: stretch; gap: 0;}
  .globalheader__menu a {display: block; padding: 14px 0; font-size: 16px; border-bottom: 1px solid #E8E9EC;}

  .globalheader__actions--mobile { display: block; margin-top: 0; }
  .globalheader__actions--mobile .btn { display: none; }
  .globalheader__actions--mobile .globalheader__login { display: block; padding: 14px 0; font-size: 16px; }

  .globalfooter__card { padding: 28px 24px; min-height: 170px; }
  .globalfooter__wordmark,
  .globalfooter__join { padding: 28px 24px; min-height: 240px; }
  .globalfooter__mail { font-size: 16px; }
  .globalfooter__join-title { font-size: 26px; }
}

/* ≤ 767 – stacked footer */


/* ≤ 480 */


/* ≤ 375 */




/* ---------- Our brands: animation ---------- */
.js .brands__perks li {
  opacity: 0;
  transform: translateX(-10px);
}
.js .brands__perks.is-in li {
  opacity: 1;
  transform: none;
  transition:
    opacity .5s ease calc(300ms + var(--i) * 140ms),
    transform .6s cubic-bezier(.22, 1, .36, 1) calc(300ms + var(--i) * 140ms);
}
@media (prefers-reduced-motion: reduce) {
  .brand-card,
  .js .brands__perks.is-in li { transition: none; }
}
 
/* ---------- Our brands: responsive ---------- */
@media (max-width: 1199px) {
  .brand-card { padding: 32px; min-height: 420px; }
}
@media (max-width: 991px) {
  .brands { padding: 56px 0 72px; }
  .brands__head { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 32px; }
  .brands__title { font-size: 34px; }
  .brands__grid { gap: 16px; }
  .brand-card { padding: 28px; min-height: 0; }
  .brand-card__logo { height: 52px; }
  .brands__perks { margin-top: 32px; }
}




/* ---------- Why partners: responsive ---------- */
@media (max-width: 1199px) {
  .why-row { grid-template-columns: 32px minmax(0, 1fr) 360px; column-gap: 32px; }
  .why-row__title { font-size: 40px; }
  .why-row__text { font-size: 15px; }
}
@media (max-width: 991px) {
  .why { padding: 72px 0; }
  .why__title { margin-bottom: 32px; font-size: 34px; }
  .why-row {grid-template-columns: 32px minmax(0, 1fr); row-gap: 12px; column-gap: 24px; min-height: 0; padding: 28px;}
  .why-row__text { grid-column: 2; line-height: 1.6; }
  .why-row__title { font-size: 34px; }
}



@media (prefers-reduced-motion: reduce) {
  .why-row, .why-row__text, .why-row__icon img { transition: none; }
}

/* ---------- Commissions: animation ---------- */
.js .comm-bar { height: 0; }
.js .comm-card.is-in .comm-bar {height: var(--h); transition: height 1s cubic-bezier(.22, 1, .36, 1) calc(300ms + var(--i) * 140ms), background-color .4s ease;}
.js .comm-highlight { opacity: 0; transform: scale(.96); }
.js .comm-card.is-in .comm-highlight {opacity: 1; transform: none; transition: left .5s cubic-bezier(.22, 1, .36, 1), opacity .5s ease 1s, transform .6s cubic-bezier(.22, 1, .36, 1) 1s;}
@media (prefers-reduced-motion: reduce) {
  .js .comm-card.is-in .comm-bar,
  .js .comm-card.is-in .comm-highlight,
  .picker__btn { transition: none; }
}

/* ---------- Commissions: responsive ---------- */
@media (max-width: 1199px) {
  .comm-pct { font-size: 40px; }
  .comm-cell { height: 210px; padding: 0 20px 24px; }
  .comm-table tbody th, .comm-table tbody td { padding: 0 20px; }
}
@media (max-width: 991px) {
  .commissions { padding: 72px 0 80px; }
  .commissions__head { flex-direction: column; align-items: flex-start; gap: 28px; margin-bottom: 32px; }
  .commissions__title { font-size: 34px; margin-bottom: 14px; }
  .commissions__text { font-size: 16px; }
  .commissions__foot { margin-top: 32px; }
}






/* ---------- FAQ: responsive ---------- */
@media (max-width: 1199px) {
  .faq__inner { grid-template-columns: 280px minmax(0, 1fr); }
}
@media (max-width: 991px) {
  .faq { padding: 72px 0 80px; }
  .faq__inner { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .faq__title { font-size: 34px; padding-top: 0; }
}






/* ---------- Testimonials + Contact: responsive ---------- */
@media (max-width: 1199px) {
  .contact__info { padding: 48px 40px; }
  .contact__form { padding: 48px 40px 48px 56px; }
}
@media (max-width: 991px) {
  .testimonials { padding: 72px 0; }
  .testimonials__title { font-size: 34px; }
  .t-card { flex-basis: 360px; }

  .contact { padding-bottom: 80px; }
  .contact__card { grid-template-columns: 1fr; }
  .contact__info { padding: 40px 32px; }
  .contact__direct { padding-top: 40px; }
  .contact__title { font-size: 34px; }
  .contact__form { padding: 40px 32px; }

  /* divider turns horizontal */
  .contact__divider {
    position: relative;
    left: 0;
    width: auto;
    height: 6px;
    margin: 0;
  }
  .contact__divider::before {
    top: 0; bottom: 0; left: 24px; right: 24px; width: auto;
    background: radial-gradient(circle, var(--c-white) 1.5px, transparent 2px) left center / 10px 6px repeat-x;
  }
  .contact__divider::after {
    top: -12px; bottom: -12px; left: 0; right: 0; width: auto; margin: 0;
    background:
      radial-gradient(circle at 0 50%, var(--c-bg) 14px, transparent 15px) left / 30px 100% no-repeat,
      radial-gradient(circle at 100% 50%, var(--c-bg) 14px, transparent 15px) right / 30px 100% no-repeat;
  }
}

/* ---------- mobile-only pieces (hidden on desktop) ---------- */
.brands__nav { display: none; }
.comm-list { display: none; }
.comm-list__q { padding: 16px 20px; background: var(--c-white); font-size: 14px; font-weight: 500; line-height: 20px; }
.comm-row {display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 68px; padding: 14px 20px; border: 0; border-radius: var(--radius-btn); background: var(--c-white); color: var(--c-text); font-family: inherit; text-align: left; cursor: pointer; transition: box-shadow .3s ease, background-color .3s ease;}
.comm-row:nth-of-type(odd) { background: var(--c-surface); }
.comm-row.is-active { box-shadow: inset 0 0 0 2px var(--c-dark); }
.comm-row:focus-visible { outline: 2px solid var(--c-red); outline-offset: -2px; }
.comm-row__info { display: flex; flex: 1; flex-direction: column; gap: 8px; min-width: 0; }
.comm-row__label { font-size: 14px; line-height: 20px; }
.comm-row__bar {display: block;width: var(--w);max-width: 100%;height: 8px;border-radius: 20px;background: #DCDDE2;transition: background-color .4s ease;}
.comm-row.is-active .comm-row__bar {background: #2E303B;}
.comm-row__pct {font-family: var(--fonttitle); font-size: 32px; font-weight: 500; line-height: 1.1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums;}
.js .comm-row__bar { width: 0; }
.js .comm-list.is-in .comm-row__bar {width: var(--w); transition: width 1s cubic-bezier(.22, 1, .36, 1) calc(300ms + var(--i) * 140ms), background-color .4s ease;}
@media (prefers-reduced-motion: reduce) { .js .comm-list.is-in .comm-row__bar, .comm-row { transition: none; } }

/* =========================================================
   MOBILE – 375px design, applied from 767px and below (fluid)
   ========================================================= */
@media (max-width: 767px) {
  :root { --gutter: 16px; --header-h: 64px; --fs-h2: clamp(32px, 5.2vw, 40px); }

  /* header */
  .globalheader__logo img { width: 120px; }
  .globalheader__actions--desktop { gap: 8px; }
  .globalheader__theme { width: 44px; height: 44px; }
  .globalheader__theme img { width: 20x; height: 20px; }
  .globalheader__actions--desktop .btn { height: 44px; padding:0 20px; font-size::16px; }

  /* hero */
  .hero { padding: 32px 0 64px; }
  .hero__inner { grid-template-columns: 1fr; gap: 40px; }
  .hero__eyebrow {margin-bottom: 12px;font-size: 24px;line-height: 30px;}
  .hero__title {max-width: none;margin-bottom: 16px;font-size: 44px;line-height: 48px;width: 80%;}
  .hero__text {max-width: none;margin-bottom: 32px;font-size: 20px;line-height: 30px;}
  .hero__actions { flex-direction: column; gap: 12px; }
  .hero__actions .btn {width: 100%;height: 56px;font-size: 16px;}
  .hero__partners {flex-direction: column;align-items: flex-start;gap: 12px;margin-top: 24px;padding: 20px 18px;border-radius: var(--radius-btn);background: var(--c-surface);}
  .hero__partners-label { font-size: 14px; line-height: 20px; }
  .hero__logos { flex-wrap: wrap; gap: 12px 28px; }
  .hero__logos img { height: 27px; }

  /* revenue card */
  .revenue {--bar-h: 104px;min-height: 0;padding: 24px;}
  .revenue__title { font-size: 44px; }
  .revenue__sub {font-size: 16px;line-height: 24px;}
  .revenue__chart { gap: 10px; margin-top: 24px; }
  .revenue__pct {font-size: 20px;}
  .revenue__range, .revenue__caption {font-size: 14px;}
  .revenue__foot {flex-direction: column;align-items: flex-start;gap: 12px;font-size: 16px;}

  /* stats */
  .stats {padding-bottom: 64px;}
  .stats__grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .stats__item { min-height: 136px; padding: 20px; }
  .stats__item strong { font-size: clamp(28px, 5vw, 40px); }
  .stats__item span { font-size: 14px; line-height: 20px; }

  /* brands: slider */
  .brands { padding: 0 0 64px; }
  .brands__head { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 32px; }
  .brands__title { font-size: var(--fs-h2); line-height: 1.2; }
  .brands__intro { max-width: none; font-size: 16px; line-height: 24px; }
  .brands__grid {display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none;}
  .brands__grid::-webkit-scrollbar { display: none; }
  .brands__cell {flex: 0 0 clamp(300px, 88%, 520px);scroll-snap-align: start;opacity: 1 !important;transition: unset !important;}
  .brand-card {min-height: 0;padding: 30px;}
  .brand-card__logo {height: 64px;}
  .brand-card__tags {margin-top: 32px;}
  .brand-card__tags li {height: 32px;font-size: 13px;}
  .brand-card__quote {margin: 16px 0 12px;font-size: 24px;line-height: 30px;}
  .brand-card__text {font-size: 16px;line-height: 24px;}
  .brand-card__best { padding-top: 24px; }
  .brand-card__best span { font-size: 14px; line-height: 20px; }
  .brand-card__best p {font-size: 16px;line-height: 24px;}  
  .brands__nav { display: flex; align-items: center; gap: 8px; margin-top: 24px; }
  .brands__count { margin-left: 8px; font-size: 14px; color: var(--c-muted); font-variant-numeric: tabular-nums; }
  .t-ctrl {width: 44px;height: 44px;}
  .brands__perks {flex-direction: column;align-items: flex-start;gap: 14px;margin-top: 24px;padding: 20px;}
  .brands__perks li {align-items: flex-start;padding-left: 30px;font-size: 16px;line-height: 24px;}
  .brands__perks li:before { top: 0; transform: none; width: 20px; height: 20px; background-size: contain; }

  /* why partners */
  .why { padding: 64px 0; }
  .why__title {margin-bottom: 29px;font-size: var(--fs-h2);line-height: 1.2;}
  .why-row {grid-template-columns: 1fr;row-gap: 12px;min-height: 0;padding: 24px;border-radius: var(--radius-btn);}
  .why-row__icon { width: 32px; height: 32px; }
  .why-row__title { font-size: 24px; line-height: 30px; }
  .why-row__text {grid-column: auto;font-size: 16px;line-height: 24px;}

  /* commissions: table + picker become the tier list */
  .commissions { padding: 64px 0; }
  .commissions__head { flex-direction: column; align-items: flex-start; gap: 0; margin-bottom: 24px; }
  .commissions__title { margin-bottom: 12px; font-size: var(--fs-h2); line-height: 1.2; }
  .commissions__text { max-width: none; font-size: 16px; line-height: 24px; }
  .picker, .comm-card { display: none; }
  .comm-list { display: block; border-radius: var(--radius-btn); background: var(--c-white); overflow: hidden; }
  .comm-row{border-radius:0;}
  .comm-row.is-active{border-radius: var(--radius-btn);}
.comm-row__label{
    font-size: 16px;
    line-height: 24px;
}
   .commissions__foot { flex-direction: column; align-items: stretch; gap: 20px; margin-top: 24px; }
  .commissions__foot p {font-size: 16px;line-height: 24px;}
  .commissions__foot .btn { width: 100%; height: 52px; }

  /* faq */
  .faq { padding: 64px 0; }
  .faq__inner { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .faq__title { padding-top: 0; font-size: var(--fs-h2); line-height: 1.2; }
  .faq__tabs {flex-wrap: nowrap;overflow-x: auto;margin-inline: calc(var(--gutter) * -1);margin-bottom: 24px;padding-inline: var(--gutter);scrollbar-width: none;}
  .faq__tabs::-webkit-scrollbar { display: none; }
  .faq__item {border-radius: var(--radius-btn);padding: 18px 0;}
  .faq__q {min-height: 72px;padding: 0 24px;/* font-size: 16px; *//* line-height: 22px; */}
  .faq__item.is-open .faq__q { padding-top: 20px; }
  .faq__icon { margin-right: 0; }
  .faq__a-inner p {padding: 12px 24px 24px;/* font-size: 14px; *//* line-height: 22px; */}

  /* testimonials: title, slider, then controls underneath */
  .testimonials { padding: 64px 0; }
  .testimonials .container { display: flex; flex-direction: column; }
  .testimonials__head { display: contents; }
  .testimonials__title { order: 1; margin-bottom: 24px; font-size: var(--fs-h2); line-height: 1.2; }
  .testimonials__viewport {order: 2; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);}
  .testimonials__ctrls {order: 3;margin-top: 20px;}
  #tToggle { margin-left: auto; }
  .testimonials__track { gap: 16px; }
  .t-card { flex-basis: clamp(300px, 70vw, 420px); min-height: 0; padding: 24px; border-radius: var(--radius-btn); }
  .t-card__text {/* font-size: 18px; *//* line-height: 28px; */}

  /* contact */
  .contact { padding-bottom: 24px; }
  .contact__card { grid-template-columns: 1fr; border-radius: var(--radius-btn); }
  .contact__info { padding: 32px 24px; }
  .contact__title { margin-bottom: 20px; font-size: var(--fs-h2); line-height: 1.2; }
  .contact__label { margin-bottom: 24px; }
  .contact__list { gap: 20px; }
  .contact__list li { font-size: 16px; line-height: 24px; }
  .contact__list svg { width: 20px; height: 20px; }
  .contact__direct {padding-top: 16px;font-size: 20px;line-height: 30px;}
  .contact__form { padding: 32px 24px; }

  /* footer: stacked cards, order matches the mobile design */
  .globalfooter { margin-top: 40px; padding: 0 0 12px; }
  .globalfooter .container { padding-inline: 12px; }
  .globalfooter__inner { display: flex; flex-direction: column; gap: 8px; }
  .globalfooter__top, .globalfooter__bottom { display: contents; }
  .globalfooter__wordmark { order: 1; min-height: 160px; padding: 36px 20px; }
  .globalfooter__wordmark img { max-width: 100%; }
  .globalfooter__join { order: 2; min-height: 140px; padding: 20px; }
  .globalfooter__join-title { font-size: 32px; line-height: 38px; }
  .globalfooter__card { min-height: 0; padding: 20px; gap: 12px; justify-content: flex-start; }
  .globalfooter__card--links { order: 3; }
  .globalfooter__card--mail { order: 4; }
  .globalfooter__card--brand { order: 5; }
  .globalfooter__links {display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); grid-template-columns: repeat(2, 1fr); gap: 10px 16px;}
  .globalfooter__mail { font-size: 24px; line-height: 30px; }
  .globalfooter__logo img { width: 138px; }
}

/* ≤ 480 – fine tuning for 375 */
@media (max-width: 480px) {
  .revenue__chart { gap: 8px; }
  .comm-row__pct { font-size: 28px; }
  .stats__item {padding: 12px;}
  .faq__tab { padding: 0 16px; }
}


/* ========================================================= HOW IT WORKS Paste into style.css (before the responsive / animation part) ========================================================= */
.how { padding: 128px 0;}
.how__grid {display: grid; grid-template-columns: minmax(0, 1fr) 560px; column-gap: 80px; align-items: start;}
.how__title {margin: 0 0 40px; font-size:48px; font-weight: 500; line-height: 54px; letter-spacing: -0.03em;}

/* steps */
.how__steps {display: flex;flex-direction: column;gap: 56px;}
.how-step {display: flex; align-items: flex-start; gap: 28px; outline: none; cursor: default;}
.how-step__num {display: inline-flex;align-items: center;justify-content: center;flex-shrink: 0;width: 44px;height: 44px;border-radius: 50%;background: var(--c-surface);color: var(--c-text);font-size: 16px;font-weight: 500;transition: background-color .35s ease, color .35s ease, transform .35s ease;}
.how-step__title {margin: 0 0 4px;font-size: 24px;font-weight: 500;line-height: 30px;letter-spacing: -0.01em;color: #4a4d59;transition: color .35s ease;}
.how-step__text {max-width: 480px;font-size: 16px;line-height: 24px;color: var(--c-muted);}
.how-step.is-active .how-step__num { background: var(--c-dark); color: var(--c-white); }
.how-step.is-active .how-step__title { color: var(--c-text); }
.how-step:focus-visible .how-step__num { outline: 2px solid var(--c-red); outline-offset: 3px; }
.how__cta {margin-top: 48px;}

/* status card */
.how-card {display: flex;align-items: center;min-height: 1px;padding: 100px 60px;border-radius: var(--radius-btn);background: var(--c-surface);}
.how-status {width: 100%; padding: 28px; border-radius: var(--radius-btn); background: var(--c-white); box-shadow: 0 1px 2px rgba(0, 0, 0, .04);}
.how-status__label { margin-bottom: 8px; font-size: 12px; line-height: 1.3; color: var(--c-muted); }
.how-status__title {margin: 0 0 28px; font-size: 22px; font-weight: 500; line-height: 1.3; letter-spacing: -0.01em;}
.how-status__list { display: flex; flex-direction: column; gap: 28px; }
.how-status__item { display: flex; align-items: flex-start; gap: 16px; }
.how-status__item strong { display: block; font-size: 14px; font-weight: 500; line-height: 1.4; }
.how-status__item div span { display: block; margin-top: 2px; font-size: 12px; line-height: 1.4; color: var(--c-muted); }
.how-status__icon {display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: #eeeef0; color: transparent; box-shadow: inset 0 0 0 0 transparent; transition: background-color .4s ease, color .4s ease, box-shadow .4s ease;}
.how-status__item.is-done .how-status__icon { background: var(--c-dark); color: var(--c-white); }
.how-status__item.is-current .how-status__icon {background: var(--c-white); box-shadow: inset 0 0 0 1.5px var(--c-red);}

/* traffic card */
.how-traffic {--c-ok: #2f9e8f;display: grid;grid-template-columns: minmax(0, 1fr) 560px;column-gap: 80px;margin-top: 64px;padding: 40px 48px;border-radius: var(--radius-btn);background: var(--c-surface);}
.how-traffic__title {margin: 0 0 24px;font-size: 24px;font-weight: 500;line-height: 30px;letter-spacing: -0.01em;}
.how-tags {display: flex;flex-wrap: wrap;gap: 14px 28px;}
.how-tags li {display: inline-flex;align-items: center;gap: 8px;font-size: 14px;line-height: 20px;font-weight: 500;}
.how-tags--ok svg { color: var(--c-ok); }
.how-tags--no svg { color: var(--c-red); }
.how-tags svg {flex-shrink: 0;height: 12px;width: 12px;}

/* ---------- animation ---------- */
.js .how-status__item { opacity: 0; transform: translateY(8px); }
.js .how-card.is-in .how-status__item {
  opacity: 1;
  transform: none;
  transition: opacity .5s ease calc(500ms + var(--n, 0) * 140ms), transform .6s cubic-bezier(.22, 1, .36, 1) calc(500ms + var(--n, 0) * 140ms);
}
.how-status__item:nth-child(2) { --n: 1; }
.how-status__item:nth-child(3) { --n: 2; }

@media (prefers-reduced-motion: reduce) {
  .how-step__num, .how-step__title, .how-status__icon, .js .how-card.is-in .how-status__item { transition: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 1199px) {
  .how__grid, .how-traffic { grid-template-columns: minmax(0, 1fr) 460px; column-gap: 48px; }
  .how-card { min-height: 460px; padding: 40px; }
}

@media (max-width: 991px) {
  .how { padding: 80px 0; }
  .how__grid { grid-template-columns: minmax(0, 1fr); row-gap: 48px; }
  .how__title { margin-bottom: 40px; }
  .how-card { min-height: 0; padding: 40px; }
  .how-traffic { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; margin-top: 48px; padding: 32px; }
}

/* mobile (375 design, applied from 767 down) */
@media (max-width: 767px) {
  .how { padding: 64px 0; }
  .how__title { margin-bottom: 32px; font-size: clamp(32px, 5.2vw, 40px); line-height: 1.2; }
  .how__steps { gap: 32px; }
  .how-step { gap: 20px; }
  .how-step__title { font-size: 22px; }
  .how-step__text { font-size: 14px; line-height: 22px; }
  .how__cta { width: 100%; height: 52px; margin-top: 32px; }

  .how-card { display: none; }

  .how-traffic { grid-template-columns: minmax(0, 1fr); row-gap: 28px; margin-top: 32px; padding: 24px; }
  .how-traffic__title { margin-bottom: 16px; }
  .how-tags { gap: 8px; }
  .how-tags li { padding: 8px 14px; border-radius: 999px; background: var(--c-white); font-size: 14px; }
}

/* ==========================================================================
   DARK THEME
   Applied when <body class="dark-theme"> (set by the header toggle or ?theme=dark).
   Both themes share this one stylesheet and the same markup.
   ========================================================================== */
.globalheader__theme { cursor: pointer; font: inherit; }
body.dark-theme { --c-bg: #16171B; --c-text: #F4F4F6; --c-muted: #C4C6CD; --c-surface: #23252B; --c-border: #F4F4F6; --c-dark: #2E303B; --c-red02: #F8705D; }
.dark-theme .revenue__label { color: var(--c-muted); }
.dark-theme .revenue__sub { color: var(--c-muted); }
.dark-theme .revenue__pct { color: var(--c-muted); }
.dark-theme .revenue__range { color: var(--c-muted); }
.dark-theme .revenue__col--active .revenue__pct { color: var(--c-white); }
.dark-theme .revenue__col--active .revenue__range { color: rgba(255,255,255,.85); }
.dark-theme .revenue__foot { color: var(--c-muted); }
.dark-theme .stats__item:hover, .dark-theme .stats__item--accent { background: #2E1411; }
.dark-theme .brand-card:hover { background: var(--c-surface); }
.dark-theme .brand-card__tags li { background: var(--c-dark); }
.dark-theme .brands__perks { background: #2E1411; }
.dark-theme .why-row .why-row__icon svg path { stroke: var(--c-text); }
.dark-theme .why-row--active .why-row__icon svg path { stroke: var(--c-white); }
.dark-theme .picker__group { background: var(--c-dark); }
.dark-theme .picker__btn:hover { background: var(--c-text); color: var(--c-bg); }
.dark-theme .picker__btn.is-active { background: var(--c-text); color: var(--c-bg); }
.dark-theme .comm-card { background: var(--c-dark); }
.dark-theme .comm-bar { background: #565966; }
.dark-theme .comm-th.is-active .comm-bar { background: var(--c-muted); }
.dark-theme .comm-highlight { border: 2px solid var(--c-text); }
.dark-theme .faq__tab { background: var(--c-dark); }
.dark-theme .faq__tab:hover { background: var(--c-text); color: var(--c-bg); }
.dark-theme .faq__tab.is-active { background: var(--c-text); color: var(--c-bg); }
.dark-theme .faq__item { background: var(--c-dark); }
.dark-theme .faq__item.is-open { background: #2E1411; }
.dark-theme .faq__a-inner p { color: var(--c-text); }
.dark-theme .t-ctrl:hover:not(:disabled) { background: var(--c-white); color: var(--c-dark); }
.dark-theme .t-card { border: 1px solid #40424D; background: var(--c-dark); }
.dark-theme .t-card__logo { background: var(--c-dark); }
.dark-theme .contact__label { color: var(--c-muted); }
.dark-theme .contact__divider::before { background: radial-gradient(circle, var(--c-bg) 1.5px, transparent 2px) center top / 6px 10px repeat-y; }
.dark-theme .field input, .dark-theme .field textarea { border: 1px solid #565966; background: #40424D; }
.dark-theme .contact__submit { background: var(--c-border); color: var(--c-bg); }
.dark-theme .comm-list__q { background: var(--c-dark); }
.dark-theme .comm-row { background: var(--c-dark); }
.dark-theme .comm-row:nth-of-type(odd) { background: var(--c-surface); }
.dark-theme .comm-row.is-active { box-shadow: inset 0 0 0 2px var(--c-text); }
.dark-theme .comm-row.is-active .comm-row__bar { background: var(--c-dark); }
.dark-theme .how-step__title { color: var(--c-muted); }
.dark-theme .how-step.is-active .how-step__num { background: var(--c-text); color: var(--c-bg); }
.dark-theme .how-status { background: var(--c-dark); border: 1px solid #40424D; }
.dark-theme .how-status__icon { background: var(--c-surface); }
.dark-theme .how-status__item.is-done .how-status__icon { background: var(--c-text); color: var(--c-bg); }
.dark-theme .how-status__item.is-current .how-status__icon { background: var(--c-surface); }
@media (max-width: 767px) {
  .dark-theme .comm-list { background: var(--c-dark); }
  .dark-theme .how-tags li { background: var(--c-dark); }
}

/* How it works: soft background behind the active step (moves with the hover highlight).
   Drawn with ::before so the step layout does not move. */
.how-step { position: relative; isolation: isolate; }
.how-step::before {content: ""; position: absolute; inset: -16px -20px; z-index: -1; border-radius: 16px; background: var(--c-surface); opacity: 0; transition: opacity .35s ease;}
.how-step.is-active::before { opacity: 1; }
@media (max-width: 767px) { .how-step::before { inset: -12px -12px; } }
@media (prefers-reduced-motion: reduce) { .how-step::before { transition: none; } }