:root{
  --bg:#efefef;
  --text:#33343f;
  --brand:#cc0000;
  --shadow:0 3px 15px 3px rgba(0,0,0,.25);
}

*,
*::before,
*::after{box-sizing:border-box}

html,body{margin:0;padding:0}

body{
  background:#fff;
  color:var(--text);
  font-family:Montserrat, Arial, sans-serif;
}

img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}

.plans-page{
  width:100%;
  min-width:1078px;
  background:#fff;
}

.plans-hero{
  width:1215px;
  max-width:1215px;
  margin:0 auto;
  padding:64px 0 20px;
  transform:translateX(-92px);
}

.plans-hero h1{
  margin:0 0 44px;
  text-align:center;
  font-size:clamp(24px, 6vw, 34px);
  line-height:1.3;
  font-weight:400;
}

.plans-hero h1 span{color:#ff2a2a}

.plans-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:23px;
  align-items:start;
}

.plan{position:relative;padding-top:42px}

.plan__tab{
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:186px;
  height:min-content;
  padding: 10px 100px 7px;
  border-radius:20px 20px 0 0;
  background:var(--brand);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  font-weight:700;
}

.plan__card{
  background:#fff;
  border-radius:20px;
  box-shadow:var(--shadow);
  min-height:430px;
  padding:12px 22px 28px;
  display:flex;
  flex-direction:column;
  align-items:center;
}


.plans-grid .plan:nth-child(1) .plan__card{min-height:430px}
.plans-grid .plan:nth-child(2) .plan__card{min-height:478px}
.plans-grid .plan:nth-child(3) .plan__card{min-height:526px}
.plans-grid .plan:nth-child(4) .plan__card{min-height:574px}

.plan__subtitle{
  margin:4px 0 10px;
  color:#ff4040;
  font-size:16px;
  text-align:center;
}

.plan__feature-box{
  width:236px;
  min-height:112px;
  border:2px solid var(--brand);
  border-radius:20px;
  padding:14px 20px 12px;
  margin-bottom:28px;
}

.plan__feature-box--plus{
  min-height:109px;
  margin-bottom:31px;
}

.plan__feature-box p{
  margin:0 0 12px;
  color:var(--brand);
  font-size:14px;
  line-height:1.25;
}
.plan__feature-box p:last-child{margin-bottom:0}

.plan__checks{
  width:100%;
  padding:0 19px;
  margin-bottom:14px;
}
.plan__checks--spaced{margin-top:8px;margin-bottom:30px}

.plan__checkline{
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:10px;
  min-height:20px;
}

.plan__tick{
  color:#ff5757;
  font-size:16px;
  line-height:1;
}

.plan__checktext{
  font-size:16px;
  line-height:1.15;
}
.plan__checktext.is-bold{font-weight:700}

.plan__help{
  width:18px;
  height:18px;
  border-radius:50%;
  border:1px solid #ff5757;
  color:#ff5757;
  background:#fff;
  display:grid;
  place-items:center;
  font-size:12px;
  font-weight:700;
  line-height:1;
  margin-left:2px;
  padding:0;
  cursor:pointer;
  transition:
    background-color .16s ease,
    color .16s ease,
    transform .16s ease;
}

.plan__help:hover,
.plan__help:focus-visible,
.plan__help.is-open {
  background:#ff5757;
  color:#fff;
  outline:none;
  transform:scale(1.06);
}

.plan__desde{
  margin:auto 0 8px;
  font-size:16px;
  font-weight:700;
  text-align:center;
}

.plan__price{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  line-height:1;
}

.plan__price-main{
  font-size:56px;
  font-weight:700;
}

.plan__price-rest{
  font-size:32px;
  font-weight:700;
  margin-top:10px;
}

.plan__meta{
  margin:10px 0 16px;
  text-align:center;
  font-size:12px;
  line-height:1.35;
}

.addon-section{
  background:#e4e4e4;
  padding:48px 0 56px;
}

.addon-section h2{
  margin:0 0 28px;
  text-align:center;
  font-size:28px;
  line-height:1.2;
  font-weight:400;
}

.addon-card{
  width:612px;
  max-width:calc(100% - 48px);
  margin:0 auto;
  background:#fff;
  border-radius:20px;
  box-shadow:var(--shadow);
  display:flex;
  align-items:center;
  gap:28px;
  padding:26px 32px;
}

