/* ==========================================================================
   Antideploy for business (business.html)
   The price list, the free grid, the monthly estimate and the credit rules.
   Additions only: main.css is not changed, and the page reuses its hero,
   section heads, .inc-grid, the FAQ, the CTA band and the footer.
   ========================================================================== */

/* ---------- Hero: fills the first screen, content centred below the header ----------
   The header is fixed and ends 72px down (12px inset plus the 60px bar), so the
   top padding starts below it and the content sits in the middle of what is left.
   Taller content than the screen simply grows the hero. */
.biz-hero {
  display: flex; flex-direction: column; justify-content: center;
  min-height: 100vh;
  min-height: clamp(560px, 100svh, 1000px);
  padding: 96px 0 24px;
}
/* The glow and the dots sit behind the content, not at the top of the screen.
   Only `top` moves: main.js animates the glow's transform on scroll. */
.biz-hero .hero__backdrop { height: 100%; }
.biz-hero .hero__glow { top: calc(50% + 36px - min(1200px, 140vw) / 3.4); }
.biz-hero .hero__backdrop::before {
  -webkit-mask-image: radial-gradient(ellipse 60% 48% at 50% 54%, #000 10%, transparent 70%);
  mask-image: radial-gradient(ellipse 60% 48% at 50% 54%, #000 10%, transparent 70%);
}
.biz-hero .eyebrow { margin-bottom: 18px; }
.biz-hero__title { font-size: clamp(2.4rem, .9rem + 3.6vw, 4.4rem); }
.biz-hero__lede { margin-top: 18px; max-width: 44rem; }
.biz-hero__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 26px; }
.biz-chips { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 22px 0 0; padding: 0; }
.biz-chips li {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 15px 0 11px; border-radius: 999px;
  background: var(--white); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-sm);
  font-size: .9rem; font-weight: 530; color: var(--ink-2);
}
.biz-chips svg { width: 15px; height: 15px; color: var(--green); }

