[data-approach-copy] { opacity: 1; filter: blur(0); transform: translateY(0); transition: opacity .55s cubic-bezier(.22,1,.36,1), transform .55s cubic-bezier(.22,1,.36,1), filter .55s cubic-bezier(.22,1,.36,1); will-change: opacity, transform, filter; }
[data-approach-copy].is-exiting { opacity: 0; filter: blur(4px); transform: translateY(-14px); }
[data-approach-copy].is-entering { opacity: 0; filter: blur(5px); transform: translateY(20px); transition: none; }
[data-approach-controls] { position: absolute !important; right: 0; bottom: 2rem; left: 0; display: flex !important; flex-flow: row nowrap !important; align-items: center; justify-content: center; gap: .5rem; }
[data-approach-controls] > * { flex: 0 0 auto; }
[data-approach-link] { position: relative !important; display: flex !important; width: 10rem !important; height: 3rem !important; align-items: center; justify-content: center; overflow: hidden; }
[data-approach-link] [data-approach-progress] { position: absolute !important; top: 0; bottom: 0; left: 0; margin: 0 !important; }
[data-approach-link] > span { position: relative; z-index: 1; }

[data-mayhalla-pricing].has-active { grid-template-columns: repeat(12, minmax(0, 1fr)); }
[data-mayhalla-pricing].has-active [data-pricing-card] { grid-column: span 1; }
[data-mayhalla-pricing].has-active [data-pricing-card].is-active { grid-column: span 9; }
[data-pricing-card].is-folded [data-pricing-header] { min-height: 36rem; padding: 2rem .5rem; cursor: pointer; }
[data-pricing-card].is-folded [data-pricing-header] h3 { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 1.125rem; }
[data-pricing-card].is-folded [data-pricing-header] p { display: none; }
.mayhalla-pricing-extra { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid #e2e0ee; }
.mayhalla-pricing-extra p { color: #54517e; font-size: .95rem; line-height: 1.7; }
.mayhalla-pricing-extra__button { display: inline-flex; margin-top: 1.25rem; padding: .7rem 1.25rem; border: 1px solid #322db8; border-radius: .2rem; background: #6a66f9; color: #fff; font-size: .875rem; font-weight: 600; text-decoration: none; }

[data-website-type-tab][aria-selected="true"] { background: rgb(106 102 249 / 7%); box-shadow: inset 0 0 0 1px rgb(106 102 249 / 15%); }
[data-website-type-tab][aria-selected="true"] > span:first-of-type { background: #6a66f9; color: #fff; }
[data-website-type-tagline], [data-website-type-title], [data-website-type-description], [data-website-type-ideal] { transition: opacity .12s, transform .12s; }
[data-website-type-tagline].is-changing, [data-website-type-title].is-changing, [data-website-type-description].is-changing, [data-website-type-ideal].is-changing { opacity: 0; transform: translateY(-.25rem); }
.mayhalla-layout-preview { overflow: hidden; border: 1px solid rgb(30 27 75 / 10%); border-radius: .75rem; background: #fbfbfe; }
.mayhalla-layout-preview__browser { display: flex; align-items: center; gap: .25rem; padding: .55rem .75rem; border-bottom: 1px solid rgb(30 27 75 / 10%); }
.mayhalla-layout-preview__browser span { width: .375rem; height: .375rem; border-radius: 50%; background: rgb(30 27 75 / 15%); }
.mayhalla-layout-preview__browser small { overflow: hidden; margin-left: .35rem; padding: .15rem .5rem; border-radius: 999px; background: rgb(30 27 75 / 6%); color: #777496; font-size: .625rem; text-overflow: ellipsis; white-space: nowrap; }
.mayhalla-layout-preview__canvas { display: grid; height: 17rem; grid-template-columns: repeat(3, 1fr); gap: .5rem; padding: .75rem; }
.mayhalla-layout-preview__canvas i { display: block; border-radius: .25rem; background: rgb(30 27 75 / 9%); }
.mayhalla-layout-preview__canvas .block-1 { grid-column: 1 / -1; min-height: 2.5rem; background: rgb(106 102 249 / 16%); }
.mayhalla-layout-preview__canvas .block-2 { grid-column: 1 / -1; }
.mayhalla-layout-preview.is-single .block-2 { min-height: 4rem; }
.mayhalla-layout-preview.is-single .block-3, .mayhalla-layout-preview.is-single .block-4 { grid-column: span 3; }
.mayhalla-layout-preview.is-multi .block-2, .mayhalla-layout-preview.is-multi .block-3 { grid-column: span 3; }
.mayhalla-layout-preview.is-grid .mayhalla-layout-preview__canvas i:not(.block-1) { grid-column: span 1; }
.mayhalla-layout-preview.is-funnel .mayhalla-layout-preview__canvas { display: flex; flex-direction: column; justify-content: center; }
.mayhalla-layout-preview.is-funnel .block-1 { width: 80%; min-height: 2rem; align-self: center; }
.mayhalla-layout-preview.is-funnel .block-2 { width: 60%; min-height: 1rem; align-self: center; }
.mayhalla-layout-preview.is-funnel .block-3 { width: 50%; min-height: 2.5rem; align-self: center; background: #6a66f9; }

@media (max-width: 1023px) {
  [data-mayhalla-pricing].has-active { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-mayhalla-pricing].has-active [data-pricing-card], [data-mayhalla-pricing].has-active [data-pricing-card].is-active { grid-column: span 2; }
  [data-pricing-card].is-folded [data-pricing-header] { min-height: 8rem; padding: 1.25rem; }
  [data-pricing-card].is-folded [data-pricing-header] h3 { writing-mode: initial; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  [data-approach-copy], [data-website-type-tagline], [data-website-type-title], [data-website-type-description], [data-website-type-ideal] { transition: none; }
}