.addon-card__media{
  flex:0 0 160px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.addon-card__image{
  width:160px;
  height:160px;
  object-fit:cover;
  border-radius:50%;
}

.addon-card__body{
  flex:1;
  min-width:0;
}

.addon-card__info{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

.addon-card__copy{flex:1}
.addon-card__copy p{
  margin:0;
  text-align:center;
  font-size:15px;
  line-height:1.3;
  font-weight:700;
  letter-spacing:.03em;
}

.addon-card__price{
  flex:0 0 150px;
  text-align:center;
}
.addon-card__price-main{
  font-size:44px;
  font-weight:700;
  line-height:1;
  color:#222;
}
.addon-card__price-meta{
  margin-top:8px;
  font-size:11px;
  line-height:1.4;
}

.buy-section{
  width:1215px;
  max-width:1215px;
  margin:0 auto;
  padding:49px 0 96px;
  text-align:center;
  transform:translateX(-92px);
}

.buy-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:270px;
  height:44px;
  border-radius:22px;
  background:var(--brand);
  color:#fff;
  font-size:20px;
  font-weight:700;
  letter-spacing:.03em;
  transition: transform 0.18s ease, filter 0.18s ease;
}

.buy-button:hover,
.buy-button:focus-visible{
  transform: translateY(-1px);
  filter: brightness(0.96);
  outline: none;
}

.buy-help{
  display:block;
  margin-top:16px;
  font-size:16px;
  font-weight:700;
  text-decoration:underline;
}

.solution-grid{
  margin-top:58px;
}

@media (max-width: 1180px){
  body:has(.plans-page){
    min-width:0;
    overflow-x:hidden;
  }

  .plans-page{
    min-width:0;
    overflow-x:clip;
  }

  .plans-hero,
  .buy-section{
    width:min(100% - 48px, 920px);
    max-width:none;
  }

  .plans-grid,
  .solution-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .plan__feature-box{
    width:100%;
  }
}


.solution-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:24px;
}

.solution-card{
  background:#fff;
  border-radius:24px;
  padding:14px 14px 16px;
  box-shadow:var(--shadow);
  border:3px solid transparent;
  display:flex;
  flex-direction:column;
  min-height:248px;
  text-align:left;
}

.solution-card__brand{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
}

.solution-card__brand--stack img{
  width:46px;
  height:52px;
  object-fit:contain;
  flex:none;
  margin-top:2px;
}
.solution-card__brand--stack h3{
  margin:0;
  color:#edae03;
  font-size:13px;
  line-height:1.45;
  font-weight:700;
  letter-spacing:.01rem;
}

.solution-card p{
  margin:0 0 auto;
  color:#525252;
  font-size:13px;
  line-height:1.45;
  text-align:center;
}

.solution-card__actions{
  display:flex;
  justify-content:center;
  margin-top:16px;
}
.solution-card__actions--stack{
  flex-direction:column;
  align-items:center;
  gap:11px;
}
.solution-card__actions .button{
  width:100%;
  max-width:170px;
}

.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:46px;
  padding:0 24px;
  border:0;
  border-radius:999px;
  text-decoration:none;
  color:#fff;
  font-weight:700;
  transition:transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.button:hover{transform:translateY(-1px)}