/* ---------- 01 The price list ---------- */
.biz-prices {
  border-radius: 24px; overflow: hidden;
  background: var(--white); box-shadow: inset 0 0 0 1px var(--line), var(--shadow);
}
.biz-prices__head,
.biz-row {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.25fr) minmax(0, .85fr);
  gap: 32px; align-items: start;
  padding: 24px 30px;
}
.biz-prices__head {
  padding-block: 18px 16px;
  font-family: var(--f-mono); font-size: .72rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); border-bottom: 1px solid var(--line-2);
}
.biz-prices__head span:last-child { text-align: right; }
.biz-row + .biz-row { border-top: 1px solid var(--line); }
.biz-row__what { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; row-gap: 3px; align-items: center; }
.biz-row__ico {
  grid-row: span 2; align-self: start;
  width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px;
  background: var(--blue-50); color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue-100);
}
.biz-row__ico svg { width: 18px; height: 18px; }
.biz-row__what b { font-size: 1.04rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; }
.biz-row__what small { font-size: .88rem; line-height: 1.5; color: var(--ink-3); }
.biz-row__how { margin: 0; font-size: .93rem; line-height: 1.6; color: var(--ink-2); }
.biz-row__price { margin: 0; text-align: right; }
.biz-row__price b {
  display: block; font-size: 1.34rem; font-weight: 620; letter-spacing: -0.035em; line-height: 1.15;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.biz-row__price small { display: block; margin-top: 5px; font-size: .8rem; line-height: 1.45; color: var(--ink-3); }
.biz-prices__foot {
  margin: 0; padding: 18px 30px 20px;
  border-top: 1px solid var(--line-2); background: var(--paper);
  font-size: .9rem; line-height: 1.6; color: var(--ink-3);
}
.biz-prices__foot b { color: var(--ink); font-weight: 600; }

/* ---------- 02 Free ---------- */
.biz-free { background: var(--paper-2); }
.biz-free .shead { margin-bottom: clamp(40px, 5vw, 60px); }
.biz-free .inc-grid span { background: var(--green-soft); color: var(--green); box-shadow: inset 0 0 0 1px rgba(18, 153, 79, .18); }

/* ---------- 03 The estimate ---------- */
.biz-calc { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.biz-calc__inputs {
  border-radius: 24px; background: var(--white);
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow-sm);
}
.biz-in {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 20px; align-items: center;
  padding: 18px 24px;
}
.biz-in + .biz-in { border-top: 1px solid var(--line); }
.biz-in__label { margin: 0; }
.biz-in__label b { display: block; font-size: .98rem; font-weight: 580; letter-spacing: -0.015em; line-height: 1.35; }
.biz-in__label small { display: block; margin-top: 2px; font-size: .84rem; line-height: 1.4; color: var(--ink-3); }
.biz-in__ctrls { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.biz-in--free { background: var(--paper); border-radius: 0 0 24px 24px; }
.biz-in__free {
  display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 13px 0 10px; border-radius: 999px;
  background: var(--green-soft); color: #0B7A40; font-size: .86rem; font-weight: 600;
}
.biz-in__free svg { width: 14px; height: 14px; }

.biz-step {
  display: inline-flex; align-items: center; height: 42px; border-radius: 12px;
  background: var(--paper); box-shadow: inset 0 0 0 1px var(--line-2);
  transition: box-shadow .2s;
}
.biz-step:focus-within { box-shadow: inset 0 0 0 2px var(--blue); }
.biz-step button {
  width: 36px; height: 42px; display: grid; place-items: center;
  font-size: 1.15rem; line-height: 1; color: var(--ink-3); transition: color .2s;
}
.biz-step button:hover { color: var(--blue); }
.biz-step button:focus-visible { outline-offset: -4px; }
.biz-step input {
  width: 58px; height: 42px; padding: 0; border: 0; background: transparent;
  font: inherit; font-size: .98rem; font-weight: 600; text-align: center; color: var(--ink);
  font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield;
}
.biz-step input:focus { outline: none; }
.biz-step input::-webkit-outer-spin-button,
.biz-step input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.biz-step--wide input { width: 76px; }
.biz-step__unit { padding: 0 4px 0 0; font-size: .78rem; color: var(--ink-3); white-space: nowrap; }

.biz-sum {
  position: sticky; top: 104px;
  padding: 28px 26px 24px; border-radius: 24px; color: #fff;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(34, 17, 255, .45), transparent 60%),
    var(--night);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 40px 80px -34px rgba(34, 17, 255, .7);
}
.biz-sum__k { margin: 0; font-family: var(--f-mono); font-size: .72rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.biz-sum__total { display: flex; align-items: baseline; margin: 16px 0 0; letter-spacing: -0.045em; }
.biz-sum__cur { align-self: flex-start; margin: .3em 2px 0 0; font-size: 1.4rem; font-weight: 500; }
.biz-sum__amt { font-size: 3.2rem; font-weight: 620; line-height: 1; font-variant-numeric: tabular-nums; }
.biz-sum__per { margin-left: 8px; font-size: .9rem; letter-spacing: -0.01em; color: rgba(255, 255, 255, .55); }
.biz-sum__day { margin: 10px 0 0; font-size: .9rem; line-height: 1.5; color: rgba(255, 255, 255, .66); }
.biz-sum__list { list-style: none; margin: 20px 0 0; padding: 18px 0 0; display: grid; gap: 10px; border-top: 1px solid rgba(255, 255, 255, .12); }
.biz-sum__list li { display: flex; justify-content: space-between; gap: 14px; font-size: .9rem; color: rgba(255, 255, 255, .74); }
.biz-sum__list li span:last-child { color: #fff; font-variant-numeric: tabular-nums; }
.biz-sum__list li.is-free span:last-child { color: #8BE8B2; }
.biz-sum__btns { display: grid; gap: 10px; margin-top: 24px; }

/* ---------- 04 How paying works ---------- */
.biz-rules { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.biz-rules li {
  padding: 22px 22px 24px; border-radius: 18px;
  background: var(--white); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-sm);
}
.biz-rules span {
  width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px;
  background: var(--blue-50); color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue-100);
}
.biz-rules span svg { width: 18px; height: 18px; }
.biz-rules b { display: block; margin-top: 16px; font-size: 1.02rem; font-weight: 600; letter-spacing: -0.02em; }
.biz-rules p { margin: 6px 0 0; font-size: .91rem; line-height: 1.6; color: var(--ink-2); }
.biz-credit .shead { margin-bottom: clamp(40px, 5vw, 60px); }

/* WhatsApp icon keeps its own green on light buttons */
.btn .btn__ico--wa { width: 18px; height: 18px; }
.btn--ghost .btn__ico--wa, .btn--light .btn__ico--wa { color: #25D366; }

/* ---------- Responsive ---------- */
@media (max-width: 1040px) {
  .biz-calc { grid-template-columns: 1fr; }
  .biz-sum { position: relative; top: 0; }
  .biz-rules { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .biz-prices__head { display: none; }
  .biz-row { grid-template-columns: 1fr; gap: 12px; padding: 22px 22px; }
  .biz-row__how { padding-left: 52px; }
  .biz-row__price { padding-left: 52px; text-align: left; }
  .biz-prices__foot { padding: 16px 22px 18px; }
}
@media (max-width: 680px) {
  .biz-in { grid-template-columns: 1fr; padding: 16px 18px; }
  .biz-in__ctrls { justify-content: flex-start; }
  .biz-rules { grid-template-columns: 1fr; }
  .biz-sum { padding: 24px 20px 20px; }
  .biz-sum__amt { font-size: 2.8rem; }
  .biz-chips li { font-size: .86rem; }
}
@media (max-width: 400px) {
  .biz-row__how, .biz-row__price { padding-left: 0; }
}