:root[data-ui='v2']:not(:has([data-ui='v1'])) {
--ui-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
#pricing div:has(> button) {
gap: 4px;
box-sizing: border-box;
width: 100%;
padding: 4px;
border: 1px solid var(--site-border);
border-radius: var(--site-r-field);
background: var(--site-glass);
@media (min-width: 640px) { width: auto; }
& > button {
min-height: 44px;
padding: 0 18px;
border: 0;
border-radius: var(--site-r-tile);
background: transparent;
box-shadow: none;
color: var(--site-muted);
font: var(--site-w-strong) var(--site-t-label-size) / 1 var(--site-font);
white-space: nowrap;
cursor: pointer;
transition: background-color var(--site-dur-fast) var(--site-ease), color var(--site-dur-fast) var(--site-ease);
@media (hover: hover) { &:hover { background: var(--site-chip); color: var(--site-text); } }
&:active { box-shadow: var(--site-pressed-shadow); }
}
& > .ui-seg__item--on, & > .ui-seg__item--on:hover {
background: var(--site-accent-tint);
box-shadow: inset 0 0 0 1.5px var(--site-accent);
color: var(--site-text);
font-weight: var(--site-w-heavy);
}
}
#pricing div:has(> div > button) { margin-bottom: 24px; @media (min-width: 1024px) { margin-bottom: 32px; } }
#pricing div:has(> div > ul) {
gap: 12px;
@media (min-width: 768px) { gap: 16px; }
@media (min-width: 1024px) { gap: 24px; }
}
#pricing :is(div:has(> ul), div:has(> div > h3)) {
position: relative;
box-sizing: border-box;
padding: var(--site-pad-card);
border: 1px solid var(--site-border);
border-radius: var(--site-r-card);
background: var(--site-glass);
box-shadow: var(--site-shadow-card);
backdrop-filter: none;
& > * { margin: 0; }
& h3 { color: var(--site-text); font: var(--site-w-heavy) var(--site-t-h4-size) / var(--site-t-h4-lh) var(--site-font); letter-spacing: var(--site-t-h4-ls); }
}
@media (min-width: 1024px) { #pricing div:has(> ul) { padding: var(--site-pad-card-lg); border-radius: var(--site-r-hero); } }
#pricing div:has(> ul) {
& > span {
top: calc(var(--site-pad-card) - 1px + (var(--site-t-h4-lh) - 24px) / 2);
right: calc(var(--site-pad-card) - 1px);
left: auto;
display: inline-flex;
align-items: center;
min-height: 24px;
padding: 0 8px;
border-radius: var(--site-r-pill);
background: var(--site-accent-tint);
color: var(--site-accent);
font: var(--site-w-strong) var(--site-t-micro-size) / var(--site-t-micro-lh) var(--site-font);
letter-spacing: var(--site-t-micro-ls);
text-transform: none;
@media (min-width: 1024px) { top: calc(var(--site-pad-card-lg) - 1px + (var(--site-t-h4-lh) - 24px) / 2); right: calc(var(--site-pad-card-lg) - 1px); }
}
&:has(> span) > div:first-of-type { padding-right: 112px; }
& > div:first-of-type { flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 8px; min-height: 24px; }
& > div:first-of-type > span {
display: inline-flex;
align-items: center;
min-height: 24px;
padding: 0 8px;
border: 0;
border-radius: var(--site-r-pill);
background: var(--site-success-tint);
color: var(--site-success);
font: var(--site-w-strong) var(--site-t-micro-size) / var(--site-t-micro-lh) var(--site-font);
}
& > p:first-of-type { margin-top: 12px; color: var(--site-text); font: var(--site-w-strong) var(--site-t-body-sm-size) / var(--site-t-body-sm-lh) var(--site-font); }
& > p:nth-of-type(2) { margin-top: 2px; color: var(--site-muted); font: var(--site-w-body) var(--site-t-micro-size) / var(--site-t-micro-lh) var(--site-font); }
& > div:nth-of-type(2) {
margin-top: 24px;
color: var(--site-muted);
font: var(--site-w-body) var(--site-t-body-sm-size) / var(--site-t-body-sm-lh) var(--site-font);
& > span { color: inherit; font: inherit; }
& > span:first-child { color: var(--site-text); font: var(--site-w-heavy) var(--site-t-h1-size) / var(--site-t-h1-lh) var(--site-font); letter-spacing: var(--site-t-h1-ls); font-variant-numeric: tabular-nums; }
& > p { margin: 4px 0 0; color: inherit; font: inherit; }
}
& > ul {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 24px;
padding-top: 24px;
border-top: 1px solid var(--site-border);
& > li { margin: 0; gap: 10px; color: var(--site-muted); font: var(--site-w-body) var(--site-t-body-sm-size) / var(--site-t-body-sm-lh) var(--site-font); }
& > li > span { width: 16px; height: 16px; margin-top: calc((var(--site-t-body-sm-lh) - 16px) / 2); border-radius: 0; background: none; color: var(--site-success); }
& > li > span > svg { width: 16px; height: 16px; color: inherit; stroke-width: 2.5; }
}
& > a { margin-top: 28px; width: 100%; }
}
@media (max-width: 767.98px) {
#pricing div:has(> ul):not(:has(> .ui-btn--primary)) {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
column-gap: 16px;
align-items: baseline;
& > div:first-of-type { grid-area: 1 / 1; }
& > p:first-of-type { grid-area: 2 / 1; margin-top: 4px; color: var(--site-muted); font-weight: var(--site-w-body); }
& > div:nth-of-type(2) { grid-area: 1 / 2 / 3 / 3; align-self: start; margin: 0; text-align: right; }
& > div:nth-of-type(2) > span:first-child { font-size: var(--site-t-h3-size); line-height: var(--site-t-h3-lh); letter-spacing: var(--site-t-h3-ls); }
& > div:nth-of-type(2) > span:nth-child(2) { display: block; }
& > a { grid-column: 1 / -1; margin-top: 16px; }
& > ul, & > p:nth-of-type(2) {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
opacity: 0;
}
}
}
#pricing > div:not([aria-hidden]) > p {
margin: 0 0 24px;
color: var(--site-muted);
font: var(--site-w-body) var(--site-t-body-sm-size) / var(--site-t-body-sm-lh) var(--site-font);
text-align: left;
}
#pricing div:has(> div > h3):not(:has(> ul)) {
align-items: stretch;
gap: 16px;
margin-top: 12px;
text-align: left;
@media (min-width: 640px) { align-items: center; gap: 24px; }
@media (min-width: 768px) { margin-top: 16px; }
@media (min-width: 1024px) { margin-top: 24px; padding: 24px 32px; border-radius: var(--site-r-hero); }
& > div { text-align: left; & > * { margin: 0; } }
& p { margin-top: 4px; color: var(--site-muted); font: var(--site-w-body) var(--site-t-body-size) / var(--site-t-body-lh) var(--site-font); }
& p + p { color: var(--site-subtle); font-size: var(--site-t-body-sm-size); line-height: var(--site-t-body-sm-lh); }
& > a { flex: none; }
@media (max-width: 639.98px) { & > a { min-height: 54px; border-radius: var(--site-r-btn); font: var(--site-t-button); } }
}
:is(.ui-pay > div, .ui-pagehead, .ui-pagehead ~ .ui-container) {
--color-white: var(--site-text);
--color-slate-200: var(--site-text);
--color-slate-300: var(--site-text);
--color-slate-400: var(--site-muted);
--color-slate-500: var(--site-muted);
--color-slate-600: var(--site-muted);
--color-gray-400: var(--site-muted);
--color-red-400: var(--site-danger);
--color-red-500: var(--site-danger);
--color-amber-300: var(--site-warn);
--color-amber-400: var(--site-warn);
--color-amber-500: var(--site-warn);
--color-green-400: var(--site-success);
--color-green-500: var(--site-success);
--color-emerald-400: var(--site-success);
--color-emerald-500: var(--site-success);
--color-sky-400: var(--site-info);
--color-sky-500: var(--site-info);
--color-blue-400: var(--site-info);
--color-blue-500: var(--site-info);
--color-purple-200: var(--site-text);
--color-purple-300: var(--site-link);
--color-purple-400: var(--site-link);
--color-purple-500: var(--site-accent);
--color-orange-300: var(--site-accent);
--color-orange-400: var(--site-accent);
}
.ui-pagehead {
box-sizing: border-box;
max-width: calc(var(--site-container) + 2 * var(--site-gutter));
padding: calc(var(--site-nav-h) + 32px) var(--site-gutter) 0;
text-align: left;
@media (min-width: 768px) { text-align: center; }
@media (min-width: 1024px) { padding-top: calc(var(--site-nav-h) + 64px); }
& > h1 {
max-width: 20ch;
margin: 0;
color: var(--site-text);
font: var(--site-w-heavy) var(--site-t-h1-size) / var(--site-t-h1-lh) var(--site-font);
letter-spacing: var(--site-t-h1-ls);
text-wrap: balance;
}
& > p {
max-width: 36em;
margin: 16px 0 0;
color: var(--site-muted);
font: var(--site-w-body) var(--site-t-lead-size) / var(--site-t-lead-lh) var(--site-font);
letter-spacing: var(--site-t-lead-ls);
}
@media (min-width: 768px) { & > h1, & > p { margin-inline: auto; } }
}
.ui-pagehead + #pricing {
padding: var(--site-stack) 0 0;
& > div[aria-hidden] { display: none; }
& > div:not([aria-hidden]) {
box-sizing: border-box;
max-width: calc(var(--site-container) + 2 * var(--site-gutter));
padding: 0 var(--site-gutter);
}
}
.ui-pagehead ~ .ui-container {
padding-bottom: var(--site-section-y-lg);
& > section:not(.ui-cta) { margin: 0; }
& > .ui-section > h2 {
margin: 0;
color: var(--site-text);
font: var(--site-w-heavy) var(--site-t-h2-size) / var(--site-t-h2-lh) var(--site-font);
letter-spacing: var(--site-t-h2-ls);
text-wrap: balance;
}
& > .ui-section > h2 + p {
max-width: 40em;
margin: 12px 0 0;
color: var(--site-muted);
font: var(--site-w-body) var(--site-t-lead-size) / var(--site-t-lead-lh) var(--site-font);
letter-spacing: var(--site-t-lead-ls);
}
}
.ui-pagehead ~ .ui-container .ui-grid {
gap: 12px;
margin-top: var(--site-stack);
@media (min-width: 640px) { gap: 16px; }
@media (min-width: 1024px) { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
& > .ui-card > h3 { margin: 0; color: var(--site-text); font: var(--site-w-heavy) var(--site-t-h4-size) / var(--site-t-h4-lh) var(--site-font); letter-spacing: var(--site-t-h4-ls); }
& > .ui-card > p { margin: 8px 0 0; color: var(--site-muted); font: var(--site-w-body) var(--site-t-body-sm-size) / var(--site-t-body-sm-lh) var(--site-font); }
}
.ui-faq {
@media (min-width: 1024px) {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
column-gap: 64px;
align-items: start;
}
& > div { display: flex; flex-direction: column; gap: 8px; margin-top: var(--site-stack); & > * { margin: 0; } }
@media (min-width: 1024px) { & > div { margin-top: 0; } }
}
.ui-faq__item {
padding: 0;
border: 1px solid var(--site-border);
border-radius: var(--site-r-row);
background: var(--site-glass);
box-shadow: none;
backdrop-filter: none;
}
.ui-faq__q {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
box-sizing: border-box;
min-height: 60px;
padding: 16px 20px;
border-radius: var(--site-r-row);
list-style: none;
color: var(--site-text);
font: var(--site-w-strong) var(--site-t-body-size) / var(--site-t-body-lh) var(--site-font);
cursor: pointer;
transition: background-color var(--site-dur-fast) var(--site-ease);
&::-webkit-details-marker { display: none; }
&::after {
content: '';
flex: none;
width: var(--site-icon-md);
height: var(--site-icon-md);
background: var(--site-muted);
-webkit-mask: var(--ui-chevron) center / contain no-repeat;
mask: var(--ui-chevron) center / contain no-repeat;
transition: rotate var(--site-dur-sheet) var(--site-ease);
}
@media (hover: hover) { &:hover { background: var(--site-chip); } }
&:focus-visible { outline-offset: -2px; }
}
.ui-faq__item[open] > .ui-faq__q::after { rotate: 180deg; }
.ui-faq__a { margin: 0; padding: 0 20px 20px; color: var(--site-muted); font: var(--site-w-body) var(--site-t-body-size) / var(--site-t-body-lh) var(--site-font); }
.ui-faq__a + a {
display: flex;
align-items: center;
width: fit-content;
min-height: 44px;
margin: -12px 20px 8px;
color: var(--site-link);
font: var(--site-w-strong) var(--site-t-body-sm-size) / var(--site-t-body-sm-lh) var(--site-font);
text-decoration: underline 1px;
text-underline-offset: 3px;
@media (hover: hover) { &:hover { color: var(--site-link-hover); } }
}
.ui-cta {
display: grid;
justify-items: start;
gap: 24px;
margin-top: var(--site-section-y);
padding: 32px 24px;
border: 1px solid var(--site-border);
border-radius: var(--site-r-hero);
background: var(--site-bg-gradient);
box-shadow: var(--site-shadow-card);
backdrop-filter: none;
color: var(--site-text);
text-align: left;
@media (min-width: 768px) { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 32px; padding: 48px; }
@media (min-width: 1024px) { padding: 56px 64px; }
}
.ui-cta__title {
margin: 0;
color: var(--site-text);
font: var(--site-w-heavy) var(--site-t-h2-size) / var(--site-t-h2-lh) var(--site-font);
letter-spacing: var(--site-t-h2-ls);
text-wrap: balance;
}
.ui-cta__actions {
display: flex;
flex-direction: column;
gap: 12px;
width: 100%;
margin: 0;
@media (min-width: 640px) { flex-direction: row; width: auto; }
}
.ui-pay {
background: transparent;
& > div[aria-hidden] { display: none; }
& > div:not([aria-hidden]) {
align-items: flex-start;
padding: calc(var(--site-nav-h) + 32px) var(--site-gutter) var(--site-section-y);
@media (min-width: 768px) { padding-top: calc(var(--site-nav-h) + 64px); }
}
}
.ui-pay > div:not([aria-hidden]) > div {
box-sizing: border-box;
max-width: 560px;
padding: 32px 20px 28px;
border: 1px solid var(--site-border);
border-radius: var(--site-r-hero);
background: var(--site-glass);
box-shadow: var(--site-shadow-card);
color: var(--site-muted);
font: var(--site-w-body) var(--site-t-body-size) / var(--site-t-body-lh) var(--site-font);
@media (min-width: 768px) { padding: 48px 40px 40px; }
& > h1 {
margin: 0 0 12px;
color: var(--site-text);
font: var(--site-w-heavy) var(--site-t-h2-size) / var(--site-t-h2-lh) var(--site-font);
letter-spacing: var(--site-t-h2-ls);
text-wrap: balance;
}
& > h1 + p { margin: 0 0 24px; color: var(--site-muted); }
& .checkmark-circle, & .checkmark-check { stroke: var(--site-success); }
& .x-circle, & .x-line { stroke: var(--site-danger); }
& .pending-spinner { border-color: var(--site-chip); border-top-color: var(--site-accent); }
& > p { font-size: var(--site-t-body-sm-size); line-height: var(--site-t-body-sm-lh); }
& > h1 + p, & > h1 + p + p { font-size: var(--site-t-body-size); line-height: var(--site-t-body-lh); }
& > p > a { color: var(--site-link); }
& > div:has(> ul) { text-align: left; & > p:first-child { color: var(--site-text); font-weight: var(--site-w-strong); } }
& > div:has(> ul) li { color: var(--site-muted); }
& > div:has(> p:only-child) { text-align: left; }
& > div:has(> :is(a, button) + :is(a, button)) {
gap: 12px;
margin: 0 0 20px;
& > * { width: 100%; }
@media (min-width: 640px) { & > * { width: auto; min-width: 176px; } }
}
& > div:not(:has(> ul)):has(> p:first-child + :is(button, p)) {
margin: 0 0 24px;
& > p:first-child { margin: 0 0 12px; color: var(--site-text); }
& > p + p { margin: 0 0 12px; }
& > p:last-child:not(:first-child) { margin: 12px 0 0; }
}
& > div:has(> :is(a, button) + :is(a, button)) > *,
& > div:not(:has(> ul)):has(> p:first-child + :is(button, p)) > :is(a, button) {
box-sizing: border-box;
min-height: 54px;
padding: 0 24px;
border: 0;
border-radius: var(--site-r-btn);
background: var(--site-primary-fill);
box-shadow: var(--site-shadow-primary);
color: var(--site-on-primary);
font: var(--site-t-button);
letter-spacing: -0.01em;
transition: box-shadow var(--site-dur-fast) var(--site-ease), background-color var(--site-dur-fast) var(--site-ease);
@media (hover: hover) { &:hover { box-shadow: var(--site-hover-primary), var(--site-shadow-primary); } }
&:active { box-shadow: var(--site-pressed-primary); }
&:disabled { opacity: 1; }
}
& > div:has(> :is(a, button) + :is(a, button)) > :last-child,
& > div:has(> p:first-child + button) ~ div > :first-child,
& > div:not(:has(> ul)):has(> p:first-child + :is(button, p)) > a {
background: transparent;
box-shadow: inset 0 0 0 1.5px var(--site-outline);
color: var(--site-text);
@media (hover: hover) { &:hover { background: var(--site-chip); box-shadow: inset 0 0 0 1.5px var(--site-outline); } }
&:active { box-shadow: var(--site-pressed-shadow), inset 0 0 0 1.5px var(--site-outline); }
}
}
.ui-pay > div:not([aria-hidden]):not(:has(.x-circle)) {
--ui-pay-h: 782px;
min-height: calc(var(--site-nav-h) + 32px + var(--ui-pay-h) + var(--site-section-y));
@media (min-width: 768px) { --ui-pay-h: 670px; min-height: calc(var(--site-nav-h) + 64px + var(--ui-pay-h) + var(--site-section-y)); }
@media (min-width: 1024px) { --ui-pay-h: 726px; }
& > div > div[aria-hidden]:first-child { margin-bottom: 40px; }
}
:is(.ui-pay--confirmed, .ui-pay:has(.pending-spinner)) > div:not([aria-hidden]) > div {
display: flex;
flex-direction: column;
min-height: var(--ui-pay-h);
}
.ui-pay--confirmed > div:not([aria-hidden]) > div > div:has(> :is(a, button) + :is(a, button)) { margin-top: auto; }
.ui-pay:has(.pending-spinner) > div:not([aria-hidden]) > div > p:last-child {
position: relative;
margin-top: auto;
&::before { content: ''; position: absolute; inset: -20px 0 auto; border-top: 1px solid var(--site-border); }
}
#pricing ~ .ui-container > .ui-cta {
@media (min-width: 768px) and (max-width: 1023.98px) { grid-template-columns: minmax(0, 1fr); }
}
#pricing:not(:has(p.text-center.text-slate-500.mb-6)) ~ .ui-container > .ui-cta {
@media (min-width: 768px) { grid-template-columns: auto minmax(0, 1fr); &::before { grid-row: span 2; } }
@media (min-width: 1200px) { grid-template-columns: auto minmax(0, 1fr) auto; &::before { grid-row: auto; } }
&::before {
content: '';
width: 98px;
height: 120px;
background: url('/site-v2/fox-wave-bust-120@2x.png?v=319e8d8e') center / contain no-repeat;
background-image: image-set(url('/site-v2/fox-wave-bust-120@2x.webp?v=887f3b94') type('image/webp') 2x, url('/site-v2/fox-wave-bust-120@3x.webp?v=7af3dac3') type('image/webp') 3x, url('/site-v2/fox-wave-bust-120@2x.png?v=319e8d8e') type('image/png') 2x);
pointer-events: none;
}
}
.ui-pay--paid > div:not([aria-hidden]) > div:not(:has(> p.text-amber-300)) {
& > svg:first-child { display: none; }
&::before {
content: '';
display: block;
width: 66px;
height: 88px;
margin: 0 auto 16px;
background: url('/site-v2/fox-thumbs-up-bust-104@2x.png?v=75a09a99') center / contain no-repeat;
background-image: image-set(url('/site-v2/fox-thumbs-up-bust-104@2x.webp?v=203306ca') type('image/webp') 2x, url('/site-v2/fox-thumbs-up-bust-104@3x.webp?v=073d8fad') type('image/webp') 3x, url('/site-v2/fox-thumbs-up-bust-104@2x.png?v=75a09a99') type('image/png') 2x);
pointer-events: none;
}
}
}