@keyframes ui-home-fade { from { opacity: 0; } }
:root[data-ui='v2']:not(:has([data-ui='v1'])) {
#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); } }
}
.ui-hero {
display: block;
min-height: 0;
padding: calc(var(--site-nav-h) + 24px) 0 0;
@media (min-width: 1024px) { padding-top: calc(var(--site-nav-h) + 64px); }
& > div[aria-hidden], & > div:last-child { display: none; }
& > div:nth-child(2) {
box-sizing: border-box;
max-width: calc(var(--site-container) + 2 * var(--site-gutter));
padding: 0 var(--site-gutter);
}
& > div:nth-child(2) > div {
align-items: stretch;
gap: 40px;
@media (min-width: 1152px) {
display: grid;
grid-template-columns: minmax(0, 1fr) 440px;
align-items: center;
gap: 56px;
}
}
}
.ui-hero div:has(> h1) {
max-width: none;
& > * { margin: 0; }
& > div:first-child {
display: inline-flex;
align-items: flex-start;
gap: 8px;
padding: 6px 14px;
border: 0;
border-radius: var(--site-r-btn);
background: var(--site-chip);
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 { flex: none; width: 6px; height: 6px; margin-top: calc((var(--site-t-body-sm-lh) - 6px) / 2); background: var(--site-accent); animation: none; }
}
& > h1 {
margin-top: 16px;
color: var(--site-text);
font: var(--site-w-heavy) var(--site-t-display-size) / var(--site-t-display-lh) var(--site-font);
letter-spacing: var(--site-t-display-ls);
& > span { color: var(--site-text); }
& > span:last-child { background: none; color: var(--site-muted); -webkit-text-fill-color: currentColor; }
}
& > h1 + p {
max-width: 34ch;
margin-top: 16px;
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);
}
& > h1 + p + div {
gap: 12px;
margin-top: 24px;
& > a { width: 100%; }
@media (min-width: 640px) { & > a { width: auto; min-width: 176px; } }
@media (min-width: 1024px) { margin-top: 40px; gap: 16px; }
}
& > div:last-child {
gap: 8px 20px;
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 { gap: 8px; }
& svg { width: var(--site-icon-sm); height: var(--site-icon-sm); color: var(--site-success); }
}
}
@media (min-width: 480px) {
.ui-hero .ui-globe {
box-sizing: border-box;
width: 100%;
height: 460px;
margin: 0;
padding: 0;
& > div, & canvas { flex: none; width: 420px; height: 420px; }
& > div > div[aria-hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) { & canvas { animation: ui-home-fade var(--site-dur-sheet) var(--site-ease); } }
}
}
:is(#features, #how-it-works, #pricing, #download, #faq) {
padding: var(--site-section-y) 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);
}
& div:has(> h2) {
max-width: 720px;
margin: 0 0 var(--site-stack);
text-align: left;
& > * { margin: 0; }
& > span {
display: block;
margin-bottom: 12px;
padding: 0;
border: 0;
background: none;
color: var(--site-accent);
font: var(--site-w-strong) var(--site-t-micro-size) / var(--site-t-micro-lh) var(--site-font);
letter-spacing: 0.06em;
}
& > h2 {
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;
}
& > p {
max-width: 36em;
margin-top: 12px;
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);
}
& > a {
display: inline-flex;
align-items: center;
min-height: 44px;
margin-top: 4px;
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); } }
}
}
}
:is(#features, #how-it-works) :is(h3, h3 + p) { margin: 0; }
:is(#features, #how-it-works) 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); }
:is(#features, #how-it-works) h3 + p { margin-top: 8px; color: var(--site-muted); font: var(--site-w-body) var(--site-t-body-size) / var(--site-t-body-lh) var(--site-font); }
#features div:has(> div > h3) {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0;
border: 1px solid var(--site-border);
border-radius: var(--site-r-hero);
background: var(--site-glass);
box-shadow: var(--site-shadow-card);
overflow: hidden;
@media (min-width: 640px) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
#features div:has(> h3) {
padding: 24px 20px;
border: 0;
border-radius: 0;
background: none;
box-shadow: none !important;
backdrop-filter: none;
scale: none;
translate: none;
@media (min-width: 1024px) { padding: 32px; }
& > div:empty { display: none; }
& > div:has(> svg) {
width: 44px;
height: 44px;
margin: 0 0 16px;
border-radius: var(--site-r-tile);
background: var(--site-accent-tint);
box-shadow: none;
color: var(--site-accent);
& > svg { width: var(--site-icon-lg); height: var(--site-icon-lg); color: inherit; }
}
}
@media (max-width: 639.98px) {
#features div:has(> h3) {
display: grid;
grid-template-columns: 44px minmax(0, 1fr);
column-gap: 16px;
padding: 20px;
& > div:has(> svg) { grid-area: 1 / 1 / 3 / 2; margin: 0; }
& > h3 { grid-column: 2; padding-top: 11px; }
& > p { grid-column: 2; }
& + div { border-top: 1px solid var(--site-border); }
}
}
@media (min-width: 640px) {
#features div:has(> h3):nth-child(n + 3) { border-top: 1px solid var(--site-border); }
#features div:has(> h3):nth-child(2n) { border-left: 1px solid var(--site-border); }
}
#how-it-works div:has(> div > div > h3) {
grid-template-columns: minmax(0, 1fr);
gap: 12px;
@media (min-width: 768px) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (min-width: 1024px) { gap: 24px; }
& > div:not(:has(h3)) { display: none; }
}
#how-it-works div:has(> div > h3) {
position: relative;
align-items: stretch;
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);
text-align: left;
& > div:first-child {
position: static;
width: 44px;
height: 44px;
margin: 0 0 16px;
border: 0;
border-radius: var(--site-r-tile);
background: var(--site-accent-tint);
box-shadow: none !important;
& > div { display: none; }
& > svg { position: static; width: var(--site-icon-md); height: var(--site-icon-md); color: var(--site-accent); }
& > span {
top: var(--site-pad-card);
right: var(--site-pad-card);
width: 28px;
height: 28px;
background: var(--site-chip);
color: var(--site-muted);
font: var(--site-w-heavy) 13px / 1 var(--site-font);
font-variant-numeric: tabular-nums;
}
}
& > div:last-child { padding: 0; border: 0; border-radius: 0; background: none; backdrop-filter: none; }
@media (max-width: 639.98px) {
display: grid;
grid-template-columns: 44px minmax(0, 1fr);
column-gap: 16px;
& > div:first-child { grid-area: 1 / 1; margin: 0; }
& > div:last-child { grid-area: 1 / 2; }
& h3 { padding: 11px 40px 0 0; }
}
}
#pricing > div:not([aria-hidden]) {
@media (min-width: 1024px) {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
column-gap: 32px;
& > * { grid-column: 1 / -1; }
& > div:has(> h2) { grid-column: 1; }
& > div:has(> h2) + div:has(> div > button) { grid-column: 2; align-self: end; margin-bottom: var(--site-stack); }
}
}
#download div:has(> div > p + a) {
grid-template-columns: minmax(0, 1fr);
gap: 12px;
@media (min-width: 768px) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (min-width: 1024px) { gap: 24px; }
}
#download div:has(> p + a) {
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;
color: var(--site-muted);
font: var(--site-w-body) var(--site-t-body-sm-size) / var(--site-t-body-sm-lh) var(--site-font);
& > * { margin: 0; }
& > div:first-child {
gap: 12px;
margin-bottom: 20px;
& > span { width: 44px; height: 44px; border: 0; border-radius: var(--site-r-tile); background: var(--site-accent-tint); color: var(--site-accent); }
& > span > svg { width: var(--site-icon-md); height: var(--site-icon-md); color: inherit; }
& > div > div:first-child { 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); }
& > div > div:last-child { margin-top: 2px; color: var(--site-subtle); font: inherit; }
}
& > div:nth-child(2) { color: var(--site-text); font: var(--site-w-strong) var(--site-t-body-size) / var(--site-t-body-lh) var(--site-font); }
& > p { margin-top: 4px; color: var(--site-muted); font: inherit; }
& > p:last-of-type { margin-top: 16px; }
& > p.ui-store__note--warn { color: var(--site-warn); }
& > div:has(> a) { gap: 8px; margin-top: 16px; }
& a[target] {
min-height: 44px;
padding: 0 16px;
border: 0;
border-radius: var(--site-r-pill);
background: transparent;
box-shadow: inset 0 0 0 1.5px var(--site-outline);
color: var(--site-text);
font: var(--site-w-strong) var(--site-t-label-size) / 1 var(--site-font);
@media (hover: hover) { &:hover { background: var(--site-chip); } }
}
& > a:last-child {
display: flex;
min-height: 44px;
margin-top: auto;
padding-top: 12px;
border-top: 0;
color: var(--site-link);
font: var(--site-w-strong) var(--site-t-body-sm-size) / var(--site-t-body-sm-lh) var(--site-font);
@media (hover: hover) { &:hover { color: var(--site-link-hover); } }
}
}
#download > div:not([aria-hidden]) > p:last-child {
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);
text-align: left;
& > a { color: var(--site-link); text-decoration-color: currentColor; }
}
#faq {
padding-bottom: var(--site-section-y-lg);
& > div:not([aria-hidden]) {
@media (min-width: 1024px) {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
column-gap: 64px;
align-items: start;
& > div:has(> h2) { grid-row: 1 / span 2; }
& > :not(:has(> h2)) { grid-column: 2; }
}
}
& div:has(> div > button) { display: flex; flex-direction: column; gap: 8px; & > * { margin: 0; } }
& div:has(> button) {
border: 1px solid var(--site-border);
border-radius: var(--site-r-row);
background: var(--site-glass);
backdrop-filter: none;
}
& button {
gap: 16px;
min-height: 60px;
padding: 16px 20px;
color: var(--site-text);
cursor: pointer;
transition: background-color var(--site-dur-fast) var(--site-ease);
@media (hover: hover) { &:hover { background: var(--site-chip); } }
&:focus-visible { outline-offset: -2px; border-radius: var(--site-r-row); }
& > span { padding: 0; color: var(--site-text); font: var(--site-w-strong) var(--site-t-body-size) / var(--site-t-body-lh) var(--site-font); }
& > svg { width: var(--site-icon-md); height: var(--site-icon-md); color: var(--site-muted); transition-duration: var(--site-dur-sheet); transition-timing-function: var(--site-ease); }
}
& div[id] { transition-duration: var(--site-dur-sheet); transition-timing-function: var(--site-ease); }
& div[id] p { 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); }
& > div:not([aria-hidden]) > p:last-child {
margin: 24px 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);
text-align: left;
& > a { color: var(--site-link); @media (hover: hover) { &:hover { color: var(--site-link-hover); } } }
}
}
}