/*
 * /pricing — the parts the landing does not already have: hero spacing, the plan ruler, the
 * three plan cards, the plan table and the "Compare plans" table. Everything else (nav, panels,
 * sections, FAQ, footer, buttons) is landing.css, so the page reads as the same site.
 * Tokens only (tokens.css); indigo stays on what can be clicked and on the chosen plan.
 *
 * While SITE-011 is open, any change to this file must ship with the `?v=` of every local
 * CSS/JS reference of the main landing bumped together (site/README.md, "Janela de cache").
 */

/* ---------- hero ---------- */
.pricing-hero {
  padding-top: clamp(40px, 6vw, 88px);
  padding-bottom: var(--sp-7);
}
.pricing-hero .t-h1 {
  margin-top: var(--sp-5);
  max-inline-size: 18ch;
}
.pricing-hero__lead {
  margin-top: var(--sp-5);
  max-inline-size: 60ch;
  color: var(--ink-2);
}
.pricing-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}

/* ---------- ruler ---------- */
.pricing-calc {
  padding-bottom: var(--sp-6);
}
.pricing-ruler__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--sp-5);
}
.pricing-ruler__price {
  text-align: right;
}
.pricing-ruler__large {
  margin-top: var(--sp-1);
  font-size: var(--fs-metric);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.pricing-ruler__large small {
  font-size: var(--fs-small);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-3);
}
.pricing-ruler__discount {
  min-height: 28px;
  margin-top: var(--sp-2);
}
.pricing-ruler__badge {
  display: inline-block;
  padding: 4px 9px;
  border: var(--hairline-strong);
  border-radius: var(--r-inner);
  background: var(--paper-deep);
  font: 500 var(--fs-label) / 1.2 var(--font-mono);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-1);
}
.pricing-ruler__track {
  position: relative;
  margin: var(--sp-7) 0 var(--sp-2);
}
.pricing-ruler__bubble {
  position: absolute;
  bottom: calc(100% + 6px);
  transform: translateX(-50%);
  padding: 4px 8px;
  border-radius: var(--r-inner);
  background: var(--ink-1);
  color: var(--paper);
  font: 500 var(--fs-label) / 1.2 var(--font-mono);
  white-space: nowrap;
  pointer-events: none;
}
.pricing-ruler__bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--ink-1);
}
/* Hairline track, indigo fill up to the chosen plan, square indigo thumb with a panel ring. */
.pricing-ruler__range {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 24px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
.pricing-ruler__range::-webkit-slider-runnable-track {
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--indigo) var(--fill, 0%),
    var(--rule-strong) var(--fill, 0%)
  );
}
.pricing-ruler__range::-moz-range-track {
  height: 2px;
  background: var(--rule-strong);
}
.pricing-ruler__range::-moz-range-progress {
  height: 2px;
  background: var(--indigo);
}
.pricing-ruler__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -8px;
  border: 0;
  border-radius: var(--r-inner);
  background: var(--indigo);
  box-shadow: 0 0 0 3px var(--panel);
  transition: transform 120ms var(--ease);
}
.pricing-ruler__range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: var(--r-inner);
  background: var(--indigo);
  box-shadow: 0 0 0 3px var(--panel);
}
.pricing-ruler__range:hover::-webkit-slider-thumb {
  transform: scale(1.12);
}
.pricing-ruler__range:focus-visible {
  outline: none;
}
.pricing-ruler__range:focus-visible::-webkit-slider-thumb {
  box-shadow: var(--focus-ring-panel);
}
.pricing-ruler__range:focus-visible::-moz-range-thumb {
  box-shadow: var(--focus-ring-panel);
}
.pricing-ruler__marks {
  position: relative;
  height: 26px;
  margin: 4px 9px 0;
}
.pricing-ruler__marks span {
  position: absolute;
  transform: translateX(-50%);
  padding-top: 12px;
  font: 400 var(--fs-label) / 1 var(--font-mono);
  color: var(--ink-3);
  white-space: nowrap;
}
.pricing-ruler__marks span::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 1px;
  height: 10px;
  background: var(--ink-2);
}
.pricing-ruler__marks span.ent {
  font-style: italic;
}
.pricing-ruler__marks span.ent::before {
  height: 7px;
  background: var(--rule-strong);
}
.pricing-ruler__marks span.on {
  color: var(--ink-1);
  font-weight: 500;
}
.pricing-ruler__marks span.on::before {
  width: 2px;
  background: var(--indigo);
}
.pricing-ruler__marks span.near {
  color: transparent;
}
.pricing-ruler__footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: var(--hairline);
}
.pricing-ruler__footer .t-small {
  max-inline-size: 72ch;
  color: var(--ink-2);
}

/* ---------- plan cards ---------- */
.pricing-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap);
}
.pricing-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.pricing-card .regras3 {
  flex: 1;
}
.pricing-card .btn {
  align-self: flex-start;
}
.pricing-card--pro {
  border-color: var(--indigo);
  box-shadow: inset 0 3px 0 var(--indigo);
}
.pricing-card--pro > .t-label {
  color: var(--indigo);
}
.pricing-card__price {
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.pricing-card__price small {
  font-size: var(--fs-small);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-3);
}