.button--pill{
  min-height:35px;
  padding:0 18px;
  color:#fff;
  font-size:13px;
  transition:all .2s ease;
}
.button--orange:hover{background:#fff;color:#f7a40e;border:2px solid #f7a40e}
.button--blue:hover{background:#fff;color:#1380c9;border:2px solid #1380c9}
.button--red:hover{background:#fff;color:#db0000;border:2px solid #db0000}
.button--lime:hover{background:#fff;color:#c3c71b;border:2px solid #c3c71b}

.button--video::before{
  content:"\25B6";
  width:16px;
  height:16px;
  border:2px solid currentColor;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 16px;
  box-sizing:border-box;
  padding-left:1px;
  font-family:Arial, sans-serif;
  font-size:7px;
  font-weight:700;
  line-height:1;
}

.plans-tooltip {
  position: fixed;
  z-index: 50;
  width: min(260px, calc(100vw - 32px));
  padding: 13px 15px;
  border: 2px solid var(--brand);
  border-radius: 16px;
  background: #fff;
  color: var(--text);
  box-shadow: 0 8px 22px rgba(0,0,0,.22);
  font-size: 13px;
  line-height: 1.35;
  text-align: left;
  opacity: 0;
  transform: translateY(6px) scale(.98);
  transition:
    opacity .16s ease,
    transform .16s ease;
  pointer-events: none;
}

.plans-tooltip.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.plans-tooltip strong {
  display: block;
  margin-bottom: 5px;
  color: var(--brand);
  font-size: 14px;
}


.plans-hero,
.buy-section {
  transform: none;
}

@media (max-width: 760px) {
  .plans-page {
    min-width: 0;
    overflow-x: clip;
  }

  .plans-hero,
  .buy-section {
    width: min(100% - 32px, 520px);
    max-width: none;
  }

  .plans-hero {
    padding: 42px 0 40px;
  }

  .plans-hero h1 {
    margin-bottom: 32px;
  }

  .plans-grid,
  .solution-grid {
    grid-template-columns: 1fr;
  }

  .plan__feature-box {
    width: 100%;
  }

  .addon-card {
    flex-direction: column;
    gap: 20px;
    padding: 24px 20px;
  }

  .addon-card__info {
    flex-direction: column;
    gap: 16px;
  }

  .addon-card__price {
    flex-basis: auto;
  }

  .buy-section {
    padding-top: 36px;
  }

  .buy-button {
    width: 100%;
  }
}



.buy-section {
  padding: 46px 0 92px;
}

.buy-button {
  width: 310px;
  height: 40px;
  margin: 0 auto 15px;
  border-radius: 22px;
  background: #e00000;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .02em;
  transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.buy-button:hover,
.buy-button:focus-visible {
  background: #c90000;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 7px 16px rgba(0, 0, 0, .18);
  outline: 0;
}

.buy-help {
  width: max-content;
  margin: 0 auto 42px;
  display: block;
  color: #33343f;
  font-size: 15px;
  font-weight: 800;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.solution-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 31px;
}

.solution-card {
  min-height: 269px;
  padding: 14px 14px 16px;
  border: 3px solid transparent;
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.solution-card--orange { border-color: #f2a20d; }
.solution-card--blue { border-color: #266cde; }
.solution-card--red { border-color: #d10000; }
.solution-card--lime { border-color: #bcc514; }

.solution-card__brand {
  min-height: 70px;
  margin-bottom: 13px;
  display: flex;
  align-items: center;
  gap: 9px;
}

.solution-card__brand--stack img {
  width: 46px;
  height: 52px;
  flex: 0 0 auto;
  object-fit: contain;
}

.solution-card__brand--stack h3 {
  margin: 0;
  color: #edae03;
  font-size: 13px;
  line-height: 1.18;
  font-weight: 800;
}

.solution-card__brand--center,
.solution-card__brand--documbox,
.solution-card__brand--logo-small {
  justify-content: center;
}

.solution-card__brand--center img {
  max-width: 154px;
  max-height: 58px;
  object-fit: contain;
}

.solution-card__brand--logo-small img {
  max-width: 112px;
  max-height: 62px;
  object-fit: contain;
}

.solution-card__brand--documbox {
  gap: 8px;
}

.solution-card__brand--documbox img {
  width: 46px;
  height: 52px;
  object-fit: contain;
}

.solution-card__brand--documbox h3 {
  margin: 0;
  color: #b7bf14;
  font-size: 18px;
  font-weight: 800;
}

.solution-card p {
  min-height: 84px;
  margin: 0 0 18px;
  color: #525252;
  font-size: 15px;
  line-height: 1.45;
  text-align: center;
}

.solution-card__actions {
  width: 100%;
  margin-top: auto;
  display: flex;
  justify-content: center;
}

.solution-card__actions--stack {
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.solution-card .button {
  width: 100%;
  max-width: 180px;
  min-height: 33px;
  border: 2px solid transparent;
  border-radius: 18px;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.05;
  text-align: center;
  white-space: normal;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}

.solution-card .button:hover,
.solution-card .button:focus-visible {
  transform: translateY(-1px);
  outline: 0;
}

.button--orange { background: #f7a40e; }
.button--blue { background: #1380c9; }
.button--red { background: #db0000; }
.button--lime { background: #c3c71b; }

.button--orange:hover,
.button--orange:focus-visible {
  background: #fff;
  color: #f7a40e;
  border-color: #f7a40e;
}

.button--blue:hover,
.button--blue:focus-visible {
  background: #fff;
  color: #1380c9;
  border-color: #1380c9;
}

.button--red:hover,
.button--red:focus-visible {
  background: #fff;
  color: #db0000;
  border-color: #db0000;
}

.button--lime:hover,
.button--lime:focus-visible {
  background: #fff;
  color: #c3c71b;
  border-color: #c3c71b;
}

.button--video::before {
  content: "\25B6";
  width: 17px;
  height: 17px;
  border: 2px solid currentColor;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 17px;
  box-sizing: border-box;
  padding-left: 1px;
  font-family: Arial, sans-serif;
  font-size: 7px;
  font-weight: 700;
  line-height: 1;
}

@media (max-width: 1180px) {
  .solution-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .buy-button {
    width: min(310px, 100%);
  }

  .buy-help {
    width: auto;
  }

  .solution-grid {
    grid-template-columns: 1fr;
  }
}

.buy-section--cta {
  padding: 0 0 40px;
}