/* Integration rules preserve the editorial layout and native form behavior. */
.marketing-pricing {
  --serif: "Newsreader", Georgia, serif;
  --sans: "Inter", sans-serif;
  color: #1a1a1a;
  background: #faf8f5;
  font-family: var(--sans);
}
.marketing-pricing .tr-hero {
  padding-top: 150px;
}
.marketing-pricing .tr-toggle {
  border: 0;
  margin-inline: auto;
  width: fit-content;
}
.marketing-pricing .tr-toggle-btn {
  display: inline-flex;
  align-items: center;
}
.marketing-pricing .tr-toggle-btn:has(input:checked) {
  background: #16332a;
  color: #fff;
}
.marketing-pricing .tr-toggle-btn:has(input:checked) .tr-toggle-save {
  background: #c8f026;
  color: #0f2b23;
}
.marketing-pricing .tr-toggle-btn:has(input:focus-visible),
.marketing-pricing summary:focus-visible,
.marketing-pricing a:focus-visible {
  outline: 2px solid #16332a;
  outline-offset: 4px;
}
/* Both prices are server-rendered. Native radios also work with JavaScript disabled. */
.marketing-pricing [data-period-copy="monthly"] {
  display: none;
}
.marketing-pricing:has(input[value="monthly"]:checked)
  [data-period-copy="monthly"] {
  display: inline;
}
.marketing-pricing:has(input[value="monthly"]:checked)
  [data-period-copy="yearly"] {
  display: none;
}
.marketing-pricing .tr-faq-q {
  list-style: none;
  cursor: pointer;
}
.marketing-pricing .tr-faq-q::-webkit-details-marker {
  display: none;
}
/* Answers grow with translation, narrow viewports and text zoom. */
.marketing-pricing .tr-faq-item[open] .tr-faq-a {
  max-height: none;
}
.marketing-pricing .tr-table [role="row"] {
  display: contents;
}
.marketing-pricing .tr-table-cell,
.marketing-pricing .tr-table-header {
  min-width: 0;
  overflow-wrap: anywhere;
}
.marketing-pricing .tr-table svg {
  flex-shrink: 0;
}
.marketing-pricing .sticky-cta {
  visibility: hidden;
}
.marketing-pricing .sticky-cta.visible {
  visibility: visible;
}
.marketing-pricing .tr-cta-video {
  object-fit: cover;
}
@media (max-width: 820px) {
  .marketing-pricing .tr-hero {
    padding-top: 130px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .marketing-pricing *,
  .marketing-pricing *::before,
  .marketing-pricing *::after {
    animation: none !important;
    transition: none !important;
  }
}