/* ---------- the seven plans ---------- */
.pricing-table-frame {
  padding: 0;
  overflow-x: auto;
}
.pricing-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
}
.pricing-table th,
.pricing-table td {
  padding: 12px var(--panel-pad);
  border-bottom: var(--hairline);
  text-align: right;
  white-space: nowrap;
}
.pricing-table th:first-child {
  text-align: left;
}
.pricing-table thead th {
  white-space: normal;
  vertical-align: bottom;
  font: 500 var(--fs-label) / 1.3 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.pricing-table tbody th {
  font-weight: 500;
  color: var(--ink-1);
}
.pricing-table td {
  color: var(--ink-2);
}
.pricing-table td:nth-child(2) {
  color: var(--ink-1);
  font-weight: 600;
}
.pricing-table tbody tr:last-child th,
.pricing-table tbody tr:last-child td {
  border-bottom: 0;
  font-weight: 400;
  color: var(--ink-2);
}

/* ---------- example month ---------- */
.pricing-example {
  margin-top: var(--sp-3);
}
.pricing-example li span:last-child {
  font-variant-numeric: tabular-nums;
  color: var(--ink-1);
}

/* ---------- compare plans ---------- */
.pricing-compare {
  border: var(--hairline);
  border-radius: var(--r-panel);
  background: var(--panel);
  overflow-x: auto;
}
.pricing-compare__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-small);
  color: var(--ink-2);
}
.pricing-compare__table th,
.pricing-compare__table td {
  padding: 10px 14px;
  border-bottom: var(--hairline);
  text-align: center;
  vertical-align: middle;
}
.pricing-compare__table tbody tr:last-child th,
.pricing-compare__table tbody tr:last-child td {
  border-bottom: 0;
}
.pricing-compare__table th[scope="row"] {
  width: 40%;
  text-align: left;
  font-weight: 400;
  color: var(--ink-1);
}
.pricing-compare__table thead th {
  padding-top: 16px;
  padding-bottom: 14px;
  vertical-align: bottom;
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--ink-1);
}
.pricing-compare__table thead th small {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-label);
  font-weight: 400;
  color: var(--ink-3);
}
.pricing-compare__table .is-pro {
  background: var(--paper);
}
.pricing-compare__table thead th.is-pro {
  box-shadow: inset 0 3px 0 var(--indigo);
}
.pricing-compare__table tr.grupo th {
  padding-top: 18px;
  text-align: left;
  font: 500 var(--fs-label) / 1.3 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.pricing-not {
  color: var(--ink-3);
}

/* ---------- closing call ---------- */
.pricing-end {
  padding-top: 0;
}
.pricing-end__panel {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
}
.pricing-end__panel .t-small {
  margin-top: var(--sp-2);
  color: var(--ink-2);
}

@media (min-width: 768px) {
  .pricing-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Phone: the ruler's price drops under the volume, and each feature of "Compare plans" becomes its
   own block, the name across the top and the three plans under it, each labelled with its plan. */
@media (max-width: 639.98px) {
  .pricing-ruler__price {
    text-align: left;
  }
  .pricing-compare__table thead {
    display: none;
  }
  .pricing-compare__table tbody tr {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-bottom: var(--hairline);
  }
  .pricing-compare__table tbody tr:last-child {
    border-bottom: 0;
  }
  .pricing-compare__table tbody tr.grupo {
    display: block;
  }
  .pricing-compare__table tbody th,
  .pricing-compare__table tbody td {
    border-bottom: 0;
  }
  .pricing-compare__table tr.grupo th {
    display: block;
  }
  .pricing-compare__table th[scope="row"] {
    grid-column: 1 / -1;
    width: auto;
    padding: 12px 14px 4px;
  }
  .pricing-compare__table td {
    padding: 4px 6px 12px;
    overflow-wrap: anywhere;
  }
  .pricing-compare__table td::before {
    content: attr(data-plan);
    display: block;
    margin-bottom: 2px;
    font: 500 var(--fs-label) / 1.3 var(--font-mono);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  /* The seven plans fit a 320 px phone without a sideways scroll: the mono headers and the
     Enterprise row wrap, the numbers do not. */
  .pricing-table th,
  .pricing-table td {
    padding-inline: 8px;
  }
  .pricing-table th:first-child {
    padding-left: 14px;
  }
  .pricing-table th:last-child,
  .pricing-table td:last-child {
    padding-right: 14px;
  }
  .pricing-table thead th,
  .pricing-table tbody tr:last-child th,
  .pricing-table tbody tr:last-child td {
    white-space: normal;
    vertical-align: bottom;
  }
  .pricing-table thead th {
    letter-spacing: 0.02em;
  }
}
/* Below 400 px the price per 1,000 leaves the table; the ruler's note above still states it. */
@media (max-width: 399.98px) {
  .pricing-table th:nth-child(4),
  .pricing-table td:nth-child(4) {
    display: none;
  }
  .pricing-table th,
  .pricing-table td {
    padding-inline: 5px;
  }
  .pricing-table th:first-child {
    padding-left: 12px;
  }
  .pricing-table th:nth-child(3),
  .pricing-table td:nth-child(3) {
    padding-right: 12px;
  }
}

@media (forced-colors: active) {
  .pricing-ruler__range::-webkit-slider-runnable-track {
    background: CanvasText;
  }
  .pricing-ruler__marks span::before {
    background: CanvasText;
  }
}